@a-type/ui 4.0.8 → 4.1.0-beta.2

package/dist/cjs/colors.stories.js

@@ -66,13 +66,13 @@ exports.Inheritance = {
                 '--p-primary-hue': args.customHue,
             }
             : {};
-        return ((0, jsx_runtime_1.jsx)(index_js_1.Box, { color: "primary", surface: true, p: "xl", className: "theme", style: style, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "border-bg border-darken-5 color-bg color-darken-5", border: true, p: "xl", children: "Inherits and darkens" }) }));
+        return ((0, jsx_runtime_1.jsx)(index_js_1.Box, { color: "primary", surface: true, p: "xl", className: "theme", style: style, children: (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "color-bg color-darken-5 border-bg border-darken-5", border: true, p: "xl", children: "Inherits and darkens" }) }));
     },
 };
 exports.TweakOpacity = {
     render() {
         // none of these elements have root opacity; all opacity is done through colors
-        return ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { color: "accent", surface: true, className: "h-32", full: "width", p: true, gap: true, children: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/100 h-full color-primary-dark/100 ring ring-primary-light/100 border border-black/100", grow: true, children: "100" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/90 h-full color-primary-dark/90 ring ring-primary-light/90 border border-black/90", grow: true, children: "90" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/80 h-full color-primary-dark/80 ring ring-primary-light/80 border border-black/80", grow: true, children: "80" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/70 h-full color-primary-dark/70 ring ring-primary-light/70 border border-black/70", grow: true, children: "70" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/60 h-full color-primary-dark/60 ring ring-primary-light/60 border border-black/60", grow: true, children: "60" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/50 h-full color-primary-dark/50 ring ring-primary-light/50 border border-black/50", grow: true, children: "50" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/40 h-full color-primary-dark/40 ring ring-primary-light/40 border border-black/40", grow: true, children: "40" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/30 h-full color-primary-dark/30 ring ring-primary-light/30 border border-black/30", grow: true, children: "30" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/20 h-full color-primary-dark/20 ring ring-primary-light/20 border border-black/20", grow: true, children: "20" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "bg-primary/10 h-full color-primary-dark/10 ring ring-primary-light/10 border border-black/10", grow: true, children: "10" })] }));
+        return ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { color: "accent", surface: true, className: "h-32", full: "width", p: true, gap: true, children: [(0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/100 bg-primary/100 border-black/100 ring-primary-light/100", grow: true, children: "100" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/90 bg-primary/90 border-black/90 ring-primary-light/90", grow: true, children: "90" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/80 bg-primary/80 border-black/80 ring-primary-light/80", grow: true, children: "80" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/70 bg-primary/70 border-black/70 ring-primary-light/70", grow: true, children: "70" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/60 bg-primary/60 border-black/60 ring-primary-light/60", grow: true, children: "60" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/50 bg-primary/50 border-black/50 ring-primary-light/50", grow: true, children: "50" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/40 bg-primary/40 border-black/40 ring-primary-light/40", grow: true, children: "40" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/30 bg-primary/30 border-black/30 ring-primary-light/30", grow: true, children: "30" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/20 bg-primary/20 border-black/20 ring-primary-light/20", grow: true, children: "20" }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { className: "h-full border ring color-primary-dark/10 bg-primary/10 border-black/10 ring-primary-light/10", grow: true, children: "10" })] }));
     },
 };
 exports.ComputedColors = {

package/dist/cjs/components/actions/ActionBar.js

@@ -22,6 +22,6 @@ const react_1 = require("react");
 const ScrollArea_js_1 = require("../scrollArea/ScrollArea.js");
 function ActionBar(_a) {
     var { children, className, wrap, disableShadow } = _a, rest = __rest(_a, ["children", "className", "wrap", "disableShadow"]);
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)('layer-components:flex layer-components:flex-row layer-components:items-center layer-components:justify-start layer-components:w-full layer-components:overflow-hidden layer-components:relative layer-components:h-[max-content] layer-components:transition-[height] layer-components:springy', 'layer-components:[&:empty]:height-0', className) }, rest, { children: (0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollArea, { disableFades: disableShadow, className: "layer-components:flex-grow layer-components:w-full layer-components:h-full", children: (0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollArea.Content, { className: (0, clsx_1.default)('layer-composed:flex layer-composed:flex-row layer-composed:items-center layer-composed:justify-start layer-composed:relative layer-composed:h-full', wrap && 'layer-variants:flex-wrap'), children: children }) }) })) }));
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)('layer-components:springy layer-components:relative layer-components:h-[max-content] layer-components:w-full layer-components:flex layer-components:flex-row layer-components:items-center layer-components:justify-start layer-components:overflow-hidden layer-components:transition-[height]', 'layer-components:[&:empty]:height-0', className) }, rest, { children: (0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollArea, { disableFades: disableShadow, className: "layer-components:h-full layer-components:w-full layer-components:flex-grow", children: (0, jsx_runtime_1.jsx)(ScrollArea_js_1.ScrollArea.Content, { className: (0, clsx_1.default)('layer-composed:relative layer-composed:h-full layer-composed:flex layer-composed:flex-row layer-composed:items-center layer-composed:justify-start', wrap && 'layer-variants:flex-wrap'), children: children }) }) })) }));
 }
 //# sourceMappingURL=ActionBar.js.map

package/dist/cjs/components/actions/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sourceRoot":"","sources":["../../../../src/components/actions/ActionBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAWA,8BAiCC;;AA5CD,gDAA8B;AAC9B,iCAA4C;AAC5C,+DAAyD;AASzD,SAAgB,SAAS,CAAC,EAMT;QANS,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,aAAa,OAEG,EADb,IAAI,cALkB,kDAMzB,CADO;IAEP,OAAO,CACN,uBAAC,gBAAQ,IAAC,QAAQ,EAAE,IAAI,YACvB,8CACC,SAAS,EAAE,IAAA,cAAU,EACpB,yIAAyI,EACzI,qCAAqC,EACrC,SAAS,CACT,IACG,IAAI,cAER,uBAAC,0BAAU,IACV,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAC,4CAA4C,YAEtD,uBAAC,0BAAU,CAAC,OAAO,IAClB,SAAS,EAAE,IAAA,cAAU,EACpB,2EAA2E,EAC3E,IAAI,IAAI,0BAA0B,CAClC,YAEA,QAAQ,GACW,GACT,IACR,GACI,CACX,CAAC;AACH,CAAC"}
+{"version":3,"file":"ActionBar.js","sourceRoot":"","sources":["../../../../src/components/actions/ActionBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAWA,8BAiCC;;AA5CD,gDAA8B;AAC9B,iCAA4C;AAC5C,+DAAyD;AASzD,SAAgB,SAAS,CAAC,EAMT;QANS,EACzB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,aAAa,OAEG,EADb,IAAI,cALkB,kDAMzB,CADO;IAEP,OAAO,CACN,uBAAC,gBAAQ,IAAC,QAAQ,EAAE,IAAI,YACvB,8CACC,SAAS,EAAE,IAAA,cAAU,EACpB,0JAA0J,EAC1J,qCAAqC,EACrC,SAAS,CACT,IACG,IAAI,cAER,uBAAC,0BAAU,IACV,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAC,4CAA4C,YAEtD,uBAAC,0BAAU,CAAC,OAAO,IAClB,SAAS,EAAE,IAAA,cAAU,EACpB,2EAA2E,EAC3E,IAAI,IAAI,0BAA0B,CAClC,YAEA,QAAQ,GACW,GACT,IACR,GACI,CACX,CAAC;AACH,CAAC"}

package/dist/cjs/components/actions/ActionButton.js

@@ -44,6 +44,6 @@ function ActionButton(_a) {
     if (!render && !visible) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(index_js_1.CollapsibleRoot, { open: !visible ? false : render, children: (0, jsx_runtime_1.jsx)(index_js_1.CollapsibleContent, { "data-horizontal": true, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ size: "small", disableIconMode: true, className: (0, clsx_1.default)('layer-variants:font-normal layer-variants:m-2 layer-variants:mx-1', className) }, rest, { children: children })) }) }));
+    return ((0, jsx_runtime_1.jsx)(index_js_1.CollapsibleRoot, { open: !visible ? false : render, children: (0, jsx_runtime_1.jsx)(index_js_1.CollapsibleContent, { "data-horizontal": true, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({ size: "small", disableIconMode: true, className: (0, clsx_1.default)('layer-variants:m-2 layer-variants:mx-1 layer-variants:font-normal', className) }, rest, { children: children })) }) }));
 }
 //# sourceMappingURL=ActionButton.js.map

package/dist/cjs/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,112 @@
+import { Autocomplete as BaseAutocomplete, AutocompleteGroupProps as BaseAutocompleteGroupProps, AutocompleteInputProps as BaseAutocompleteInputProps, AutocompleteItemProps as BaseAutocompleteItemProps, AutocompleteListProps as BaseAutocompleteListProps, AutocompletePopupProps as BaseAutocompletePopupProps, AutocompletePositionerProps as BaseAutocompletePositionerProps, AutocompleteRootProps as BaseAutocompleteRootProps } from '@base-ui/react/autocomplete';
+import { ButtonProps } from '@base-ui/react/button';
+import { ComboboxRowProps as BaseAutocompleteRowProps } from '@base-ui/react/combobox';
+import { ReactNode } from 'react';
+import { PaletteName } from '../../uno/index.js';
+import { ChipProps } from '../chip/Chip.js';
+export interface AutocompleteInputProps extends BaseAutocompleteInputProps {
+    ref?: React.Ref<HTMLInputElement>;
+    icon?: ReactNode;
+    disableCaret?: boolean;
+}
+export interface AutocompletePopoupProps extends BaseAutocompletePopupProps {
+    positioner?: BaseAutocompletePositionerProps;
+    ref?: React.Ref<HTMLDivElement>;
+    arrow?: boolean;
+}
+export interface AutocompleteItemProps extends BaseAutocompleteItemProps {
+    ref?: React.Ref<HTMLDivElement>;
+    color?: PaletteName;
+}
+export interface AutocompleteGroupItemProps extends Omit<BaseAutocompleteItemProps, 'render'> {
+    ref?: React.Ref<HTMLDivElement>;
+    replace?: BaseAutocompleteItemProps['render'];
+    render?: ChipProps['render'];
+}
+declare function AutocompleteGroupItem({ className, replace, render, ...props }: AutocompleteGroupItemProps): import("react/jsx-runtime.js").JSX.Element;
+export type AutocompleteClearProps = ButtonProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+    children?: ReactNode;
+};
+declare function createAutocomplete<TItem>(): ((props: Omit<BaseAutocompleteRootProps<TItem>, "items"> & {
+    items: readonly TItem[];
+}) => import("react/jsx-runtime.js").JSX.Element) & {
+    Input: ({ disableCaret, icon, ...props }: AutocompleteInputProps) => import("react/jsx-runtime.js").JSX.Element;
+    Content: ({ positioner, arrow, children, ...props }: AutocompletePopoupProps) => import("react/jsx-runtime.js").JSX.Element;
+    List: (props: Omit<BaseAutocompleteListProps, "children"> & {
+        children?: ReactNode | ((item: TItem, index: number) => ReactNode);
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    Empty: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime.js").JSX.Element;
+    useFilter: (options?: import("@base-ui/react/autocomplete/index.js").AutocompleteFilterOptions) => import("@base-ui/react/autocomplete/index.js").AutocompleteFilter;
+    Group: ({ className, ...props }: BaseAutocompleteGroupProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    GroupLabel: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    GroupList: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
+    Row: import("react").FC<BaseAutocompleteRowProps>;
+    Separator: import("react").FunctionComponent<import("@base-ui/react/separator/Separator.js").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Clear: ({ children, ...props }: AutocompleteClearProps) => import("react/jsx-runtime.js").JSX.Element;
+    Positioner: import("react").ForwardRefExoticComponent<BaseAutocompletePositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Portal: import("react").ForwardRefExoticComponent<import("@base-ui/react/autocomplete/index.js").AutocompletePortalProps & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").FunctionComponent<BaseAutocompletePopupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+    ListItem: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime.js").JSX.Element;
+    GroupItem: typeof AutocompleteGroupItem;
+    Unstyled: typeof BaseAutocomplete;
+};
+declare function createAutocompleteGrouped<TItemGroup extends {
+    items: readonly any[];
+}>(): ((props: Omit<BaseAutocompleteRootProps<TItemGroup["items"][number]>, "items"> & {
+    items: TItemGroup[];
+}) => import("react/jsx-runtime.js").JSX.Element) & {
+    Content: ({ positioner, arrow, children, ...props }: AutocompletePopoupProps) => import("react/jsx-runtime.js").JSX.Element;
+    Item: typeof AutocompleteGroupItem;
+    Input: ({ disableCaret, icon, ...props }: AutocompleteInputProps) => import("react/jsx-runtime.js").JSX.Element;
+    List: (props: Omit<BaseAutocompleteListProps, "children"> & {
+        children?: ReactNode | ((group: TItemGroup, groupIndex: number) => ReactNode);
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    Group: ({ className, ...props }: BaseAutocompleteGroupProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    GroupLabel: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    GroupList: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
+    Empty: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+    Row: import("react").FC<BaseAutocompleteRowProps>;
+    useFilter: (options?: import("@base-ui/react/autocomplete/index.js").AutocompleteFilterOptions) => import("@base-ui/react/autocomplete/index.js").AutocompleteFilter;
+    Separator: import("react").FunctionComponent<import("@base-ui/react/separator/Separator.js").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Clear: ({ children, ...props }: AutocompleteClearProps) => import("react/jsx-runtime.js").JSX.Element;
+    Positioner: import("react").ForwardRefExoticComponent<BaseAutocompletePositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Portal: import("react").ForwardRefExoticComponent<import("@base-ui/react/autocomplete/index.js").AutocompletePortalProps & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").FunctionComponent<BaseAutocompletePopupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+    ListItem: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime.js").JSX.Element;
+    GroupItem: typeof AutocompleteGroupItem;
+    Unstyled: typeof BaseAutocomplete;
+};
+export declare const Autocomplete: ((props: BaseAutocompleteRootProps<any>) => import("react/jsx-runtime.js").JSX.Element) & {
+    useFilter: (options?: import("@base-ui/react/autocomplete/index.js").AutocompleteFilterOptions) => import("@base-ui/react/autocomplete/index.js").AutocompleteFilter;
+    Input: ({ disableCaret, icon, ...props }: AutocompleteInputProps) => import("react/jsx-runtime.js").JSX.Element;
+    Content: ({ positioner, arrow, children, ...props }: AutocompletePopoupProps) => import("react/jsx-runtime.js").JSX.Element;
+    Empty: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteEmptyProps & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").FunctionComponent<BaseAutocompleteListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime.js").JSX.Element;
+    Group: ({ className, ...props }: BaseAutocompleteGroupProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    GroupLabel: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteGroupLabelProps & import("react").RefAttributes<HTMLDivElement>>;
+    GroupList: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
+    Row: import("react").FC<BaseAutocompleteRowProps>;
+    Separator: import("react").FunctionComponent<import("@base-ui/react/separator/Separator.js").SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Clear: ({ children, ...props }: AutocompleteClearProps) => import("react/jsx-runtime.js").JSX.Element;
+    Positioner: import("react").ForwardRefExoticComponent<BaseAutocompletePositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+    Portal: import("react").ForwardRefExoticComponent<import("@base-ui/react/autocomplete/index.js").AutocompletePortalProps & import("react").RefAttributes<HTMLDivElement>>;
+    Popup: import("react").FunctionComponent<BaseAutocompletePopupProps & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: import("react").FunctionComponent<import("@base-ui/react/autocomplete/index.js").AutocompleteBackdropProps & import("react").RefAttributes<HTMLDivElement>>;
+    ListItem: ({ className, color, ...props }: AutocompleteItemProps) => import("react/jsx-runtime.js").JSX.Element;
+    GroupItem: typeof AutocompleteGroupItem;
+    Unstyled: typeof BaseAutocomplete;
+    create: typeof createAutocomplete;
+    createGrouped: typeof createAutocompleteGrouped;
+};
+export {};

package/dist/cjs/components/autocomplete/Autocomplete.js

@@ -0,0 +1,119 @@
+// @unocss-include
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const autocomplete_1 = require("@base-ui/react/autocomplete");
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = require("react");
+const hooks_js_1 = require("../../hooks.js");
+const Button_js_1 = require("../button/Button.js");
+const Chip_js_1 = require("../chip/Chip.js");
+const Icon_js_1 = require("../icon/Icon.js");
+const Input_js_1 = require("../input/Input.js");
+const menus_js_1 = require("../primitives/menus.js");
+const ArrowSvg_js_1 = require("../utility/ArrowSvg.js");
+const SlotDiv_js_1 = require("../utility/SlotDiv.js");
+const ValueContext = (0, react_1.createContext)(null);
+const AutocompleteRoot = (props) => {
+    return ((0, jsx_runtime_1.jsx)(ValueContext.Provider, { value: props.value || null, children: (0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Root, Object.assign({}, props)) }));
+};
+const AutocompleteInput = (_a) => {
+    var { disableCaret, icon } = _a, props = __rest(_a, ["disableCaret", "icon"]);
+    const valueFromContext = (0, react_1.useContext)(ValueContext);
+    return ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Input, Object.assign({ render: (_a, state) => {
+            var { ref, className } = _a, props = __rest(_a, ["ref", "className"]);
+            return ((0, jsx_runtime_1.jsxs)(Input_js_1.Input.Border, { ref: ref, className: className, children: [icon, (0, jsx_runtime_1.jsx)(Input_js_1.Input.Input, Object.assign({ autoComplete: "off" }, props)), (valueFromContext !== null || !disableCaret) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [valueFromContext !== null && (0, jsx_runtime_1.jsx)(AutocompleteClear, {}), !disableCaret && ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Trigger, { render: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { emphasis: "ghost", size: "small" }), children: (0, jsx_runtime_1.jsx)(AutocompleteIcon, { "data-open": state.open ? true : undefined }) }))] }))] }));
+        } }, props)));
+};
+const AutocompleteIcon = (0, hooks_js_1.withClassName)((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Icon, Object.assign({}, props, { className: (0, clsx_1.default)('icon', 'layer-components:flex layer-components:shrink-0 layer-components:items-center layer-components:justify-center layer-components:transition-transform', 'layer-components:data-[open]:rotate-180', className), children: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "chevron" }) })));
+});
+const AutocompletePopup = (0, hooks_js_1.withClassName)(autocomplete_1.Autocomplete.Popup, menus_js_1.popupClassName, 'layer-components:w-[--anchor-width]');
+const AutocompleteBackdrop = (0, hooks_js_1.withClassName)(autocomplete_1.Autocomplete.Backdrop, 'layer-components:fixed layer-components:inset-0');
+const AutocompleteArrow = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Arrow, Object.assign({}, props, { className: (0, clsx_1.default)(menus_js_1.arrowClassName, className), children: (0, jsx_runtime_1.jsx)(ArrowSvg_js_1.ArrowSvg, {}) })));
+};
+const AutocompleteContent = (_a) => {
+    var { positioner, arrow, children } = _a, props = __rest(_a, ["positioner", "arrow", "children"]);
+    return ((0, jsx_runtime_1.jsxs)(autocomplete_1.Autocomplete.Portal, { children: [(0, jsx_runtime_1.jsx)(AutocompleteBackdrop, {}), (0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Positioner, Object.assign({ sideOffset: 8 }, positioner, { children: (0, jsx_runtime_1.jsxs)(AutocompletePopup, Object.assign({}, props, { children: [arrow && (0, jsx_runtime_1.jsx)(AutocompleteArrow, {}), children] })) }))] }));
+};
+const AutocompleteList = (0, hooks_js_1.withClassName)(autocomplete_1.Autocomplete.List, menus_js_1.itemListClassName, 'layer-components:flex layer-components:flex-col layer-components:overscroll-contain layer-components:outline-none layer-components:overflow-y-auto layer-components:overflow-unstable', 'layer-components:empty:p-0');
+const AutocompleteEmpty = (0, hooks_js_1.withClassName)(autocomplete_1.Autocomplete.Empty, 'layer-components:[&:not(:empty)]:p-sm layer-components:[&:not(:empty)]:text-sm layer-components:[&:not(:empty)]:color-gray-dark');
+const AutocompleteItem = (_a) => {
+    var { className, color = 'gray' } = _a, props = __rest(_a, ["className", "color"]);
+    return ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Item, Object.assign({ className: (0, clsx_1.default)(color && `palette-${color}`, menus_js_1.itemClassName, className) }, props)));
+};
+const AutocompleteGroup = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Group, Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:flex layer-components:flex-col layer-components:gap-xs layer-components:overflow-hidden layer-components:p-sm', className) })));
+};
+const AutocompleteGroupItemList = (0, hooks_js_1.withClassName)(SlotDiv_js_1.SlotDiv, 'layer-components:flex layer-components:flex-row layer-components:flex-wrap layer-components:gap-xs');
+const AutocompleteGroupLabel = (0, hooks_js_1.withClassName)(autocomplete_1.Autocomplete.GroupLabel, 'layer-components:w-full layer-components:px-xs layer-components:text-xs layer-components:font-medium layer-components:uppercase layer-components:color-gray-dark');
+const AutocompleteRow = (0, hooks_js_1.withClassName)(autocomplete_1.Autocomplete.Row, 'layer-components:flex layer-components:items-center layer-components:gap-xs');
+const AutocompleteSeparator = (0, hooks_js_1.withClassName)(autocomplete_1.Autocomplete.Separator, menus_js_1.separatorClassName);
+function AutocompleteGroupItem(_a) {
+    var { className, replace, render } = _a, props = __rest(_a, ["className", "replace", "render"]);
+    return ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Item, Object.assign({ render: replace !== null && replace !== void 0 ? replace : (0, jsx_runtime_1.jsx)(Button_js_1.Button, { render: (0, jsx_runtime_1.jsx)(Chip_js_1.Chip, { render: render }) }) }, props, { className: (0, clsx_1.default)('palette-primary', 'layer-composed-2:bg-white', 'layer-composed-2:data-[highlighted]:ring-2 layer-composed-2:data-[highlighted]:bg-main-wash layer-composed-2:data-[highlighted]:ring-primary', className) })));
+}
+const AutocompleteClear = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete.Clear, Object.assign({ render: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { emphasis: "ghost", size: "small" }) }, props, { children: children !== null && children !== void 0 ? children : (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "x" }) })));
+};
+const baseSubComponents = {
+    useFilter: autocomplete_1.Autocomplete.useFilter,
+    Input: AutocompleteInput,
+    Content: AutocompleteContent,
+    Empty: AutocompleteEmpty,
+    List: AutocompleteList,
+    Item: AutocompleteItem,
+    Group: AutocompleteGroup,
+    GroupLabel: AutocompleteGroupLabel,
+    GroupList: AutocompleteGroupItemList,
+    Row: AutocompleteRow,
+    Separator: AutocompleteSeparator,
+    Clear: AutocompleteClear,
+    Positioner: autocomplete_1.Autocomplete.Positioner,
+    Portal: autocomplete_1.Autocomplete.Portal,
+    Popup: AutocompletePopup,
+    Backdrop: AutocompleteBackdrop,
+    ListItem: AutocompleteItem,
+    GroupItem: AutocompleteGroupItem,
+    Unstyled: autocomplete_1.Autocomplete,
+};
+function createAutocomplete() {
+    function TypedRoot(props) {
+        return (0, jsx_runtime_1.jsx)(AutocompleteRoot, Object.assign({}, props));
+    }
+    function TypedList(props) {
+        return (0, jsx_runtime_1.jsx)(AutocompleteList, Object.assign({}, props));
+    }
+    return Object.assign(TypedRoot, Object.assign(Object.assign({}, baseSubComponents), { Input: AutocompleteInput, Content: AutocompleteContent, List: TypedList, Empty: AutocompleteEmpty, Item: AutocompleteItem }));
+}
+function createAutocompleteGrouped() {
+    function TypedRoot(props) {
+        return (0, jsx_runtime_1.jsx)(AutocompleteRoot, Object.assign({}, props));
+    }
+    function TypedList(props) {
+        return (0, jsx_runtime_1.jsx)(AutocompleteList, Object.assign({}, props));
+    }
+    return Object.assign(TypedRoot, Object.assign(Object.assign({}, baseSubComponents), { Content: AutocompleteContent, Item: AutocompleteGroupItem, Input: AutocompleteInput, List: TypedList, Group: AutocompleteGroup, GroupLabel: AutocompleteGroupLabel, GroupList: AutocompleteGroupItemList, Empty: AutocompleteEmpty, Row: AutocompleteRow }));
+}
+exports.Autocomplete = Object.assign(AutocompleteRoot, Object.assign({ create: createAutocomplete, createGrouped: createAutocompleteGrouped }, baseSubComponents));
+//# sourceMappingURL=Autocomplete.js.map

package/dist/cjs/components/autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sourceRoot":"","sources":["../../../../src/components/autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/autocomplete/Autocomplete.stories.d.ts

@@ -0,0 +1,52 @@
+import type { StoryObj } from '@storybook/react';
+interface Args {
+    arrow?: boolean;
+    autoHighlight?: boolean;
+    keepHighlight?: boolean;
+    highlightItemOnHover?: boolean;
+}
+declare const meta: {
+    title: string;
+    argTypes: {
+        arrow: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        autoHighlight: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        keepHighlight: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        highlightItemOnHover: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+    };
+    args: {
+        arrow: false;
+        autoHighlight: false;
+        keepHighlight: false;
+        highlightItemOnHover: true;
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<Args>;
+export interface Item {
+    id: string;
+    label: string;
+}
+export declare const Default: Story;
+export declare const Grouped: Story;
+export declare const NotPopover: Story;

package/dist/cjs/components/autocomplete/Autocomplete.stories.js

@@ -0,0 +1,93 @@
+// @unocss-include
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotPopover = exports.Grouped = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Box_js_1 = require("../box/Box.js");
+const Icon_js_1 = require("../icon/Icon.js");
+const Autocomplete_js_1 = require("./Autocomplete.js");
+const meta = {
+    title: 'Components/Autocomplete',
+    argTypes: {
+        arrow: {
+            control: 'boolean',
+            description: 'Whether to show the arrow on the autocomplete popup.',
+            defaultValue: false,
+        },
+        autoHighlight: {
+            control: 'boolean',
+            description: 'If true, the first item will be automatically highlighted when the list opens.',
+            defaultValue: false,
+        },
+        keepHighlight: {
+            control: 'boolean',
+            description: 'If true, the highlighted item will be kept when the list is reopened.',
+            defaultValue: false,
+        },
+        highlightItemOnHover: {
+            control: 'boolean',
+            description: 'If true, items will be highlighted when hovered with the mouse.',
+            defaultValue: false,
+        },
+    },
+    args: {
+        arrow: false,
+        autoHighlight: false,
+        keepHighlight: false,
+        highlightItemOnHover: true,
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+exports.default = meta;
+const items = [
+    { id: 'apple', label: 'Apple' },
+    { id: 'banana', label: 'Banana' },
+    { id: 'cherry', label: 'Cherry' },
+    { id: 'date', label: 'Date' },
+    { id: 'elderberry', label: 'Elderberry' },
+    { id: 'fig', label: 'Fig' },
+    { id: 'grape', label: 'Grape' },
+    { id: 'honeydew', label: 'Honeydew' },
+];
+const ExampleAutocomplete = Autocomplete_js_1.Autocomplete.create();
+exports.Default = {
+    render({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) {
+        const [value, setValue] = (0, react_1.useState)(undefined);
+        return ((0, jsx_runtime_1.jsxs)(ExampleAutocomplete, { value: value, onValueChange: setValue, items: items, autoHighlight: autoHighlight, keepHighlight: keepHighlight, highlightItemOnHover: highlightItemOnHover, children: [(0, jsx_runtime_1.jsx)(ExampleAutocomplete.Input, { icon: (0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "food" }), className: "w-[200px]" }), (0, jsx_runtime_1.jsxs)(ExampleAutocomplete.Content, { arrow: arrow, children: [(0, jsx_runtime_1.jsx)(ExampleAutocomplete.List, { children: (item) => ((0, jsx_runtime_1.jsx)(ExampleAutocomplete.Item, { value: item.id, children: item.label }, item.id)) }), (0, jsx_runtime_1.jsx)(ExampleAutocomplete.Empty, { children: "No results found." })] })] }));
+    },
+};
+const groupedItems = [
+    {
+        category: 'Fruits',
+        items: [
+            { id: 'apple', label: 'Apple' },
+            { id: 'banana', label: 'Banana' },
+            { id: 'cherry', label: 'Cherry' },
+        ],
+    },
+    {
+        category: 'Berries',
+        items: [
+            { id: 'strawberry', label: 'Strawberry' },
+            { id: 'blueberry', label: 'Blueberry' },
+            { id: 'raspberry', label: 'Raspberry' },
+        ],
+    },
+];
+const GroupedAutocomplete = Autocomplete_js_1.Autocomplete.createGrouped();
+exports.Grouped = {
+    render({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) {
+        const [value, setValue] = (0, react_1.useState)(undefined);
+        return ((0, jsx_runtime_1.jsxs)(GroupedAutocomplete, { value: value, onValueChange: setValue, items: groupedItems, autoHighlight: autoHighlight, keepHighlight: keepHighlight, highlightItemOnHover: highlightItemOnHover, children: [(0, jsx_runtime_1.jsx)(GroupedAutocomplete.Input, {}), (0, jsx_runtime_1.jsxs)(GroupedAutocomplete.Content, { arrow: arrow, children: [(0, jsx_runtime_1.jsx)(GroupedAutocomplete.List, { children: (group) => ((0, jsx_runtime_1.jsxs)(GroupedAutocomplete.Group, { children: [(0, jsx_runtime_1.jsx)(GroupedAutocomplete.GroupLabel, { children: group.category }), (0, jsx_runtime_1.jsx)(GroupedAutocomplete.GroupList, { children: group.items.map((item) => ((0, jsx_runtime_1.jsx)(GroupedAutocomplete.Item, { value: item.id, children: item.label }, item.id))) })] }, group.category)) }), (0, jsx_runtime_1.jsx)(GroupedAutocomplete.Empty, { children: "No results found." }), (0, jsx_runtime_1.jsx)(GroupedAutocomplete.Separator, {}), (0, jsx_runtime_1.jsx)("div", { className: "p-sm text-xs color-gray-dark", children: "Select your favorite fruit or berry." })] })] }));
+    },
+};
+exports.NotPopover = {
+    render({ autoHighlight, keepHighlight, highlightItemOnHover }) {
+        const [value, setValue] = (0, react_1.useState)(undefined);
+        return ((0, jsx_runtime_1.jsx)(GroupedAutocomplete, { value: value, onValueChange: setValue, items: groupedItems, autoHighlight: autoHighlight, keepHighlight: keepHighlight, highlightItemOnHover: highlightItemOnHover, children: (0, jsx_runtime_1.jsxs)(Box_js_1.Box, { border: true, p: true, surface: "white", col: true, children: [(0, jsx_runtime_1.jsx)(GroupedAutocomplete.Input, { disableCaret: true, className: "w-full" }), (0, jsx_runtime_1.jsx)(GroupedAutocomplete.List, { children: (group) => ((0, jsx_runtime_1.jsxs)(GroupedAutocomplete.Group, { children: [(0, jsx_runtime_1.jsx)(GroupedAutocomplete.GroupLabel, { children: group.category }), (0, jsx_runtime_1.jsx)(GroupedAutocomplete.GroupList, { children: group.items.map((item) => ((0, jsx_runtime_1.jsx)(GroupedAutocomplete.Item, { value: item.id, children: item.label }, item.id))) })] }, group.category)) }), (0, jsx_runtime_1.jsx)(GroupedAutocomplete.Empty, { children: "No results found." })] }) }));
+    },
+};
+//# sourceMappingURL=Autocomplete.stories.js.map

package/dist/cjs/components/autocomplete/Autocomplete.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.stories.js","sourceRoot":"","sources":["../../../../src/components/autocomplete/Autocomplete.stories.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/avatar/Avatar.js

@@ -23,7 +23,7 @@ const index_js_1 = require("../icon/index.js");
 function Avatar(_a) {
     var { className, popIn = false, imageSrc, name, crossOrigin, style, size } = _a, rest = __rest(_a, ["className", "popIn", "imageSrc", "name", "crossOrigin", "style", "size"]);
     const empty = !name && !imageSrc;
-    return ((0, jsx_runtime_1.jsxs)(avatar_1.Avatar.Root, Object.assign({ "data-pop": popIn, className: (0, clsx_1.default)('layer-components:flex layer-components:items-center layer-components:justify-center layer-components:rounded-lg layer-components:border-default layer-components:overflow-hidden layer-components:w-24px layer-components:aspect-1 layer-components:select-none layer-components:relative layer-components:bg-white layer-components:flex-shrink-0', popIn &&
-            'layer-variants:animate-pop-in-from-half layer-variants:animate-ease-springy layer-variants:animate-duration-200', empty && 'layer-components:border-dashed layer-components:bg-gray-light', className), style: size ? Object.assign({ width: size, height: size }, style) : style }, rest, { children: [imageSrc && ((0, jsx_runtime_1.jsx)(avatar_1.Avatar.Image, { className: "w-full h-full object-cover", referrerPolicy: "no-referrer", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture`, crossOrigin: crossOrigin })), name && ((0, jsx_runtime_1.jsx)(avatar_1.Avatar.Fallback, { className: "text-size-[calc(0.5px*var(--avatar-size,24px))]", style: { '--avatar-size': size }, children: name.charAt(0).toUpperCase() })), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
+    return ((0, jsx_runtime_1.jsxs)(avatar_1.Avatar.Root, Object.assign({ "data-pop": popIn, className: (0, clsx_1.default)('layer-components:relative layer-components:aspect-1 layer-components:w-24px layer-components:flex layer-components:flex-shrink-0 layer-components:select-none layer-components:items-center layer-components:justify-center layer-components:overflow-hidden layer-components:border-default layer-components:rounded-lg layer-components:bg-white', popIn &&
+            'layer-variants:animate-pop-in-from-half layer-variants:animate-duration-200 layer-variants:animate-ease-springy', empty && 'layer-components:border-dashed layer-components:bg-gray-light', className), style: size ? Object.assign({ width: size, height: size }, style) : style }, rest, { children: [imageSrc && ((0, jsx_runtime_1.jsx)(avatar_1.Avatar.Image, { className: "h-full w-full object-cover", referrerPolicy: "no-referrer", src: imageSrc, alt: `${name !== null && name !== void 0 ? name : 'user'}'s profile picture`, crossOrigin: crossOrigin })), name && ((0, jsx_runtime_1.jsx)(avatar_1.Avatar.Fallback, { className: "text-size-[calc(0.5px*var(--avatar-size,24px))]", style: { '--avatar-size': size }, children: name.charAt(0).toUpperCase() })), empty && (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "profile" })] })));
 }
 //# sourceMappingURL=Avatar.js.map

package/dist/cjs/components/box/Box.js

@@ -31,7 +31,7 @@ function Box(_a) {
     const style = (0, GroupScale_js_1.useGroupScaleStyles)(userStyle);
     const items = itemsSolo !== null && itemsSolo !== void 0 ? itemsSolo : align === null || align === void 0 ? void 0 : align.split(' ')[0];
     const justify = justifySolo !== null && justifySolo !== void 0 ? justifySolo : align === null || align === void 0 ? void 0 : align.split(' ')[1];
-    const main = ((0, jsx_runtime_1.jsx)(SlotDiv_js_1.SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: (0, clsx_1.default)('layer-components:flex layer-components:relative', color && `palette-${color}`, {
+    const main = ((0, jsx_runtime_1.jsx)(SlotDiv_js_1.SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: (0, clsx_1.default)('layer-components:relative layer-components:flex', color && `palette-${color}`, {
             'layer-components:flex-row': hasDefault(direction, 'row') && !col,
             'layer-components:flex-col': hasDefault(direction, 'col') || col,
             'layer-components:flex-row-reverse': hasDefault(direction, 'row-reverse'),
@@ -94,15 +94,15 @@ function Box(_a) {
                 rounded === true ||
                 (rounded === undefined && (surface || border)),
             'layer-components:rounded-xl': rounded === 'xl',
-            'layer-components:bg-white layer-components:border-gray-dark layer-components:color-black': surface === 'white',
-            'layer-components:bg-main-wash layer-components:border-main-dark layer-components:color-main-ink': surface === true,
+            'layer-components:color-black layer-components:bg-white layer-components:border-gray-dark': surface === 'white',
+            'layer-components:color-main-ink layer-components:bg-main-wash layer-components:border-main-dark': surface === true,
             'layer-components:border layer-components:border-solid': border,
             'layer-components:w-full': full === true || full === 'width',
             'layer-components:h-full': full === true || full === 'height',
             'layer-components:overflow-hidden': overflow === 'hidden',
             'layer-components:overflow-auto': overflow === 'auto',
-            'layer-components:overflow-x-auto layer-components:overflow-y-hidden': overflow === 'auto-x',
-            'layer-components:overflow-y-auto layer-components:overflow-x-hidden': overflow === 'auto-y',
+            'layer-components:overflow-y-hidden layer-components:overflow-x-auto': overflow === 'auto-x',
+            'layer-components:overflow-x-hidden layer-components:overflow-y-auto': overflow === 'auto-y',
             'layer-components:flex-grow': grow,
             'layer-components:@container': container === true,
             'layer-components:shadow-sm': elevated === null || elevated === void 0 ? void 0 : elevated.includes('sm'),

package/dist/cjs/components/box/Box.stories.js

@@ -92,7 +92,7 @@ function SurfaceContent({ name }) {
 }
 exports.Surfaces = {
     render(args) {
-        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid gap-lg grid-cols-2 md:grid-cols-3 bg-wash" }, args, { children: [(0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: "white", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "White" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "primary", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Primary" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "accent", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Accent" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "gray", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Gray" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "attention", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Attention" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "success", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Success" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "high-contrast", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "High Contrast" }) }))] })));
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid grid-cols-2 gap-lg bg-wash md:grid-cols-3" }, args, { children: [(0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: "white", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "White" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "primary", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Primary" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "accent", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Accent" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "gray", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Gray" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "attention", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Attention" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "success", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "Success" }) })), (0, jsx_runtime_1.jsx)(Box_js_1.Box, Object.assign({}, args, { surface: true, color: "high-contrast", p: "lg", col: true, gap: true, children: (0, jsx_runtime_1.jsx)(SurfaceContent, { name: "High Contrast" }) }))] })));
     },
 };
 //# sourceMappingURL=Box.stories.js.map

package/dist/cjs/components/button/Button.js

@@ -58,13 +58,13 @@ function ButtonRoot(_a) {
     if (toggled !== undefined) {
         buttonProps['aria-pressed'] = !!toggled;
     }
-    return ((0, jsx_runtime_1.jsx)(IconLoadingContext_js_1.IconLoadingProvider, { value: isLoading, children: (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({}, buttonProps, { children: [(0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: isLoading && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { width: 0, marginLeft: '-0.5rem' }, animate: { width: 'auto', marginLeft: 0 }, exit: { width: 0, marginLeft: '-0.5rem' }, className: (0, clsx_1.clsx)('flex-shrink-0 inline-block overflow-hidden my-auto flex', '[[data-has-icon=true]_&]:hidden'), "data-default-loader": true, children: (0, jsx_runtime_1.jsx)(index_js_2.Spinner, { size: 15, className: "inline-block w-1em h-1em" }) }, "spinner")) }), toggled !== undefined &&
+    return ((0, jsx_runtime_1.jsx)(IconLoadingContext_js_1.IconLoadingProvider, { value: isLoading, children: (0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({}, buttonProps, { children: [(0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: isLoading && ((0, jsx_runtime_1.jsx)(react_1.motion.div, { initial: { width: 0, marginLeft: '-0.5rem' }, animate: { width: 'auto', marginLeft: 0 }, exit: { width: 0, marginLeft: '-0.5rem' }, className: (0, clsx_1.clsx)('my-auto inline-block flex flex-shrink-0 overflow-hidden', '[[data-has-icon=true]_&]:hidden'), "data-default-loader": true, children: (0, jsx_runtime_1.jsx)(index_js_2.Spinner, { size: 15, className: "inline-block h-1em w-1em" }) }, "spinner")) }), toggled !== undefined &&
                     (toggleMode === 'indicator' ||
                         toggleMode === 'color-and-indicator') && ((0, jsx_runtime_1.jsx)(exports.ButtonToggleIndicator, { value: toggled })), children, isDropdownTrigger && ((0, jsx_runtime_1.jsx)(IconLoadingContext_js_1.IconLoadingProvider, { value: false, children: (0, jsx_runtime_1.jsx)(DropdownMenu_js_1.DropdownMenuTriggerIcon, { render: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "chevron" }) }) }))] })) }));
 }
 ButtonRoot.displayName = 'Button';
 exports.ButtonToggleIndicator = (0, react_2.memo)(function ToggleIndicator({ value, }) {
-    return ((0, jsx_runtime_1.jsx)(index_js_1.Icon, { "aria-hidden": true, name: "check", className: "transition-width w-0 ml--1", style: {
+    return ((0, jsx_runtime_1.jsx)(index_js_1.Icon, { "aria-hidden": true, name: "check", className: "ml--1 w-0 transition-width", style: {
             width: value ? '15px' : 0,
         }, loading: false }));
 });

package/dist/cjs/components/button/ConfirmedButton.js

@@ -33,7 +33,7 @@ function ConfirmedButton(_a) {
         }
     }, [onConfirm]);
     if (skip) {
-        return ((0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({}, rest, { onClick: (ev) => {
+        return ((0, jsx_runtime_1.jsx)(Button_js_1.Button, Object.assign({}, rest, { onClick: () => {
                 onConfirm();
             } })));
     }

package/dist/cjs/components/button/ConfirmedButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmedButton.js","sourceRoot":"","sources":["../../../../src/components/button/ConfirmedButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAsBA,0CAuDC;;AA7ED,iCAA8C;AAC9C,iDAO4B;AAC5B,qDAA2C;AAC3C,2CAAkD;AAYlD,SAAgB,eAAe,CAAC,EAST;QATS,EAC/B,WAAW,EACX,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,WAAW,EAC1B,YAAY,GAAG,SAAS,EACxB,SAAS,EACT,IAAI,OAEkB,EADnB,IAAI,cARwB,qGAS/B,CADO;IAEP,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QACtC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,CAAC;YACJ,MAAM,SAAS,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC;gBAAS,CAAC;YACV,UAAU,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,IAAI,EAAE,CAAC;QACV,OAAO,CACN,uBAAC,kBAAM,oBACF,IAAI,IACR,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE;gBACf,SAAS,EAAE,CAAC;YACb,CAAC,IACA,CACF,CAAC;IACH,CAAC;IAED,OAAO,CACN,wBAAC,iBAAM,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,uBAAC,wBAAa,kBAAC,MAAM,EAAE,uBAAC,kBAAM,KAAG,IAAM,IAAI,EAAI,EAC/C,wBAAC,wBAAa,eACb,uBAAC,sBAAW,cAAE,YAAY,GAAe,EACzC,uBAAC,YAAC,cAAE,WAAW,GAAK,EACpB,wBAAC,wBAAa,eACb,uBAAC,sBAAW,IAAC,MAAM,EAAE,uBAAC,kBAAM,IAAC,QAAQ,EAAC,SAAS,GAAG,YAChD,YAAY,GACA,EACd,uBAAC,kBAAM,IACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE,YAAY,YAElB,aAAa,GACN,IACM,IACD,IACR,CACT,CAAC;AACH,CAAC"}
+{"version":3,"file":"ConfirmedButton.js","sourceRoot":"","sources":["../../../../src/components/button/ConfirmedButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAsBA,0CAuDC;;AA7ED,iCAA8C;AAC9C,iDAO4B;AAC5B,qDAA2C;AAC3C,2CAAkD;AAYlD,SAAgB,eAAe,CAAC,EAST;QATS,EAC/B,WAAW,EACX,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,WAAW,EAC1B,YAAY,GAAG,SAAS,EACxB,SAAS,EACT,IAAI,OAEkB,EADnB,IAAI,cARwB,qGAS/B,CADO;IAEP,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,KAAK,IAAI,EAAE;QACtC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,CAAC;YACJ,MAAM,SAAS,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC;gBAAS,CAAC;YACV,UAAU,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,IAAI,EAAE,CAAC;QACV,OAAO,CACN,uBAAC,kBAAM,oBACF,IAAI,IACR,OAAO,EAAE,GAAG,EAAE;gBACb,SAAS,EAAE,CAAC;YACb,CAAC,IACA,CACF,CAAC;IACH,CAAC;IAED,OAAO,CACN,wBAAC,iBAAM,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,uBAAC,wBAAa,kBAAC,MAAM,EAAE,uBAAC,kBAAM,KAAG,IAAM,IAAI,EAAI,EAC/C,wBAAC,wBAAa,eACb,uBAAC,sBAAW,cAAE,YAAY,GAAe,EACzC,uBAAC,YAAC,cAAE,WAAW,GAAK,EACpB,wBAAC,wBAAa,eACb,uBAAC,sBAAW,IAAC,MAAM,EAAE,uBAAC,kBAAM,IAAC,QAAQ,EAAC,SAAS,GAAG,YAChD,YAAY,GACA,EACd,uBAAC,kBAAM,IACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE,YAAY,YAElB,aAAa,GACN,IACM,IACD,IACR,CACT,CAAC;AACH,CAAC"}