diff --git a/bun.lockb b/bun.lockb index 75a9c9ef..8cabc2d3 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/components/docs/controls/command-menu/command-menu-blur-demo.tsx b/components/docs/controls/command-menu/command-menu-blur-demo.tsx new file mode 100644 index 00000000..6390ce3d --- /dev/null +++ b/components/docs/controls/command-menu/command-menu-blur-demo.tsx @@ -0,0 +1,76 @@ +'use client' + +import React from 'react' + +import { IconBill, IconCube, IconGear, IconHome, IconNotes, IconShield } from 'justd-icons' +// Replace with your router link component +import Link from 'next/link' +import { Avatar, Button, CommandMenu } from 'ui' + +export default function CommandMenuBlurDemo() { + const [isOpen, setIsOpen] = React.useState(false) + return ( + <> + + + + + + + + Home + + + + + Docs + + + + + + Components + + + + + + + Billing + + + + + Settings + + + + + + Security + + + + + {users.map((user) => ( + + + {user.name} + + ))} + + + + + ) +} + +const users = [ + { id: 1, name: 'Barbara Kirlin Sr.', image_url: 'https://i.pravatar.cc/150?img=1' }, + { id: 2, name: 'Rosemarie Koch', image_url: 'https://i.pravatar.cc/150?img=2' }, + { id: 3, name: 'Mrs. Reva Heaney Jr.', image_url: 'https://i.pravatar.cc/150?img=3' }, + { id: 5, name: 'Bria Ziemann', image_url: 'https://i.pravatar.cc/150?img=5' }, + { id: 6, name: 'Heloise Borer Sr.', image_url: 'https://i.pravatar.cc/150?img=6' } +] diff --git a/components/docs/generated/previews.ts b/components/docs/generated/previews.ts index a69e0b15..9af5bcde 100644 --- a/components/docs/generated/previews.ts +++ b/components/docs/generated/previews.ts @@ -2,7 +2,7 @@ // This file is autogenerated by scripts/create-pr-content.ts. // Do not edit this file directly. -import React from 'react'; +import React from 'react' export const previews: Record = { "date-and-time/date-field/date-field-demo": { @@ -737,6 +737,9 @@ export const previews: Record = { "controls/command-menu/command-menu-trigger-by-keyboard-demo": { component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-trigger-by-keyboard-demo")), }, + "controls/command-menu/command-menu-blur-demo": { + component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-blur-demo")), + }, "controls/command-menu/command-menu-demo": { component: React.lazy(() => import("@/components/docs/controls/command-menu/command-menu-demo")), }, diff --git a/components/ui/command-menu.tsx b/components/ui/command-menu.tsx index 94a1c5d9..8eadfcf5 100644 --- a/components/ui/command-menu.tsx +++ b/components/ui/command-menu.tsx @@ -19,7 +19,6 @@ const commandStyles = tv({ command: [ 'flex h-svh w-full flex-col overflow-hidden rounded-md sm:h-full', '[&_[cmdk-group-heading]]:ml-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:-mb-1.5 [&_[cmdk-group-heading]]:text-muted-fg [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_[data-slot=icon]]:size-5 [&_[cmdk-input]]:h-12', - // for specific properties, it has to be controlled by the command '[&_[cmdk-item]]:py-2.5 [&_[cmdk-item]]:pl-2.5 [&_[cmdk-item]]:pr-4' ], list: 'overflow-y-auto lg:pb-0 max-h-[calc(100vh-35%)] pb-16 [&:not(:has(.xda32kfseccmd))]:p-2 [&:not(:has(.xda32kfseccmd))_.s3xsprt]:my-2 overflow-x-hidden md:max-h-[456px]', @@ -50,14 +49,10 @@ const commandStyles = tv({ description: 'sm:inline hidden text-sm ml-auto', item: [ 'group relative flex cursor-default select-none items-center rounded-lg py-2 text-sm outline-none', - // selected 'data-[selected=true]:bg-accent data-[selected=true]:text-accent-fg [&[data-selected=true]_[data-slot=icon]]:text-accent-fg', 'focus-visible:bg-accent focus-visible:text-accent-fg [&:focus-visible_[data-slot=icon]]:text-accent-fg', - // danger 'data-[danger=true]:text-danger data-[danger=true]:data-[selected=true]:bg-danger data-[danger=true]:data-[selected=true]:text-danger-fg', - // disabled 'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50', - // icon '[&_[data-slot=icon]]:mr-2 [&_[data-slot=icon]]:size-[1.10rem] [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg', '[&_[data-slot=avatar]]:mr-2 [&_[data-slot=avatar]]:size-[1.10rem] [&_[data-slot=avatar]]:shrink-0' ] @@ -66,6 +61,9 @@ const commandStyles = tv({ variants: { isDanger: { true: 'text-danger data-[selected=true]:bg-danger data-[selected=true]:text-danger-fg [&[data-selected=true]_[data-slot=icon]]:text-danger-fg' + }, + isBlurred: { + true: 'backdrop-blur-sm' } } }) @@ -88,6 +86,7 @@ interface CommandMenuContextProps { hideSearchIndicator?: boolean hideCloseButton?: boolean messageOnEmpty?: boolean | string + isBlurred?: boolean } const CommandMenuContext = React.createContext({}) @@ -115,6 +114,7 @@ interface CommandMenuProps overlay?: string content?: string } + isBlurred?: boolean } const CommandMenu = ({ @@ -125,14 +125,18 @@ const CommandMenu = ({ value, onValueChange, children, + isBlurred = false, ...props }: CommandMenuProps) => { const isDesktop = useMediaQuery('(min-width: 1024px)') + return ( diff --git a/components/ui/field.tsx b/components/ui/field.tsx index 5089cafc..6a947257 100644 --- a/components/ui/field.tsx +++ b/components/ui/field.tsx @@ -2,19 +2,21 @@ import * as React from 'react' +import type { + FieldErrorProps, + GroupProps, + InputProps, + LabelProps, + TextFieldProps as TextFieldPrimitiveProps, + TextProps, + ValidationResult +} from 'react-aria-components' import { FieldError as FieldErrorPrimitive, - type FieldErrorProps, Group, - type GroupProps, Input as InputPrimitive, - type InputProps, Label as LabelPrimitive, - type LabelProps, - Text, - type TextFieldProps as TextFieldPrimitiveProps, - type TextProps, - type ValidationResult + Text } from 'react-aria-components' import { tv } from 'tailwind-variants' diff --git a/resources/content/docs/components/controls/command-menu.mdx b/resources/content/docs/components/controls/command-menu.mdx index 808e2ef8..d76f2ed0 100644 --- a/resources/content/docs/components/controls/command-menu.mdx +++ b/resources/content/docs/components/controls/command-menu.mdx @@ -24,6 +24,11 @@ This command menu is straightforward and always under your control, allowing you ## Anatomy + +## Blurred +The `isBlurred` prop can be used to blur the background of the `CommandMenu` component. To do that, simply add the prop to the `CommandMenu` component: + + ## Separator Add a separator between items for clear distinction. @@ -140,3 +145,7 @@ export function CommandPalette({ open, setOpen }: Props) { }, [pathname, setOpen]) return (...) ``` + +## Blur +If you want to blur the background, you can use `isBlurred` prop. +