@clickhouse/click-ui 0.6.0 → 0.6.1-rc1

package/dist/cjs/components/Badge/Badge.css

@@ -0,0 +1,232 @@
+.wrapper__DxhQK {
+  display: inline-flex;
+  padding: var(--click-badge-space-md-y) var(--click-badge-space-md-x);
+  border: var(--click-badge-stroke) solid var(--click-badge-opaque-color-stroke-default);
+  border-radius: var(--click-badge-radii-all);
+  background-color: var(--click-badge-opaque-color-background-default);
+  color: var(--click-badge-opaque-color-text-default);
+  font: var(--click-badge-typography-label-md-default);
+}
+
+/* Opaque type — colors per state */
+
+.wrapper_typestate_opaque-default__aI5-w {
+  border-color: var(--click-badge-opaque-color-stroke-default);
+  background-color: var(--click-badge-opaque-color-background-default);
+  color: var(--click-badge-opaque-color-text-default);
+}
+
+.wrapper_typestate_opaque-success__A7jFR {
+  border-color: var(--click-badge-opaque-color-stroke-success);
+  background-color: var(--click-badge-opaque-color-background-success);
+  color: var(--click-badge-opaque-color-text-success);
+}
+
+.wrapper_typestate_opaque-neutral__M-2Ek {
+  border-color: var(--click-badge-opaque-color-stroke-neutral);
+  background-color: var(--click-badge-opaque-color-background-neutral);
+  color: var(--click-badge-opaque-color-text-neutral);
+}
+
+.wrapper_typestate_opaque-danger__1FP9Q {
+  border-color: var(--click-badge-opaque-color-stroke-danger);
+  background-color: var(--click-badge-opaque-color-background-danger);
+  color: var(--click-badge-opaque-color-text-danger);
+}
+
+.wrapper_typestate_opaque-disabled__rOnZR {
+  border-color: var(--click-badge-opaque-color-stroke-disabled);
+  background-color: var(--click-badge-opaque-color-background-disabled);
+  color: var(--click-badge-opaque-color-text-disabled);
+}
+
+.wrapper_typestate_opaque-warning__LFMbO {
+  border-color: var(--click-badge-opaque-color-stroke-warning);
+  background-color: var(--click-badge-opaque-color-background-warning);
+  color: var(--click-badge-opaque-color-text-warning);
+}
+
+.wrapper_typestate_opaque-info__x6Bg3 {
+  border-color: var(--click-badge-opaque-color-stroke-info);
+  background-color: var(--click-badge-opaque-color-background-info);
+  color: var(--click-badge-opaque-color-text-info);
+}
+
+/* Solid type — colors per state */
+
+.wrapper_typestate_solid-default__xjCXm {
+  border-color: var(--click-badge-solid-color-stroke-default);
+  background-color: var(--click-badge-solid-color-background-default);
+  color: var(--click-badge-solid-color-text-default);
+}
+
+.wrapper_typestate_solid-success__NbCJo {
+  border-color: var(--click-badge-solid-color-stroke-success);
+  background-color: var(--click-badge-solid-color-background-success);
+  color: var(--click-badge-solid-color-text-success);
+}
+
+.wrapper_typestate_solid-neutral__dFOPR {
+  border-color: var(--click-badge-solid-color-stroke-neutral);
+  background-color: var(--click-badge-solid-color-background-neutral);
+  color: var(--click-badge-solid-color-text-neutral);
+}
+
+.wrapper_typestate_solid-danger__zCzPE {
+  border-color: var(--click-badge-solid-color-stroke-danger);
+  background-color: var(--click-badge-solid-color-background-danger);
+  color: var(--click-badge-solid-color-text-danger);
+}
+
+.wrapper_typestate_solid-disabled__sscAh {
+  border-color: var(--click-badge-solid-color-stroke-disabled);
+  background-color: var(--click-badge-solid-color-background-disabled);
+  color: var(--click-badge-solid-color-text-disabled);
+}
+
+.wrapper_typestate_solid-warning__48ZTU {
+  border-color: var(--click-badge-solid-color-stroke-warning);
+  background-color: var(--click-badge-solid-color-background-warning);
+  color: var(--click-badge-solid-color-text-warning);
+}
+
+.wrapper_typestate_solid-info__5fv-r {
+  border-color: var(--click-badge-solid-color-stroke-info);
+  background-color: var(--click-badge-solid-color-background-info);
+  color: var(--click-badge-solid-color-text-info);
+}
+
+/* Sizes */
+
+.wrapper_size_sm__zQIOE {
+  padding: var(--click-badge-space-sm-y) var(--click-badge-space-sm-x);
+  font: var(--click-badge-typography-label-sm-default);
+}
+
+.wrapper_size_md__1Uvni {
+  padding: var(--click-badge-space-md-y) var(--click-badge-space-md-x);
+  font: var(--click-badge-typography-label-md-default);
+}
+
+/* Content row — mirrors the inner Content styled component. The original
+   `Content` was never passed `$size`, so its `gap` always defaulted to the
+   md token regardless of the badge's actual `size`. Preserved verbatim. */
+
+.content__8D6nB {
+  display: inline-flex;
+  max-width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-badge-space-md-gap);
+}
+
+/* BadgeContent — wraps the IconWrapper. The original styled(IconWrapper) set
+   `width: auto; overflow: hidden;` on the IconWrapper's rendered root and
+   styled the descendant <svg> with color, height, width, and `gap: inherit`.
+
+   The styled-components version only forwarded `$state` to BadgeContent;
+   `$type` and `$size` were NOT passed and defaulted to `'opaque'` and `'md'`
+   inside the styled rule. To preserve that behavior verbatim, the descendant
+   <svg> rules below key off `state` only — color always comes from the
+   opaque-text-* tokens, and dimensions are always md, regardless of the
+   badge's actual `type`/`size`.
+
+   The doubled-class selectors below (e.g. `.badgecontent.badgecontent svg`)
+   raise specificity to (0,2,1) so these rules win over the Icon component's
+   own runtime-injected styled-components rule `.<sc-class> svg { width: ... }`
+   (specificity 0,1,1). styled-components used to inject the BadgeContent
+   stylesheet AFTER Icon's stylesheet at render time, so source order let
+   BadgeContent win at equal specificity; CSS Modules now bundle Badge's
+   stylesheet earlier than the runtime SC stylesheet, so we need the bump. */
+
+/* stylelint-disable no-descending-specificity -- doubled-class selectors below
+   raise specificity so they win over the Icon component's runtime-injected
+   styled-components `& svg` rule. */
+
+.badgecontent__MlQs8 {
+  width: auto;
+  overflow: hidden;
+}
+
+.badgecontent__MlQs8.badgecontent__MlQs8 svg {
+  width: var(--click-badge-icon-md-size-width);
+  height: var(--click-badge-icon-md-size-height);
+  gap: inherit;
+}
+
+.badgecontent_state_default__xvx1m.badgecontent_state_default__xvx1m svg {
+  color: var(--click-badge-opaque-color-text-default);
+}
+
+.badgecontent_state_success__NuTD7.badgecontent_state_success__NuTD7 svg {
+  color: var(--click-badge-opaque-color-text-success);
+}
+
+.badgecontent_state_neutral__Q0zQx.badgecontent_state_neutral__Q0zQx svg {
+  color: var(--click-badge-opaque-color-text-neutral);
+}
+
+.badgecontent_state_danger__cLB2G.badgecontent_state_danger__cLB2G svg {
+  color: var(--click-badge-opaque-color-text-danger);
+}
+
+.badgecontent_state_disabled__UDS4K.badgecontent_state_disabled__UDS4K svg {
+  color: var(--click-badge-opaque-color-text-disabled);
+}
+
+.badgecontent_state_warning__GtYY1.badgecontent_state_warning__GtYY1 svg {
+  color: var(--click-badge-opaque-color-text-warning);
+}
+
+.badgecontent_state_info__XgrAY.badgecontent_state_info__XgrAY svg {
+  color: var(--click-badge-opaque-color-text-info);
+}
+
+/* stylelint-enable no-descending-specificity */
+
+/* Close icon — mirrors the SvgContainer styled.svg with as={Icon}. The
+   styled-components version only passed $state (size and type defaulted),
+   so width/height come from the default md/opaque tokens, and color from
+   the opaque-text-<state> token.
+
+   The state classes below use doubled-class specificity (0,2,1) so they
+   always win over Icon's internal `SvgWrapper` styled-component rule that
+   sets `color: currentColor` on the same element at single-class specificity.
+   Without the bump, stylesheet-order would decide and CSS Modules bundle
+   before runtime SC styles, so the close icon would inherit the wrapper's
+   color (e.g. opaque-text-info for an info badge, but solid-text-info for
+   a solid info badge). Doubled class keeps the close icon on opaque-text-*
+   regardless. */
+
+.closeicon__p-7mr {
+  width: var(--click-badge-icon-md-size-width);
+  height: var(--click-badge-icon-md-size-height);
+}
+
+.closeicon_state_default__i3VsI.closeicon_state_default__i3VsI {
+  color: var(--click-badge-opaque-color-text-default);
+}
+
+.closeicon_state_success__NRfHo.closeicon_state_success__NRfHo {
+  color: var(--click-badge-opaque-color-text-success);
+}
+
+.closeicon_state_neutral__MFG4R.closeicon_state_neutral__MFG4R {
+  color: var(--click-badge-opaque-color-text-neutral);
+}
+
+.closeicon_state_danger__1SPLo.closeicon_state_danger__1SPLo {
+  color: var(--click-badge-opaque-color-text-danger);
+}
+
+.closeicon_state_disabled__kagep.closeicon_state_disabled__kagep {
+  color: var(--click-badge-opaque-color-text-disabled);
+}
+
+.closeicon_state_warning__HyEx3.closeicon_state_warning__HyEx3 {
+  color: var(--click-badge-opaque-color-text-warning);
+}
+
+.closeicon_state_info__qNJkh.closeicon_state_info__qNJkh {
+  color: var(--click-badge-opaque-color-text-info);
+}

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

@@ -0,0 +1,83 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const wrapper = "wrapper__DxhQK";
+const wrapper_size_sm = "wrapper_size_sm__zQIOE";
+const wrapper_size_md = "wrapper_size_md__1Uvni";
+const content = "content__8D6nB";
+const badgecontent = "badgecontent__MlQs8";
+const badgecontent_state_default = "badgecontent_state_default__xvx1m";
+const badgecontent_state_success = "badgecontent_state_success__NuTD7";
+const badgecontent_state_neutral = "badgecontent_state_neutral__Q0zQx";
+const badgecontent_state_danger = "badgecontent_state_danger__cLB2G";
+const badgecontent_state_disabled = "badgecontent_state_disabled__UDS4K";
+const badgecontent_state_warning = "badgecontent_state_warning__GtYY1";
+const badgecontent_state_info = "badgecontent_state_info__XgrAY";
+const closeicon = "closeicon__p-7mr";
+const closeicon_state_default = "closeicon_state_default__i3VsI";
+const closeicon_state_success = "closeicon_state_success__NRfHo";
+const closeicon_state_neutral = "closeicon_state_neutral__MFG4R";
+const closeicon_state_danger = "closeicon_state_danger__1SPLo";
+const closeicon_state_disabled = "closeicon_state_disabled__kagep";
+const closeicon_state_warning = "closeicon_state_warning__HyEx3";
+const closeicon_state_info = "closeicon_state_info__qNJkh";
+const styles = {
+	wrapper: wrapper,
+	"wrapper_typestate_opaque-default": "wrapper_typestate_opaque-default__aI5-w",
+	"wrapper_typestate_opaque-success": "wrapper_typestate_opaque-success__A7jFR",
+	"wrapper_typestate_opaque-neutral": "wrapper_typestate_opaque-neutral__M-2Ek",
+	"wrapper_typestate_opaque-danger": "wrapper_typestate_opaque-danger__1FP9Q",
+	"wrapper_typestate_opaque-disabled": "wrapper_typestate_opaque-disabled__rOnZR",
+	"wrapper_typestate_opaque-warning": "wrapper_typestate_opaque-warning__LFMbO",
+	"wrapper_typestate_opaque-info": "wrapper_typestate_opaque-info__x6Bg3",
+	"wrapper_typestate_solid-default": "wrapper_typestate_solid-default__xjCXm",
+	"wrapper_typestate_solid-success": "wrapper_typestate_solid-success__NbCJo",
+	"wrapper_typestate_solid-neutral": "wrapper_typestate_solid-neutral__dFOPR",
+	"wrapper_typestate_solid-danger": "wrapper_typestate_solid-danger__zCzPE",
+	"wrapper_typestate_solid-disabled": "wrapper_typestate_solid-disabled__sscAh",
+	"wrapper_typestate_solid-warning": "wrapper_typestate_solid-warning__48ZTU",
+	"wrapper_typestate_solid-info": "wrapper_typestate_solid-info__5fv-r",
+	wrapper_size_sm: wrapper_size_sm,
+	wrapper_size_md: wrapper_size_md,
+	content: content,
+	badgecontent: badgecontent,
+	badgecontent_state_default: badgecontent_state_default,
+	badgecontent_state_success: badgecontent_state_success,
+	badgecontent_state_neutral: badgecontent_state_neutral,
+	badgecontent_state_danger: badgecontent_state_danger,
+	badgecontent_state_disabled: badgecontent_state_disabled,
+	badgecontent_state_warning: badgecontent_state_warning,
+	badgecontent_state_info: badgecontent_state_info,
+	closeicon: closeicon,
+	closeicon_state_default: closeicon_state_default,
+	closeicon_state_success: closeicon_state_success,
+	closeicon_state_neutral: closeicon_state_neutral,
+	closeicon_state_danger: closeicon_state_danger,
+	closeicon_state_disabled: closeicon_state_disabled,
+	closeicon_state_warning: closeicon_state_warning,
+	closeicon_state_info: closeicon_state_info
+};
+
+exports.badgecontent = badgecontent;
+exports.badgecontent_state_danger = badgecontent_state_danger;
+exports.badgecontent_state_default = badgecontent_state_default;
+exports.badgecontent_state_disabled = badgecontent_state_disabled;
+exports.badgecontent_state_info = badgecontent_state_info;
+exports.badgecontent_state_neutral = badgecontent_state_neutral;
+exports.badgecontent_state_success = badgecontent_state_success;
+exports.badgecontent_state_warning = badgecontent_state_warning;
+exports.closeicon = closeicon;
+exports.closeicon_state_danger = closeicon_state_danger;
+exports.closeicon_state_default = closeicon_state_default;
+exports.closeicon_state_disabled = closeicon_state_disabled;
+exports.closeicon_state_info = closeicon_state_info;
+exports.closeicon_state_neutral = closeicon_state_neutral;
+exports.closeicon_state_success = closeicon_state_success;
+exports.closeicon_state_warning = closeicon_state_warning;
+exports.content = content;
+exports.default = styles;
+exports.wrapper = wrapper;
+exports.wrapper_size_md = wrapper_size_md;
+exports.wrapper_size_sm = wrapper_size_sm;
+//# sourceMappingURL=Badge.module.css.cjs.map

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

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

package/dist/cjs/components/Badge/index.cjs

@@ -1,58 +1,75 @@
+require("./Badge.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
 const IconWrapper = require('../IconWrapper/index.cjs');
+const cva = require('../../lib/cva.cjs');
+const Badge_module = require('./Badge.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const Wrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-471xo0-0"
-})(["display:inline-flex;", ""], ({
-  $state = "default",
-  $size = "md",
-  $type = "opaque",
-  theme
-}) => `
-    background-color: ${theme.click.badge[$type].color.background[$state]};
-    color: ${theme.click.badge[$type].color.text[$state]};
-    font: ${theme.click.badge.typography.label[$size].default};
-    border-radius: ${theme.click.badge.radii.all};
-    border: ${theme.click.badge.stroke} solid ${theme.click.badge[$type].color.stroke[$state]};
-    padding: ${theme.click.badge.space[$size].y} ${theme.click.badge.space[$size].x};
-  `);
-const Content = styledComponents.styled.div.withConfig({
-  componentId: "sc-471xo0-1"
-})(["display:inline-flex;align-items:center;gap:", ";max-width:100%;justify-content:flex-start;"], ({
-  $size = "md",
-  theme
-}) => theme.click.badge.space[$size].gap);
-const SvgContainer = styledComponents.styled.svg.withConfig({
-  componentId: "sc-471xo0-2"
-})(["", ""], ({
-  $state = "default",
-  $size = "md",
-  $type = "opaque",
-  theme
-}) => `
-    color: ${theme.click.badge[$type].color.text[$state]};
-    height: ${theme.click.badge.icon[$size].size.height};
-    width: ${theme.click.badge.icon[$size].size.width};
-  `);
-const BadgeContent = styledComponents.styled(IconWrapper.IconWrapper).withConfig({
-  componentId: "sc-471xo0-3"
-})(["width:auto;overflow:hidden;svg{", "}"], ({
-  $state = "default",
-  $size = "md",
-  $type = "opaque",
-  theme
-}) => `
-    color: ${theme.click.badge[$type].color.text[$state]};
-    height: ${theme.click.badge.icon[$size].size.height};
-    width: ${theme.click.badge.icon[$size].size.width};
-    gap: inherit;
-  `);
+const wrapperVariants = classVarianceAuthority.cva(Badge_module.default.wrapper, {
+  variants: {
+    typestate: {
+      "opaque-default": Badge_module.default["wrapper_typestate_opaque-default"],
+      "opaque-success": Badge_module.default["wrapper_typestate_opaque-success"],
+      "opaque-neutral": Badge_module.default["wrapper_typestate_opaque-neutral"],
+      "opaque-danger": Badge_module.default["wrapper_typestate_opaque-danger"],
+      "opaque-disabled": Badge_module.default["wrapper_typestate_opaque-disabled"],
+      "opaque-warning": Badge_module.default["wrapper_typestate_opaque-warning"],
+      "opaque-info": Badge_module.default["wrapper_typestate_opaque-info"],
+      "solid-default": Badge_module.default["wrapper_typestate_solid-default"],
+      "solid-success": Badge_module.default["wrapper_typestate_solid-success"],
+      "solid-neutral": Badge_module.default["wrapper_typestate_solid-neutral"],
+      "solid-danger": Badge_module.default["wrapper_typestate_solid-danger"],
+      "solid-disabled": Badge_module.default["wrapper_typestate_solid-disabled"],
+      "solid-warning": Badge_module.default["wrapper_typestate_solid-warning"],
+      "solid-info": Badge_module.default["wrapper_typestate_solid-info"]
+    },
+    size: {
+      sm: Badge_module.default["wrapper_size_sm"],
+      md: Badge_module.default["wrapper_size_md"]
+    }
+  },
+  defaultVariants: {
+    typestate: "opaque-default",
+    size: "md"
+  }
+});
+const badgeContentVariants = classVarianceAuthority.cva(Badge_module.default.badgecontent, {
+  variants: {
+    state: {
+      default: Badge_module.default["badgecontent_state_default"],
+      success: Badge_module.default["badgecontent_state_success"],
+      neutral: Badge_module.default["badgecontent_state_neutral"],
+      danger: Badge_module.default["badgecontent_state_danger"],
+      disabled: Badge_module.default["badgecontent_state_disabled"],
+      warning: Badge_module.default["badgecontent_state_warning"],
+      info: Badge_module.default["badgecontent_state_info"]
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
+});
+const closeIconVariants = classVarianceAuthority.cva(Badge_module.default.closeicon, {
+  variants: {
+    state: {
+      default: Badge_module.default["closeicon_state_default"],
+      success: Badge_module.default["closeicon_state_success"],
+      neutral: Badge_module.default["closeicon_state_neutral"],
+      danger: Badge_module.default["closeicon_state_danger"],
+      disabled: Badge_module.default["closeicon_state_disabled"],
+      warning: Badge_module.default["closeicon_state_warning"],
+      info: Badge_module.default["closeicon_state_info"]
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
+});
 const Badge = ({
   icon,
   iconDir,
@@ -63,11 +80,24 @@ const Badge = ({
   dismissible,
   onClose,
   ellipsisContent = true,
+  className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { $state: state, $size: size, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(BadgeContent, { icon, iconDir, size, $state: state, ellipsisContent, children: text }),
-  dismissible && /* @__PURE__ */ jsxRuntime.jsx(SvgContainer, { name: "cross", $state: state, as: Icon.Icon, onClick: onClose, "aria-label": "close" })
-] }) });
+}) => {
+  const resolvedType = type ?? "opaque";
+  const resolvedSize = size ?? "md";
+  const typestate = `${resolvedType}-${state}`;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(wrapperVariants({
+    typestate,
+    size: resolvedSize
+  }), className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, className: Badge_module.default.content, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, size, ellipsisContent, className: cva.cn(badgeContentVariants({
+      state
+    })), children: text }),
+    dismissible && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", onClick: onClose, "aria-label": "close", className: cva.cn(closeIconVariants({
+      state
+    })) })
+  ] }) });
+};
 
 exports.Badge = Badge;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { BadgeProps, BadgeState, BadgeSize, BadgeType } from './Badge.types';\n\nconst Wrapper = styled.div<{ $state?: BadgeState; $size?: BadgeSize; $type?: BadgeType }>`\n  display: inline-flex;\n  ${({ $state = 'default', $size = 'md', $type = 'opaque', theme }) => `\n    background-color: ${theme.click.badge[$type].color.background[$state]};\n    color: ${theme.click.badge[$type].color.text[$state]};\n    font: ${theme.click.badge.typography.label[$size].default};\n    border-radius: ${theme.click.badge.radii.all};\n    border: ${theme.click.badge.stroke} solid ${theme.click.badge[$type].color.stroke[$state]};\n    padding: ${theme.click.badge.space[$size].y} ${theme.click.badge.space[$size].x};\n  `}\n`;\n\nconst Content = styled.div<{ $state?: BadgeState; $size?: BadgeSize }>`\n  display: inline-flex;\n  align-items: center;\n  gap: ${({ $size = 'md', theme }) => theme.click.badge.space[$size].gap};\n  max-width: 100%;\n  justify-content: flex-start;\n`;\n\nconst SvgContainer = styled.svg<{\n  $state?: BadgeState;\n  $size?: BadgeSize;\n  $type?: BadgeType;\n}>`\n  ${({ $state = 'default', $size = 'md', $type = 'opaque', theme }) => `\n    color: ${theme.click.badge[$type].color.text[$state]};\n    height: ${theme.click.badge.icon[$size].size.height};\n    width: ${theme.click.badge.icon[$size].size.width};\n  `}\n`;\nconst BadgeContent = styled(IconWrapper)<{\n  $state?: BadgeState;\n  $size?: BadgeSize;\n  $type?: BadgeType;\n}>`\n  width: auto;\n  overflow: hidden;\n  svg {\n    ${({ $state = 'default', $size = 'md', $type = 'opaque', theme }) => `\n    color: ${theme.click.badge[$type].color.text[$state]};\n    height: ${theme.click.badge.icon[$size].size.height};\n    width: ${theme.click.badge.icon[$size].size.width};\n    gap: inherit;\n  `}\n  }\n`;\n\nexport const Badge = ({\n  icon,\n  iconDir,\n  text,\n  state = 'default',\n  size,\n  type,\n  dismissible,\n  onClose,\n  ellipsisContent = true,\n  ...props\n}: BadgeProps) => (\n  <Wrapper\n    $state={state}\n    $size={size}\n    $type={type}\n    {...props}\n  >\n    <Content data-testid={`${ellipsisContent ? 'ellipsed' : 'normal'}-badge-content`}>\n      <BadgeContent\n        icon={icon}\n        iconDir={iconDir}\n        size={size}\n        $state={state}\n        ellipsisContent={ellipsisContent}\n      >\n        {text}\n      </BadgeContent>\n      {dismissible && (\n        <SvgContainer\n          name=\"cross\"\n          $state={state}\n          as={Icon}\n          onClick={onClose}\n          aria-label=\"close\"\n        />\n      )}\n    </Content>\n  </Wrapper>\n);\n"],"names":["Wrapper","styled","div","withConfig","componentId","$state","$size","$type","theme","click","badge","color","background","text","typography","label","default","radii","all","stroke","space","y","x","Content","gap","SvgContainer","svg","icon","size","height","width","BadgeContent","IconWrapper","Badge","iconDir","state","type","dismissible","onClose","ellipsisContent","props","jsx","Icon"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { Icon } from '@/components/Icon';\nimport { IconWrapper } from '@/components/IconWrapper';\nimport { cn, cva } from '@/lib/cva';\nimport { BadgeProps } from './Badge.types';\nimport styles from './Badge.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    typestate: {\n      'opaque-default': styles['wrapper_typestate_opaque-default'],\n      'opaque-success': styles['wrapper_typestate_opaque-success'],\n      'opaque-neutral': styles['wrapper_typestate_opaque-neutral'],\n      'opaque-danger': styles['wrapper_typestate_opaque-danger'],\n      'opaque-disabled': styles['wrapper_typestate_opaque-disabled'],\n      'opaque-warning': styles['wrapper_typestate_opaque-warning'],\n      'opaque-info': styles['wrapper_typestate_opaque-info'],\n      'solid-default': styles['wrapper_typestate_solid-default'],\n      'solid-success': styles['wrapper_typestate_solid-success'],\n      'solid-neutral': styles['wrapper_typestate_solid-neutral'],\n      'solid-danger': styles['wrapper_typestate_solid-danger'],\n      'solid-disabled': styles['wrapper_typestate_solid-disabled'],\n      'solid-warning': styles['wrapper_typestate_solid-warning'],\n      'solid-info': styles['wrapper_typestate_solid-info'],\n    },\n    size: {\n      sm: styles['wrapper_size_sm'],\n      md: styles['wrapper_size_md'],\n    },\n  },\n  defaultVariants: {\n    typestate: 'opaque-default',\n    size: 'md',\n  },\n});\n\n// The original `BadgeContent = styled(IconWrapper)` only forwarded `$state` —\n// `$type` and `$size` were NOT passed and defaulted to `'opaque'` and `'md'`\n// inside the styled rule. So the descendant <svg> color always came from the\n// opaque-text-* tokens (regardless of the badge's actual `type`) and the\n// SVG dimensions were always md (regardless of the badge's actual `size`).\n// To preserve byte-for-byte behavior, this variant set keys off `state` only.\nconst badgeContentVariants = cva(styles.badgecontent, {\n  variants: {\n    state: {\n      default: styles['badgecontent_state_default'],\n      success: styles['badgecontent_state_success'],\n      neutral: styles['badgecontent_state_neutral'],\n      danger: styles['badgecontent_state_danger'],\n      disabled: styles['badgecontent_state_disabled'],\n      warning: styles['badgecontent_state_warning'],\n      info: styles['badgecontent_state_info'],\n    },\n  },\n  defaultVariants: { state: 'default' },\n});\n\nconst closeIconVariants = cva(styles.closeicon, {\n  variants: {\n    state: {\n      default: styles['closeicon_state_default'],\n      success: styles['closeicon_state_success'],\n      neutral: styles['closeicon_state_neutral'],\n      danger: styles['closeicon_state_danger'],\n      disabled: styles['closeicon_state_disabled'],\n      warning: styles['closeicon_state_warning'],\n      info: styles['closeicon_state_info'],\n    },\n  },\n  defaultVariants: { state: 'default' },\n});\n\ntype BadgeTypeState =\n  | 'opaque-default'\n  | 'opaque-success'\n  | 'opaque-neutral'\n  | 'opaque-danger'\n  | 'opaque-disabled'\n  | 'opaque-warning'\n  | 'opaque-info'\n  | 'solid-default'\n  | 'solid-success'\n  | 'solid-neutral'\n  | 'solid-danger'\n  | 'solid-disabled'\n  | 'solid-warning'\n  | 'solid-info';\n\nexport const Badge = ({\n  icon,\n  iconDir,\n  text,\n  state = 'default',\n  size,\n  type,\n  dismissible,\n  onClose,\n  ellipsisContent = true,\n  className,\n  ...props\n}: BadgeProps) => {\n  const resolvedType = type ?? 'opaque';\n  const resolvedSize = size ?? 'md';\n  const typestate = `${resolvedType}-${state}` as BadgeTypeState;\n  return (\n    <div\n      {...props}\n      className={cn(wrapperVariants({ typestate, size: resolvedSize }), className)}\n    >\n      <div\n        data-testid={`${ellipsisContent ? 'ellipsed' : 'normal'}-badge-content`}\n        className={styles.content}\n      >\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n          size={size}\n          ellipsisContent={ellipsisContent}\n          className={cn(badgeContentVariants({ state }))}\n        >\n          {text}\n        </IconWrapper>\n        {dismissible && (\n          <Icon\n            name=\"cross\"\n            onClick={onClose}\n            aria-label=\"close\"\n            className={cn(closeIconVariants({ state }))}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","typestate","size","sm","md","defaultVariants","badgeContentVariants","badgecontent","state","default","success","neutral","danger","disabled","warning","info","closeIconVariants","closeicon","Badge","icon","iconDir","text","type","dismissible","onClose","ellipsisContent","className","props","resolvedType","resolvedSize","cn","content","jsx","IconWrapper","Icon"],"mappings":"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"}

package/dist/cjs/components/Button/Button.css

@@ -24,7 +24,7 @@
   justify-content: flex-start;
 }
 
-.button_fill__Ph-yl {
+.button_fill_width__npU6- {
   width: 100%;
 }
 
@@ -34,7 +34,7 @@
   color: var(--click-button-basic-color-primary-text-default);
 }
 
-.button_primary__5V6PJ:disabled {
+.button_primary__5V6PJ:disabled:not(.button_loading__n2tCt) {
   border-color: var(--click-button-basic-color-primary-stroke-disabled);
   background-color: var(--click-button-basic-color-primary-background-disabled);
   color: var(--click-button-basic-color-primary-text-disabled);
@@ -71,7 +71,7 @@
   color: var(--click-button-basic-color-secondary-text-default);
 }
 
-.button_secondary__PXw0N:disabled {
+.button_secondary__PXw0N:disabled:not(.button_loading__n2tCt) {
   border-color: var(--click-button-basic-color-secondary-stroke-disabled);
   background-color: var(--click-button-basic-color-secondary-background-disabled);
   color: var(--click-button-basic-color-secondary-text-disabled);
@@ -108,7 +108,7 @@
   color: var(--click-button-basic-color-empty-text-default);
 }
 
-.button_empty__GZ9s7:disabled {
+.button_empty__GZ9s7:disabled:not(.button_loading__n2tCt) {
   border-color: var(--click-button-basic-color-empty-stroke-disabled);
   background-color: var(--click-button-basic-color-empty-background-disabled);
   color: var(--click-button-basic-color-empty-text-disabled);
@@ -145,7 +145,7 @@
   color: var(--click-button-basic-color-danger-text-default);
 }
 
-.button_danger__0DN8k:disabled {
+.button_danger__0DN8k:disabled:not(.button_loading__n2tCt) {
   border-color: var(--click-button-basic-color-danger-stroke-disabled);
   background-color: var(--click-button-basic-color-danger-background-disabled);
   color: var(--click-button-basic-color-danger-text-disabled);
@@ -184,8 +184,16 @@
   content: '';
   position: absolute;
   inset: 0;
+  background-size: 200px 100%;
+  background-repeat: no-repeat;
   pointer-events: none;
-  animation: shimmer__8Jq1s 1.5s ease-in-out infinite;
+  animation: shimmer-fixed-width__lwKzt 1.5s ease-in-out infinite;
+}
+
+.button_fill_width__npU6-.button_loading__n2tCt::before {
+  background-size: 200% 100%;
+  background-repeat: repeat;
+  animation: shimmer-fill-width__jTIzk 1.5s ease-in-out infinite;
 }
 
 .button_primary__5V6PJ.button_loading__n2tCt,
@@ -202,7 +210,17 @@
   opacity: 0.7;
 }
 
-@keyframes shimmer__8Jq1s {
+@keyframes shimmer-fixed-width__lwKzt {
+  0% {
+    background-position: -200px 0;
+  }
+
+  100% {
+    background-position: 200px 0;
+  }
+}
+
+@keyframes shimmer-fill-width__jTIzk {
   0% {
     background-position: 100% 0;
   }
@@ -213,27 +231,19 @@
 }
 
 .button_primary__5V6PJ.button_loading__n2tCt::before {
-  background: var(--click-button-basic-color-primary-background-loading);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
+  background-image: var(--click-button-basic-color-primary-background-loading);
 }
 
 .button_secondary__PXw0N.button_loading__n2tCt::before {
-  background: var(--click-button-basic-color-secondary-background-loading);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
+  background-image: var(--click-button-basic-color-secondary-background-loading);
 }
 
 .button_empty__GZ9s7.button_loading__n2tCt::before {
-  background: var(--click-button-basic-color-empty-background-loading);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
+  background-image: var(--click-button-basic-color-empty-background-loading);
 }
 
 .button_danger__0DN8k.button_loading__n2tCt::before {
-  background: var(--click-button-basic-color-danger-background-loading);
-  background-size: 200% 100%;
-  background-repeat: no-repeat;
+  background-image: var(--click-button-basic-color-danger-background-loading);
 }
 
 .button__icon__e6c-f {
@@ -255,7 +265,8 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .button_loading__n2tCt::before {
+  .button_loading__n2tCt::before,
+  .button_fill_width__npU6-.button_loading__n2tCt::before {
     animation: none;
   }
 }