@clickhouse/click-ui 0.6.2-rc2 → 0.7.0

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

@@ -1,3 +1,4 @@
+require("./Popover.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -6,10 +7,14 @@ const jsxRuntime = require('react/jsx-runtime');
 const RadixPopover = require('@radix-ui/react-popover');
 const GenericMenu = require('../GenericMenu/index.cjs');
 const styledComponents = require('styled-components');
+const react = require('react');
+const cva = require('../../lib/cva.cjs');
 const EmptyButton = require('../EmptyButton/index.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
+const Popover_module = require('./Popover.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -52,25 +57,27 @@ const PopoverTrigger = ({
 };
 PopoverTrigger.displayName = "PopoverTrigger";
 Popover.Trigger = PopoverTrigger;
-const MenuPanel = styledComponents.styled(GenericMenu.GenericMenuPanel).withConfig({
-  componentId: "sc-1dii14g-1"
-})(["display:block;padding:", " ", ";background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";", ";"], ({
-  theme
-}) => theme.click.popover.space.y, ({
-  theme
-}) => theme.click.popover.space.x, ({
-  theme
-}) => theme.click.popover.color.panel.background.default, ({
-  theme
-}) => theme.click.popover.color.panel.stroke.default, ({
-  theme
-}) => theme.click.popover.radii.all, ({
-  theme
-}) => theme.click.popover.shadow.default, ({
-  $showClose
-}) => $showClose ? "padding-top: 1rem;" : "");
+const menuPanelVariants = classVarianceAuthority.cva(Popover_module.default["menu-panel"], {
+  variants: {
+    showClose: {
+      true: Popover_module.default["menu-panel_show-close"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showClose: false
+  }
+});
+const _MenuPanel = ({
+  showClose,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuPanel, { ref, ...props, className: cva.cn(menuPanelVariants({
+  showClose
+}), className) });
+const MenuPanel = react.forwardRef(_MenuPanel);
 const CloseButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
-  componentId: "sc-1dii14g-2"
+  componentId: "sc-1dii14g-1"
 })(["position:absolute;top:", ";right:", ";width:", ";height:", ";"], ({
   theme
 }) => theme.click.popover.space.y, ({
@@ -89,7 +96,7 @@ const PopoverContent = ({
   ...props
 }) => {
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPanel, { as: RadixPopover__namespace.Content, $type: "popover", $showClose: showClose, $showArrow: showArrow, sideOffset: 4, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPanel, { as: RadixPopover__namespace.Content, type: "popover", showClose, showArrow, sideOffset: 4, ...props, children: [
     showClose && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { as: RadixPopover__namespace.Close, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross" }) }),
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RadixPopover__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {}) }),
     children

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 { styled } from 'styled-components';\nimport { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\nconst Trigger = styled(RadixPopover.Trigger)`\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  width: fit-content;\n`;\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <Trigger\n        asChild\n        {...props}\n      >\n        <div>{children}</div>\n      </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 MenuPanel = styled(GenericMenuPanel)<{ $showClose?: boolean }>`\n  display: block;\n  padding: ${({ theme }) => theme.click.popover.space.y}\n    ${({ theme }) => theme.click.popover.space.x};\n  background-color: ${({ theme }) => theme.click.popover.color.panel.background.default};\n  border: 1px solid ${({ theme }) => theme.click.popover.color.panel.stroke.default};\n  border-radius: ${({ theme }) => theme.click.popover.radii.all};\n  box-shadow: ${({ theme }) => theme.click.popover.shadow.default};\n\n  ${({ $showClose }) => ($showClose ? 'padding-top: 1rem;' : '')};\n`;\n\nconst CloseButton = styled(EmptyButton)`\n  position: absolute;\n  top: ${({ theme }) => theme.click.popover.space.y};\n  right: ${({ theme }) => theme.click.popover.space.x};\n  width: ${({ theme }) => theme.click.popover.icon.size.width};\n  height: ${({ theme }) => theme.click.popover.icon.size.height};\n`;\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          <CloseButton\n            as={RadixPopover.Close}\n            asChild\n          >\n            <Icon name=\"cross\" />\n          </CloseButton>\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","Trigger","styled","withConfig","componentId","PopoverTrigger","anchor","jsxs","Fragment","jsx","displayName","MenuPanel","GenericMenuPanel","theme","click","popover","space","y","x","color","panel","background","default","stroke","radii","all","shadow","$showClose","CloseButton","EmptyButton","icon","size","width","height","PopoverContent","showArrow","showClose","forceMount","container","portalContainer","useResolvedPortalContainer","Content","Close","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 { styled } from 'styled-components';\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 { EmptyButton } from '@/components/EmptyButton';\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\nconst Trigger = styled(RadixPopover.Trigger)`\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  width: fit-content;\n`;\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <Trigger\n        asChild\n        {...props}\n      >\n        <div>{children}</div>\n      </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 CloseButton = styled(EmptyButton)`\n  position: absolute;\n  top: ${({ theme }) => theme.click.popover.space.y};\n  right: ${({ theme }) => theme.click.popover.space.x};\n  width: ${({ theme }) => theme.click.popover.icon.size.width};\n  height: ${({ theme }) => theme.click.popover.icon.size.height};\n`;\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          <CloseButton\n            as={RadixPopover.Close}\n            asChild\n          >\n            <Icon name=\"cross\" />\n          </CloseButton>\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","Trigger","styled","withConfig","componentId","PopoverTrigger","anchor","jsxs","Fragment","jsx","displayName","menuPanelVariants","cva","styles","variants","showClose","true","false","defaultVariants","_MenuPanel","className","ref","GenericMenuPanel","cn","MenuPanel","forwardRef","CloseButton","EmptyButton","theme","click","popover","space","y","x","icon","size","width","height","PopoverContent","showArrow","forceMount","container","portalContainer","useResolvedPortalContainer","Content","Close","Icon","Arrow","Popover_Arrow"],"mappings":"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"}

package/dist/cjs/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/cjs/components/RadioGroup/RadioGroup.module.css.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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"
+};
+
+exports.default = styles;
+exports.item = item;
+//# sourceMappingURL=RadioGroup.module.css.cjs.map

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

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

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

@@ -1,3 +1,4 @@
+require("./RadioGroup.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,12 +6,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixRadioGroup = require('@radix-ui/react-radio-group');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const RadioGroup_module = require('./RadioGroup.module.css.cjs');
 const FormRoot = require('../FormContainer/FormRoot.cjs');
 const FormElementContainer = require('../FormContainer/FormElementContainer.cjs');
 const Error = require('../FormContainer/Error.cjs');
 const Label = require('../Label/index.cjs');
 const GenericLabel = require('../GenericLabel/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -32,16 +35,22 @@ function _interopNamespace(e) {
 
 const RadixRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RadixRadioGroup);
 
-const RadioGroupRoot = styledComponents.styled(RadixRadioGroup__namespace.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 = classVarianceAuthority.cva(RadioGroup_module.default["radio-group"], {
+  variants: {
+    inline: {
+      true: RadioGroup_module.default["radio-group_inline"],
+      false: RadioGroup_module.default["radio-group_inline_false"]
+    },
+    error: {
+      true: RadioGroup_module.default["radio-group_error"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    inline: true,
+    error: false
+  }
+});
 const RadioGroup = ({
   children,
   inline,
@@ -52,11 +61,15 @@ const RadioGroup = ({
   label,
   disabled,
   id,
+  className,
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer.FormElementContainer, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(RadioGroupRoot, { orientation: inline ? "horizontal" : "vertical", disabled, id, $error: !!error, dir: itemDir, $inline: inline, ...props, 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 })
@@ -68,79 +81,17 @@ const RadioGroupItem = ({
   value,
   disabled,
   required,
+  className,
   ...props
 }) => {
   const defaultId = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $orientation: "horizontal", $dir: "end", $addLabelPadding: false, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RadioInput, { value, id: id ?? defaultId, disabled, required, "aria-label": `${label}`, children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupIndicator, {}) }),
+  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;
-const Wrapper = styledComponents.styled(FormRoot.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 = styledComponents.styled(RadixRadioGroup__namespace.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 = styledComponents.styled(RadixRadioGroup__namespace.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};
-      }
-    }
-  `);
 
 exports.RadioGroup = RadioGroup;
 //# sourceMappingURL=index.cjs.map

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 { 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","FormRoot","jsxs","FormElementContainer","jsx","Error","Label","RadioGroupItem","value","required","defaultId","useId","GenericLabel","displayName","Item","Wrapper","all","RadioInput","radio","radii","background","default","stroke","hover","active","RadioGroupIndicator","Indicator","indicator"],"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":["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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"}

package/dist/cjs/components/Select/common/InternalSelect.cjs

@@ -313,7 +313,7 @@ const InternalSelect = ({
         }, align: "start", $useFullWidthItems: useFullWidthItems, $itemCharacterLimit: itemCharacterLimit, children: /* @__PURE__ */ jsxRuntime.jsxs(SelectStyled.SelectList, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(SelectStyled.SearchBarContainer, { $showSearch: showSearch, children: [
             /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SearchBar, { ref: inputRef, value: search, onChange: (e) => onUpdateSearch(e.target.value), "data-testid": "select-search-input", onKeyDown, $showSearch: showSearch }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SearchClose, { as: IconButton.IconButton, icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })
+            /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SearchClose, { as: IconButton.IconButton, htmlType: "button", icon: "cross", onClick: clearSearch, "data-testid": "select-search-close", $showClose: search.length > 0, size: "xs" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(SelectStyled.SelectListContent, { $maxHeight: maxHeight, children: /* @__PURE__ */ jsxRuntime.jsx(OptionContext.OptionContext.Provider, { value: optionContextValue, children: options && options.length > 0 ? options.map((props2, index) => {
             if ("options" in props2) {