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.
+