@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/LegacyComponents/IconButton/IconButton.js

@@ -1,13 +1,13 @@
 import * as React from "react";
 import cn from "clsx";
 import { Icon } from "../../Icon/Icon.js";
-import { getButtonClasses, getAppearanceClasses, createButtonWithTooltip, createButtonWithOverlays } from "../Button/util.js";
+import { createButtonWithOverlays, getButtonClasses, ICON_APPEARANCE_CLASSNAME, createButtonWithTooltip } from "../Button/util.js";
 const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase2(props, ref) {
-  const { icon, rounded = false, ...otherProps } = props;
+  const { icon, rounded = false, appearance = "default", ...otherProps } = props;
   const className = cn(
     "w-8",
     getButtonClasses(),
-    getAppearanceClasses(otherProps.appearance, true),
+    ICON_APPEARANCE_CLASSNAME[appearance],
     {
       "rounded-full": rounded,
       rounded: !rounded
@@ -18,7 +18,13 @@ const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase2(pro
     return null;
   }
   return createButtonWithTooltip(
-    { "data-taco": "legacy-icon-button", ...otherProps, children: /* @__PURE__ */ React.createElement(Icon, { name: icon, className: "m-0 p-0" }) },
+    // forward the caller's own appearance so an omitted prop stays omitted from the DOM
+    {
+      "data-taco": "legacy-icon-button",
+      appearance: props.appearance,
+      ...otherProps,
+      children: /* @__PURE__ */ React.createElement(Icon, { name: icon, className: "m-0 p-0" })
+    },
     className,
     ref
   );

package/dist/components/LegacyComponents/IconButton/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\nimport { Appearance } from '../../../types';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { HangerProps } from '../../Hanger/Hanger';\nimport { MenuProps } from '../../Menu/Menu';\nimport { PopoverProps } from '../../Popover/Popover';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        { 'data-taco': 'legacy-icon-button', ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" /> },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["LegacyIconButtonBase","LegacyIconButton"],"mappings":";;;;AA+CO,MAAM,uBAAuB,MAAM,WAAW,SAASA,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,GAAG,WAAe,IAAA;AAEjD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,iBAAiB;AAAA,IACjB,qBAAqB,WAAW,YAAY,IAAI;AAAA,IAChD;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IACd;AAAA,IACA,MAAM;AAAA,EACV;AAEA,MAAI,CAAC,MAAM;AACA,WAAA;AAAA,EAAA;AAGJ,SAAA;AAAA,IACH,EAAE,aAAa,sBAAsB,GAAG,YAAY,UAAW,sBAAA,cAAA,MAAA,EAAK,MAAM,MAAM,WAAU,UAAU,CAAA,EAAG;AAAA,IACvG;AAAA,IACA;AAAA,EACJ;AACJ,CAAC;AAKM,MAAM,mBAAmB,MAAM,WAAW,SAASC,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAAS,sBAAA,cAAC,sBAAsB,EAAA,GAAG,aAAa,KAAU;AAEhE,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,WAAW,MAAM;AAC7E,CAAC;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/LegacyComponents/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport * as ButtonPrimitive from '../../../primitives/Button';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { ICON_APPEARANCE_CLASSNAME, getButtonClasses, createButtonWithTooltip, createButtonWithOverlays } from '../Button/util';\nimport { Appearance } from '../../../types';\nimport { DialogProps } from '../../Dialog/Dialog';\nimport { HangerProps } from '../../Hanger/Hanger';\nimport { MenuProps } from '../../Menu/Menu';\nimport { PopoverProps } from '../../Popover/Popover';\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport type LegacyIconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => React.JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => React.JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => React.JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string | React.JSX.Element;\n};\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButtonBase = React.forwardRef(function LegacyIconButtonBase(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { icon, rounded = false, appearance = 'default', ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        ICON_APPEARANCE_CLASSNAME[appearance],\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButtonWithTooltip(\n        // forward the caller's own appearance so an omitted prop stays omitted from the DOM\n        {\n            'data-taco': 'legacy-icon-button',\n            appearance: props.appearance,\n            ...otherProps,\n            children: <Icon name={icon} className=\"m-0 p-0\" />,\n        },\n        className,\n        ref\n    );\n});\n\n/**\n * @deprecated Use the forthcoming `IconButton` component instead. This legacy API will be removed in a future major version.\n */\nexport const LegacyIconButton = React.forwardRef(function LegacyIconButton(\n    props: LegacyIconButtonProps,\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) {\n    const { dialog, hanger, menu, popover, ...buttonProps } = props;\n    const button = <LegacyIconButtonBase {...buttonProps} ref={ref} />;\n\n    return createButtonWithOverlays({ dialog, hanger, menu, popover }, button);\n});\n"],"names":["LegacyIconButtonBase","LegacyIconButton"],"mappings":";;;;AA+CO,MAAM,uBAAuB,MAAM,WAAW,SAASA,sBAC1D,OACA,KACF;AACE,QAAM,EAAE,MAAM,UAAU,OAAO,aAAa,WAAW,GAAG,eAAe;AAEzE,QAAM,YAAY;AAAA,IACd;AAAA,IACA,iBAAA;AAAA,IACA,0BAA0B,UAAU;AAAA,IACpC;AAAA,MACI,gBAAgB;AAAA,MAChB,SAAS,CAAC;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,EAAA;AAGV,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,SAAO;AAAA;AAAA,IAEH;AAAA,MACI,aAAa;AAAA,MACb,YAAY,MAAM;AAAA,MAClB,GAAG;AAAA,MACH,UAAU,sBAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,IAEpD;AAAA,IACA;AAAA,EAAA;AAER,CAAC;AAKM,MAAM,mBAAmB,MAAM,WAAW,SAASC,kBACtD,OACA,KACF;AACE,QAAM,EAAE,QAAQ,QAAQ,MAAM,SAAS,GAAG,gBAAgB;AAC1D,QAAM,SAAS,sBAAA,cAAC,sBAAA,EAAsB,GAAG,aAAa,KAAU;AAEhE,SAAO,yBAAyB,EAAE,QAAQ,QAAQ,MAAM,QAAA,GAAW,MAAM;AAC7E,CAAC;"}

package/dist/components/List/List.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.cjs","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Collapsible } from './components/Collapsible';\nimport { Checkbox, Switch } from './components/Toggle';\nimport { Button } from './components/Button';\nimport './List.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement> & {\n    /* One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */\n    children: JSX.Element | (JSX.Element | boolean | null | undefined)[];\n};\n\nexport function List(props: ListProps) {\n    return <div {...props} data-taco=\"list\" />;\n}\n\nList.Button = Button;\nList.Link = Link;\nList.Collapsible = Collapsible;\nList.Switch = Switch;\nList.Checkbox = Checkbox;\nList.Group = Group;\n\nexport type { ListButtonProps } from './components/Button';\nexport type { ListLinkProps } from './components/Link';\nexport type { ListCollapsibleProps } from './components/Collapsible';\nexport type { ListGroupProps } from './components/Group';\nexport type { ListSwitchProps, ListCheckboxProps } from './components/Toggle';\n"],"names":["Button","Link","Collapsible","Switch","Checkbox","Group"],"mappings":";;;;;;;;;AAaO,SAAS,KAAK,OAAkB;AACnC,SAAQ,sBAAA,cAAA,OAAA,EAAK,GAAG,OAAO,aAAU,QAAO;AAC5C;AAEA,KAAK,SAASA,OAAA;AACd,KAAK,OAAOC,KAAA;AACZ,KAAK,cAAcC,YAAA;AACnB,KAAK,SAASC,OAAA;AACd,KAAK,WAAWC,OAAA;AAChB,KAAK,QAAQC,MAAA;;"}
+{"version":3,"file":"List.cjs","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Collapsible } from './components/Collapsible';\nimport { Checkbox, Switch } from './components/Toggle';\nimport { Button } from './components/Button';\nimport './List.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement> & {\n    /* One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */\n    children: React.JSX.Element | (React.JSX.Element | boolean | null | undefined)[];\n};\n\nexport function List(props: ListProps) {\n    return <div {...props} data-taco=\"list\" />;\n}\n\nList.Button = Button;\nList.Link = Link;\nList.Collapsible = Collapsible;\nList.Switch = Switch;\nList.Checkbox = Checkbox;\nList.Group = Group;\n\nexport type { ListButtonProps } from './components/Button';\nexport type { ListLinkProps } from './components/Link';\nexport type { ListCollapsibleProps } from './components/Collapsible';\nexport type { ListGroupProps } from './components/Group';\nexport type { ListSwitchProps, ListCheckboxProps } from './components/Toggle';\n"],"names":["Button","Link","Collapsible","Switch","Checkbox","Group"],"mappings":";;;;;;;;;AAaO,SAAS,KAAK,OAAkB;AACnC,SAAO,sBAAA,cAAC,OAAA,EAAK,GAAG,OAAO,aAAU,QAAO;AAC5C;AAEA,KAAK,SAASA,OAAAA;AACd,KAAK,OAAOC,KAAAA;AACZ,KAAK,cAAcC,YAAAA;AACnB,KAAK,SAASC,OAAAA;AACd,KAAK,WAAWC,OAAAA;AAChB,KAAK,QAAQC,MAAAA;;"}

package/dist/components/List/List.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 export type ListProps = React.HTMLAttributes<HTMLDivElement> & {
-    children: JSX.Element | (JSX.Element | boolean | null | undefined)[];
+    children: React.JSX.Element | (React.JSX.Element | boolean | null | undefined)[];
 };
 export declare function List(props: ListProps): React.JSX.Element;
 export declare namespace List {
@@ -11,13 +11,13 @@ export declare namespace List {
         href: string;
     } & React.RefAttributes<HTMLAnchorElement>>;
     var Collapsible: React.ForwardRefExoticComponent<Omit<import("./components/Item").ComposableListItemProps<React.ForwardRefExoticComponent<Omit<import("@base-ui/react").CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>>, "children"> & {
-        children: JSX.Element | JSX.Element[];
+        children: React.JSX.Element | React.JSX.Element[];
         defaultOpen?: boolean;
     } & React.RefAttributes<HTMLDivElement>>;
     var Switch: React.ForwardRefExoticComponent<import("./components/Item").ComposableListItemProps<"div"> & Omit<import("../..").ControlledSwitchProps, "title"> & React.RefAttributes<HTMLDivElement>>;
     var Checkbox: React.ForwardRefExoticComponent<import("./components/Item").ComposableListItemProps<"div"> & import("../..").ControlledCheckboxProps & React.RefAttributes<HTMLDivElement>>;
     var Group: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-        children: JSX.Element | JSX.Element[];
+        children: React.JSX.Element | React.JSX.Element[];
     } & React.RefAttributes<HTMLDivElement>>;
 }
 export type { ListButtonProps } from './components/Button';

package/dist/components/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Collapsible } from './components/Collapsible';\nimport { Checkbox, Switch } from './components/Toggle';\nimport { Button } from './components/Button';\nimport './List.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement> & {\n    /* One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */\n    children: JSX.Element | (JSX.Element | boolean | null | undefined)[];\n};\n\nexport function List(props: ListProps) {\n    return <div {...props} data-taco=\"list\" />;\n}\n\nList.Button = Button;\nList.Link = Link;\nList.Collapsible = Collapsible;\nList.Switch = Switch;\nList.Checkbox = Checkbox;\nList.Group = Group;\n\nexport type { ListButtonProps } from './components/Button';\nexport type { ListLinkProps } from './components/Link';\nexport type { ListCollapsibleProps } from './components/Collapsible';\nexport type { ListGroupProps } from './components/Group';\nexport type { ListSwitchProps, ListCheckboxProps } from './components/Toggle';\n"],"names":["React"],"mappings":";;;;;;;AAaO,SAAS,KAAK,OAAkB;AACnC,SAAQA,+BAAA,cAAA,OAAA,EAAK,GAAG,OAAO,aAAU,QAAO;AAC5C;AAEA,KAAK,SAAS;AACd,KAAK,OAAO;AACZ,KAAK,cAAc;AACnB,KAAK,SAAS;AACd,KAAK,WAAW;AAChB,KAAK,QAAQ;"}
+{"version":3,"file":"List.js","sources":["../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react';\nimport { Group } from './components/Group';\nimport { Link } from './components/Link';\nimport { Collapsible } from './components/Collapsible';\nimport { Checkbox, Switch } from './components/Toggle';\nimport { Button } from './components/Button';\nimport './List.css';\n\nexport type ListProps = React.HTMLAttributes<HTMLDivElement> & {\n    /* One or more of List.Button, List.Link, List.Collapsible, List.Checkbox, List.Switch or List.Group */\n    children: React.JSX.Element | (React.JSX.Element | boolean | null | undefined)[];\n};\n\nexport function List(props: ListProps) {\n    return <div {...props} data-taco=\"list\" />;\n}\n\nList.Button = Button;\nList.Link = Link;\nList.Collapsible = Collapsible;\nList.Switch = Switch;\nList.Checkbox = Checkbox;\nList.Group = Group;\n\nexport type { ListButtonProps } from './components/Button';\nexport type { ListLinkProps } from './components/Link';\nexport type { ListCollapsibleProps } from './components/Collapsible';\nexport type { ListGroupProps } from './components/Group';\nexport type { ListSwitchProps, ListCheckboxProps } from './components/Toggle';\n"],"names":["React"],"mappings":";;;;;;;AAaO,SAAS,KAAK,OAAkB;AACnC,SAAOA,+BAAA,cAAC,OAAA,EAAK,GAAG,OAAO,aAAU,QAAO;AAC5C;AAEA,KAAK,SAAS;AACd,KAAK,OAAO;AACZ,KAAK,cAAc;AACnB,KAAK,SAAS;AACd,KAAK,WAAW;AAChB,KAAK,QAAQ;"}

package/dist/components/List/components/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/List/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\n\nexport type ListButtonProps = Omit<ComposableListItemProps<'button'>, 'onClick'> & {\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ListButtonProps>(function Link(props, ref) {\n    return <Item {...props} as=\"button\" ref={ref} />;\n});\n"],"names":["Item"],"mappings":";;;;AAOO,MAAM,SAAS,MAAM,WAA+C,SAAS,KAAK,OAAO,KAAK;AACjG,6CAAQA,WAAM,EAAA,GAAG,OAAO,IAAG,UAAS,KAAU;AAClD,CAAC;;"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/List/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\n\nexport type ListButtonProps = Omit<ComposableListItemProps<'button'>, 'onClick'> & {\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ListButtonProps>(function Link(props, ref) {\n    return <Item {...props} as=\"button\" ref={ref} />;\n});\n"],"names":["Item"],"mappings":";;;;AAOO,MAAM,SAAS,MAAM,WAA+C,SAAS,KAAK,OAAO,KAAK;AACjG,6CAAQA,WAAA,EAAM,GAAG,OAAO,IAAG,UAAS,KAAU;AAClD,CAAC;;"}

package/dist/components/List/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/List/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\n\nexport type ListButtonProps = Omit<ComposableListItemProps<'button'>, 'onClick'> & {\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ListButtonProps>(function Link(props, ref) {\n    return <Item {...props} as=\"button\" ref={ref} />;\n});\n"],"names":["React"],"mappings":";;AAOO,MAAM,SAASA,eAAM,WAA+C,SAAS,KAAK,OAAO,KAAK;AACjG,sDAAQ,MAAM,EAAA,GAAG,OAAO,IAAG,UAAS,KAAU;AAClD,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/List/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\n\nexport type ListButtonProps = Omit<ComposableListItemProps<'button'>, 'onClick'> & {\n    onClick: React.MouseEventHandler<HTMLButtonElement>;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ListButtonProps>(function Link(props, ref) {\n    return <Item {...props} as=\"button\" ref={ref} />;\n});\n"],"names":["React"],"mappings":";;AAOO,MAAM,SAASA,eAAM,WAA+C,SAAS,KAAK,OAAO,KAAK;AACjG,sDAAQ,MAAA,EAAM,GAAG,OAAO,IAAG,UAAS,KAAU;AAClD,CAAC;"}

package/dist/components/List/components/Collapsible.cjs

@@ -8,7 +8,12 @@ const Collapsible = React.forwardRef(function Accordion(props, ref) {
   const { defaultOpen = false, ...attributes } = props;
   const [open, setOpen] = React.useState(defaultOpen);
   const control = /* @__PURE__ */ React.createElement(Icon.Icon, { name: open ? "chevron-up" : "chevron-down" });
-  return /* @__PURE__ */ React.createElement(collapsible.Collapsible.Root, { "data-taco": "list-item-collapsible", disabled: props.disabled, open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(collapsible.Collapsible.Trigger, { render: /* @__PURE__ */ React.createElement(Item.Item, { ...attributes, as: "button", control, ref }) }), /* @__PURE__ */ React.createElement(collapsible.Collapsible.Panel, null, props.children));
+  return /* @__PURE__ */ React.createElement(collapsible.Collapsible.Root, { "data-taco": "list-item-collapsible", disabled: props.disabled, open, onOpenChange: setOpen }, /* @__PURE__ */ React.createElement(
+    collapsible.Collapsible.Trigger,
+    {
+      render: /* @__PURE__ */ React.createElement(Item.Item, { ...attributes, as: "button", control, ref })
+    }
+  ), /* @__PURE__ */ React.createElement(collapsible.Collapsible.Panel, null, props.children));
 });
 exports.Collapsible = Collapsible;
 //# sourceMappingURL=Collapsible.cjs.map

package/dist/components/List/components/Collapsible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.cjs","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: JSX.Element | JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            <CollapsiblePrimitive.Trigger render={<Item {...attributes} as=\"button\" control={control} ref={ref} />} />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["Icon","CollapsiblePrimitive","Item"],"mappings":";;;;;;AAUO,MAAM,cAAc,MAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,WAAe,IAAA;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,WAAW;AAClD,QAAM,UAAW,sBAAA,cAAAA,KAAA,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACK,sBAAA,cAAAC,YAAA,YAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAC7G,GAAA,sBAAA,cAACA,YAAAA,YAAqB,SAArB,EAA6B,QAAQ,sBAAA,cAACC,KAAAA,MAAM,EAAA,GAAG,YAAY,IAAG,UAAS,SAAkB,IAAA,CAAU,EAAI,CAAA,uCACvGD,YAAqB,YAAA,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;;"}
+{"version":3,"file":"Collapsible.cjs","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["Icon","CollapsiblePrimitive","Item"],"mappings":";;;;;;AAUO,MAAM,cAAc,MAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,WAAW;AAClD,QAAM,UAAU,sBAAA,cAACA,KAAAA,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACI,sBAAA,cAACC,YAAAA,YAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7G,sBAAA;AAAA,IAACA,YAAAA,YAAqB;AAAA,IAArB;AAAA,MACG,4CAASC,WAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjH,sBAAA,cAACD,YAAAA,YAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;;"}

package/dist/components/List/components/Collapsible.d.ts

@@ -2,10 +2,10 @@ import { default as React } from 'react';
 import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
 import { ComposableListItemProps } from './Item';
 export type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
     defaultOpen?: boolean;
 };
 export declare const Collapsible: React.ForwardRefExoticComponent<Omit<ComposableListItemProps<React.ForwardRefExoticComponent<Omit<import('@base-ui/react').CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>>, "children"> & {
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
     defaultOpen?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/List/components/Collapsible.js

@@ -6,7 +6,12 @@ const Collapsible = React__default.forwardRef(function Accordion(props, ref) {
   const { defaultOpen = false, ...attributes } = props;
   const [open, setOpen] = React__default.useState(defaultOpen);
   const control = /* @__PURE__ */ React__default.createElement(Icon, { name: open ? "chevron-up" : "chevron-down" });
-  return /* @__PURE__ */ React__default.createElement(Collapsible$1.Root, { "data-taco": "list-item-collapsible", disabled: props.disabled, open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(Collapsible$1.Trigger, { render: /* @__PURE__ */ React__default.createElement(Item, { ...attributes, as: "button", control, ref }) }), /* @__PURE__ */ React__default.createElement(Collapsible$1.Panel, null, props.children));
+  return /* @__PURE__ */ React__default.createElement(Collapsible$1.Root, { "data-taco": "list-item-collapsible", disabled: props.disabled, open, onOpenChange: setOpen }, /* @__PURE__ */ React__default.createElement(
+    Collapsible$1.Trigger,
+    {
+      render: /* @__PURE__ */ React__default.createElement(Item, { ...attributes, as: "button", control, ref })
+    }
+  ), /* @__PURE__ */ React__default.createElement(Collapsible$1.Panel, null, props.children));
 });
 export {
   Collapsible

package/dist/components/List/components/Collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.js","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: JSX.Element | JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            <CollapsiblePrimitive.Trigger render={<Item {...attributes} as=\"button\" control={control} ref={ref} />} />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["React","CollapsiblePrimitive"],"mappings":";;;;AAUO,MAAM,cAAcA,eAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,WAAe,IAAA;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,WAAW;AAClD,QAAM,UAAWA,+BAAA,cAAA,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACKA,+BAAA,cAAAC,cAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAC7G,GAAAD,+BAAA,cAACC,cAAqB,SAArB,EAA6B,QAAQD,+BAAA,cAAC,MAAM,EAAA,GAAG,YAAY,IAAG,UAAS,SAAkB,IAAA,CAAU,EAAI,CAAA,gDACvGC,cAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;"}
+{"version":3,"file":"Collapsible.js","sources":["../../../../src/components/List/components/Collapsible.tsx"],"sourcesContent":["import React from 'react';\nimport { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListCollapsibleProps = Omit<ComposableListItemProps<typeof CollapsiblePrimitive.Root>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n    defaultOpen?: boolean;\n};\n\nexport const Collapsible = React.forwardRef<HTMLDivElement, ListCollapsibleProps>(function Accordion(props, ref) {\n    const { defaultOpen = false, ...attributes } = props;\n    const [open, setOpen] = React.useState(defaultOpen);\n    const control = <Icon name={open ? 'chevron-up' : 'chevron-down'} />;\n\n    return (\n        <CollapsiblePrimitive.Root data-taco=\"list-item-collapsible\" disabled={props.disabled} open={open} onOpenChange={setOpen}>\n            {/* the public type is based on CollapsiblePrimitive.Root, but at runtime the attributes land on this\n                button-rendered Item — narrowing the public type to 'button' is a breaking change deferred to a follow-up PR */}\n            <CollapsiblePrimitive.Trigger\n                render={<Item {...(attributes as ComposableListItemProps<'button'>)} as=\"button\" control={control} ref={ref} />}\n            />\n            <CollapsiblePrimitive.Panel>{props.children}</CollapsiblePrimitive.Panel>\n        </CollapsiblePrimitive.Root>\n    );\n});\n"],"names":["React","CollapsiblePrimitive"],"mappings":";;;;AAUO,MAAM,cAAcA,eAAM,WAAiD,SAAS,UAAU,OAAO,KAAK;AAC7G,QAAM,EAAE,cAAc,OAAO,GAAG,eAAe;AAC/C,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,WAAW;AAClD,QAAM,UAAUA,+BAAA,cAAC,MAAA,EAAK,MAAM,OAAO,eAAe,gBAAgB;AAElE,SACIA,+BAAA,cAACC,cAAqB,MAArB,EAA0B,aAAU,yBAAwB,UAAU,MAAM,UAAU,MAAY,cAAc,QAAA,GAG7GD,+BAAA;AAAA,IAACC,cAAqB;AAAA,IAArB;AAAA,MACG,qDAAS,MAAA,EAAM,GAAI,YAAkD,IAAG,UAAS,SAAkB,IAAA,CAAU;AAAA,IAAA;AAAA,EAAA,GAEjHD,+BAAA,cAACC,cAAqB,OAArB,MAA4B,MAAM,QAAS,CAChD;AAER,CAAC;"}

package/dist/components/List/components/Group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Group.cjs","sources":["../../../../src/components/List/components/Group.tsx"],"sourcesContent":["import React from 'react';\n\nexport type ListGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: JSX.Element | JSX.Element[];\n};\n\nexport const Group = React.forwardRef<HTMLDivElement, ListGroupProps>(function Group(props, ref) {\n    return <div {...props} data-taco=\"list-group\" ref={ref} />;\n});\n"],"names":["Group"],"mappings":";;;AAMO,MAAM,QAAQ,MAAM,WAA2C,SAASA,OAAM,OAAO,KAAK;AAC7F,6CAAQ,OAAK,EAAA,GAAG,OAAO,aAAU,cAAa,KAAU;AAC5D,CAAC;;"}
+{"version":3,"file":"Group.cjs","sources":["../../../../src/components/List/components/Group.tsx"],"sourcesContent":["import React from 'react';\n\nexport type ListGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n};\n\nexport const Group = React.forwardRef<HTMLDivElement, ListGroupProps>(function Group(props, ref) {\n    return <div {...props} data-taco=\"list-group\" ref={ref} />;\n});\n"],"names":["Group"],"mappings":";;;AAMO,MAAM,QAAQ,MAAM,WAA2C,SAASA,OAAM,OAAO,KAAK;AAC7F,6CAAQ,OAAA,EAAK,GAAG,OAAO,aAAU,cAAa,KAAU;AAC5D,CAAC;;"}

package/dist/components/List/components/Group.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export type ListGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
 };
 export declare const Group: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/List/components/Group.js.map

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../../src/components/List/components/Group.tsx"],"sourcesContent":["import React from 'react';\n\nexport type ListGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: JSX.Element | JSX.Element[];\n};\n\nexport const Group = React.forwardRef<HTMLDivElement, ListGroupProps>(function Group(props, ref) {\n    return <div {...props} data-taco=\"list-group\" ref={ref} />;\n});\n"],"names":["React","Group"],"mappings":";AAMO,MAAM,QAAQA,eAAM,WAA2C,SAASC,OAAM,OAAO,KAAK;AAC7F,sDAAQ,OAAK,EAAA,GAAG,OAAO,aAAU,cAAa,KAAU;AAC5D,CAAC;"}
+{"version":3,"file":"Group.js","sources":["../../../../src/components/List/components/Group.tsx"],"sourcesContent":["import React from 'react';\n\nexport type ListGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    children: React.JSX.Element | React.JSX.Element[];\n};\n\nexport const Group = React.forwardRef<HTMLDivElement, ListGroupProps>(function Group(props, ref) {\n    return <div {...props} data-taco=\"list-group\" ref={ref} />;\n});\n"],"names":["React","Group"],"mappings":";AAMO,MAAM,QAAQA,eAAM,WAA2C,SAASC,OAAM,OAAO,KAAK;AAC7F,sDAAQ,OAAA,EAAK,GAAG,OAAO,aAAU,cAAa,KAAU;AAC5D,CAAC;"}

package/dist/components/List/components/Item.cjs

@@ -3,12 +3,23 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("clsx");
 const Icon = require("../../Icon/Icon.cjs");
+const types = require("../../../types.cjs");
 const tailwind = require("../../../utils/tailwind.cjs");
-const Item = React.forwardRef(function Item2(props, ref) {
-  const { as: Tag = "div", control, description, disabled, icon, color, tabIndex = 0, title, ...attributes } = props;
+const Item = types.fixedForwardRef(function Item2(props, ref) {
+  const {
+    as: Tag = "div",
+    color = "transparent",
+    control,
+    description,
+    disabled,
+    icon,
+    tabIndex = 0,
+    title,
+    ...attributes
+  } = props;
   const iconClassName = cn.clsx(
-    "flex shrink-0 h-10 w-10 items-center justify-center rounded border border-black/10",
-    tailwind.getSubtleColorShadeClasses(color ?? "transparent")
+    "flex h-10 w-10 shrink-0 items-center justify-center rounded border border-black/10",
+    tailwind.SUBTLE_COLOR_SHADE_CLASSNAME[color]
   );
   return /* @__PURE__ */ React.createElement(
     Tag,

package/dist/components/List/components/Item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.cjs","sources":["../../../../src/components/List/components/Item.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Color } from '../../../types';\nimport { getSubtleColorShadeClasses } from '../../../utils/tailwind';\n\nexport type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {\n    as?: ElementType;\n    color?: Color;\n    control?: JSX.Element;\n    description?: string | JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    title: string | JSX.Element;\n};\n\nexport type ComposableListItemProps<ElementType extends React.ElementType> = Omit<\n    ListItemProps<ElementType>,\n    'as' | 'control' | 'onChange'\n>;\n\nexport const Item = React.forwardRef<HTMLElement, ListItemProps<React.ElementType>>(function Item(props, ref) {\n    const { as: Tag = 'div', control, description, disabled, icon, color, tabIndex = 0, title, ...attributes } = props;\n    const iconClassName = clsx(\n        'flex shrink-0 h-10 w-10 items-center justify-center rounded border border-black/10',\n        getSubtleColorShadeClasses(color ?? 'transparent')\n    );\n\n    return (\n        <Tag\n            {...attributes}\n            aria-disabled={disabled ? true : undefined}\n            data-taco=\"list-item\"\n            ref={ref as any}\n            tabIndex={disabled ? -1 : tabIndex}>\n            {icon ? (\n                <span className={iconClassName}>\n                    <Icon name={icon} />\n                </span>\n            ) : null}\n            <div className=\"flex grow flex-col justify-center\">\n                <span className=\"font-bold text-black\">{title}</span>\n                {description ? <span className=\"text-gray-700\">{description}</span> : null}\n            </div>\n            <div className=\"flex shrink-0 items-center text-gray-700\">{control}</div>\n        </Tag>\n    );\n});\n"],"names":["Item","clsx","getSubtleColorShadeClasses","Icon"],"mappings":";;;;;;AAqBO,MAAM,OAAO,MAAM,WAA0D,SAASA,MAAK,OAAO,KAAK;AAC1G,QAAM,EAAE,IAAI,MAAM,OAAO,SAAS,aAAa,UAAU,MAAM,OAAO,WAAW,GAAG,OAAO,GAAG,WAAe,IAAA;AAC7G,QAAM,gBAAgBC,GAAA;AAAA,IAClB;AAAA,IACAC,SAAA,2BAA2B,SAAS,aAAa;AAAA,EACrD;AAGI,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,WAAW,OAAO;AAAA,MACjC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,IAAA;AAAA,IACzB,OACI,sBAAA,cAAA,QAAA,EAAK,WAAW,cAAA,uCACZC,KAAK,MAAA,EAAA,MAAM,KAAM,CAAA,CACtB,IACA;AAAA,wCACH,OAAI,EAAA,WAAU,uCACX,sBAAA,cAAC,UAAK,WAAU,0BAAwB,KAAM,GAC7C,cAAe,sBAAA,cAAA,QAAA,EAAK,WAAU,gBAAiB,GAAA,WAAY,IAAU,IAC1E;AAAA,IACC,sBAAA,cAAA,OAAA,EAAI,WAAU,2CAAA,GAA4C,OAAQ;AAAA,EACvE;AAER,CAAC;;"}
+{"version":3,"file":"Item.cjs","sources":["../../../../src/components/List/components/Item.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Color, fixedForwardRef } from '../../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '../../../utils/tailwind';\n\nexport type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {\n    as?: ElementType;\n    color?: Color;\n    control?: React.JSX.Element;\n    description?: string | React.JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    title: string | React.JSX.Element;\n};\n\nexport type ComposableListItemProps<ElementType extends React.ElementType> = Omit<\n    ListItemProps<ElementType>,\n    'as' | 'control' | 'onChange'\n>;\n\nexport const Item = fixedForwardRef(function Item<ElementType extends React.ElementType = 'div'>(\n    props: ListItemProps<ElementType>,\n    ref: React.Ref<HTMLElement>\n) {\n    const {\n        as: Tag = 'div',\n        color = 'transparent',\n        control,\n        description,\n        disabled,\n        icon,\n        tabIndex = 0,\n        title,\n        ...attributes\n    } = props;\n    const iconClassName = clsx(\n        'flex h-10 w-10 shrink-0 items-center justify-center rounded border border-black/10',\n        SUBTLE_COLOR_SHADE_CLASSNAME[color]\n    );\n\n    return (\n        <Tag\n            {...attributes}\n            aria-disabled={disabled ? true : undefined}\n            data-taco=\"list-item\"\n            ref={ref as any}\n            tabIndex={disabled ? -1 : tabIndex}>\n            {icon ? (\n                <span className={iconClassName}>\n                    <Icon name={icon} />\n                </span>\n            ) : null}\n            <div className=\"flex grow flex-col justify-center\">\n                <span className=\"font-bold text-black\">{title}</span>\n                {description ? <span className=\"text-gray-700\">{description}</span> : null}\n            </div>\n            <div className=\"flex shrink-0 items-center text-gray-700\">{control}</div>\n        </Tag>\n    );\n});\n"],"names":["fixedForwardRef","Item","clsx","SUBTLE_COLOR_SHADE_CLASSNAME","Icon"],"mappings":";;;;;;;AAqBO,MAAM,OAAOA,MAAAA,gBAAgB,SAASC,MACzC,OACA,KACF;AACE,QAAM;AAAA,IACF,IAAI,MAAM;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgBC,GAAAA;AAAAA,IAClB;AAAA,IACAC,SAAAA,6BAA6B,KAAK;AAAA,EAAA;AAGtC,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,WAAW,OAAO;AAAA,MACjC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,IAAA;AAAA,IACzB,OACG,sBAAA,cAAC,QAAA,EAAK,WAAW,cAAA,uCACZC,KAAAA,MAAA,EAAK,MAAM,KAAA,CAAM,CACtB,IACA;AAAA,wCACH,OAAA,EAAI,WAAU,uCACX,sBAAA,cAAC,UAAK,WAAU,0BAAwB,KAAM,GAC7C,cAAc,sBAAA,cAAC,QAAA,EAAK,WAAU,gBAAA,GAAiB,WAAY,IAAU,IAC1E;AAAA,IACA,sBAAA,cAAC,OAAA,EAAI,WAAU,2CAAA,GAA4C,OAAQ;AAAA,EAAA;AAG/E,CAAC;;"}

package/dist/components/List/components/Item.d.ts

@@ -4,11 +4,19 @@ import { Color } from '../../../types';
 export type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {
     as?: ElementType;
     color?: Color;
-    control?: JSX.Element;
-    description?: string | JSX.Element;
+    control?: React.JSX.Element;
+    description?: string | React.JSX.Element;
     disabled?: boolean;
     icon?: IconName;
-    title: string | JSX.Element;
+    title: string | React.JSX.Element;
 };
 export type ComposableListItemProps<ElementType extends React.ElementType> = Omit<ListItemProps<ElementType>, 'as' | 'control' | 'onChange'>;
-export declare const Item: React.ForwardRefExoticComponent<Omit<ListItemProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Item: <ElementType extends React.ElementType = "div">(props: Omit<React.PropsWithoutRef<React.ComponentProps<ElementType>>, "title"> & {
+    as?: ElementType | undefined;
+    color?: Color;
+    control?: React.JSX.Element;
+    description?: string | React.JSX.Element;
+    disabled?: boolean;
+    icon?: IconName;
+    title: string | React.JSX.Element;
+} & React.RefAttributes<HTMLElement>) => React.JSX.Element;

package/dist/components/List/components/Item.js

@@ -1,12 +1,23 @@
 import React__default from "react";
 import { clsx } from "clsx";
 import { Icon } from "../../Icon/Icon.js";
-import { getSubtleColorShadeClasses } from "../../../utils/tailwind.js";
-const Item = React__default.forwardRef(function Item2(props, ref) {
-  const { as: Tag = "div", control, description, disabled, icon, color, tabIndex = 0, title, ...attributes } = props;
+import { fixedForwardRef } from "../../../types.js";
+import { SUBTLE_COLOR_SHADE_CLASSNAME } from "../../../utils/tailwind.js";
+const Item = fixedForwardRef(function Item2(props, ref) {
+  const {
+    as: Tag = "div",
+    color = "transparent",
+    control,
+    description,
+    disabled,
+    icon,
+    tabIndex = 0,
+    title,
+    ...attributes
+  } = props;
   const iconClassName = clsx(
-    "flex shrink-0 h-10 w-10 items-center justify-center rounded border border-black/10",
-    getSubtleColorShadeClasses(color ?? "transparent")
+    "flex h-10 w-10 shrink-0 items-center justify-center rounded border border-black/10",
+    SUBTLE_COLOR_SHADE_CLASSNAME[color]
   );
   return /* @__PURE__ */ React__default.createElement(
     Tag,

package/dist/components/List/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../src/components/List/components/Item.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Color } from '../../../types';\nimport { getSubtleColorShadeClasses } from '../../../utils/tailwind';\n\nexport type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {\n    as?: ElementType;\n    color?: Color;\n    control?: JSX.Element;\n    description?: string | JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    title: string | JSX.Element;\n};\n\nexport type ComposableListItemProps<ElementType extends React.ElementType> = Omit<\n    ListItemProps<ElementType>,\n    'as' | 'control' | 'onChange'\n>;\n\nexport const Item = React.forwardRef<HTMLElement, ListItemProps<React.ElementType>>(function Item(props, ref) {\n    const { as: Tag = 'div', control, description, disabled, icon, color, tabIndex = 0, title, ...attributes } = props;\n    const iconClassName = clsx(\n        'flex shrink-0 h-10 w-10 items-center justify-center rounded border border-black/10',\n        getSubtleColorShadeClasses(color ?? 'transparent')\n    );\n\n    return (\n        <Tag\n            {...attributes}\n            aria-disabled={disabled ? true : undefined}\n            data-taco=\"list-item\"\n            ref={ref as any}\n            tabIndex={disabled ? -1 : tabIndex}>\n            {icon ? (\n                <span className={iconClassName}>\n                    <Icon name={icon} />\n                </span>\n            ) : null}\n            <div className=\"flex grow flex-col justify-center\">\n                <span className=\"font-bold text-black\">{title}</span>\n                {description ? <span className=\"text-gray-700\">{description}</span> : null}\n            </div>\n            <div className=\"flex shrink-0 items-center text-gray-700\">{control}</div>\n        </Tag>\n    );\n});\n"],"names":["React","Item"],"mappings":";;;;AAqBO,MAAM,OAAOA,eAAM,WAA0D,SAASC,MAAK,OAAO,KAAK;AAC1G,QAAM,EAAE,IAAI,MAAM,OAAO,SAAS,aAAa,UAAU,MAAM,OAAO,WAAW,GAAG,OAAO,GAAG,WAAe,IAAA;AAC7G,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA,2BAA2B,SAAS,aAAa;AAAA,EACrD;AAGI,SAAAD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,WAAW,OAAO;AAAA,MACjC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,IAAA;AAAA,IACzB,OACIA,+BAAA,cAAA,QAAA,EAAK,WAAW,cAAA,gDACZ,MAAK,EAAA,MAAM,KAAM,CAAA,CACtB,IACA;AAAA,iDACH,OAAI,EAAA,WAAU,uCACXA,+BAAA,cAAC,UAAK,WAAU,0BAAwB,KAAM,GAC7C,cAAeA,+BAAA,cAAA,QAAA,EAAK,WAAU,gBAAiB,GAAA,WAAY,IAAU,IAC1E;AAAA,IACCA,+BAAA,cAAA,OAAA,EAAI,WAAU,2CAAA,GAA4C,OAAQ;AAAA,EACvE;AAER,CAAC;"}
+{"version":3,"file":"Item.js","sources":["../../../../src/components/List/components/Item.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Color, fixedForwardRef } from '../../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '../../../utils/tailwind';\n\nexport type ListItemProps<ElementType extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<ElementType>, 'title'> & {\n    as?: ElementType;\n    color?: Color;\n    control?: React.JSX.Element;\n    description?: string | React.JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    title: string | React.JSX.Element;\n};\n\nexport type ComposableListItemProps<ElementType extends React.ElementType> = Omit<\n    ListItemProps<ElementType>,\n    'as' | 'control' | 'onChange'\n>;\n\nexport const Item = fixedForwardRef(function Item<ElementType extends React.ElementType = 'div'>(\n    props: ListItemProps<ElementType>,\n    ref: React.Ref<HTMLElement>\n) {\n    const {\n        as: Tag = 'div',\n        color = 'transparent',\n        control,\n        description,\n        disabled,\n        icon,\n        tabIndex = 0,\n        title,\n        ...attributes\n    } = props;\n    const iconClassName = clsx(\n        'flex h-10 w-10 shrink-0 items-center justify-center rounded border border-black/10',\n        SUBTLE_COLOR_SHADE_CLASSNAME[color]\n    );\n\n    return (\n        <Tag\n            {...attributes}\n            aria-disabled={disabled ? true : undefined}\n            data-taco=\"list-item\"\n            ref={ref as any}\n            tabIndex={disabled ? -1 : tabIndex}>\n            {icon ? (\n                <span className={iconClassName}>\n                    <Icon name={icon} />\n                </span>\n            ) : null}\n            <div className=\"flex grow flex-col justify-center\">\n                <span className=\"font-bold text-black\">{title}</span>\n                {description ? <span className=\"text-gray-700\">{description}</span> : null}\n            </div>\n            <div className=\"flex shrink-0 items-center text-gray-700\">{control}</div>\n        </Tag>\n    );\n});\n"],"names":["Item","React"],"mappings":";;;;;AAqBO,MAAM,OAAO,gBAAgB,SAASA,MACzC,OACA,KACF;AACE,QAAM;AAAA,IACF,IAAI,MAAM;AAAA,IACV,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,gBAAgB;AAAA,IAClB;AAAA,IACA,6BAA6B,KAAK;AAAA,EAAA;AAGtC,SACIC,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,WAAW,OAAO;AAAA,MACjC,aAAU;AAAA,MACV;AAAA,MACA,UAAU,WAAW,KAAK;AAAA,IAAA;AAAA,IACzB,OACGA,+BAAA,cAAC,QAAA,EAAK,WAAW,cAAA,gDACZ,MAAA,EAAK,MAAM,KAAA,CAAM,CACtB,IACA;AAAA,iDACH,OAAA,EAAI,WAAU,uCACXA,+BAAA,cAAC,UAAK,WAAU,0BAAwB,KAAM,GAC7C,cAAcA,+BAAA,cAAC,QAAA,EAAK,WAAU,gBAAA,GAAiB,WAAY,IAAU,IAC1E;AAAA,IACAA,+BAAA,cAAC,OAAA,EAAI,WAAU,2CAAA,GAA4C,OAAQ;AAAA,EAAA;AAG/E,CAAC;"}

package/dist/components/List/components/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListLinkProps = ComposableListItemProps<'a'> & {\n    href: string;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, ListLinkProps>(function Link(props, ref) {\n    const isExternal = props.href.startsWith('http');\n    const control = <Icon name={isExternal ? 'link-external' : 'chevron-right'} />;\n\n    if (isExternal) {\n        return <Item {...props} as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" control={control} ref={ref} />;\n    }\n\n    return <Item {...props} as=\"a\" control={control} ref={ref} />;\n});\n"],"names":["Link","Icon","Item"],"mappings":";;;;;AAQO,MAAM,OAAO,MAAM,WAA6C,SAASA,MAAK,OAAO,KAAK;AAC7F,QAAM,aAAa,MAAM,KAAK,WAAW,MAAM;AAC/C,QAAM,UAAW,sBAAA,cAAAC,KAAA,MAAA,EAAK,MAAM,aAAa,kBAAkB,iBAAiB;AAE5E,MAAI,YAAY;AACL,WAAA,sBAAA,cAACC,KAAM,MAAA,EAAA,GAAG,OAAO,IAAG,KAAI,QAAO,UAAS,KAAI,uBAAsB,SAAkB,IAAU,CAAA;AAAA,EAAA;AAGzG,6CAAQA,KAAAA,MAAM,EAAA,GAAG,OAAO,IAAG,KAAI,SAAkB,KAAU;AAC/D,CAAC;;"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListLinkProps = ComposableListItemProps<'a'> & {\n    href: string;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, ListLinkProps>(function Link(props, ref) {\n    const isExternal = props.href.startsWith('http');\n    const control = <Icon name={isExternal ? 'link-external' : 'chevron-right'} />;\n\n    if (isExternal) {\n        return <Item {...props} as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" control={control} ref={ref} />;\n    }\n\n    return <Item {...props} as=\"a\" control={control} ref={ref} />;\n});\n"],"names":["Link","Icon","Item"],"mappings":";;;;;AAQO,MAAM,OAAO,MAAM,WAA6C,SAASA,MAAK,OAAO,KAAK;AAC7F,QAAM,aAAa,MAAM,KAAK,WAAW,MAAM;AAC/C,QAAM,UAAU,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAM,aAAa,kBAAkB,iBAAiB;AAE5E,MAAI,YAAY;AACZ,WAAO,sBAAA,cAACC,KAAAA,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,QAAO,UAAS,KAAI,uBAAsB,SAAkB,IAAA,CAAU;AAAA,EACzG;AAEA,6CAAQA,KAAAA,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,SAAkB,KAAU;AAC/D,CAAC;;"}

package/dist/components/List/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListLinkProps = ComposableListItemProps<'a'> & {\n    href: string;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, ListLinkProps>(function Link(props, ref) {\n    const isExternal = props.href.startsWith('http');\n    const control = <Icon name={isExternal ? 'link-external' : 'chevron-right'} />;\n\n    if (isExternal) {\n        return <Item {...props} as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" control={control} ref={ref} />;\n    }\n\n    return <Item {...props} as=\"a\" control={control} ref={ref} />;\n});\n"],"names":["React","Link"],"mappings":";;;AAQO,MAAM,OAAOA,eAAM,WAA6C,SAASC,MAAK,OAAO,KAAK;AAC7F,QAAM,aAAa,MAAM,KAAK,WAAW,MAAM;AAC/C,QAAM,UAAWD,+BAAA,cAAA,MAAA,EAAK,MAAM,aAAa,kBAAkB,iBAAiB;AAE5E,MAAI,YAAY;AACL,WAAAA,+BAAA,cAAC,MAAM,EAAA,GAAG,OAAO,IAAG,KAAI,QAAO,UAAS,KAAI,uBAAsB,SAAkB,IAAU,CAAA;AAAA,EAAA;AAGzG,sDAAQ,MAAM,EAAA,GAAG,OAAO,IAAG,KAAI,SAAkB,KAAU;AAC/D,CAAC;"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/List/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport { Item, ComposableListItemProps } from './Item';\nimport { Icon } from '../../Icon/Icon';\n\nexport type ListLinkProps = ComposableListItemProps<'a'> & {\n    href: string;\n};\n\nexport const Link = React.forwardRef<HTMLAnchorElement, ListLinkProps>(function Link(props, ref) {\n    const isExternal = props.href.startsWith('http');\n    const control = <Icon name={isExternal ? 'link-external' : 'chevron-right'} />;\n\n    if (isExternal) {\n        return <Item {...props} as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" control={control} ref={ref} />;\n    }\n\n    return <Item {...props} as=\"a\" control={control} ref={ref} />;\n});\n"],"names":["React","Link"],"mappings":";;;AAQO,MAAM,OAAOA,eAAM,WAA6C,SAASC,MAAK,OAAO,KAAK;AAC7F,QAAM,aAAa,MAAM,KAAK,WAAW,MAAM;AAC/C,QAAM,UAAUD,+BAAA,cAAC,MAAA,EAAK,MAAM,aAAa,kBAAkB,iBAAiB;AAE5E,MAAI,YAAY;AACZ,WAAOA,+BAAA,cAAC,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,QAAO,UAAS,KAAI,uBAAsB,SAAkB,IAAA,CAAU;AAAA,EACzG;AAEA,sDAAQ,MAAA,EAAM,GAAG,OAAO,IAAG,KAAI,SAAkB,KAAU;AAC/D,CAAC;"}

package/dist/components/List/components/Toggle.cjs

@@ -9,27 +9,25 @@ const Item = require("./Item.cjs");
 const ToggleItem = React.forwardRef(function Toggle(props, ref) {
   const { controlRef, onToggle, ...attributes } = props;
   function handleClick(event) {
-    var _a;
     if (typeof props.onClick === "function") {
       props.onClick(event);
     }
     if (event.isDefaultPrevented()) {
       return;
     }
-    if (event.target !== controlRef.current && !((_a = controlRef.current) == null ? void 0 : _a.contains(event.target))) {
+    if (event.target !== controlRef.current && !controlRef.current?.contains(event.target)) {
       onToggle();
       return;
     }
   }
   function handleKeyDown(event) {
-    var _a;
     if (typeof props.onKeyDown === "function") {
       props.onKeyDown(event);
     }
     if (event.isDefaultPrevented()) {
       return;
     }
-    if ((event.key === "Enter" || event.key === " ") && event.target !== controlRef.current && !((_a = controlRef.current) == null ? void 0 : _a.contains(event.target))) {
+    if ((event.key === "Enter" || event.key === " ") && event.target !== controlRef.current && !controlRef.current?.contains(event.target)) {
       onToggle();
       return;
     }

package/dist/components/List/components/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { useControlled } from '../../../hooks/useControlled';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement> | React.RefObject<HTMLButtonElement>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["Item","Switch","useControlled","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;;;AAaA,MAAM,aAAa,MAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,WAAe,IAAA;AAEhD,WAAS,YAAY,OAAyC;;AACtD,QAAA,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IAAA;AAGnB,QAAA,MAAM,sBAAsB;AAC5B;AAAA,IAAA;AAIA,QAAA,MAAM,WAAW,WAAW,WAAW,GAAC,gBAAW,YAAX,mBAAoB,SAAS,MAAM,UAAwB;AAC1F,eAAA;AACT;AAAA,IAAA;AAAA,EACJ;AAGJ,WAAS,cAAc,OAA4C;;AAC3D,QAAA,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IAAA;AAGrB,QAAA,MAAM,sBAAsB;AAC5B;AAAA,IAAA;AAIJ,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,GAAC,gBAAW,YAAX,mBAAoB,SAAS,MAAM,UACtC;AACW,eAAA;AACT;AAAA,IAAA;AAAA,EACJ;AAGJ,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AAC7C,SAAA,sBAAA,cAACA,aAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAU,CAAA;AACjH,CAAC;AAIM,MAAM,SAAS,MAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,WAAe,IAAA;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAEK,QAAA,YAAY,MAAM,OAAyB,IAAI;AAE/C,QAAA,SAAS,MAAM,YAAY,MAAM;AACxB,eAAA,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAAA,GAC/C,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EACd;AAGG,SAAA,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAQ,CAAA;AAC5G,CAAC;AAIM,MAAM,WAAW,MAAM,WAA8C,SAASF,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,WAAe,IAAA;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAEK,QAAA,cAAc,MAAM,OAAyB,IAAI;AAEjD,QAAA,SAAS,MAAM,YAAY,MAAM;AACxB,eAAA,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAAA,GAC/C,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACE,WAAA;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EACd;AAGG,SAAA,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAQ,CAAA;AAC9G,CAAC;;;"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { useControlled } from '../../../hooks/useControlled';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["Item","Switch","useControlled","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;;;AAaA,MAAM,aAAa,MAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAO,sBAAA,cAACA,KAAAA,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAAS,MAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAY,MAAM,OAAyB,IAAI;AAErD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAW,MAAM,WAA8C,SAASF,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAIC,4BAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAc,MAAM,OAAyB,IAAI;AAEvD,QAAM,SAAS,MAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACF,sBAAA;AAAA,IAACE,WAAAA;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAO,sBAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;;;"}

package/dist/components/List/components/Toggle.js

@@ -7,27 +7,25 @@ import { Item } from "./Item.js";
 const ToggleItem = React__default.forwardRef(function Toggle(props, ref) {
   const { controlRef, onToggle, ...attributes } = props;
   function handleClick(event) {
-    var _a;
     if (typeof props.onClick === "function") {
       props.onClick(event);
     }
     if (event.isDefaultPrevented()) {
       return;
     }
-    if (event.target !== controlRef.current && !((_a = controlRef.current) == null ? void 0 : _a.contains(event.target))) {
+    if (event.target !== controlRef.current && !controlRef.current?.contains(event.target)) {
       onToggle();
       return;
     }
   }
   function handleKeyDown(event) {
-    var _a;
     if (typeof props.onKeyDown === "function") {
       props.onKeyDown(event);
     }
     if (event.isDefaultPrevented()) {
       return;
     }
-    if ((event.key === "Enter" || event.key === " ") && event.target !== controlRef.current && !((_a = controlRef.current) == null ? void 0 : _a.contains(event.target))) {
+    if ((event.key === "Enter" || event.key === " ") && event.target !== controlRef.current && !controlRef.current?.contains(event.target)) {
       onToggle();
       return;
     }

package/dist/components/List/components/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { useControlled } from '../../../hooks/useControlled';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement> | React.RefObject<HTMLButtonElement>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["React","Switch","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;AAaA,MAAM,aAAaA,eAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,WAAe,IAAA;AAEhD,WAAS,YAAY,OAAyC;;AACtD,QAAA,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IAAA;AAGnB,QAAA,MAAM,sBAAsB;AAC5B;AAAA,IAAA;AAIA,QAAA,MAAM,WAAW,WAAW,WAAW,GAAC,gBAAW,YAAX,mBAAoB,SAAS,MAAM,UAAwB;AAC1F,eAAA;AACT;AAAA,IAAA;AAAA,EACJ;AAGJ,WAAS,cAAc,OAA4C;;AAC3D,QAAA,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IAAA;AAGrB,QAAA,MAAM,sBAAsB;AAC5B;AAAA,IAAA;AAIJ,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,GAAC,gBAAW,YAAX,mBAAoB,SAAS,MAAM,UACtC;AACW,eAAA;AACT;AAAA,IAAA;AAAA,EACJ;AAGJ,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AAC7C,SAAAA,+BAAA,cAAC,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAU,CAAA;AACjH,CAAC;AAIM,MAAM,SAASA,eAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,WAAe,IAAA;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAEK,QAAA,YAAYD,eAAM,OAAyB,IAAI;AAE/C,QAAA,SAASA,eAAM,YAAY,MAAM;AACxB,eAAA,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAAA,GAC/C,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACE;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EACd;AAGG,SAAAF,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAQ,CAAA;AAC5G,CAAC;AAIM,MAAM,WAAWA,eAAM,WAA8C,SAASC,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,WAAe,IAAA;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAEK,QAAA,cAAcD,eAAM,OAAyB,IAAI;AAEjD,QAAA,SAASA,eAAM,YAAY,MAAM;AACxB,eAAA,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAAA,GAC/C,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACG;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EACd;AAGG,SAAAH,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAQ,CAAA;AAC9G,CAAC;"}
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/List/components/Toggle.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { ControlledSwitchProps, Switch as TacoSwitch } from '../../Switch/Switch';\nimport { ControlledCheckboxProps, Checkbox as TacoCheckbox } from '../../Checkbox/Checkbox';\nimport { useControlled } from '../../../hooks/useControlled';\nimport { Item, ComposableListItemProps } from './Item';\n\ntype ToggleProps = ComposableListItemProps<'div'> & {\n    control: React.JSX.Element;\n    controlRef: React.RefObject<HTMLInputElement | null> | React.RefObject<HTMLButtonElement | null>;\n    onToggle: () => void;\n};\n\nconst ToggleItem = React.forwardRef<HTMLDivElement, ToggleProps>(function Toggle(props, ref) {\n    const { controlRef, onToggle, ...attributes } = props;\n\n    function handleClick(event: React.MouseEvent<HTMLDivElement>) {\n        if (typeof props.onClick === 'function') {\n            props.onClick(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then trigger click of the control\n        if (event.target !== controlRef.current && !controlRef.current?.contains(event.target as HTMLElement)) {\n            onToggle();\n            return;\n        }\n    }\n\n    function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n        if (typeof props.onKeyDown === 'function') {\n            props.onKeyDown(event);\n        }\n\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n\n        // If event target is not a control and not an element inside the control, then send appropriate \"activate\" keyboard shortcuts to the control as a click\n        if (\n            (event.key === 'Enter' || event.key === ' ') &&\n            event.target !== controlRef.current &&\n            !controlRef.current?.contains(event.target as HTMLElement)\n        ) {\n            onToggle();\n            return;\n        }\n    }\n\n    const className = cn('group/toggle', props.className);\n    return <Item {...attributes} className={className} onClick={handleClick} onKeyDown={handleKeyDown} ref={ref} />;\n});\n\nexport type ListSwitchProps = ComposableListItemProps<'div'> & Omit<ControlledSwitchProps, 'title'>;\n\nexport const Switch = React.forwardRef<HTMLDivElement, ListSwitchProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const switchRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoSwitch\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:bg-gray-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={switchRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={switchRef} ref={ref} onToggle={toggle} />;\n});\n\nexport type ListCheckboxProps = ComposableListItemProps<'div'> & ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, ListCheckboxProps>(function Switch(props, ref) {\n    const { checked: externalChecked, onChange, ...attributes } = props;\n    const [checked, setChecked] = useControlled<boolean>({\n        value: externalChecked,\n        onChange,\n    });\n\n    const checkboxRef = React.useRef<HTMLInputElement>(null);\n\n    const toggle = React.useCallback(() => {\n        setChecked(previousChecked => !previousChecked);\n    }, [setChecked]);\n\n    const control = (\n        <TacoCheckbox\n            checked={checked}\n            className=\"group-hover/toggle:[&[aria-checked=false]]:border-gray-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700\"\n            disabled={props.disabled}\n            onChange={toggle}\n            ref={checkboxRef}\n            tabIndex={-1}\n        />\n    );\n\n    return <ToggleItem {...attributes} control={control} controlRef={checkboxRef} ref={ref} onToggle={toggle} />;\n});\n"],"names":["React","Switch","TacoSwitch","TacoCheckbox"],"mappings":";;;;;;AAaA,MAAM,aAAaA,eAAM,WAAwC,SAAS,OAAO,OAAO,KAAK;AACzF,QAAM,EAAE,YAAY,UAAU,GAAG,eAAe;AAEhD,WAAS,YAAY,OAAyC;AAC1D,QAAI,OAAO,MAAM,YAAY,YAAY;AACrC,YAAM,QAAQ,KAAK;AAAA,IACvB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,QAAI,MAAM,WAAW,WAAW,WAAW,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAAG;AACnG,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,WAAS,cAAc,OAA4C;AAC/D,QAAI,OAAO,MAAM,cAAc,YAAY;AACvC,YAAM,UAAU,KAAK;AAAA,IACzB;AAEA,QAAI,MAAM,sBAAsB;AAC5B;AAAA,IACJ;AAGA,SACK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,MAAM,WAAW,WAAW,WAC5B,CAAC,WAAW,SAAS,SAAS,MAAM,MAAqB,GAC3D;AACE,eAAA;AACA;AAAA,IACJ;AAAA,EACJ;AAEA,QAAM,YAAY,GAAG,gBAAgB,MAAM,SAAS;AACpD,SAAOA,+BAAA,cAAC,QAAM,GAAG,YAAY,WAAsB,SAAS,aAAa,WAAW,eAAe,IAAA,CAAU;AACjH,CAAC;AAIM,MAAM,SAASA,eAAM,WAA4C,SAASC,QAAO,OAAO,KAAK;AAChG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,YAAYD,eAAM,OAAyB,IAAI;AAErD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACE;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOF,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,WAAW,KAAU,UAAU,OAAA,CAAQ;AAC5G,CAAC;AAIM,MAAM,WAAWA,eAAM,WAA8C,SAASC,QAAO,OAAO,KAAK;AACpG,QAAM,EAAE,SAAS,iBAAiB,UAAU,GAAG,eAAe;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,cAAuB;AAAA,IACjD,OAAO;AAAA,IACP;AAAA,EAAA,CACH;AAED,QAAM,cAAcD,eAAM,OAAyB,IAAI;AAEvD,QAAM,SAASA,eAAM,YAAY,MAAM;AACnC,eAAW,CAAA,oBAAmB,CAAC,eAAe;AAAA,EAClD,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,UACFA,+BAAA;AAAA,IAACG;AAAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAU;AAAA,MACV,UAAU,MAAM;AAAA,MAChB,UAAU;AAAA,MACV,KAAK;AAAA,MACL,UAAU;AAAA,IAAA;AAAA,EAAA;AAIlB,SAAOH,+BAAA,cAAC,cAAY,GAAG,YAAY,SAAkB,YAAY,aAAa,KAAU,UAAU,OAAA,CAAQ;AAC9G,CAAC;"}

package/dist/components/Listbox/Listbox.cjs

@@ -25,7 +25,7 @@ const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const Listbox = React__namespace.forwardRef(function Listbox2(props, ref) {
   const { className: externalClassName, ...otherProps } = props;
   const { list, input } = useListbox.useListbox(otherProps, ref);
-  const className = cn("bg-white inline-flex relative w-full", externalClassName);
+  const className = cn("relative inline-flex w-full bg-white", externalClassName);
   return /* @__PURE__ */ React__namespace.createElement("span", { "data-taco": "listbox", className }, /* @__PURE__ */ React__namespace.createElement(
     ScrollableList.ScrollableList,
     {
@@ -41,7 +41,7 @@ const Listbox = React__namespace.forwardRef(function Listbox2(props, ref) {
 const MultiListbox = React__namespace.forwardRef(function Listbox3(props, ref) {
   const { className: externalClassName, ...otherProps } = props;
   const { list, input } = useMultiListbox.useMultiListbox(otherProps, ref);
-  const className = cn("bg-white inline-flex relative w-full", externalClassName);
+  const className = cn("relative inline-flex w-full bg-white", externalClassName);
   return /* @__PURE__ */ React__namespace.createElement("span", { "data-taco": "listbox", className }, /* @__PURE__ */ React__namespace.createElement(
     ScrollableList.ScrollableList,
     {

package/dist/components/Listbox/Listbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.cjs","sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('bg-white inline-flex relative w-full', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["React","Listbox","useListbox","ScrollableList","useMultiListbox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuDO,MAAM,UAAUA,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAAkC;AAC5G,QAAM,EAAE,WAAW,mBAAmB,GAAG,WAAe,IAAA;AACxD,QAAM,EAAE,MAAM,MAAA,IAAUC,WAAAA,WAAW,YAAY,GAAG;AAC5C,QAAA,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACKF,iCAAA,cAAA,QAAA,EAAK,aAAU,WAAU,aACtBA,iCAAA;AAAA,IAACG,eAAA;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QAAE,GAAG,KAAK;AAAA,QAAO,WAAW;AAAA;AAAA,MAAA;AAAA,IAA+D;AAAA,EACtG,kDACC,SAAO,EAAA,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;AAEM,MAAM,eAAeH,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAAkC;AACjH,QAAM,EAAE,WAAW,mBAAmB,GAAG,WAAe,IAAA;AACxD,QAAM,EAAE,MAAM,MAAA,IAAUG,gBAAAA,gBAAgB,YAAY,GAAG;AACjD,QAAA,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACKJ,iCAAA,cAAA,QAAA,EAAK,aAAU,WAAU,aACtBA,iCAAA;AAAA,IAACG,eAAA;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QACH,GAAG,KAAK;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACf;AAAA,EACJ,kDACC,SAAO,EAAA,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;;;"}
+{"version":3,"file":"Listbox.cjs","sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { useListbox } from './useListbox';\nimport { useMultiListbox } from './useMultiListbox';\nimport { ScrollableList, ScrollableListItemValue, ScrollableListItem } from './ScrollableList';\n\nexport type ListboxItem = ScrollableListItem;\nexport type ListboxValue = ScrollableListItemValue;\n\nexport type ListboxTexts = {\n    /**\n     * Text displayed in the listbox if no data provided.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    empty: string;\n    /**\n     * Text displayed in the listbox to indicate the data is loading.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    loading: string;\n    /**\n     * The first option displayed in a multiselect listbox that selects all available options.\n     * Read more about how to provide the text in [Provider](component:provider) component\n     */\n    allOption: string;\n};\n\nexport type ListboxProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onFocus'> &\n    Omit<React.InputHTMLAttributes<HTMLElement>, 'defaultValue' | 'onChange' | 'value'> & {\n        /** Data indicating the options in listbox */\n        data?: ListboxItem[];\n        /**\n         * Initial value of the listbox.\n         * This is used when listbox is mounted, if no value is provided.\n         * *Note* that listbox is a controlled component, setting this will also trigger the `onChange` event\n         */\n        defaultValue?: ListboxValue;\n        /** Set what value should have an empty option in listbox */\n        emptyValue?: ListboxValue;\n        /** Draws attention to the listbox by changing its style and making it visually prominent */\n        highlighted?: boolean;\n        /* Whether the input is in an invalid state */\n        invalid?: boolean;\n        /**\n         * Shows a loading indicator with a text next to it.\n         * Read more about how to provide the text in [Provider](component:provider) component\n         */\n        loading?: boolean;\n        /**\n         * Value of the listbox representing the selected item.\n         * It needs to be an existing value from the provided data\n         */\n        value?: ListboxValue;\n    };\n\nexport const Listbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{ ...list.style, maxHeight: 'calc(12rem + 2px)' /* (6 * option height) + listbox border */ }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n\nexport const MultiListbox = React.forwardRef(function Listbox(props: ListboxProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, ...otherProps } = props;\n    const { list, input } = useMultiListbox(otherProps, ref);\n    const className = cn('relative inline-flex w-full bg-white', externalClassName);\n\n    return (\n        <span data-taco=\"listbox\" className={className}>\n            <ScrollableList\n                {...list}\n                style={{\n                    ...list.style,\n                    maxHeight: 'calc(12rem + 2px + 2px)' /* (6 * option height) + listbox border + ALL_OPTIONS bottom border */,\n                }}\n            />\n            <input {...input} className=\"hidden\" type=\"text\" />\n        </span>\n    );\n});\n"],"names":["React","Listbox","useListbox","ScrollableList","useMultiListbox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuDO,MAAM,UAAUA,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAAkC;AAC5G,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAUC,WAAAA,WAAW,YAAY,GAAG;AAClD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACIF,iCAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtBA,iCAAA;AAAA,IAACG,eAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QAAE,GAAG,KAAK;AAAA,QAAO,WAAW;AAAA;AAAA,MAAA;AAAA,IAA+D;AAAA,EAAA,kDAErG,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;AAEM,MAAM,eAAeH,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAAkC;AACjH,QAAM,EAAE,WAAW,mBAAmB,GAAG,eAAe;AACxD,QAAM,EAAE,MAAM,MAAA,IAAUG,gBAAAA,gBAAgB,YAAY,GAAG;AACvD,QAAM,YAAY,GAAG,wCAAwC,iBAAiB;AAE9E,SACIJ,iCAAA,cAAC,QAAA,EAAK,aAAU,WAAU,aACtBA,iCAAA;AAAA,IAACG,eAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,OAAO;AAAA,QACH,GAAG,KAAK;AAAA,QACR,WAAW;AAAA,MAAA;AAAA,IACf;AAAA,EAAA,kDAEH,SAAA,EAAO,GAAG,OAAO,WAAU,UAAS,MAAK,OAAA,CAAO,CACrD;AAER,CAAC;;;"}

package/dist/components/Listbox/Listbox.js

@@ -6,7 +6,7 @@ import { ScrollableList } from "./ScrollableList.js";
 const Listbox = React.forwardRef(function Listbox2(props, ref) {
   const { className: externalClassName, ...otherProps } = props;
   const { list, input } = useListbox(otherProps, ref);
-  const className = cn("bg-white inline-flex relative w-full", externalClassName);
+  const className = cn("relative inline-flex w-full bg-white", externalClassName);
   return /* @__PURE__ */ React.createElement("span", { "data-taco": "listbox", className }, /* @__PURE__ */ React.createElement(
     ScrollableList,
     {
@@ -22,7 +22,7 @@ const Listbox = React.forwardRef(function Listbox2(props, ref) {
 const MultiListbox = React.forwardRef(function Listbox3(props, ref) {
   const { className: externalClassName, ...otherProps } = props;
   const { list, input } = useMultiListbox(otherProps, ref);
-  const className = cn("bg-white inline-flex relative w-full", externalClassName);
+  const className = cn("relative inline-flex w-full bg-white", externalClassName);
   return /* @__PURE__ */ React.createElement("span", { "data-taco": "listbox", className }, /* @__PURE__ */ React.createElement(
     ScrollableList,
     {