kuzenbo 0.0.1 → 0.0.3

package/README.md

@@ -8,35 +8,14 @@ Combines the best design patterns from [shadcn/ui](https://ui.shadcn.com/), [Her
 
 ```bash
 npm install kuzenbo
+# or
+pnpm add kuzenbo
+# or
+yarn add kuzenbo
+# or
+bun add kuzenbo
 ```
 
-### Peer Dependencies
-
-React is required:
-
-```bash
-npm install react react-dom
-```
-
-Some components require additional peer dependencies. Install only what you need:
-
-| Component   | Required packages                     |
-| ----------- | ------------------------------------- |
-| Calendar    | `react-day-picker`                    |
-| Carousel    | `embla-carousel embla-carousel-react` |
-| Chart       | `recharts`                            |
-| Command     | `cmdk`                                |
-| CountryFlag | `country-flag-icons`                  |
-| Drawer      | `vaul`                                |
-| Dropzone    | `react-dropzone`                      |
-| EmojiPicker | `frimousse`                           |
-| InputOTP    | `input-otp`                           |
-| Marquee     | `react-fast-marquee`                  |
-| QRCode      | `qrcode culori`                       |
-| Resizable   | `react-resizable-panels`              |
-| Textarea    | `react-textarea-autosize`             |
-| VideoPlayer | `media-chrome`                        |
-
 ## Tailwind CSS v4 Setup
 
 Kuzenbo requires Tailwind CSS v4. Add the following to your main CSS file:
@@ -47,10 +26,20 @@ Kuzenbo requires Tailwind CSS v4. Add the following to your main CSS file:
 @source "../node_modules/kuzenbo/dist";
 ```
 
-- `@import "kuzenbo/styles.css"` registers the theme tokens (colors, radius) with Tailwind and provides default light/dark mode values
-- `@source` tells Tailwind to scan the library's dist for utility classes
+**Two directives, different resolution:**
+
+- **`@import "kuzenbo/styles.css"`** — Uses a package specifier. Your bundler (Vite, webpack, etc.) resolves it from `node_modules`, so no path adjustment needed. This pulls in theme tokens (colors, radius) and default light/dark mode values.
+- **`@source "../node_modules/kuzenbo/dist"`** — Uses a filesystem path. Tailwind's content scanner does not resolve package names; it expects a path relative to the CSS file. This tells Tailwind where to scan for utility classes.
+
+**Path adjustment:** The `@source` path is relative to your main CSS file. Examples:
 
-> The `@source` path is relative to your CSS file. Adjust if your CSS file is not at the project root.
+| CSS file location  | `@source` path                    |
+| ------------------ | --------------------------------- |
+| `src/app.css`      | `../node_modules/kuzenbo/dist`    |
+| `app/globals.css`  | `../node_modules/kuzenbo/dist`    |
+| `styles/index.css` | `../../node_modules/kuzenbo/dist` |
+
+With **pnpm**, you may need the explicit dist path (e.g. `../node_modules/kuzenbo/dist`) rather than just `../node_modules/kuzenbo` due to symlinks.
 
 ### Customizing the theme
 
@@ -79,6 +68,81 @@ export default function App() {
 }
 ```
 
+### CSP Provider
+
+Re-exported from Base UI — [docs](https://base-ui.com/react/utils/csp-provider). For apps enforcing strict Content Security Policy, wrap your app with `CSPProvider`:
+
+```tsx
+import { CSPProvider, Button } from "kuzenbo";
+
+function App({ nonce }: { nonce?: string }) {
+  return (
+    <CSPProvider nonce={nonce}>
+      <Button>Click me</Button>
+    </CSPProvider>
+  );
+}
+```
+
+Or use `disableStyleElements` to avoid inline `<style>` tags (rely on external CSS instead).
+
+### Direction Provider
+
+Re-exported from Base UI — [docs](https://base-ui.com/react/utils/direction-provider). For RTL support, wrap your app with `DirectionProvider` (also set `dir="rtl"` on a parent):
+
+```tsx
+import { DirectionProvider, Slider } from "kuzenbo";
+
+export default function RTLExample() {
+  return (
+    <div dir="rtl">
+      <DirectionProvider direction="rtl">
+        <Slider defaultValue={25} />
+      </DirectionProvider>
+    </div>
+  );
+}
+```
+
+### mergeProps
+
+Re-exported from Base UI — [docs](https://base-ui.com/react/utils/merge-props). Merges multiple prop objects (e.g. internal + user props). Rightmost wins for most keys; `className` is concatenated; event handlers run in order (rightmost first):
+
+```tsx
+import { mergeProps } from "kuzenbo";
+
+// In a render callback or custom component
+<button
+  {...mergeProps<"button">(
+    { className: "base", onClick: handlerA },
+    { className: "override", onClick: handlerB }
+  )}
+/>;
+// Result: className="override base", both onClick handlers run (handlerB first)
+```
+
+Call `event.preventBaseUIHandler()` in handlers to skip Base UI's internal logic.
+
+### useRender
+
+Re-exported from Base UI — [docs](https://base-ui.com/react/utils/use-render). Hook for building custom components with a `render` prop (alternative to `asChild`):
+
+```tsx
+import { useRender, mergeProps } from "kuzenbo";
+
+function Text({ render, ...props }) {
+  return useRender({
+    defaultTagName: "p",
+    render,
+    props: mergeProps<"p">({ className: "text-base" }, props),
+  });
+}
+
+// Usage
+<Text>Default paragraph</Text>
+<Text render={<strong />}>Rendered as strong</Text>
+```
+
 ### Compound component (dot notation)
 
 ```tsx
@@ -102,25 +166,11 @@ export default function App() {
 }
 ```
 
-### Component with optional peer dep
-
-```bash
-npm install react-day-picker
-```
-
-```tsx
-import { Calendar } from "kuzenbo";
-
-export default function App() {
-  return <Calendar mode="single" />;
-}
-```
-
 ## Components
 
 ### Layout
 
-Accordion, AspectRatio, Card, Collapsible, Empty, Resizable, ScrollArea, Separator, Spacer, Surface
+Accordion, AspectRatio, Card, Collapsible, Empty, Resizable, ScrollArea, Separator, Spacer
 
 ### Forms
 
@@ -146,13 +196,28 @@ Avatar, Badge, Calendar, Carousel, Chart, CountryFlag, EmojiPicker, GoogleLogo,
 
 Affix, Button, ButtonGroup, Command, Toggle, ToggleGroup
 
-### Typography (planned)
+### Utilities
 
-Anchor, Blockquote, Heading, InlineCode, Large, Lead, List, Muted, Paragraph, Small, SmallHeading, Text
+Item, Portal, CSPProvider, DirectionProvider, mergeProps, useRender
 
-### Utilities
+_CSPProvider, DirectionProvider, mergeProps, and useRender are re-exports from [@base-ui/react](https://base-ui.com/) — [CSP Provider](https://base-ui.com/react/utils/csp-provider) · [Direction Provider](https://base-ui.com/react/utils/direction-provider) · [mergeProps](https://base-ui.com/react/utils/merge-props) · [useRender](https://base-ui.com/react/utils/use-render)._
+
+## AI Skill (skills.sh)
+
+This repository includes a reusable agent skill at [`SKILL.md`](./SKILL.md)
+for integrating and theming Kuzenbo in application codebases.
 
-Item, Portal
+Install it with the Skills CLI:
+
+```bash
+npx skills add https://github.com/DobroslavRadosavljevic/kuzenbo --skill using-kuzenbo-in-apps
+```
+
+You can also install by repository shorthand:
+
+```bash
+npx skills add DobroslavRadosavljevic/kuzenbo
+```
 
 ## Development
 

package/dist/{accordion-trigger-TjAe8JHy.js → accordion-trigger-CBNEjvdN.js}

@@ -6,11 +6,11 @@ import { HugeiconsIcon } from "@hugeicons/react";
 
 //#region src/components/accordion/accordion-content.tsx
 const AccordionContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Accordion.Panel, {
-	className: "overflow-hidden text-sm data-closed:animate-accordion-up data-open:animate-accordion-down",
+	className: cn("h-[var(--accordion-panel-height)] overflow-hidden text-sm transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0", className),
 	"data-slot": "accordion-content",
 	...props,
 	children: /* @__PURE__ */ jsx("div", {
-		className: cn("h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+		className: "min-w-0 pb-4 pt-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
 		children
 	})
 });
@@ -18,7 +18,7 @@ const AccordionContent = ({ className, children, ...props }) => /* @__PURE__ */
 //#endregion
 //#region src/components/accordion/accordion-item.tsx
 const AccordionItem = ({ className, ...props }) => /* @__PURE__ */ jsx(Accordion.Item, {
-	className: cn("not-last:border-b", className),
+	className: cn("border-b border-border [&:last-child]:border-b-0", className),
 	"data-slot": "accordion-item",
 	...props
 });
@@ -34,13 +34,13 @@ const AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */
 		children: [
 			children,
 			/* @__PURE__ */ jsx(HugeiconsIcon, {
-				className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden",
+				className: "pointer-events-none shrink-0 group-data-[panel-open]/accordion-trigger:hidden",
 				"data-slot": "accordion-trigger-icon",
 				icon: ArrowDown01Icon,
 				strokeWidth: 2
 			}),
 			/* @__PURE__ */ jsx(HugeiconsIcon, {
-				className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline",
+				className: "pointer-events-none hidden shrink-0 group-data-[panel-open]/accordion-trigger:inline",
 				"data-slot": "accordion-trigger-icon",
 				icon: ArrowUp01Icon,
 				strokeWidth: 2

package/dist/{alert-dialog-trigger-BV0BsaVU.d.ts → alert-dialog-trigger-CdIeDiEN.d.ts}

@@ -4,13 +4,13 @@ import { Dialog } from "./ui/dialog.js";
 import { Label } from "./ui/label.js";
 import { Input } from "./ui/input.js";
 import { Textarea } from "./ui/textarea.js";
-import { r as TooltipContent } from "./tooltip-trigger-CrAGfaqr.js";
+import { r as TooltipContent } from "./tooltip-trigger--TzAy0uR.js";
 import * as tailwind_variants0 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import * as react from "react";
-import { ComponentProps, ReactNode } from "react";
+import { ComponentProps, ReactNode, useEffect } from "react";
 import { AlertDialog } from "@base-ui/react/alert-dialog";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 import { Command } from "cmdk";
@@ -565,6 +565,12 @@ interface SidebarContextProps {
 }
 declare const useSidebar: () => SidebarContextProps;
 //#endregion
+//#region src/hooks/use-isomorphic-effect/use-isomorphic-effect.d.ts
+declare const useIsomorphicEffect: typeof useEffect;
+//#endregion
+//#region src/hooks/use-mobile/use-mobile.d.ts
+declare const useIsMobile: () => boolean;
+//#endregion
 //#region src/components/alert-dialog/alert-dialog-action.d.ts
 declare const AlertDialogAction: ({
   className,
@@ -635,4 +641,4 @@ declare const AlertDialogTrigger: ({
   ...props
 }: AlertDialog.Trigger.Props) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { FormFieldLabel as $, SidebarGroupContent as A, ItemFooter as B, SidebarMenuBadge as C, SidebarInput as D, SidebarInset as E, ItemTitle as F, InputGroupText as G, ItemContent as H, ItemSeparator as I, InputGroupAddon as J, InputGroupInput as K, ItemMedia as L, SidebarGroup as M, SidebarFooter as N, SidebarHeader as O, SidebarContent as P, FormFieldLegend as Q, ItemHeader as R, SidebarMenuButton as S, SidebarMenu as T, ItemActions as U, ItemDescription as V, InputGroupTextarea as W, FormFieldSet as X, FormFieldTitle as Y, FormFieldSeparator as Z, SidebarMenuSubItem as _, CarouselItem as _t, AlertDialogMedia as a, CommandSeparator as at, SidebarMenuSkeleton as b, ButtonGroupSeparator as bt, AlertDialogDescription as c, CommandInput as ct, AlertDialogAction as d, CommandDialog as dt, FormFieldGroup as et, useSidebar as f, CarouselApi as ft, SidebarProvider as g, CarouselNext as gt, SidebarRail as h, CarouselPrevious as ht, AlertDialogOverlay as i, CommandShortcut as it, SidebarGroupAction as j, SidebarGroupLabel as k, AlertDialogContent as l, CommandGroup as lt, SidebarSeparator as m, useCarousel as mt, AlertDialogTitle as n, FormFieldDescription as nt, AlertDialogHeader as o, CommandList as ot, SidebarTrigger as p, CarouselProps as pt, InputGroupButton as q, AlertDialogPortal as r, FormFieldContent as rt, AlertDialogFooter as s, CommandItem as st, AlertDialogTrigger as t, FormFieldError as tt, AlertDialogCancel as u, CommandEmpty as ut, SidebarMenuSubButton as v, CarouselContent as vt, SidebarMenuAction as w, SidebarMenuItem as x, SidebarMenuSub as y, ButtonGroupText as yt, ItemGroup as z };
+export { FormFieldSeparator as $, SidebarHeader as A, ItemHeader as B, SidebarMenuItem as C, SidebarMenu as D, SidebarMenuAction as E, SidebarFooter as F, ItemActions as G, ItemFooter as H, SidebarContent as I, InputGroupInput as J, InputGroupTextarea as K, ItemTitle as L, SidebarGroupContent as M, SidebarGroupAction as N, SidebarInset as O, SidebarGroup as P, FormFieldSet as Q, ItemSeparator as R, SidebarMenuSkeleton as S, ButtonGroupSeparator as St, SidebarMenuBadge as T, ItemDescription as U, ItemGroup as V, ItemContent as W, InputGroupAddon as X, InputGroupButton as Y, FormFieldTitle as Z, SidebarRail as _, CarouselPrevious as _t, AlertDialogMedia as a, FormFieldContent as at, SidebarMenuSubButton as b, CarouselContent as bt, AlertDialogDescription as c, CommandList as ct, AlertDialogAction as d, CommandGroup as dt, FormFieldLegend as et, useIsMobile as f, CommandEmpty as ft, SidebarSeparator as g, useCarousel as gt, SidebarTrigger as h, CarouselProps as ht, AlertDialogOverlay as i, FormFieldDescription as it, SidebarGroupLabel as j, SidebarInput as k, AlertDialogContent as l, CommandItem as lt, useSidebar as m, CarouselApi as mt, AlertDialogTitle as n, FormFieldGroup as nt, AlertDialogHeader as o, CommandShortcut as ot, useIsomorphicEffect as p, CommandDialog as pt, InputGroupText as q, AlertDialogPortal as r, FormFieldError as rt, AlertDialogFooter as s, CommandSeparator as st, AlertDialogTrigger as t, FormFieldLabel as tt, AlertDialogCancel as u, CommandInput as ut, SidebarProvider as v, CarouselNext as vt, SidebarMenuButton as w, SidebarMenuSub as x, ButtonGroupText as xt, SidebarMenuSubItem as y, CarouselItem as yt, ItemMedia as z };

package/dist/{autocomplete-value-DNJ3sAIH.js → autocomplete-value-pfdgBCRQ.js}

@@ -77,7 +77,7 @@ const AutocompleteIcon = (props) => /* @__PURE__ */ jsx(Autocomplete.Icon, {
 //#endregion
 //#region src/components/autocomplete/autocomplete-input.tsx
 const AutocompleteInput = ({ className, ...props }) => /* @__PURE__ */ jsx(Autocomplete.Input, {
-	className: cn("flex h-9 w-full min-w-0 rounded-md border bg-input px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow,border-color] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 group-hover:border-ring/70 md:text-sm", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/50", className),
+	className: cn("flex h-9 w-full min-w-0 rounded-md border bg-input px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow,border-color] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 group-hover:border-ring/70 md:text-sm", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-danger aria-invalid:ring-danger/50", className),
 	"data-slot": "autocomplete-input",
 	...props
 });

package/dist/{collapsible-trigger-aZF7_mPR.d.ts → collapsible-trigger-CsOUVawu.d.ts}

@@ -3,6 +3,7 @@ import { Collapsible } from "@base-ui/react/collapsible";
 
 //#region src/components/collapsible/collapsible-content.d.ts
 declare const CollapsibleContent: ({
+  className,
   ...props
 }: Collapsible.Panel.Props) => react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/{collapsible-trigger-DcQWODN-.js → collapsible-trigger-pasJA2DN.js}

@@ -3,7 +3,8 @@ import { jsx } from "react/jsx-runtime";
 import { Collapsible } from "@base-ui/react/collapsible";
 
 //#region src/components/collapsible/collapsible-content.tsx
-const CollapsibleContent = ({ ...props }) => /* @__PURE__ */ jsx(Collapsible.Panel, {
+const CollapsibleContent = ({ className, ...props }) => /* @__PURE__ */ jsx(Collapsible.Panel, {
+	className: cn("flex h-(--collapsible-panel-height) flex-col justify-end overflow-hidden transition-all ease-out duration-150", "[&[hidden]:not([hidden='until-found'])]:hidden", "data-ending-style:h-0 data-starting-style:h-0", className),
 	"data-slot": "collapsible-content",
 	...props
 });

package/dist/{command-shortcut-DoWM7Mnm.js → command-shortcut-CZBOAIwj.js}

@@ -1,6 +1,6 @@
-import { a as InputGroupAddon } from "./input-group-textarea-voYOV11-.js";
+import { a as InputGroupAddon } from "./input-group-textarea-CCjRXkX4.js";
 import { InputGroup } from "./ui/input-group.js";
-import { a as DialogDescription, n as DialogTitle, o as DialogContent, r as DialogHeader } from "./dialog-trigger-CR23tYql.js";
+import { a as DialogDescription, n as DialogTitle, o as DialogContent, r as DialogHeader } from "./dialog-trigger-BIi6VdZI.js";
 import { Dialog } from "./ui/dialog.js";
 import { cn } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/{context-menu-trigger-Du2vcTco.d.ts → context-menu-trigger-B0XlwMGL.d.ts}

@@ -33,7 +33,7 @@ declare const ContextMenuItem: ({
   ...props
 }: ContextMenu.Item.Props & {
   inset?: boolean;
-  variant?: "default" | "destructive";
+  variant?: "default" | "danger";
 }) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/context-menu/context-menu-label.d.ts

package/dist/{context-menu-trigger-CYBhdcpg.js → context-menu-trigger-Clvpgkux.js}

@@ -44,7 +44,7 @@ const ContextMenuGroup = ({ ...props }) => /* @__PURE__ */ jsx(ContextMenu.Group
 //#endregion
 //#region src/components/context-menu/context-menu-item.tsx
 const ContextMenuItem = ({ className, inset, variant = "default", ...props }) => /* @__PURE__ */ jsx(ContextMenu.Item, {
-	className: cn("group/context-menu-item relative flex cursor-pointer select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className),
+	className: cn("group/context-menu-item relative flex cursor-pointer select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-[inset]:pl-8 data-[variant=danger]:text-danger data-disabled:opacity-50 data-[variant=danger]:focus:bg-danger/10 data-[variant=danger]:focus:text-danger dark:data-[variant=danger]:focus:bg-danger/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 focus:*:[svg]:text-accent-foreground data-[variant=danger]:*:[svg]:text-danger", className),
 	"data-inset": inset,
 	"data-slot": "context-menu-item",
 	"data-variant": variant,

package/dist/{dropdown-menu-trigger-IKeAoU_a.js → dropdown-menu-trigger-9lTHiBXO.js}

@@ -45,7 +45,7 @@ const DropdownMenuGroup = ({ ...props }) => /* @__PURE__ */ jsx(Menu.Group, {
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-item.tsx
 const DropdownMenuItem = ({ className, inset, variant = "default", ...props }) => /* @__PURE__ */ jsx(Menu.Item, {
-	className: cn("group/dropdown-menu-item relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive", className),
+	className: cn("group/dropdown-menu-item relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=danger]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-[inset]:pl-8 data-[variant=danger]:text-danger data-disabled:opacity-50 data-[variant=danger]:focus:bg-danger/10 data-[variant=danger]:focus:text-danger dark:data-[variant=danger]:focus:bg-danger/20 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=danger]:*:[svg]:text-danger", className),
 	"data-inset": inset,
 	"data-slot": "dropdown-menu-item",
 	"data-variant": variant,
@@ -129,7 +129,7 @@ const DropdownMenuSubContent = ({ align = "start", alignOffset = -3, side = "rig
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-sub-trigger.tsx
 const DropdownMenuSubTrigger = ({ className, inset, children, ...props }) => /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
-	className: cn("flex cursor-pointer select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:cursor-not-allowed data-open:bg-accent data-[inset]:pl-8 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+	className: cn("flex cursor-pointer select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=danger]:focus:**:text-accent-foreground data-disabled:cursor-not-allowed data-open:bg-accent data-[inset]:pl-8 data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
 	"data-inset": inset,
 	"data-slot": "dropdown-menu-sub-trigger",
 	...props,

package/dist/{dropdown-menu-trigger-CFdruqOk.d.ts → dropdown-menu-trigger-Cu7FRDWi.d.ts}

@@ -33,7 +33,7 @@ declare const DropdownMenuItem: ({
   ...props
 }: Menu.Item.Props & {
   inset?: boolean;
-  variant?: "default" | "destructive";
+  variant?: "default" | "danger";
 }) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/dropdown-menu/dropdown-menu-label.d.ts

package/dist/{emoji-picker-skin-tone-selector-Cmv-1vDO.js → emoji-picker-skin-tone-selector-DLVbr1DP.js}

@@ -93,7 +93,7 @@ const EmojiPickerSearch = ({ className, wrapperClassName, ...props }) => /* @__P
 	className: cn("p-2", wrapperClassName),
 	"data-slot": "emoji-picker-search-wrapper",
 	children: /* @__PURE__ */ jsx(EmojiPicker.Search, {
-		className: cn("z-50 flex h-9 w-full min-w-0 rounded-md border bg-input px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow,border-color] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground hover:border-ring/70 disabled:pointer-events-none disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/50", className),
+		className: cn("z-50 flex h-9 w-full min-w-0 rounded-md border bg-input px-3 py-1 text-base shadow-xs outline-none transition-[color,box-shadow,border-color] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground hover:border-ring/70 disabled:pointer-events-none disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-danger aria-invalid:ring-danger/50", className),
 		...props
 	})
 });

package/dist/{form-field-title-CNrq8v88.js → form-field-title-yHlRTY8k.js}

@@ -34,7 +34,7 @@ const FormFieldError = ({ className, children, errors, ...props }) => {
 	}, [children, errors]);
 	if (!content) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("font-normal text-destructive text-sm", className),
+		className: cn("font-normal text-danger text-sm", className),
 		"data-slot": "field-error",
 		role: "alert",
 		...props,