@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

package/src/components/ToggleButton/index.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleButton = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Flex_1 = require("../Flex");
 const twMerge_1 = require("../../twMerge");
+const utils_1 = require("../../lib/utils");
 const ToggleButton = ({ checked, onChange, disabled, className, children, style = {}, 'data-name': dataName, }) => {
     const isChecked = Boolean(checked);
     const handleChange = (event) => {
@@ -15,12 +14,12 @@ const ToggleButton = ({ checked, onChange, disabled, className, children, style
         onChange(Boolean(event.target.checked));
     };
     const baseClassName = 'ab-ToggleButton';
-    const preparedClassName = (0, clsx_1.default)(baseClassName, 'twa:group twa:outline-0', 'twa:select-none twa:relative twa:inline-block', 'twa:min-w-[40px]', 'twa:min-h-input', 'twa:w-[77px]', {
+    const preparedClassName = (0, utils_1.cn)(baseClassName, 'twa:group twa:outline-0', 'twa:select-none twa:relative twa:inline-block', 'twa:min-w-[40px]', 'twa:min-h-input', 'twa:w-[77px]', {
         [`${baseClassName}--checked`]: isChecked,
         [`${baseClassName}--disabled`]: disabled,
         'twa:hover:cursor-pointer twa:hover:opacity-85': !disabled,
     }, className);
-    return ((0, jsx_runtime_1.jsxs)("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: (0, twMerge_1.twMerge)(preparedClassName), children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: (0, clsx_1.default)(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", "data-checked": isChecked, className: (0, clsx_1.default)(`${baseClassName}__slider`, 'twa:group:focus-within:ring-1 twa:group-focus-within:shadow-(--ab-focus__box-shadow)', 'twa:absolute twa:inset-0 twa:rounded-standard', {
+    return ((0, jsx_runtime_1.jsxs)("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: (0, twMerge_1.twMerge)(preparedClassName), children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: (0, utils_1.cn)(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", "data-checked": isChecked, className: (0, utils_1.cn)(`${baseClassName}__slider`, 'twa:group:focus-within:ring-1 twa:group-focus-within:shadow-(--ab-focus__box-shadow)', 'twa:absolute twa:inset-0 twa:rounded-standard', {
                     'twa:bg-(--ab-cmp-toggle-button__background)': !isChecked,
                     'twa:bg-accent': isChecked,
                     'twa:justify-start': isChecked,
@@ -28,7 +27,7 @@ const ToggleButton = ({ checked, onChange, disabled, className, children, style
                     'twa:opacity-50': disabled,
                 }, 
                 // the :before pseudo element
-                'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.default)(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
+                'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
                         'twa:text-(--ab-cmp-toggle-button__color)': !isChecked,
                         'twa:text-(--ab-cmp-toggle-button--checked__color)': isChecked,
                         'twa:pl-2': isChecked,

package/src/components/Tree/TreeDropdown/index.js

@@ -3,10 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.toDisplayValueFromOptionTree = exports.toDisplayValueDefault = void 0;
 exports.TreeDropdown = TreeDropdown;
 exports.GridFilterTreeDropdown = GridFilterTreeDropdown;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const lucide_react_1 = require("lucide-react");
 const InfiniteTable_1 = require("../../InfiniteTable");
 const Combobox_1 = require("../../Combobox");
@@ -64,15 +62,9 @@ function TreeItemLabel(props) {
     // that base-ui's boolean indicator can't.
     const indent = node.depth > 0 ? `calc(${node.depth} * var(--ab-tree-indent-size))` : 0;
     const iconProps = {
-        style: {
-            // override this explicitly since the parent ComboboxItem
-            // sets this on highlighted items, but the color is not appropriate
-            //@ts-ignore ignore
-            '--ab-color-accent-foreground': 'var(--ab-color-accent)',
-        },
         className: 'twa:size-4',
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [node.hasChildren ? ((0, jsx_runtime_1.jsx)("button", { type: "button", tabIndex: -1, "aria-label": isExpanded ? 'Collapse' : 'Expand', "data-name": "expand-collapse-icon", onMouseDown: handleChevronMouseDown, onClick: handleChevronClick, style: { order: -1, marginLeft: indent }, className: (0, utils_1.cn)('twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center twa:rounded', 'twa:cursor-pointer'), children: isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { ...iconProps }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { ...iconProps }) })) : reserveExpandSpace ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", style: { order: -1, marginLeft: indent }, className: "twa:inline-block twa:size-4 twa:shrink-0" })) : null, (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: selected, checkSquareClassName: (0, clsx_1.default)(selected === true && 'twa:ring-1 twa:ring-accent-foreground') }), (0, jsx_runtime_1.jsx)("span", { className: "twa:truncate twa:min-w-0 twa:flex-1", children: node.label })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [node.hasChildren ? ((0, jsx_runtime_1.jsx)("button", { type: "button", tabIndex: -1, "aria-label": isExpanded ? 'Collapse' : 'Expand', "data-name": "expand-collapse-icon", onMouseDown: handleChevronMouseDown, onClick: handleChevronClick, style: { order: -1, marginLeft: indent }, className: (0, utils_1.cn)('twa:bg-transparent twa:text-foreground', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center twa:rounded', 'twa:cursor-pointer'), children: isExpanded ? (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { ...iconProps }) : (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRightIcon, { ...iconProps }) })) : reserveExpandSpace ? ((0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", style: { order: -1, marginLeft: indent }, className: "twa:inline-block twa:size-4 twa:shrink-0" })) : null, (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: selected, checkSquareClassName: (0, utils_1.cn)(selected === true && 'twa:ring-1 twa:ring-accent-foreground') }), (0, jsx_runtime_1.jsx)("span", { className: "twa:truncate twa:min-w-0 twa:flex-1", children: node.label })] }));
 }
 function TreeDropdown(props) {
     const { isLoading = false } = props;
@@ -461,7 +453,7 @@ function TreeDropdown(props) {
             }, onClick: (e) => {
                 e.preventDefault();
                 toggleExpandAll();
-            }, className: (0, utils_1.cn)('ab-NewTreeDropdown-expand-all', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center', 'twa:bg-defaultbackground', 'twa:size-6 twa:rounded-md twa:text-muted-foreground', 'twa:hover:text-foreground twa:hover:bg-ring/50 twa:cursor-pointer'
+            }, className: (0, utils_1.cn)('ab-NewTreeDropdown-expand-all', 'twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center', 'twa:bg-background', 'twa:size-6 twa:rounded-md twa:text-muted-foreground', 'twa:hover:text-foreground twa:hover:bg-ring/50 twa:cursor-pointer'
             // 'twa:-mr-1'
             ), children: anyBranchExpanded ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsDownUpIcon, { className: "twa:size-4" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronsUpDownIcon, { className: "twa:size-4" })) }));
     }, [branchNodes.length, anyBranchExpanded, toggleExpandAll]);
@@ -486,6 +478,8 @@ function TreeDropdown(props) {
         resizable: props.resizable,
         placeholder: props.placeholder,
         showClear: showRemoveChip,
+        //@ts-ignore ignore
+        'data-name': props['data-name'] ?? 'Select Values',
         renderItemLabel: (defaultLabel) => {
             return defaultLabel;
         },
@@ -503,11 +497,11 @@ function TreeDropdown(props) {
         },
         renderInputValues,
         renderSearchInputTrailing,
-        className: (0, clsx_1.default)('ab-NewTreeDropdown', props.className),
+        className: (0, utils_1.cn)('ab-NewTreeDropdown', props.className),
     };
     return (
         // <div
-        //   className={clsx('ab-NewTreeDropdown-wrap', 'twa:w-full')}
+        //   className={cn('ab-NewTreeDropdown-wrap', 'twa:w-full')}
         //   style={{ ...props.fieldStyle, ...props.style }}
         //   onMouseDown={props.onMouseDown}
         // >
@@ -527,10 +521,6 @@ function GridFilterTreeDropdown(props) {
         }
         return ((0, jsx_runtime_1.jsxs)("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && selectedLeafPaths.length > 0 && ((0, jsx_runtime_1.jsxs)("span", { "data-name": "multiple-values-count", className: "twa:mr-0.5", children: ["(", selectedLeafPaths.length, ")"] })), children] }));
     }, [placeholder, showSelectedCount]);
-    const mergedClassName = (0, utils_1.cn)(
-    // Match the restyling GridFilterCombobox uses: remove the field border,
-    // flatten the shadow and absolutely position so the component fits the
-    // grid's floating-filter input box.
-    'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', className);
+    const mergedClassName = (0, utils_1.cn)(Combobox_1.GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, className);
     return ((0, jsx_runtime_1.jsx)(TreeDropdown, { ...rest, placeholder: placeholder, className: mergedClassName, showClear: rest.showClear ?? false, resizable: rest.resizable ?? true, renderSelectedValues: renderSelectedValues }));
 }

package/src/components/WarningBox/index.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WarningBox = exports.baseClassName = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 exports.baseClassName = 'ab-WarningBox';
 const WarningBox = (props) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, clsx_1.default)('twa:p-3 twa:rounded-standard twa:bg-warn twa:text-text-on-warn', exports.baseClassName, props.className) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, utils_1.cn)('twa:p-3 twa:rounded-standard twa:bg-warn twa:text-warn-foreground', exports.baseClassName, props.className) }));
 };
 exports.WarningBox = WarningBox;

package/src/components/icons/sort-asc.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DefaultIcon_1 = tslib_1.__importDefault(require("./DefaultIcon"));
-exports.default = (props) => ((0, jsx_runtime_1.jsx)(DefaultIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("g", { transform: "scale(0.021 0.021)", children: [(0, jsx_runtime_1.jsx)("path", { d: "M320 768v-768h-128v768h-160l224 224 224-224h-160z" }), (0, jsx_runtime_1.jsx)("path", { d: "M928 1024h-256c-11.8 0-22.644-6.496-28.214-16.9-5.566-10.404-4.958-23.030 1.59-32.85l222.832-334.25h-196.208c-17.672 0-32-14.328-32-32s14.328-32 32-32h256c11.8 0 22.644 6.496 28.214 16.9 5.566 10.404 4.958 23.030-1.59 32.85l-222.83 334.25h196.206c17.672 0 32 14.328 32 32s-14.328 32-32 32z" }), (0, jsx_runtime_1.jsx)("path", { d: "M1020.622 401.686l-192.002-384c-5.42-10.842-16.502-17.69-28.622-17.69-12.122 0-23.202 6.848-28.624 17.69l-191.996 384c-7.904 15.806-1.496 35.030 14.31 42.932 4.594 2.296 9.476 3.386 14.288 3.386 11.736 0 23.040-6.484 28.644-17.698l55.156-110.31h216.446l55.156 110.31c7.902 15.806 27.124 22.21 42.932 14.31 15.808-7.902 22.216-27.124 14.312-42.93zM723.778 255.996l76.22-152.446 76.224 152.446h-152.444z" })] }) }));
+exports.default = (props) => ((0, jsx_runtime_1.jsx)(DefaultIcon_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("g", { transform: "scale(0.021 0.021)", children: [(0, jsx_runtime_1.jsx)("path", { transform: "translate(0, 1024) scale(1, -1)", d: "M320 768v-768h-128v768h-160l224 224 224-224h-160z" }), (0, jsx_runtime_1.jsx)("path", { d: "M928 1024h-256c-11.8 0-22.644-6.496-28.214-16.9-5.566-10.404-4.958-23.030 1.59-32.85l222.832-334.25h-196.208c-17.672 0-32-14.328-32-32s14.328-32 32-32h256c11.8 0 22.644 6.496 28.214 16.9 5.566 10.404 4.958 23.030-1.59 32.85l-222.83 334.25h196.206c17.672 0 32 14.328 32 32s-14.328 32-32 32z" }), (0, jsx_runtime_1.jsx)("path", { d: "M1020.622 401.686l-192.002-384c-5.42-10.842-16.502-17.69-28.622-17.69-12.122 0-23.202 6.848-28.624 17.69l-191.996 384c-7.904 15.806-1.496 35.030 14.31 42.932 4.594 2.296 9.476 3.386 14.288 3.386 11.736 0 23.040-6.484 28.644-17.698l55.156-110.31h216.446l55.156 110.31c7.902 15.806 27.124 22.21 42.932 14.31 15.808-7.902 22.216-27.124 14.312-42.93zM723.778 255.996l76.22-152.446 76.224 152.446h-152.444z" })] }) }));

package/src/components/ui/button.d.ts

@@ -1,8 +1,11 @@
-import { Button as ButtonPrimitive } from '@base-ui/react/button';
+import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: {
     variant?: "link" | "secondary" | "default" | "ghost" | "outline" | "destructive";
-    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg";
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
-declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
+declare const Button: React.ForwardRefExoticComponent<Omit<import("@base-ui/react/button").ButtonProps & VariantProps<(props?: {
+    variant?: "link" | "secondary" | "default" | "ghost" | "outline" | "destructive";
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/src/components/ui/button.js

@@ -1,16 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonVariants = void 0;
-exports.Button = Button;
+exports.buttonVariants = exports.Button = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const button_1 = require("@base-ui/react/button");
 const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 const buttonVariants = (0, class_variance_authority_1.cva)('twa:group/button twa:inline-flex twa:shrink-0 twa:items-center twa:justify-center twa:rounded-button twa:border twa:border-transparent twa:bg-clip-padding twa:text-sm twa:font-medium twa:whitespace-nowrap twa:transition-all twa:outline-none twa:select-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:active:translate-y-px twa:disabled:pointer-events-none twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', {
     variants: {
         variant: {
             default: 'twa:bg-primary twa:text-primary-foreground twa:hover:bg-primary/80',
-            outline: 'twa:border-border twa:bg-background twa:shadow-xs twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:border-input twa:dark:bg-input/30 twa:dark:hover:bg-input/50',
+            outline: 'twa:border-border twa:bg-background twa:shadow-xs twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:border-input  twa:dark:hover:bg-input/50',
             secondary: 'twa:bg-secondary twa:text-secondary-foreground twa:hover:bg-secondary/80 twa:aria-expanded:bg-secondary twa:aria-expanded:text-secondary-foreground',
             ghost: 'twa:bg-transparent twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50',
             destructive: 'twa:bg-destructive/10 twa:text-destructive twa:hover:bg-destructive/20 twa:focus-visible:border-destructive/40 twa:focus-visible:ring-destructive/20 twa:dark:bg-destructive/20 twa:dark:hover:bg-destructive/30 twa:dark:focus-visible:ring-destructive/40',
@@ -33,6 +34,7 @@ const buttonVariants = (0, class_variance_authority_1.cva)('twa:group/button twa
     },
 });
 exports.buttonVariants = buttonVariants;
-function Button({ className, variant = 'default', size = 'default', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(button_1.Button, { "data-slot": "button", className: (0, utils_1.cn)(buttonVariants({ variant, size, className })), ...props }));
-}
+const Button = React.forwardRef(function Button({ className, variant = 'default', size = 'default', ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { "data-slot": "button", className: (0, utils_1.cn)(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
+exports.Button = Button;

package/src/components/ui/calendar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DayPicker } from 'react-day-picker';
-import { Button } from '~/components/ui/button';
+import { Button } from './button';
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>['variant'];
 }): React.JSX.Element;

package/src/components/ui/calendar.js

@@ -5,8 +5,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_day_picker_1 = require("react-day-picker");
-const utils_1 = require("~/lib/utils");
-const button_1 = require("~/components/ui/button");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("./button");
 const lucide_react_1 = require("lucide-react");
 const CalendarRoot = ({ className, rootRef, ...props }) => {
     return (0, jsx_runtime_1.jsx)("div", { "data-slot": "calendar", ref: rootRef, className: (0, utils_1.cn)(className), ...props });

package/src/components/ui/combobox.d.ts

@@ -6,32 +6,34 @@ declare const Combobox: typeof ComboboxPrimitive.Root;
 declare const RESIZABLE_VIRTUALIZED_LIST_CLASS = "twa:group-data-resizable/combobox-content:max-h-none twa:group-data-resizable/combobox-content:flex-1 twa:group-data-resizable/combobox-content:min-h-0 twa:group-data-resizable/combobox-content:flex twa:group-data-resizable/combobox-content:flex-col";
 declare const RESIZABLE_VIRTUALIZED_SCROLL_CLASS = "twa:group-data-resizable/combobox-content:h-auto twa:group-data-resizable/combobox-content:max-h-none twa:group-data-resizable/combobox-content:flex-1 twa:group-data-resizable/combobox-content:min-h-0";
 declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element;
-declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element;
-export declare function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props): React.JSX.Element;
-declare function ComboboxInput({ className, children, disabled, isLoading, showTrigger, showClear, groupRef, ...props }: ComboboxPrimitive.Input.Props & {
+declare const ComboboxTrigger: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxTriggerProps & {
+    icon?: React.ReactNode;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxClear: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteInputProps & {
     isLoading?: boolean;
     showTrigger?: boolean;
     showClear?: boolean;
     /** Ref to the visible `InputGroup` wrapper. Use as the popup anchor so the popup
      * lines up with the perceived combobox box (input + buttons), not just the bare input. */
     groupRef?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, resizable, contentRef, style, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> & {
     resizable?: boolean;
     contentRef?: (el: HTMLDivElement | null) => void;
     maxLabelLength?: number;
 }): React.JSX.Element;
-declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;
-declare function ComboboxItem({ className, children, renderCheckboxIndicator, ...props }: ComboboxPrimitive.Item.Props & {
-    renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props['render'];
-}): React.JSX.Element;
-declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element;
-declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element;
+declare const ComboboxList: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxItem: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxItemProps & {
+    renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props["render"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxLabel: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element;
-declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element;
-declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element;
-declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element;
-declare function ComboboxChip({ className, children, showRemove, onRemove, ...props }: ComboboxPrimitive.Chip.Props & {
+declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxChip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps & {
     showRemove?: boolean;
     /**
      * Optional override for the remove action. When provided, a plain button
@@ -42,7 +44,7 @@ declare function ComboboxChip({ className, children, showRemove, onRemove, ...pr
      * the chip's composite list index and would target the wrong value.
      */
     onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}): React.JSX.Element;
-declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxChipsInput: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare function useComboboxAnchor(): React.RefObject<HTMLDivElement>;
 export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, RESIZABLE_VIRTUALIZED_SCROLL_CLASS, };

package/src/components/ui/combobox.js

@@ -1,20 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RESIZABLE_VIRTUALIZED_SCROLL_CLASS = exports.RESIZABLE_VIRTUALIZED_LIST_CLASS = exports.Combobox = exports.ComboboxPrimitive = exports.useFilteredItems = void 0;
-exports.ComboboxClear = ComboboxClear;
-exports.ComboboxInput = ComboboxInput;
+exports.RESIZABLE_VIRTUALIZED_SCROLL_CLASS = exports.RESIZABLE_VIRTUALIZED_LIST_CLASS = exports.ComboboxTrigger = exports.ComboboxChipsInput = exports.ComboboxChip = exports.ComboboxChips = exports.ComboboxSeparator = exports.ComboboxEmpty = exports.ComboboxLabel = exports.ComboboxGroup = exports.ComboboxItem = exports.ComboboxList = exports.ComboboxInput = exports.Combobox = exports.ComboboxClear = exports.ComboboxPrimitive = exports.useFilteredItems = void 0;
 exports.ComboboxContent = ComboboxContent;
-exports.ComboboxList = ComboboxList;
-exports.ComboboxItem = ComboboxItem;
-exports.ComboboxGroup = ComboboxGroup;
-exports.ComboboxLabel = ComboboxLabel;
 exports.ComboboxCollection = ComboboxCollection;
-exports.ComboboxEmpty = ComboboxEmpty;
-exports.ComboboxSeparator = ComboboxSeparator;
-exports.ComboboxChips = ComboboxChips;
-exports.ComboboxChip = ComboboxChip;
-exports.ComboboxChipsInput = ComboboxChipsInput;
-exports.ComboboxTrigger = ComboboxTrigger;
 exports.ComboboxValue = ComboboxValue;
 exports.useComboboxAnchor = useComboboxAnchor;
 const tslib_1 = require("tslib");
@@ -22,9 +10,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("@base-ui/react");
 Object.defineProperty(exports, "ComboboxPrimitive", { enumerable: true, get: function () { return react_1.Combobox; } });
-const utils_1 = require("~/lib/utils");
-const button_1 = require("~/components/ui/button");
-const input_group_1 = require("~/components/ui/input-group");
+const utils_1 = require("../../lib/utils");
+const button_1 = require("./button");
+const input_group_1 = require("./input-group");
 const lucide_react_1 = require("lucide-react");
 const CheckBox_1 = require("../CheckBox");
 const useFilteredItems = react_1.Combobox.useFilteredItems;
@@ -39,16 +27,18 @@ exports.RESIZABLE_VIRTUALIZED_SCROLL_CLASS = RESIZABLE_VIRTUALIZED_SCROLL_CLASS;
 function ComboboxValue({ ...props }) {
     return (0, jsx_runtime_1.jsx)(react_1.Combobox.Value, { "data-slot": "combobox-value", ...props });
 }
-function ComboboxTrigger({ className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Trigger, { "data-slot": "combobox-trigger", className: (0, utils_1.cn)('twa:[&_svg:not([class*=size-])]:size-4', className), ...props, children: [children, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" })] }));
-}
-function ComboboxClear({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Clear, { "data-slot": "combobox-clear", render: (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { variant: "ghost", size: "icon-xs", className: "twa:min-h-auto!" }), className: (0, utils_1.cn)(className), ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "twa:pointer-events-none", strokeWidth: 1 }) }));
-}
-function ComboboxInput({ className, children, disabled = false, isLoading = false, showTrigger = true, showClear = false, groupRef, ...props }) {
+const ComboboxTrigger = React.forwardRef(function ComboboxTrigger({ className, children, icon, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Trigger, { "data-slot": "combobox-trigger", className: (0, utils_1.cn)('twa:[&_svg:not([class*=size-])]:size-4', className), ref: ref, ...props, children: [children, icon !== undefined ? (icon) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" }))] }));
+});
+exports.ComboboxTrigger = ComboboxTrigger;
+exports.ComboboxClear = React.forwardRef(function ComboboxClear({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Clear, { "data-slot": "combobox-clear", render: (0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { variant: "ghost", size: "icon-xs", className: "twa:min-h-auto!" }), className: className, ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "twa:pointer-events-none", strokeWidth: 1 }) }));
+});
+const ComboboxInput = React.forwardRef(function ComboboxInput({ className, children, disabled = false, isLoading = false, showTrigger = true, showClear = false, groupRef, ...props }, ref) {
     const { 'aria-label': ariaLabel, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { ref: groupRef, className: (0, utils_1.cn)('twa:w-auto', className), "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(react_1.Combobox.Input, { render: (0, jsx_runtime_1.jsx)(input_group_1.InputGroupInput, { disabled: disabled }), ...rest }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", children: [isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), showTrigger && ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "twa:group-has-data-[slot=combobox-clear]/input-group:hidden twa:data-pressed:bg-transparent twa:min-h-auto!", disabled: disabled })), showClear && (0, jsx_runtime_1.jsx)(ComboboxClear, { disabled: disabled })] }), children] }));
-}
+    return ((0, jsx_runtime_1.jsxs)(input_group_1.InputGroup, { ref: groupRef, className: (0, utils_1.cn)('twa:w-auto', className), "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(react_1.Combobox.Input, { ref: ref, render: (0, jsx_runtime_1.jsx)(input_group_1.InputGroupInput, { disabled: disabled }), ...rest }), (0, jsx_runtime_1.jsxs)(input_group_1.InputGroupAddon, { align: "inline-end", children: [isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), showTrigger && ((0, jsx_runtime_1.jsx)(input_group_1.InputGroupButton, { size: "icon-xs", variant: "ghost", render: (0, jsx_runtime_1.jsx)(ComboboxTrigger, {}), "data-slot": "combobox-toggle", className: "twa:group-has-data-[slot=combobox-clear]/input-group:hidden twa:data-pressed:bg-transparent twa:min-h-auto!", disabled: disabled })), showClear && (0, jsx_runtime_1.jsx)(exports.ComboboxClear, { disabled: disabled })] }), children] }));
+});
+exports.ComboboxInput = ComboboxInput;
 function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = 'start', alignOffset = 0, anchor, resizable = false, contentRef, style, ...props }) {
     const sizeRef = React.useRef(null);
     const popupElRef = React.useRef(null);
@@ -73,36 +63,43 @@ function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = '
         : undefined;
     return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.Combobox.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: `twa:isolate ${utils_1.POPUP_Z_INDEX}`, children: (0, jsx_runtime_1.jsx)(react_1.Combobox.Popup, { ref: popupRef, "data-slot": "combobox-content", "data-chips": !!anchor, "data-resizable": resizable || undefined, style: { ...resizableStyle, ...style }, className: (0, utils_1.cn)('twa:group/combobox-content twa:relative twa:origin-(--transform-origin) twa:overflow-hidden twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:*:data-[slot=input-group]:m-1 twa:*:data-[slot=input-group]:mb-0 twa:*:data-[slot=input-group]:h-8 twa:*:data-[slot=input-group]:border-input/30 twa:*:data-[slot=input-group]:bg-input/30 twa:*:data-[slot=input-group]:shadow-none twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:max-h-[min(var(--available-height),80vh)]', 'twa:max-w-[min(var(--available-width),80vw)]', 'twa:min-w-[min(calc(var(--anchor-width)+--spacing(7)),var(--available-width),80vw)]', resizable ? 'twa:flex twa:flex-col twa:min-h-24' : 'twa:w-(--anchor-width)', className), ...props }) }) }));
 }
-function ComboboxList({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.List, { "data-slot": "combobox-list", className: (0, utils_1.cn)('twa:no-scrollbar twa:max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] twa:scroll-py-1 twa:overflow-y-auto twa:overscroll-contain twa:p-1 twa:data-empty:p-0', RESIZABLE_LIST_CLASS, className), ...props }));
-}
+const ComboboxList = React.forwardRef(function ComboboxList({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.List, { "data-slot": "combobox-list", className: (0, utils_1.cn)('twa:no-scrollbar twa:max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] twa:scroll-py-1 twa:overflow-y-auto twa:overscroll-contain twa:p-1 twa:data-empty:p-0', RESIZABLE_LIST_CLASS, className), ref: ref, ...props }));
+});
+exports.ComboboxList = ComboboxList;
 const checkboxIndicatorRender = (props, state) => {
     const clsForSquare = state.selected ? 'twa:ring-1 twa:ring-accent-foreground' : '';
     return ((0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: state.selected, tabIndex: -1, checkSquareClassName: clsForSquare, className: "twa:p-0 twa:m-0 twa:cursor-pointer" }));
 };
-function ComboboxItem({ className, children, renderCheckboxIndicator, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Item, { className: (0, utils_1.cn)('twa:relative twa:flex twa:w-full twa:cursor-default twa:items-center twa:gap-2 twa:rounded-input twa:py-1.5 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:data-highlighted:bg-accent twa:data-highlighted:text-accent-foreground twa:not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', 'twa:cursor-pointer', renderCheckboxIndicator ? 'twa:pr-2' : 'twa:pr-8', className), ...props, "data-slot": "combobox-item", children: [renderCheckboxIndicator ? ((0, jsx_runtime_1.jsx)(react_1.Combobox.ItemIndicator, { keepMounted: true, render: renderCheckboxIndicator === true ? checkboxIndicatorRender : renderCheckboxIndicator })) : null, children, !renderCheckboxIndicator && ((0, jsx_runtime_1.jsx)(react_1.Combobox.ItemIndicator, { render: (0, jsx_runtime_1.jsx)("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "twa:pointer-events-none" }) }))] }));
-}
-function ComboboxGroup({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Group, { "data-slot": "combobox-group", className: (0, utils_1.cn)(className), ...props }));
-}
-function ComboboxLabel({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.GroupLabel, { "data-slot": "combobox-label", className: (0, utils_1.cn)('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ...props }));
-}
+const ComboboxItem = React.forwardRef(function ComboboxItem({ className, children, renderCheckboxIndicator, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Item, { ref: ref, className: (0, utils_1.cn)('twa:relative twa:flex twa:w-full twa:cursor-default twa:items-center twa:gap-2 twa:rounded-input twa:py-1.5 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:data-highlighted:bg-accent twa:data-highlighted:text-accent-foreground twa:not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', 'twa:cursor-pointer', renderCheckboxIndicator ? 'twa:pr-2' : 'twa:pr-8', className), ...props, "data-slot": "combobox-item", children: [renderCheckboxIndicator ? ((0, jsx_runtime_1.jsx)(react_1.Combobox.ItemIndicator, { keepMounted: true, render: renderCheckboxIndicator === true ? checkboxIndicatorRender : renderCheckboxIndicator })) : null, children, !renderCheckboxIndicator && ((0, jsx_runtime_1.jsx)(react_1.Combobox.ItemIndicator, { render: (0, jsx_runtime_1.jsx)("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: (0, jsx_runtime_1.jsx)(lucide_react_1.CheckIcon, { className: "twa:pointer-events-none" }) }))] }));
+});
+exports.ComboboxItem = ComboboxItem;
+const ComboboxGroup = React.forwardRef(function ComboboxGroup({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Group, { "data-slot": "combobox-group", className: (0, utils_1.cn)(className), ref: ref, ...props }));
+});
+exports.ComboboxGroup = ComboboxGroup;
+const ComboboxLabel = React.forwardRef(function ComboboxLabel({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.GroupLabel, { "data-slot": "combobox-label", className: (0, utils_1.cn)('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ref: ref, ...props }));
+});
+exports.ComboboxLabel = ComboboxLabel;
 function ComboboxCollection({ ...props }) {
     return (0, jsx_runtime_1.jsx)(react_1.Combobox.Collection, { "data-slot": "combobox-collection", ...props });
 }
-function ComboboxEmpty({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Empty, { "data-slot": "combobox-empty", className: (0, utils_1.cn)('twa:hidden twa:w-full twa:justify-center twa:py-2 twa:text-center twa:text-sm twa:text-muted-foreground twa:group-data-empty/combobox-content:flex', className), ...props }));
-}
-function ComboboxSeparator({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Separator, { "data-slot": "combobox-separator", className: (0, utils_1.cn)('twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ...props }));
-}
-function ComboboxChips({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Chips, { "data-slot": "combobox-chips", className: (0, utils_1.cn)('twa:focus-within:outline-none', 'twa:flex twa:flex-wrap twa:items-center twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-input-background twa:bg-clip-padding twa:text-sm twa:shadow-xs twa:transition-[color,box-shadow] twa:focus-within:border-ring twa:focus-within:ring-3 twa:focus-within:ring-ring/50 twa:has-aria-invalid:border-destructive twa:has-aria-invalid:ring-3 twa:has-aria-invalid:ring-destructive/20 twa:has-data-[slot=combobox-chip]:px-1.5 twa:dark:bg-input/30 twa:dark:has-aria-invalid:border-destructive/50 twa:dark:has-aria-invalid:ring-destructive/40', 'twa:py-1', 'twa:px-2.5', 'twa:min-h-input', 'twa:[&>input]:max-h-[calc(var(--ab-input-height)-1.5*var(--ab-base-space))]!', className), ...props }));
-}
-function ComboboxChip({ className, children, showRemove = true, onRemove, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Chip, { "data-slot": "combobox-chip", className: (0, utils_1.cn)('twa:flex twa:h-[calc(--spacing(5.5))] twa:w-fit twa:items-center twa:justify-center twa:gap-1 twa:rounded-input twa:bg-muted twa:px-1.5 twa:text-xs twa:font-medium twa:whitespace-nowrap twa:text-input-foreground twa:has-disabled:pointer-events-none twa:has-disabled:cursor-not-allowed twa:has-disabled:opacity-50 twa:has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove &&
+const ComboboxEmpty = React.forwardRef(function ComboboxEmpty({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Empty, { "data-slot": "combobox-empty", className: (0, utils_1.cn)('twa:hidden twa:w-full twa:justify-center twa:py-2 twa:text-center twa:text-sm twa:text-muted-foreground twa:group-data-empty/combobox-content:flex', className), ref: ref, ...props }));
+});
+exports.ComboboxEmpty = ComboboxEmpty;
+const ComboboxSeparator = React.forwardRef(function ComboboxSeparator({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Separator, { "data-slot": "combobox-separator", className: (0, utils_1.cn)('twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ref: ref, ...props }));
+});
+exports.ComboboxSeparator = ComboboxSeparator;
+const ComboboxChips = React.forwardRef(function ComboboxChips({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Chips, { "data-slot": "combobox-chips", className: (0, utils_1.cn)('twa:focus-within:outline-none', 'twa:flex twa:flex-wrap twa:items-center twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-input-background twa:bg-clip-padding twa:text-sm twa:shadow-xs twa:transition-[color,box-shadow] twa:focus-within:border-ring twa:focus-within:ring-3 twa:focus-within:ring-ring/50 twa:has-aria-invalid:border-destructive twa:has-aria-invalid:ring-3 twa:has-aria-invalid:ring-destructive/20 twa:has-data-[slot=combobox-chip]:px-1.5 twa:dark:has-aria-invalid:border-destructive/50 twa:dark:has-aria-invalid:ring-destructive/40', 'twa:py-1', 'twa:px-2.5', 'twa:min-h-input', 'twa:[&>input]:max-h-[calc(var(--ab-input-height)-1.5*var(--ab-base-space))]!', className), ref: ref, ...props }));
+});
+exports.ComboboxChips = ComboboxChips;
+const ComboboxChip = React.forwardRef(function ComboboxChip({ className, children, showRemove = true, onRemove, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Combobox.Chip, { ref: ref, "data-slot": "combobox-chip", className: (0, utils_1.cn)('twa:flex twa:h-[calc(--spacing(5.5))] twa:w-fit twa:items-center twa:justify-center twa:gap-1 twa:rounded-input twa:bg-muted twa:px-1.5 twa:text-xs twa:font-medium twa:whitespace-nowrap twa:text-input-foreground twa:has-disabled:pointer-events-none twa:has-disabled:cursor-not-allowed twa:has-disabled:opacity-50 twa:has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove &&
                 (onRemove ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "ghost", size: "icon-xs", tabIndex: -1, "data-slot": "combobox-chip-remove", className: "twa:-ml-1 twa:opacity-50 twa:hover:opacity-100", onMouseDown: (e) => {
                         // Don't let base-ui's Chip onMouseDown steal focus back to the
                         // input before the click fires.
@@ -114,10 +111,12 @@ function ComboboxChip({ className, children, showRemove = true, onRemove, ...pro
                         e.stopPropagation();
                         onRemove(e);
                     }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "twa:pointer-events-none" }) })) : ((0, jsx_runtime_1.jsx)(react_1.Combobox.ChipRemove, { render: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", size: "icon-xs" }), className: "twa:-ml-1 twa:opacity-50 twa:hover:opacity-100", "data-slot": "combobox-chip-remove", children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "twa:pointer-events-none" }) })))] }));
-}
-function ComboboxChipsInput({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Input, { "data-slot": "combobox-chip-input", className: (0, utils_1.cn)('twa:placeholder:text-muted-foreground twa:min-w-16 twa:flex-1 twa:px-2.5 twa:outline-none twa:border-none twa:bg-transparent twa:min-h-auto!', className), ...props }));
-}
+});
+exports.ComboboxChip = ComboboxChip;
+const ComboboxChipsInput = React.forwardRef(function ComboboxChipsInput({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(react_1.Combobox.Input, { "data-slot": "combobox-chip-input", className: (0, utils_1.cn)('twa:placeholder:text-muted-foreground twa:min-w-16 twa:flex-1 twa:px-2.5 twa:outline-none twa:border-none twa:bg-transparent twa:min-h-auto!', className), ref: ref, ...props }));
+});
+exports.ComboboxChipsInput = ComboboxChipsInput;
 function useComboboxAnchor() {
     return React.useRef(null);
 }

package/src/components/ui/dropdown-menu.js

@@ -17,7 +17,7 @@ exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
 exports.DropdownMenuSubContent = DropdownMenuSubContent;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const menu_1 = require("@base-ui/react/menu");
-const utils_1 = require("~/lib/utils");
+const utils_1 = require("../../lib/utils");
 const lucide_react_1 = require("lucide-react");
 function DropdownMenu({ ...props }) {
     return (0, jsx_runtime_1.jsx)(menu_1.Menu.Root, { "data-slot": "dropdown-menu", ...props });

package/src/components/ui/input-group.d.ts

@@ -1,18 +1,19 @@
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-import { Button } from '~/components/ui/button';
-declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const InputGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const inputGroupAddonVariants: (props?: {
     align?: "inline-end" | "inline-start" | "block-end" | "block-start";
 } & import("class-variance-authority/dist/types").ClassProp) => string;
 declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
-declare const inputGroupButtonVariants: (props?: {
+declare const InputGroupButton: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@base-ui/react").ButtonProps & VariantProps<(props?: {
+    variant?: "link" | "secondary" | "default" | "ghost" | "outline" | "destructive";
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+} & import("class-variance-authority/dist/types").ClassProp) => string>, "ref"> & React.RefAttributes<HTMLButtonElement>, "type" | "size"> & VariantProps<(props?: {
     size?: "xs" | "sm" | "icon-xs" | "icon-sm";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
-    type?: 'button' | 'submit' | 'reset';
-}): React.JSX.Element;
+} & import("class-variance-authority/dist/types").ClassProp) => string> & {
+    type?: "button" | "submit" | "reset";
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
-declare function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
-declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
+declare const InputGroupInput: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const InputGroupTextarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
 export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/src/components/ui/input-group.js

@@ -1,21 +1,21 @@
 'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputGroup = InputGroup;
+exports.InputGroupTextarea = exports.InputGroupInput = exports.InputGroupButton = exports.InputGroup = void 0;
 exports.InputGroupAddon = InputGroupAddon;
-exports.InputGroupButton = InputGroupButton;
 exports.InputGroupText = InputGroupText;
-exports.InputGroupInput = InputGroupInput;
-exports.InputGroupTextarea = InputGroupTextarea;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("~/lib/utils");
-const button_1 = require("~/components/ui/button");
-const input_1 = require("~/components/ui/input");
-const textarea_1 = require("~/components/ui/textarea");
-function InputGroup({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-group", role: "group", className: (0, utils_1.cn)('twa:group/input-group twa:relative twa:flex twa:h-input twa:w-full twa:min-w-0 twa:items-center twa:rounded-input twa:border twa:border-input twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:in-data-[slot=combobox-content]:focus-within:border-inherit twa:in-data-[slot=combobox-content]:focus-within:ring-0 twa:has-[[data-slot=input-group-control]:focus-visible]:border-ring twa:has-[[data-slot=input-group-control]:focus-visible]:ring-3 twa:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 twa:has-[[data-slot][aria-invalid=true]]:border-destructive twa:has-[[data-slot][aria-invalid=true]]:ring-3 twa:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 twa:has-[>[data-align=block-end]]:h-auto twa:has-[>[data-align=block-end]]:flex-col twa:has-[>[data-align=block-start]]:h-auto twa:has-[>[data-align=block-start]]:flex-col twa:has-[>textarea]:h-auto twa:dark:bg-input/30 twa:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 twa:has-[>[data-align=block-end]]:[&>input]:pt-3 twa:has-[>[data-align=block-start]]:[&>input]:pb-3 twa:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 twa:has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
-}
+const utils_1 = require("../../lib/utils");
+const button_1 = require("./button");
+const input_1 = require("./input");
+const textarea_1 = require("./textarea");
+const InputGroup = React.forwardRef(function InputGroup({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "data-slot": "input-group", role: "group", className: (0, utils_1.cn)('twa:group/input-group twa:relative twa:flex twa:h-input twa:w-full twa:min-w-0 twa:items-center twa:rounded-input twa:border twa:border-input twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:in-data-[slot=combobox-content]:focus-within:border-inherit twa:in-data-[slot=combobox-content]:focus-within:ring-0 twa:has-[[data-slot=input-group-control]:focus-visible]:border-ring twa:has-[[data-slot=input-group-control]:focus-visible]:ring-3 twa:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 twa:has-[[data-slot][aria-invalid=true]]:border-destructive twa:has-[[data-slot][aria-invalid=true]]:ring-3 twa:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 twa:has-[>[data-align=block-end]]:h-auto twa:has-[>[data-align=block-end]]:flex-col twa:has-[>[data-align=block-start]]:h-auto twa:has-[>[data-align=block-start]]:flex-col twa:has-[>textarea]:h-auto twa:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 twa:has-[>[data-align=block-end]]:[&>input]:pt-3 twa:has-[>[data-align=block-start]]:[&>input]:pb-3 twa:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 twa:has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
+});
+exports.InputGroup = InputGroup;
 const inputGroupAddonVariants = (0, class_variance_authority_1.cva)('twa:flex twa:h-auto twa:cursor-text twa:items-center twa:justify-center twa:gap-2 twa:py-1.5 twa:text-sm twa:font-medium twa:text-muted-foreground twa:select-none twa:group-data-[disabled=true]/input-group:opacity-50 twa:[&>kbd]:rounded-[calc(var(--ab-border-radius))] twa:[&>svg:not([class*=size-])]:size-4', {
     variants: {
         align: {
@@ -50,15 +50,18 @@ const inputGroupButtonVariants = (0, class_variance_authority_1.cva)('twa:flex t
         size: 'xs',
     },
 });
-function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: type, "data-size": size, variant: variant, className: (0, utils_1.cn)(inputGroupButtonVariants({ size }), className), ...props }));
-}
+const InputGroupButton = React.forwardRef(function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: type, "data-size": size, variant: variant, className: (0, utils_1.cn)(inputGroupButtonVariants({ size }), className), ref: ref, ...props }));
+});
+exports.InputGroupButton = InputGroupButton;
 function InputGroupText({ className, ...props }) {
     return ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('twa:flex twa:items-center twa:gap-2 twa:text-sm twa:text-muted-foreground twa:[&_svg]:pointer-events-none twa:[&_svg:not([class*=size-])]:size-4', className), ...props }));
 }
-function InputGroupInput({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(input_1.Input, { "data-slot": "input-group-control", className: (0, utils_1.cn)('twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props }));
-}
-function InputGroupTextarea({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(textarea_1.Textarea, { "data-slot": "input-group-control", className: (0, utils_1.cn)('twa:flex-1 twa:resize-none twa:rounded-none twa:border-0 twa:bg-transparent twa:py-2 twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props }));
-}
+const InputGroupInput = React.forwardRef(function InputGroupInput({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(input_1.Input, { "data-slot": "input-group-control", className: (0, utils_1.cn)('twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ref: ref, ...props }));
+});
+exports.InputGroupInput = InputGroupInput;
+const InputGroupTextarea = React.forwardRef(function InputGroupTextarea({ className, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(textarea_1.Textarea, { "data-slot": "input-group-control", className: (0, utils_1.cn)('twa:flex-1 twa:resize-none twa:rounded-none twa:border-0 twa:bg-transparent twa:py-2 twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props, ref: ref }));
+});
+exports.InputGroupTextarea = InputGroupTextarea;

package/src/components/ui/input.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+import * as React from 'react';
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Input };

package/src/components/ui/input.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = Input;
+exports.Input = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const input_1 = require("@base-ui/react/input");
-const utils_1 = require("~/lib/utils");
-function Input({ className, type, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(input_1.Input, { type: type, "data-slot": "input", className: (0, utils_1.cn)("twa:h-9 twa:w-full twa:min-w-0 twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-1 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:file:inline-flex twa:file:h-7 twa:file:border-0 twa:file:bg-transparent twa:file:text-sm twa:file:font-medium twa:file:text-foreground twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:pointer-events-none twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:bg-input/30 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40", className), ...props }));
-}
+const utils_1 = require("../../lib/utils");
+const Input = React.forwardRef(function Input({ className, type, ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(input_1.Input, { ref: ref, type: type, "data-slot": "input", className: (0, utils_1.cn)('twa:h-9 twa:w-full twa:min-w-0 twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-1 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:file:inline-flex twa:file:h-7 twa:file:border-0 twa:file:bg-transparent twa:file:text-sm twa:file:font-medium twa:file:text-foreground twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:pointer-events-none twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40', className), ...props }));
+});
+exports.Input = Input;