@nocoo/basalt 2.0.2 → 2.1.0

package/dist/components/command-palette.d.ts

@@ -1,12 +1,21 @@
+import type * as DialogPrimitive from "@radix-ui/react-dialog";
 import type { DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
 import * as React from "react";
-export type CommandPaletteProps = Omit<DialogProps, "open" | "defaultOpen" | "onOpenChange"> & {
+export interface CommandPaletteProps extends Omit<DialogProps, "open" | "defaultOpen" | "onOpenChange" | "children" | "modal"> {
     /**
-     * The controlled open state.
+     * Command palette structure elements, including CommandPaletteTrigger and inner command items.
+     * Note: Triggers must be direct children of CommandPalette (child.type === CommandPaletteTrigger)
+     * to be separated from modal dialog content. Wrapping triggers in Fragments or HOCs will cause
+     * them to be treated as modal content.
+     */
+    children?: React.ReactNode;
+    /**
+     * The controlled open state of the command palette dialog.
      */
     open?: boolean;
     /**
-     * The uncontrolled initial open state.
+     * The uncontrolled initial open state of the command palette dialog.
      * @default false
      */
     defaultOpen?: boolean;
@@ -19,65 +28,146 @@ export type CommandPaletteProps = Omit<DialogProps, "open" | "defaultOpen" | "on
      * @default true
      */
     shouldFilter?: boolean;
-};
-export declare const CommandPaletteTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The modality of the dialog. When set to true, interaction with outside elements
+     * will be disabled and only dialog content will be visible to screen readers.
+     * @default true
+     */
+    modal?: boolean;
+}
+type RadixDialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+export interface CommandPaletteTriggerProps extends Omit<RadixDialogTriggerProps, "asChild"> {
+    /**
+     * Change the default rendered button element to the child element, merging props and behavior.
+     * CommandPaletteTrigger is an alias for DialogTrigger; forwards ref to HTMLButtonElement and inherits native button attributes.
+     * @default false
+     */
+    asChild?: RadixDialogTriggerProps["asChild"];
+}
+export declare const CommandPaletteTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export declare function CommandPalette({ children, shouldFilter, ...props }: CommandPaletteProps): React.JSX.Element;
-export declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
-    ref?: React.Ref<HTMLInputElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
-    value?: string;
-    onValueChange?: (search: string) => void;
-} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export declare const CommandList: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    label?: string;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
-    heading?: React.ReactNode;
-    value?: string;
-    forceMount?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    alwaysRender?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement>;
-} & {
-    asChild?: boolean;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "onSelect" | "value"> & {
-    disabled?: boolean;
-    onSelect?: (value: string) => void;
-    value?: string;
-    keywords?: string[];
-    forceMount?: boolean;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+type RadixCommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;
+export interface CommandInputProps extends Omit<RadixCommandInputProps, "value" | "onValueChange" | "asChild"> {
+    /**
+     * Optional controlled state for the search input value.
+     * Note: Underlying cmdk input excludes standard onChange/type props in favor of value/onValueChange.
+     */
+    value?: RadixCommandInputProps["value"];
+    /**
+     * Event handler called when the search value changes.
+     */
+    onValueChange?: RadixCommandInputProps["onValueChange"];
+    /**
+     * Change the default rendered input element to the child element, merging props and behavior.
+     * CommandInput forwards ref to HTMLInputElement and inherits native input attributes (excluding onChange/type).
+     * Note: When aria-label is omitted, defaults to placeholder if string, or "Command Palette".
+     * @default false
+     */
+    asChild?: RadixCommandInputProps["asChild"];
+}
+export declare const CommandInput: React.ForwardRefExoticComponent<CommandInputProps & React.RefAttributes<HTMLInputElement>>;
+type RadixCommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
+export interface CommandListProps extends Omit<RadixCommandListProps, "label" | "asChild"> {
+    /**
+     * Accessible label for this list of suggestions. Not shown visibly.
+     * @default "Suggestions"
+     */
+    label?: RadixCommandListProps["label"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * CommandList forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixCommandListProps["asChild"];
+}
+export declare const CommandList: React.ForwardRefExoticComponent<CommandListProps & React.RefAttributes<HTMLDivElement>>;
+type RadixCommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;
+export interface CommandEmptyProps extends Omit<RadixCommandEmptyProps, "asChild"> {
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * CommandEmpty forwards ref to HTMLDivElement and inherits native div attributes.
+     * Note: cmdk Empty does not support forceMount.
+     * @default false
+     */
+    asChild?: RadixCommandEmptyProps["asChild"];
+}
+export declare const CommandEmpty: React.ForwardRefExoticComponent<CommandEmptyProps & React.RefAttributes<HTMLDivElement>>;
+type RadixCommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;
+export interface CommandGroupProps extends Omit<RadixCommandGroupProps, "heading" | "value" | "forceMount" | "asChild"> {
+    /**
+     * Heading to render for this group of command items.
+     */
+    heading?: RadixCommandGroupProps["heading"];
+    /**
+     * Unique value identifying this group. If no heading is provided, value must be specified.
+     */
+    value?: RadixCommandGroupProps["value"];
+    /**
+     * Whether this group is forcibly rendered regardless of filtering state.
+     */
+    forceMount?: RadixCommandGroupProps["forceMount"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * CommandGroup forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixCommandGroupProps["asChild"];
+}
+export declare const CommandGroup: React.ForwardRefExoticComponent<CommandGroupProps & React.RefAttributes<HTMLDivElement>>;
+type RadixCommandSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;
+export interface CommandSeparatorProps extends Omit<RadixCommandSeparatorProps, "alwaysRender" | "asChild"> {
+    /**
+     * Whether this separator should always be rendered. Useful when automatic filtering is disabled.
+     * When false (default), visible only when the search query is empty.
+     */
+    alwaysRender?: RadixCommandSeparatorProps["alwaysRender"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * CommandSeparator forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixCommandSeparatorProps["asChild"];
+}
+export declare const CommandSeparator: React.ForwardRefExoticComponent<CommandSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+type RadixCommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;
+export interface CommandItemProps extends Omit<RadixCommandItemProps, "disabled" | "onSelect" | "value" | "keywords" | "forceMount" | "asChild"> {
+    /**
+     * Whether this item is currently disabled from selection.
+     * @default false
+     */
+    disabled?: RadixCommandItemProps["disabled"];
+    /**
+     * Event handler called when this item is selected via click or keyboard.
+     * Note: cmdk passes the item's resolved value string `(value: string) => void`,
+     * not a standard DOM SelectEvent.
+     */
+    onSelect?: RadixCommandItemProps["onSelect"];
+    /**
+     * Unique value identifying this item during filtering and selection.
+     * Inferred from children/textContent if omitted.
+     */
+    value?: RadixCommandItemProps["value"];
+    /**
+     * Optional additional keywords matched during filtering.
+     */
+    keywords?: RadixCommandItemProps["keywords"];
+    /**
+     * Whether this item is forcibly rendered regardless of query filtering.
+     * Inherits forceMount from parent CommandGroup when omitted.
+     */
+    forceMount?: RadixCommandItemProps["forceMount"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * CommandItem forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixCommandItemProps["asChild"];
+}
+export declare const CommandItem: React.ForwardRefExoticComponent<CommandItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare function CommandShortcut({ className, ...props }: CommandShortcutProps): React.JSX.Element;
 export declare namespace CommandShortcut {
     var displayName: string;
 }
+export {};

package/dist/components/command-palette.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.js","names":[],"sources":["../../src/components/command-palette.tsx"],"sourcesContent":["import type { DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Search } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Dialog, DialogContent, DialogTitle, DialogTrigger } from \"./dialog\";\n\nconst Command = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full flex-col overflow-hidden rounded-basalt-md bg-basalt-popover text-basalt-popover-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nexport type CommandPaletteProps = Omit<DialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\"> & {\n\t/**\n\t * The controlled open state.\n\t */\n\topen?: boolean;\n\t/**\n\t * The uncontrolled initial open state.\n\t * @default false\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Called when the open state changes.\n\t */\n\tonOpenChange?: (open: boolean) => void;\n\t/**\n\t * Filter items as the query changes.\n\t * @default true\n\t */\n\tshouldFilter?: boolean;\n};\n\nexport const CommandPaletteTrigger = DialogTrigger;\n\nexport function CommandPalette({ children, shouldFilter, ...props }: CommandPaletteProps) {\n\tconst kids = React.Children.toArray(children);\n\tconst triggers = kids.filter(\n\t\t(child) => React.isValidElement(child) && child.type === CommandPaletteTrigger,\n\t);\n\tconst content = kids.filter(\n\t\t(child) => !(React.isValidElement(child) && child.type === CommandPaletteTrigger),\n\t);\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t{triggers}\n\t\t\t<DialogContent\n\t\t\t\tsize=\"lg\"\n\t\t\t\taria-describedby={undefined}\n\t\t\t\tclassName=\"overflow-hidden bg-basalt-popover p-0 shadow-lg\"\n\t\t\t>\n\t\t\t\t<DialogTitle className=\"sr-only\">Command Palette</DialogTitle>\n\t\t\t\t<Command\n\t\t\t\t\tlabel=\"Command Palette\"\n\t\t\t\t\t{...(shouldFilter !== undefined && { shouldFilter })}\n\t\t\t\t\tclassName=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\nexport const CommandInput = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Input>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n\t<div className=\"flex items-center border-b border-basalt-border px-3\" cmdk-input-wrapper=\"\">\n\t\t<Search className=\"mr-2 size-4 shrink-0 opacity-50\" aria-hidden=\"true\" />\n\t\t<CommandPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-11 w-full rounded-basalt-md bg-transparent py-3 text-sm outline-hidden ring-0 shadow-none placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\taria-label={\n\t\t\t\tprops[\"aria-label\"] ??\n\t\t\t\t(typeof props.placeholder === \"string\" ? props.placeholder : \"Command Palette\")\n\t\t\t}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nexport const CommandList = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.List>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tclassName={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nexport const CommandEmpty = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Empty>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tclassName=\"py-6 text-center text-sm text-basalt-muted-foreground\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nexport const CommandGroup = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Group>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden p-1 text-basalt-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nexport const CommandSeparator = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Separator>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tclassName={cn(\"-mx-1 h-px bg-basalt-border\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nexport const CommandItem = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Item>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-basalt-accent data-[selected=true]:text-basalt-accent-foreground data-[disabled=true]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nexport function CommandShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest text-basalt-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCommandShortcut.displayName = \"CommandShortcut\";\n"],"mappings":";;;;;;;;AAOA,IAAM,IAAU,EAAM,YAGnB,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,GAAD;CACM;CACL,WAAW,EACV,kHACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAQ,cAAc,EAAiB;AAuBvC,IAAa,IAAwB;AAErC,SAAgB,EAAe,EAAE,aAAU,iBAAc,GAAG,KAA8B;CACzF,IAAM,IAAO,EAAM,SAAS,QAAQ,CAAQ,GACtC,IAAW,EAAK,QACpB,MAAU,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CAC1D,GACM,IAAU,EAAK,QACnB,MAAU,EAAE,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,EAC5D;CACA,OACC,kBAAC,GAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,GACD,kBAAC,GAAD;GACC,MAAK;GACL,oBAAkB,KAAA;GAClB,WAAU;GAHX,UAAA,CAKC,kBAAC,GAAD;IAAa,WAAU;IAAU,UAAA;GAA4B,CAAA,GAC7D,kBAAC,GAAD;IACC,OAAM;IACN,GAAK,MAAiB,KAAA,KAAa,EAAE,gBAAa;IAClD,WAAU;IAET,UAAA;GACO,CAAA,CACK;EACR,CAAA,CAAA;;AAEV;AAEA,IAAa,IAAe,EAAM,YAG/B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,OAAD;CAAK,WAAU;CAAuD,sBAAmB;CAAzF,UAAA,CACC,kBAAC,GAAD;EAAQ,WAAU;EAAkC,eAAY;CAAQ,CAAA,GACxE,kBAAC,EAAiB,OAAlB;EACM;EACL,WAAW,EACV,6LACA,CACD;EACA,GAAI;EACJ,cACC,EAAM,kBACL,OAAO,EAAM,eAAgB,WAAW,EAAM,cAAc;CAE9D,CAAA,CACG;AACL,CAAA,CAAA;AACD,EAAa,cAAc,EAAiB,MAAM;AAElD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,MAAlB;CACM;CACL,WAAW,EAAG,mDAAmD,CAAS;CAC1E,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAiB,KAAK;AAEhD,IAAa,IAAe,EAAM,YAG/B,GAAO,MACT,kBAAC,EAAiB,OAAlB;CACM;CACL,WAAU;CACV,GAAI;AACJ,CAAA,CACD;AACD,EAAa,cAAc,EAAiB,MAAM;AAElD,IAAa,IAAe,EAAM,YAG/B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,OAAlB;CACM;CACL,WAAW,EACV,wOACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAa,cAAc,EAAiB,MAAM;AAElD,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,WAAlB;CACM;CACL,WAAW,EAAG,+BAA+B,CAAS;CACtD,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAiB,UAAU;AAE1D,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,MAAlB;CACM;CACL,WAAW,EACV,gRACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAiB,KAAK;AAEhD,SAAgB,EAAgB,EAAE,cAAW,GAAG,KAAgD;CAC/F,OACC,kBAAC,QAAD;EACC,WAAW,EAAG,gEAAgE,CAAS;EACvF,GAAI;CACJ,CAAA;AAEH;AACA,EAAgB,cAAc"}
+{"version":3,"file":"command-palette.js","names":[],"sources":["../../src/components/command-palette.tsx"],"sourcesContent":["import type * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport type { DialogProps } from \"@radix-ui/react-dialog\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Search } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Dialog, DialogContent, DialogTitle, DialogTrigger } from \"./dialog\";\n\nconst Command = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive>,\n\tReact.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full flex-col overflow-hidden rounded-basalt-md bg-basalt-popover text-basalt-popover-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommand.displayName = CommandPrimitive.displayName;\n\nexport interface CommandPaletteProps\n\textends Omit<DialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\" | \"children\" | \"modal\"> {\n\t/**\n\t * Command palette structure elements, including CommandPaletteTrigger and inner command items.\n\t * Note: Triggers must be direct children of CommandPalette (child.type === CommandPaletteTrigger)\n\t * to be separated from modal dialog content. Wrapping triggers in Fragments or HOCs will cause\n\t * them to be treated as modal content.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * The controlled open state of the command palette dialog.\n\t */\n\topen?: boolean;\n\t/**\n\t * The uncontrolled initial open state of the command palette dialog.\n\t * @default false\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Called when the open state changes.\n\t */\n\tonOpenChange?: (open: boolean) => void;\n\t/**\n\t * Filter items as the query changes.\n\t * @default true\n\t */\n\tshouldFilter?: boolean;\n\t/**\n\t * The modality of the dialog. When set to true, interaction with outside elements\n\t * will be disabled and only dialog content will be visible to screen readers.\n\t * @default true\n\t */\n\tmodal?: boolean;\n}\n\ntype RadixDialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\n\nexport interface CommandPaletteTriggerProps extends Omit<RadixDialogTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * CommandPaletteTrigger is an alias for DialogTrigger; forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixDialogTriggerProps[\"asChild\"];\n}\n\nexport const CommandPaletteTrigger = DialogTrigger;\n\nexport function CommandPalette({ children, shouldFilter, ...props }: CommandPaletteProps) {\n\tconst kids = React.Children.toArray(children);\n\tconst triggers = kids.filter(\n\t\t(child) => React.isValidElement(child) && child.type === CommandPaletteTrigger,\n\t);\n\tconst content = kids.filter(\n\t\t(child) => !(React.isValidElement(child) && child.type === CommandPaletteTrigger),\n\t);\n\treturn (\n\t\t<Dialog {...props}>\n\t\t\t{triggers}\n\t\t\t<DialogContent\n\t\t\t\tsize=\"lg\"\n\t\t\t\taria-describedby={undefined}\n\t\t\t\tclassName=\"overflow-hidden bg-basalt-popover p-0 shadow-lg\"\n\t\t\t>\n\t\t\t\t<DialogTitle className=\"sr-only\">Command Palette</DialogTitle>\n\t\t\t\t<Command\n\t\t\t\t\tlabel=\"Command Palette\"\n\t\t\t\t\t{...(shouldFilter !== undefined && { shouldFilter })}\n\t\t\t\t\tclassName=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\"\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t</Command>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n\ntype RadixCommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;\n\nexport interface CommandInputProps\n\textends Omit<RadixCommandInputProps, \"value\" | \"onValueChange\" | \"asChild\"> {\n\t/**\n\t * Optional controlled state for the search input value.\n\t * Note: Underlying cmdk input excludes standard onChange/type props in favor of value/onValueChange.\n\t */\n\tvalue?: RadixCommandInputProps[\"value\"];\n\t/**\n\t * Event handler called when the search value changes.\n\t */\n\tonValueChange?: RadixCommandInputProps[\"onValueChange\"];\n\t/**\n\t * Change the default rendered input element to the child element, merging props and behavior.\n\t * CommandInput forwards ref to HTMLInputElement and inherits native input attributes (excluding onChange/type).\n\t * Note: When aria-label is omitted, defaults to placeholder if string, or \"Command Palette\".\n\t * @default false\n\t */\n\tasChild?: RadixCommandInputProps[\"asChild\"];\n}\n\nexport const CommandInput = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Input>,\n\tCommandInputProps\n>(({ className, ...props }, ref) => (\n\t<div className=\"flex items-center border-b border-basalt-border px-3\" cmdk-input-wrapper=\"\">\n\t\t<Search className=\"mr-2 size-4 shrink-0 opacity-50\" aria-hidden=\"true\" />\n\t\t<CommandPrimitive.Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-11 w-full rounded-basalt-md bg-transparent py-3 text-sm outline-hidden ring-0 shadow-none placeholder:text-basalt-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t\taria-label={\n\t\t\t\tprops[\"aria-label\"] ??\n\t\t\t\t(typeof props.placeholder === \"string\" ? props.placeholder : \"Command Palette\")\n\t\t\t}\n\t\t/>\n\t</div>\n));\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\ntype RadixCommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;\n\nexport interface CommandListProps extends Omit<RadixCommandListProps, \"label\" | \"asChild\"> {\n\t/**\n\t * Accessible label for this list of suggestions. Not shown visibly.\n\t * @default \"Suggestions\"\n\t */\n\tlabel?: RadixCommandListProps[\"label\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandList forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandListProps[\"asChild\"];\n}\n\nexport const CommandList = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.List>,\n\tCommandListProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.List\n\t\tref={ref}\n\t\tclassName={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden\", className)}\n\t\t{...props}\n\t/>\n));\nCommandList.displayName = CommandPrimitive.List.displayName;\n\ntype RadixCommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;\n\nexport interface CommandEmptyProps extends Omit<RadixCommandEmptyProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandEmpty forwards ref to HTMLDivElement and inherits native div attributes.\n\t * Note: cmdk Empty does not support forceMount.\n\t * @default false\n\t */\n\tasChild?: RadixCommandEmptyProps[\"asChild\"];\n}\n\nexport const CommandEmpty = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Empty>,\n\tCommandEmptyProps\n>((props, ref) => (\n\t<CommandPrimitive.Empty\n\t\tref={ref}\n\t\tclassName=\"py-6 text-center text-sm text-basalt-muted-foreground\"\n\t\t{...props}\n\t/>\n));\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\ntype RadixCommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;\n\nexport interface CommandGroupProps\n\textends Omit<RadixCommandGroupProps, \"heading\" | \"value\" | \"forceMount\" | \"asChild\"> {\n\t/**\n\t * Heading to render for this group of command items.\n\t */\n\theading?: RadixCommandGroupProps[\"heading\"];\n\t/**\n\t * Unique value identifying this group. If no heading is provided, value must be specified.\n\t */\n\tvalue?: RadixCommandGroupProps[\"value\"];\n\t/**\n\t * Whether this group is forcibly rendered regardless of filtering state.\n\t */\n\tforceMount?: RadixCommandGroupProps[\"forceMount\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandGroup forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandGroupProps[\"asChild\"];\n}\n\nexport const CommandGroup = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Group>,\n\tCommandGroupProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Group\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"overflow-hidden p-1 text-basalt-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-basalt-muted-foreground\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\ntype RadixCommandSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;\n\nexport interface CommandSeparatorProps\n\textends Omit<RadixCommandSeparatorProps, \"alwaysRender\" | \"asChild\"> {\n\t/**\n\t * Whether this separator should always be rendered. Useful when automatic filtering is disabled.\n\t * When false (default), visible only when the search query is empty.\n\t */\n\talwaysRender?: RadixCommandSeparatorProps[\"alwaysRender\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandSeparator forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandSeparatorProps[\"asChild\"];\n}\n\nexport const CommandSeparator = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Separator>,\n\tCommandSeparatorProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Separator\n\t\tref={ref}\n\t\tclassName={cn(\"-mx-1 h-px bg-basalt-border\", className)}\n\t\t{...props}\n\t/>\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\ntype RadixCommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;\n\nexport interface CommandItemProps\n\textends Omit<\n\t\tRadixCommandItemProps,\n\t\t\"disabled\" | \"onSelect\" | \"value\" | \"keywords\" | \"forceMount\" | \"asChild\"\n\t> {\n\t/**\n\t * Whether this item is currently disabled from selection.\n\t * @default false\n\t */\n\tdisabled?: RadixCommandItemProps[\"disabled\"];\n\t/**\n\t * Event handler called when this item is selected via click or keyboard.\n\t * Note: cmdk passes the item's resolved value string `(value: string) => void`,\n\t * not a standard DOM SelectEvent.\n\t */\n\tonSelect?: RadixCommandItemProps[\"onSelect\"];\n\t/**\n\t * Unique value identifying this item during filtering and selection.\n\t * Inferred from children/textContent if omitted.\n\t */\n\tvalue?: RadixCommandItemProps[\"value\"];\n\t/**\n\t * Optional additional keywords matched during filtering.\n\t */\n\tkeywords?: RadixCommandItemProps[\"keywords\"];\n\t/**\n\t * Whether this item is forcibly rendered regardless of query filtering.\n\t * Inherits forceMount from parent CommandGroup when omitted.\n\t */\n\tforceMount?: RadixCommandItemProps[\"forceMount\"];\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * CommandItem forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixCommandItemProps[\"asChild\"];\n}\n\nexport const CommandItem = React.forwardRef<\n\tReact.ElementRef<typeof CommandPrimitive.Item>,\n\tCommandItemProps\n>(({ className, ...props }, ref) => (\n\t<CommandPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"relative flex cursor-default items-center rounded-basalt-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-basalt-accent data-[selected=true]:text-basalt-accent-foreground data-[disabled=true]:opacity-50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nexport interface CommandShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport function CommandShortcut({ className, ...props }: CommandShortcutProps) {\n\treturn (\n\t\t<span\n\t\t\tclassName={cn(\"ml-auto text-xs tracking-widest text-basalt-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCommandShortcut.displayName = \"CommandShortcut\";\n"],"mappings":";;;;;;;;AAQA,IAAM,IAAU,EAAM,YAGnB,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,GAAD;CACM;CACL,WAAW,EACV,kHACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAQ,cAAc,EAAiB;AAgDvC,IAAa,IAAwB;AAErC,SAAgB,EAAe,EAAE,aAAU,iBAAc,GAAG,KAA8B;CACzF,IAAM,IAAO,EAAM,SAAS,QAAQ,CAAQ,GACtC,IAAW,EAAK,QACpB,MAAU,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,CAC1D,GACM,IAAU,EAAK,QACnB,MAAU,EAAE,EAAM,eAAe,CAAK,KAAK,EAAM,SAAS,EAC5D;CACA,OACC,kBAAC,GAAD;EAAQ,GAAI;EAAZ,UAAA,CACE,GACD,kBAAC,GAAD;GACC,MAAK;GACL,oBAAkB,KAAA;GAClB,WAAU;GAHX,UAAA,CAKC,kBAAC,GAAD;IAAa,WAAU;IAAU,UAAA;GAA4B,CAAA,GAC7D,kBAAC,GAAD;IACC,OAAM;IACN,GAAK,MAAiB,KAAA,KAAa,EAAE,gBAAa;IAClD,WAAU;IAET,UAAA;GACO,CAAA,CACK;EACR,CAAA,CAAA;;AAEV;AAwBA,IAAa,IAAe,EAAM,YAG/B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,OAAD;CAAK,WAAU;CAAuD,sBAAmB;CAAzF,UAAA,CACC,kBAAC,GAAD;EAAQ,WAAU;EAAkC,eAAY;CAAQ,CAAA,GACxE,kBAAC,EAAiB,OAAlB;EACM;EACL,WAAW,EACV,6LACA,CACD;EACA,GAAI;EACJ,cACC,EAAM,kBACL,OAAO,EAAM,eAAgB,WAAW,EAAM,cAAc;CAE9D,CAAA,CACG;AACL,CAAA,CAAA;AACD,EAAa,cAAc,EAAiB,MAAM;AAkBlD,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,MAAlB;CACM;CACL,WAAW,EAAG,mDAAmD,CAAS;CAC1E,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAiB,KAAK;AAchD,IAAa,IAAe,EAAM,YAG/B,GAAO,MACT,kBAAC,EAAiB,OAAlB;CACM;CACL,WAAU;CACV,GAAI;AACJ,CAAA,CACD;AACD,EAAa,cAAc,EAAiB,MAAM;AA0BlD,IAAa,IAAe,EAAM,YAG/B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,OAAlB;CACM;CACL,WAAW,EACV,wOACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAa,cAAc,EAAiB,MAAM;AAmBlD,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,WAAlB;CACM;CACL,WAAW,EAAG,+BAA+B,CAAS;CACtD,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAiB,UAAU;AA0C1D,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAiB,MAAlB;CACM;CACL,WAAW,EACV,gRACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAiB,KAAK;AAIhD,SAAgB,EAAgB,EAAE,cAAW,GAAG,KAA+B;CAC9E,OACC,kBAAC,QAAD;EACC,WAAW,EAAG,gEAAgE,CAAS;EACvF,GAAI;CACJ,CAAA;AAEH;AACA,EAAgB,cAAc"}

package/dist/components/confirm-dialog.d.ts

@@ -5,7 +5,7 @@ export interface ConfirmDialogProps {
     open: boolean;
     /** Called when the dialog requests to open or close. */
     onOpenChange: (open: boolean) => void;
-    /** Called once when the user confirms. The dialog does not close itself. */
+    /** Called once when the user confirms. The dialog does not close itself; caller manages loading and asynchronous errors. */
     onConfirm: () => void | Promise<void>;
     /** The dialog title. */
     title: React.ReactNode;

package/dist/components/confirm-dialog.js

@@ -6,9 +6,11 @@ import * as l from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/confirm-dialog.tsx
 function f({ cancelLabel: f = "Cancel", confirmLabel: p = "Confirm", description: m, loading: h = !1, onConfirm: g, onOpenChange: _, open: v, title: y, trigger: b, variant: x = "default" }) {
-	let S = l.useRef(null), C = l.useRef(null), w = l.useRef(null), T = l.useRef(v);
+	let S = l.useRef(null), C = l.useRef(null), w = l.useRef(null), T = l.useRef(v), E = l.useRef(null), D = l.useCallback(() => {
+		S.current?.isConnected ? S.current.focus() : E.current?.isConnected && E.current.focus(), E.current = null;
+	}, []);
 	return l.useEffect(() => {
-		T.current && !v && S.current?.focus(), T.current = v;
+		T.current && !v && S.current?.isConnected && S.current.focus(), T.current = v;
 	}, [v]), /* @__PURE__ */ d(t, {
 		open: v,
 		onOpenChange: (e) => {
@@ -21,14 +23,14 @@ function f({ cancelLabel: f = "Cancel", confirmLabel: p = "Confirm", description
 		}) : null, /* @__PURE__ */ d(n, {
 			ref: C,
 			onOpenAutoFocus: (e) => {
-				if (e.preventDefault(), w.current && !w.current.disabled) {
+				if (e.preventDefault(), !E.current?.isConnected && document.activeElement instanceof HTMLElement && !C.current?.contains(document.activeElement) && (E.current = document.activeElement), w.current && !w.current.disabled) {
 					w.current.focus();
 					return;
 				}
 				C.current?.focus();
 			},
 			onCloseAutoFocus: (e) => {
-				e.preventDefault(), S.current?.focus();
+				e.preventDefault(), D();
 			},
 			children: [/* @__PURE__ */ d(a, { children: [/* @__PURE__ */ u(o, { children: y }), /* @__PURE__ */ u(r, { children: m })] }), /* @__PURE__ */ d(i, { children: [/* @__PURE__ */ u(c.Cancel, {
 				asChild: !0,

package/dist/components/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport {\n\tAlertDialog,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"./alert-dialog\";\nimport { Button } from \"./button\";\n\nexport type ConfirmDialogVariant = \"default\" | \"destructive\";\n\nexport interface ConfirmDialogProps {\n\t/** Whether the confirmation dialog is shown. */\n\topen: boolean;\n\t/** Called when the dialog requests to open or close. */\n\tonOpenChange: (open: boolean) => void;\n\t/** Called once when the user confirms. The dialog does not close itself. */\n\tonConfirm: () => void | Promise<void>;\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/**\n\t * Label for the confirm button.\n\t * @default \"Confirm\"\n\t */\n\tconfirmLabel?: React.ReactNode;\n\t/**\n\t * Label for the cancel button.\n\t * @default \"Cancel\"\n\t */\n\tcancelLabel?: React.ReactNode;\n\t/**\n\t * Appearance of the confirm button.\n\t * @default \"default\"\n\t */\n\tvariant?: ConfirmDialogVariant;\n\t/**\n\t * Disable both actions and ignore close requests while work is pending.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Control that opens the dialog. When set, closing restores focus to it.\n\t */\n\ttrigger?: React.ReactElement;\n}\n\nexport interface UseConfirmOptions {\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/** Label for the confirm button. */\n\tconfirmLabel?: React.ReactNode;\n\t/** Label for the cancel button. */\n\tcancelLabel?: React.ReactNode;\n\t/** Appearance of the confirm button. */\n\tvariant?: ConfirmDialogVariant;\n}\n\nexport interface UseConfirmResult {\n\tconfirm: (options: UseConfirmOptions) => Promise<boolean>;\n\tdialogProps: ConfirmDialogProps;\n}\n\nexport function ConfirmDialog({\n\tcancelLabel = \"Cancel\",\n\tconfirmLabel = \"Confirm\",\n\tdescription,\n\tloading = false,\n\tonConfirm,\n\tonOpenChange,\n\topen,\n\ttitle,\n\ttrigger,\n\tvariant = \"default\",\n}: ConfirmDialogProps) {\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\tconst cancelRef = React.useRef<HTMLButtonElement>(null);\n\tconst wasOpenRef = React.useRef(open);\n\tReact.useEffect(() => {\n\t\tif (wasOpenRef.current && !open) {\n\t\t\ttriggerRef.current?.focus();\n\t\t}\n\t\twasOpenRef.current = open;\n\t}, [open]);\n\treturn (\n\t\t<AlertDialog\n\t\t\topen={open}\n\t\t\tonOpenChange={(next) => {\n\t\t\t\tif (loading && !next) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonOpenChange(next);\n\t\t\t}}\n\t\t>\n\t\t\t{React.isValidElement(trigger) ? (\n\t\t\t\t<AlertDialogTrigger ref={triggerRef} asChild>\n\t\t\t\t\t{trigger}\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t) : null}\n\t\t\t<AlertDialogContent\n\t\t\t\tref={panelRef}\n\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (cancelRef.current && !cancelRef.current.disabled) {\n\t\t\t\t\t\tcancelRef.current.focus();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tpanelRef.current?.focus();\n\t\t\t\t}}\n\t\t\t\tonCloseAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\ttriggerRef.current?.focus();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t<AlertDialogTitle>{title}</AlertDialogTitle>\n\t\t\t\t\t<AlertDialogDescription>{description}</AlertDialogDescription>\n\t\t\t\t</AlertDialogHeader>\n\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t<AlertDialogPrimitive.Cancel asChild>\n\t\t\t\t\t\t<Button ref={cancelRef} disabled={loading} variant=\"outline\">\n\t\t\t\t\t\t\t{cancelLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Cancel>\n\t\t\t\t\t<AlertDialogPrimitive.Action asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tloading={loading}\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tif (!loading) {\n\t\t\t\t\t\t\t\t\tvoid onConfirm();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{confirmLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Action>\n\t\t\t\t</AlertDialogFooter>\n\t\t\t</AlertDialogContent>\n\t\t</AlertDialog>\n\t);\n}\n\nexport function useConfirm(): UseConfirmResult {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [options, setOptions] = React.useState<UseConfirmOptions>({\n\t\ttitle: \"\",\n\t\tdescription: \"\",\n\t});\n\tconst resolverRef = React.useRef<((value: boolean) => void) | null>(null);\n\n\tconst settle = React.useCallback((value: boolean) => {\n\t\tconst resolve = resolverRef.current;\n\t\tresolverRef.current = null;\n\t\tresolve?.(value);\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\treturn () => {\n\t\t\tsettle(false);\n\t\t};\n\t}, [settle]);\n\n\tconst confirm = React.useCallback(\n\t\t(next: UseConfirmOptions) => {\n\t\t\tsettle(false);\n\t\t\tsetOptions(next);\n\t\t\tsetOpen(true);\n\t\t\treturn new Promise<boolean>((resolve) => {\n\t\t\t\tresolverRef.current = resolve;\n\t\t\t});\n\t\t},\n\t\t[settle],\n\t);\n\n\treturn {\n\t\tconfirm,\n\t\tdialogProps: {\n\t\t\topen,\n\t\t\ttitle: options.title,\n\t\t\tdescription: options.description,\n\t\t\tconfirmLabel: options.confirmLabel,\n\t\t\tcancelLabel: options.cancelLabel,\n\t\t\tvariant: options.variant,\n\t\t\tonOpenChange: (next) => {\n\t\t\t\tsetOpen(next);\n\t\t\t\tif (!next) {\n\t\t\t\t\tsettle(false);\n\t\t\t\t}\n\t\t\t},\n\t\t\tonConfirm: () => {\n\t\t\t\tsettle(true);\n\t\t\t\tsetOpen(false);\n\t\t\t},\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;AAsEA,SAAgB,EAAc,EAC7B,iBAAc,UACd,kBAAe,WACf,gBACA,aAAU,IACV,cACA,iBACA,SACA,UACA,YACA,aAAU,aACY;CACtB,IAAM,IAAa,EAAM,OAA0B,IAAI,GACjD,IAAW,EAAM,OAAuB,IAAI,GAC5C,IAAY,EAAM,OAA0B,IAAI,GAChD,IAAa,EAAM,OAAO,CAAI;CAOpC,OANA,EAAM,gBAAgB;EAIrB,AAHI,EAAW,WAAW,CAAC,KAC1B,EAAW,SAAS,MAAM,GAE3B,EAAW,UAAU;CACtB,GAAG,CAAC,CAAI,CAAC,GAER,kBAAC,GAAD;EACO;EACN,eAAe,MAAS;GACnB,KAAW,CAAC,KAGhB,EAAa,CAAI;EAClB;EAPD,UAAA,CASE,EAAM,eAAe,CAAO,IAC5B,kBAAC,GAAD;GAAoB,KAAK;GAAY,SAAA;GACnC,UAAA;EACkB,CAAA,IACjB,MACJ,kBAAC,GAAD;GACC,KAAK;GACL,kBAAkB,MAAU;IAE3B,IADA,EAAM,eAAe,GACjB,EAAU,WAAW,CAAC,EAAU,QAAQ,UAAU;KACrD,EAAU,QAAQ,MAAM;KACxB;IACD;IACA,EAAS,SAAS,MAAM;GACzB;GACA,mBAAmB,MAAU;IAE5B,AADA,EAAM,eAAe,GACrB,EAAW,SAAS,MAAM;GAC3B;GAbD,UAAA,CAeC,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,EAAA,UAAmB,EAAwB,CAAA,GAC3C,kBAAC,GAAD,EAAA,UAAyB,EAAoC,CAAA,CAC3C,EAAA,CAAA,GACnB,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,EAAqB,QAAtB;IAA6B,SAAA;IAC5B,UAAA,kBAAC,GAAD;KAAQ,KAAK;KAAW,UAAU;KAAS,SAAQ;KACjD,UAAA;IACM,CAAA;GACoB,CAAA,GAC7B,kBAAC,EAAqB,QAAtB;IAA6B,SAAA;IAC5B,UAAA,kBAAC,GAAD;KACU;KACA;KACT,UAAU,MAAU;MAEnB,AADA,EAAM,eAAe,GAChB,KACJ,EAAe;KAEjB;KAEC,UAAA;IACM,CAAA;GACoB,CAAA,CACX,EAAA,CAAA,CACA;EACR,CAAA,CAAA;;AAEf;AAEA,SAAgB,IAA+B;CAC9C,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAS,KAAc,EAAM,SAA4B;EAC/D,OAAO;EACP,aAAa;CACd,CAAC,GACK,IAAc,EAAM,OAA0C,IAAI,GAElE,IAAS,EAAM,aAAa,MAAmB;EACpD,IAAM,IAAU,EAAY;EAE5B,AADA,EAAY,UAAU,MACtB,IAAU,CAAK;CAChB,GAAG,CAAC,CAAC;CAoBL,OAlBA,EAAM,sBACQ;EACZ,EAAO,EAAK;CACb,GACE,CAAC,CAAM,CAAC,GAcJ;EACN,SAbe,EAAM,aACpB,OACA,EAAO,EAAK,GACZ,EAAW,CAAI,GACf,EAAQ,EAAI,GACL,IAAI,SAAkB,MAAY;GACxC,EAAY,UAAU;EACvB,CAAC,IAEF,CAAC,CAAM,CAIP;EACA,aAAa;GACZ;GACA,OAAO,EAAQ;GACf,aAAa,EAAQ;GACrB,cAAc,EAAQ;GACtB,aAAa,EAAQ;GACrB,SAAS,EAAQ;GACjB,eAAe,MAAS;IAEvB,AADA,EAAQ,CAAI,GACP,KACJ,EAAO,EAAK;GAEd;GACA,iBAAiB;IAEhB,AADA,EAAO,EAAI,GACX,EAAQ,EAAK;GACd;EACD;CACD;AACD"}
+{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport {\n\tAlertDialog,\n\tAlertDialogContent,\n\tAlertDialogDescription,\n\tAlertDialogFooter,\n\tAlertDialogHeader,\n\tAlertDialogTitle,\n\tAlertDialogTrigger,\n} from \"./alert-dialog\";\nimport { Button } from \"./button\";\n\nexport type ConfirmDialogVariant = \"default\" | \"destructive\";\n\nexport interface ConfirmDialogProps {\n\t/** Whether the confirmation dialog is shown. */\n\topen: boolean;\n\t/** Called when the dialog requests to open or close. */\n\tonOpenChange: (open: boolean) => void;\n\t/** Called once when the user confirms. The dialog does not close itself; caller manages loading and asynchronous errors. */\n\tonConfirm: () => void | Promise<void>;\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/**\n\t * Label for the confirm button.\n\t * @default \"Confirm\"\n\t */\n\tconfirmLabel?: React.ReactNode;\n\t/**\n\t * Label for the cancel button.\n\t * @default \"Cancel\"\n\t */\n\tcancelLabel?: React.ReactNode;\n\t/**\n\t * Appearance of the confirm button.\n\t * @default \"default\"\n\t */\n\tvariant?: ConfirmDialogVariant;\n\t/**\n\t * Disable both actions and ignore close requests while work is pending.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * Control that opens the dialog. When set, closing restores focus to it.\n\t */\n\ttrigger?: React.ReactElement;\n}\n\nexport interface UseConfirmOptions {\n\t/** The dialog title. */\n\ttitle: React.ReactNode;\n\t/** Supporting copy that describes the action. */\n\tdescription: React.ReactNode;\n\t/** Label for the confirm button. */\n\tconfirmLabel?: React.ReactNode;\n\t/** Label for the cancel button. */\n\tcancelLabel?: React.ReactNode;\n\t/** Appearance of the confirm button. */\n\tvariant?: ConfirmDialogVariant;\n}\n\nexport interface UseConfirmResult {\n\tconfirm: (options: UseConfirmOptions) => Promise<boolean>;\n\tdialogProps: ConfirmDialogProps;\n}\n\nexport function ConfirmDialog({\n\tcancelLabel = \"Cancel\",\n\tconfirmLabel = \"Confirm\",\n\tdescription,\n\tloading = false,\n\tonConfirm,\n\tonOpenChange,\n\topen,\n\ttitle,\n\ttrigger,\n\tvariant = \"default\",\n}: ConfirmDialogProps) {\n\tconst triggerRef = React.useRef<HTMLButtonElement>(null);\n\tconst panelRef = React.useRef<HTMLDivElement>(null);\n\tconst cancelRef = React.useRef<HTMLButtonElement>(null);\n\tconst wasOpenRef = React.useRef(open);\n\tconst openerRef = React.useRef<HTMLElement | null>(null);\n\n\tconst restoreFocus = React.useCallback(() => {\n\t\tif (triggerRef.current?.isConnected) {\n\t\t\ttriggerRef.current.focus();\n\t\t} else if (openerRef.current?.isConnected) {\n\t\t\topenerRef.current.focus();\n\t\t}\n\t\topenerRef.current = null;\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\tif (wasOpenRef.current && !open) {\n\t\t\tif (triggerRef.current?.isConnected) {\n\t\t\t\ttriggerRef.current.focus();\n\t\t\t}\n\t\t}\n\t\twasOpenRef.current = open;\n\t}, [open]);\n\n\treturn (\n\t\t<AlertDialog\n\t\t\topen={open}\n\t\t\tonOpenChange={(next) => {\n\t\t\t\tif (loading && !next) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonOpenChange(next);\n\t\t\t}}\n\t\t>\n\t\t\t{React.isValidElement(trigger) ? (\n\t\t\t\t<AlertDialogTrigger ref={triggerRef} asChild>\n\t\t\t\t\t{trigger}\n\t\t\t\t</AlertDialogTrigger>\n\t\t\t) : null}\n\t\t\t<AlertDialogContent\n\t\t\t\tref={panelRef}\n\t\t\t\tonOpenAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (\n\t\t\t\t\t\t!openerRef.current?.isConnected &&\n\t\t\t\t\t\tdocument.activeElement instanceof HTMLElement &&\n\t\t\t\t\t\t!panelRef.current?.contains(document.activeElement)\n\t\t\t\t\t) {\n\t\t\t\t\t\topenerRef.current = document.activeElement;\n\t\t\t\t\t}\n\t\t\t\t\tif (cancelRef.current && !cancelRef.current.disabled) {\n\t\t\t\t\t\tcancelRef.current.focus();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tpanelRef.current?.focus();\n\t\t\t\t}}\n\t\t\t\tonCloseAutoFocus={(event) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\trestoreFocus();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<AlertDialogHeader>\n\t\t\t\t\t<AlertDialogTitle>{title}</AlertDialogTitle>\n\t\t\t\t\t<AlertDialogDescription>{description}</AlertDialogDescription>\n\t\t\t\t</AlertDialogHeader>\n\t\t\t\t<AlertDialogFooter>\n\t\t\t\t\t<AlertDialogPrimitive.Cancel asChild>\n\t\t\t\t\t\t<Button ref={cancelRef} disabled={loading} variant=\"outline\">\n\t\t\t\t\t\t\t{cancelLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Cancel>\n\t\t\t\t\t<AlertDialogPrimitive.Action asChild>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tloading={loading}\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tif (!loading) {\n\t\t\t\t\t\t\t\t\tvoid onConfirm();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{confirmLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</AlertDialogPrimitive.Action>\n\t\t\t\t</AlertDialogFooter>\n\t\t\t</AlertDialogContent>\n\t\t</AlertDialog>\n\t);\n}\n\nexport function useConfirm(): UseConfirmResult {\n\tconst [open, setOpen] = React.useState(false);\n\tconst [options, setOptions] = React.useState<UseConfirmOptions>({\n\t\ttitle: \"\",\n\t\tdescription: \"\",\n\t});\n\tconst resolverRef = React.useRef<((value: boolean) => void) | null>(null);\n\n\tconst settle = React.useCallback((value: boolean) => {\n\t\tconst resolve = resolverRef.current;\n\t\tresolverRef.current = null;\n\t\tresolve?.(value);\n\t}, []);\n\n\tReact.useEffect(() => {\n\t\treturn () => {\n\t\t\tsettle(false);\n\t\t};\n\t}, [settle]);\n\n\tconst confirm = React.useCallback(\n\t\t(next: UseConfirmOptions) => {\n\t\t\tsettle(false);\n\t\t\tsetOptions(next);\n\t\t\tsetOpen(true);\n\t\t\treturn new Promise<boolean>((resolve) => {\n\t\t\t\tresolverRef.current = resolve;\n\t\t\t});\n\t\t},\n\t\t[settle],\n\t);\n\n\treturn {\n\t\tconfirm,\n\t\tdialogProps: {\n\t\t\topen,\n\t\t\ttitle: options.title,\n\t\t\tdescription: options.description,\n\t\t\tconfirmLabel: options.confirmLabel,\n\t\t\tcancelLabel: options.cancelLabel,\n\t\t\tvariant: options.variant,\n\t\t\tonOpenChange: (next) => {\n\t\t\t\tsetOpen(next);\n\t\t\t\tif (!next) {\n\t\t\t\t\tsettle(false);\n\t\t\t\t}\n\t\t\t},\n\t\t\tonConfirm: () => {\n\t\t\t\tsettle(true);\n\t\t\t\tsetOpen(false);\n\t\t\t},\n\t\t},\n\t};\n}\n"],"mappings":";;;;;;;AAsEA,SAAgB,EAAc,EAC7B,iBAAc,UACd,kBAAe,WACf,gBACA,aAAU,IACV,cACA,iBACA,SACA,UACA,YACA,aAAU,aACY;CACtB,IAAM,IAAa,EAAM,OAA0B,IAAI,GACjD,IAAW,EAAM,OAAuB,IAAI,GAC5C,IAAY,EAAM,OAA0B,IAAI,GAChD,IAAa,EAAM,OAAO,CAAI,GAC9B,IAAY,EAAM,OAA2B,IAAI,GAEjD,IAAe,EAAM,kBAAkB;EAM5C,AALI,EAAW,SAAS,cACvB,EAAW,QAAQ,MAAM,IACf,EAAU,SAAS,eAC7B,EAAU,QAAQ,MAAM,GAEzB,EAAU,UAAU;CACrB,GAAG,CAAC,CAAC;CAWL,OATA,EAAM,gBAAgB;EAMrB,AALI,EAAW,WAAW,CAAC,KACtB,EAAW,SAAS,eACvB,EAAW,QAAQ,MAAM,GAG3B,EAAW,UAAU;CACtB,GAAG,CAAC,CAAI,CAAC,GAGR,kBAAC,GAAD;EACO;EACN,eAAe,MAAS;GACnB,KAAW,CAAC,KAGhB,EAAa,CAAI;EAClB;EAPD,UAAA,CASE,EAAM,eAAe,CAAO,IAC5B,kBAAC,GAAD;GAAoB,KAAK;GAAY,SAAA;GACnC,UAAA;EACkB,CAAA,IACjB,MACJ,kBAAC,GAAD;GACC,KAAK;GACL,kBAAkB,MAAU;IAS3B,IARA,EAAM,eAAe,GAEpB,CAAC,EAAU,SAAS,eACpB,SAAS,yBAAyB,eAClC,CAAC,EAAS,SAAS,SAAS,SAAS,aAAa,MAElD,EAAU,UAAU,SAAS,gBAE1B,EAAU,WAAW,CAAC,EAAU,QAAQ,UAAU;KACrD,EAAU,QAAQ,MAAM;KACxB;IACD;IACA,EAAS,SAAS,MAAM;GACzB;GACA,mBAAmB,MAAU;IAE5B,AADA,EAAM,eAAe,GACrB,EAAa;GACd;GApBD,UAAA,CAsBC,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,GAAD,EAAA,UAAmB,EAAwB,CAAA,GAC3C,kBAAC,GAAD,EAAA,UAAyB,EAAoC,CAAA,CAC3C,EAAA,CAAA,GACnB,kBAAC,GAAD,EAAA,UAAA,CACC,kBAAC,EAAqB,QAAtB;IAA6B,SAAA;IAC5B,UAAA,kBAAC,GAAD;KAAQ,KAAK;KAAW,UAAU;KAAS,SAAQ;KACjD,UAAA;IACM,CAAA;GACoB,CAAA,GAC7B,kBAAC,EAAqB,QAAtB;IAA6B,SAAA;IAC5B,UAAA,kBAAC,GAAD;KACU;KACA;KACT,UAAU,MAAU;MAEnB,AADA,EAAM,eAAe,GAChB,KACJ,EAAe;KAEjB;KAEC,UAAA;IACM,CAAA;GACoB,CAAA,CACX,EAAA,CAAA,CACA;EACR,CAAA,CAAA;;AAEf;AAEA,SAAgB,IAA+B;CAC9C,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAS,KAAc,EAAM,SAA4B;EAC/D,OAAO;EACP,aAAa;CACd,CAAC,GACK,IAAc,EAAM,OAA0C,IAAI,GAElE,IAAS,EAAM,aAAa,MAAmB;EACpD,IAAM,IAAU,EAAY;EAE5B,AADA,EAAY,UAAU,MACtB,IAAU,CAAK;CAChB,GAAG,CAAC,CAAC;CAoBL,OAlBA,EAAM,sBACQ;EACZ,EAAO,EAAK;CACb,GACE,CAAC,CAAM,CAAC,GAcJ;EACN,SAbe,EAAM,aACpB,OACA,EAAO,EAAK,GACZ,EAAW,CAAI,GACf,EAAQ,EAAI,GACL,IAAI,SAAkB,MAAY;GACxC,EAAY,UAAU;EACvB,CAAC,IAEF,CAAC,CAAM,CAIP;EACA,aAAa;GACZ;GACA,OAAO,EAAQ;GACf,aAAa,EAAQ;GACrB,cAAc,EAAQ;GACtB,aAAa,EAAQ;GACrB,SAAS,EAAQ;GACjB,eAAe,MAAS;IAEvB,AADA,EAAQ,CAAI,GACP,KACJ,EAAO,EAAK;GAEd;GACA,iBAAiB;IAEhB,AADA,EAAO,EAAI,GACX,EAAQ,EAAK;GACd;EACD;CACD;AACD"}

package/dist/components/context-menu.d.ts

@@ -1,7 +1,215 @@
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import * as React from "react";
+type RadixContextMenuProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;
+type RadixContextMenuTriggerProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>;
+type RadixContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;
+type RadixContextMenuItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>;
+export interface ContextMenuProps extends Omit<RadixContextMenuProps, "open" | "onOpenChange" | "dir" | "modal"> {
+    /**
+     * Controlled open state of the context menu.
+     * When set to true before pointer trigger interaction, positions at the top-left of the viewport.
+     */
+    open?: RadixContextMenuProps["open"];
+    /**
+     * Callback invoked when open state changes.
+     */
+    onOpenChange?: RadixContextMenuProps["onOpenChange"];
+    /**
+     * The reading direction of the context menu.
+     * @default "ltr"
+     */
+    dir?: RadixContextMenuProps["dir"];
+    /**
+     * Whether the context menu is modal, preventing outside interactions.
+     * @default true
+     */
+    modal?: RadixContextMenuProps["modal"];
+}
 export declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+export interface ContextMenuTriggerProps extends Omit<RadixContextMenuTriggerProps, "disabled" | "asChild"> {
+    /**
+     * Disable the context menu trigger from opening on right-click.
+     * @default false
+     */
+    disabled?: RadixContextMenuTriggerProps["disabled"];
+    /**
+     * Change the default rendered span element to the child element, merging props and behavior.
+     * Trigger forwards ref to HTMLSpanElement and inherits native span attributes.
+     * @default false
+     */
+    asChild?: RadixContextMenuTriggerProps["asChild"];
+}
 export declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+export interface ContextMenuContentProps extends Omit<RadixContextMenuContentProps, "loop" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "forceMount" | "asChild" | "onCloseAutoFocus" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> {
+    /**
+     * Whether keyboard navigation should loop around item boundaries.
+     * @default false
+     */
+    loop?: RadixContextMenuContentProps["loop"];
+    /**
+     * Offset in pixels from the start or end alignment position.
+     * @default 0
+     */
+    alignOffset?: RadixContextMenuContentProps["alignOffset"];
+    /**
+     * Whether to reposition content to avoid viewport boundary collisions.
+     * @default true
+     */
+    avoidCollisions?: RadixContextMenuContentProps["avoidCollisions"];
+    /**
+     * Element or elements bounding boundary collision calculations.
+     * @default []
+     */
+    collisionBoundary?: RadixContextMenuContentProps["collisionBoundary"];
+    /**
+     * Virtual padding from collision boundaries in pixels.
+     * @default 0
+     */
+    collisionPadding?: RadixContextMenuContentProps["collisionPadding"];
+    /**
+     * Padding in pixels between popper arrow and floating panel edge.
+     * @default 0
+     */
+    arrowPadding?: RadixContextMenuContentProps["arrowPadding"];
+    /**
+     * Sticky positioning behavior along the align axis when overflowing.
+     * @default "partial"
+     */
+    sticky?: RadixContextMenuContentProps["sticky"];
+    /**
+     * Whether to hide content completely when trigger is fully occluded.
+     * @default false
+     */
+    hideWhenDetached?: RadixContextMenuContentProps["hideWhenDetached"];
+    /**
+     * Force mounting content in DOM for external animation controls.
+     * Note: Bare ContextMenuContent mounts directly without a built-in Portal wrapper.
+     */
+    forceMount?: true;
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Content forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixContextMenuContentProps["asChild"];
+    /**
+     * Callback fired when auto-focusing on close. Can be prevented.
+     */
+    onCloseAutoFocus?: RadixContextMenuContentProps["onCloseAutoFocus"];
+    /**
+     * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.
+     */
+    onEscapeKeyDown?: RadixContextMenuContentProps["onEscapeKeyDown"];
+    /**
+     * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onPointerDownOutside?: RadixContextMenuContentProps["onPointerDownOutside"];
+    /**
+     * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onFocusOutside?: RadixContextMenuContentProps["onFocusOutside"];
+    /**
+     * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onInteractOutside?: RadixContextMenuContentProps["onInteractOutside"];
+}
 export declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
-export declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare function ContextMenuPanel({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>): React.JSX.Element;
+export interface ContextMenuItemProps extends Omit<RadixContextMenuItemProps, "disabled" | "onSelect" | "textValue" | "asChild"> {
+    /**
+     * Disable the context menu item.
+     * @default false
+     */
+    disabled?: RadixContextMenuItemProps["disabled"];
+    /**
+     * Event handler called when the context menu item is selected (via click or keyboard).
+     */
+    onSelect?: RadixContextMenuItemProps["onSelect"];
+    /**
+     * Optional text used for typeahead navigation. By default typeahead uses item text content.
+     */
+    textValue?: RadixContextMenuItemProps["textValue"];
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Item forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixContextMenuItemProps["asChild"];
+}
+export declare const ContextMenuItem: React.ForwardRefExoticComponent<ContextMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export interface ContextMenuPanelProps extends Omit<React.ComponentProps<typeof ContextMenuPrimitive.Content>, "loop" | "alignOffset" | "avoidCollisions" | "collisionBoundary" | "collisionPadding" | "arrowPadding" | "sticky" | "hideWhenDetached" | "forceMount" | "asChild" | "onCloseAutoFocus" | "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> {
+    /**
+     * Whether keyboard navigation should loop around item boundaries.
+     * @default false
+     */
+    loop?: RadixContextMenuContentProps["loop"];
+    /**
+     * Offset in pixels from the start or end alignment position.
+     * @default 0
+     */
+    alignOffset?: RadixContextMenuContentProps["alignOffset"];
+    /**
+     * Whether to reposition content to avoid viewport boundary collisions.
+     * @default true
+     */
+    avoidCollisions?: RadixContextMenuContentProps["avoidCollisions"];
+    /**
+     * Element or elements bounding boundary collision calculations.
+     * @default []
+     */
+    collisionBoundary?: RadixContextMenuContentProps["collisionBoundary"];
+    /**
+     * Virtual padding from collision boundaries in pixels.
+     * @default 0
+     */
+    collisionPadding?: RadixContextMenuContentProps["collisionPadding"];
+    /**
+     * Padding in pixels between popper arrow and floating panel edge.
+     * @default 0
+     */
+    arrowPadding?: RadixContextMenuContentProps["arrowPadding"];
+    /**
+     * Sticky positioning behavior along the align axis when overflowing.
+     * @default "partial"
+     */
+    sticky?: RadixContextMenuContentProps["sticky"];
+    /**
+     * Whether to hide content completely when trigger is fully occluded.
+     * @default false
+     */
+    hideWhenDetached?: RadixContextMenuContentProps["hideWhenDetached"];
+    /**
+     * Force mounting content in DOM for external animation controls.
+     * When forceMount is true, the content remains mounted even when closed.
+     * The caller is responsible for visibility transitions and unmounting after animation completes.
+     * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.
+     */
+    forceMount?: true;
+    /**
+     * Change the default rendered div element to the child element, merging props and behavior.
+     * Content forwards ref to HTMLDivElement and inherits native div attributes.
+     * @default false
+     */
+    asChild?: RadixContextMenuContentProps["asChild"];
+    /**
+     * Callback fired when auto-focusing on close. Can be prevented.
+     */
+    onCloseAutoFocus?: RadixContextMenuContentProps["onCloseAutoFocus"];
+    /**
+     * Callback fired when the Escape key is down on the dismissable layer. Can be prevented.
+     */
+    onEscapeKeyDown?: RadixContextMenuContentProps["onEscapeKeyDown"];
+    /**
+     * Callback fired when a pointerdown event happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onPointerDownOutside?: RadixContextMenuContentProps["onPointerDownOutside"];
+    /**
+     * Callback fired when focus moves outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onFocusOutside?: RadixContextMenuContentProps["onFocusOutside"];
+    /**
+     * Callback fired when an interaction (pointerdown or focus) happens outside the bounds of the dismissable layer. Can be prevented.
+     */
+    onInteractOutside?: RadixContextMenuContentProps["onInteractOutside"];
+}
+export declare function ContextMenuPanel({ className, ...props }: ContextMenuPanelProps): React.JSX.Element;
+export {};

package/dist/components/context-menu.js

@@ -12,10 +12,13 @@ var o = a.Root, s = a.Trigger, c = a.Content, l = r.forwardRef(({ className: n,
 }));
 l.displayName = a.Item.displayName;
 function u({ className: t, ...r }) {
-	return /* @__PURE__ */ i(a.Portal, { children: /* @__PURE__ */ i(a.Content, {
-		className: n(e("min-w-40", t)),
-		...r
-	}) });
+	return /* @__PURE__ */ i(a.Portal, {
+		forceMount: r.forceMount,
+		children: /* @__PURE__ */ i(a.Content, {
+			className: n(e("min-w-40", t)),
+			...r
+		})
+	});
 }
 //#endregion
 export { o as ContextMenu, c as ContextMenuContent, l as ContextMenuItem, u as ContextMenuPanel, s as ContextMenuTrigger };