@cognite/aura 0.3.5 → 1.46104.0

package/dist/components/ui/core/combobox/combobox.d.ts

@@ -1,15 +1,15 @@
-import { ForwardRefExoticComponent, RefAttributes, ComponentProps } from 'react';
-import { Button } from '../button/button';
-type ComboboxProps = Omit<ComponentProps<typeof Button>, 'value' | 'onChange'> & {
-    options: Array<{
-        value: string;
-        label: string;
-    }>;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyText?: string;
+import { type ForwardRefExoticComponent, type RefAttributes, type ComponentProps } from "react";
+import { Button } from "../button/button";
+type ComboboxProps = Omit<ComponentProps<typeof Button>, "value" | "onChange" | "variant" | "size" | "render" | "nativeButton"> & {
+	options: Array<{
+		value: string;
+		label: string;
+	}>;
+	value?: string;
+	onValueChange?: (value: string) => void;
+	placeholder?: string;
+	searchPlaceholder?: string;
+	emptyText?: string;
 };
-declare const Combobox: ForwardRefExoticComponent<Omit<ComboboxProps, 'ref'> & RefAttributes<HTMLElement>>;
+declare const Combobox: ForwardRefExoticComponent<Omit<ComboboxProps, "ref"> & RefAttributes<HTMLElement>>;
 export { Combobox };

package/dist/components/ui/core/combobox/combobox.js

@@ -1,41 +1,90 @@
-import { cn as e } from "../../../../lib/utils.js";
-import { Button as t } from "../button/button.js";
-import { Command as n, CommandEmpty as r, CommandGroup as i, CommandInput as a, CommandItem as o, CommandList as s } from "../command/command.js";
-import { Popover as c, PopoverContent as l, PopoverTrigger as u } from "../popover/popover.js";
-import { forwardRef as d, useState as f } from "react";
-import { IconCaretUpDown as p, IconCheck as m } from "@tabler/icons-react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-//#region libs/aura/src/components/ui/core/combobox/combobox.tsx
-var _ = d(({ options: d, value: _, onValueChange: v, placeholder: y = "Select option...", searchPlaceholder: b = "Search...", emptyText: x = "No option found.", className: S, ...C }, w) => {
-	let [T, E] = f(!1), [D, O] = f(_ ?? ""), k = _ !== void 0, A = k ? _ : D, j = (e) => {
-		let t = e === A ? "" : e;
-		k || O(t), v?.(t), E(!1);
-	};
-	return /* @__PURE__ */ h("div", {
-		"data-slot": "combobox",
-		children: /* @__PURE__ */ g(c, {
-			open: T,
-			onOpenChange: E,
-			children: [/* @__PURE__ */ h(u, { render: /* @__PURE__ */ g(t, {
-				ref: w,
-				"data-slot": "combobox-trigger",
-				variant: "outline",
-				role: "combobox",
-				"aria-expanded": T,
-				className: e("w-50 justify-between", S),
-				...C,
-				children: [A ? d.find((e) => e.value === A)?.label : y, /* @__PURE__ */ h(p, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })]
-			}) }), /* @__PURE__ */ h(l, {
-				className: e("w-50 p-0", S),
-				children: /* @__PURE__ */ g(n, { children: [/* @__PURE__ */ h(a, { placeholder: b }), /* @__PURE__ */ g(s, { children: [/* @__PURE__ */ h(r, { children: x }), /* @__PURE__ */ h(i, { children: d.map((t) => /* @__PURE__ */ g(o, {
-					value: t.value,
-					onSelect: j,
-					children: [/* @__PURE__ */ h(m, { className: e("mr-2 h-4 w-4", A === t.value ? "opacity-100" : "opacity-0") }), t.label]
-				}, t.value)) })] })] })
-			})]
-		})
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { IconCaretUpDown, IconCheck } from "@tabler/icons-react";
+import { cn, formFieldOpenState, formFieldTriggerClasses } from "../../../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+const Combobox = /*#__PURE__*/ forwardRef(({ options, value, onValueChange, placeholder = 'Select option...', searchPlaceholder = 'Search...', emptyText = 'No option found.', className, type = 'button', ...props }, ref)=>{
+    const [open, setOpen] = useState(false);
+    const listboxId = useId();
+    const [internalValue, setInternalValue] = useState(value ?? '');
+    const isControlled = value !== undefined;
+    const selectedValue = isControlled ? value : internalValue;
+    const selectedLabel = selectedValue ? options.find((option)=>option.value === selectedValue)?.label : undefined;
+    const handleValueChange = (newValue)=>{
+        const finalValue = newValue === selectedValue ? '' : newValue;
+        if (!isControlled) {
+            setInternalValue(finalValue);
+        }
+        onValueChange?.(finalValue);
+        setOpen(false);
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "combobox",
+        children: /*#__PURE__*/ _jsxs(Popover, {
+            open: open,
+            onOpenChange: setOpen,
+            children: [
+                /*#__PURE__*/ _jsx(PopoverTrigger, {
+                    render: /*#__PURE__*/ _jsxs(Button, {
+                        ref: ref,
+                        type: type,
+                        nativeButton: true,
+                        variant: null,
+                        size: null,
+                        "data-slot": "combobox-trigger",
+                        role: "combobox",
+                        "aria-expanded": open,
+                        "aria-controls": listboxId,
+                        className: cn(formFieldTriggerClasses, open && formFieldOpenState, className),
+                        ...props,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: cn('flex-1 truncate text-left', selectedLabel ? 'text-base-foreground disabled:text-base-foreground-disabled' : 'text-muted-foreground disabled:text-base-foreground-disabled'),
+                                children: selectedLabel ?? placeholder
+                            }),
+                            /*#__PURE__*/ _jsx(IconCaretUpDown, {
+                                className: "size-4 opacity-50"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(PopoverContent, {
+                    id: listboxId,
+                    className: cn('w-50 p-0', className),
+                    children: /*#__PURE__*/ _jsxs(Command, {
+                        children: [
+                            /*#__PURE__*/ _jsx(CommandInput, {
+                                placeholder: searchPlaceholder
+                            }),
+                            /*#__PURE__*/ _jsxs(CommandList, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(CommandEmpty, {
+                                        children: emptyText
+                                    }),
+                                    /*#__PURE__*/ _jsx(CommandGroup, {
+                                        children: options.map((option)=>/*#__PURE__*/ _jsxs(CommandItem, {
+                                                value: option.value,
+                                                onSelect: handleValueChange,
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(IconCheck, {
+                                                        className: cn('mr-2 size-4', selectedValue === option.value ? 'opacity-100' : 'opacity-0')
+                                                    }),
+                                                    option.label
+                                                ]
+                                            }, option.value))
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
 });
-_.displayName = "Combobox";
-//#endregion
-export { _ as Combobox };
+Combobox.displayName = 'Combobox';
+export { Combobox };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/ui/core/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/combobox/combobox.tsx"],"sourcesContent":["import {\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type ComponentProps,\n  type ComponentRef,\n  forwardRef,\n  useId,\n  useState,\n} from 'react';\n\nimport { IconCaretUpDown, IconCheck } from '@tabler/icons-react';\n\nimport {\n  cn,\n  formFieldOpenState,\n  formFieldTriggerClasses,\n} from '../../../../lib/utils';\nimport { Button } from '../button/button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../command/command';\nimport { Popover, PopoverContent, PopoverTrigger } from '../popover/popover';\n\ntype ComboboxProps = Omit<\n  ComponentProps<typeof Button>,\n  'value' | 'onChange' | 'variant' | 'size' | 'render' | 'nativeButton'\n> & {\n  options: Array<{ value: string; label: string }>;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n};\n\nconst Combobox: ForwardRefExoticComponent<\n  Omit<ComboboxProps, 'ref'> & RefAttributes<HTMLElement>\n> = forwardRef<ComponentRef<typeof Button>, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select option...',\n      searchPlaceholder = 'Search...',\n      emptyText = 'No option found.',\n      className,\n      type = 'button',\n      ...props\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(false);\n    const listboxId = useId();\n    const [internalValue, setInternalValue] = useState(value ?? '');\n    const isControlled = value !== undefined;\n    const selectedValue = isControlled ? value : internalValue;\n    const selectedLabel = selectedValue\n      ? options.find((option) => option.value === selectedValue)?.label\n      : undefined;\n\n    const handleValueChange = (newValue: string) => {\n      const finalValue = newValue === selectedValue ? '' : newValue;\n      if (!isControlled) {\n        setInternalValue(finalValue);\n      }\n      onValueChange?.(finalValue);\n      setOpen(false);\n    };\n\n    return (\n      <div data-slot=\"combobox\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger\n            render={\n              <Button\n                ref={ref}\n                type={type}\n                nativeButton\n                variant={null}\n                size={null}\n                data-slot=\"combobox-trigger\"\n                role=\"combobox\"\n                aria-expanded={open}\n                aria-controls={listboxId}\n                className={cn(\n                  formFieldTriggerClasses,\n                  open && formFieldOpenState,\n                  className\n                )}\n                {...props}\n              >\n                <span\n                  className={cn(\n                    'flex-1 truncate text-left',\n                    selectedLabel\n                      ? 'text-base-foreground disabled:text-base-foreground-disabled'\n                      : 'text-muted-foreground disabled:text-base-foreground-disabled'\n                  )}\n                >\n                  {selectedLabel ?? placeholder}\n                </span>\n                <IconCaretUpDown className=\"size-4 opacity-50\" />\n              </Button>\n            }\n          />\n          <PopoverContent id={listboxId} className={cn('w-50 p-0', className)}>\n            <Command>\n              <CommandInput placeholder={searchPlaceholder} />\n              <CommandList>\n                <CommandEmpty>{emptyText}</CommandEmpty>\n                <CommandGroup>\n                  {options.map((option) => (\n                    <CommandItem\n                      key={option.value}\n                      value={option.value}\n                      onSelect={handleValueChange}\n                    >\n                      <IconCheck\n                        className={cn(\n                          'mr-2 size-4',\n                          selectedValue === option.value\n                            ? 'opacity-100'\n                            : 'opacity-0'\n                        )}\n                      />\n                      {option.label}\n                    </CommandItem>\n                  ))}\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      </div>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';\n\nexport { Combobox };\n"],"names":["forwardRef","useId","useState","IconCaretUpDown","IconCheck","cn","formFieldOpenState","formFieldTriggerClasses","Button","Command","CommandEmpty","CommandGroup","CommandInput","CommandItem","CommandList","Popover","PopoverContent","PopoverTrigger","Combobox","options","value","onValueChange","placeholder","searchPlaceholder","emptyText","className","type","props","ref","open","setOpen","listboxId","internalValue","setInternalValue","isControlled","undefined","selectedValue","selectedLabel","find","option","label","handleValueChange","newValue","finalValue","div","data-slot","onOpenChange","render","nativeButton","variant","size","role","aria-expanded","aria-controls","span","id","map","onSelect","displayName"],"mappings":";AAAA,SAKEA,UAAU,EACVC,KAAK,EACLC,QAAQ,QACH,QAAQ;AAEf,SAASC,eAAe,EAAEC,SAAS,QAAQ,sBAAsB;AAEjE,SACEC,EAAE,EACFC,kBAAkB,EAClBC,uBAAuB,QAClB,2BAAwB;AAC/B,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SACEC,OAAO,EACPC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,WAAW,EACXC,WAAW,QACN,wBAAqB;AAC5B,SAASC,OAAO,EAAEC,cAAc,EAAEC,cAAc,QAAQ,wBAAqB;AAc7E,MAAMC,yBAEFlB,WACF,CACE,EACEmB,OAAO,EACPC,KAAK,EACLC,aAAa,EACbC,cAAc,kBAAkB,EAChCC,oBAAoB,WAAW,EAC/BC,YAAY,kBAAkB,EAC9BC,SAAS,EACTC,OAAO,QAAQ,EACf,GAAGC,OACJ,EACDC;IAEA,MAAM,CAACC,MAAMC,QAAQ,GAAG5B,SAAS;IACjC,MAAM6B,YAAY9B;IAClB,MAAM,CAAC+B,eAAeC,iBAAiB,GAAG/B,SAASkB,SAAS;IAC5D,MAAMc,eAAed,UAAUe;IAC/B,MAAMC,gBAAgBF,eAAed,QAAQY;IAC7C,MAAMK,gBAAgBD,gBAClBjB,QAAQmB,IAAI,CAAC,CAACC,SAAWA,OAAOnB,KAAK,KAAKgB,gBAAgBI,QAC1DL;IAEJ,MAAMM,oBAAoB,CAACC;QACzB,MAAMC,aAAaD,aAAaN,gBAAgB,KAAKM;QACrD,IAAI,CAACR,cAAc;YACjBD,iBAAiBU;QACnB;QACAtB,gBAAgBsB;QAChBb,QAAQ;IACV;IAEA,qBACE,KAACc;QAAIC,aAAU;kBACb,cAAA,MAAC9B;YAAQc,MAAMA;YAAMiB,cAAchB;;8BACjC,KAACb;oBACC8B,sBACE,MAACvC;wBACCoB,KAAKA;wBACLF,MAAMA;wBACNsB,YAAY;wBACZC,SAAS;wBACTC,MAAM;wBACNL,aAAU;wBACVM,MAAK;wBACLC,iBAAevB;wBACfwB,iBAAetB;wBACfN,WAAWpB,GACTE,yBACAsB,QAAQvB,oBACRmB;wBAED,GAAGE,KAAK;;0CAET,KAAC2B;gCACC7B,WAAWpB,GACT,6BACAgC,gBACI,gEACA;0CAGLA,iBAAiBf;;0CAEpB,KAACnB;gCAAgBsB,WAAU;;;;;8BAIjC,KAACT;oBAAeuC,IAAIxB;oBAAWN,WAAWpB,GAAG,YAAYoB;8BACvD,cAAA,MAAChB;;0CACC,KAACG;gCAAaU,aAAaC;;0CAC3B,MAACT;;kDACC,KAACJ;kDAAcc;;kDACf,KAACb;kDACEQ,QAAQqC,GAAG,CAAC,CAACjB,uBACZ,MAAC1B;gDAECO,OAAOmB,OAAOnB,KAAK;gDACnBqC,UAAUhB;;kEAEV,KAACrC;wDACCqB,WAAWpB,GACT,eACA+B,kBAAkBG,OAAOnB,KAAK,GAC1B,gBACA;;oDAGPmB,OAAOC,KAAK;;+CAZRD,OAAOnB,KAAK;;;;;;;;;;AAsBrC;AAGFF,SAASwC,WAAW,GAAG;AAEvB,SAASxC,QAAQ,GAAG"}

package/dist/components/ui/core/command/command.d.ts

@@ -1,19 +1,21 @@
-import { ForwardRefExoticComponent, RefAttributes, ComponentProps, ReactNode } from 'react';
-import { Command as CommandPrimitive } from 'cmdk';
-import { Dialog } from '../dialog/dialog';
-declare const Command: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive>, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<ComponentProps<typeof Dialog>, 'children'> & {
-    children?: ReactNode;
-    title?: string;
-    description?: string;
-    className?: string;
-    showCloseButton?: boolean;
+import { type ForwardRefExoticComponent, type RefAttributes, type ComponentProps, type ReactNode } from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { Dialog } from "../dialog/dialog";
+declare const Command: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive>, "ref"> & RefAttributes<HTMLDivElement>>;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: Omit<ComponentProps<typeof Dialog>, "children"> & {
+	children?: ReactNode;
+	title?: string;
+	description?: string;
+	className?: string;
+	showCloseButton?: boolean;
 }): ReactNode;
-declare const CommandInput: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Input>, 'ref'> & RefAttributes<HTMLInputElement>>;
-declare const CommandList: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.List>, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const CommandEmpty: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Empty>, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const CommandGroup: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Group>, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Separator>, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const CommandItem: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Item>, 'ref'> & RefAttributes<HTMLDivElement>>;
-declare const CommandShortcut: ForwardRefExoticComponent<ComponentProps<'span'> & RefAttributes<HTMLSpanElement>>;
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };
+declare const CommandInput: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Input>, "ref"> & RefAttributes<HTMLInputElement>>;
+declare const CommandList: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.List>, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Empty>, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Group>, "ref"> & {
+	inset?: boolean;
+} & RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Separator>, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const CommandItem: ForwardRefExoticComponent<Omit<ComponentProps<typeof CommandPrimitive.Item>, "ref"> & RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: ForwardRefExoticComponent<ComponentProps<"span"> & RefAttributes<HTMLSpanElement>>;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };

package/dist/components/ui/core/command/command.js

@@ -1,86 +1,138 @@
-import { cn as e } from "../../../../lib/utils.js";
-import { Dialog as t, DialogContent as n, DialogDescription as r, DialogHeader as i, DialogTitle as a } from "../dialog/dialog.js";
-import { forwardRef as o } from "react";
-import { IconSearch as s } from "@tabler/icons-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Command as u } from "cmdk";
-//#region libs/aura/src/components/ui/core/command/command.tsx
-var d = o(({ className: t, ...n }, r) => /* @__PURE__ */ c(u, {
-	ref: r,
-	"data-slot": "command",
-	className: e("rounded-xl bg-background text-muted-foreground flex h-full w-full flex-col overflow-hidden", t),
-	...n
-}));
-d.displayName = "Command";
-function f({ title: o = "Command Palette", description: s = "Search for a command to run...", children: u, className: f, showCloseButton: p = !0, ...m }) {
-	return /* @__PURE__ */ l(t, {
-		...m,
-		children: [/* @__PURE__ */ l(i, {
-			className: "sr-only rounded-lg",
-			children: [/* @__PURE__ */ c(a, { children: o }), /* @__PURE__ */ c(r, { children: s })]
-		}), /* @__PURE__ */ c(n, {
-			"data-slot": "command-dialog",
-			className: e("overflow-hidden p-0", f),
-			showCloseButton: p,
-			children: /* @__PURE__ */ c(d, {
-				className: "**:[[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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",
-				children: u
-			})
-		})]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { IconSearch } from "@tabler/icons-react";
+import { Command as CommandPrimitive } from "cmdk";
+import { cn, menuContainerPadding, menuItemPadding, menuSectionLabelCmdkHeadingClasses, menuSectionLabelCmdkHeadingInsetClasses, menuSectionSeparatorClasses } from "../../../../lib/utils.js";
+import { assignRef } from "../../../../utils/assign-ref.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "../dialog/dialog.js";
+import { InputGroup, InputGroupAddon, inputGroupInputControlClasses } from "../input-group/input-group.js";
+const Command = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(CommandPrimitive, {
+        ref: ref,
+        "data-slot": "command",
+        className: cn('rounded-xl bg-popover-background text-popover-foreground flex h-full w-full flex-col overflow-hidden', menuSectionLabelCmdkHeadingClasses, menuSectionLabelCmdkHeadingInsetClasses, className),
+        ...props
+    });
+});
+Command.displayName = 'Command';
+function CommandDialog({ title = 'Command Palette', description = 'Search for a command to run...', children, className, showCloseButton = true, ...props }) {
+    return /*#__PURE__*/ _jsxs(Dialog, {
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs(DialogHeader, {
+                className: "sr-only rounded-lg",
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: title
+                    }),
+                    /*#__PURE__*/ _jsx(DialogDescription, {
+                        children: description
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DialogContent, {
+                "data-slot": "command-dialog",
+                className: cn('overflow-hidden p-0 **:data-[slot=command-input-wrapper]:pr-12', className),
+                closeButtonClassName: "top-[calc(0.5rem+1.125rem)] right-2 -translate-y-1/2",
+                closeButtonSize: "icon",
+                showCloseButton: showCloseButton,
+                children: /*#__PURE__*/ _jsx(Command, {
+                    className: cn('[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5', menuSectionLabelCmdkHeadingInsetClasses),
+                    children: children
+                })
+            })
+        ]
+    });
 }
-var p = o(({ className: t, ...n }, r) => /* @__PURE__ */ l("div", {
-	"data-slot": "command-input-wrapper",
-	className: "flex h-10 items-center gap-2 border-b px-2",
-	children: [/* @__PURE__ */ c(s, { className: "size-4 shrink-0 opacity-50" }), /* @__PURE__ */ c(u.Input, {
-		ref: r,
-		"data-slot": "command-input",
-		className: e("placeholder:text-muted-foreground flex h-10 w-full rounded-lg bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", t),
-		...n
-	})]
-}));
-p.displayName = "CommandInput";
-var m = o(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.List, {
-	ref: r,
-	"data-slot": "command-list",
-	className: e("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", t),
-	...n
-}));
-m.displayName = "CommandList";
-var h = o(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Empty, {
-	ref: r,
-	"data-slot": "command-empty",
-	className: e("py-6 text-center text-sm", t),
-	...n
-}));
-h.displayName = "CommandEmpty";
-var g = o(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Group, {
-	ref: r,
-	"data-slot": "command-group",
-	className: e("text-foreground font-normal **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-sm **:[[cmdk-group-heading]]:font-medium", t),
-	...n
-}));
-g.displayName = "CommandGroup";
-var _ = o(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Separator, {
-	ref: r,
-	"data-slot": "command-separator",
-	className: e("bg-border -mx-1 h-px", t),
-	...n
-}));
-_.displayName = "CommandSeparator";
-var v = o(({ className: t, ...n }, r) => /* @__PURE__ */ c(u.Item, {
-	ref: r,
-	"data-slot": "command-item",
-	className: e("data-[selected=true]:bg-accent-background data-[selected=true]:text-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", t),
-	...n
-}));
-v.displayName = "CommandItem";
-var y = o(({ className: t, ...n }, r) => /* @__PURE__ */ c("span", {
-	ref: r,
-	"data-slot": "command-shortcut",
-	className: e("text-muted-foreground ml-auto text-xs tracking-widest", t),
-	...n
-}));
-y.displayName = "CommandShortcut";
-//#endregion
-export { d as Command, f as CommandDialog, h as CommandEmpty, g as CommandGroup, p as CommandInput, v as CommandItem, m as CommandList, _ as CommandSeparator, y as CommandShortcut };
+const CommandInput = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    const inputRef = useRef(null);
+    const setInputRef = (node)=>{
+        inputRef.current = node;
+        assignRef(ref, node);
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "command-input-wrapper",
+        className: "border-b border-default p-2",
+        onClick: ()=>{
+            inputRef.current?.focus();
+        },
+        children: /*#__PURE__*/ _jsxs(InputGroup, {
+            className: cn('w-full', '**:[[cmdk-input-wrapper]]:flex **:[[cmdk-input-wrapper]]:h-full **:[[cmdk-input-wrapper]]:min-w-0 **:[[cmdk-input-wrapper]]:flex-1 **:[[cmdk-input-wrapper]]:items-center'),
+            children: [
+                /*#__PURE__*/ _jsx(InputGroupAddon, {
+                    align: "inline-start",
+                    className: "[&_svg]:text-muted-foreground group-hover/input-group:[&_svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:enabled:focus-visible:not(:read-only)]/input-group:[&_svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:enabled:not(:placeholder-shown):not(:read-only)]/input-group:[&_svg]:text-muted-foreground",
+                    children: /*#__PURE__*/ _jsx(IconSearch, {
+                        className: "size-4",
+                        "aria-hidden": true
+                    })
+                }),
+                /*#__PURE__*/ _jsx(CommandPrimitive.Input, {
+                    ref: setInputRef,
+                    "data-slot": "input-group-control",
+                    className: cn(inputGroupInputControlClasses, 'text-popover-foreground w-full text-sm leading-5 tracking-tight outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:text-base-foreground-disabled disabled:placeholder:text-base-foreground-disabled [&:not(:placeholder-shown):not(:read-only)]:text-base-foreground [&:not(:placeholder-shown):not(:read-only)]:hover:text-base-foreground', className),
+                    ...props
+                })
+            ]
+        })
+    });
+});
+CommandInput.displayName = 'CommandInput';
+const CommandList = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(CommandPrimitive.List, {
+        ref: ref,
+        "data-slot": "command-list",
+        className: cn(menuContainerPadding, 'max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto', className),
+        ...props
+    });
+});
+CommandList.displayName = 'CommandList';
+const CommandEmpty = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, {
+        ref: ref,
+        "data-slot": "command-empty",
+        className: cn('py-6 text-center text-sm text-muted-foreground', className),
+        ...props
+    });
+});
+CommandEmpty.displayName = 'CommandEmpty';
+const CommandGroup = /*#__PURE__*/ forwardRef(({ className, inset, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Group, {
+        ref: ref,
+        "data-slot": "command-group",
+        "data-inset": inset ? true : undefined,
+        className: cn('text-popover-foreground overflow-hidden font-normal', className),
+        ...props
+    });
+});
+CommandGroup.displayName = 'CommandGroup';
+const CommandSeparator = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, {
+        ref: ref,
+        "data-slot": "command-separator",
+        className: cn(menuSectionSeparatorClasses, className),
+        ...props
+    });
+});
+CommandSeparator.displayName = 'CommandSeparator';
+const CommandItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx(CommandPrimitive.Item, {
+        ref: ref,
+        "data-slot": "command-item",
+        className: cn("text-popover-foreground data-[selected=true]:bg-popover-background-hover data-[selected=true]:text-popover-foreground [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-popover-foreground [&>svg:not([class*='size-'])]:size-4 data-[disabled=true]:pointer-events-none data-[disabled=true]:text-base-foreground-disabled data-[disabled=true]:opacity-100 data-[disabled=true]:[&>svg]:text-base-foreground-disabled relative flex min-h-9 cursor-default items-center gap-2 rounded-lg text-sm outline-hidden select-none", menuItemPadding, className),
+        ...props
+    });
+});
+CommandItem.displayName = 'CommandItem';
+const CommandShortcut = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>{
+    return /*#__PURE__*/ _jsx("span", {
+        ref: ref,
+        "data-slot": "command-shortcut",
+        className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className),
+        ...props
+    });
+});
+CommandShortcut.displayName = 'CommandShortcut';
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };
+
+//# sourceMappingURL=command.js.map

package/dist/components/ui/core/command/command.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/command/command.tsx"],"sourcesContent":["import {\n  type ForwardRefExoticComponent,\n  type RefAttributes,\n  type ComponentProps,\n  type ComponentRef,\n  type ReactNode,\n  forwardRef,\n  useRef,\n} from 'react';\n\nimport { IconSearch } from '@tabler/icons-react';\nimport { Command as CommandPrimitive } from 'cmdk';\n\nimport {\n  cn,\n  menuContainerPadding,\n  menuItemPadding,\n  menuSectionLabelCmdkHeadingClasses,\n  menuSectionLabelCmdkHeadingInsetClasses,\n  menuSectionSeparatorClasses,\n} from '../../../../lib/utils';\nimport { assignRef } from '../../../../utils/assign-ref';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../dialog/dialog';\nimport {\n  InputGroup,\n  InputGroupAddon,\n  inputGroupInputControlClasses,\n} from '../input-group/input-group';\n\nconst Command: ForwardRefExoticComponent<\n  Omit<ComponentProps<typeof CommandPrimitive>, 'ref'> &\n    RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof CommandPrimitive>,\n  ComponentProps<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => {\n  return (\n    <CommandPrimitive\n      ref={ref}\n      data-slot=\"command\"\n      className={cn(\n        'rounded-xl bg-popover-background text-popover-foreground flex h-full w-full flex-col overflow-hidden',\n        menuSectionLabelCmdkHeadingClasses,\n        menuSectionLabelCmdkHeadingInsetClasses,\n        className\n      )}\n      {...props}\n    />\n  );\n});\nCommand.displayName = 'Command';\n\nfunction CommandDialog({\n  title = 'Command Palette',\n  description = 'Search for a command to run...',\n  children,\n  className,\n  showCloseButton = true,\n  ...props\n}: Omit<ComponentProps<typeof Dialog>, 'children'> & {\n  children?: ReactNode;\n  title?: string;\n  description?: string;\n  className?: string;\n  showCloseButton?: boolean;\n}): ReactNode {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only rounded-lg\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        data-slot=\"command-dialog\"\n        className={cn(\n          'overflow-hidden p-0 **:data-[slot=command-input-wrapper]:pr-12',\n          className\n        )}\n        closeButtonClassName=\"top-[calc(0.5rem+1.125rem)] right-2 -translate-y-1/2\"\n        closeButtonSize=\"icon\"\n        showCloseButton={showCloseButton}\n      >\n        <Command\n          className={cn(\n            '[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5',\n            menuSectionLabelCmdkHeadingInsetClasses\n          )}\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nconst CommandInput: ForwardRefExoticComponent<\n  Omit<ComponentProps<typeof CommandPrimitive.Input>, 'ref'> &\n    RefAttributes<HTMLInputElement>\n> = forwardRef<\n  ComponentRef<typeof CommandPrimitive.Input>,\n  ComponentProps<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const setInputRef = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    assignRef(ref, node);\n  };\n\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"border-b border-default p-2\"\n      onClick={() => {\n        inputRef.current?.focus();\n      }}\n    >\n      <InputGroup\n        className={cn(\n          'w-full',\n          '**:[[cmdk-input-wrapper]]:flex **:[[cmdk-input-wrapper]]:h-full **:[[cmdk-input-wrapper]]:min-w-0 **:[[cmdk-input-wrapper]]:flex-1 **:[[cmdk-input-wrapper]]:items-center'\n        )}\n      >\n        <InputGroupAddon\n          align=\"inline-start\"\n          className=\"[&_svg]:text-muted-foreground group-hover/input-group:[&_svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:enabled:focus-visible:not(:read-only)]/input-group:[&_svg]:text-muted-foreground group-has-[[data-slot=input-group-control]:enabled:not(:placeholder-shown):not(:read-only)]/input-group:[&_svg]:text-muted-foreground\"\n        >\n          <IconSearch className=\"size-4\" aria-hidden />\n        </InputGroupAddon>\n        <CommandPrimitive.Input\n          ref={setInputRef}\n          data-slot=\"input-group-control\"\n          className={cn(\n            inputGroupInputControlClasses,\n            'text-popover-foreground w-full text-sm leading-5 tracking-tight outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:text-base-foreground-disabled disabled:placeholder:text-base-foreground-disabled [&:not(:placeholder-shown):not(:read-only)]:text-base-foreground [&:not(:placeholder-shown):not(:read-only)]:hover:text-base-foreground',\n            className\n          )}\n          {...props}\n        />\n      </InputGroup>\n    </div>\n  );\n});\nCommandInput.displayName = 'CommandInput';\n\nconst CommandList: ForwardRefExoticComponent<\n  Omit<ComponentProps<typeof CommandPrimitive.List>, 'ref'> &\n    RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof CommandPrimitive.List>,\n  ComponentProps<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => {\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      data-slot=\"command-list\"\n      className={cn(\n        menuContainerPadding,\n        'max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nCommandList.displayName = 'CommandList';\n\nconst CommandEmpty: ForwardRefExoticComponent<\n  Omit<ComponentProps<typeof CommandPrimitive.Empty>, 'ref'> &\n    RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof CommandPrimitive.Empty>,\n  ComponentProps<typeof CommandPrimitive.Empty>\n>(({ className, ...props }, ref) => {\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      data-slot=\"command-empty\"\n      className={cn(\n        'py-6 text-center text-sm text-muted-foreground',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nCommandEmpty.displayName = 'CommandEmpty';\n\nconst CommandGroup: ForwardRefExoticComponent<\n  Omit<ComponentProps<typeof CommandPrimitive.Group>, 'ref'> & {\n    inset?: boolean;\n  } & RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof CommandPrimitive.Group>,\n  ComponentProps<typeof CommandPrimitive.Group> & { inset?: boolean }\n>(({ className, inset, ...props }, ref) => {\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      data-slot=\"command-group\"\n      data-inset={inset ? true : undefined}\n      className={cn(\n        'text-popover-foreground overflow-hidden font-normal',\n        className\n      )}\n      {...props}\n    />\n  );\n});\nCommandGroup.displayName = 'CommandGroup';\n\nconst CommandSeparator: ForwardRefExoticComponent<\n  Omit<ComponentProps<typeof CommandPrimitive.Separator>, 'ref'> &\n    RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof CommandPrimitive.Separator>,\n  ComponentProps<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n  return (\n    <CommandPrimitive.Separator\n      ref={ref}\n      data-slot=\"command-separator\"\n      className={cn(menuSectionSeparatorClasses, className)}\n      {...props}\n    />\n  );\n});\nCommandSeparator.displayName = 'CommandSeparator';\n\nconst CommandItem: ForwardRefExoticComponent<\n  Omit<ComponentProps<typeof CommandPrimitive.Item>, 'ref'> &\n    RefAttributes<HTMLDivElement>\n> = forwardRef<\n  ComponentRef<typeof CommandPrimitive.Item>,\n  ComponentProps<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      data-slot=\"command-item\"\n      className={cn(\n        \"text-popover-foreground data-[selected=true]:bg-popover-background-hover data-[selected=true]:text-popover-foreground [&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:text-popover-foreground [&>svg:not([class*='size-'])]:size-4 data-[disabled=true]:pointer-events-none data-[disabled=true]:text-base-foreground-disabled data-[disabled=true]:opacity-100 data-[disabled=true]:[&>svg]:text-base-foreground-disabled relative flex min-h-9 cursor-default items-center gap-2 rounded-lg text-sm outline-hidden select-none\",\n        menuItemPadding,\n        className\n      )}\n      {...props}\n    />\n  );\n});\nCommandItem.displayName = 'CommandItem';\n\nconst CommandShortcut: ForwardRefExoticComponent<\n  ComponentProps<'span'> & RefAttributes<HTMLSpanElement>\n> = forwardRef<ComponentRef<'span'>, ComponentProps<'span'>>(\n  ({ className, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"command-shortcut\"\n        className={cn(\n          'text-muted-foreground ml-auto text-xs tracking-widest',\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n};\n"],"names":["forwardRef","useRef","IconSearch","Command","CommandPrimitive","cn","menuContainerPadding","menuItemPadding","menuSectionLabelCmdkHeadingClasses","menuSectionLabelCmdkHeadingInsetClasses","menuSectionSeparatorClasses","assignRef","Dialog","DialogContent","DialogDescription","DialogHeader","DialogTitle","InputGroup","InputGroupAddon","inputGroupInputControlClasses","className","props","ref","data-slot","displayName","CommandDialog","title","description","children","showCloseButton","closeButtonClassName","closeButtonSize","CommandInput","inputRef","setInputRef","node","current","div","onClick","focus","align","aria-hidden","Input","CommandList","List","CommandEmpty","Empty","CommandGroup","inset","Group","data-inset","undefined","CommandSeparator","Separator","CommandItem","Item","CommandShortcut","span"],"mappings":"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"}

package/dist/components/ui/core/conversation/conversation.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps, ReactNode } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { Button } from "../button/button";
+type ConversationProps = ComponentProps<typeof StickToBottom>;
+declare const Conversation: ({ className, ...props }: ConversationProps) => ReactNode;
+type ConversationContentProps = Omit<ComponentProps<typeof StickToBottom.Content>, "scrollClassName">;
+declare const ConversationContent: ({ className, ...props }: ConversationContentProps) => ReactNode;
+type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+declare const ConversationScrollButton: ({ className, "aria-label": ariaLabel, onClick, ...props }: ConversationScrollButtonProps) => ReactNode;
+type ConversationTurnProps = ComponentProps<"div"> & {
+	reserveViewport?: boolean;
+};
+declare const ConversationTurn: ({ reserveViewport, className, ...props }: ConversationTurnProps) => ReactNode;
+export { Conversation, ConversationContent, ConversationScrollButton, ConversationTurn, useStickToBottomContext };

package/dist/components/ui/core/conversation/conversation.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { IconArrowDown } from "@tabler/icons-react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+import { cn } from "../../../../lib/utils.js";
+import { Button } from "../button/button.js";
+const Conversation = ({ className, ...props })=>/*#__PURE__*/ _jsx(StickToBottom, {
+        "data-slot": "conversation",
+        className: cn('relative flex min-h-0 flex-1 flex-col overflow-y-hidden', className),
+        initial: "smooth",
+        resize: "smooth",
+        role: "log",
+        ...props
+    });
+const ConversationContent = ({ className, ...props })=>/*#__PURE__*/ _jsx(StickToBottom.Content, {
+        "data-slot": "conversation-content",
+        scrollClassName: cn('min-h-0 flex-1 overflow-y-auto [container-type:size]', '[scrollbar-color:theme(colors.border)_transparent]'),
+        className: cn('flex min-h-full flex-col', className),
+        ...props
+    });
+const ConversationScrollButton = ({ className, 'aria-label': ariaLabel = 'Scroll to bottom', onClick, ...props })=>{
+    const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+    if (isAtBottom) {
+        return null;
+    }
+    const handleClick = (event)=>{
+        void scrollToBottom();
+        onClick?.(event);
+    };
+    return /*#__PURE__*/ _jsx(Button, {
+        "data-slot": "conversation-scroll-button",
+        type: "button",
+        variant: "outline",
+        size: "icon",
+        "aria-label": ariaLabel,
+        className: cn('rounded-full shadow-lg', className),
+        onClick: handleClick,
+        ...props,
+        children: /*#__PURE__*/ _jsx(IconArrowDown, {
+            className: "size-5",
+            stroke: 2
+        })
+    });
+};
+const ConversationTurn = ({ reserveViewport = false, className, ...props })=>/*#__PURE__*/ _jsx("div", {
+        "data-slot": "conversation-turn",
+        className: cn('flex w-full flex-col gap-6', reserveViewport && 'min-h-[100cqh]', className),
+        ...props
+    });
+export { Conversation, ConversationContent, ConversationScrollButton, ConversationTurn, useStickToBottomContext };
+
+//# sourceMappingURL=conversation.js.map

package/dist/components/ui/core/conversation/conversation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ui/core/conversation/conversation.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { IconArrowDown } from '@tabler/icons-react';\nimport { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';\n\nimport { cn } from '../../../../lib/utils';\nimport { Button } from '../button/button';\n\ntype ConversationProps = ComponentProps<typeof StickToBottom>;\n\nconst Conversation = ({\n  className,\n  ...props\n}: ConversationProps): ReactNode => (\n  <StickToBottom\n    data-slot=\"conversation\"\n    className={cn(\n      'relative flex min-h-0 flex-1 flex-col overflow-y-hidden',\n      className\n    )}\n    initial=\"smooth\"\n    resize=\"smooth\"\n    role=\"log\"\n    {...props}\n  />\n);\n\ntype ConversationContentProps = Omit<\n  ComponentProps<typeof StickToBottom.Content>,\n  'scrollClassName'\n>;\n\nconst ConversationContent = ({\n  className,\n  ...props\n}: ConversationContentProps): ReactNode => (\n  <StickToBottom.Content\n    data-slot=\"conversation-content\"\n    scrollClassName={cn(\n      'min-h-0 flex-1 overflow-y-auto [container-type:size]',\n      '[scrollbar-color:theme(colors.border)_transparent]'\n    )}\n    className={cn('flex min-h-full flex-col', className)}\n    {...props}\n  />\n);\n\ntype ConversationScrollButtonProps = ComponentProps<typeof Button>;\n\nconst ConversationScrollButton = ({\n  className,\n  'aria-label': ariaLabel = 'Scroll to bottom',\n  onClick,\n  ...props\n}: ConversationScrollButtonProps): ReactNode => {\n  const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n\n  if (isAtBottom) {\n    return null;\n  }\n\n  const handleClick: ConversationScrollButtonProps['onClick'] = (event) => {\n    void scrollToBottom();\n    onClick?.(event);\n  };\n\n  return (\n    <Button\n      data-slot=\"conversation-scroll-button\"\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon\"\n      aria-label={ariaLabel}\n      className={cn('rounded-full shadow-lg', className)}\n      onClick={handleClick}\n      {...props}\n    >\n      <IconArrowDown className=\"size-5\" stroke={2} />\n    </Button>\n  );\n};\n\ntype ConversationTurnProps = ComponentProps<'div'> & {\n  reserveViewport?: boolean;\n};\n\nconst ConversationTurn = ({\n  reserveViewport = false,\n  className,\n  ...props\n}: ConversationTurnProps): ReactNode => (\n  <div\n    data-slot=\"conversation-turn\"\n    className={cn(\n      'flex w-full flex-col gap-6',\n      reserveViewport && 'min-h-[100cqh]',\n      className\n    )}\n    {...props}\n  />\n);\n\nexport {\n  Conversation,\n  ConversationContent,\n  ConversationScrollButton,\n  ConversationTurn,\n  useStickToBottomContext,\n};\n"],"names":["IconArrowDown","StickToBottom","useStickToBottomContext","cn","Button","Conversation","className","props","data-slot","initial","resize","role","ConversationContent","Content","scrollClassName","ConversationScrollButton","ariaLabel","onClick","isAtBottom","scrollToBottom","handleClick","event","type","variant","size","aria-label","stroke","ConversationTurn","reserveViewport","div"],"mappings":";AAEA,SAASA,aAAa,QAAQ,sBAAsB;AACpD,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,sBAAsB;AAE7E,SAASC,EAAE,QAAQ,2BAAwB;AAC3C,SAASC,MAAM,QAAQ,sBAAmB;AAI1C,MAAMC,eAAe,CAAC,EACpBC,SAAS,EACT,GAAGC,OACe,iBAClB,KAACN;QACCO,aAAU;QACVF,WAAWH,GACT,2DACAG;QAEFG,SAAQ;QACRC,QAAO;QACPC,MAAK;QACJ,GAAGJ,KAAK;;AASb,MAAMK,sBAAsB,CAAC,EAC3BN,SAAS,EACT,GAAGC,OACsB,iBACzB,KAACN,cAAcY,OAAO;QACpBL,aAAU;QACVM,iBAAiBX,GACf,wDACA;QAEFG,WAAWH,GAAG,4BAA4BG;QACzC,GAAGC,KAAK;;AAMb,MAAMQ,2BAA2B,CAAC,EAChCT,SAAS,EACT,cAAcU,YAAY,kBAAkB,EAC5CC,OAAO,EACP,GAAGV,OAC2B;IAC9B,MAAM,EAAEW,UAAU,EAAEC,cAAc,EAAE,GAAGjB;IAEvC,IAAIgB,YAAY;QACd,OAAO;IACT;IAEA,MAAME,cAAwD,CAACC;QAC7D,KAAKF;QACLF,UAAUI;IACZ;IAEA,qBACE,KAACjB;QACCI,aAAU;QACVc,MAAK;QACLC,SAAQ;QACRC,MAAK;QACLC,cAAYT;QACZV,WAAWH,GAAG,0BAA0BG;QACxCW,SAASG;QACR,GAAGb,KAAK;kBAET,cAAA,KAACP;YAAcM,WAAU;YAASoB,QAAQ;;;AAGhD;AAMA,MAAMC,mBAAmB,CAAC,EACxBC,kBAAkB,KAAK,EACvBtB,SAAS,EACT,GAAGC,OACmB,iBACtB,KAACsB;QACCrB,aAAU;QACVF,WAAWH,GACT,8BACAyB,mBAAmB,kBACnBtB;QAED,GAAGC,KAAK;;AAIb,SACEF,YAAY,EACZO,mBAAmB,EACnBG,wBAAwB,EACxBY,gBAAgB,EAChBzB,uBAAuB,GACvB"}

package/dist/components/ui/core/count/count.d.ts

@@ -1,9 +1,11 @@
-import { ForwardRefExoticComponent, RefAttributes, ComponentProps } from 'react';
-import { VariantProps } from 'class-variance-authority';
-import { ClassProp } from 'class-variance-authority/types';
+import { type ForwardRefExoticComponent, type RefAttributes, type ComponentProps } from "react";
+import { type VariantProps } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
 interface CountVariantProps {
-    variant?: 'default' | 'warning' | 'critical' | null;
+	variant?: "default" | "success" | "warning" | "critical" | null;
 }
 declare const countVariants: (props?: (CountVariantProps & ClassProp) | undefined) => string;
-declare const Count: ForwardRefExoticComponent<ComponentProps<'output'> & VariantProps<typeof countVariants> & RefAttributes<HTMLOutputElement>>;
-export { Count, countVariants };
+declare const Count: ForwardRefExoticComponent<ComponentProps<"output"> & VariantProps<typeof countVariants> & RefAttributes<HTMLOutputElement>>;
+declare const CountValue: ForwardRefExoticComponent<ComponentProps<"span"> & RefAttributes<HTMLSpanElement>>;
+declare const CountUnit: ForwardRefExoticComponent<ComponentProps<"span"> & RefAttributes<HTMLSpanElement>>;
+export { Count, CountUnit, CountValue, countVariants };