@choco-vanille/ui 1.1.1 → 1.2.0

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

@@ -0,0 +1,27 @@
+/**
+ * Visual variants for drawer item rows.
+ */
+export declare const DRAWER_ITEM_VARIANTS: {
+    readonly default: "default";
+    readonly outlined: "outlined";
+};
+/**
+ * Color intents for drawer item rows.
+ */
+export declare const DRAWER_ITEM_COLORS: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly tertiary: "tertiary";
+    readonly destructive: "destructive";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly info: "info";
+};
+/**
+ * Array of available color intents for drawer item rows.
+ */
+export declare const DRAWER_ITEM_COLORS_ARRAY: ("primary" | "secondary" | "tertiary" | "success" | "warning" | "info" | "destructive")[];
+/**
+ * Default icon size rendered inside a drawer item row.
+ */
+export declare const DRAWER_ITEM_DEFAULT_ICON_SIZE: "md";

package/dist/components/overlay/drawer/components/items/_shared/constants/index.js

@@ -0,0 +1,5 @@
+const E = "md";
+export {
+  E as DRAWER_ITEM_DEFAULT_ICON_SIZE
+};
+//# sourceMappingURL=index.js.map

package/dist/components/overlay/drawer/components/items/_shared/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/overlay/drawer/components/items/_shared/constants/index.ts"],"sourcesContent":["/**\r\n * Visual variants for drawer item rows.\r\n */\r\nexport const DRAWER_ITEM_VARIANTS = {\r\n    default: 'default',\r\n    outlined: 'outlined',\r\n} as const\r\n\r\n/**\r\n * Color intents for drawer item rows.\r\n */\r\nexport const DRAWER_ITEM_COLORS = {\r\n    primary: 'primary',\r\n    secondary: 'secondary',\r\n    tertiary: 'tertiary',\r\n    destructive: 'destructive',\r\n    success: 'success',\r\n    warning: 'warning',\r\n    info: 'info',\r\n} as const\r\n\r\n/**\r\n * Array of available color intents for drawer item rows.\r\n */\r\nexport const DRAWER_ITEM_COLORS_ARRAY = Object.values(DRAWER_ITEM_COLORS)\r\n\r\n/**\r\n * Default icon size rendered inside a drawer item row.\r\n */\r\nexport const DRAWER_ITEM_DEFAULT_ICON_SIZE = 'md' as const\r\n"],"names":["DRAWER_ITEM_DEFAULT_ICON_SIZE"],"mappings":"AA6BO,MAAMA,IAAgC;"}

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];