@clickhouse/click-ui 0.5.0 → 0.6.0-rc1

package/dist/cjs/components/IconButton/IconButton.css

@@ -0,0 +1,145 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconButton) */
+
+.iconbutton__G-cEu {
+  padding: var(--click-button-iconButton-default-space-y)
+    var(--click-button-iconButton-default-space-x);
+  border: var(--click-button-stroke) solid;
+  border-radius: var(--click-button-iconButton-radii-all);
+  cursor: pointer;
+}
+
+.iconbutton_size_sm__tT3BV {
+  padding: var(--click-button-iconButton-sm-space-y)
+    var(--click-button-iconButton-sm-space-x);
+}
+
+.iconbutton_size_xs__CxWtP {
+  padding: var(--click-button-iconButton-xs-space-y)
+    var(--click-button-iconButton-xs-space-x);
+}
+
+.iconbutton_type_primary__QEfNk {
+  border-color: var(--click-button-iconButton-color-primary-stroke-default);
+  background-color: var(--click-button-iconButton-color-primary-background-default);
+  color: var(--click-button-iconButton-color-primary-text-default);
+}
+
+.iconbutton_type_primary__QEfNk:visited {
+  background-color: var(--click-button-iconButton-color-primary-background-default);
+}
+
+.iconbutton_type_primary__QEfNk:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-primary-stroke-hover);
+  background-color: var(--click-button-iconButton-color-primary-background-hover);
+  color: var(--click-button-iconButton-color-primary-text-hover);
+}
+
+.iconbutton_type_primary__QEfNk:not([disabled]):focus,
+.iconbutton_type_primary__QEfNk:not([disabled]):active,
+.iconbutton_type_primary__QEfNk:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-primary-stroke-active);
+  background-color: var(--click-button-iconButton-color-primary-background-active);
+  color: var(--click-button-iconButton-color-primary-text-active);
+}
+
+.iconbutton_type_secondary__qeL8h {
+  border-color: var(--click-button-iconButton-color-secondary-stroke-default);
+  background-color: var(--click-button-iconButton-color-secondary-background-default);
+  color: var(--click-button-iconButton-color-secondary-text-default);
+}
+
+.iconbutton_type_secondary__qeL8h:visited {
+  background-color: var(--click-button-iconButton-color-secondary-background-default);
+}
+
+.iconbutton_type_secondary__qeL8h:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-secondary-stroke-hover);
+  background-color: var(--click-button-iconButton-color-secondary-background-hover);
+  color: var(--click-button-iconButton-color-secondary-text-hover);
+}
+
+.iconbutton_type_secondary__qeL8h:not([disabled]):focus,
+.iconbutton_type_secondary__qeL8h:not([disabled]):active,
+.iconbutton_type_secondary__qeL8h:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-secondary-stroke-active);
+  background-color: var(--click-button-iconButton-color-secondary-background-active);
+  color: var(--click-button-iconButton-color-secondary-text-active);
+}
+
+.iconbutton_type_ghost__nLh8i {
+  border-color: var(--click-button-iconButton-color-ghost-stroke-default);
+  background-color: var(--click-button-iconButton-color-ghost-background-default);
+  color: var(--click-button-iconButton-color-ghost-text-default);
+}
+
+.iconbutton_type_ghost__nLh8i:visited {
+  background-color: var(--click-button-iconButton-color-ghost-background-default);
+}
+
+.iconbutton_type_ghost__nLh8i:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-ghost-stroke-hover);
+  background-color: var(--click-button-iconButton-color-ghost-background-hover);
+  color: var(--click-button-iconButton-color-ghost-text-hover);
+}
+
+.iconbutton_type_ghost__nLh8i:not([disabled]):focus,
+.iconbutton_type_ghost__nLh8i:not([disabled]):active,
+.iconbutton_type_ghost__nLh8i:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-ghost-stroke-active);
+  background-color: var(--click-button-iconButton-color-ghost-background-active);
+  color: var(--click-button-iconButton-color-ghost-text-active);
+}
+
+.iconbutton_type_danger__CjQg- {
+  border-color: var(--click-button-iconButton-color-danger-stroke-default);
+  background-color: var(--click-button-iconButton-color-danger-background-default);
+  color: var(--click-button-iconButton-color-danger-text-default);
+}
+
+.iconbutton_type_danger__CjQg-:visited {
+  background-color: var(--click-button-iconButton-color-danger-background-default);
+}
+
+.iconbutton_type_danger__CjQg-:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-danger-stroke-hover);
+  background-color: var(--click-button-iconButton-color-danger-background-hover);
+  color: var(--click-button-iconButton-color-danger-text-hover);
+}
+
+.iconbutton_type_danger__CjQg-:not([disabled]):focus,
+.iconbutton_type_danger__CjQg-:not([disabled]):active,
+.iconbutton_type_danger__CjQg-:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-danger-stroke-active);
+  background-color: var(--click-button-iconButton-color-danger-background-active);
+  color: var(--click-button-iconButton-color-danger-text-active);
+}
+
+.iconbutton_type_info__Ue7wb {
+  border-color: var(--click-button-iconButton-color-info-stroke-default);
+  background-color: var(--click-button-iconButton-color-info-background-default);
+  color: var(--click-button-iconButton-color-info-text-default);
+}
+
+.iconbutton_type_info__Ue7wb:visited {
+  background-color: var(--click-button-iconButton-color-info-background-default);
+}
+
+.iconbutton_type_info__Ue7wb:not([disabled]):hover {
+  border-color: var(--click-button-iconButton-color-info-stroke-hover);
+  background-color: var(--click-button-iconButton-color-info-background-hover);
+  color: var(--click-button-iconButton-color-info-text-hover);
+}
+
+.iconbutton_type_info__Ue7wb:not([disabled]):focus,
+.iconbutton_type_info__Ue7wb:not([disabled]):active,
+.iconbutton_type_info__Ue7wb:not([disabled]):focus-within {
+  border-color: var(--click-button-iconButton-color-info-stroke-active);
+  background-color: var(--click-button-iconButton-color-info-background-active);
+  color: var(--click-button-iconButton-color-info-text-active);
+}
+
+.iconbutton__G-cEu[disabled] {
+  background-color: var(--click-button-iconButton-color-disabled-background-default);
+  color: var(--click-button-iconButton-color-disabled-text-default);
+  cursor: not-allowed;
+}

package/dist/cjs/components/IconButton/IconButton.module.css.cjs

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const iconbutton = "iconbutton__G-cEu";
+const iconbutton_size_sm = "iconbutton_size_sm__tT3BV";
+const iconbutton_size_xs = "iconbutton_size_xs__CxWtP";
+const iconbutton_type_primary = "iconbutton_type_primary__QEfNk";
+const iconbutton_type_secondary = "iconbutton_type_secondary__qeL8h";
+const iconbutton_type_ghost = "iconbutton_type_ghost__nLh8i";
+const iconbutton_type_danger = "iconbutton_type_danger__CjQg-";
+const iconbutton_type_info = "iconbutton_type_info__Ue7wb";
+const styles = {
+	iconbutton: iconbutton,
+	iconbutton_size_sm: iconbutton_size_sm,
+	iconbutton_size_xs: iconbutton_size_xs,
+	iconbutton_type_primary: iconbutton_type_primary,
+	iconbutton_type_secondary: iconbutton_type_secondary,
+	iconbutton_type_ghost: iconbutton_type_ghost,
+	iconbutton_type_danger: iconbutton_type_danger,
+	iconbutton_type_info: iconbutton_type_info
+};
+
+exports.default = styles;
+exports.iconbutton = iconbutton;
+exports.iconbutton_size_sm = iconbutton_size_sm;
+exports.iconbutton_size_xs = iconbutton_size_xs;
+exports.iconbutton_type_danger = iconbutton_type_danger;
+exports.iconbutton_type_ghost = iconbutton_type_ghost;
+exports.iconbutton_type_info = iconbutton_type_info;
+exports.iconbutton_type_primary = iconbutton_type_primary;
+exports.iconbutton_type_secondary = iconbutton_type_secondary;
+//# sourceMappingURL=IconButton.module.css.cjs.map

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

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

package/dist/cjs/components/IconButton/index.cjs

@@ -1,61 +1,50 @@
+require("./IconButton.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const IconButton_module = require('./IconButton.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
-
+const classVarianceAuthority = require('class-variance-authority');
+
+const iconButtonVariants = classVarianceAuthority.cva(IconButton_module.default.iconbutton, {
+  variants: {
+    type: {
+      primary: IconButton_module.default["iconbutton_type_primary"],
+      secondary: IconButton_module.default["iconbutton_type_secondary"],
+      ghost: IconButton_module.default["iconbutton_type_ghost"],
+      danger: IconButton_module.default["iconbutton_type_danger"],
+      info: IconButton_module.default["iconbutton_type_info"]
+    },
+    size: {
+      default: "",
+      sm: IconButton_module.default["iconbutton_size_sm"],
+      xs: IconButton_module.default["iconbutton_size_xs"]
+    }
+  },
+  defaultVariants: {
+    type: "primary",
+    size: "default"
+  }
+});
 const IconButton = react.forwardRef(({
   type = "primary",
   icon,
   size,
   disabled,
+  className,
   ...props
 }, ref) => {
   const iconName = icon ? icon.toString() : "unknown icon";
-  return /* @__PURE__ */ jsxRuntime.jsx(Button, { ...props, $styleType: type, $size: size, disabled, ref, role: "button", "aria-label": iconName, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...props, className: cva.cn(iconButtonVariants({
+    type,
+    size
+  }), className), disabled, ref, role: "button", "aria-label": iconName, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }) });
 });
 IconButton.displayName = "IconButton";
-const Button = styledComponents.styled.button.withConfig({
-  componentId: "sc-4ff7ue-0"
-})(["", ""], ({
-  theme,
-  $size,
-  $styleType = "primary"
-}) => `
-  border-radius: ${theme.click.button.iconButton.radii.all};
-  border: ${theme.click.button.stroke} solid ${theme.click.button.iconButton.color[$styleType].stroke.default};
-  cursor: pointer;
-  padding: ${$size ? `${theme.click.button.iconButton[$size].space.y} ${theme.click.button.iconButton[$size].space.x}` : `${theme.click.button.iconButton.default.space.y} ${theme.click.button.iconButton.default.space.x}`};
-
-  background-color: ${theme.click.button.iconButton.color[$styleType].background.default};
-
-  color: ${theme.click.button.iconButton.color[$styleType].text.default};
-  &:not([disabled]) {
-    &:hover {
-      background-color: ${theme.click.button.iconButton.color[$styleType].background.hover};
-      color: ${theme.click.button.iconButton.color[$styleType].text.hover};
-      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.hover};
-    }
-
-    &:focus, &:active, &:focus-within {
-      background-color: ${theme.click.button.iconButton.color[$styleType].background.active};
-      color: ${theme.click.button.iconButton.color[$styleType].text.active};
-      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.active};
-    }
-  }
-  &:visited {
-    background-color: ${theme.click.button.iconButton.color[$styleType].background.default};
-  }
-
-  &[disabled] {
-    background-color: ${theme.click.button.iconButton.color.disabled.background.default};
-    color: ${theme.click.button.iconButton.color.disabled.text.default};
-    cursor: not-allowed;
-  }
-  `);
 
 exports.IconButton = IconButton;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { IconButtonProps } from './IconButton.types';\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', icon, size, disabled, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <Button\n        {...props}\n        $styleType={type}\n        $size={size}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </Button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n\nconst Button = styled.button<{\n  $styleType?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'info';\n  $size?: 'default' | 'sm' | 'xs';\n}>`\n  ${({ theme, $size, $styleType = 'primary' }) => `\n  border-radius: ${theme.click.button.iconButton.radii.all};\n  border: ${theme.click.button.stroke} solid ${\n    theme.click.button.iconButton.color[$styleType].stroke.default\n  };\n  cursor: pointer;\n  padding: ${\n    $size\n      ? `${theme.click.button.iconButton[$size].space.y} ${theme.click.button.iconButton[$size].space.x}`\n      : `${theme.click.button.iconButton.default.space.y} ${theme.click.button.iconButton.default.space.x}`\n  };\n\n  background-color: ${theme.click.button.iconButton.color[$styleType].background.default};\n\n  color: ${theme.click.button.iconButton.color[$styleType].text.default};\n  &:not([disabled]) {\n    &:hover {\n      background-color: ${theme.click.button.iconButton.color[$styleType].background.hover};\n      color: ${theme.click.button.iconButton.color[$styleType].text.hover};\n      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.hover};\n    }\n\n    &:focus, &:active, &:focus-within {\n      background-color: ${\n        theme.click.button.iconButton.color[$styleType].background.active\n      };\n      color: ${theme.click.button.iconButton.color[$styleType].text.active};\n      border-color: ${theme.click.button.iconButton.color[$styleType].stroke.active};\n    }\n  }\n  &:visited {\n    background-color: ${\n      theme.click.button.iconButton.color[$styleType].background.default\n    };\n  }\n\n  &[disabled] {\n    background-color: ${theme.click.button.iconButton.color.disabled.background.default};\n    color: ${theme.click.button.iconButton.color.disabled.text.default};\n    cursor: not-allowed;\n  }\n  `}\n`;\n"],"names":["IconButton","forwardRef","type","icon","size","disabled","props","ref","iconName","toString","jsx","Icon","displayName","Button","styled","button","withConfig","componentId","theme","$size","$styleType","click","iconButton","radii","all","stroke","color","default","space","y","x","background","text","hover","active"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { IconButtonProps } from './IconButton.types';\nimport styles from './IconButton.module.css';\n\nconst iconButtonVariants = cva(styles.iconbutton, {\n  variants: {\n    type: {\n      primary: styles['iconbutton_type_primary'],\n      secondary: styles['iconbutton_type_secondary'],\n      ghost: styles['iconbutton_type_ghost'],\n      danger: styles['iconbutton_type_danger'],\n      info: styles['iconbutton_type_info'],\n    },\n    size: {\n      default: '',\n      sm: styles['iconbutton_size_sm'],\n      xs: styles['iconbutton_size_xs'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    size: 'default',\n  },\n});\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ type = 'primary', icon, size, disabled, className, ...props }, ref) => {\n    const iconName = icon ? icon.toString() : 'unknown icon';\n\n    return (\n      <button\n        {...props}\n        className={cn(iconButtonVariants({ type, size }), className)}\n        disabled={disabled}\n        ref={ref}\n        role=\"button\"\n        aria-label={iconName}\n      >\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      </button>\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n"],"names":["iconButtonVariants","cva","styles","iconbutton","variants","type","primary","secondary","ghost","danger","info","size","default","sm","xs","defaultVariants","IconButton","forwardRef","icon","disabled","className","props","ref","iconName","toString","cn","Icon","displayName"],"mappings":";;;;;;;;;;;AAMA,MAAMA,kBAAAA,GAAqBC,0BAAAA,CAAIC,yBAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,0BAAO,yBAAyB,CAAA;AAAA,MACzCK,SAAAA,EAAWL,0BAAO,2BAA2B,CAAA;AAAA,MAC7CM,KAAAA,EAAON,0BAAO,uBAAuB,CAAA;AAAA,MACrCO,MAAAA,EAAQP,0BAAO,wBAAwB,CAAA;AAAA,MACvCQ,IAAAA,EAAMR,0BAAO,sBAAsB;AAAA,KACrC;AAAA,IACAS,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAAS,EAAA;AAAA,MACTC,EAAAA,EAAIX,0BAAO,oBAAoB,CAAA;AAAA,MAC/BY,EAAAA,EAAIZ,0BAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAa,eAAAA,EAAiB;AAAA,IACfV,IAAAA,EAAM,SAAA;AAAA,IACNM,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAMK,UAAAA,GAAaC,iBACxB,CAAC;AAAA,EAAEZ,IAAAA,GAAO,SAAA;AAAA,EAAWa,IAAAA;AAAAA,EAAMP,IAAAA;AAAAA,EAAMQ,QAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAM,CAAA,EAAGC,GAAAA,KAAQ;AACxE,EAAA,MAAMC,QAAAA,GAAWL,IAAAA,GAAOA,IAAAA,CAAKM,QAAAA,EAAS,GAAI,cAAA;AAE1C,EAAA,sCACG,QAAA,EAAA,EACC,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAGzB,kBAAAA,CAAmB;AAAA,IAAEK,IAAAA;AAAAA,IAAMM;AAAAA,GAAM,CAAA,EAAGS,SAAS,CAAA,EAC3D,QAAA,EACA,KACA,IAAA,EAAK,QAAA,EACL,YAAA,EAAYG,QAAAA,EAEZ,yCAACG,SAAA,EAAA,EACC,IAAA,EAAMR,IAAAA,EACN,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAEJ,CACF;AAEAF,UAAAA,CAAWW,WAAAA,GAAc,YAAA;;;;"}

package/dist/cjs/components/Label/Label.css

@@ -0,0 +1,32 @@
+.label__RaRvM {
+  color: var(--click-field-color-label-default);
+  font: var(--click-field-typography-label-default);
+}
+
+/* Hover/focus rules only apply when neither disabled nor error is set, matching
+   the original styled-components behavior (which simply didn't emit them in
+   those states). The :not() chain also raises specificity above 0-1-0 so these
+   rules win over InputWrapper's `labelColor` override (a 0-1-0 single-class
+   styled-components selector injected later in the cascade). The .label_error
+   and .label_disabled modifiers below stay at 0-1-0 on purpose, so labelColor
+   continues to override them. */
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):hover {
+  color: var(--click-field-color-label-hover);
+  font: var(--click-field-typography-label-hover);
+}
+
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):focus,
+.label__RaRvM:not(.label_error__k6yT0, .label_disabled__8BGcG):focus-within {
+  color: var(--click-field-color-label-active);
+  font: var(--click-field-typography-label-active);
+}
+
+.label_error__k6yT0 {
+  color: var(--click-field-color-label-error);
+  font: var(--click-field-typography-label-error);
+}
+
+.label_disabled__8BGcG {
+  color: var(--click-field-color-label-disabled);
+  font: var(--click-field-typography-label-disabled);
+}

package/dist/cjs/components/Label/Label.module.css.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const label = "label__RaRvM";
+const label_error = "label_error__k6yT0";
+const label_disabled = "label_disabled__8BGcG";
+const styles = {
+	label: label,
+	label_error: label_error,
+	label_disabled: label_disabled
+};
+
+exports.default = styles;
+exports.label = label;
+exports.label_disabled = label_disabled;
+exports.label_error = label_error;
+//# sourceMappingURL=Label.module.css.cjs.map

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

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

package/dist/cjs/components/Label/index.cjs

@@ -1,42 +1,39 @@
+require("./Label.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Label_module = require('./Label.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const FormFieldLabel = styledComponents.styled.label.withConfig({
-  componentId: "sc-1gg29zb-0"
-})(["", ""], ({
-  theme,
-  disabled,
-  $error
-}) => `
-    ${disabled ? `
-    color: ${theme.click.field.color.label.disabled};
-    font: ${theme.click.field.typography.label.disabled};
-    ` : $error ? `
-    color: ${theme.click.field.color.label.error};
-    font: ${theme.click.field.typography.label.error};
-    ` : `
-    color: ${theme.click.field.color.label.default};
-    font: ${theme.click.field.typography.label.default};
-    &:hover {
-      color: ${theme.click.field.color.label.hover};
-      font: ${theme.click.field.typography.label.hover};
-    }
-    &:focus, &:focus-within {
-      color: ${theme.click.field.color.label.active};
-      font: ${theme.click.field.typography.label.active};
+const labelVariants = classVarianceAuthority.cva(Label_module.default.label, {
+  variants: {
+    disabled: {
+      true: Label_module.default["label_disabled"],
+      false: ""
+    },
+    error: {
+      true: Label_module.default["label_error"],
+      false: ""
     }
-    `};
-  `);
+  },
+  defaultVariants: {
+    disabled: false,
+    error: false
+  }
+});
 const Label = ({
   disabled,
   error,
   children,
+  className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(FormFieldLabel, { disabled, $error: error, ...props, children });
+}) => /* @__PURE__ */ jsxRuntime.jsx("label", { ...props, className: cva.cn(labelVariants({
+  disabled,
+  error
+}), className), children });
 
 exports.Label = Label;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { LabelProps } from './Label.types';\n\ninterface FormFieldLableProps {\n  disabled?: boolean;\n  $error?: boolean;\n  htmlFor?: string;\n}\n\nconst FormFieldLabel = styled.label<FormFieldLableProps>`\n  ${({ theme, disabled, $error }) => `\n    ${\n      disabled\n        ? `\n    color: ${theme.click.field.color.label.disabled};\n    font: ${theme.click.field.typography.label.disabled};\n    `\n        : $error\n          ? `\n    color: ${theme.click.field.color.label.error};\n    font: ${theme.click.field.typography.label.error};\n    `\n          : `\n    color: ${theme.click.field.color.label.default};\n    font: ${theme.click.field.typography.label.default};\n    &:hover {\n      color: ${theme.click.field.color.label.hover};\n      font: ${theme.click.field.typography.label.hover};\n    }\n    &:focus, &:focus-within {\n      color: ${theme.click.field.color.label.active};\n      font: ${theme.click.field.typography.label.active};\n    }\n    `\n    };\n  `}\n`;\n\nexport const Label = ({ disabled, error, children, ...props }: LabelProps) => (\n  <FormFieldLabel\n    disabled={disabled}\n    $error={error}\n    {...props}\n  >\n    {children}\n  </FormFieldLabel>\n);\n"],"names":["FormFieldLabel","styled","label","withConfig","componentId","theme","disabled","$error","click","field","color","typography","error","default","hover","active","Label","children","props"],"mappings":";;;;;;;AASA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,KAAAA,CAAKC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC/B,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,QAAAA;AAAAA,EAAUC;AAAO,CAAA,KAAM;AAAA,IAAA,EAE/BD,QAAAA,GACI;AAAA,WAAA,EACGD,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMI,QAAQ,CAAA;AAAA,UAAA,EACvCD,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMI,QAAQ,CAAA;AAAA,IAAA,CAAA,GAE7CC,MAAAA,GACE;AAAA,WAAA,EACCF,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMU,KAAK,CAAA;AAAA,UAAA,EACpCP,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMU,KAAK,CAAA;AAAA,IAAA,CAAA,GAExC;AAAA,WAAA,EACCP,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMW,OAAO,CAAA;AAAA,UAAA,EACtCR,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMW,OAAO,CAAA;AAAA;AAAA,aAAA,EAEvCR,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMY,KAAK,CAAA;AAAA,YAAA,EACpCT,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMY,KAAK,CAAA;AAAA;AAAA;AAAA,aAAA,EAGvCT,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMR,MAAMa,MAAM,CAAA;AAAA,YAAA,EACrCV,KAAAA,CAAMG,KAAAA,CAAMC,KAAAA,CAAME,UAAAA,CAAWT,MAAMa,MAAM,CAAA;AAAA;AAAA,IAAA,CAElD,CAAA;AAAA,EAAA,CAEF,CAAA;AAGI,MAAMC,QAAQA,CAAC;AAAA,EAAEV,QAAAA;AAAAA,EAAUM,KAAAA;AAAAA,EAAOK,QAAAA;AAAAA,EAAU,GAAGC;AAAkB,CAAA,oCACrE,cAAA,EAAA,EACC,QAAA,EACA,QAAQN,KAAAA,EACR,GAAIM,OAEHD,QAAAA,EACH;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Label/Label.tsx"],"sourcesContent":["import { cn, cva } from '@/lib/cva';\nimport { LabelProps } from './Label.types';\nimport styles from './Label.module.css';\n\nconst labelVariants = cva(styles.label, {\n  variants: {\n    disabled: {\n      true: styles['label_disabled'],\n      false: '',\n    },\n    error: {\n      true: styles['label_error'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n    error: false,\n  },\n});\n\nexport const Label = ({ disabled, error, children, className, ...props }: LabelProps) => (\n  <label\n    {...props}\n    className={cn(labelVariants({ disabled, error }), className)}\n  >\n    {children}\n  </label>\n);\n"],"names":["labelVariants","cva","styles","label","variants","disabled","true","false","error","defaultVariants","Label","children","className","props","cn"],"mappings":";;;;;;;;;AAIA,MAAMA,aAAAA,GAAgBC,0BAAAA,CAAIC,oBAAAA,CAAOC,KAAAA,EAAO;AAAA,EACtCC,QAAAA,EAAU;AAAA,IACRC,QAAAA,EAAU;AAAA,MACRC,IAAAA,EAAMJ,qBAAO,gBAAgB,CAAA;AAAA,MAC7BK,KAAAA,EAAO;AAAA,KACT;AAAA,IACAC,KAAAA,EAAO;AAAA,MACLF,IAAAA,EAAMJ,qBAAO,aAAa,CAAA;AAAA,MAC1BK,KAAAA,EAAO;AAAA;AACT,GACF;AAAA,EACAE,eAAAA,EAAiB;AAAA,IACfJ,QAAAA,EAAU,KAAA;AAAA,IACVG,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAME,QAAQA,CAAC;AAAA,EAAEL,QAAAA;AAAAA,EAAUG,KAAAA;AAAAA,EAAOG,QAAAA;AAAAA,EAAUC,SAAAA;AAAAA,EAAW,GAAGC;AAAkB,CAAA,oCAChF,OAAA,EAAA,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWC,OAAGd,aAAAA,CAAc;AAAA,EAAEK,QAAAA;AAAAA,EAAUG;AAAM,CAAC,CAAA,EAAGI,SAAS,CAAA,EAE1DD,QAAAA,EACH;;;;"}

package/dist/cjs/components/Link/Link.css

@@ -0,0 +1,135 @@
+.link__Ly-e3 {
+  display: inline-flex;
+  margin: 0;
+  margin-right: var(--link-gap);
+  align-items: center;
+  gap: var(--link-gap);
+  color: var(--click-global-color-text-link-default);
+  font: var(--link-font);
+  text-decoration: none;
+}
+
+.link__Ly-e3:hover,
+.link__Ly-e3:focus {
+  color: var(--click-global-color-text-link-hover);
+  text-decoration: underline;
+  cursor: pointer;
+  transition: var(--transition-default);
+}
+
+.link__Ly-e3:visited {
+  color: var(--click-global-color-text-link-default);
+}
+
+/* The original emitted theme.click.link.space.sm.gap for size xs/sm and
+   theme.click.link.space.md.gap for md/lg. Alias to a local custom property
+   so the gap/margin-right rule on .link stays single-source. */
+.link_size_xs__kYknu,
+.link_size_sm__Qqpi3 {
+  --link-gap: var(--click-link-space-sm-gap);
+}
+
+.link_size_md__QlDJt,
+.link_size_lg__FkICb {
+  --link-gap: var(--click-link-space-md-gap);
+}
+
+/* Size + weight compose to pick a single typography token —
+   theme.typography.styles.product.text[$weight][$size]. Emit one compound
+   class per combination and set --link-font, which the base .link rule
+   consumes. */
+.link_size_xs__kYknu.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-sm);
+}
+
+.link_size_md__QlDJt.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-md);
+}
+
+.link_size_lg__FkICb.link_weight_normal__shPkj {
+  --link-font: var(--typography-styles-product-text-normal-lg);
+}
+
+.link_size_xs__kYknu.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-sm);
+}
+
+.link_size_md__QlDJt.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-md);
+}
+
+.link_size_lg__FkICb.link_weight_medium__Sot5E {
+  --link-font: var(--typography-styles-product-text-medium-lg);
+}
+
+.link_size_xs__kYknu.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-sm);
+}
+
+.link_size_md__QlDJt.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-md);
+}
+
+.link_size_lg__FkICb.link_weight_semibold__6STFO {
+  --link-font: var(--typography-styles-product-text-semibold-lg);
+}
+
+.link_size_xs__kYknu.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-sm);
+}
+
+.link_size_md__QlDJt.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-md);
+}
+
+.link_size_lg__FkICb.link_weight_bold__FWQyo {
+  --link-font: var(--typography-styles-product-text-bold-lg);
+}
+
+.link_size_xs__kYknu.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-xs);
+}
+
+.link_size_sm__Qqpi3.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-sm);
+}
+
+.link_size_md__QlDJt.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-md);
+}
+
+.link_size_lg__FkICb.link_weight_mono__Mzdum {
+  --link-font: var(--typography-styles-product-text-mono-lg);
+}
+
+/* The inner Icon receives .external-icon via className. The original used a
+   descendant selector inside IconWrapper; here we pass the scoped class
+   straight to the Icon so the selector stays a single class with the same
+   effective specificity. */
+.external-icon_size_xs__hRWrg,
+.external-icon_size_sm__QFJoc {
+  width: var(--click-link-icon-size-sm-width);
+  height: var(--click-link-icon-size-sm-height);
+}
+
+.external-icon_size_md__-bbPt,
+.external-icon_size_lg__XGkpl {
+  width: var(--click-link-icon-size-md-width);
+  height: var(--click-link-icon-size-md-height);
+}

package/dist/cjs/components/Link/Link.module.css.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const link = "link__Ly-e3";
+const link_size_xs = "link_size_xs__kYknu";
+const link_size_sm = "link_size_sm__Qqpi3";
+const link_size_md = "link_size_md__QlDJt";
+const link_size_lg = "link_size_lg__FkICb";
+const link_weight_normal = "link_weight_normal__shPkj";
+const link_weight_medium = "link_weight_medium__Sot5E";
+const link_weight_semibold = "link_weight_semibold__6STFO";
+const link_weight_bold = "link_weight_bold__FWQyo";
+const link_weight_mono = "link_weight_mono__Mzdum";
+const styles = {
+	link: link,
+	link_size_xs: link_size_xs,
+	link_size_sm: link_size_sm,
+	link_size_md: link_size_md,
+	link_size_lg: link_size_lg,
+	link_weight_normal: link_weight_normal,
+	link_weight_medium: link_weight_medium,
+	link_weight_semibold: link_weight_semibold,
+	link_weight_bold: link_weight_bold,
+	link_weight_mono: link_weight_mono,
+	"external-icon_size_xs": "external-icon_size_xs__hRWrg",
+	"external-icon_size_sm": "external-icon_size_sm__QFJoc",
+	"external-icon_size_md": "external-icon_size_md__-bbPt",
+	"external-icon_size_lg": "external-icon_size_lg__XGkpl"
+};
+
+exports.default = styles;
+exports.link = link;
+exports.link_size_lg = link_size_lg;
+exports.link_size_md = link_size_md;
+exports.link_size_sm = link_size_sm;
+exports.link_size_xs = link_size_xs;
+exports.link_weight_bold = link_weight_bold;
+exports.link_weight_medium = link_weight_medium;
+exports.link_weight_mono = link_weight_mono;
+exports.link_weight_normal = link_weight_normal;
+exports.link_weight_semibold = link_weight_semibold;
+//# sourceMappingURL=Link.module.css.cjs.map

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

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