@sqlrooms/ui 0.29.0-rc.1 → 0.29.0-rc.10

package/LICENSE.md

@@ -1,6 +1,7 @@
 MIT License
 
-Copyright 2025 SQLRooms Contributors
+Copyright 2024-2026 SQLRooms Contributors
+Copyright Vis.gl contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -90,14 +90,91 @@ function MyComponent() {
 
 ## Available Components
 
-- **Layout**: Card, Resizable, Tabs
-- **Forms**: Button, Checkbox, Input, Select, Slider, Switch, Textarea
+- **Layout**: Card, Resizable, SettingsPanelHeader, Tabs
+- **Forms**: Button, Checkbox, Combobox, Input, Select, Slider, Switch, Textarea
 - **Feedback**: Alert, Progress, Spinner, Toast
-- **Navigation**: Accordion, Breadcrumb, Dropdown Menu
-- **Overlay**: Dialog, Popover, Tooltip
+- **Navigation**: Accordion, Breadcrumb, Dropdown Menu, TabStrip
+- **Overlay**: Dialog, ModifierScrollOverlay, Popover, Tooltip
 - **Data Display**: Badge, Table
 - **Utility**: Error Boundary, Theme Switch
 
+## Combobox
+
+Use the compound `Combobox` component for searchable select dropdowns built on
+the package's Popover and Command primitives.
+
+```tsx
+import {Combobox} from '@sqlrooms/ui';
+
+function MySelector() {
+  const [value, setValue] = useState('');
+  const options = [
+    {value: 'option1', label: 'Option 1'},
+    {value: 'option2', label: 'Option 2'},
+    {value: 'option3', label: 'Option 3'},
+  ];
+  const selectedLabel =
+    options.find((option) => option.value === value)?.label ?? 'Select option';
+
+  return (
+    <Combobox value={value} onChange={setValue}>
+      <Combobox.Trigger>
+        <span>{selectedLabel}</span>
+      </Combobox.Trigger>
+      <Combobox.Content
+        searchable
+        searchPlaceholder="Search..."
+        emptyMessage="No results found."
+      >
+        {options.map((option) => (
+          <Combobox.Item key={option.value} value={option.value}>
+            <span>{option.label}</span>
+          </Combobox.Item>
+        ))}
+      </Combobox.Content>
+    </Combobox>
+  );
+}
+```
+
+Available compound components:
+
+- `Combobox` (root) - Manages state and provides context
+- `Combobox.Trigger` - Button to open the dropdown
+- `Combobox.Content` - Popover content wrapper
+- `Combobox.Item` - Individual selectable item
+
+Pass `disabled` to the root `Combobox` to disable opening the dropdown and
+selecting items.
+
+For advanced composition, the lower-level `useCombobox` hook is also exported.
+
+## Settings Panel Header
+
+Use `SettingsPanelHeader` for compact settings surfaces that should share the
+standard settings icon and optional close affordance.
+
+```tsx
+import {Button, SettingsPanelHeader} from '@sqlrooms/ui';
+import {CodeIcon} from 'lucide-react';
+
+function SettingsPanel({onClose}: {onClose: () => void}) {
+  return (
+    <div className="flex h-full flex-col gap-2 p-2">
+      <SettingsPanelHeader
+        actions={
+          <Button type="button" variant="ghost" size="icon">
+            <CodeIcon className="h-3.5 w-3.5" />
+          </Button>
+        }
+        onClose={onClose}
+      />
+      {/* settings controls */}
+    </div>
+  );
+}
+```
+
 ## Advanced Features
 
 - **Component Composition**: Build complex UIs by composing simple components
@@ -105,4 +182,21 @@ function MyComponent() {
 - **Custom Styling**: Extend components with custom styles using Tailwind CSS
 - **Animation**: Smooth transitions and animations for interactive elements
 
+## TabStrip
+
+`TabStrip` supports a `fontSize` prop for sizing tab labels, inline rename
+inputs, search dropdown content, and built-in subcomponents consistently:
+
+```tsx
+<TabStrip
+  tabs={tabs}
+  openTabs={openTabs}
+  selectedTabId={selectedTabId}
+  fontSize="12px"
+/>
+```
+
+Use `renderSearchItemLabel` when the search dropdown should show custom row
+content, such as a status spinner next to a tab name.
+
 For more information, visit the SQLRooms documentation.

package/dist/components/accordion.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as React from 'react';
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
 //# sourceMappingURL=accordion.d.ts.map

package/dist/components/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAKhE,QAAA,MAAM,SAAS,8JAA0B,CAAC;AAE1C,QAAA,MAAM,aAAa,iKASjB,CAAC;AAGH,QAAA,MAAM,gBAAgB,0KAiBpB,CAAC;AAGH,QAAA,MAAM,gBAAgB,oKAWpB,CAAC;AAGH,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,SAAS,8JAA0B,CAAC;AAE1C,QAAA,MAAM,aAAa,iKASjB,CAAC;AAGH,QAAA,MAAM,gBAAgB,0KAiBpB,CAAC;AAGH,QAAA,MAAM,gBAAgB,oKAWpB,CAAC;AAGH,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAC,CAAC"}

package/dist/components/accordion.js

@@ -1,15 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
 import { cn } from '../lib/utils';
 const Accordion = AccordionPrimitive.Root;
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn('border-b', className), ...props })));
 AccordionItem.displayName = 'AccordionItem';
 const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn('flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDown, { className: "text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" })] }) })));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn('pb-4 pt-0', className), children: children }) })));
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn('pt-0 pb-4', className), children: children }) })));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
 //# sourceMappingURL=accordion.js.map

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC;AAE1C,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,kBAAkB,CAAC,IAAI,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAChC,KAAK,GACT,CACH,CAAC,CAAC;AACH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1C,KAAC,kBAAkB,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACzC,MAAC,kBAAkB,CAAC,OAAO,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gJAAgJ,EAChJ,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACT,KAAC,WAAW,IAAC,SAAS,EAAC,0EAA0E,GAAG,IACzE,GACH,CAC7B,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1C,KAAC,kBAAkB,CAAC,OAAO,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,2GAA2G,KACjH,KAAK,YAET,cAAK,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,GACjC,CAC9B,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,EAAC,CAAC","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport {ChevronDown} from 'lucide-react';\n\nimport {cn} from '../lib/utils';\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({className, ...props}, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn('border-b', className)}\n    {...props}\n  />\n));\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({className, children, ...props}, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({className, children, ...props}, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n    {...props}\n  >\n    <div className={cn('pb-4 pt-0', className)}>{children}</div>\n  </AccordionPrimitive.Content>\n));\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport {Accordion, AccordionItem, AccordionTrigger, AccordionContent};\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/components/accordion.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AACzC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,SAAS,GAAG,kBAAkB,CAAC,IAAI,CAAC;AAE1C,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,KAAC,kBAAkB,CAAC,IAAI,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAChC,KAAK,GACT,CACH,CAAC,CAAC;AACH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAE5C,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1C,KAAC,kBAAkB,CAAC,MAAM,IAAC,SAAS,EAAC,MAAM,YACzC,MAAC,kBAAkB,CAAC,OAAO,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,gJAAgJ,EAChJ,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACT,KAAC,WAAW,IAAC,SAAS,EAAC,0EAA0E,GAAG,IACzE,GACH,CAC7B,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAC1C,KAAC,kBAAkB,CAAC,OAAO,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,2GAA2G,KACjH,KAAK,YAET,cAAK,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAO,GACjC,CAC9B,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC,OAAO,CAAC,WAAW,CAAC;AAEtE,OAAO,EAAC,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAC,CAAC","sourcesContent":["'use client';\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion';\nimport {ChevronDown} from 'lucide-react';\nimport * as React from 'react';\n\nimport {cn} from '../lib/utils';\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({className, ...props}, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn('border-b', className)}\n    {...props}\n  />\n));\nAccordionItem.displayName = 'AccordionItem';\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({className, children, ...props}, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        'flex flex-1 items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n));\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({className, children, ...props}, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n    {...props}\n  >\n    <div className={cn('pt-0 pb-4', className)}>{children}</div>\n  </AccordionPrimitive.Content>\n));\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nexport {Accordion, AccordionContent, AccordionItem, AccordionTrigger};\n"]}

package/dist/components/alert.js

@@ -15,7 +15,7 @@ const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm [
 });
 const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("div", { ref: ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })));
 Alert.displayName = 'Alert';
-const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn('mb-1 font-medium leading-none tracking-tight', className), ...props })));
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn('mb-1 leading-none font-medium tracking-tight', className), ...props })));
 AlertTitle.displayName = 'AlertTitle';
 const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('text-sm [&_p]:leading-relaxed', className), ...props })));
 AlertDescription.displayName = 'AlertDescription';

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,GAAG,EAAoB,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,aAAa,GAAG,GAAG,CACvB,yKAAyK,EACzK;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,+BAA+B;YACxC,WAAW,EACT,yFAAyF;SAC5F;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAEF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAC,OAAO,EAAC,CAAC,EAAE,SAAS,CAAC,KAC9C,KAAK,GACT,CACH,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,SAAS,CAAC,KACpE,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport {cva, type VariantProps} from 'class-variance-authority';\n\nimport {cn} from '../lib/utils';\n\nconst alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({className, variant, ...props}, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({variant}), className)}\n    {...props}\n  />\n));\nAlert.displayName = 'Alert';\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({className, ...props}, ref) => (\n  <h5\n    ref={ref}\n    className={cn('mb-1 font-medium leading-none tracking-tight', className)}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\nexport {Alert, AlertTitle, AlertDescription};\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../src/components/alert.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,GAAG,EAAoB,MAAM,0BAA0B,CAAC;AAEhE,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,aAAa,GAAG,GAAG,CACvB,yKAAyK,EACzK;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,+BAA+B;YACxC,WAAW,EACT,yFAAyF;SAC5F;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC;AAEF,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,CAAC,EAAC,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CACzC,cACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAC,OAAO,EAAC,CAAC,EAAE,SAAS,CAAC,KAC9C,KAAK,GACT,CACH,CAAC,CAAC;AACH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAE5B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,8CAA8C,EAAE,SAAS,CAAC,KACpE,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport {cva, type VariantProps} from 'class-variance-authority';\n\nimport {cn} from '../lib/utils';\n\nconst alertVariants = cva(\n  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground',\n        destructive:\n          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({className, variant, ...props}, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({variant}), className)}\n    {...props}\n  />\n));\nAlert.displayName = 'Alert';\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({className, ...props}, ref) => (\n  <h5\n    ref={ref}\n    className={cn('mb-1 leading-none font-medium tracking-tight', className)}\n    {...props}\n  />\n));\nAlertTitle.displayName = 'AlertTitle';\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-sm [&_p]:leading-relaxed', className)}\n    {...props}\n  />\n));\nAlertDescription.displayName = 'AlertDescription';\n\nexport {Alert, AlertTitle, AlertDescription};\n"]}

package/dist/components/card.js

@@ -6,7 +6,7 @@ const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { r
 Card.displayName = 'Card';
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('flex flex-col space-y-1.5 p-6', className), ...props })));
 CardHeader.displayName = 'CardHeader';
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('font-semibold leading-none tracking-tight', className), ...props })));
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('leading-none font-semibold tracking-tight', className), ...props })));
 CardTitle.displayName = 'CardTitle';
 const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('text-muted-foreground text-sm', className), ...props })));
 CardDescription.displayName = 'CardDescription';

package/dist/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE,SAAS,CAAC,KACjE,KAAK,GACT,CACH,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACnE,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAClD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAC,CAAC","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport {cn} from '../lib/utils';\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'bg-card text-card-foreground rounded-xl border shadow',\n      className,\n    )}\n    {...props}\n  />\n));\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col space-y-1.5 p-6', className)}\n    {...props}\n  />\n));\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('font-semibold leading-none tracking-tight', className)}\n    {...props}\n  />\n));\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-muted-foreground text-sm', className)}\n    {...props}\n  />\n));\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />\n));\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center p-6 pt-0', className)}\n    {...props}\n  />\n));\nCardFooter.displayName = 'CardFooter';\n\nexport {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent};\n"]}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAEhC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAG3B,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAC;AACH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAE1B,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,2CAA2C,EAAE,SAAS,CAAC,KACjE,KAAK,GACT,CACH,CAAC,CAAC;AACH,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAGtC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAC;AACH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAEhD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CACnE,CAAC,CAAC;AACH,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAGjC,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAChC,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,KAClD,KAAK,GACT,CACH,CAAC,CAAC;AACH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAC,CAAC","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport {cn} from '../lib/utils';\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'bg-card text-card-foreground rounded-xl border shadow',\n      className,\n    )}\n    {...props}\n  />\n));\nCard.displayName = 'Card';\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col space-y-1.5 p-6', className)}\n    {...props}\n  />\n));\nCardHeader.displayName = 'CardHeader';\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('leading-none font-semibold tracking-tight', className)}\n    {...props}\n  />\n));\nCardTitle.displayName = 'CardTitle';\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('text-muted-foreground text-sm', className)}\n    {...props}\n  />\n));\nCardDescription.displayName = 'CardDescription';\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />\n));\nCardContent.displayName = 'CardContent';\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({className, ...props}, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center p-6 pt-0', className)}\n    {...props}\n  />\n));\nCardFooter.displayName = 'CardFooter';\n\nexport {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent};\n"]}

package/dist/components/combobox.d.ts

@@ -1,2 +1,68 @@
-export declare function ComboboxDemo(): import("react/jsx-runtime").JSX.Element;
+import { type FC, type PropsWithChildren } from 'react';
+import { type UseComboboxOptions } from '../hooks/useCombobox';
+/**
+ * Root props for the compound Combobox component.
+ */
+export type ComboboxRootProps<T extends string = string> = PropsWithChildren<UseComboboxOptions<T> & {
+    /**
+     * Optional selected value used for item highlighting when it differs from
+     * the controlled value.
+     */
+    currentValue?: string;
+}>;
+declare function ComboboxRoot<T extends string = string>({ value, onChange, currentValue, disabled, children, }: ComboboxRootProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for the button that opens the combobox popover.
+ */
+export interface ComboboxTriggerProps {
+    className?: string;
+    ariaLabel?: string;
+}
+/**
+ * Props for the popover content that contains combobox options.
+ */
+export interface ComboboxContentProps {
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+}
+/**
+ * Props for an individual selectable combobox item.
+ */
+export interface ComboboxItemProps {
+    /**
+     * Stable item value committed through the Combobox onChange handler.
+     */
+    value: string;
+    /**
+     * Optional display text or aliases used to match this item during search.
+     */
+    keywords?: string[];
+    isSelected?: boolean;
+}
+/**
+ * Compound component for Popover-based combobox selectors.
+ *
+ * @example
+ * ```tsx
+ * <Combobox value={value} onChange={setValue}>
+ *   <Combobox.Trigger>
+ *     <span>{selectedLabel}</span>
+ *   </Combobox.Trigger>
+ *   <Combobox.Content searchable searchPlaceholder="Search...">
+ *     {options.map((option) => (
+ *       <Combobox.Item key={option.value} value={option.value}>
+ *         <span>{option.label}</span>
+ *       </Combobox.Item>
+ *     ))}
+ *   </Combobox.Content>
+ * </Combobox>
+ * ```
+ */
+export declare const Combobox: typeof ComboboxRoot & {
+    Trigger: FC<PropsWithChildren<ComboboxTriggerProps>>;
+    Content: FC<PropsWithChildren<ComboboxContentProps>>;
+    Item: FC<PropsWithChildren<ComboboxItemProps>>;
+};
+export {};
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAwCA,wBAAgB,YAAY,4CAiD3B"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAC;AAaf,OAAO,EAAc,KAAK,kBAAkB,EAAC,MAAM,sBAAsB,CAAC;AAqB1E;;GAEG;AACH,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,iBAAiB,CAC1E,kBAAkB,CAAC,CAAC,CAAC,GAAG;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,CAAC;AAEF,iBAAS,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EAC/C,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CAmBtB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuBD;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAwBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ;;;;CAInB,CAAC"}

package/dist/components/combobox.js

@@ -1,41 +1,67 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { createContext, useContext, } from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import { cn } from '../lib/utils';
 import { Button } from './button';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from './command';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
-const frameworks = [
-    {
-        value: 'next.js',
-        label: 'Next.js',
-    },
-    {
-        value: 'sveltekit',
-        label: 'SvelteKit',
-    },
-    {
-        value: 'nuxt.js',
-        label: 'Nuxt.js',
-    },
-    {
-        value: 'remix',
-        label: 'Remix',
-    },
-    {
-        value: 'astro',
-        label: 'Astro',
-    },
-];
-export function ComboboxDemo() {
-    const [open, setOpen] = React.useState(false);
-    const [value, setValue] = React.useState('');
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, className: "w-[200px] justify-between", children: [value
-                            ? frameworks.find((framework) => framework.value === value)?.label
-                            : 'Select framework...', _jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[200px] p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search framework..." }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No framework found." }), _jsx(CommandGroup, { children: frameworks.map((framework) => (_jsxs(CommandItem, { value: framework.value, onSelect: (currentValue) => {
-                                            setValue(currentValue === value ? '' : currentValue);
-                                            setOpen(false);
-                                        }, children: [_jsx(Check, { className: cn('mr-2 h-4 w-4', value === framework.value ? 'opacity-100' : 'opacity-0') }), framework.label] }, framework.value))) })] })] }) })] }));
+import { useCombobox } from '../hooks/useCombobox';
+const ComboboxContext = createContext(null);
+function useComboboxContext() {
+    const context = useContext(ComboboxContext);
+    if (!context) {
+        throw new Error('Combobox compound components must be used within Combobox');
+    }
+    return context;
 }
+function ComboboxRoot({ value, onChange, currentValue, disabled, children, }) {
+    const { popoverProps, handleSelect, open } = useCombobox({
+        value,
+        onChange,
+        disabled,
+    });
+    return (_jsx(ComboboxContext.Provider, { value: {
+            open,
+            disabled: Boolean(disabled),
+            currentValue: currentValue ?? String(value),
+            handleSelect,
+        }, children: _jsx(Popover, { ...popoverProps, children: children }) }));
+}
+const ComboboxTrigger = ({ children, className, ariaLabel, }) => {
+    const { disabled, open } = useComboboxContext();
+    return (_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", role: "combobox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, className: cn('h-8 justify-between text-xs font-normal', className), children: [children, _jsx(ChevronsUpDown, { className: "ml-2 h-3.5 w-3.5 shrink-0 opacity-50" })] }) }));
+};
+const ComboboxContent = ({ children, searchable = false, searchPlaceholder = 'Search...', emptyMessage = 'No matching option.', }) => {
+    return (_jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0 text-xs", children: _jsxs(Command, { children: [searchable && (_jsx(CommandInput, { placeholder: searchPlaceholder, className: "text-xs" })), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: emptyMessage }), _jsx(CommandGroup, { children: children })] })] }) }));
+};
+const ComboboxItem = ({ value, keywords, children, isSelected, }) => {
+    const { currentValue, handleSelect } = useComboboxContext();
+    const selected = isSelected ?? currentValue === value;
+    return (_jsxs(CommandItem, { value: value, keywords: keywords, onSelect: handleSelect, children: [_jsx(Check, { className: cn('h-3.5 w-3.5 shrink-0', selected ? 'opacity-100' : 'opacity-0') }), children] }));
+};
+/**
+ * Compound component for Popover-based combobox selectors.
+ *
+ * @example
+ * ```tsx
+ * <Combobox value={value} onChange={setValue}>
+ *   <Combobox.Trigger>
+ *     <span>{selectedLabel}</span>
+ *   </Combobox.Trigger>
+ *   <Combobox.Content searchable searchPlaceholder="Search...">
+ *     {options.map((option) => (
+ *       <Combobox.Item key={option.value} value={option.value}>
+ *         <span>{option.label}</span>
+ *       </Combobox.Item>
+ *     ))}
+ *   </Combobox.Content>
+ * </Combobox>
+ * ```
+ */
+export const Combobox = Object.assign(ComboboxRoot, {
+    Trigger: ComboboxTrigger,
+    Content: ComboboxContent,
+    Item: ComboboxItem,
+});
 //# sourceMappingURL=combobox.js.map

package/dist/components/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAC,EAAE,EAAC,MAAM,cAAc,CAAC;AAChC,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,OAAO,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,WAAW,GACZ,MAAM,WAAW,CAAC;AACnB,OAAO,EAAC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAC,MAAM,WAAW,CAAC;AAElE,MAAM,UAAU,GAAG;IACjB;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;IACD;QACE,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,OAAO;KACf;CACF,CAAC;AAEF,MAAM,UAAU,YAAY;IAC1B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE7C,OAAO,CACL,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,KAAC,cAAc,IAAC,OAAO,kBACrB,MAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,UAAU,mBACA,IAAI,EACnB,SAAS,EAAC,2BAA2B,aAEpC,KAAK;4BACJ,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,KAAK,KAAK,CAAC,EAAE,KAAK;4BAClE,CAAC,CAAC,qBAAqB,EACzB,KAAC,cAAc,IAAC,SAAS,EAAC,kCAAkC,GAAG,IACxD,GACM,EACjB,KAAC,cAAc,IAAC,SAAS,EAAC,eAAe,YACvC,MAAC,OAAO,eACN,KAAC,YAAY,IAAC,WAAW,EAAC,qBAAqB,GAAG,EAClD,MAAC,WAAW,eACV,KAAC,YAAY,sCAAmC,EAChD,KAAC,YAAY,cACV,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAC7B,MAAC,WAAW,IAEV,KAAK,EAAE,SAAS,CAAC,KAAK,EACtB,QAAQ,EAAE,CAAC,YAAY,EAAE,EAAE;4CACzB,QAAQ,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;4CACrD,OAAO,CAAC,KAAK,CAAC,CAAC;wCACjB,CAAC,aAED,KAAC,KAAK,IACJ,SAAS,EAAE,EAAE,CACX,cAAc,EACd,KAAK,KAAK,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CACxD,GACD,EACD,SAAS,CAAC,KAAK,KAbX,SAAS,CAAC,KAAK,CAcR,CACf,CAAC,GACW,IACH,IACN,GACK,IACT,CACX,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {Check, ChevronsUpDown} from 'lucide-react';\n\nimport {cn} from '../lib/utils';\nimport {Button} from './button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from './command';\nimport {Popover, PopoverContent, PopoverTrigger} from './popover';\n\nconst frameworks = [\n  {\n    value: 'next.js',\n    label: 'Next.js',\n  },\n  {\n    value: 'sveltekit',\n    label: 'SvelteKit',\n  },\n  {\n    value: 'nuxt.js',\n    label: 'Nuxt.js',\n  },\n  {\n    value: 'remix',\n    label: 'Remix',\n  },\n  {\n    value: 'astro',\n    label: 'Astro',\n  },\n];\n\nexport function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false);\n  const [value, setValue] = React.useState('');\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : 'Select framework...'}\n          <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? '' : currentValue);\n                    setOpen(false);\n                  }}\n                >\n                  <Check\n                    className={cn(\n                      'mr-2 h-4 w-4',\n                      value === framework.value ? 'opacity-100' : 'opacity-0',\n                    )}\n                  />\n                  {framework.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"]}
+{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../src/components/combobox.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type PropsWithChildren,\n  createContext,\n  useContext,\n} from 'react';\nimport {Check, ChevronsUpDown} from 'lucide-react';\nimport {cn} from '../lib/utils';\nimport {Button} from './button';\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from './command';\nimport {Popover, PopoverContent, PopoverTrigger} from './popover';\nimport {useCombobox, type UseComboboxOptions} from '../hooks/useCombobox';\n\ninterface ComboboxContextValue {\n  open: boolean;\n  disabled: boolean;\n  currentValue: string;\n  handleSelect: (value: string) => void;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useComboboxContext() {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(\n      'Combobox compound components must be used within Combobox',\n    );\n  }\n  return context;\n}\n\n/**\n * Root props for the compound Combobox component.\n */\nexport type ComboboxRootProps<T extends string = string> = PropsWithChildren<\n  UseComboboxOptions<T> & {\n    /**\n     * Optional selected value used for item highlighting when it differs from\n     * the controlled value.\n     */\n    currentValue?: string;\n  }\n>;\n\nfunction ComboboxRoot<T extends string = string>({\n  value,\n  onChange,\n  currentValue,\n  disabled,\n  children,\n}: ComboboxRootProps<T>) {\n  const {popoverProps, handleSelect, open} = useCombobox({\n    value,\n    onChange,\n    disabled,\n  });\n\n  return (\n    <ComboboxContext.Provider\n      value={{\n        open,\n        disabled: Boolean(disabled),\n        currentValue: currentValue ?? String(value),\n        handleSelect,\n      }}\n    >\n      <Popover {...popoverProps}>{children}</Popover>\n    </ComboboxContext.Provider>\n  );\n}\n\n/**\n * Props for the button that opens the combobox popover.\n */\nexport interface ComboboxTriggerProps {\n  className?: string;\n  ariaLabel?: string;\n}\n\nconst ComboboxTrigger: FC<PropsWithChildren<ComboboxTriggerProps>> = ({\n  children,\n  className,\n  ariaLabel,\n}) => {\n  const {disabled, open} = useComboboxContext();\n\n  return (\n    <PopoverTrigger asChild>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-label={ariaLabel}\n        disabled={disabled}\n        className={cn('h-8 justify-between text-xs font-normal', className)}\n      >\n        {children}\n        <ChevronsUpDown className=\"ml-2 h-3.5 w-3.5 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n  );\n};\n\n/**\n * Props for the popover content that contains combobox options.\n */\nexport interface ComboboxContentProps {\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  emptyMessage?: string;\n}\n\nconst ComboboxContent: FC<PropsWithChildren<ComboboxContentProps>> = ({\n  children,\n  searchable = false,\n  searchPlaceholder = 'Search...',\n  emptyMessage = 'No matching option.',\n}) => {\n  return (\n    <PopoverContent className=\"w-[--radix-popover-trigger-width] p-0 text-xs\">\n      <Command>\n        {searchable && (\n          <CommandInput placeholder={searchPlaceholder} className=\"text-xs\" />\n        )}\n        <CommandList>\n          <CommandEmpty>{emptyMessage}</CommandEmpty>\n          <CommandGroup>{children}</CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  );\n};\n\n/**\n * Props for an individual selectable combobox item.\n */\nexport interface ComboboxItemProps {\n  /**\n   * Stable item value committed through the Combobox onChange handler.\n   */\n  value: string;\n  /**\n   * Optional display text or aliases used to match this item during search.\n   */\n  keywords?: string[];\n  isSelected?: boolean;\n}\n\nconst ComboboxItem: FC<PropsWithChildren<ComboboxItemProps>> = ({\n  value,\n  keywords,\n  children,\n  isSelected,\n}) => {\n  const {currentValue, handleSelect} = useComboboxContext();\n  const selected = isSelected ?? currentValue === value;\n\n  return (\n    <CommandItem value={value} keywords={keywords} onSelect={handleSelect}>\n      <Check\n        className={cn(\n          'h-3.5 w-3.5 shrink-0',\n          selected ? 'opacity-100' : 'opacity-0',\n        )}\n      />\n      {children}\n    </CommandItem>\n  );\n};\n\n/**\n * Compound component for Popover-based combobox selectors.\n *\n * @example\n * ```tsx\n * <Combobox value={value} onChange={setValue}>\n *   <Combobox.Trigger>\n *     <span>{selectedLabel}</span>\n *   </Combobox.Trigger>\n *   <Combobox.Content searchable searchPlaceholder=\"Search...\">\n *     {options.map((option) => (\n *       <Combobox.Item key={option.value} value={option.value}>\n *         <span>{option.label}</span>\n *       </Combobox.Item>\n *     ))}\n *   </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport const Combobox = Object.assign(ComboboxRoot, {\n  Trigger: ComboboxTrigger,\n  Content: ComboboxContent,\n  Item: ComboboxItem,\n});\n"]}

package/dist/components/editable-text.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 /**
  * Component that allows the user to edit a string.
  *
@@ -31,6 +31,7 @@ import { FC } from 'react';
  */
 export declare const EditableText: FC<{
     className?: string;
+    style?: CSSProperties;
     isReadOnly?: boolean;
     editTrigger?: 'click' | 'doubleClick';
     value: string;

package/dist/components/editable-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../../src/components/editable-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,EAAE,EAA2C,MAAM,OAAO,CAAC;AAKhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;;QAGI;IACJ,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;QAEI;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAwKA,CAAC"}
+{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../../src/components/editable-text.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,aAAa,EACb,EAAE,EAKH,MAAM,OAAO,CAAC;AAKf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,yEAAyE;IACzE,2BAA2B,CAAC,EAAE,OAAO,CAAC;IAEtC;;;QAGI;IACJ,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;QAEI;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAuMA,CAAC"}

package/dist/components/editable-text.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, } from 'react';
 import { cn } from '../lib/utils';
 import { Input } from './input';
 /**
@@ -33,11 +33,17 @@ import { Input } from './input';
  *    />
  * ```
  */
-export const EditableText = ({ className, isReadOnly = false, defaultEditing = false, editTrigger = 'click', isEditing, placeholder, value, onChange, onInputChange, onEditingChange, autoFocus, selectOnFocus = false, allowTabFocusWhenNotEditing = true, }) => {
+export const EditableText = ({ className, style, isReadOnly = false, defaultEditing = false, editTrigger = 'click', isEditing, placeholder, value, onChange, onInputChange, onEditingChange, autoFocus, selectOnFocus = false, allowTabFocusWhenNotEditing = true, }) => {
     const [isInternalEditing, setInternalIsEditing] = useState(defaultEditing);
     const inputRef = useRef(null);
     const [internalValue, setInternalValue] = useState(value);
     const internalValueRef = useRef(internalValue);
+    const valueRef = useRef(value);
+    const skipBlurHandlerRef = useRef(false);
+    // Keep valueRef in sync
+    useEffect(() => {
+        valueRef.current = value;
+    }, [value]);
     useEffect(() => {
         internalValueRef.current = internalValue;
     }, [internalValue]);
@@ -84,10 +90,21 @@ export const EditableText = ({ className, isReadOnly = false, defaultEditing = f
         onEditingChange?.(nextIsEditing);
     }, [isReadOnly, onEditingChange]);
     const handleBlur = useCallback(() => {
+        // Skip if blur was triggered by Enter/Escape key
+        if (skipBlurHandlerRef.current) {
+            skipBlurHandlerRef.current = false;
+            return;
+        }
+        const trimmedValue = internalValueRef.current?.trim();
+        onChange(trimmedValue);
+        // After onChange, sync internal value back to the prop
+        // If parent rejected the change, value prop stays the same and we reset
+        // If parent accepted the change, value prop updates and we sync to it
+        setInternalValue(valueRef.current);
+        internalValueRef.current = valueRef.current;
         handleSetEditing(false);
-        onChange(internalValueRef.current?.trim());
     }, [handleSetEditing, onChange]);
-    const handleClick = useCallback((event) => {
+    const handleClick = useCallback(() => {
         if (!isInternalEditing) {
             inputRef.current?.select();
             handleSetEditing(true);
@@ -118,17 +135,26 @@ export const EditableText = ({ className, isReadOnly = false, defaultEditing = f
         const handleKeyDown = (e) => {
             switch (e.key) {
                 case 'Escape':
-                    // Reset the internal value to the original value
-                    setInternalValue(value);
-                    internalValueRef.current = value;
+                    // Reset the internal value to the prop value
+                    setInternalValue(valueRef.current);
+                    internalValueRef.current = valueRef.current;
                     handleSetEditing(false);
+                    skipBlurHandlerRef.current = true;
                     inputRef.current?.blur();
                     break;
-                case 'Enter':
+                case 'Enter': {
+                    const trimmedValue = internalValueRef.current.trim();
+                    onChange(trimmedValue);
+                    // After onChange, sync internal value back to the prop
+                    // If parent rejected the change, value prop stays the same and we reset
+                    // If parent accepted the change, value prop updates and we sync to it
+                    setInternalValue(valueRef.current);
+                    internalValueRef.current = valueRef.current;
                     handleSetEditing(false);
-                    onChange(internalValueRef.current.trim());
+                    skipBlurHandlerRef.current = true;
                     inputRef.current?.blur();
                     break;
+                }
             }
         };
         if (isInternalEditing) {
@@ -137,13 +163,14 @@ export const EditableText = ({ className, isReadOnly = false, defaultEditing = f
         return () => {
             document.removeEventListener('keydown', handleKeyDown);
         };
-    }, [isInternalEditing, onChange, handleSetEditing, value]);
+    }, [isInternalEditing, onChange, handleSetEditing]);
     return (_jsx(Input, { ref: inputRef, className: cn('w-full rounded-sm border-transparent px-1 py-0 disabled:opacity-1', 'focus:outline-hidden disabled:cursor-text', {
             'focus:border-blue-500 focus:ring-blue-500': isInternalEditing,
             'bg-transparent select-none': !isInternalEditing,
             truncate: !isInternalEditing,
         }, className), style: {
-            caretColor: isInternalEditing ? undefined : 'transparent',
+            ...(style ?? {}),
+            caretColor: isInternalEditing ? style?.caretColor : 'transparent',
         }, value: internalValue, tabIndex: isInternalEditing || allowTabFocusWhenNotEditing ? 0 : -1, autoFocus: autoFocus, onChange: handleSetValue, onFocus: handleFocus, onBlur: handleBlur, disabled: isReadOnly, onClick: editTrigger === 'click' ? handleClick : undefined, onDoubleClick: editTrigger === 'doubleClick' ? handleClick : undefined, placeholder: !isInternalEditing ? (placeholder ?? 'Click to edit') : undefined }));
 };
 //# sourceMappingURL=editable-text.js.map