@clickhouse/click-ui 0.9.0 → 1.0.0-rc2

package/dist/esm/components/Select/index.js

@@ -12,31 +12,42 @@ const Select = ({
   onOpenChange: onOpenChangeProp,
   ...props
 }) => {
-  const [selectedValues, setSelectedValues] = useState(typeof valueProp === "string" ? [valueProp] : typeof defaultValue === "string" ? [defaultValue] : []);
+  const [selectedValues, setSelectedValues] = useState(
+    typeof valueProp === "string" ? [valueProp] : typeof defaultValue === "string" ? [defaultValue] : []
+  );
   const [open, setOpen] = useState(false);
-  const onOpenChange = useCallback((open2) => {
-    setOpen(open2);
-    if (typeof onOpenChangeProp === "function") {
-      onOpenChangeProp(open2);
-    }
-  }, [onOpenChangeProp]);
-  const onSelect = useCallback((value, type, evt) => {
-    setSelectedValues((values) => {
-      if (values[0] !== value) {
-        return [value];
+  const onOpenChange = useCallback(
+    (open2) => {
+      setOpen(open2);
+      if (typeof onOpenChangeProp === "function") {
+        onOpenChangeProp(open2);
       }
-      return values;
-    });
-    onOpenChange(false);
-    if (typeof onSelectProp === "function") {
-      onSelectProp(value, type, evt);
-    }
-  }, [onSelectProp, onOpenChange]);
-  const onChange = useCallback((values) => {
-    if (values[0] !== selectedValues[0]) {
-      onSelect(values[0]);
-    }
-  }, [selectedValues, onSelect]);
+    },
+    [onOpenChangeProp]
+  );
+  const onSelect = useCallback(
+    (value, type, evt) => {
+      setSelectedValues((values) => {
+        if (values[0] !== value) {
+          return [value];
+        }
+        return values;
+      });
+      onOpenChange(false);
+      if (typeof onSelectProp === "function") {
+        onSelectProp(value, type, evt);
+      }
+    },
+    [onSelectProp, onOpenChange]
+  );
+  const onChange = useCallback(
+    (values) => {
+      if (values[0] !== selectedValues[0]) {
+        onSelect(values[0]);
+      }
+    },
+    [selectedValues, onSelect]
+  );
   useUpdateEffect(() => {
     setSelectedValues(typeof valueProp === "string" ? [valueProp] : []);
   }, [valueProp]);
@@ -46,7 +57,18 @@ const Select = ({
   } else {
     conditionalProps.children = children;
   }
-  return /* @__PURE__ */ jsx(InternalSelect, { onChange, value: typeof valueProp === "string" ? [valueProp] : selectedValues, open, onOpenChange, onSelect, ...conditionalProps, ...props });
+  return /* @__PURE__ */ jsx(
+    InternalSelect,
+    {
+      onChange,
+      value: typeof valueProp === "string" ? [valueProp] : selectedValues,
+      open,
+      onOpenChange,
+      onSelect,
+      ...conditionalProps,
+      ...props
+    }
+  );
 };
 Select.Group = SelectGroup;
 Select.Item = SelectItem;

package/dist/esm/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, useCallback, useState } from 'react';\n\nimport { useUpdateEffect } from '@/hooks/internal';\n\nimport type { SelectProps, SelectOptionProp, SelectionType } from './Select.types';\nimport {\n  InternalSelect,\n  SelectGroup,\n  SelectItem,\n  SelectItemDescription,\n} from './common/InternalSelect';\n\nexport const Select = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  onOpenChange: onOpenChangeProp,\n  ...props\n}: SelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    typeof valueProp === 'string'\n      ? [valueProp]\n      : typeof defaultValue === 'string'\n        ? [defaultValue]\n        : []\n  );\n  const [open, setOpen] = useState(false);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(open);\n      }\n    },\n    [onOpenChangeProp]\n  );\n\n  const onSelect = useCallback(\n    (\n      value: string,\n      type?: SelectionType,\n      evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>\n    ) => {\n      setSelectedValues(values => {\n        if (values[0] !== value) {\n          return [value];\n        }\n        return values;\n      });\n      onOpenChange(false);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(value, type, evt);\n      }\n    },\n    [onSelectProp, onOpenChange]\n  );\n\n  const onChange = useCallback(\n    (values: string[]) => {\n      if (values[0] !== selectedValues[0]) {\n        onSelect(values[0]);\n      }\n    },\n    [selectedValues, onSelect]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(typeof valueProp === 'string' ? [valueProp] : []);\n  }, [valueProp]);\n\n  const conditionalProps: Partial<SelectOptionProp> = {};\n  if (options) {\n    conditionalProps.options = options;\n  } else {\n    conditionalProps.children = children;\n  }\n\n  return (\n    <InternalSelect\n      onChange={onChange}\n      value={typeof valueProp === 'string' ? [valueProp] : selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nSelect.Group = SelectGroup;\nSelect.Item = SelectItem;\nSelect.ItemDescription = SelectItemDescription;\n"],"names":["Select","value","valueProp","defaultValue","onSelect","onSelectProp","options","children","onOpenChange","onOpenChangeProp","props","selectedValues","setSelectedValues","useState","open","setOpen","useCallback","type","evt","values","onChange","useUpdateEffect","conditionalProps","Group","SelectGroup","Item","SelectItem","ItemDescription","SelectItemDescription"],"mappings":";;;;;AAYO,MAAMA,SAASA,CAAC;AAAA,EACrBC,KAAAA,EAAOC,SAAAA;AAAAA,EACPC,YAAAA;AAAAA,EACAC,QAAAA,EAAUC,YAAAA;AAAAA,EACVC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,YAAAA,EAAcC,gBAAAA;AAAAA,EACd,GAAGC;AACQ,CAAA,KAAM;AACjB,EAAA,MAAM,CAACC,cAAAA,EAAgBC,iBAAiB,IAAIC,QAAAA,CAC1C,OAAOX,cAAc,QAAA,GACjB,CAACA,SAAS,CAAA,GACV,OAAOC,YAAAA,KAAiB,QAAA,GACtB,CAACA,YAAY,CAAA,GACb,EACR,CAAA;AACA,EAAA,MAAM,CAACW,IAAAA,EAAMC,OAAO,CAAA,GAAIF,SAAS,KAAK,CAAA;AAEtC,EAAA,MAAML,YAAAA,GAAeQ,WAAAA,CACnB,CAACF,KAAAA,KAAkB;AACjBC,IAAAA,OAAAA,CAAQD,KAAI,CAAA;AACZ,IAAA,IAAI,OAAOL,qBAAqB,UAAA,EAAY;AAC1CA,MAAAA,gBAAAA,CAAiBK,KAAI,CAAA;AAAA,IACvB;AAAA,EACF,CAAA,EACA,CAACL,gBAAgB,CACnB,CAAA;AAEA,EAAA,MAAML,QAAAA,GAAWY,WAAAA,CACf,CACEf,KAAAA,EACAgB,MACAC,GAAAA,KACG;AACHN,IAAAA,iBAAAA,CAAkBO,CAAAA,MAAAA,KAAU;AAC1B,MAAA,IAAIA,MAAAA,CAAO,CAAC,CAAA,KAAMlB,KAAAA,EAAO;AACvB,QAAA,OAAO,CAACA,KAAK,CAAA;AAAA,MACf;AACA,MAAA,OAAOkB,MAAAA;AAAAA,IACT,CAAC,CAAA;AACDX,IAAAA,YAAAA,CAAa,KAAK,CAAA;AAClB,IAAA,IAAI,OAAOH,iBAAiB,UAAA,EAAY;AACtCA,MAAAA,YAAAA,CAAaJ,KAAAA,EAAOgB,MAAMC,GAAG,CAAA;AAAA,IAC/B;AAAA,EACF,CAAA,EACA,CAACb,YAAAA,EAAcG,YAAY,CAC7B,CAAA;AAEA,EAAA,MAAMY,QAAAA,GAAWJ,WAAAA,CACf,CAACG,MAAAA,KAAqB;AACpB,IAAA,IAAIA,MAAAA,CAAO,CAAC,CAAA,KAAMR,cAAAA,CAAe,CAAC,CAAA,EAAG;AACnCP,MAAAA,QAAAA,CAASe,MAAAA,CAAO,CAAC,CAAC,CAAA;AAAA,IACpB;AAAA,EACF,CAAA,EACA,CAACR,cAAAA,EAAgBP,QAAQ,CAC3B,CAAA;AAEAiB,EAAAA,eAAAA,CAAgB,MAAM;AACpBT,IAAAA,iBAAAA,CAAkB,OAAOV,SAAAA,KAAc,QAAA,GAAW,CAACA,SAAS,CAAA,GAAI,EAAE,CAAA;AAAA,EACpE,CAAA,EAAG,CAACA,SAAS,CAAC,CAAA;AAEd,EAAA,MAAMoB,mBAA8C,EAAC;AACrD,EAAA,IAAIhB,OAAAA,EAAS;AACXgB,IAAAA,gBAAAA,CAAiBhB,OAAAA,GAAUA,OAAAA;AAAAA,EAC7B,CAAA,MAAO;AACLgB,IAAAA,gBAAAA,CAAiBf,QAAAA,GAAWA,QAAAA;AAAAA,EAC9B;AAEA,EAAA,2BACG,cAAA,EAAA,EACC,QAAA,EACA,KAAA,EAAO,OAAOL,cAAc,QAAA,GAAW,CAACA,SAAS,CAAA,GAAIS,gBACrD,IAAA,EACA,YAAA,EACA,UACA,GAAIW,gBAAAA,EACJ,GAAIZ,KAAAA,EAAM,CAAA;AAGhB;AAEAV,MAAAA,CAAOuB,KAAAA,GAAQC,WAAAA;AACfxB,MAAAA,CAAOyB,IAAAA,GAAOC,UAAAA;AACd1B,MAAAA,CAAO2B,eAAAA,GAAkBC,qBAAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import { KeyboardEvent, MouseEvent, useCallback, useState } from 'react';\n\nimport { useUpdateEffect } from '@/hooks/internal';\n\nimport type { SelectProps, SelectOptionProp, SelectionType } from './Select.types';\nimport {\n  InternalSelect,\n  SelectGroup,\n  SelectItem,\n  SelectItemDescription,\n} from './common/InternalSelect';\n\nexport const Select = ({\n  value: valueProp,\n  defaultValue,\n  onSelect: onSelectProp,\n  options,\n  children,\n  onOpenChange: onOpenChangeProp,\n  ...props\n}: SelectProps) => {\n  const [selectedValues, setSelectedValues] = useState<string[]>(\n    typeof valueProp === 'string'\n      ? [valueProp]\n      : typeof defaultValue === 'string'\n        ? [defaultValue]\n        : []\n  );\n  const [open, setOpen] = useState(false);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setOpen(open);\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(open);\n      }\n    },\n    [onOpenChangeProp]\n  );\n\n  const onSelect = useCallback(\n    (\n      value: string,\n      type?: SelectionType,\n      evt?: KeyboardEvent<HTMLElement> | MouseEvent<HTMLElement>\n    ) => {\n      setSelectedValues(values => {\n        if (values[0] !== value) {\n          return [value];\n        }\n        return values;\n      });\n      onOpenChange(false);\n      if (typeof onSelectProp === 'function') {\n        onSelectProp(value, type, evt);\n      }\n    },\n    [onSelectProp, onOpenChange]\n  );\n\n  const onChange = useCallback(\n    (values: string[]) => {\n      if (values[0] !== selectedValues[0]) {\n        onSelect(values[0]);\n      }\n    },\n    [selectedValues, onSelect]\n  );\n\n  useUpdateEffect(() => {\n    setSelectedValues(typeof valueProp === 'string' ? [valueProp] : []);\n  }, [valueProp]);\n\n  const conditionalProps: Partial<SelectOptionProp> = {};\n  if (options) {\n    conditionalProps.options = options;\n  } else {\n    conditionalProps.children = children;\n  }\n\n  return (\n    <InternalSelect\n      onChange={onChange}\n      value={typeof valueProp === 'string' ? [valueProp] : selectedValues}\n      open={open}\n      onOpenChange={onOpenChange}\n      onSelect={onSelect}\n      {...conditionalProps}\n      {...props}\n    />\n  );\n};\n\nSelect.Group = SelectGroup;\nSelect.Item = SelectItem;\nSelect.ItemDescription = SelectItemDescription;\n"],"names":["open"],"mappings":";;;;;AAYO,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA,EAAO,SAAA;AAAA,EACP,YAAA;AAAA,EACA,QAAA,EAAU,YAAA;AAAA,EACV,OAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA,EAAc,gBAAA;AAAA,EACd,GAAG;AACL,CAAA,KAAmB;AACjB,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,QAAA;AAAA,IAC1C,OAAO,SAAA,KAAc,QAAA,GACjB,CAAC,SAAS,CAAA,GACV,OAAO,YAAA,KAAiB,QAAA,GACtB,CAAC,YAAY,CAAA,GACb;AAAC,GACT;AACA,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtC,EAAA,MAAM,YAAA,GAAe,WAAA;AAAA,IACnB,CAACA,KAAAA,KAAkB;AACjB,MAAA,OAAA,CAAQA,KAAI,CAAA;AACZ,MAAA,IAAI,OAAO,qBAAqB,UAAA,EAAY;AAC1C,QAAA,gBAAA,CAAiBA,KAAI,CAAA;AAAA,MACvB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CACE,KAAA,EACA,IAAA,EACA,GAAA,KACG;AACH,MAAA,iBAAA,CAAkB,CAAA,MAAA,KAAU;AAC1B,QAAA,IAAI,MAAA,CAAO,CAAC,CAAA,KAAM,KAAA,EAAO;AACvB,UAAA,OAAO,CAAC,KAAK,CAAA;AAAA,QACf;AACA,QAAA,OAAO,MAAA;AAAA,MACT,CAAC,CAAA;AACD,MAAA,YAAA,CAAa,KAAK,CAAA;AAClB,MAAA,IAAI,OAAO,iBAAiB,UAAA,EAAY;AACtC,QAAA,YAAA,CAAa,KAAA,EAAO,MAAM,GAAG,CAAA;AAAA,MAC/B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,GAC7B;AAEA,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,MAAA,KAAqB;AACpB,MAAA,IAAI,MAAA,CAAO,CAAC,CAAA,KAAM,cAAA,CAAe,CAAC,CAAA,EAAG;AACnC,QAAA,QAAA,CAAS,MAAA,CAAO,CAAC,CAAC,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAgB,QAAQ;AAAA,GAC3B;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,iBAAA,CAAkB,OAAO,SAAA,KAAc,QAAA,GAAW,CAAC,SAAS,CAAA,GAAI,EAAE,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,EAAA,MAAM,mBAA8C,EAAC;AACrD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,gBAAA,CAAiB,OAAA,GAAU,OAAA;AAAA,EAC7B,CAAA,MAAO;AACL,IAAA,gBAAA,CAAiB,QAAA,GAAW,QAAA;AAAA,EAC9B;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,QAAA;AAAA,MACA,OAAO,OAAO,SAAA,KAAc,QAAA,GAAW,CAAC,SAAS,CAAA,GAAI,cAAA;AAAA,MACrD,IAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACC,GAAG,gBAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,MAAA,CAAO,KAAA,GAAQ,WAAA;AACf,MAAA,CAAO,IAAA,GAAO,UAAA;AACd,MAAA,CAAO,eAAA,GAAkB,qBAAA;;;;"}

package/dist/esm/components/Separator/Separator.css

@@ -1,4 +1,4 @@
-.separator__mz39H[data-orientation='horizontal'] {
+@layer clickui {.separator__mz39H[data-orientation='horizontal'] {
   width: 100%;
   border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
 }
@@ -79,3 +79,4 @@
     var(--click-separator-vertical-space-y-all)
     var(--click-separator-vertical-space-x-xxl);
 }
+}

package/dist/esm/components/Separator/index.js

@@ -28,9 +28,14 @@ const Separator = ({
   size,
   className,
   ...props
-}) => /* @__PURE__ */ jsx(RadixSeparator.Root, { orientation, ...props, className: cn(separatorVariants({
-  variant: `${orientation}-${size}`
-}), className) });
+}) => /* @__PURE__ */ jsx(
+  RadixSeparator.Root,
+  {
+    orientation,
+    ...props,
+    className: cn(separatorVariants({ variant: `${orientation}-${size}` }), className)
+  }
+);
 
 export { Separator };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Separator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as RadixSeparator from '@radix-ui/react-separator';\nimport { cn, cva } from '@/lib/cva';\nimport { SeparatorProps } from './Separator.types';\nimport styles from './Separator.module.css';\n\nconst separatorVariants = cva(styles.separator, {\n  variants: {\n    variant: {\n      'horizontal-xs': styles['separator_variant_horizontal-xs'],\n      'horizontal-sm': styles['separator_variant_horizontal-sm'],\n      'horizontal-md': styles['separator_variant_horizontal-md'],\n      'horizontal-lg': styles['separator_variant_horizontal-lg'],\n      'horizontal-xl': styles['separator_variant_horizontal-xl'],\n      'horizontal-xxl': styles['separator_variant_horizontal-xxl'],\n      'vertical-xs': styles['separator_variant_vertical-xs'],\n      'vertical-sm': styles['separator_variant_vertical-sm'],\n      'vertical-md': styles['separator_variant_vertical-md'],\n      'vertical-lg': styles['separator_variant_vertical-lg'],\n      'vertical-xl': styles['separator_variant_vertical-xl'],\n      'vertical-xxl': styles['separator_variant_vertical-xxl'],\n    },\n  },\n});\n\nexport const Separator = ({\n  orientation = 'horizontal',\n  size,\n  className,\n  ...props\n}: SeparatorProps) => (\n  <RadixSeparator.Root\n    orientation={orientation}\n    {...props}\n    className={cn(separatorVariants({ variant: `${orientation}-${size}` }), className)}\n  />\n);\n"],"names":["separatorVariants","cva","styles","separator","variants","variant","Separator","orientation","size","className","props","cn"],"mappings":";;;;;;AAKA,MAAMA,iBAAAA,GAAoBC,GAAAA,CAAIC,MAAAA,CAAOC,SAAAA,EAAW;AAAA,EAC9CC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACP,eAAA,EAAiBH,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,gBAAA,EAAkBA,OAAO,kCAAkC,CAAA;AAAA,MAC3D,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,cAAA,EAAgBA,OAAO,gCAAgC;AAAA;AACzD;AAEJ,CAAC,CAAA;AAEM,MAAMI,YAAYA,CAAC;AAAA,EACxBC,WAAAA,GAAc,YAAA;AAAA,EACdC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACW,CAAA,qBACd,GAAA,CAAC,eAAe,IAAA,EAAf,EACC,aACA,GAAIA,KAAAA,EACJ,SAAA,EAAWC,EAAAA,CAAGX,iBAAAA,CAAkB;AAAA,EAAEK,OAAAA,EAAS,CAAA,EAAGE,WAAW,CAAA,CAAA,EAAIC,IAAI,CAAA;AAAG,CAAC,CAAA,EAAGC,SAAS,CAAA,EAAE;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as RadixSeparator from '@radix-ui/react-separator';\nimport { cn, cva } from '@/lib/cva';\nimport { SeparatorProps } from './Separator.types';\nimport styles from './Separator.module.css';\n\nconst separatorVariants = cva(styles.separator, {\n  variants: {\n    variant: {\n      'horizontal-xs': styles['separator_variant_horizontal-xs'],\n      'horizontal-sm': styles['separator_variant_horizontal-sm'],\n      'horizontal-md': styles['separator_variant_horizontal-md'],\n      'horizontal-lg': styles['separator_variant_horizontal-lg'],\n      'horizontal-xl': styles['separator_variant_horizontal-xl'],\n      'horizontal-xxl': styles['separator_variant_horizontal-xxl'],\n      'vertical-xs': styles['separator_variant_vertical-xs'],\n      'vertical-sm': styles['separator_variant_vertical-sm'],\n      'vertical-md': styles['separator_variant_vertical-md'],\n      'vertical-lg': styles['separator_variant_vertical-lg'],\n      'vertical-xl': styles['separator_variant_vertical-xl'],\n      'vertical-xxl': styles['separator_variant_vertical-xxl'],\n    },\n  },\n});\n\nexport const Separator = ({\n  orientation = 'horizontal',\n  size,\n  className,\n  ...props\n}: SeparatorProps) => (\n  <RadixSeparator.Root\n    orientation={orientation}\n    {...props}\n    className={cn(separatorVariants({ variant: `${orientation}-${size}` }), className)}\n  />\n);\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,iBAAA,GAAoB,GAAA,CAAI,MAAA,CAAO,SAAA,EAAW;AAAA,EAC9C,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,eAAA,EAAiB,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiB,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiB,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiB,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiB,OAAO,iCAAiC,CAAA;AAAA,MACzD,gBAAA,EAAkB,OAAO,kCAAkC,CAAA;AAAA,MAC3D,aAAA,EAAe,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAe,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAe,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAe,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAe,OAAO,+BAA+B,CAAA;AAAA,MACrD,cAAA,EAAgB,OAAO,gCAAgC;AAAA;AACzD;AAEJ,CAAC,CAAA;AAEM,MAAM,YAAY,CAAC;AAAA,EACxB,WAAA,GAAc,YAAA;AAAA,EACd,IAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACE,GAAA;AAAA,EAAC,cAAA,CAAe,IAAA;AAAA,EAAf;AAAA,IACC,WAAA;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,SAAA,EAAW,EAAA,CAAG,iBAAA,CAAkB,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,CAAA,EAAG,SAAS;AAAA;AACnF;;;;"}

package/dist/esm/components/SidebarCollapsibleItem/index.js

@@ -3,27 +3,52 @@ import { forwardRef } from 'react';
 import { Collapsible } from '../Collapsible/index.js';
 import { SidebarItemWrapper } from '../SidebarNavigationItem/index.js';
 
-const SidebarCollapsibleItem = forwardRef(({
-  label,
-  children,
-  open,
-  onOpenChange,
-  iconDir = "start",
-  indicatorDir = "start",
-  icon,
-  level = 0,
-  selected,
-  type = "main",
-  ...props
-}, ref) => {
-  if (!label) {
-    return;
+const SidebarCollapsibleItem = forwardRef(
+  ({
+    label,
+    children,
+    open,
+    onOpenChange,
+    iconDir = "start",
+    indicatorDir = "start",
+    icon,
+    level = 0,
+    selected,
+    type = "main",
+    ...props
+  }, ref) => {
+    if (!label) {
+      return;
+    }
+    return /* @__PURE__ */ jsxs(
+      Collapsible,
+      {
+        open,
+        onOpenChange,
+        children: [
+          /* @__PURE__ */ jsx(
+            SidebarItemWrapper,
+            {
+              ref,
+              as: Collapsible.Header,
+              icon,
+              iconDir,
+              indicatorDir,
+              $collapsible: true,
+              $level: level,
+              $type: type,
+              "data-selected": selected,
+              wrapInTrigger: type === "main",
+              ...props,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(Collapsible.Content, { indicatorDir, children })
+        ]
+      }
+    );
   }
-  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx(SidebarItemWrapper, { ref, as: Collapsible.Header, icon, iconDir, indicatorDir, $collapsible: true, $level: level, $type: type, "data-selected": selected, wrapInTrigger: type === "main", ...props, children: label }),
-    /* @__PURE__ */ jsx(Collapsible.Content, { indicatorDir, children })
-  ] });
-});
+);
 
 export { SidebarCollapsibleItem };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/SidebarCollapsibleItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Collapsible } from '@/components/Collapsible';\nimport { SidebarItemWrapper } from '@/components/SidebarNavigationItem';\nimport { SidebarCollapsibleItemProps } from './SidebarCollapsibleItem.types';\n\nexport const SidebarCollapsibleItem = forwardRef<\n  HTMLDivElement,\n  SidebarCollapsibleItemProps\n>(\n  (\n    {\n      label,\n      children,\n      open,\n      onOpenChange,\n      iconDir = 'start',\n      indicatorDir = 'start',\n      icon,\n      level = 0,\n      selected,\n      type = 'main',\n      ...props\n    },\n    ref\n  ) => {\n    if (!label) {\n      return;\n    }\n    return (\n      <Collapsible\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        <SidebarItemWrapper\n          ref={ref}\n          as={Collapsible.Header}\n          icon={icon}\n          iconDir={iconDir}\n          indicatorDir={indicatorDir}\n          $collapsible\n          $level={level}\n          $type={type}\n          data-selected={selected}\n          wrapInTrigger={type === 'main'}\n          {...props}\n        >\n          {label}\n        </SidebarItemWrapper>\n        <Collapsible.Content indicatorDir={indicatorDir}>{children}</Collapsible.Content>\n      </Collapsible>\n    );\n  }\n);\n"],"names":["SidebarCollapsibleItem","forwardRef","label","children","open","onOpenChange","iconDir","indicatorDir","icon","level","selected","type","props","ref","Collapsible","Header"],"mappings":";;;;;AAKO,MAAMA,sBAAAA,GAAyBC,WAIpC,CACE;AAAA,EACEC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC,YAAAA,GAAe,OAAA;AAAA,EACfC,IAAAA;AAAAA,EACAC,KAAAA,GAAQ,CAAA;AAAA,EACRC,QAAAA;AAAAA,EACAC,IAAAA,GAAO,MAAA;AAAA,EACP,GAAGC;AACL,CAAA,EACAC,GAAAA,KACG;AACH,EAAA,IAAI,CAACX,KAAAA,EAAO;AACV,IAAA;AAAA,EACF;AACA,EAAA,uBACE,IAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,YAAA,EAEA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,kBAAA,EAAA,EACC,KACA,EAAA,EAAIY,WAAAA,CAAYC,QAChB,IAAA,EACA,OAAA,EACA,cACA,YAAA,EAAY,IAAA,EACZ,QAAQN,KAAAA,EACR,KAAA,EAAOE,MACP,eAAA,EAAeD,QAAAA,EACf,eAAeC,IAAAA,KAAS,MAAA,EACxB,GAAIC,KAAAA,EAEHV,QAAAA,EAAAA,KAAAA,EACH,CAAA;AAAA,oBACA,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,cAA6BC,QAAAA,EAAS;AAAA,GAAA,EAC7D,CAAA;AAEJ,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarCollapsibleItem/SidebarCollapsibleItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Collapsible } from '@/components/Collapsible';\nimport { SidebarItemWrapper } from '@/components/SidebarNavigationItem';\nimport { SidebarCollapsibleItemProps } from './SidebarCollapsibleItem.types';\n\nexport const SidebarCollapsibleItem = forwardRef<\n  HTMLDivElement,\n  SidebarCollapsibleItemProps\n>(\n  (\n    {\n      label,\n      children,\n      open,\n      onOpenChange,\n      iconDir = 'start',\n      indicatorDir = 'start',\n      icon,\n      level = 0,\n      selected,\n      type = 'main',\n      ...props\n    },\n    ref\n  ) => {\n    if (!label) {\n      return;\n    }\n    return (\n      <Collapsible\n        open={open}\n        onOpenChange={onOpenChange}\n      >\n        <SidebarItemWrapper\n          ref={ref}\n          as={Collapsible.Header}\n          icon={icon}\n          iconDir={iconDir}\n          indicatorDir={indicatorDir}\n          $collapsible\n          $level={level}\n          $type={type}\n          data-selected={selected}\n          wrapInTrigger={type === 'main'}\n          {...props}\n        >\n          {label}\n        </SidebarItemWrapper>\n        <Collapsible.Content indicatorDir={indicatorDir}>{children}</Collapsible.Content>\n      </Collapsible>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;AAKO,MAAM,sBAAA,GAAyB,UAAA;AAAA,EAIpC,CACE;AAAA,IACE,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA,GAAU,OAAA;AAAA,IACV,YAAA,GAAe,OAAA;AAAA,IACf,IAAA;AAAA,IACA,KAAA,GAAQ,CAAA;AAAA,IACR,QAAA;AAAA,IACA,IAAA,GAAO,MAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,IAAI,CAAC,KAAA,EAAO;AACV,MAAA;AAAA,IACF;AACA,IAAA,uBACE,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,YAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,IAAI,WAAA,CAAY,MAAA;AAAA,cAChB,IAAA;AAAA,cACA,OAAA;AAAA,cACA,YAAA;AAAA,cACA,YAAA,EAAY,IAAA;AAAA,cACZ,MAAA,EAAQ,KAAA;AAAA,cACR,KAAA,EAAO,IAAA;AAAA,cACP,eAAA,EAAe,QAAA;AAAA,cACf,eAAe,IAAA,KAAS,MAAA;AAAA,cACvB,GAAG,KAAA;AAAA,cAEH,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BACA,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAoB,cAA6B,QAAA,EAAS;AAAA;AAAA;AAAA,KAC7D;AAAA,EAEJ;AACF;;;;"}

package/dist/esm/components/SidebarCollapsibleTitle/index.js

@@ -17,14 +17,44 @@ const SidebarCollapsibleTitle = ({
   if (!label) {
     return;
   }
-  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxs(SidebarTitleWrapper, { as: Collapsible.Trigger, $collapsible: true, iconDir, "data-selected": selected, $type: type, ...props, children: [
-      icon && iconDir === "start" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }),
-      label,
-      icon && iconDir === "end" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" })
-    ] }),
-    /* @__PURE__ */ jsx(Collapsible.Content, { children })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsxs(
+          SidebarTitleWrapper,
+          {
+            as: Collapsible.Trigger,
+            $collapsible: true,
+            iconDir,
+            "data-selected": selected,
+            $type: type,
+            ...props,
+            children: [
+              icon && iconDir === "start" && /* @__PURE__ */ jsx(
+                SvgImage,
+                {
+                  name: icon,
+                  size: "sm"
+                }
+              ),
+              label,
+              icon && iconDir === "end" && /* @__PURE__ */ jsx(
+                SvgImage,
+                {
+                  name: icon,
+                  size: "sm"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapsible.Content, { children })
+      ]
+    }
+  );
 };
 
 export { SidebarCollapsibleTitle };

package/dist/esm/components/SidebarCollapsibleTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.tsx"],"sourcesContent":["import { Icon } from '@/components/Icon';\nimport { Collapsible } from '@/components/Collapsible';\nimport { SidebarTitleWrapper } from '@/components/SidebarNavigationTitle';\nimport { SidebarCollapsibleTitleProps } from './SidebarCollapsibleTitle.types';\n\nexport const SidebarCollapsibleTitle = ({\n  label,\n  children,\n  open,\n  onOpenChange,\n  iconDir = 'start',\n  icon,\n  selected,\n  type = 'main',\n  ...props\n}: SidebarCollapsibleTitleProps) => {\n  if (!label) {\n    return;\n  }\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <SidebarTitleWrapper\n        as={Collapsible.Trigger}\n        $collapsible\n        iconDir={iconDir}\n        data-selected={selected}\n        $type={type}\n        {...props}\n      >\n        {icon && iconDir === 'start' && (\n          <Icon\n            name={icon}\n            size=\"sm\"\n          />\n        )}\n        {label}\n        {icon && iconDir === 'end' && (\n          <Icon\n            name={icon}\n            size=\"sm\"\n          />\n        )}\n      </SidebarTitleWrapper>\n      <Collapsible.Content>{children}</Collapsible.Content>\n    </Collapsible>\n  );\n};\n"],"names":["SidebarCollapsibleTitle","label","children","open","onOpenChange","iconDir","icon","selected","type","props","Collapsible","Trigger","Icon"],"mappings":";;;;;AAKO,MAAMA,0BAA0BA,CAAC;AAAA,EACtCC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,IAAAA,GAAO,MAAA;AAAA,EACP,GAAGC;AACyB,CAAA,KAAM;AAClC,EAAA,IAAI,CAACR,KAAAA,EAAO;AACV,IAAA;AAAA,EACF;AACA,EAAA,uBACE,IAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,YAAA,EAEA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,mBAAA,EAAA,EACC,EAAA,EAAIS,WAAAA,CAAYC,OAAAA,EAChB,YAAA,EAAY,IAAA,EACZ,OAAA,EACA,eAAA,EAAeJ,QAAAA,EACf,KAAA,EAAOC,IAAAA,EACP,GAAIC,KAAAA,EAEHH,QAAAA,EAAAA;AAAAA,MAAAA,IAAAA,IAAQD,YAAY,OAAA,oBACnB,GAAA,CAACO,YACC,IAAA,EAAMN,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,MAGZL,KAAAA;AAAAA,MACAK,IAAAA,IAAQD,YAAY,KAAA,oBACnB,GAAA,CAACO,YACC,IAAA,EAAMN,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,KAAA,EAGf,CAAA;AAAA,oBACA,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAqBJ,QAAAA,EAAS;AAAA,GAAA,EACjC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarCollapsibleTitle/SidebarCollapsibleTitle.tsx"],"sourcesContent":["import { Icon } from '@/components/Icon';\nimport { Collapsible } from '@/components/Collapsible';\nimport { SidebarTitleWrapper } from '@/components/SidebarNavigationTitle';\nimport { SidebarCollapsibleTitleProps } from './SidebarCollapsibleTitle.types';\n\nexport const SidebarCollapsibleTitle = ({\n  label,\n  children,\n  open,\n  onOpenChange,\n  iconDir = 'start',\n  icon,\n  selected,\n  type = 'main',\n  ...props\n}: SidebarCollapsibleTitleProps) => {\n  if (!label) {\n    return;\n  }\n  return (\n    <Collapsible\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <SidebarTitleWrapper\n        as={Collapsible.Trigger}\n        $collapsible\n        iconDir={iconDir}\n        data-selected={selected}\n        $type={type}\n        {...props}\n      >\n        {icon && iconDir === 'start' && (\n          <Icon\n            name={icon}\n            size=\"sm\"\n          />\n        )}\n        {label}\n        {icon && iconDir === 'end' && (\n          <Icon\n            name={icon}\n            size=\"sm\"\n          />\n        )}\n      </SidebarTitleWrapper>\n      <Collapsible.Content>{children}</Collapsible.Content>\n    </Collapsible>\n  );\n};\n"],"names":["Icon"],"mappings":";;;;;AAKO,MAAM,0BAA0B,CAAC;AAAA,EACtC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA,GAAU,OAAA;AAAA,EACV,IAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,GAAG;AACL,CAAA,KAAoC;AAClC,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA;AAAA,EACF;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,YAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACC,IAAI,WAAA,CAAY,OAAA;AAAA,YAChB,YAAA,EAAY,IAAA;AAAA,YACZ,OAAA;AAAA,YACA,eAAA,EAAe,QAAA;AAAA,YACf,KAAA,EAAO,IAAA;AAAA,YACN,GAAG,KAAA;AAAA,YAEH,QAAA,EAAA;AAAA,cAAA,IAAA,IAAQ,YAAY,OAAA,oBACnB,GAAA;AAAA,gBAACA,QAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAM,IAAA;AAAA,kBACN,IAAA,EAAK;AAAA;AAAA,eACP;AAAA,cAED,KAAA;AAAA,cACA,IAAA,IAAQ,YAAY,KAAA,oBACnB,GAAA;AAAA,gBAACA,QAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAM,IAAA;AAAA,kBACN,IAAA,EAAK;AAAA;AAAA;AACP;AAAA;AAAA,SAEJ;AAAA,wBACA,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAqB,QAAA,EAAS;AAAA;AAAA;AAAA,GACjC;AAEJ;;;;"}

package/dist/esm/components/SidebarNavigationItem/SidebarNavigationItem.css

@@ -1,7 +1,7 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
 .wrapper__klOWe {
   display: flex;
-  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original styled rule used this
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the pre-migration styling used this
    same width fallback chain (100% → -webkit-fill-available → fill-available →
    stretch) so the item fills the available inline space. */
   width: 100%;
@@ -67,7 +67,7 @@
   cursor: not-allowed;
 }
 
-/* stylelint-disable-next-line media-feature-range-notation -- prefix syntax matches the original styled rule and is more broadly supported than range syntax */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix syntax matches the pre-migration styling and is more broadly supported than range syntax */
 @media (max-width: 640px) {
   .wrapper__klOWe {
     padding: var(--item-mobile-space-y) var(--item-mobile-space-right)
@@ -165,3 +165,4 @@
   --item-text-active: var(--click-sidebar-sqlSidebar-navigation-subItem-color-text-active);
   --item-text-disabled: var(--click-sidebar-sqlSidebar-navigation-subItem-color-text-disabled);
 }
+}

package/dist/esm/components/SidebarNavigationItem/index.js

@@ -14,37 +14,24 @@ const wrapperVariants = cva(styles.wrapper, {
     },
     // The colour set depends on BOTH the sidebar type and the item depth, so
     // it is applied through the compoundVariants below rather than here.
-    type: {
-      main: "",
-      sqlSidebar: ""
+    type: { main: "", sqlSidebar: "" },
+    collapsible: { true: styles.wrapper_collapsible_true, false: "" }
+  },
+  compoundVariants: [
+    { type: "main", itemType: "item", class: styles["wrapper_color_main-item"] },
+    { type: "main", itemType: "subItem", class: styles["wrapper_color_main-sub-item"] },
+    {
+      type: "sqlSidebar",
+      itemType: "item",
+      class: styles["wrapper_color_sql-sidebar-item"]
     },
-    collapsible: {
-      true: styles.wrapper_collapsible_true,
-      false: ""
+    {
+      type: "sqlSidebar",
+      itemType: "subItem",
+      class: styles["wrapper_color_sql-sidebar-sub-item"]
     }
-  },
-  compoundVariants: [{
-    type: "main",
-    itemType: "item",
-    class: styles["wrapper_color_main-item"]
-  }, {
-    type: "main",
-    itemType: "subItem",
-    class: styles["wrapper_color_main-sub-item"]
-  }, {
-    type: "sqlSidebar",
-    itemType: "item",
-    class: styles["wrapper_color_sql-sidebar-item"]
-  }, {
-    type: "sqlSidebar",
-    itemType: "subItem",
-    class: styles["wrapper_color_sql-sidebar-sub-item"]
-  }],
-  defaultVariants: {
-    itemType: "item",
-    type: "main",
-    collapsible: false
-  }
+  ],
+  defaultVariants: { itemType: "item", type: "main", collapsible: false }
 });
 const _SidebarItemWrapper = ({
   as,
@@ -55,25 +42,46 @@ const _SidebarItemWrapper = ({
   ...props
 }, ref) => {
   const Component = as ?? "div";
-  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(wrapperVariants({
-    itemType: $level === 0 ? "item" : "subItem",
-    type: $type,
-    collapsible: $collapsible
-  }), className) });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cn(
+        wrapperVariants({
+          itemType: $level === 0 ? "item" : "subItem",
+          type: $type,
+          collapsible: $collapsible
+        }),
+        className
+      )
+    }
+  );
 };
 const SidebarItemWrapper = forwardRef(_SidebarItemWrapper);
-const SidebarNavigationItem = forwardRef(({
-  label,
-  level = 0,
-  icon,
-  selected,
-  iconDir,
-  disabled,
-  type = "main",
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, "aria-disabled": disabled, ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children: label }) });
-});
+const SidebarNavigationItem = forwardRef(
+  ({ label, level = 0, icon, selected, iconDir, disabled, type = "main", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      SidebarItemWrapper,
+      {
+        $level: level,
+        "data-selected": selected,
+        $type: type,
+        ref,
+        "aria-disabled": disabled,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          IconWrapper,
+          {
+            icon,
+            iconDir,
+            children: label
+          }
+        )
+      }
+    );
+  }
+);
 
 export { SidebarItemWrapper, SidebarNavigationItem };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/SidebarNavigationItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarNavigationItem/SidebarNavigationItem.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconWrapper } from '@/components/Collapsible/IconWrapper';\nimport { SidebarNavigationItemProps } from './SidebarNavigationItem.types';\nimport styles from './SidebarNavigationItem.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    itemType: {\n      item: styles.wrapper_itemtype_item,\n      subItem: styles['wrapper_itemtype_sub-item'],\n    },\n    // The colour set depends on BOTH the sidebar type and the item depth, so\n    // it is applied through the compoundVariants below rather than here.\n    type: { main: '', sqlSidebar: '' },\n    collapsible: { true: styles.wrapper_collapsible_true, false: '' },\n  },\n  compoundVariants: [\n    { type: 'main', itemType: 'item', class: styles['wrapper_color_main-item'] },\n    { type: 'main', itemType: 'subItem', class: styles['wrapper_color_main-sub-item'] },\n    {\n      type: 'sqlSidebar',\n      itemType: 'item',\n      class: styles['wrapper_color_sql-sidebar-item'],\n    },\n    {\n      type: 'sqlSidebar',\n      itemType: 'subItem',\n      class: styles['wrapper_color_sql-sidebar-sub-item'],\n    },\n  ],\n  defaultVariants: { itemType: 'item', type: 'main', collapsible: false },\n});\n\n// Polymorphic wrapper: SidebarCollapsibleItem renders it `as={Collapsible.Header}`.\n// Same shape as the Container polymorphic component (src/components/Container).\nexport interface SidebarItemWrapperProps<T extends ElementType = 'div'> {\n  as?: T;\n  $collapsible?: boolean;\n  $level?: number;\n  $type?: 'main' | 'sqlSidebar';\n}\n\ntype SidebarItemWrapperComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof SidebarItemWrapperProps<T>> &\n    SidebarItemWrapperProps<T>\n) => ReactNode;\n\nconst _SidebarItemWrapper = <T extends ElementType = 'div'>(\n  {\n    as,\n    $collapsible = false,\n    $level = 0,\n    $type = 'main',\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof SidebarItemWrapperProps<T>> &\n    SidebarItemWrapperProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        wrapperVariants({\n          itemType: $level === 0 ? 'item' : 'subItem',\n          type: $type,\n          collapsible: $collapsible,\n        }),\n        className\n      )}\n    />\n  );\n};\n\nexport const SidebarItemWrapper: SidebarItemWrapperComponent =\n  forwardRef(_SidebarItemWrapper);\n\nconst SidebarNavigationItem = forwardRef<HTMLDivElement, SidebarNavigationItemProps>(\n  (\n    { label, level = 0, icon, selected, iconDir, disabled, type = 'main', ...props },\n    ref\n  ) => {\n    return (\n      <SidebarItemWrapper\n        $level={level}\n        data-selected={selected}\n        $type={type}\n        ref={ref}\n        aria-disabled={disabled}\n        {...props}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {label}\n        </IconWrapper>\n      </SidebarItemWrapper>\n    );\n  }\n);\n\nexport { SidebarNavigationItem };\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","itemType","item","wrapper_itemtype_item","subItem","type","main","sqlSidebar","collapsible","true","wrapper_collapsible_true","false","compoundVariants","class","defaultVariants","_SidebarItemWrapper","as","$collapsible","$level","$type","className","props","ref","Component","cn","SidebarItemWrapper","forwardRef","SidebarNavigationItem","label","level","icon","selected","iconDir","disabled"],"mappings":";;;;;;;AAYA,MAAMA,eAAAA,GAAkBC,GAAAA,CAAIC,MAAAA,CAAOC,OAAAA,EAAS;AAAA,EAC1CC,QAAAA,EAAU;AAAA,IACRC,QAAAA,EAAU;AAAA,MACRC,MAAMJ,MAAAA,CAAOK,qBAAAA;AAAAA,MACbC,OAAAA,EAASN,OAAO,2BAA2B;AAAA,KAC7C;AAAA;AAAA;AAAA,IAGAO,IAAAA,EAAM;AAAA,MAAEC,IAAAA,EAAM,EAAA;AAAA,MAAIC,UAAAA,EAAY;AAAA,KAAG;AAAA,IACjCC,WAAAA,EAAa;AAAA,MAAEC,MAAMX,MAAAA,CAAOY,wBAAAA;AAAAA,MAA0BC,KAAAA,EAAO;AAAA;AAAG,GAClE;AAAA,EACAC,kBAAkB,CAChB;AAAA,IAAEP,IAAAA,EAAM,MAAA;AAAA,IAAQJ,QAAAA,EAAU,MAAA;AAAA,IAAQY,KAAAA,EAAOf,OAAO,yBAAyB;AAAA,GAAE,EAC3E;AAAA,IAAEO,IAAAA,EAAM,MAAA;AAAA,IAAQJ,QAAAA,EAAU,SAAA;AAAA,IAAWY,KAAAA,EAAOf,OAAO,6BAA6B;AAAA,GAAE,EAClF;AAAA,IACEO,IAAAA,EAAM,YAAA;AAAA,IACNJ,QAAAA,EAAU,MAAA;AAAA,IACVY,KAAAA,EAAOf,OAAO,gCAAgC;AAAA,GAChD,EACA;AAAA,IACEO,IAAAA,EAAM,YAAA;AAAA,IACNJ,QAAAA,EAAU,SAAA;AAAA,IACVY,KAAAA,EAAOf,OAAO,oCAAoC;AAAA,GACnD,CAAA;AAAA,EAEHgB,eAAAA,EAAiB;AAAA,IAAEb,QAAAA,EAAU,MAAA;AAAA,IAAQI,IAAAA,EAAM,MAAA;AAAA,IAAQG,WAAAA,EAAa;AAAA;AAClE,CAAC,CAAA;AAgBD,MAAMO,sBAAsB,CAC1B;AAAA,EACEC,EAAAA;AAAAA,EACAC,YAAAA,GAAe,KAAA;AAAA,EACfC,MAAAA,GAAS,CAAA;AAAA,EACTC,KAAAA,GAAQ,MAAA;AAAA,EACRC,SAAAA;AAAAA,EACA,GAAGC;AAEsB,CAAA,EAC3BC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYP,EAAAA,IAAM,KAAA;AACxB,EAAA,2BACG,SAAA,EAAA,EACC,GAAA,KACIK,KAAAA,EACJ,SAAA,EAAWG,GACT5B,eAAAA,CAAgB;AAAA,IACdK,QAAAA,EAAUiB,MAAAA,KAAW,CAAA,GAAI,MAAA,GAAS,SAAA;AAAA,IAClCb,IAAAA,EAAMc,KAAAA;AAAAA,IACNX,WAAAA,EAAaS;AAAAA,GACd,CAAA,EACDG,SACF,CAAA,EAAE,CAAA;AAGR,CAAA;AAEO,MAAMK,kBAAAA,GACXC,WAAWX,mBAAmB;AAEhC,MAAMY,qBAAAA,GAAwBD,WAC5B,CACE;AAAA,EAAEE,KAAAA;AAAAA,EAAOC,KAAAA,GAAQ,CAAA;AAAA,EAAGC,IAAAA;AAAAA,EAAMC,QAAAA;AAAAA,EAAUC,OAAAA;AAAAA,EAASC,QAAAA;AAAAA,EAAU5B,IAAAA,GAAO,MAAA;AAAA,EAAQ,GAAGgB;AAAM,CAAA,EAC/EC,GAAAA,KACG;AACH,EAAA,2BACG,kBAAA,EAAA,EACC,MAAA,EAAQO,OACR,eAAA,EAAeE,QAAAA,EACf,OAAO1B,IAAAA,EACP,GAAA,EACA,eAAA,EAAe4B,QAAAA,EACf,GAAIZ,KAAAA,EAEJ,QAAA,kBAAA,GAAA,CAAC,eACC,IAAA,EACA,OAAA,EAECO,iBACH,CAAA,EACF,CAAA;AAEJ,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarNavigationItem/SidebarNavigationItem.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconWrapper } from '@/components/Collapsible/IconWrapper';\nimport { SidebarNavigationItemProps } from './SidebarNavigationItem.types';\nimport styles from './SidebarNavigationItem.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    itemType: {\n      item: styles.wrapper_itemtype_item,\n      subItem: styles['wrapper_itemtype_sub-item'],\n    },\n    // The colour set depends on BOTH the sidebar type and the item depth, so\n    // it is applied through the compoundVariants below rather than here.\n    type: { main: '', sqlSidebar: '' },\n    collapsible: { true: styles.wrapper_collapsible_true, false: '' },\n  },\n  compoundVariants: [\n    { type: 'main', itemType: 'item', class: styles['wrapper_color_main-item'] },\n    { type: 'main', itemType: 'subItem', class: styles['wrapper_color_main-sub-item'] },\n    {\n      type: 'sqlSidebar',\n      itemType: 'item',\n      class: styles['wrapper_color_sql-sidebar-item'],\n    },\n    {\n      type: 'sqlSidebar',\n      itemType: 'subItem',\n      class: styles['wrapper_color_sql-sidebar-sub-item'],\n    },\n  ],\n  defaultVariants: { itemType: 'item', type: 'main', collapsible: false },\n});\n\n// Polymorphic wrapper: SidebarCollapsibleItem renders it `as={Collapsible.Header}`.\n// Same shape as the Container polymorphic component (src/components/Container).\nexport interface SidebarItemWrapperProps<T extends ElementType = 'div'> {\n  as?: T;\n  $collapsible?: boolean;\n  $level?: number;\n  $type?: 'main' | 'sqlSidebar';\n}\n\ntype SidebarItemWrapperComponent = <T extends ElementType = 'div'>(\n  props: Omit<ComponentProps<T>, keyof SidebarItemWrapperProps<T>> &\n    SidebarItemWrapperProps<T>\n) => ReactNode;\n\nconst _SidebarItemWrapper = <T extends ElementType = 'div'>(\n  {\n    as,\n    $collapsible = false,\n    $level = 0,\n    $type = 'main',\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof SidebarItemWrapperProps<T>> &\n    SidebarItemWrapperProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'div';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        wrapperVariants({\n          itemType: $level === 0 ? 'item' : 'subItem',\n          type: $type,\n          collapsible: $collapsible,\n        }),\n        className\n      )}\n    />\n  );\n};\n\nexport const SidebarItemWrapper: SidebarItemWrapperComponent =\n  forwardRef(_SidebarItemWrapper);\n\nconst SidebarNavigationItem = forwardRef<HTMLDivElement, SidebarNavigationItemProps>(\n  (\n    { label, level = 0, icon, selected, iconDir, disabled, type = 'main', ...props },\n    ref\n  ) => {\n    return (\n      <SidebarItemWrapper\n        $level={level}\n        data-selected={selected}\n        $type={type}\n        ref={ref}\n        aria-disabled={disabled}\n        {...props}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {label}\n        </IconWrapper>\n      </SidebarItemWrapper>\n    );\n  }\n);\n\nexport { SidebarNavigationItem };\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,eAAA,GAAkB,GAAA,CAAI,MAAA,CAAO,OAAA,EAAS;AAAA,EAC1C,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,MAAM,MAAA,CAAO,qBAAA;AAAA,MACb,OAAA,EAAS,OAAO,2BAA2B;AAAA,KAC7C;AAAA;AAAA;AAAA,IAGA,IAAA,EAAM,EAAE,IAAA,EAAM,EAAA,EAAI,YAAY,EAAA,EAAG;AAAA,IACjC,aAAa,EAAE,IAAA,EAAM,MAAA,CAAO,wBAAA,EAA0B,OAAO,EAAA;AAAG,GAClE;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,MAAM,MAAA,EAAQ,QAAA,EAAU,QAAQ,KAAA,EAAO,MAAA,CAAO,yBAAyB,CAAA,EAAE;AAAA,IAC3E,EAAE,MAAM,MAAA,EAAQ,QAAA,EAAU,WAAW,KAAA,EAAO,MAAA,CAAO,6BAA6B,CAAA,EAAE;AAAA,IAClF;AAAA,MACE,IAAA,EAAM,YAAA;AAAA,MACN,QAAA,EAAU,MAAA;AAAA,MACV,KAAA,EAAO,OAAO,gCAAgC;AAAA,KAChD;AAAA,IACA;AAAA,MACE,IAAA,EAAM,YAAA;AAAA,MACN,QAAA,EAAU,SAAA;AAAA,MACV,KAAA,EAAO,OAAO,oCAAoC;AAAA;AACpD,GACF;AAAA,EACA,iBAAiB,EAAE,QAAA,EAAU,QAAQ,IAAA,EAAM,MAAA,EAAQ,aAAa,KAAA;AAClE,CAAC,CAAA;AAgBD,MAAM,sBAAsB,CAC1B;AAAA,EACE,EAAA;AAAA,EACA,YAAA,GAAe,KAAA;AAAA,EACf,MAAA,GAAS,CAAA;AAAA,EACT,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,EAAA,IAAM,KAAA;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,eAAA,CAAgB;AAAA,UACd,QAAA,EAAU,MAAA,KAAW,CAAA,GAAI,MAAA,GAAS,SAAA;AAAA,UAClC,IAAA,EAAM,KAAA;AAAA,UACN,WAAA,EAAa;AAAA,SACd,CAAA;AAAA,QACD;AAAA;AACF;AAAA,GACF;AAEJ,CAAA;AAEO,MAAM,kBAAA,GACX,WAAW,mBAAmB;AAEhC,MAAM,qBAAA,GAAwB,UAAA;AAAA,EAC5B,CACE,EAAE,KAAA,EAAO,KAAA,GAAQ,GAAG,IAAA,EAAM,QAAA,EAAU,OAAA,EAAS,QAAA,EAAU,IAAA,GAAO,MAAA,EAAQ,GAAG,KAAA,IACzE,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,KAAA;AAAA,QACR,eAAA,EAAe,QAAA;AAAA,QACf,KAAA,EAAO,IAAA;AAAA,QACP,GAAA;AAAA,QACA,eAAA,EAAe,QAAA;AAAA,QACd,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,OAAA;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist/esm/components/SidebarNavigationTitle/SidebarNavigationTitle.css

@@ -1,6 +1,6 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. sqlSidebar) */
 .wrapper__ey0v7 {
-  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original styled rule used this
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the pre-migration styling used this
    same width fallback chain (100% → -webkit-fill-available → fill-available →
    stretch) so the title fills the available inline space. */
   width: 100%;
@@ -25,8 +25,8 @@
    wrapper `as={Collapsible.Trigger}`, so the element also carries
    `.collapsible__trigger`, whose `display/align-items/color/font/cursor`
    resets would otherwise win on CSS-module bundle order and strip the title's
-   own typography. The original styled-components cascade resolved in the
-   title's favour; the doubled class makes that deterministic. Only the
+   own typography. The pre-migration cascade resolved in the title's favour;
+   the doubled class makes that deterministic. Only the
    properties that actually conflict with the trigger live here — box metrics
    and the `--title-*` custom properties stay single-class above/below so the
    `type`/`collapsible` modifiers still override them. */
@@ -74,3 +74,4 @@
 .wrapper_collapsible_true__8ANnP {
   --title-pad-left: 0;
 }
+}

package/dist/esm/components/SidebarNavigationTitle/index.js

@@ -12,15 +12,9 @@ const wrapperVariants = cva(styles.wrapper, {
       main: styles.wrapper_type_main,
       sqlSidebar: styles["wrapper_type_sql-sidebar"]
     },
-    collapsible: {
-      true: styles.wrapper_collapsible_true,
-      false: ""
-    }
+    collapsible: { true: styles.wrapper_collapsible_true, false: "" }
   },
-  defaultVariants: {
-    type: "main",
-    collapsible: false
-  }
+  defaultVariants: { type: "main", collapsible: false }
 });
 const _SidebarTitleWrapper = ({
   as,
@@ -30,10 +24,17 @@ const _SidebarTitleWrapper = ({
   ...props
 }, ref) => {
   const Component = as ?? "button";
-  return /* @__PURE__ */ jsx(Component, { ref, ...props, className: cn(wrapperVariants({
-    type: $type,
-    collapsible: $collapsible
-  }), className) });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cn(
+        wrapperVariants({ type: $type, collapsible: $collapsible }),
+        className
+      )
+    }
+  );
 };
 const SidebarTitleWrapper = forwardRef(_SidebarTitleWrapper);
 const SidebarNavigationTitle = ({
@@ -44,7 +45,22 @@ const SidebarNavigationTitle = ({
   type = "main",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(SidebarTitleWrapper, { "data-selected": selected, $type: type, ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children: label }) });
+  return /* @__PURE__ */ jsx(
+    SidebarTitleWrapper,
+    {
+      "data-selected": selected,
+      $type: type,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        IconWrapper,
+        {
+          icon,
+          iconDir,
+          children: label
+        }
+      )
+    }
+  );
 };
 
 export { SidebarNavigationTitle, SidebarTitleWrapper };

package/dist/esm/components/SidebarNavigationTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarNavigationTitle/SidebarNavigationTitle.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconWrapper } from '@/components/Collapsible/IconWrapper';\nimport { SidebarNavigationTitleProps } from './SidebarNavigationTitle.types';\nimport styles from './SidebarNavigationTitle.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    type: {\n      main: styles.wrapper_type_main,\n      sqlSidebar: styles['wrapper_type_sql-sidebar'],\n    },\n    collapsible: { true: styles.wrapper_collapsible_true, false: '' },\n  },\n  defaultVariants: { type: 'main', collapsible: false },\n});\n\n// Polymorphic wrapper: SidebarCollapsibleTitle renders it `as={Collapsible.Trigger}`.\n// Same shape as the Container polymorphic component (src/components/Container).\nexport interface SidebarTitleWrapperProps<T extends ElementType = 'button'> {\n  as?: T;\n  $collapsible?: boolean;\n  $type?: 'main' | 'sqlSidebar';\n}\n\ntype SidebarTitleWrapperComponent = <T extends ElementType = 'button'>(\n  props: Omit<ComponentProps<T>, keyof SidebarTitleWrapperProps<T>> &\n    SidebarTitleWrapperProps<T>\n) => ReactNode;\n\nconst _SidebarTitleWrapper = <T extends ElementType = 'button'>(\n  {\n    as,\n    $collapsible = false,\n    $type = 'main',\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof SidebarTitleWrapperProps<T>> &\n    SidebarTitleWrapperProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'button';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        wrapperVariants({ type: $type, collapsible: $collapsible }),\n        className\n      )}\n    />\n  );\n};\n\nexport const SidebarTitleWrapper: SidebarTitleWrapperComponent =\n  forwardRef(_SidebarTitleWrapper);\n\nexport const SidebarNavigationTitle = ({\n  label,\n  icon,\n  iconDir,\n  selected,\n  type = 'main',\n  ...props\n}: SidebarNavigationTitleProps) => {\n  return (\n    <SidebarTitleWrapper\n      data-selected={selected}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {label}\n      </IconWrapper>\n    </SidebarTitleWrapper>\n  );\n};\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","type","main","wrapper_type_main","sqlSidebar","collapsible","true","wrapper_collapsible_true","false","defaultVariants","_SidebarTitleWrapper","as","$collapsible","$type","className","props","ref","Component","cn","SidebarTitleWrapper","forwardRef","SidebarNavigationTitle","label","icon","iconDir","selected"],"mappings":";;;;;;;AAYA,MAAMA,eAAAA,GAAkBC,GAAAA,CAAIC,MAAAA,CAAOC,OAAAA,EAAS;AAAA,EAC1CC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,MAAMJ,MAAAA,CAAOK,iBAAAA;AAAAA,MACbC,UAAAA,EAAYN,OAAO,0BAA0B;AAAA,KAC/C;AAAA,IACAO,WAAAA,EAAa;AAAA,MAAEC,MAAMR,MAAAA,CAAOS,wBAAAA;AAAAA,MAA0BC,KAAAA,EAAO;AAAA;AAAG,GAClE;AAAA,EACAC,eAAAA,EAAiB;AAAA,IAAER,IAAAA,EAAM,MAAA;AAAA,IAAQI,WAAAA,EAAa;AAAA;AAChD,CAAC,CAAA;AAeD,MAAMK,uBAAuB,CAC3B;AAAA,EACEC,EAAAA;AAAAA,EACAC,YAAAA,GAAe,KAAA;AAAA,EACfC,KAAAA,GAAQ,MAAA;AAAA,EACRC,SAAAA;AAAAA,EACA,GAAGC;AAEuB,CAAA,EAC5BC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYN,EAAAA,IAAM,QAAA;AACxB,EAAA,2BACG,SAAA,EAAA,EACC,GAAA,KACII,KAAAA,EACJ,SAAA,EAAWG,GACTtB,eAAAA,CAAgB;AAAA,IAAEK,IAAAA,EAAMY,KAAAA;AAAAA,IAAOR,WAAAA,EAAaO;AAAAA,GAAc,CAAA,EAC1DE,SACF,CAAA,EAAE,CAAA;AAGR,CAAA;AAEO,MAAMK,mBAAAA,GACXC,WAAWV,oBAAoB;AAE1B,MAAMW,yBAAyBA,CAAC;AAAA,EACrCC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAxB,IAAAA,GAAO,MAAA;AAAA,EACP,GAAGc;AACwB,CAAA,KAAM;AACjC,EAAA,uBACE,GAAA,CAAC,mBAAA,EAAA,EACC,eAAA,EAAeU,QAAAA,EACf,KAAA,EAAOxB,IAAAA,EACP,GAAIc,KAAAA,EAEJ,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,OAAA,EAECO,iBACH,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/SidebarNavigationTitle/SidebarNavigationTitle.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { IconWrapper } from '@/components/Collapsible/IconWrapper';\nimport { SidebarNavigationTitleProps } from './SidebarNavigationTitle.types';\nimport styles from './SidebarNavigationTitle.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    type: {\n      main: styles.wrapper_type_main,\n      sqlSidebar: styles['wrapper_type_sql-sidebar'],\n    },\n    collapsible: { true: styles.wrapper_collapsible_true, false: '' },\n  },\n  defaultVariants: { type: 'main', collapsible: false },\n});\n\n// Polymorphic wrapper: SidebarCollapsibleTitle renders it `as={Collapsible.Trigger}`.\n// Same shape as the Container polymorphic component (src/components/Container).\nexport interface SidebarTitleWrapperProps<T extends ElementType = 'button'> {\n  as?: T;\n  $collapsible?: boolean;\n  $type?: 'main' | 'sqlSidebar';\n}\n\ntype SidebarTitleWrapperComponent = <T extends ElementType = 'button'>(\n  props: Omit<ComponentProps<T>, keyof SidebarTitleWrapperProps<T>> &\n    SidebarTitleWrapperProps<T>\n) => ReactNode;\n\nconst _SidebarTitleWrapper = <T extends ElementType = 'button'>(\n  {\n    as,\n    $collapsible = false,\n    $type = 'main',\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof SidebarTitleWrapperProps<T>> &\n    SidebarTitleWrapperProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = as ?? 'button';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(\n        wrapperVariants({ type: $type, collapsible: $collapsible }),\n        className\n      )}\n    />\n  );\n};\n\nexport const SidebarTitleWrapper: SidebarTitleWrapperComponent =\n  forwardRef(_SidebarTitleWrapper);\n\nexport const SidebarNavigationTitle = ({\n  label,\n  icon,\n  iconDir,\n  selected,\n  type = 'main',\n  ...props\n}: SidebarNavigationTitleProps) => {\n  return (\n    <SidebarTitleWrapper\n      data-selected={selected}\n      $type={type}\n      {...props}\n    >\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n      >\n        {label}\n      </IconWrapper>\n    </SidebarTitleWrapper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,eAAA,GAAkB,GAAA,CAAI,MAAA,CAAO,OAAA,EAAS;AAAA,EAC1C,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,MAAM,MAAA,CAAO,iBAAA;AAAA,MACb,UAAA,EAAY,OAAO,0BAA0B;AAAA,KAC/C;AAAA,IACA,aAAa,EAAE,IAAA,EAAM,MAAA,CAAO,wBAAA,EAA0B,OAAO,EAAA;AAAG,GAClE;AAAA,EACA,eAAA,EAAiB,EAAE,IAAA,EAAM,MAAA,EAAQ,aAAa,KAAA;AAChD,CAAC,CAAA;AAeD,MAAM,uBAAuB,CAC3B;AAAA,EACE,EAAA;AAAA,EACA,YAAA,GAAe,KAAA;AAAA,EACf,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAEA,GAAA,KACG;AACH,EAAA,MAAM,YAAY,EAAA,IAAM,QAAA;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA;AAAA,QACT,gBAAgB,EAAE,IAAA,EAAM,KAAA,EAAO,WAAA,EAAa,cAAc,CAAA;AAAA,QAC1D;AAAA;AACF;AAAA,GACF;AAEJ,CAAA;AAEO,MAAM,mBAAA,GACX,WAAW,oBAAoB;AAE1B,MAAM,yBAAyB,CAAC;AAAA,EACrC,KAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,GAAG;AACL,CAAA,KAAmC;AACjC,EAAA,uBACE,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAe,QAAA;AAAA,MACf,KAAA,EAAO,IAAA;AAAA,MACN,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,OAAA;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;;;;"}