@clickhouse/click-ui 0.8.0 → 0.10.0-rc1

package/dist/cjs/components/Select/index.cjs

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

package/dist/cjs/components/Select/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","InternalSelect","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,cAAAA,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,eAAS,KAAK,CAAA;AAEtC,EAAA,MAAML,YAAAA,GAAeQ,iBAAAA,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,iBAAAA,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,iBAAAA,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,+BAAAA,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,sCACGgB,6BAAA,EAAA,EACC,QAAA,EACA,KAAA,EAAO,OAAOrB,cAAc,QAAA,GAAW,CAACA,SAAS,CAAA,GAAIS,gBACrD,IAAA,EACA,YAAA,EACA,UACA,GAAIW,gBAAAA,EACJ,GAAIZ,KAAAA,EAAM,CAAA;AAGhB;AAEAV,MAAAA,CAAOwB,KAAAA,GAAQC,0BAAAA;AACfzB,MAAAA,CAAO0B,IAAAA,GAAOC,yBAAAA;AACd3B,MAAAA,CAAO4B,eAAAA,GAAkBC,oCAAAA;;;;"}
+{"version":3,"file":"index.cjs","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":["useState","useCallback","open","useUpdateEffect","jsx","InternalSelect","SelectGroup","SelectItem","SelectItemDescription"],"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,GAAIA,cAAA;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,GAAIA,eAAS,KAAK,CAAA;AAEtC,EAAA,MAAM,YAAA,GAAeC,iBAAA;AAAA,IACnB,CAACC,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,GAAWD,iBAAA;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,GAAWA,iBAAA;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,EAAAE,+BAAA,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,uBACEC,cAAA;AAAA,IAACC,6BAAA;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,GAAQC,0BAAA;AACf,MAAA,CAAO,IAAA,GAAOC,yBAAA;AACd,MAAA,CAAO,eAAA,GAAkBC,oCAAA;;;;"}

package/dist/cjs/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/cjs/components/Separator/index.cjs

@@ -52,9 +52,14 @@ const Separator = ({
   size,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(RadixSeparator__namespace.Root, { orientation, ...props, className: cva.cn(separatorVariants({
-  variant: `${orientation}-${size}`
-}), className) });
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  RadixSeparator__namespace.Root,
+  {
+    orientation,
+    ...props,
+    className: cva.cn(separatorVariants({ variant: `${orientation}-${size}` }), className)
+  }
+);
 
 exports.Separator = Separator;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/Separator/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","RadixSeparator","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,iBAAAA,GAAoBC,0BAAAA,CAAIC,wBAAAA,CAAOC,SAAAA,EAAW;AAAA,EAC9CC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACP,eAAA,EAAiBH,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,gBAAA,EAAkBA,yBAAO,kCAAkC,CAAA;AAAA,MAC3D,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,cAAA,EAAgBA,yBAAO,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,qBACdC,cAAA,CAACC,0BAAe,IAAA,EAAf,EACC,aACA,GAAIF,KAAAA,EACJ,SAAA,EAAWG,MAAAA,CAAGb,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.cjs","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":["cva","styles","jsx","RadixSeparator","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAM,iBAAA,GAAoBA,0BAAA,CAAIC,wBAAA,CAAO,SAAA,EAAW;AAAA,EAC9C,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,gBAAA,EAAkBA,yBAAO,kCAAkC,CAAA;AAAA,MAC3D,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,cAAA,EAAgBA,yBAAO,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,qBACEC,cAAA;AAAA,EAACC,yBAAA,CAAe,IAAA;AAAA,EAAf;AAAA,IACC,WAAA;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,SAAA,EAAWC,MAAA,CAAG,iBAAA,CAAkB,EAAE,OAAA,EAAS,CAAA,EAAG,WAAW,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,CAAA,EAAG,SAAS;AAAA;AACnF;;;;"}

package/dist/cjs/components/SidebarCollapsibleItem/index.cjs

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

package/dist/cjs/components/SidebarCollapsibleItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsxs","Collapsible","jsx","SidebarItemWrapper","Header"],"mappings":";;;;;;;;;AAKO,MAAMA,sBAAAA,GAAyBC,iBAIpC,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,uBACEY,eAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,YAAA,EAEA,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAACC,wCAAA,EAAA,EACC,KACA,EAAA,EAAIF,uBAAAA,CAAYG,QAChB,IAAA,EACA,OAAA,EACA,cACA,YAAA,EAAY,IAAA,EACZ,QAAQT,KAAAA,EACR,KAAA,EAAOE,MACP,eAAA,EAAeD,QAAAA,EACf,eAAeC,IAAAA,KAAS,MAAA,EACxB,GAAIC,KAAAA,EAEHV,QAAAA,EAAAA,KAAAA,EACH,CAAA;AAAA,oBACAc,cAAA,CAACD,uBAAA,CAAY,OAAA,EAAZ,EAAoB,cAA6BZ,QAAAA,EAAS;AAAA,GAAA,EAC7D,CAAA;AAEJ,CACF;;;;"}
+{"version":3,"file":"index.cjs","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":["forwardRef","jsxs","Collapsible","jsx","SidebarItemWrapper"],"mappings":";;;;;;;;;AAKO,MAAM,sBAAA,GAAyBA,gBAAA;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,uBACEC,eAAA;AAAA,MAACC,uBAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,YAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,wCAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,IAAIF,uBAAA,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,0BACAC,cAAA,CAACD,uBAAA,CAAY,OAAA,EAAZ,EAAoB,cAA6B,QAAA,EAAS;AAAA;AAAA;AAAA,KAC7D;AAAA,EAEJ;AACF;;;;"}

package/dist/cjs/components/SidebarCollapsibleTitle/index.cjs

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

package/dist/cjs/components/SidebarCollapsibleTitle/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsxs","Collapsible","SidebarTitleWrapper","Trigger","jsx","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,uBACES,eAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,YAAA,EAEA,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAACE,0CAAA,EAAA,EACC,EAAA,EAAID,uBAAAA,CAAYE,OAAAA,EAChB,YAAA,EAAY,IAAA,EACZ,OAAA,EACA,eAAA,EAAeN,QAAAA,EACf,KAAA,EAAOC,IAAAA,EACP,GAAIC,KAAAA,EAEHH,QAAAA,EAAAA;AAAAA,MAAAA,IAAAA,IAAQD,YAAY,OAAA,oBACnBS,cAAA,CAACC,aACC,IAAA,EAAMT,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,MAGZL,KAAAA;AAAAA,MACAK,IAAAA,IAAQD,YAAY,KAAA,oBACnBS,cAAA,CAACC,aACC,IAAA,EAAMT,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,KAAA,EAGf,CAAA;AAAA,oBACAQ,cAAA,CAACH,uBAAA,CAAY,OAAA,EAAZ,EAAqBT,QAAAA,EAAS;AAAA,GAAA,EACjC,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","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":["jsxs","Collapsible","SidebarTitleWrapper","jsx","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,uBACEA,eAAA;AAAA,IAACC,uBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,YAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,eAAA;AAAA,UAACE,0CAAA;AAAA,UAAA;AAAA,YACC,IAAID,uBAAA,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,oBACnBE,cAAA;AAAA,gBAACC,SAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAM,IAAA;AAAA,kBACN,IAAA,EAAK;AAAA;AAAA,eACP;AAAA,cAED,KAAA;AAAA,cACA,IAAA,IAAQ,YAAY,KAAA,oBACnBD,cAAA;AAAA,gBAACC,SAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAM,IAAA;AAAA,kBACN,IAAA,EAAK;AAAA;AAAA;AACP;AAAA;AAAA,SAEJ;AAAA,wBACAD,cAAA,CAACF,uBAAA,CAAY,OAAA,EAAZ,EAAqB,QAAA,EAAS;AAAA;AAAA;AAAA,GACjC;AAEJ;;;;"}

package/dist/cjs/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/cjs/components/SidebarNavigationItem/index.cjs

@@ -18,37 +18,24 @@ const wrapperVariants = classVarianceAuthority.cva(SidebarNavigationItem_module.
     },
     // 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: SidebarNavigationItem_module.default.wrapper_collapsible_true, false: "" }
+  },
+  compoundVariants: [
+    { type: "main", itemType: "item", class: SidebarNavigationItem_module.default["wrapper_color_main-item"] },
+    { type: "main", itemType: "subItem", class: SidebarNavigationItem_module.default["wrapper_color_main-sub-item"] },
+    {
+      type: "sqlSidebar",
+      itemType: "item",
+      class: SidebarNavigationItem_module.default["wrapper_color_sql-sidebar-item"]
     },
-    collapsible: {
-      true: SidebarNavigationItem_module.default.wrapper_collapsible_true,
-      false: ""
+    {
+      type: "sqlSidebar",
+      itemType: "subItem",
+      class: SidebarNavigationItem_module.default["wrapper_color_sql-sidebar-sub-item"]
     }
-  },
-  compoundVariants: [{
-    type: "main",
-    itemType: "item",
-    class: SidebarNavigationItem_module.default["wrapper_color_main-item"]
-  }, {
-    type: "main",
-    itemType: "subItem",
-    class: SidebarNavigationItem_module.default["wrapper_color_main-sub-item"]
-  }, {
-    type: "sqlSidebar",
-    itemType: "item",
-    class: SidebarNavigationItem_module.default["wrapper_color_sql-sidebar-item"]
-  }, {
-    type: "sqlSidebar",
-    itemType: "subItem",
-    class: SidebarNavigationItem_module.default["wrapper_color_sql-sidebar-sub-item"]
-  }],
-  defaultVariants: {
-    itemType: "item",
-    type: "main",
-    collapsible: false
-  }
+  ],
+  defaultVariants: { itemType: "item", type: "main", collapsible: false }
 });
 const _SidebarItemWrapper = ({
   as,
@@ -59,25 +46,46 @@ const _SidebarItemWrapper = ({
   ...props
 }, ref) => {
   const Component = as ?? "div";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: cva.cn(wrapperVariants({
-    itemType: $level === 0 ? "item" : "subItem",
-    type: $type,
-    collapsible: $collapsible
-  }), className) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cva.cn(
+        wrapperVariants({
+          itemType: $level === 0 ? "item" : "subItem",
+          type: $type,
+          collapsible: $collapsible
+        }),
+        className
+      )
+    }
+  );
 };
 const SidebarItemWrapper = react.forwardRef(_SidebarItemWrapper);
-const SidebarNavigationItem = react.forwardRef(({
-  label,
-  level = 0,
-  icon,
-  selected,
-  iconDir,
-  disabled,
-  type = "main",
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, "aria-disabled": disabled, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children: label }) });
-});
+const SidebarNavigationItem = react.forwardRef(
+  ({ label, level = 0, icon, selected, iconDir, disabled, type = "main", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SidebarItemWrapper,
+      {
+        $level: level,
+        "data-selected": selected,
+        $type: type,
+        ref,
+        "aria-disabled": disabled,
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconWrapper.IconWrapper,
+          {
+            icon,
+            iconDir,
+            children: label
+          }
+        )
+      }
+    );
+  }
+);
 
 exports.SidebarItemWrapper = SidebarItemWrapper;
 exports.SidebarNavigationItem = SidebarNavigationItem;

package/dist/cjs/components/SidebarNavigationItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","IconWrapper"],"mappings":";;;;;;;;;;;AAYA,MAAMA,eAAAA,GAAkBC,0BAAAA,CAAIC,oCAAAA,CAAOC,OAAAA,EAAS;AAAA,EAC1CC,QAAAA,EAAU;AAAA,IACRC,QAAAA,EAAU;AAAA,MACRC,MAAMJ,oCAAAA,CAAOK,qBAAAA;AAAAA,MACbC,OAAAA,EAASN,qCAAO,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,oCAAAA,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,qCAAO,yBAAyB;AAAA,GAAE,EAC3E;AAAA,IAAEO,IAAAA,EAAM,MAAA;AAAA,IAAQJ,QAAAA,EAAU,SAAA;AAAA,IAAWY,KAAAA,EAAOf,qCAAO,6BAA6B;AAAA,GAAE,EAClF;AAAA,IACEO,IAAAA,EAAM,YAAA;AAAA,IACNJ,QAAAA,EAAU,MAAA;AAAA,IACVY,KAAAA,EAAOf,qCAAO,gCAAgC;AAAA,GAChD,EACA;AAAA,IACEO,IAAAA,EAAM,YAAA;AAAA,IACNJ,QAAAA,EAAU,SAAA;AAAA,IACVY,KAAAA,EAAOf,qCAAO,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,sCACG,SAAA,EAAA,EACC,GAAA,KACIK,KAAAA,EACJ,SAAA,EAAWG,OACT5B,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,iBAAWX,mBAAmB;AAEhC,MAAMY,qBAAAA,GAAwBD,iBAC5B,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,sCACG,kBAAA,EAAA,EACC,MAAA,EAAQO,OACR,eAAA,EAAeE,QAAAA,EACf,OAAO1B,IAAAA,EACP,GAAA,EACA,eAAA,EAAe4B,QAAAA,EACf,GAAIZ,KAAAA,EAEJ,QAAA,kBAAAa,cAAA,CAACC,2BACC,IAAA,EACA,OAAA,EAECP,iBACH,CAAA,EACF,CAAA;AAEJ,CACF;;;;;"}
+{"version":3,"file":"index.cjs","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":["cva","styles","jsx","cn","forwardRef","IconWrapper"],"mappings":";;;;;;;;;;;AAYA,MAAM,eAAA,GAAkBA,0BAAA,CAAIC,oCAAA,CAAO,OAAA,EAAS;AAAA,EAC1C,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,MAAMA,oCAAA,CAAO,qBAAA;AAAA,MACb,OAAA,EAASA,qCAAO,2BAA2B;AAAA,KAC7C;AAAA;AAAA;AAAA,IAGA,IAAA,EAAM,EAAE,IAAA,EAAM,EAAA,EAAI,YAAY,EAAA,EAAG;AAAA,IACjC,aAAa,EAAE,IAAA,EAAMA,oCAAA,CAAO,wBAAA,EAA0B,OAAO,EAAA;AAAG,GAClE;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,MAAM,MAAA,EAAQ,QAAA,EAAU,QAAQ,KAAA,EAAOA,oCAAA,CAAO,yBAAyB,CAAA,EAAE;AAAA,IAC3E,EAAE,MAAM,MAAA,EAAQ,QAAA,EAAU,WAAW,KAAA,EAAOA,oCAAA,CAAO,6BAA6B,CAAA,EAAE;AAAA,IAClF;AAAA,MACE,IAAA,EAAM,YAAA;AAAA,MACN,QAAA,EAAU,MAAA;AAAA,MACV,KAAA,EAAOA,qCAAO,gCAAgC;AAAA,KAChD;AAAA,IACA;AAAA,MACE,IAAA,EAAM,YAAA;AAAA,MACN,QAAA,EAAU,SAAA;AAAA,MACV,KAAA,EAAOA,qCAAO,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,uBACEC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWC,MAAA;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,GACXC,iBAAW,mBAAmB;AAEhC,MAAM,qBAAA,GAAwBA,gBAAA;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,uBACEF,cAAA;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,kBAAAA,cAAA;AAAA,UAACG,uBAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,OAAA;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;;"}

package/dist/cjs/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/cjs/components/SidebarNavigationTitle/index.cjs

@@ -16,15 +16,9 @@ const wrapperVariants = classVarianceAuthority.cva(SidebarNavigationTitle_module
       main: SidebarNavigationTitle_module.default.wrapper_type_main,
       sqlSidebar: SidebarNavigationTitle_module.default["wrapper_type_sql-sidebar"]
     },
-    collapsible: {
-      true: SidebarNavigationTitle_module.default.wrapper_collapsible_true,
-      false: ""
-    }
+    collapsible: { true: SidebarNavigationTitle_module.default.wrapper_collapsible_true, false: "" }
   },
-  defaultVariants: {
-    type: "main",
-    collapsible: false
-  }
+  defaultVariants: { type: "main", collapsible: false }
 });
 const _SidebarTitleWrapper = ({
   as,
@@ -34,10 +28,17 @@ const _SidebarTitleWrapper = ({
   ...props
 }, ref) => {
   const Component = as ?? "button";
-  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: cva.cn(wrapperVariants({
-    type: $type,
-    collapsible: $collapsible
-  }), className) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      ...props,
+      className: cva.cn(
+        wrapperVariants({ type: $type, collapsible: $collapsible }),
+        className
+      )
+    }
+  );
 };
 const SidebarTitleWrapper = react.forwardRef(_SidebarTitleWrapper);
 const SidebarNavigationTitle = ({
@@ -48,7 +49,22 @@ const SidebarNavigationTitle = ({
   type = "main",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarTitleWrapper, { "data-selected": selected, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children: label }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarTitleWrapper,
+    {
+      "data-selected": selected,
+      $type: type,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        IconWrapper.IconWrapper,
+        {
+          icon,
+          iconDir,
+          children: label
+        }
+      )
+    }
+  );
 };
 
 exports.SidebarNavigationTitle = SidebarNavigationTitle;