@clickhouse/click-ui 0.9.0 → 0.10.0-rc1

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <RadixPopover.Trigger\n        asChild\n        {...props}\n      >\n        <div className={styles.trigger}>{children}</div>\n      </RadixPopover.Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <RadixPopover.Close\n            asChild\n            className={styles['close-button']}\n          >\n            <Icon name=\"cross\" />\n          </RadixPopover.Close>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["Popover","children","props","RadixPopover","PopoverTrigger","anchor","jsxs","Fragment","jsx","styles","trigger","displayName","Trigger","menuPanelVariants","cva","variants","showClose","true","false","defaultVariants","_MenuPanel","className","ref","GenericMenuPanel","cn","MenuPanel","forwardRef","PopoverContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","Content","Icon","Arrow","Popover_Arrow"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport { Icon } from '@/components/Icon';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\nimport styles from './Popover.module.css';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <RadixPopover.Trigger\n        asChild\n        {...props}\n      >\n        <div className={styles.trigger}>{children}</div>\n      </RadixPopover.Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst menuPanelVariants = cva(styles['menu-panel'], {\n  variants: {\n    showClose: {\n      true: styles['menu-panel_show-close'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showClose: false,\n  },\n});\n\ntype MenuPanelComponent = <T extends ElementType = 'div'>(\n  props: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean }\n) => ReactNode;\n\nconst _MenuPanel = <T extends ElementType = 'div'>(\n  {\n    showClose,\n    className,\n    ...props\n  }: ComponentProps<typeof GenericMenuPanel<T>> & { showClose?: boolean },\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <GenericMenuPanel\n    ref={ref}\n    {...(props as ComponentProps<typeof GenericMenuPanel>)}\n    className={cn(menuPanelVariants({ showClose }), className)}\n  />\n);\n\nconst MenuPanel: MenuPanelComponent = forwardRef(_MenuPanel);\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        type=\"popover\"\n        showClose={showClose}\n        showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <RadixPopover.Close\n            asChild\n            className={styles['close-button']}\n          >\n            <Icon name=\"cross\" />\n          </RadixPopover.Close>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["RadixPopover","jsxs","Fragment","jsx","styles","cva","GenericMenuPanel","cn","forwardRef","useResolvedPortalContainer","Icon","Arrow","Popover_Arrow"],"mappings":"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"}

package/dist/cjs/components/ProgressBar/ProgressBar.css

@@ -1,3 +1,5 @@
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. progressBar) */
+
 .progressbar__21KMf {
   display: flex;
   min-height: 2px;
@@ -17,7 +19,7 @@
   );
   background-position: center;
   background-size: calc(100% + 2px);
-  color: var(--global-color-accent-default);
+  color: var(--click-progressBar-color-text-default);
   font: var(--typography-styles-product-text-normal-sm);
   transition: all 100ms ease-in-out;
 }
@@ -122,3 +124,4 @@
 .progressclosebutton_dismissable__p5mDJ {
   visibility: visible;
 }
+}

package/dist/cjs/components/ProgressBar/index.cjs

@@ -59,17 +59,23 @@ const ProgressBar = ({
         "--progress": `${progress}%`
       },
       ...props,
-      className: cva.cn(progressBarVariants({
-        type,
-        orientation,
-        dir,
-        completed
-      }), className),
+      className: cva.cn(
+        progressBarVariants({ type, orientation, dir, completed }),
+        className
+      ),
       children: type === "default" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: ProgressBar_module.default.progresstext, children: successMessage && completed ? successMessage : `${progress}%` }),
-        /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { size: "sm", type: "ghost", icon: "cross", onClick: onCancel, "data-testid": "progressbar-close", className: closeButtonVariants({
-          dismissable
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          IconButton.IconButton,
+          {
+            size: "sm",
+            type: "ghost",
+            icon: "cross",
+            onClick: onCancel,
+            "data-testid": "progressbar-close",
+            className: closeButtonVariants({ dismissable })
+          }
+        )
       ] })
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as CSSProperties\n      }\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["progressBarVariants","cva","styles","progressbar","variants","type","default","small","orientation","horizontal","vertical","dir","start","end","completed","true","defaultVariants","closeButtonVariants","progressclosebutton","dismissable","ProgressBar","progress","onCancel","successMessage","className","props","jsx","cn","jsxs","Fragment","progresstext","IconButton"],"mappings":";;;;;;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,0BAAAA,CAAIC,0BAAAA,CAAOC,WAAAA,EAAa;AAAA,EAClDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,2BAAO,0BAA0B,CAAA;AAAA,MAC1CK,KAAAA,EAAOL,2BAAO,wBAAwB;AAAA,KACxC;AAAA,IACAM,WAAAA,EAAa;AAAA,MACXC,UAAAA,EAAYP,2BAAO,oCAAoC,CAAA;AAAA,MACvDQ,QAAAA,EAAUR,2BAAO,kCAAkC;AAAA,KACrD;AAAA,IACAS,GAAAA,EAAK;AAAA,MACHC,KAAAA,EAAOV,2BAAO,uBAAuB,CAAA;AAAA,MACrCW,GAAAA,EAAKX,2BAAO,qBAAqB;AAAA,KACnC;AAAA,IACAY,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMb,2BAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,SAAA;AAAA,IACNG,WAAAA,EAAa,YAAA;AAAA,IACbG,GAAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAMM,mBAAAA,GAAsBhB,0BAAAA,CAAIC,0BAAAA,CAAOgB,mBAAAA,EAAqB;AAAA,EAC1Dd,QAAAA,EAAU;AAAA,IACRe,WAAAA,EAAa;AAAA,MACXJ,IAAAA,EAAMb,2BAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAMkB,cAAcA,CAAC;AAAA,EAC1BC,QAAAA;AAAAA,EACAhB,IAAAA,GAAO,SAAA;AAAA,EACPc,WAAAA,GAAc,KAAA;AAAA,EACdG,QAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAf,WAAAA,GAAc,YAAA;AAAA,EACdG,GAAAA,GAAM,OAAA;AAAA,EACNa,SAAAA;AAAAA,EACA,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAMX,YAAYO,QAAAA,KAAa,GAAA;AAE/B,EAAA,uBACEK,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAGL,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,SAEEI,KAAAA;AAAAA,MACJ,SAAA,EAAWE,OACT3B,mBAAAA,CAAoB;AAAA,QAAEK,IAAAA;AAAAA,QAAMG,WAAAA;AAAAA,QAAaG,GAAAA;AAAAA,QAAKG;AAAAA,OAAW,GACzDU,SACF,CAAA;AAAA,MAECnB,QAAAA,EAAAA,IAAAA,KAAS,6BACRuB,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,MAAA,EAAA,EAAK,WAAWxB,0BAAAA,CAAO4B,YAAAA,EACrBP,4BAAkBT,SAAAA,GAAYS,cAAAA,GAAiB,CAAA,EAAGF,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACAK,cAAA,CAACK,qBAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,IAAA,EAAK,OAAA,EACL,IAAA,EAAK,OAAA,EACL,OAAA,EAAST,QAAAA,EACT,aAAA,EAAY,mBAAA,EACZ,WAAWL,mBAAAA,CAAoB;AAAA,UAAEE;AAAAA,SAAa,CAAA,EAAE;AAAA,OAAA,EAEpD;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as CSSProperties\n      }\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["cva","styles","jsx","cn","jsxs","Fragment","IconButton"],"mappings":";;;;;;;;;;AAMA,MAAM,mBAAA,GAAsBA,0BAAA,CAAIC,0BAAA,CAAO,WAAA,EAAa;AAAA,EAClD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,OAAA,EAASA,2BAAO,0BAA0B,CAAA;AAAA,MAC1C,KAAA,EAAOA,2BAAO,wBAAwB;AAAA,KACxC;AAAA,IACA,WAAA,EAAa;AAAA,MACX,UAAA,EAAYA,2BAAO,oCAAoC,CAAA;AAAA,MACvD,QAAA,EAAUA,2BAAO,kCAAkC;AAAA,KACrD;AAAA,IACA,GAAA,EAAK;AAAA,MACH,KAAA,EAAOA,2BAAO,uBAAuB,CAAA;AAAA,MACrC,GAAA,EAAKA,2BAAO,qBAAqB;AAAA,KACnC;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAMA,2BAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,SAAA;AAAA,IACN,WAAA,EAAa,YAAA;AAAA,IACb,GAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAM,mBAAA,GAAsBD,0BAAA,CAAIC,0BAAA,CAAO,mBAAA,EAAqB;AAAA,EAC1D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,IAAA,EAAMA,2BAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA,GAAM,OAAA;AAAA,EACN,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,YAAY,QAAA,KAAa,GAAA;AAE/B,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAG,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,MAED,GAAG,KAAA;AAAA,MACJ,SAAA,EAAWC,MAAA;AAAA,QACT,oBAAoB,EAAE,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAW,CAAA;AAAA,QACzD;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,IAAA,KAAS,6BACRC,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,MAAA,EAAA,EAAK,WAAWD,0BAAA,CAAO,YAAA,EACrB,4BAAkB,SAAA,GAAY,cAAA,GAAiB,CAAA,EAAG,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACAC,cAAA;AAAA,UAACI,qBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,IAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAS,QAAA;AAAA,YACT,aAAA,EAAY,mBAAA;AAAA,YACZ,SAAA,EAAW,mBAAA,CAAoB,EAAE,WAAA,EAAa;AAAA;AAAA;AAChD,OAAA,EACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/cjs/components/RadioGroup/RadioGroup.css

@@ -1,4 +1,4 @@
-.radio-group__RXgmX {
+@layer clickui {.radio-group__RXgmX {
   display: flex;
   flex-wrap: wrap;
   gap: var(--click-checkbox-space-gap);
@@ -97,3 +97,4 @@
   background: var(--click-radio-color-indicator-disabled);
 }
 /* stylelint-enable no-descending-specificity */
+}

package/dist/cjs/components/RadioGroup/index.cjs

@@ -64,16 +64,46 @@ const RadioGroup = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Root, { orientation: inline ? "horizontal" : "vertical", disabled, id, dir: itemDir, ...props, className: cva.cn(radioGroupVariants({
-        inline: inline === false ? false : true,
-        error: !!error
-      }), className), children }),
-      !!error && error !== true && /* @__PURE__ */ jsxRuntime.jsx(Error.Error, { children: error })
-    ] }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(Label.Label, { htmlFor: id, disabled, error: !!error, children: label })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormRoot.FormRoot,
+    {
+      $orientation: orientation,
+      $dir: dir,
+      $addLabelPadding: true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RadixRadioGroup__namespace.Root,
+            {
+              orientation: inline ? "horizontal" : "vertical",
+              disabled,
+              id,
+              dir: itemDir,
+              ...props,
+              className: cva.cn(
+                radioGroupVariants({
+                  inline: inline === false ? false : true,
+                  error: !!error
+                }),
+                className
+              ),
+              children
+            }
+          ),
+          !!error && error !== true && /* @__PURE__ */ jsxRuntime.jsx(Error.Error, { children: error })
+        ] }),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          Label.Label,
+          {
+            htmlFor: id,
+            disabled,
+            error: !!error,
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 const RadioGroupItem = ({
   id,
@@ -85,10 +115,38 @@ const RadioGroupItem = ({
   ...props
 }) => {
   const defaultId = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, className: cva.cn(RadioGroup_module.default.item, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Item, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, className: RadioGroup_module.default["radio-input"], children: /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Indicator, { className: RadioGroup_module.default["radio-indicator"] }) }),
-    label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel.GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormRoot.FormRoot,
+    {
+      $orientation: "horizontal",
+      $dir: "end",
+      $addLabelPadding: false,
+      ...props,
+      className: cva.cn(RadioGroup_module.default.item, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadixRadioGroup__namespace.Item,
+          {
+            value,
+            id: id ?? defaultId,
+            disabled,
+            required,
+            "aria-label": `${label}`,
+            className: RadioGroup_module.default["radio-input"],
+            children: /* @__PURE__ */ jsxRuntime.jsx(RadixRadioGroup__namespace.Indicator, { className: RadioGroup_module.default["radio-indicator"] })
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          GenericLabel.GenericLabel,
+          {
+            htmlFor: id ?? defaultId,
+            disabled,
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 RadioGroupItem.displayName = "RadioGroupItem";
 RadioGroup.Item = RadioGroupItem;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","FormRoot","jsxs","FormElementContainer","jsx","RadixRadioGroup","cn","Error","Label","RadioGroupItem","value","required","defaultId","useId","item","GenericLabel","displayName","Item"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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":["cva","styles","jsxs","FormRoot","FormElementContainer","jsx","RadixRadioGroup","cn","Error","Label","useId","GenericLabel"],"mappings":"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"}

package/dist/cjs/components/SearchField/index.cjs

@@ -7,13 +7,25 @@ const react = require('react');
 const TextField = require('../TextField/index.cjs');
 const Icon = require('../Icon/index.cjs');
 
-const SearchField = react.forwardRef(({
-  isFilter = false,
-  clear = true,
-  ...props
-}, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TextField.TextField, { startContent: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: isFilter ? "filter" : "search", size: "sm" }), clear, ref, ...props });
-});
+const SearchField = react.forwardRef(
+  ({ isFilter = false, clear = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TextField.TextField,
+      {
+        startContent: /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.Icon,
+          {
+            name: isFilter ? "filter" : "search",
+            size: "sm"
+          }
+        ),
+        clear,
+        ref,
+        ...props
+      }
+    );
+  }
+);
 
 exports.SearchField = SearchField;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { TextField, type TextFieldProps } from '@/components/TextField';\nimport { Icon } from '@/components/Icon';\n\nexport interface SearchFieldProps extends Omit<\n  TextFieldProps,\n  'type' | 'startContent' | 'endContent'\n> {\n  isFilter?: boolean;\n}\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  ({ isFilter = false, clear = true, ...props }, ref) => {\n    return (\n      <TextField\n        startContent={\n          <Icon\n            name={isFilter ? 'filter' : 'search'}\n            size=\"sm\"\n          />\n        }\n        clear={clear}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n"],"names":["SearchField","forwardRef","isFilter","clear","props","ref","jsx","TextField","Icon"],"mappings":";;;;;;;;;AAYO,MAAMA,WAAAA,GAAcC,iBACzB,CAAC;AAAA,EAAEC,QAAAA,GAAW,KAAA;AAAA,EAAOC,KAAAA,GAAQ,IAAA;AAAA,EAAM,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AACrD,EAAA,uBACEC,cAAA,CAACC,mBAAA,EAAA,EACC,YAAA,kBACED,cAAA,CAACE,aACC,IAAA,EAAMN,QAAAA,GAAW,QAAA,GAAW,QAAA,EAC5B,MAAK,IAAA,KAGT,KAAA,EACA,GAAA,EACA,GAAIE,KAAAA,EAAM,CAAA;AAGhB,CACF;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { TextField, type TextFieldProps } from '@/components/TextField';\nimport { Icon } from '@/components/Icon';\n\nexport interface SearchFieldProps extends Omit<\n  TextFieldProps,\n  'type' | 'startContent' | 'endContent'\n> {\n  isFilter?: boolean;\n}\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  ({ isFilter = false, clear = true, ...props }, ref) => {\n    return (\n      <TextField\n        startContent={\n          <Icon\n            name={isFilter ? 'filter' : 'search'}\n            size=\"sm\"\n          />\n        }\n        clear={clear}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","jsx","TextField","Icon"],"mappings":";;;;;;;;;AAYO,MAAM,WAAA,GAAcA,gBAAA;AAAA,EACzB,CAAC,EAAE,QAAA,GAAW,KAAA,EAAO,QAAQ,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACrD,IAAA,uBACEC,cAAA;AAAA,MAACC,mBAAA;AAAA,MAAA;AAAA,QACC,YAAA,kBACED,cAAA;AAAA,UAACE,SAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,WAAW,QAAA,GAAW,QAAA;AAAA,YAC5B,IAAA,EAAK;AAAA;AAAA,SACP;AAAA,QAEF,KAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}

package/dist/cjs/components/Select/MultiSelectValue.cjs

@@ -13,9 +13,7 @@ const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
 const ReactSortableModule__default = /*#__PURE__*/_interopDefault(ReactSortableModule);
 
-const {
-  ReactSortable
-} = ReactSortableModule__default.default;
+const { ReactSortable } = ReactSortableModule__default.default;
 const MultiSelectValue = ({
   selectedValues,
   valueNode,
@@ -25,53 +23,71 @@ const MultiSelectValue = ({
   disabled
 }) => {
   const id = react.useId();
-  const [values, setValues] = react.useState(selectedValues.map((value) => ({
-    id: `multi-select-${id}-${value}`,
-    value
-  })));
-  react.useEffect(() => {
-    setValues(selectedValues.map((value) => ({
+  const [values, setValues] = react.useState(
+    selectedValues.map((value) => ({
       id: `multi-select-${id}-${value}`,
       value
-    })));
+    }))
+  );
+  react.useEffect(() => {
+    setValues(
+      selectedValues.map((value) => ({
+        id: `multi-select-${id}-${value}`,
+        value
+      }))
+    );
   }, [id, selectedValues]);
   if (selectedValues.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ReactSortable, { className: MultiSelectValue_module.default["badge-list"], disabled: !sortable, list: values, setList: setValues, onEnd: (e) => {
-    const {
-      newDraggableIndex,
-      oldDraggableIndex
-    } = e;
-    if (typeof newDraggableIndex === "number" && typeof oldDraggableIndex === "number" && oldDraggableIndex !== newDraggableIndex) {
-      const temp = selectedValues[oldDraggableIndex];
-      selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];
-      selectedValues[newDraggableIndex] = temp;
-      onChange(selectedValues);
-    }
-  }, revertOnSpill: true, children: selectedValues.map((value) => {
-    const nodeProps = valueNode.get(value) ?? {
-      children: value,
-      value
-    };
-    let otherProps = {
-      text: nodeProps.label ?? nodeProps.children,
-      icon: nodeProps?.icon,
-      iconDir: nodeProps?.iconDir
-    };
-    if (!disabled && !nodeProps.disabled) {
-      otherProps = {
-        ...otherProps,
-        dismissible: true,
-        onClose: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onSelect(nodeProps.value);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ReactSortable,
+    {
+      className: MultiSelectValue_module.default["badge-list"],
+      disabled: !sortable,
+      list: values,
+      setList: setValues,
+      onEnd: (e) => {
+        const { newDraggableIndex, oldDraggableIndex } = e;
+        if (typeof newDraggableIndex === "number" && typeof oldDraggableIndex === "number" && oldDraggableIndex !== newDraggableIndex) {
+          const temp = selectedValues[oldDraggableIndex];
+          selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex];
+          selectedValues[newDraggableIndex] = temp;
+          onChange(selectedValues);
+        }
+      },
+      revertOnSpill: true,
+      children: selectedValues.map((value) => {
+        const nodeProps = valueNode.get(value) ?? { children: value, value };
+        let otherProps = {
+          text: nodeProps.label ?? nodeProps.children,
+          icon: nodeProps?.icon,
+          iconDir: nodeProps?.iconDir
+        };
+        if (!disabled && !nodeProps.disabled) {
+          otherProps = {
+            ...otherProps,
+            dismissible: true,
+            onClose: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onSelect(nodeProps.value);
+            }
+          };
         }
-      };
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Badge.Badge,
+          {
+            className: MultiSelectValue_module.default["multi-select-badge"],
+            size: "sm",
+            state: disabled ? "disabled" : "default",
+            ...otherProps
+          },
+          `multi-select-${id}-${value}`
+        );
+      })
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { className: MultiSelectValue_module.default["multi-select-badge"], size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
-  }) });
+  );
 };
 
 exports.MultiSelectValue = MultiSelectValue;

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectValue.cjs","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","jsx","styles","e","newDraggableIndex","oldDraggableIndex","temp","nodeProps","get","children","otherProps","text","label","icon","iconDir","dismissible","onClose","preventDefault","stopPropagation","Badge"],"mappings":"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"}
+{"version":3,"file":"MultiSelectValue.cjs","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":["ReactSortableModule","useId","useState","useEffect","jsx","styles","Badge"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-.badge-list__WpJAq {
+@layer clickui {.badge-list__WpJAq {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
@@ -17,3 +17,4 @@
   max-width: fit-content;
   /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
 }
+}

package/dist/cjs/components/Select/SingleSelectValue.cjs

@@ -14,13 +14,17 @@ const SingleSelectValue = ({
   if (value === void 0 || value === null) {
     return null;
   }
-  const {
-    icon,
-    iconDir,
-    children,
-    label
-  } = valueNode ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectValue_module.default["select-value-container"], children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ?? children ?? value }) });
+  const { icon, iconDir, children, label } = valueNode ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: SingleSelectValue_module.default["select-value-container"], children: /* @__PURE__ */ jsxRuntime.jsx(
+    IconWrapper.IconWrapper,
+    {
+      icon,
+      iconDir,
+      gap: "xxs",
+      isResponsive: false,
+      children: label ?? children ?? value
+    }
+  ) });
 };
 
 exports.default = SingleSelectValue;

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

@@ -1 +1 @@
-{"version":3,"file":"SingleSelectValue.cjs","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","jsx","IconWrapper"],"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,sCACG,KAAA,EAAA,EAAI,SAAA,EAAWO,gCAAAA,CAAO,wBAAwB,GAC7C,QAAA,kBAAAC,cAAA,CAACC,uBAAA,EAAA,EACC,IAAA,EACA,OAAA,EACA,KAAI,KAAA,EACJ,YAAA,EAAc,OAEbH,QAAAA,EAAAA,KAAAA,IAASD,QAAAA,IAAYJ,OACxB,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SingleSelectValue.cjs","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":["jsx","styles","IconWrapper"],"mappings":";;;;;;;;AAIA,MAAM,oBAAoB,CAAC;AAAA,EACzB,SAAA;AAAA,EACA;AACF,CAAA,KAGM;AACJ,EAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,IAAA,EAAM,OAAA,EAAS,UAAU,KAAA,EAAM,GAAI,aAAa,EAAC;AAEzD,EAAA,uBACEA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,gCAAA,CAAO,wBAAwB,CAAA,EAC7C,QAAA,kBAAAD,cAAA;AAAA,IAACE,uBAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAA,EAAI,KAAA;AAAA,MACJ,YAAA,EAAc,KAAA;AAAA,MAEb,mBAAS,QAAA,IAAY;AAAA;AAAA,GACxB,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-.select-value-container__I2dbz {
+@layer clickui {.select-value-container__I2dbz {
   display: flex;
   width: 100%;
   overflow: hidden;
@@ -8,3 +8,4 @@
   pointer-events: inherit;
   text-overflow: ellipsis;
 }
+}