diff --git a/docs/app/global.css b/docs/app/global.css index 2a4db71c34..861e3a0289 100644 --- a/docs/app/global.css +++ b/docs/app/global.css @@ -1,4 +1,5 @@ @import "tailwindcss"; +@import "tw-animate-css"; @import "fumadocs-ui/css/vitepress.css"; @import "fumadocs-ui/css/preset.css"; @import "fumadocs-twoslash/twoslash.css"; @@ -6,3 +7,125 @@ @source "."; @source "../components"; @source "../content"; +/* Ensures CSS is generated also for ShadCN components. */ +@source "../node_modules/@blocknote/shadcn"; + +/* Add ShadCN theme variables. */ +@custom-variant dark (&:is(.dark *)); + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/docs/package.json b/docs/package.json index 76ae06de20..30dd90280c 100644 --- a/docs/package.json +++ b/docs/package.json @@ -102,7 +102,9 @@ "y-partykit": "^0.0.25", "yjs": "^13.6.27", "zod": "^3.25.67", - "zustand": "^5.0.3" + "zustand": "^5.0.3", + "tailwindcss": "^4.1.12", + "tw-animate-css": "^1.3.7" }, "devDependencies": { "@blocknote/ariakit": "workspace:^", @@ -134,9 +136,10 @@ "postcss": "^8.5.6", "react-email": "^4.0.16", "react-icons": "^5.5.0", - "tailwindcss": "^4.1.10", + "tailwindcss": "^4.1.12", + "tw-animate-css": "^1.3.7", "typescript": "^5.8.3", "y-partykit": "^0.0.33", "yjs": "^13.6.27" } -} +} \ No newline at end of file diff --git a/examples/01-basic/09-shadcn/.bnexample.json b/examples/01-basic/09-shadcn/.bnexample.json index 6d4a02dd52..3be8f1abba 100644 --- a/examples/01-basic/09-shadcn/.bnexample.json +++ b/examples/01-basic/09-shadcn/.bnexample.json @@ -2,5 +2,9 @@ "playground": true, "docs": true, "author": "matthewlipski", - "tags": ["Basic"] + "tags": ["Basic"], + "dependencies": { + "tailwindcss": "^4.1.12", + "tw-animate-css": "^1.3.7" + } } diff --git a/examples/01-basic/09-shadcn/package.json b/examples/01-basic/09-shadcn/package.json index 99fc5808ce..2e26c10e1f 100644 --- a/examples/01-basic/09-shadcn/package.json +++ b/examples/01-basic/09-shadcn/package.json @@ -16,7 +16,9 @@ "@blocknote/mantine": "latest", "@blocknote/shadcn": "latest", "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "tailwindcss": "^4.1.12", + "tw-animate-css": "^1.3.7" }, "devDependencies": { "@types/react": "^19.1.0", diff --git a/examples/01-basic/09-shadcn/src/App.tsx b/examples/01-basic/09-shadcn/src/App.tsx index 754b4a5e94..bb645397e3 100644 --- a/examples/01-basic/09-shadcn/src/App.tsx +++ b/examples/01-basic/09-shadcn/src/App.tsx @@ -3,6 +3,8 @@ import { useCreateBlockNote } from "@blocknote/react"; import { BlockNoteView } from "@blocknote/shadcn"; import "@blocknote/shadcn/style.css"; +import "./style.css"; + export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote(); diff --git a/examples/01-basic/09-shadcn/src/style.css b/examples/01-basic/09-shadcn/src/style.css new file mode 100644 index 0000000000..7a5aa46317 --- /dev/null +++ b/examples/01-basic/09-shadcn/src/style.css @@ -0,0 +1,123 @@ +@import "tailwindcss"; +@import "tw-animate-css"; + +@source "../node_modules/@blocknote/shadcn"; + +@custom-variant dark (&:is(.dark *)); + +:root { + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.145 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0.145 0 0); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.145 0 0); + --primary: oklch(0.205 0 0); + --primary-foreground: oklch(0.985 0 0); + --secondary: oklch(0.97 0 0); + --secondary-foreground: oklch(0.205 0 0); + --muted: oklch(0.97 0 0); + --muted-foreground: oklch(0.556 0 0); + --accent: oklch(0.97 0 0); + --accent-foreground: oklch(0.205 0 0); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.922 0 0); + --input: oklch(0.922 0 0); + --ring: oklch(0.708 0 0); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.985 0 0); + --sidebar-foreground: oklch(0.145 0 0); + --sidebar-primary: oklch(0.205 0 0); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0 0); + --sidebar-accent-foreground: oklch(0.205 0 0); + --sidebar-border: oklch(0.922 0 0); + --sidebar-ring: oklch(0.708 0 0); +} + +.dark { + --background: oklch(0.145 0 0); + --foreground: oklch(0.985 0 0); + --card: oklch(0.205 0 0); + --card-foreground: oklch(0.985 0 0); + --popover: oklch(0.205 0 0); + --popover-foreground: oklch(0.985 0 0); + --primary: oklch(0.922 0 0); + --primary-foreground: oklch(0.205 0 0); + --secondary: oklch(0.269 0 0); + --secondary-foreground: oklch(0.985 0 0); + --muted: oklch(0.269 0 0); + --muted-foreground: oklch(0.708 0 0); + --accent: oklch(0.269 0 0); + --accent-foreground: oklch(0.985 0 0); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.556 0 0); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.205 0 0); + --sidebar-foreground: oklch(0.985 0 0); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.269 0 0); + --sidebar-accent-foreground: oklch(0.985 0 0); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.556 0 0); +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} diff --git a/packages/shadcn/components.json b/packages/shadcn/components.json index 7b5a0aa931..eafc961dca 100644 --- a/packages/shadcn/components.json +++ b/packages/shadcn/components.json @@ -4,11 +4,10 @@ "rsc": false, "tsx": true, "tailwind": { - "config": "tailwind.config.js", "css": "src/style.css", "baseColor": "slate", "cssVariables": true, - "prefix": "bn" + "prefix": "" }, "aliases": { "components": "@/components", diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json index fa99fe698f..20bfdf3657 100644 --- a/packages/shadcn/package.json +++ b/packages/shadcn/package.json @@ -74,13 +74,10 @@ "lucide-react": "^0.525.0", "react-hook-form": "^7.54.2", "tailwind-merge": "^2.3.0", - "tailwindcss": "^4.1.12", - "tw-animate-css": "^1.3.7", "zod": "^3.24.2" }, "devDependencies": { "@radix-ui/colors": "^3.0.0", - "@tailwindcss/vite": "^4.1.12", "@types/node": "^20.12.7", "@types/react": "^19.1.0", "@types/react-dom": "^19.1.0", @@ -97,7 +94,8 @@ }, "peerDependencies": { "react": "^18.0 || ^19.0 || >= 19.0.0-rc", - "react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc" + "react-dom": "^18.0 || ^19.0 || >= 19.0.0-rc", + "tailwindcss": "^4.1.12" }, "eslintConfig": { "extends": [ diff --git a/packages/shadcn/src/badge/Badge.tsx b/packages/shadcn/src/badge/Badge.tsx index d8333fc2f1..74c1787953 100644 --- a/packages/shadcn/src/badge/Badge.tsx +++ b/packages/shadcn/src/badge/Badge.tsx @@ -30,7 +30,7 @@ export const Badge = forwardRef< variant={isSelected ? "secondary" : "outline"} className={cn( className, - "bn-flex bn-items-center bn-gap-1 bn-rounded-full bn-h-7 bn-px-2.5", + "flex h-7 items-center gap-1 rounded-full px-2.5", )} onClick={onClick} onMouseEnter={onMouseEnter} @@ -51,7 +51,7 @@ export const Badge = forwardRef< {badge} {mainTooltip} {secondaryTooltip && {secondaryTooltip}} @@ -73,10 +73,7 @@ export const BadgeGroup = forwardRef< return (
{children} diff --git a/packages/shadcn/src/comments/Card.tsx b/packages/shadcn/src/comments/Card.tsx index 70cdb17193..75b880b54f 100644 --- a/packages/shadcn/src/comments/Card.tsx +++ b/packages/shadcn/src/comments/Card.tsx @@ -28,8 +28,8 @@ export const Card = forwardRef< {headerText && ( -
- {headerText} -
+
{headerText}
)} {children}
@@ -58,9 +56,9 @@ export const CardSection = forwardRef<
diff --git a/packages/shadcn/src/comments/Comment.tsx b/packages/shadcn/src/comments/Comment.tsx index c493a56642..75caab87bb 100644 --- a/packages/shadcn/src/comments/Comment.tsx +++ b/packages/shadcn/src/comments/Comment.tsx @@ -25,47 +25,33 @@ const AuthorInfo = forwardRef< if (authorInfo === "loading") { return ( -
+
); } return ( -
+
{authorInfo.username[0]} -
- {authorInfo.username} - +
+ {authorInfo.username} + {timeString} {edited && `(${dict.comments.edited})`}
@@ -103,15 +89,12 @@ export const Comment = forwardRef< return (
setHovered(true)} onMouseLeave={() => setHovered(false)} > {doShowActions ? ( -
+
{actions}
) : null} diff --git a/packages/shadcn/src/components/ui/avatar.tsx b/packages/shadcn/src/components/ui/avatar.tsx index 41070f9c95..1dcdcee406 100644 --- a/packages/shadcn/src/components/ui/avatar.tsx +++ b/packages/shadcn/src/components/ui/avatar.tsx @@ -13,7 +13,7 @@ function Avatar({ ); @@ -42,7 +42,7 @@ function AvatarFallback({ svg]:size-3 bn:gap-1 bn:[&>svg]:pointer-events-none bn:focus-visible:border-ring bn:focus-visible:ring-ring/50 bn:focus-visible:ring-[3px] bn:aria-invalid:ring-destructive/20 bn:dark:aria-invalid:ring-destructive/40 bn:aria-invalid:border-destructive bn:transition-[color,box-shadow] bn:overflow-hidden", + "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", { variants: { variant: { default: - "bn:border-transparent bn:bg-primary bn:text-primary-foreground bn:[a&]:hover:bg-primary/90", + "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", secondary: - "bn:border-transparent bn:bg-secondary bn:text-secondary-foreground bn:[a&]:hover:bg-secondary/90", + "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", destructive: - "bn:border-transparent bn:bg-destructive bn:text-white bn:[a&]:hover:bg-destructive/90 bn:focus-visible:ring-destructive/20 bn:dark:focus-visible:ring-destructive/40 bn:dark:bg-destructive/60", + "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: - "bn:text-foreground bn:[a&]:hover:bg-accent bn:[a&]:hover:text-accent-foreground", + "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", }, }, defaultVariants: { diff --git a/packages/shadcn/src/components/ui/button.tsx b/packages/shadcn/src/components/ui/button.tsx index 6e10ccca17..43ab1151fc 100644 --- a/packages/shadcn/src/components/ui/button.tsx +++ b/packages/shadcn/src/components/ui/button.tsx @@ -5,27 +5,27 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "../../lib/utils"; const buttonVariants = cva( - "bn:inline-flex bn:items-center bn:justify-center bn:gap-2 bn:whitespace-nowrap bn:rounded-md bn:text-sm bn:font-medium bn:transition-all bn:disabled:pointer-events-none bn:disabled:opacity-50 bn:[&_svg]:pointer-events-none bn:[&_svg:not([class*=size-])]:size-4 bn:shrink-0 bn:[&_svg]:shrink-0 bn:outline-none bn:focus-visible:border-ring bn:focus-visible:ring-ring/50 bn:focus-visible:ring-[3px] bn:aria-invalid:ring-destructive/20 bn:dark:aria-invalid:ring-destructive/40 bn:aria-invalid:border-destructive", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: - "bn:bg-primary bn:text-primary-foreground bn:shadow-xs bn:hover:bg-primary/90", + "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90", destructive: - "bn:bg-destructive bn:text-white bn:shadow-xs bn:hover:bg-destructive/90 bn:focus-visible:ring-destructive/20 bn:dark:focus-visible:ring-destructive/40 bn:dark:bg-destructive/60", + "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: - "bn:border bn:bg-background bn:shadow-xs bn:hover:bg-accent bn:hover:text-accent-foreground bn:dark:bg-input/30 bn:dark:border-input bn:dark:hover:bg-input/50", + "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50", secondary: - "bn:bg-secondary bn:text-secondary-foreground bn:shadow-xs bn:hover:bg-secondary/80", + "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80", ghost: - "bn:hover:bg-accent bn:hover:text-accent-foreground bn:dark:hover:bg-accent/50", - link: "bn:text-primary bn:underline-offset-4 bn:hover:underline", + "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50", + link: "text-primary underline-offset-4 hover:underline", }, size: { - default: "bn:h-9 bn:px-4 bn:py-2 bn:has-[>svg]:px-3", - sm: "bn:h-8 bn:rounded-md bn:gap-1.5 bn:px-3 bn:has-[>svg]:px-2.5", - lg: "bn:h-10 bn:rounded-md bn:px-6 bn:has-[>svg]:px-4", - icon: "bn:size-9", + default: "h-9 px-4 py-2 has-[>svg]:px-3", + sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", + lg: "h-10 rounded-md px-6 has-[>svg]:px-4", + icon: "size-9", }, }, defaultVariants: { diff --git a/packages/shadcn/src/components/ui/card.tsx b/packages/shadcn/src/components/ui/card.tsx index 462d6cc96d..0deef84bed 100644 --- a/packages/shadcn/src/components/ui/card.tsx +++ b/packages/shadcn/src/components/ui/card.tsx @@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
) {
) { return (
); @@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (
); @@ -53,7 +53,7 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
) { return (
); @@ -75,10 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (
); diff --git a/packages/shadcn/src/components/ui/dropdown-menu.tsx b/packages/shadcn/src/components/ui/dropdown-menu.tsx index ca914f7ca5..568aad2a78 100644 --- a/packages/shadcn/src/components/ui/dropdown-menu.tsx +++ b/packages/shadcn/src/components/ui/dropdown-menu.tsx @@ -41,7 +41,7 @@ function DropdownMenuContent({ data-slot="dropdown-menu-content" sideOffset={sideOffset} className={cn( - "bn:bg-popover bn:text-popover-foreground bn:data-[state=open]:animate-in bn:data-[state=closed]:animate-out bn:data-[state=closed]:fade-out-0 bn:data-[state=open]:fade-in-0 bn:data-[state=closed]:zoom-out-95 bn:data-[state=open]:zoom-in-95 bn:data-[side=bottom]:slide-in-from-top-2 bn:data-[side=left]:slide-in-from-right-2 bn:data-[side=right]:slide-in-from-left-2 bn:data-[side=top]:slide-in-from-bottom-2 bn:z-50 bn:max-h-(--radix-dropdown-menu-content-available-height) bn:min-w-[8rem] bn:origin-(--radix-dropdown-menu-content-transform-origin) bn:overflow-x-hidden bn:overflow-y-auto bn:rounded-md bn:border bn:p-1 bn:shadow-md", + "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md", className, )} {...props} @@ -72,7 +72,7 @@ function DropdownMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "bn:focus:bg-accent bn:focus:text-accent-foreground bn:data-[variant=destructive]:text-destructive bn:data-[variant=destructive]:focus:bg-destructive/10 bn:dark:data-[variant=destructive]:focus:bg-destructive/20 bn:data-[variant=destructive]:focus:text-destructive bn:data-[variant=destructive]:*:[svg]:!text-destructive bn:[&_svg:not([class*=text-])]:text-muted-foreground bn:relative bn:flex bn:cursor-default bn:items-center bn:gap-2 bn:rounded-sm bn:px-2 bn:py-1.5 bn:text-sm bn:outline-hidden bn:select-none bn:data-[disabled]:pointer-events-none bn:data-[disabled]:opacity-50 bn:data-[inset]:pl-8 bn:[&_svg]:pointer-events-none bn:[&_svg]:shrink-0 bn:[&_svg:not([class*=size-])]:size-4", + "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=text-])]:text-muted-foreground outline-hidden relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[inset]:pl-8 data-[disabled]:opacity-50 [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className, )} {...props} @@ -90,15 +90,15 @@ function DropdownMenuCheckboxItem({ - + - + {children} @@ -126,14 +126,14 @@ function DropdownMenuRadioItem({ - + - + {children} @@ -153,7 +153,7 @@ function DropdownMenuLabel({ data-slot="dropdown-menu-label" data-inset={inset} className={cn( - "bn:px-2 bn:py-1.5 bn:text-sm bn:font-medium bn:data-[inset]:pl-8", + "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className, )} {...props} @@ -168,7 +168,7 @@ function DropdownMenuSeparator({ return ( ); @@ -182,7 +182,7 @@ function DropdownMenuShortcut({ {children} - + ); } @@ -228,7 +228,7 @@ function DropdownMenuSubContent({ ) {
@@ -95,7 +95,7 @@ function FormLabel({