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

package/src/components/SimpleButton/index.js

@@ -4,11 +4,11 @@ exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../lib/utils");
 const icons_1 = require("../icons");
 const GeneralConstants_1 = require("../../Utilities/Constants/GeneralConstants");
 const Icon_1 = require("../Icon");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const NewTooltip_1 = require("../NewTooltip");
 exports.baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((givenProps, theRef) => {
@@ -77,36 +77,36 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
     if (ariaLabel != null && ariaLabel !== '') {
         extraButtonProps['aria-label'] = ariaLabel;
     }
-    const btn = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, clsx_1.default)(exports.baseClassName, 'twa:p-1', 'twa:rounded-button', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
+    const btn = ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...buttonProps, ...extraButtonProps, as: buttonProps.as || 'button', disabled: disabled, className: (0, utils_1.cn)(exports.baseClassName, 'twa:p-1', 'twa:rounded-button', 'twa:inline-flex twa:flex-row twa:flex-none twa:items-center', 'twa:fill-current', 'twa:overflow-hidden twa:relative twa:align-middle', 
         // direct children should be above the before pseudo element
         'twa:*:z-1', 
         // all svgs inside should be aligned middle
         'twa:[&_svg]:align-middle', 
-        // 'twa:text-text-on-primary',
+        // 'twa:text-primary-foreground',
         // the text variant has the background applied on the before pseudo element
         // so let's configure the before pseudo element for all buttons here
         'twa:before:content-[""] twa:before:absolute twa:before:inset-0 twa:before:block', 'twa:before:z-0 twa:before:pointer-events-none twa:before:rounded-[inherit]', 'twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50', disabled ? `${exports.baseClassName}--disabled` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`, 'twa:transition-opacity twa:duration-200', {
-            'twa:text-text-on-primary': tone == 'neutral',
+            'twa:text-primary-foreground': tone == 'neutral',
             'twa:text-inherit': tone === 'none',
             'twa:text-success': tone === 'success',
             'twa:text-accent': tone === 'accent',
-            'twa:text-error': tone === 'error',
+            'twa:text-destructive': tone === 'error',
             'twa:text-warn': tone === 'warning',
             'twa:text-info': tone === 'info',
         }, variant === 'text' ? 'twa:bg-transparent' : '', variant === 'ghost'
             ? 'twa:hover:bg-muted twa:hover:text-foreground twa:aria-expanded:bg-muted twa:aria-expanded:text-foreground twa:dark:hover:bg-muted/50'
             : '', variant === 'outlined'
-            ? 'twa:bg-defaultbackground twa:border-input-border twa:border'
+            ? 'twa:bg-background twa:border-input-border twa:border'
             : '', variant === 'raised'
             ? {
-                'twa:text-text-on-primary twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
-                'twa:bg-success twa:text-text-on-success': tone == 'success',
+                'twa:text-primary-foreground twa:shadow-(--ab-cmp-simple-button__box-shadow) twa:hover:not-disabled:shadow-(--ab-cmp-simple-button__hover-box-shadow) twa:transition-(--ab-cmp-simple-button__transition) twa:duration-200 twa:focus:shadow-(--ab-focus__box-shadow)': true,
+                'twa:bg-success twa:text-success-foreground': tone == 'success',
                 'twa:bg-accent twa:text-accent-foreground': tone == 'accent',
                 'twa:bg-transparent': tone == 'none',
-                'twa:bg-primary twa:text-text-on-primary': tone == 'neutral',
-                'twa:bg-error twa:text-text-on-error': tone == 'error',
-                'twa:bg-warn twa:text-text-on-warn': tone == 'warning',
-                'twa:bg-info twa:text-text-on-info': tone == 'info',
+                'twa:bg-primary twa:text-primary-foreground': tone == 'neutral',
+                'twa:bg-destructive twa:text-destructive-foreground': tone == 'error',
+                'twa:bg-warn twa:text-warn-foreground': tone == 'warning',
+                'twa:bg-info twa:text-info-foreground': tone == 'info',
             }
             : '', 
         // opacity transitioning for the background applied on the before pseudo element

package/src/components/StylePreview.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StylePreview = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
+const utils_1 = require("../lib/utils");
 const twMerge_1 = require("../twMerge");
 const Flex_1 = require("./Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const StylePreview = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, clsx_1.default)((0, twMerge_1.twMerge)('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...(0, StyleHelper_1.toStyle)(props.styleObject), ...props.style }, children: props.children ?? 'Preview result' }));
+const StylePreview = (props) => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { ...props, className: (0, utils_1.cn)((0, twMerge_1.twMerge)('ab-StylePreview twa:p-2 twa:mt-2', props.className), props.styleObject.ClassName), style: { ...(0, StyleHelper_1.toStyle)(props.styleObject), ...props.style }, children: props.children ?? 'Preview result' }));
 exports.StylePreview = StylePreview;

package/src/components/Tabs/index.js

@@ -9,7 +9,7 @@ const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const Flex_1 = require("../Flex");
 const twMerge_1 = require("../../twMerge");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const TabContext = React.createContext({
     selectedIndex: 0,
     tabCount: 0,
@@ -65,12 +65,12 @@ const Tabs = (props) => {
     };
     const currentContent = contents[selectedIndex];
     const { value, ...contentProps } = (currentContent?.props || {});
-    const fillerClassName = (0, clsx_1.default)('ab-Tabs__Filler', 'twa:bg-(--ab-cmp-tabs-strip__background)');
+    const fillerClassName = (0, utils_1.cn)('ab-Tabs__Filler', 'twa:bg-(--ab-cmp-tabs-strip__background)');
     return ((0, jsx_runtime_1.jsx)(TabContext.Provider, { value: {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
-        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, clsx_1.default)('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: fillerClassName }), tabs, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, clsx_1.default)(fillerClassName, 'twa:flex-1') })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
+        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...boxProps, className: (0, join_1.default)(boxProps.className, 'ab-Tabs twa:flex twa:flex-col'), "data-selected-index": selectedIndex, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", className: (0, utils_1.cn)('ab-Tabs__Strip', 'twa:bg-(--ab-cmp-tabs-strip__background)', 'twa:pt-0.5'), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: fillerClassName }), tabs, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { className: (0, utils_1.cn)(fillerClassName, 'twa:flex-1') })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { ...contentProps, className: `ab-Tabs__Body twa:p-2 twa:flex-1 ${contentProps.className || ''} `, children: currentContent })] }) }));
 };
 exports.Tabs = Tabs;
 const Tab = (props) => {
@@ -79,7 +79,7 @@ const Tab = (props) => {
     const baseClassName = 'ab-Tabs__Tab';
     const active = context.selectedIndex === props.index;
     const beforeActive = context.selectedIndex === props.index + 1;
-    const className = (0, clsx_1.default)(baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '', 'twa:cursor-pointer twa:p-2', propsClassName);
+    const className = (0, utils_1.cn)(baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '', 'twa:cursor-pointer twa:p-2', propsClassName);
     const ref = (0, react_1.useRef)(null);
     React.useEffect(() => {
         if (active && autoFocus && keyboardNavigation) {

package/src/components/Tag/Tag.d.ts

@@ -1,10 +1,21 @@
 import * as React from 'react';
 import { FlexProps } from '../Flex';
+export type TagVariant = 'default' | 'column';
 export declare const Tag: React.FunctionComponent<React.PropsWithChildren<FlexProps & {
     className?: string;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    variant?: TagVariant;
 }> & React.RefAttributes<HTMLDivElement>>;
+/** Tag styled for column names — accent tint and left stripe for quick recognition. */
+export declare const ColumnTag: React.ForwardRefExoticComponent<Omit<FlexProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    variant?: TagVariant;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const TagBox: (props: {
     children: React.ReactNode;
     className?: string;
@@ -12,4 +23,9 @@ export declare const TagBox: (props: {
 export declare const TagList: (props: {
     tags: (React.ReactNode | string)[];
     className?: string;
+    variant?: TagVariant;
 }) => React.JSX.Element;
+export declare function renderColumnTags(columnIds: string[], getFriendlyName: (columnId: string) => string, options?: {
+    className?: string;
+    tagClassName?: string;
+}): React.ReactNode;

package/src/components/Tag/Tag.js

@@ -1,18 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagList = exports.TagBox = exports.Tag = void 0;
+exports.TagList = exports.TagBox = exports.ColumnTag = exports.Tag = void 0;
+exports.renderColumnTags = renderColumnTags;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../lib/utils");
 const twMerge_1 = require("../../twMerge");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-exports.Tag = React.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, ref: ref, className: (0, twMerge_1.twMerge)(`ab-Tag twa:bg-primary twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:rounded-standard`, props.className), style: props.style })));
+const COLUMN_TAG_CLASS = 'ab-Tag--column';
+exports.Tag = React.forwardRef(({ variant = 'default', className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...props, ref: ref, className: (0, twMerge_1.twMerge)(`ab-Tag twa:text-2 twa:py-2 twa:px-2 twa:inline-flex twa:w-fit twa:rounded-standard`, variant === 'column' ? COLUMN_TAG_CLASS : 'twa:bg-primary', className), style: props.style })));
+/** Tag styled for column names — accent tint and left stripe for quick recognition. */
+exports.ColumnTag = React.forwardRef((props, ref) => (0, jsx_runtime_1.jsx)(exports.Tag, { ...props, ref: ref, variant: "column" }));
 const TagBox = (props) => {
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, clsx_1.default)('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className), children: props.children }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: (0, utils_1.cn)('twa:flex twa:flex-wrap twa:flex-row twa:gap-1', props.className), children: props.children }));
 };
 exports.TagBox = TagBox;
 const TagList = (props) => {
-    return ((0, jsx_runtime_1.jsx)(exports.TagBox, { className: props.className, children: props.tags.map((tag, index) => ((0, jsx_runtime_1.jsx)(exports.Tag, { children: tag }, index))) }));
+    const TagComponent = props.variant === 'column' ? exports.ColumnTag : exports.Tag;
+    return ((0, jsx_runtime_1.jsx)(exports.TagBox, { className: props.className, children: props.tags.map((tag, index) => ((0, jsx_runtime_1.jsx)(TagComponent, { children: tag }, index))) }));
 };
 exports.TagList = TagList;
+function renderColumnTags(columnIds, getFriendlyName, options) {
+    if (!columnIds.length) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexWrap: "wrap", className: (0, utils_1.cn)('twa:gap-1', options?.className), children: columnIds.map((columnId) => ((0, jsx_runtime_1.jsx)(exports.ColumnTag, { className: options?.tagClassName, children: getFriendlyName(columnId) }, columnId))) }));
+}

package/src/components/Tag/columnScopeTagHelpers.d.ts

@@ -0,0 +1,8 @@
+import type { Report } from '../../types';
+import type { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
+import type { TagVariant } from './Tag';
+/** True when a tag label is a scope placeholder (e.g. `[All Columns]`), not a column name. */
+export declare const isBracketedScopeTagLabel: (value: string) => boolean;
+/** True when export column tags are actual column friendly names. */
+export declare const reportColumnTagsUseColumnVariant: (report: Report) => boolean;
+export declare const getScopeViewItemsTagVariant: (scope: ColumnScope) => TagVariant | undefined;

package/src/components/Tag/columnScopeTagHelpers.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScopeViewItemsTagVariant = exports.reportColumnTagsUseColumnVariant = exports.isBracketedScopeTagLabel = void 0;
+const BRACKETED_SCOPE_LABEL = /^\[[^\]]+\]$/;
+/** True when a tag label is a scope placeholder (e.g. `[All Columns]`), not a column name. */
+const isBracketedScopeTagLabel = (value) => BRACKETED_SCOPE_LABEL.test(value.trim());
+exports.isBracketedScopeTagLabel = isBracketedScopeTagLabel;
+/** True when export column tags are actual column friendly names. */
+const reportColumnTagsUseColumnVariant = (report) => report.ReportColumnScope === 'ScopeColumns' && 'ColumnIds' in (report.Scope ?? {});
+exports.reportColumnTagsUseColumnVariant = reportColumnTagsUseColumnVariant;
+const getScopeViewItemsTagVariant = (scope) => 'ColumnIds' in scope && Array.isArray(scope.ColumnIds) ? 'column' : undefined;
+exports.getScopeViewItemsTagVariant = getScopeViewItemsTagVariant;

package/src/components/Tag/index.d.ts

@@ -1 +1 @@
-export { Tag, TagBox, TagList } from './Tag';
+export { Tag, TagBox, TagList, ColumnTag, renderColumnTags, type TagVariant } from './Tag';

package/src/components/Tag/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagList = exports.TagBox = exports.Tag = void 0;
+exports.renderColumnTags = exports.ColumnTag = exports.TagList = exports.TagBox = exports.Tag = void 0;
 var Tag_1 = require("./Tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
 Object.defineProperty(exports, "TagBox", { enumerable: true, get: function () { return Tag_1.TagBox; } });
 Object.defineProperty(exports, "TagList", { enumerable: true, get: function () { return Tag_1.TagList; } });
+Object.defineProperty(exports, "ColumnTag", { enumerable: true, get: function () { return Tag_1.ColumnTag; } });
+Object.defineProperty(exports, "renderColumnTags", { enumerable: true, get: function () { return Tag_1.renderColumnTags; } });

package/src/components/Textarea/index.js

@@ -4,9 +4,8 @@ exports.baseClassName = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../lib/utils");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const twMerge_1 = require("../../twMerge");
 exports.baseClassName = 'ab-Textarea';
 const Textarea = React.forwardRef((props, ref) => {
     const internalRef = React.useRef(null);
@@ -63,6 +62,6 @@ const Textarea = React.forwardRef((props, ref) => {
         }, onChange: (e) => {
             expandToFitContent();
             props.onChange && props.onChange(e);
-        }, as: "textarea", type: type, disabled: disabled, className: (0, twMerge_1.twMerge)((0, clsx_1.default)(exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : ''), className), spellCheck: false }));
+        }, as: "textarea", type: type, disabled: disabled, className: (0, utils_1.cn)(exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : '', className), spellCheck: false }));
 });
 exports.default = Textarea;

package/src/components/Toggle/Toggle.d.ts

@@ -4,5 +4,7 @@ export type ToggleProps = {
     onPressedChange: (pressed: boolean) => void;
     pressed?: boolean;
     icon?: AdaptableSystemIconName;
+    /** Render as an individual button (not inside a {@link ToggleGroup}). */
+    standalone?: boolean;
 };
 export declare const Toggle: React.FunctionComponent<React.PropsWithChildren<ToggleProps>>;

package/src/components/Toggle/Toggle.js

@@ -4,12 +4,11 @@ exports.Toggle = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
+const utils_1 = require("../../lib/utils");
 const Icon_1 = require("../Icon");
-const twMerge_1 = require("../../twMerge");
 const ToggleGroup_1 = require("./ToggleGroup");
 const baseClassName = 'ab-Toggle';
-const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
+const Toggle = ({ onPressedChange, pressed, icon, standalone = false, children, ...rest }) => {
     const onPressedChangeRef = React.useRef(onPressedChange);
     React.useLayoutEffect(() => {
         onPressedChangeRef.current = onPressedChange;
@@ -24,7 +23,10 @@ const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
     const isActive = toggleContext.activeIndex === currentIndex;
     const ref = React.useRef(null);
     React.useEffect(() => {
-        if (!toggleContext || !toggleContext.toggleButtons) {
+        if (standalone) {
+            return;
+        }
+        if (!toggleContext?.toggleButtons) {
             return;
         }
         const thisButton = {
@@ -40,19 +42,24 @@ const Toggle = ({ onPressedChange, pressed, icon, children, ...rest }) => {
             }
         };
     }, [toggleContext]);
-    return ((0, jsx_runtime_1.jsxs)("button", { ...rest, ref: ref, tabIndex: -1, className: (0, twMerge_1.twMerge)((0, clsx_1.default)('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', 'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', 
+    return ((0, jsx_runtime_1.jsxs)("button", { ...rest, ref: ref, tabIndex: standalone ? 0 : -1, className: (0, utils_1.cn)('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', !standalone &&
+            'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', standalone && [
+            'ab-Toggle--standalone',
+            'twa:shadow-sm twa:rounded-standard twa:bg-primary twa:text-primary-foreground',
+        ], 
         // backgrounds
         {
             'twa:text-inherit twa:bg-transparent': !pressed,
-            'twa:hover:bg-primarylight twa:hover:text-text-on-primary': !pressed,
+            'twa:hover:bg-primarylight twa:hover:text-primary-foreground': !pressed,
             [`${baseClassName}--pressed`]: pressed,
             'twa:bg-accent twa:hover:bg-accent/90 twa:text-accent-foreground': pressed,
-        }, {
+        }, !standalone && {
             'twa:before:rounded-standard twa:before:content-[""] twa:before:absolute twa:before:inset-1 twa:before:z-20 twa:before:pointer-events-none': true,
             // let's display a shadow on the before pseudo element
             // when the toggle is active
             'twa:before:shadow-(--ab-focus-light__box-shadow)': isActive && pressed,
             'twa:before:shadow-(--ab-focus__box-shadow)': isActive && !pressed,
-        }, baseClassName)), onClick: toggle, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: { name: icon } }), children] }));
+        }, standalone &&
+            'twa:focus-visible:ring-2 twa:focus-visible:ring-ring twa:focus-visible:ring-offset-1', baseClassName), onClick: toggle, children: [icon && (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: { name: icon } }), children] }));
 };
 exports.Toggle = Toggle;

package/src/components/Toggle/ToggleGroup.js

@@ -5,9 +5,9 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const react_1 = require("react");
 const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
+const utils_1 = require("../../lib/utils");
 exports.ToggleGroupContext = React.createContext({
     toggleButtons: [],
     activeIndex: -1,
@@ -24,7 +24,7 @@ const ToggleGroup = (props) => {
             activeIndex: index,
         }));
     }, []);
-    return ((0, jsx_runtime_1.jsx)(exports.ToggleGroupContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, clsx_1.default)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
+    return ((0, jsx_runtime_1.jsx)(exports.ToggleGroupContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, utils_1.cn)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-primary-foreground', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0', 
             // make the shadow of child Toggle buttons invisible when the group is not focused
             'twa:not-focus-within:[--ab-focus-light__box-shadow:none]', 'twa:not-focus-within:[--ab-focus__box-shadow:none]'), onMouseDown: (event) => {
                 const index = context.toggleButtons.findIndex((btn) => (0, contains_1.default)(btn.node, event.target));

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,8 +1,9 @@
 "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");
@@ -10,7 +11,7 @@ const buttonVariants = (0, class_variance_authority_1.cva)('twa:group/button twa
     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 "./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/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, };