@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/esm/components/RadioGroup/RadioGroup.css

@@ -0,0 +1,99 @@
+.radio-group__RXgmX {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--click-checkbox-space-gap);
+}
+
+.radio-group_inline__Bn4-S {
+  flex-direction: row;
+}
+
+.radio-group_inline_false__OXI3T {
+  flex-direction: column;
+}
+
+.radio-group_error__cijEQ label {
+  color: var(--click-field-color-label-error);
+}
+
+/* The item class is applied alongside FormRoot's styled-components class.
+   The .item.item double-class boost matches the specificity behavior of the
+   original `styled(FormRoot)` chain so these overrides reliably beat FormRoot's
+   own declarations regardless of stylesheet insertion order between CSS Modules
+   and the runtime-injected styled-components. */
+.item__W9-K2.item__W9-K2 {
+  display: flex;
+  width: auto;
+  padding: var(--click-checkbox-space-all);
+  align-items: center;
+  gap: var(--click-checkbox-space-gap);
+}
+
+.radio-input__KMmKv {
+  display: flex;
+  width: 1rem;
+  height: 1rem;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--click-radio-color-stroke-default);
+  border-radius: var(--click-radio-radii-all);
+  background: var(--click-radio-color-background-default);
+  outline: none;
+  cursor: pointer;
+}
+
+.radio-input__KMmKv:hover {
+  background: var(--click-radio-color-background-hover);
+}
+
+.radio-input__KMmKv[data-state='checked'] {
+  border-color: var(--click-radio-color-stroke-active);
+  background: var(--click-radio-color-background-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after the checked state to mirror the source cascade order; matches
+   the styled-components rule which used a nested `&[data-disabled]` block placed
+   after `&[data-state="checked"]`. */
+.radio-input__KMmKv[data-disabled] {
+  border-color: var(--click-radio-color-stroke-disabled);
+  background: var(--click-radio-color-background-disabled);
+}
+
+.radio-indicator__rrk6W {
+  background: var(--click-radio-color-background-default);
+}
+
+.radio-indicator__rrk6W::after {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--click-radio-color-indicator-default);
+}
+
+.radio-indicator__rrk6W::after:hover {
+  background: var(--click-radio-color-indicator-hover);
+}
+
+.radio-indicator__rrk6W[data-state='checked'] {
+  background: var(--click-radio-color-background-active);
+}
+
+.radio-indicator__rrk6W[data-state='checked']::after {
+  background: var(--click-radio-color-indicator-active);
+}
+
+.radio-indicator__rrk6W:hover {
+  background: var(--click-radio-color-background-hover);
+}
+
+.radio-indicator__rrk6W[data-disabled] {
+  background: var(--click-radio-color-background-disabled);
+}
+
+.radio-indicator__rrk6W[data-disabled]::after {
+  background: var(--click-radio-color-indicator-disabled);
+}
+/* stylelint-enable no-descending-specificity */

package/dist/esm/components/RadioGroup/RadioGroup.module.css.js

@@ -0,0 +1,13 @@
+const item = "item__W9-K2";
+const styles = {
+	"radio-group": "radio-group__RXgmX",
+	"radio-group_inline": "radio-group_inline__Bn4-S",
+	"radio-group_inline_false": "radio-group_inline_false__OXI3T",
+	"radio-group_error": "radio-group_error__cijEQ",
+	item: item,
+	"radio-input": "radio-input__KMmKv",
+	"radio-indicator": "radio-indicator__rrk6W"
+};
+
+export { styles as default, item };
+//# sourceMappingURL=RadioGroup.module.css.js.map

package/dist/esm/components/RadioGroup/RadioGroup.module.css.js.map

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

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

@@ -1,23 +1,32 @@
+import "./RadioGroup.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import { useId } from 'react';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './RadioGroup.module.css.js';
 import { FormRoot } from '../FormContainer/FormRoot.js';
 import { FormElementContainer } from '../FormContainer/FormElementContainer.js';
 import { Error } from '../FormContainer/Error.js';
 import { Label } from '../Label/index.js';
 import { GenericLabel } from '../GenericLabel/index.js';
+import { cva } from 'class-variance-authority';
 
-const RadioGroupRoot = styled(RadixRadioGroup.Root).withConfig({
-  componentId: "sc-p6cydr-0"
-})(["display:flex;flex-wrap:wrap;gap:", ";flex-direction:", ";label{", "}"], ({
-  theme
-}) => theme.click.checkbox.space.gap, ({
-  $inline = true
-}) => $inline === true ? "row" : "column", ({
-  $error,
-  theme
-}) => $error ? `color: ${theme.click.field.color.label.error};` : "");
+const radioGroupVariants = cva(styles["radio-group"], {
+  variants: {
+    inline: {
+      true: styles["radio-group_inline"],
+      false: styles["radio-group_inline_false"]
+    },
+    error: {
+      true: styles["radio-group_error"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    inline: true,
+    error: false
+  }
+});
 const RadioGroup = ({
   children,
   inline,
@@ -28,11 +37,15 @@ const RadioGroup = ({
   label,
   disabled,
   id,
+  className,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
     /* @__PURE__ */ jsxs(FormElementContainer, { children: [
-      /* @__PURE__ */ jsx(RadioGroupRoot, { orientation: inline ? "horizontal" : "vertical", disabled, id, $error: !!error, dir: itemDir, $inline: inline, ...props, children }),
+      /* @__PURE__ */ jsx(RadixRadioGroup.Root, { orientation: inline ? "horizontal" : "vertical", disabled, id, dir: itemDir, ...props, className: cn(radioGroupVariants({
+        inline: inline === false ? false : true,
+        error: !!error
+      }), className), children }),
       !!error && error !== true && /* @__PURE__ */ jsx(Error, { children: error })
     ] }),
     label && /* @__PURE__ */ jsx(Label, { htmlFor: id, disabled, error: !!error, children: label })
@@ -44,79 +57,17 @@ const RadioGroupItem = ({
   value,
   disabled,
   required,
+  className,
   ...props
 }) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxs(Wrapper, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, children: [
-    /* @__PURE__ */ jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, children: /* @__PURE__ */ jsx(RadioGroupIndicator, {}) }),
+  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, className: cn(styles.item, className), children: [
+    /* @__PURE__ */ jsx(RadixRadioGroup.Item, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, className: styles["radio-input"], children: /* @__PURE__ */ jsx(RadixRadioGroup.Indicator, { className: styles["radio-indicator"] }) }),
     label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
 RadioGroupItem.displayName = "RadioGroupItem";
 RadioGroup.Item = RadioGroupItem;
-const Wrapper = styled(FormRoot).withConfig({
-  componentId: "sc-p6cydr-1"
-})(["padding:", ";display:flex;align-items:center;gap:", ";width:auto;"], ({
-  theme
-}) => theme.click.checkbox.space.all, ({
-  theme
-}) => theme.click.checkbox.space.gap);
-const RadioInput = styled(RadixRadioGroup.Item).withConfig({
-  componentId: "sc-p6cydr-2"
-})(["display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;", ";"], ({
-  theme
-}) => `
-    border-radius: ${theme.click.radio.radii.all};
-    width: 1rem;
-    height: 1rem;
-    background: ${theme.click.radio.color.background.default};
-    border: 1px solid ${theme.click.radio.color.stroke.default};
-
-    &:hover {
-      background: ${theme.click.radio.color.background.hover};
-    }
-    &[data-state="checked"] {
-      border-color: ${theme.click.radio.color.stroke.active};
-      background: ${theme.click.radio.color.background.active};
-    }
-    &[data-disabled] {
-      background: ${theme.click.radio.color.background.disabled};
-      border-color: ${theme.click.radio.color.stroke.disabled};
-    }
-  `);
-const RadioGroupIndicator = styled(RadixRadioGroup.Indicator).withConfig({
-  componentId: "sc-p6cydr-3"
-})(["", ""], ({
-  theme
-}) => `
-    background: ${theme.click.radio.color.background.default};
-    &::after {
-      content: '';
-      display: block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background-color: ${theme.click.radio.color.indicator.default};
-      &:hover {
-        background: ${theme.click.radio.color.indicator.hover};
-      }
-    }
-    &[data-state="checked"] {
-      background: ${theme.click.radio.color.background.active};
-      &::after {
-        background: ${theme.click.radio.color.indicator.active};
-      }
-    }
-    &:hover {
-      background: ${theme.click.radio.color.background.hover};
-    }
-    &[data-disabled] {
-      background: ${theme.click.radio.color.background.disabled};
-      &::after {
-        background: ${theme.click.radio.color.indicator.disabled};
-      }
-    }
-  `);
 
 export { RadioGroup };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { HTMLAttributes, ReactNode, useId } from 'react';\nimport { styled } from 'styled-components';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { Label } from '@/components/Label';\nimport { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\n\nexport interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {\n  /** Whether to display radio items inline (horizontally) */\n  inline?: boolean;\n  /** The orientation of the label relative to the radio group */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Text direction for radio items - ltr or rtl */\n  itemDir?: 'rtl' | 'ltr';\n  /** The label text displayed next to the radio group */\n  label?: ReactNode;\n  /** Error message to display below the radio group */\n  error?: ReactNode;\n}\n\nconst RadioGroupRoot = styled(RadixRadioGroup.Root)<{\n  $error: boolean;\n  $inline?: boolean;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ theme }) => theme.click.checkbox.space.gap};\n  flex-direction: ${({ $inline = true }) => ($inline === true ? 'row' : 'column')};\n  label {\n    ${({ $error, theme }) =>\n      $error ? `color: ${theme.click.field.color.label.error};` : ''}\n  }\n`;\n\nexport const RadioGroup = ({\n  children,\n  inline,\n  orientation,\n  dir,\n  error,\n  itemDir,\n  label,\n  disabled,\n  id,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <RadioGroupRoot\n          orientation={inline ? 'horizontal' : 'vertical'}\n          disabled={disabled}\n          id={id}\n          $error={!!error}\n          dir={itemDir}\n          $inline={inline}\n          {...props}\n        >\n          {children}\n        </RadioGroupRoot>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\ninterface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {\n  /** The label text displayed next to the radio item */\n  label?: ReactNode;\n}\n\nexport type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;\n\nconst RadioGroupItem = ({\n  id,\n  label,\n  value,\n  disabled,\n  required,\n  ...props\n}: RadioGroupItemProps) => {\n  const defaultId = useId();\n  return (\n    <Wrapper\n      $orientation=\"horizontal\"\n      $dir=\"end\"\n      $addLabelPadding={false}\n      {...props}\n    >\n      <RadioInput\n        value={value}\n        id={id ?? defaultId}\n        disabled={disabled}\n        required={required}\n        aria-label={`${label}`}\n      >\n        <RadioGroupIndicator />\n      </RadioInput>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </Wrapper>\n  );\n};\n\nRadioGroupItem.displayName = 'RadioGroupItem';\nRadioGroup.Item = RadioGroupItem;\n\nconst Wrapper = styled(FormRoot)`\n  padding: ${({ theme }) => theme.click.checkbox.space.all};\n\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.click.checkbox.space.gap};\n  width: auto;\n`;\n\nconst RadioInput = styled(RadixRadioGroup.Item)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  outline: none;\n  cursor: pointer;\n  ${({ theme }) => `\n    border-radius: ${theme.click.radio.radii.all};\n    width: 1rem;\n    height: 1rem;\n    background: ${theme.click.radio.color.background.default};\n    border: 1px solid ${theme.click.radio.color.stroke.default};\n\n    &:hover {\n      background: ${theme.click.radio.color.background.hover};\n    }\n    &[data-state=\"checked\"] {\n      border-color: ${theme.click.radio.color.stroke.active};\n      background: ${theme.click.radio.color.background.active};\n    }\n    &[data-disabled] {\n      background: ${theme.click.radio.color.background.disabled};\n      border-color: ${theme.click.radio.color.stroke.disabled};\n    }\n  `};\n`;\n\nconst RadioGroupIndicator = styled(RadixRadioGroup.Indicator)`\n  ${({ theme }) => `\n    background: ${theme.click.radio.color.background.default};\n    &::after {\n      content: '';\n      display: block;\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background-color: ${theme.click.radio.color.indicator.default};\n      &:hover {\n        background: ${theme.click.radio.color.indicator.hover};\n      }\n    }\n    &[data-state=\"checked\"] {\n      background: ${theme.click.radio.color.background.active};\n      &::after {\n        background: ${theme.click.radio.color.indicator.active};\n      }\n    }\n    &:hover {\n      background: ${theme.click.radio.color.background.hover};\n    }\n    &[data-disabled] {\n      background: ${theme.click.radio.color.background.disabled};\n      &::after {\n        background: ${theme.click.radio.color.indicator.disabled};\n      }\n    }\n  `}\n`;\n"],"names":["RadioGroupRoot","styled","RadixRadioGroup","Root","withConfig","componentId","theme","click","checkbox","space","gap","$inline","$error","field","color","label","error","RadioGroup","children","inline","orientation","dir","itemDir","disabled","id","props","RadioGroupItem","value","required","defaultId","useId","displayName","Item","Wrapper","FormRoot","all","RadioInput","radio","radii","background","default","stroke","hover","active","RadioGroupIndicator","Indicator","indicator"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import * as RadixRadioGroup from '@radix-ui/react-radio-group';\nimport { HTMLAttributes, ReactNode, useId } from 'react';\nimport { GenericLabel } from '@/components/GenericLabel';\nimport { Label } from '@/components/Label';\nimport { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './RadioGroup.module.css';\n\nexport interface RadioGroupProps extends Omit<RadixRadioGroup.RadioGroupProps, 'dir'> {\n  /** Whether to display radio items inline (horizontally) */\n  inline?: boolean;\n  /** The orientation of the label relative to the radio group */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction/position of the label - start places label before, end places label after */\n  dir?: 'start' | 'end';\n  /** Text direction for radio items - ltr or rtl */\n  itemDir?: 'rtl' | 'ltr';\n  /** The label text displayed next to the radio group */\n  label?: ReactNode;\n  /** Error message to display below the radio group */\n  error?: ReactNode;\n}\n\nconst radioGroupVariants = cva(styles['radio-group'], {\n  variants: {\n    inline: {\n      true: styles['radio-group_inline'],\n      false: styles['radio-group_inline_false'],\n    },\n    error: {\n      true: styles['radio-group_error'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    inline: true,\n    error: false,\n  },\n});\n\nexport const RadioGroup = ({\n  children,\n  inline,\n  orientation,\n  dir,\n  error,\n  itemDir,\n  label,\n  disabled,\n  id,\n  className,\n  ...props\n}: RadioGroupProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <RadixRadioGroup.Root\n          orientation={inline ? 'horizontal' : 'vertical'}\n          disabled={disabled}\n          id={id}\n          dir={itemDir}\n          {...props}\n          className={cn(\n            radioGroupVariants({\n              inline: inline === false ? false : true,\n              error: !!error,\n            }),\n            className\n          )}\n        >\n          {children}\n        </RadixRadioGroup.Root>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <Label\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n        >\n          {label}\n        </Label>\n      )}\n    </FormRoot>\n  );\n};\n\ninterface RadioGroupInputProps extends RadixRadioGroup.RadioGroupItemProps {\n  /** The label text displayed next to the radio item */\n  label?: ReactNode;\n}\n\nexport type RadioGroupItemProps = RadioGroupInputProps & HTMLAttributes<HTMLDivElement>;\n\nconst RadioGroupItem = ({\n  id,\n  label,\n  value,\n  disabled,\n  required,\n  className,\n  ...props\n}: RadioGroupItemProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation=\"horizontal\"\n      $dir=\"end\"\n      $addLabelPadding={false}\n      {...props}\n      className={cn(styles.item, className)}\n    >\n      <RadixRadioGroup.Item\n        value={value}\n        id={id ?? defaultId}\n        disabled={disabled}\n        required={required}\n        aria-label={`${label}`}\n        className={styles['radio-input']}\n      >\n        <RadixRadioGroup.Indicator className={styles['radio-indicator']} />\n      </RadixRadioGroup.Item>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nRadioGroupItem.displayName = 'RadioGroupItem';\nRadioGroup.Item = RadioGroupItem;\n"],"names":["radioGroupVariants","cva","styles","variants","inline","true","false","error","defaultVariants","RadioGroup","children","orientation","dir","itemDir","label","disabled","id","className","props","cn","RadioGroupItem","value","required","defaultId","useId","item","displayName","Item"],"mappings":";;;;;;;;;;;;AAuBA,MAAMA,kBAAAA,GAAqBC,GAAAA,CAAIC,MAAAA,CAAO,aAAa,CAAA,EAAG;AAAA,EACpDC,QAAAA,EAAU;AAAA,IACRC,MAAAA,EAAQ;AAAA,MACNC,IAAAA,EAAMH,OAAO,oBAAoB,CAAA;AAAA,MACjCI,KAAAA,EAAOJ,OAAO,0BAA0B;AAAA,KAC1C;AAAA,IACAK,KAAAA,EAAO;AAAA,MACLF,IAAAA,EAAMH,OAAO,mBAAmB,CAAA;AAAA,MAChCI,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAE,eAAAA,EAAiB;AAAA,IACfJ,MAAAA,EAAQ,IAAA;AAAA,IACRG,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAME,aAAaA,CAAC;AAAA,EACzBC,QAAAA;AAAAA,EACAN,MAAAA;AAAAA,EACAO,WAAAA;AAAAA,EACAC,GAAAA;AAAAA,EACAL,KAAAA;AAAAA,EACAM,OAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,EAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACY,CAAA,KAAM;AACrB,EAAA,4BACG,QAAA,EAAA,EACC,YAAA,EAAcP,aACd,IAAA,EAAMC,GAAAA,EACN,kBAAgB,IAAA,EAEhB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,oBAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,eAAA,CAAgB,IAAA,EAAhB,EACC,WAAA,EAAaR,SAAS,YAAA,GAAe,UAAA,EACrC,QAAA,EACA,EAAA,EACA,KAAKS,OAAAA,KACDK,KAAAA,EACJ,SAAA,EAAWC,GACTnB,kBAAAA,CAAmB;AAAA,QACjBI,MAAAA,EAAQA,MAAAA,KAAW,KAAA,GAAQ,KAAA,GAAQ,IAAA;AAAA,QACnCG,KAAAA,EAAO,CAAC,CAACA;AAAAA,OACV,CAAA,EACDU,SACF,CAAA,EAECP,QAAAA,EACH,CAAA;AAAA,MACC,CAAC,CAACH,KAAAA,IAASA,UAAU,IAAA,oBAAQ,GAAA,CAAC,SAAOA,QAAAA,EAAAA,KAAAA,EAAM;AAAA,KAAA,EAC9C,CAAA;AAAA,IACCO,KAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAASE,EAAAA,EACT,UACA,KAAA,EAAO,CAAC,CAACT,KAAAA,EAERO,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;AASA,MAAMM,iBAAiBA,CAAC;AAAA,EACtBJ,EAAAA;AAAAA,EACAF,KAAAA;AAAAA,EACAO,KAAAA;AAAAA,EACAN,QAAAA;AAAAA,EACAO,QAAAA;AAAAA,EACAL,SAAAA;AAAAA,EACA,GAAGC;AACgB,CAAA,KAAM;AACzB,EAAA,MAAMK,YAAYC,KAAAA,EAAM;AACxB,EAAA,uBACE,IAAA,CAAC,QAAA,EAAA,EACC,YAAA,EAAa,YAAA,EACb,MAAK,KAAA,EACL,gBAAA,EAAkB,KAAA,EAClB,GAAIN,OACJ,SAAA,EAAWC,EAAAA,CAAGjB,MAAAA,CAAOuB,IAAAA,EAAMR,SAAS,CAAA,EAEpC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,eAAA,CAAgB,IAAA,EAAhB,EACC,KAAA,EACA,EAAA,EAAID,MAAMO,SAAAA,EACV,QAAA,EACA,QAAA,EACA,YAAA,EAAY,CAAA,EAAGT,KAAK,IACpB,SAAA,EAAWZ,MAAAA,CAAO,aAAa,CAAA,EAE/B,QAAA,kBAAA,GAAA,CAAC,eAAA,CAAgB,SAAA,EAAhB,EAA0B,SAAA,EAAWA,MAAAA,CAAO,iBAAiB,CAAA,EAAE,CAAA,EAClE,CAAA;AAAA,IACCY,yBACC,GAAA,CAAC,YAAA,EAAA,EACC,SAASE,EAAAA,IAAMO,SAAAA,EACf,UAECT,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AAEAM,cAAAA,CAAeM,WAAAA,GAAc,gBAAA;AAC7BjB,UAAAA,CAAWkB,IAAAA,GAAOP,cAAAA;;;;"}

package/dist/esm/components/Select/MultiSelectValue.css

@@ -0,0 +1,19 @@
+.badge-list__WpJAq {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: inherit;
+  color: inherit;
+  font: inherit;
+}
+
+.multi-select-badge__vk7YC {
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same width fallback chain so the badge fills the available inline space up to its content width. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  max-width: fit-content;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+}

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

@@ -1,18 +1,13 @@
+import "./MultiSelectValue.css";
 import { jsx } from 'react/jsx-runtime';
 import { useId, useState, useEffect } from 'react';
 import ReactSortableModule from 'react-sortablejs/dist/index.js';
-import { styled } from 'styled-components';
+import styles from './MultiSelectValue.module.css.js';
 import { Badge } from '../Badge/index.js';
 
 const {
   ReactSortable
 } = ReactSortableModule;
-const BadgeList = styled.div.withConfig({
-  componentId: "sc-1ryyiol-0"
-})(["display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:inherit;font:inherit;color:inherit;"]);
-const MultiSelectBadge = styled(Badge).withConfig({
-  componentId: "sc-1ryyiol-1"
-})(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;max-width:fit-content;"]);
 const MultiSelectValue = ({
   selectedValues,
   valueNode,
@@ -35,7 +30,7 @@ const MultiSelectValue = ({
   if (selectedValues.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(BadgeList, { as: ReactSortable, disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
+  return /* @__PURE__ */ jsx(ReactSortable, { className: styles["badge-list"], disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
     const {
       newDraggableIndex,
       oldDraggableIndex
@@ -67,7 +62,7 @@ const MultiSelectValue = ({
         }
       };
     }
-    return /* @__PURE__ */ jsx(MultiSelectBadge, { size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
+    return /* @__PURE__ */ jsx(Badge, { className: styles["multi-select-badge"], size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
   }) });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectValue.js","sources":["../../../../src/components/Select/MultiSelectValue.tsx"],"sourcesContent":["import {\n  Badge,\n  BadgeProps,\n  DismissibleBadge,\n  NonDismissibleBadge,\n} from '@/components/Badge';\nimport { MouseEvent, useEffect, useId, useState } from 'react';\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type { ItemInterface } from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nimport { styled } from 'styled-components';\nimport { SelectItemProps } from './common/types';\n\nconst BadgeList = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  flex-wrap: wrap;\n  gap: inherit;\n  font: inherit;\n  color: inherit;\n`;\n\nconst MultiSelectBadge = styled(Badge)`\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  max-width: fit-content;\n`;\n\ninterface MultiSelectValueProps {\n  selectedValues: string[];\n  valueNode: Map<string, SelectItemProps>;\n  onChange: (selectedValues: string[]) => void;\n  onSelect: (selectedValue: string) => void;\n  sortable: boolean;\n  disabled: boolean;\n}\n\nexport const MultiSelectValue = ({\n  selectedValues,\n  valueNode,\n  onChange,\n  sortable,\n  onSelect,\n  disabled,\n}: MultiSelectValueProps) => {\n  const id = useId();\n  const [values, setValues] = useState<ItemInterface[]>(\n    selectedValues.map(value => ({\n      id: `multi-select-${id}-${value}`,\n      value,\n    }))\n  );\n  useEffect(() => {\n    setValues(\n      selectedValues.map(value => ({\n        id: `multi-select-${id}-${value}`,\n        value,\n      }))\n    );\n  }, [id, selectedValues]);\n  if (selectedValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <BadgeList\n      as={ReactSortable}\n      disabled={!sortable}\n      list={values}\n      setList={setValues}\n      onEnd={e => {\n        const { newDraggableIndex, oldDraggableIndex } = e;\n        if (\n          typeof newDraggableIndex === 'number' &&\n          typeof oldDraggableIndex === 'number' &&\n          oldDraggableIndex !== newDraggableIndex\n        ) {\n          const temp = selectedValues[oldDraggableIndex];\n          selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];\n          selectedValues[newDraggableIndex] = temp;\n          onChange(selectedValues);\n        }\n      }}\n      revertOnSpill\n    >\n      {selectedValues.map(value => {\n        const nodeProps = valueNode.get(value) ?? { children: value, value: value };\n        let otherProps: BadgeProps = {\n          text: nodeProps.label ?? nodeProps.children,\n          icon: nodeProps?.icon,\n          iconDir: nodeProps?.iconDir,\n        } as NonDismissibleBadge;\n        if (!disabled && !nodeProps.disabled) {\n          otherProps = {\n            ...otherProps,\n            dismissible: true,\n            onClose: (e: MouseEvent<HTMLOrSVGElement>) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onSelect(nodeProps.value);\n            },\n          } as DismissibleBadge;\n        }\n        return (\n          <MultiSelectBadge\n            key={`multi-select-${id}-${value}`}\n            size=\"sm\"\n            state={disabled ? 'disabled' : 'default'}\n            {...otherProps}\n          />\n        );\n      })}\n    </BadgeList>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","BadgeList","styled","div","withConfig","componentId","MultiSelectBadge","Badge","MultiSelectValue","selectedValues","valueNode","onChange","sortable","onSelect","disabled","id","useId","values","setValues","useState","map","value","useEffect","length","e","newDraggableIndex","oldDraggableIndex","temp","nodeProps","get","children","otherProps","text","label","icon","iconDir","dismissible","onClose","preventDefault","stopPropagation"],"mappings":"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"}
+{"version":3,"file":"MultiSelectValue.js","sources":["../../../../src/components/Select/MultiSelectValue.tsx"],"sourcesContent":["import {\n  Badge,\n  BadgeProps,\n  DismissibleBadge,\n  NonDismissibleBadge,\n} from '@/components/Badge';\nimport { MouseEvent, useEffect, useId, useState } from 'react';\nimport ReactSortableModule from 'react-sortablejs/dist/index.js';\nimport type { ItemInterface } from 'react-sortablejs';\nconst { ReactSortable } = ReactSortableModule;\n\nimport { SelectItemProps } from './common/types';\nimport styles from './MultiSelectValue.module.css';\n\ninterface MultiSelectValueProps {\n  selectedValues: string[];\n  valueNode: Map<string, SelectItemProps>;\n  onChange: (selectedValues: string[]) => void;\n  onSelect: (selectedValue: string) => void;\n  sortable: boolean;\n  disabled: boolean;\n}\n\nexport const MultiSelectValue = ({\n  selectedValues,\n  valueNode,\n  onChange,\n  sortable,\n  onSelect,\n  disabled,\n}: MultiSelectValueProps) => {\n  const id = useId();\n  const [values, setValues] = useState<ItemInterface[]>(\n    selectedValues.map(value => ({\n      id: `multi-select-${id}-${value}`,\n      value,\n    }))\n  );\n  useEffect(() => {\n    setValues(\n      selectedValues.map(value => ({\n        id: `multi-select-${id}-${value}`,\n        value,\n      }))\n    );\n  }, [id, selectedValues]);\n  if (selectedValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <ReactSortable\n      className={styles['badge-list']}\n      disabled={!sortable}\n      list={values}\n      setList={setValues}\n      onEnd={e => {\n        const { newDraggableIndex, oldDraggableIndex } = e;\n        if (\n          typeof newDraggableIndex === 'number' &&\n          typeof oldDraggableIndex === 'number' &&\n          oldDraggableIndex !== newDraggableIndex\n        ) {\n          const temp = selectedValues[oldDraggableIndex];\n          selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];\n          selectedValues[newDraggableIndex] = temp;\n          onChange(selectedValues);\n        }\n      }}\n      revertOnSpill\n    >\n      {selectedValues.map(value => {\n        const nodeProps = valueNode.get(value) ?? { children: value, value: value };\n        let otherProps: BadgeProps = {\n          text: nodeProps.label ?? nodeProps.children,\n          icon: nodeProps?.icon,\n          iconDir: nodeProps?.iconDir,\n        } as NonDismissibleBadge;\n        if (!disabled && !nodeProps.disabled) {\n          otherProps = {\n            ...otherProps,\n            dismissible: true,\n            onClose: (e: MouseEvent<HTMLOrSVGElement>) => {\n              e.preventDefault();\n              e.stopPropagation();\n              onSelect(nodeProps.value);\n            },\n          } as DismissibleBadge;\n        }\n        return (\n          <Badge\n            className={styles['multi-select-badge']}\n            key={`multi-select-${id}-${value}`}\n            size=\"sm\"\n            state={disabled ? 'disabled' : 'default'}\n            {...otherProps}\n          />\n        );\n      })}\n    </ReactSortable>\n  );\n};\n"],"names":["ReactSortable","ReactSortableModule","MultiSelectValue","selectedValues","valueNode","onChange","sortable","onSelect","disabled","id","useId","values","setValues","useState","map","value","useEffect","length","styles","e","newDraggableIndex","oldDraggableIndex","temp","nodeProps","get","children","otherProps","text","label","icon","iconDir","dismissible","onClose","preventDefault","stopPropagation"],"mappings":"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"}

package/dist/esm/components/Select/MultiSelectValue.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+	"badge-list": "badge-list__WpJAq",
+	"multi-select-badge": "multi-select-badge__vk7YC"
+};
+
+export { styles as default };
+//# sourceMappingURL=MultiSelectValue.module.css.js.map

package/dist/esm/components/Select/MultiSelectValue.module.css.js.map

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

package/dist/esm/components/Select/SingleSelectValue.css

@@ -0,0 +1,10 @@
+.select-value-container__I2dbz {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  align-items: center;
+  white-space: nowrap;
+  cursor: inherit;
+  pointer-events: inherit;
+  text-overflow: ellipsis;
+}

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

@@ -1,10 +1,8 @@
+import "./SingleSelectValue.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
 import { IconWrapper } from '../IconWrapper/index.js';
+import styles from './SingleSelectValue.module.css.js';
 
-const SelectValueContainer = styled.div.withConfig({
-  componentId: "sc-1bceuv1-0"
-})(["display:flex;width:100%;align-items:center;cursor:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:inherit;"]);
 const SingleSelectValue = ({
   valueNode,
   value
@@ -18,7 +16,7 @@ const SingleSelectValue = ({
     children,
     label
   } = valueNode ?? {};
-  return /* @__PURE__ */ jsx(SelectValueContainer, { children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
+  return /* @__PURE__ */ jsx("div", { className: styles["select-value-container"], children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
 };
 
 export { SingleSelectValue as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectValue.js","sources":["../../../../src/components/Select/SingleSelectValue.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SelectItemProps } from './common/types';\nimport { IconWrapper } from '@/components/IconWrapper';\n\nconst SelectValueContainer = styled.div`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  cursor: inherit;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  pointer-events: inherit;\n`;\n\nconst SingleSelectValue = ({\n  valueNode,\n  value,\n}: {\n  valueNode?: SelectItemProps;\n  value: string;\n}) => {\n  if (value === undefined || value === null) {\n    return null;\n  }\n\n  const { icon, iconDir, children, label } = valueNode ?? {};\n\n  return (\n    <SelectValueContainer>\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n        gap=\"xxs\"\n        isResponsive={false}\n      >\n        {label ?? children ?? value}\n      </IconWrapper>\n    </SelectValueContainer>\n  );\n};\n\nexport default SingleSelectValue;\n"],"names":["SelectValueContainer","styled","div","withConfig","componentId","SingleSelectValue","valueNode","value","undefined","icon","iconDir","children","label"],"mappings":";;;;AAIA,MAAMA,oBAAAA,GAAuBC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6IAAA,CAAA,CAAA;AAWvC,MAAMC,oBAAoBA,CAAC;AAAA,EACzBC,SAAAA;AAAAA,EACAC;AAIF,CAAA,KAAM;AACJ,EAAA,IAAIA,KAAAA,KAAUC,MAAAA,IAAaD,KAAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM;AAAA,IAAEE,IAAAA;AAAAA,IAAMC,OAAAA;AAAAA,IAASC,QAAAA;AAAAA,IAAUC;AAAAA,GAAM,GAAIN,aAAa,EAAC;AAEzD,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,OAAA,EACA,GAAA,EAAI,KAAA,EACJ,YAAA,EAAc,KAAA,EAEbM,QAAAA,EAAAA,KAAAA,IAASD,QAAAA,IAAYJ,OACxB,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SingleSelectValue.js","sources":["../../../../src/components/Select/SingleSelectValue.tsx"],"sourcesContent":["import { SelectItemProps } from './common/types';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport styles from './SingleSelectValue.module.css';\n\nconst SingleSelectValue = ({\n  valueNode,\n  value,\n}: {\n  valueNode?: SelectItemProps;\n  value: string;\n}) => {\n  if (value === undefined || value === null) {\n    return null;\n  }\n\n  const { icon, iconDir, children, label } = valueNode ?? {};\n\n  return (\n    <div className={styles['select-value-container']}>\n      <IconWrapper\n        icon={icon}\n        iconDir={iconDir}\n        gap=\"xxs\"\n        isResponsive={false}\n      >\n        {label ?? children ?? value}\n      </IconWrapper>\n    </div>\n  );\n};\n\nexport default SingleSelectValue;\n"],"names":["SingleSelectValue","valueNode","value","undefined","icon","iconDir","children","label","styles"],"mappings":";;;;AAIA,MAAMA,oBAAoBA,CAAC;AAAA,EACzBC,SAAAA;AAAAA,EACAC;AAIF,CAAA,KAAM;AACJ,EAAA,IAAIA,KAAAA,KAAUC,MAAAA,IAAaD,KAAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM;AAAA,IAAEE,IAAAA;AAAAA,IAAMC,OAAAA;AAAAA,IAASC,QAAAA;AAAAA,IAAUC;AAAAA,GAAM,GAAIN,aAAa,EAAC;AAEzD,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAWO,MAAAA,CAAO,wBAAwB,GAC7C,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,OAAA,EACA,KAAI,KAAA,EACJ,YAAA,EAAc,OAEbD,QAAAA,EAAAA,KAAAA,IAASD,QAAAA,IAAYJ,OACxB,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/esm/components/Select/SingleSelectValue.module.css.js

@@ -0,0 +1,6 @@
+const styles = {
+	"select-value-container": "select-value-container__I2dbz"
+};
+
+export { styles as default };
+//# sourceMappingURL=SingleSelectValue.module.css.js.map

package/dist/esm/components/Select/SingleSelectValue.module.css.js.map

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

package/dist/esm/components/Select/common/InternalSelect.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useId, useState, useRef, useCallback, useEffect, useMemo, forwardRef, Children, isValidElement } from 'react';
 import { Portal } from '@radix-ui/react-popover';
-import { SelectPopoverRoot, StyledSelectTrigger, SelectValue, HiddenSelectElement, SelectPopoverContent, SelectList, SearchBarContainer, SearchBar, SearchClose, SelectListContent, SelectGroupContainer, SelectGroupName, SelectGroupContent, SelectNoDataContainer, SelectItemDescriptionText } from './SelectStyled.js';
+import { SelectPopoverRoot, StyledSelectTrigger, SelectValue, HiddenSelectElement, SelectPopoverContent, SelectList, SearchBarContainer, SearchBar, selectStyles, SelectListContent, SelectGroupContainer, SelectGroupName, SelectGroupContent, SelectNoDataContainer, SelectItemDescriptionText } from './SelectComponents.js';
 import { OptionContext } from './OptionContext.js';
 import { MultiSelectValue } from '../MultiSelectValue.js';
 import SingleSelectValue from '../SingleSelectValue.js';
@@ -10,7 +10,7 @@ import { mergeRefs } from '../../../utils/mergeRefs.js';
 import { GenericMenuItem } from '../../GenericMenu/index.js';
 import { IconWrapper } from '../../IconWrapper/index.js';
 import { useInputModality } from '../../../hooks/internal/useInputModality.js';
-import { styled } from 'styled-components';
+import { cn } from '../../../lib/cva.js';
 import { getTextFromNodes } from '../../../lib/getTextFromNodes.js';
 import { useResolvedPortalContainer } from '../../../providers/PortalContext.js';
 import { FormRoot } from '../../FormContainer/FormRoot.js';
@@ -309,7 +309,7 @@ const InternalSelect = ({
         }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxs(SelectList, { children: [
           /* @__PURE__ */ jsxs(SearchBarContainer, { $showSearch: showSearch, children: [
             /* @__PURE__ */ jsx(SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
-            /* @__PURE__ */ jsx(SearchClose, { as: IconButton, icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })
+            /* @__PURE__ */ jsx(IconButton, { className: cn(selectStyles["search-close"], search.length > 0 && selectStyles["search-close_show-close"]), htmlType: "button", icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", size: "xs" })
           ] }),
           /* @__PURE__ */ jsx(SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsx(OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
             if ("options" in props2) {
@@ -358,11 +358,6 @@ const SelectGroup = forwardRef(({
   ] });
 });
 SelectGroup.displayName = "Select.Group";
-const CheckIcon = styled.svg.withConfig({
-  componentId: "sc-howzwz-0"
-})(["opacity:", ";"], ({
-  $showCheck
-}) => $showCheck ? 1 : 0);
 const SelectItem = forwardRef(({
   disabled = false,
   children,
@@ -409,7 +404,7 @@ const SelectItem = forwardRef(({
         label,
         description && /* @__PURE__ */ jsx(SelectItemDescription, { children: description })
       ] }) : children }),
-      /* @__PURE__ */ jsx(CheckIcon, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
+      /* @__PURE__ */ jsx(SvgImage, { className: cn(selectStyles["check-icon"], isChecked && selectStyles["check-icon_show-check"]), name: "check", size: "sm" })
     ] }),
     separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });