@choco-vanille/ui 1.1.1 → 1.1.2

package/dist/components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/types/index.d.ts

@@ -0,0 +1,18 @@
+import { IconSize } from '../../../../../../../..';
+/**
+ * Common drawer item state derived from the drawer context.
+ */
+export type DrawerItemAttributes = {
+    /** Current animation state based on drawer open/close. */
+    state: 'open' | 'closed';
+    /** Raw open state from the drawer context. */
+    open: boolean;
+    /** Icon size resolved from the row size or explicit override. */
+    resolvedIconSize: IconSize;
+    /** Common data attributes applied to the row element. */
+    itemAttributes: {
+        'data-state': 'open' | 'closed';
+        'data-mode': string;
+        'data-position': string;
+    };
+};

package/dist/components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),u=require("../../constants/index.cjs"),c=require("../useDrawerItemState.hook.cjs"),d=s=>{const{open:t,mode:o,position:r}=c.useDrawerItemState(),a=s??u.DRAWER_ITEM_DEFAULT_ICON_SIZE,e=t?"open":"closed",n=i.useMemo(()=>({"data-state":e,"data-mode":o,"data-position":r}),[e,o,r]);return{state:e,open:t,resolvedIconSize:a,itemAttributes:n}};exports.useDrawerItemAttributes=d;
+//# sourceMappingURL=useDrawerItemAttributes.hook.cjs.map

package/dist/components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerItemAttributes.hook.cjs","sources":["../../../../../../../../../src/components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.ts"],"sourcesContent":["import { useMemo } from 'react'\r\n\r\nimport type { IconSize } from '@components/foundation/icon'\r\nimport { DRAWER_ITEM_DEFAULT_ICON_SIZE } from '@components/overlay/drawer/components/items/_shared/constants'\r\nimport { useDrawerItemState } from '@components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.ts'\r\nimport type {\r\n    DrawerItemAttributes\r\n} from '@components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/types'\r\n\r\n/**\r\n * Returns the common state, resolved icon size and data attributes used by\r\n * every drawer item row.\r\n */\r\nexport const useDrawerItemAttributes = (\r\n    iconSize?: IconSize,\r\n): DrawerItemAttributes => {\r\n    const { open, mode, position } = useDrawerItemState()\r\n    const resolvedIconSize = iconSize ?? DRAWER_ITEM_DEFAULT_ICON_SIZE\r\n    const state: 'open' | 'closed' = open ? 'open' : 'closed'\r\n\r\n    const itemAttributes = useMemo(\r\n        () => ({\r\n            'data-state': state,\r\n            'data-mode': mode,\r\n            'data-position': position,\r\n        }),\r\n        [state, mode, position],\r\n    )\r\n\r\n    return {\r\n        state,\r\n        open,\r\n        resolvedIconSize,\r\n        itemAttributes,\r\n    }\r\n}\r\n"],"names":["useDrawerItemAttributes","iconSize","open","mode","position","useDrawerItemState","resolvedIconSize","DRAWER_ITEM_DEFAULT_ICON_SIZE","state","itemAttributes","useMemo"],"mappings":"4LAaaA,EACTC,GACuB,CACvB,KAAM,CAAE,KAAAC,EAAM,KAAAC,EAAM,SAAAC,CAAA,EAAaC,EAAAA,mBAAA,EAC3BC,EAAmBL,GAAYM,EAAAA,8BAC/BC,EAA2BN,EAAO,OAAS,SAE3CO,EAAiBC,EAAAA,QACnB,KAAO,CACH,aAAcF,EACd,YAAaL,EACb,gBAAiBC,CAAA,GAErB,CAACI,EAAOL,EAAMC,CAAQ,CAAA,EAG1B,MAAO,CACH,MAAAI,EACA,KAAAN,EACA,iBAAAI,EACA,eAAAG,CAAA,CAER"}

package/dist/components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.d.ts

@@ -0,0 +1,7 @@
+import { IconSize } from '../../../../../../../foundation/icon';
+import { DrawerItemAttributes } from './types';
+/**
+ * Returns the common state, resolved icon size and data attributes used by
+ * every drawer item row.
+ */
+export declare const useDrawerItemAttributes: (iconSize?: IconSize) => DrawerItemAttributes;

package/dist/components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.js

@@ -0,0 +1,23 @@
+import { useMemo as i } from "react";
+import { DRAWER_ITEM_DEFAULT_ICON_SIZE as n } from "../../constants/index.js";
+import { useDrawerItemState as p } from "../useDrawerItemState.hook.js";
+const I = (s) => {
+  const { open: e, mode: o, position: r } = p(), m = s ?? n, t = e ? "open" : "closed", a = i(
+    () => ({
+      "data-state": t,
+      "data-mode": o,
+      "data-position": r
+    }),
+    [t, o, r]
+  );
+  return {
+    state: t,
+    open: e,
+    resolvedIconSize: m,
+    itemAttributes: a
+  };
+};
+export {
+  I as useDrawerItemAttributes
+};
+//# sourceMappingURL=useDrawerItemAttributes.hook.js.map

package/dist/components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerItemAttributes.hook.js","sources":["../../../../../../../../../src/components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.ts"],"sourcesContent":["import { useMemo } from 'react'\r\n\r\nimport type { IconSize } from '@components/foundation/icon'\r\nimport { DRAWER_ITEM_DEFAULT_ICON_SIZE } from '@components/overlay/drawer/components/items/_shared/constants'\r\nimport { useDrawerItemState } from '@components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.ts'\r\nimport type {\r\n    DrawerItemAttributes\r\n} from '@components/overlay/drawer/components/items/_shared/hooks/use-drawer-item-attributes/types'\r\n\r\n/**\r\n * Returns the common state, resolved icon size and data attributes used by\r\n * every drawer item row.\r\n */\r\nexport const useDrawerItemAttributes = (\r\n    iconSize?: IconSize,\r\n): DrawerItemAttributes => {\r\n    const { open, mode, position } = useDrawerItemState()\r\n    const resolvedIconSize = iconSize ?? DRAWER_ITEM_DEFAULT_ICON_SIZE\r\n    const state: 'open' | 'closed' = open ? 'open' : 'closed'\r\n\r\n    const itemAttributes = useMemo(\r\n        () => ({\r\n            'data-state': state,\r\n            'data-mode': mode,\r\n            'data-position': position,\r\n        }),\r\n        [state, mode, position],\r\n    )\r\n\r\n    return {\r\n        state,\r\n        open,\r\n        resolvedIconSize,\r\n        itemAttributes,\r\n    }\r\n}\r\n"],"names":["useDrawerItemAttributes","iconSize","open","mode","position","useDrawerItemState","resolvedIconSize","DRAWER_ITEM_DEFAULT_ICON_SIZE","state","itemAttributes","useMemo"],"mappings":";;;AAaO,MAAMA,IAA0B,CACnCC,MACuB;AACvB,QAAM,EAAE,MAAAC,GAAM,MAAAC,GAAM,UAAAC,EAAA,IAAaC,EAAA,GAC3BC,IAAmBL,KAAYM,GAC/BC,IAA2BN,IAAO,SAAS,UAE3CO,IAAiBC;AAAA,IACnB,OAAO;AAAA,MACH,cAAcF;AAAA,MACd,aAAaL;AAAA,MACb,iBAAiBC;AAAA,IAAA;AAAA,IAErB,CAACI,GAAOL,GAAMC,CAAQ;AAAA,EAAA;AAG1B,SAAO;AAAA,IACH,OAAAI;AAAA,IACA,MAAAN;AAAA,IACA,kBAAAI;AAAA,IACA,gBAAAG;AAAA,EAAA;AAER;"}

package/dist/components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=require("../../../../context/Drawer.context.cjs"),r=require("../../../../constants/drawerModes.const.cjs"),o=()=>e.useContext(t.DrawerContext)??{open:!0,onOpenChange:()=>{},mode:r.DRAWER_MODES.portal,position:"left",size:"md"};exports.useDrawerItemState=o;
+//# sourceMappingURL=useDrawerItemState.hook.cjs.map

package/dist/components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerItemState.hook.cjs","sources":["../../../../../../../../src/components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.ts"],"sourcesContent":["import { useContext } from 'react'\r\n\r\nimport {\r\n    DrawerContext,\r\n    type DrawerContextValue,\r\n} from '@components/overlay/drawer/context/Drawer.context.ts'\r\nimport { DRAWER_MODES } from '@components/overlay/drawer/constants'\r\n\r\n/**\r\n * Returns the current drawer state for items rendered inside a `Drawer`.\r\n *\r\n * Falls back to a sensible default when used outside a drawer so the items\r\n * remain usable and testable in isolation.\r\n */\r\nexport const useDrawerItemState = (): DrawerContextValue => {\r\n    const context = useContext(DrawerContext)\r\n\r\n    return (\r\n        context ?? {\r\n            open: true,\r\n            onOpenChange: () => {},\r\n            mode: DRAWER_MODES.portal,\r\n            position: 'left',\r\n            size: 'md',\r\n        }\r\n    )\r\n}\r\n"],"names":["useDrawerItemState","useContext","DrawerContext","DRAWER_MODES"],"mappings":"sNAcaA,EAAqB,IACdC,EAAAA,WAAWC,eAAa,GAGzB,CACP,KAAM,GACN,aAAc,IAAM,CAAC,EACrB,KAAMC,EAAAA,aAAa,OACnB,SAAU,OACV,KAAM,IAAA"}

package/dist/components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.d.ts

@@ -0,0 +1,8 @@
+import { DrawerContextValue } from '../../../../context/Drawer.context.ts';
+/**
+ * Returns the current drawer state for items rendered inside a `Drawer`.
+ *
+ * Falls back to a sensible default when used outside a drawer so the items
+ * remain usable and testable in isolation.
+ */
+export declare const useDrawerItemState: () => DrawerContextValue;

package/dist/components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.js

@@ -0,0 +1,15 @@
+import { useContext as t } from "react";
+import { DrawerContext as e } from "../../../../context/Drawer.context.js";
+import { DRAWER_MODES as o } from "../../../../constants/drawerModes.const.js";
+const i = () => t(e) ?? {
+  open: !0,
+  onOpenChange: () => {
+  },
+  mode: o.portal,
+  position: "left",
+  size: "md"
+};
+export {
+  i as useDrawerItemState
+};
+//# sourceMappingURL=useDrawerItemState.hook.js.map

package/dist/components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerItemState.hook.js","sources":["../../../../../../../../src/components/overlay/drawer/components/items/_shared/hooks/useDrawerItemState.hook.ts"],"sourcesContent":["import { useContext } from 'react'\r\n\r\nimport {\r\n    DrawerContext,\r\n    type DrawerContextValue,\r\n} from '@components/overlay/drawer/context/Drawer.context.ts'\r\nimport { DRAWER_MODES } from '@components/overlay/drawer/constants'\r\n\r\n/**\r\n * Returns the current drawer state for items rendered inside a `Drawer`.\r\n *\r\n * Falls back to a sensible default when used outside a drawer so the items\r\n * remain usable and testable in isolation.\r\n */\r\nexport const useDrawerItemState = (): DrawerContextValue => {\r\n    const context = useContext(DrawerContext)\r\n\r\n    return (\r\n        context ?? {\r\n            open: true,\r\n            onOpenChange: () => {},\r\n            mode: DRAWER_MODES.portal,\r\n            position: 'left',\r\n            size: 'md',\r\n        }\r\n    )\r\n}\r\n"],"names":["useDrawerItemState","useContext","DrawerContext","DRAWER_MODES"],"mappings":";;;AAcO,MAAMA,IAAqB,MACdC,EAAWC,CAAa,KAGzB;AAAA,EACP,MAAM;AAAA,EACN,cAAc,MAAM;AAAA,EAAC;AAAA,EACrB,MAAMC,EAAa;AAAA,EACnB,UAAU;AAAA,EACV,MAAM;AAAA;"}

package/dist/components/overlay/drawer/components/items/_shared/index.d.ts

@@ -0,0 +1,8 @@
+export { DRAWER_ITEM_STYLES } from './styles/DrawerItemShared.css.ts';
+export type { DrawerItemRecipeVariants } from './styles/DrawerItemShared.css.ts';
+export { DRAWER_ITEM_VARIANTS, DRAWER_ITEM_COLORS, DRAWER_ITEM_DEFAULT_ICON_SIZE, } from './constants';
+export { useDrawerItemState } from './hooks/useDrawerItemState.hook.ts';
+export { useDrawerItemAttributes } from './hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.ts';
+export { DrawerItemContent } from './components/drawer-item-content';
+export type { DrawerItemContentProps } from './components/drawer-item-content';
+export type { DrawerItemVariant, DrawerItemColor, } from './types/DrawerItem.types.ts';

package/dist/components/overlay/drawer/components/items/_shared/styles/DrawerItemShared.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                       */;/* empty css                                      */const n=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:n.createRuntimeFn({defaultClassName:"lux2bn1",variantClassNames:{variant:{default:"lux2bn2",outlined:"lux2bn3"},color:{primary:"lux2bn4",secondary:"lux2bn5",tertiary:"lux2bn6",destructive:"lux2bn7",success:"lux2bn8",warning:"lux2bn9",info:"lux2bna"}},defaultVariants:{variant:"default",color:"primary"},compoundVariants:[[{variant:"default",color:"primary"},"lux2bnb"],[{variant:"default",color:"secondary"},"lux2bnc"],[{variant:"default",color:"tertiary"},"lux2bnd"],[{variant:"default",color:"destructive"},"lux2bne"],[{variant:"default",color:"success"},"lux2bnf"],[{variant:"default",color:"warning"},"lux2bng"],[{variant:"default",color:"info"},"lux2bnh"],[{variant:"outlined",color:"primary"},"lux2bni"],[{variant:"outlined",color:"secondary"},"lux2bnj"],[{variant:"outlined",color:"tertiary"},"lux2bnk"],[{variant:"outlined",color:"destructive"},"lux2bnl"],[{variant:"outlined",color:"success"},"lux2bnm"],[{variant:"outlined",color:"warning"},"lux2bnn"],[{variant:"outlined",color:"info"},"lux2bno"]]}),content:"lux2bn0"};exports.DRAWER_ITEM_STYLES=a;
+//# sourceMappingURL=DrawerItemShared.css.cjs.map

package/dist/components/overlay/drawer/components/items/_shared/styles/DrawerItemShared.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerItemShared.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/overlay/drawer/components/items/_shared/styles/DrawerItemShared.css.d.ts

@@ -0,0 +1,36 @@
+import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+declare const drawerItemRecipe: RuntimeFn<{
+    variant: {
+        default: {};
+        outlined: {};
+    };
+    color: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+        destructive: {};
+        success: {};
+        warning: {};
+        info: {};
+    };
+}>;
+export declare const DRAWER_ITEM_STYLES: {
+    recipe: RuntimeFn<{
+        variant: {
+            default: {};
+            outlined: {};
+        };
+        color: {
+            primary: {};
+            secondary: {};
+            tertiary: {};
+            destructive: {};
+            success: {};
+            warning: {};
+            info: {};
+        };
+    }>;
+    content: string;
+};
+export type DrawerItemRecipeVariants = NonNullable<RecipeVariants<typeof drawerItemRecipe>>;
+export {};

package/dist/components/overlay/drawer/components/items/_shared/styles/DrawerItemShared.css.js

@@ -0,0 +1,8 @@
+/* empty css                                                     */
+/* empty css                                    */
+import { createRuntimeFn as n } from "@vanilla-extract/recipes/createRuntimeFn";
+var t = { recipe: n({ defaultClassName: "lux2bn1", variantClassNames: { variant: { default: "lux2bn2", outlined: "lux2bn3" }, color: { primary: "lux2bn4", secondary: "lux2bn5", tertiary: "lux2bn6", destructive: "lux2bn7", success: "lux2bn8", warning: "lux2bn9", info: "lux2bna" } }, defaultVariants: { variant: "default", color: "primary" }, compoundVariants: [[{ variant: "default", color: "primary" }, "lux2bnb"], [{ variant: "default", color: "secondary" }, "lux2bnc"], [{ variant: "default", color: "tertiary" }, "lux2bnd"], [{ variant: "default", color: "destructive" }, "lux2bne"], [{ variant: "default", color: "success" }, "lux2bnf"], [{ variant: "default", color: "warning" }, "lux2bng"], [{ variant: "default", color: "info" }, "lux2bnh"], [{ variant: "outlined", color: "primary" }, "lux2bni"], [{ variant: "outlined", color: "secondary" }, "lux2bnj"], [{ variant: "outlined", color: "tertiary" }, "lux2bnk"], [{ variant: "outlined", color: "destructive" }, "lux2bnl"], [{ variant: "outlined", color: "success" }, "lux2bnm"], [{ variant: "outlined", color: "warning" }, "lux2bnn"], [{ variant: "outlined", color: "info" }, "lux2bno"]] }), content: "lux2bn0" };
+export {
+  t as DRAWER_ITEM_STYLES
+};
+//# sourceMappingURL=DrawerItemShared.css.js.map

package/dist/components/overlay/drawer/components/items/_shared/styles/DrawerItemShared.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerItemShared.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/overlay/drawer/components/items/_shared/styles/variants/default.d.ts

@@ -0,0 +1,201 @@
+/**
+ * Compound variants for the "default" visual variant.
+ * Subtle hover/active states and a solid active state per color intent.
+ */
+export declare const defaultCompoundVariants: readonly [{
+    readonly variants: {
+        readonly variant: "default";
+        readonly color: "primary";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: "transparent";
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "default";
+        readonly color: "secondary";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: "transparent";
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "default";
+        readonly color: "tertiary";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: "transparent";
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "default";
+        readonly color: "destructive";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: "transparent";
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "default";
+        readonly color: "success";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: "transparent";
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "default";
+        readonly color: "warning";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: "transparent";
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "default";
+        readonly color: "info";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: "transparent";
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}];

package/dist/components/overlay/drawer/components/items/_shared/styles/variants/outlined.d.ts

@@ -0,0 +1,187 @@
+/**
+ * Compound variants for the "outlined" visual variant.
+ * Neutral active state with a color-tinted hover/active state.
+ */
+export declare const outlinedCompoundVariants: readonly [{
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "primary";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "secondary";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "tertiary";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "destructive";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "success";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "warning";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}, {
+    readonly variants: {
+        readonly variant: "outlined";
+        readonly color: "info";
+    };
+    readonly style: {
+        readonly selectors: {
+            readonly '&:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]': {
+                readonly backgroundColor: `var(--${string})`;
+                readonly color: `var(--${string})`;
+                readonly borderColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:hover': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+            readonly '&[data-active="true"]:active': {
+                readonly backgroundColor: `var(--${string})`;
+            };
+        };
+    };
+}];

package/dist/components/overlay/drawer/components/items/_shared/types/DrawerItem.types.d.ts

@@ -0,0 +1,5 @@
+import { DRAWER_ITEM_COLORS, DRAWER_ITEM_VARIANTS } from '../constants';
+/** Available visual variants for drawer item rows. */
+export type DrawerItemVariant = (typeof DRAWER_ITEM_VARIANTS)[keyof typeof DRAWER_ITEM_VARIANTS];
+/** Available color intents for drawer item rows. */
+export type DrawerItemColor = (typeof DRAWER_ITEM_COLORS)[keyof typeof DRAWER_ITEM_COLORS];

package/dist/components/overlay/drawer/components/items/drawer-action-item/DrawerActionItem.cjs

@@ -0,0 +1,2 @@
+"use strict";const r=require("react/jsx-runtime"),I=require("react"),w=require("../_shared/styles/DrawerItemShared.css.cjs");require("../../../context/Drawer.context.cjs");const A=require("../_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.cjs"),b=require("../_shared/components/drawer-item-content/DrawerItemContent.cjs"),h=require("../../../../../../utils/cn.cjs");require("../../../../../theme-provider/ThemeProvider.cjs");require("../../../../../theme-provider/ThemeProvider.context.cjs");require("../../../../../data-display/avatar/Avatar.cjs");require("../../../../../data-display/avatar/components/avatar-root/styles/AvatarRoot.css.cjs");require("../../../../../data-display/avatar/components/avatar-image/styles/AvatarImage.css.cjs");require("../../../../../data-display/avatar/components/avatar-fallback/styles/AvatarFallback.css.cjs");require("../../../../../data-display/avatar/components/avatar-status/styles/AvatarStatus.css.cjs");require("../../../../../data-display/avatar-group/AvatarGroup.cjs");require("../../../../../data-display/badge/Badge.cjs");require("../../../../../data-display/badge/styles/Badge.css.cjs");require("../../../../../data-display/table/Table.cjs");require("../../../../../data-display/table/styles/Table.css.cjs");;/* empty css                                                    */;/* empty css                                                                                                */;/* empty css                                                                                            */;/* empty css                                                                                                */require("../../../../../data-display/table/components/table-row/styles/TableRow.css.cjs");require("../../../../../data-display/table/components/table-head/styles/TableHead.css.cjs");require("../../../../../data-display/table/components/table-cell/styles/TableCell.css.cjs");;/* empty css                                                                                                  */require("../../../../../actions/button/Button.cjs");require("../../../../../actions/button/styles/Button.css.cjs");require("../../../../../actions/icon-button/IconButton.cjs");require("../../../../../actions/icon-button/styles/IconButton.css.cjs");require("../../../../../actions/toggle-button/ToggleButton.cjs");require("../../../../../actions/toggle-button/styles/ToggleButton.css.cjs");require("../../../../../actions/toggle-icon-button/ToggleIconButton.cjs");require("../../../../../actions/toggle-icon-button/styles/ToggleIconButton.css.cjs");require("../../../../../actions/toggle-button-group/ToggleButtonGroup.cjs");require("../../../../../actions/toggle-button-group/styles/ToggleButtonGroup.css.cjs");require("../../../../../actions/toggle-button-group/components/toggle-button-group-item/styles/ToggleButtonGroupItem.css.cjs");require("../../../../../actions/toggle-button-group/components/toggle-button-group-icon-item/styles/ToggleButtonGroupIconItem.css.cjs");require("../../../../../foundation/icon/Icon.cjs");require("../../../../../foundation/icon/styles/Icon.css.cjs");require("../../../../../foundation/typography/Typography.cjs");require("../../../../../foundation/typography/styles/Typography.css.cjs");require("../../../../../forms/autocomplete/Autocomplete.cjs");require("../../../../../forms/autocomplete/components/autocomplete-input/AutocompleteInput.cjs");require("../../../../../forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.cjs");require("../../../../../forms/autocomplete/components/autocomplete-trigger/AutocompleteTrigger.cjs");;/* empty css                                                                                                                */require("../../../../../forms/autocomplete/components/autocomplete-input-group/AutocompleteInputGroup.cjs");require("../../../../../forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.cjs");require("../../../../../forms/autocomplete/components/autocomplete-clear/AutocompleteClear.cjs");require("../../../../../forms/autocomplete/components/autocomplete-content/AutocompleteContent.cjs");;/* empty css                                                                      */;/* empty css                                                                       */;/* empty css                                                                               */;/* empty css                                                                            */;/* empty css                                                                             */;/* empty css                                                                          */;/* empty css                                                                           */;/* empty css                                                                             */;/* empty css                                                                              */;/* empty css                                                                            */;/* empty css                                                                             */;/* empty css                                                                             */;/* empty css                                                                                                                */require("../../../../../forms/autocomplete/components/autocomplete-list/AutocompleteList.cjs");require("../../../../../forms/autocomplete/components/autocomplete-group/AutocompleteGroup.cjs");require("../../../../../forms/autocomplete/components/autocomplete-label/AutocompleteLabel.cjs");require("../../../../../forms/autocomplete/components/autocomplete-item/AutocompleteItem.cjs");;/* empty css                                                                                                          */require("../../../../../forms/autocomplete/components/autocomplete-empty/AutocompleteEmpty.cjs");require("../../../../../forms/autocomplete/components/autocomplete-separator/AutocompleteSeparator.cjs");;/* empty css                                                                                                                    */require("../../../../../forms/autocomplete/components/autocomplete-status/AutocompleteStatus.cjs");require("../../../../../forms/autocomplete/components/autocomplete-collection/AutocompleteCollection.cjs");require("../../../../../forms/autocomplete/components/autocomplete-field/AutocompleteField.cjs");;/* empty css                                                                         */require("../../../../../forms/calendar/Calendar.cjs");;/* empty css                                                                     */;/* empty css                                                                                                    */;/* empty css                                                                     */;/* empty css                                                                          */;/* empty css                                                                                                         */;/* empty css                                                                                                       */require("../../../../../forms/checkbox/Checkbox.cjs");;/* empty css                                                                 */require("../../../../../forms/date-picker/DatePicker.cjs");;/* empty css                                                                      */require("../../../../../forms/radio-group/RadioGroup.cjs");;/* empty css                                                                                           */require("../../../../../forms/select/Select.cjs");require("../../../../../forms/select/components/select-trigger/SelectTrigger.cjs");require("../../../../../forms/select/components/select-trigger/styles/SelectTrigger.css.cjs");require("../../../../../forms/select/components/select-content/SelectContent.cjs");;/* empty css                                                                                              */require("../../../../../forms/select/components/select-list/SelectList.cjs");require("../../../../../forms/select/components/select-group/SelectGroup.cjs");require("../../../../../forms/select/components/select-label/SelectLabel.cjs");;/* empty css                                                                                          */require("../../../../../forms/select/components/select-item/SelectItem.cjs");;/* empty css                                                                                        */require("../../../../../forms/select/components/select-separator/SelectSeparator.cjs");;/* empty css                                                                                                  */require("../../../../../forms/select/components/select-field/SelectField.cjs");;/* empty css                                                             */require("../../../../../forms/switch/Switch.cjs");require("../../../../../forms/switch/styles/Switch.css.cjs");require("../../../../../forms/text-area/TextArea.cjs");require("../../../../../forms/text-area/styles/TextArea.css.cjs");;/* empty css                                                        */;/* empty css                                                                                                  */;/* empty css                                                                                                           */;/* empty css                                                                                                           */require("../../../../../forms/text-field/TextField.cjs");require("../../../../../forms/text-field/styles/TextField.css.cjs");;/* empty css                                                                                                     */;/* empty css                                                                                                              */;/* empty css                                                                                                              */;/* empty css                                                                      */;/* empty css                                                                   */require("../../../../../forms/_shared/components/helper-text/HelperText.cjs");require("../../../../../layout/box/Box.cjs");require("../../../../../layout/box/styles/Box.css.cjs");require("../../../../../layout/flex/Flex.cjs");require("../../../../../layout/flex/styles/Flex.css.cjs");require("../../../../../layout/grid/Grid.cjs");require("../../../../../layout/grid/styles/Grid.css.cjs");require("../../../../../layout/image/Image.cjs");require("../../../../../layout/image/styles/Image.css.cjs");require("../../../../../layout/separator/Separator.cjs");require("../../../../../layout/separator/styles/Separator.css.cjs");require("../../../../../layout/form/Form.cjs");;/* empty css                                                          */require("../../../../../layout/fieldset/Fieldset.cjs");;/* empty css                                                                  */require("../../../../../layout/legend/Legend.cjs");;/* empty css                                                              */require("../../../../../surfaces/accordion/Accordion.cjs");;/* empty css                                                                      */require("../../../../../surfaces/accordion/components/accordion-item/styles/AccordionItem.css.cjs");;/* empty css                                                                                                          */;/* empty css                                                                                                          */require("../../../../../surfaces/card/Card.cjs");;/* empty css                                                            */;/* empty css                                                                                         */require("../../../../../surfaces/collapsible/Collapsible.cjs");;/* empty css                                                                          */;/* empty css                                                                                                                */;/* empty css                                                                                                            */require("../../../../../navigation/tabs/Tabs.cjs");;/* empty css                                                                                             */require("../../../../../navigation/tabs/components/tabs-list/styles/TabsList.css.cjs");require("../../../../../navigation/tabs/components/tabs-trigger/styles/TabsTrigger.css.cjs");require("../../../../../navigation/link/Link.cjs");;/* empty css                                                              */const l=require("../../../../tooltip/Tooltip.cjs");require("../../../../tooltip/components/tooltip-provider/TooltipProvider.cjs");;/* empty css                                                      */require("../../../../dropdown-menu/index.cjs");require("../../../../popover/Popover.cjs");;/* empty css                                                                                */require("../../../../hover-card/HoverCard.cjs");require("../../../../dialog/Dialog.cjs");;/* empty css                                                    */;/* empty css                                                                                   */require("../../../Drawer.cjs");require("../../../styles/Drawer.css.cjs");require("../../../../../feedback/skeleton/Skeleton.cjs");require("../../../../../feedback/skeleton/styles/Skeleton.css.cjs");require("../../../../../feedback/callout/Callout.cjs");require("../../../../../feedback/callout/styles/Callout.css.cjs");require("../../../../../feedback/callout/components/callout-icon/CalloutIcon.cjs");;/* empty css                                                                                              */require("../../../../../feedback/callout/components/callout-title/CalloutTitle.cjs");require("../../../../../feedback/callout/components/callout-description/CalloutDescription.cjs");require("../../../../../feedback/toast/Toast.cjs");require("../../../../../feedback/toast/styles/Toast.css.cjs");require("../../../../../feedback/toast/components/toast-icon/ToastIcon.cjs");;/* empty css                                                                                        */require("../../../../../feedback/toast/components/toast-title/ToastTitle.cjs");require("../../../../../feedback/toast/components/toast-description/ToastDescription.cjs");require("../../../../../feedback/toast/components/toast-actions/ToastActions.cjs");require("../../../../../feedback/toast/components/toast-close/ToastClose.cjs");require("../../../../../feedback/progress/Progress.cjs");require("../../../../../feedback/progress/CircularProgress.cjs");require("../../../../../feedback/progress/styles/Progress.css.cjs");require("../../../../../feedback/progress/constants/progressColors.const.cjs");const q=I.memo(({label:e,startIcon:t,trailing:s,variant:n="default",color:o="primary",iconSize:i,disabled:c,className:a,style:m,ref:d,...p})=>{const{open:u,itemAttributes:D}=A.useDrawerItemAttributes(i);return r.jsx(l,{position:"right",content:e,disabled:u,children:r.jsx("button",{ref:d,type:"button",disabled:c,"aria-label":u?void 0:e,className:h.cn(w.DRAWER_ITEM_STYLES.recipe({variant:n,color:o}),a),style:m,...D,...p,children:r.jsx(b,{label:e,startIcon:t,trailing:s,iconSize:i})})})});q.displayName="Drawer.ActionItem";module.exports=q;
+//# sourceMappingURL=DrawerActionItem.cjs.map

package/dist/components/overlay/drawer/components/items/drawer-action-item/DrawerActionItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerActionItem.cjs","sources":["../../../../../../../src/components/overlay/drawer/components/items/drawer-action-item/DrawerActionItem.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport type { DrawerActionItemProps } from '@components/overlay/drawer/components/items/drawer-action-item/types/DrawerActionItem.props.ts'\r\nimport {\r\n    DRAWER_ITEM_STYLES,\r\n    DrawerItemContent,\r\n    useDrawerItemAttributes,\r\n} from '@components/overlay/drawer/components/items/_shared'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { Tooltip } from '@components'\r\n\r\n/**\r\n * A button-like action row rendered inside a `Drawer`.\r\n *\r\n * Useful for actions that do not navigate, such as \"Sign out\" or \"Toggle theme\".\r\n */\r\nconst DrawerActionItem: FC<DrawerActionItemProps> = memo(({\r\n    label,\r\n    startIcon,\r\n    trailing,\r\n    variant = 'default',\r\n    color = 'primary',\r\n    iconSize,\r\n    disabled,\r\n    className,\r\n    style,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const { open, itemAttributes } = useDrawerItemAttributes(iconSize)\r\n\r\n    return (\r\n        <Tooltip\r\n            position={'right'}\r\n            content={label}\r\n            disabled={open}\r\n        >\r\n            <button\r\n                ref={ref}\r\n                type={'button'}\r\n                disabled={disabled}\r\n                aria-label={open ? undefined : label}\r\n                className={cn(\r\n                    DRAWER_ITEM_STYLES.recipe({ variant, color }),\r\n                    className,\r\n                )}\r\n                style={style}\r\n                {...itemAttributes}\r\n                {...props}\r\n            >\r\n                <DrawerItemContent\r\n                    label={label}\r\n                    startIcon={startIcon}\r\n                    trailing={trailing}\r\n                    iconSize={iconSize}\r\n                />\r\n            </button>\r\n        </Tooltip>\r\n\r\n    )\r\n})\r\n\r\nDrawerActionItem.displayName = 'Drawer.ActionItem'\r\n\r\nexport default DrawerActionItem\r\n"],"names":["DrawerActionItem","memo","label","startIcon","trailing","variant","color","iconSize","disabled","className","style","ref","props","open","itemAttributes","useDrawerItemAttributes","jsx","Tooltip","cn","DRAWER_ITEM_STYLES","DrawerItemContent"],"mappings":"ozdAgBA,MAAMA,EAA8CC,EAAAA,KAAK,CAAC,CACtD,MAAAC,EACA,UAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,UACV,MAAAC,EAAQ,UACR,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAAE,KAAAC,EAAM,eAAAC,GAAmBC,EAAAA,wBAAwBR,CAAQ,EAEjE,OACIS,EAAAA,IAACC,EAAA,CACG,SAAU,QACV,QAASf,EACT,SAAUW,EAEV,SAAAG,EAAAA,IAAC,SAAA,CACG,IAAAL,EACA,KAAM,SACN,SAAAH,EACA,aAAYK,EAAO,OAAYX,EAC/B,UAAWgB,EAAAA,GACPC,EAAAA,mBAAmB,OAAO,CAAE,QAAAd,EAAS,MAAAC,EAAO,EAC5CG,CAAA,EAEJ,MAAAC,EACC,GAAGI,EACH,GAAGF,EAEJ,SAAAI,EAAAA,IAACI,EAAA,CACG,MAAAlB,EACA,UAAAC,EACA,SAAAC,EACA,SAAAG,CAAA,CAAA,CACJ,CAAA,CACJ,CAAA,CAIZ,CAAC,EAEDP,EAAiB,YAAc"}