@clickhouse/click-ui 0.5.0 → 0.6.0-rc1

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

@@ -1,54 +1,71 @@
+import "./Badge.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
 import { IconWrapper } from '../IconWrapper/index.js';
+import { cn } from '../../lib/cva.js';
+import styles from './Badge.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
-const Wrapper = 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 = 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 = 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 = styled(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 = cva(styles.wrapper, {
+  variants: {
+    typestate: {
+      "opaque-default": styles["wrapper_typestate_opaque-default"],
+      "opaque-success": styles["wrapper_typestate_opaque-success"],
+      "opaque-neutral": styles["wrapper_typestate_opaque-neutral"],
+      "opaque-danger": styles["wrapper_typestate_opaque-danger"],
+      "opaque-disabled": styles["wrapper_typestate_opaque-disabled"],
+      "opaque-warning": styles["wrapper_typestate_opaque-warning"],
+      "opaque-info": styles["wrapper_typestate_opaque-info"],
+      "solid-default": styles["wrapper_typestate_solid-default"],
+      "solid-success": styles["wrapper_typestate_solid-success"],
+      "solid-neutral": styles["wrapper_typestate_solid-neutral"],
+      "solid-danger": styles["wrapper_typestate_solid-danger"],
+      "solid-disabled": styles["wrapper_typestate_solid-disabled"],
+      "solid-warning": styles["wrapper_typestate_solid-warning"],
+      "solid-info": styles["wrapper_typestate_solid-info"]
+    },
+    size: {
+      sm: styles["wrapper_size_sm"],
+      md: styles["wrapper_size_md"]
+    }
+  },
+  defaultVariants: {
+    typestate: "opaque-default",
+    size: "md"
+  }
+});
+const badgeContentVariants = cva(styles.badgecontent, {
+  variants: {
+    state: {
+      default: styles["badgecontent_state_default"],
+      success: styles["badgecontent_state_success"],
+      neutral: styles["badgecontent_state_neutral"],
+      danger: styles["badgecontent_state_danger"],
+      disabled: styles["badgecontent_state_disabled"],
+      warning: styles["badgecontent_state_warning"],
+      info: styles["badgecontent_state_info"]
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
+});
+const closeIconVariants = cva(styles.closeicon, {
+  variants: {
+    state: {
+      default: styles["closeicon_state_default"],
+      success: styles["closeicon_state_success"],
+      neutral: styles["closeicon_state_neutral"],
+      danger: styles["closeicon_state_danger"],
+      disabled: styles["closeicon_state_disabled"],
+      warning: styles["closeicon_state_warning"],
+      info: styles["closeicon_state_info"]
+    }
+  },
+  defaultVariants: {
+    state: "default"
+  }
+});
 const Badge = ({
   icon,
   iconDir,
@@ -59,11 +76,24 @@ const Badge = ({
   dismissible,
   onClose,
   ellipsisContent = true,
+  className,
   ...props
-}) => /* @__PURE__ */ jsx(Wrapper, { $state: state, $size: size, $type: type, ...props, children: /* @__PURE__ */ jsxs(Content, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, children: [
-  /* @__PURE__ */ jsx(BadgeContent, { icon, iconDir, size, $state: state, ellipsisContent, children: text }),
-  dismissible && /* @__PURE__ */ jsx(SvgContainer, { name: "cross", $state: state, as: SvgImage, onClick: onClose, "aria-label": "close" })
-] }) });
+}) => {
+  const resolvedType = type ?? "opaque";
+  const resolvedSize = size ?? "md";
+  const typestate = `${resolvedType}-${state}`;
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(wrapperVariants({
+    typestate,
+    size: resolvedSize
+  }), className), children: /* @__PURE__ */ jsxs("div", { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, className: styles.content, children: [
+    /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, size, ellipsisContent, className: cn(badgeContentVariants({
+      state
+    })), children: text }),
+    dismissible && /* @__PURE__ */ jsx(SvgImage, { name: "cross", onClick: onClose, "aria-label": "close", className: cn(closeIconVariants({
+      state
+    })) })
+  ] }) });
+};
 
 export { Badge };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","Icon"],"mappings":"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"}
+{"version":3,"file":"index.js","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","Icon"],"mappings":"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"}

package/dist/esm/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;
   }
 }

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

@@ -1,25 +1,25 @@
 const button = "button__2ZuB7";
-const button_fill = "button_fill__Ph-yl";
+const button_fill_width = "button_fill_width__npU6-";
 const button_primary = "button_primary__5V6PJ";
+const button_loading = "button_loading__n2tCt";
 const button_secondary = "button_secondary__PXw0N";
 const button_empty = "button_empty__GZ9s7";
 const button_danger = "button_danger__0DN8k";
-const button_loading = "button_loading__n2tCt";
 const button__icon = "button__icon__e6c-f";
 const button__label = "button__label__tlatE";
 const styles = {
 	button: button,
 	"button_align-center": "button_align-center__RdEYc",
 	"button_align-left": "button_align-left__AmFEH",
-	button_fill: button_fill,
+	button_fill_width: button_fill_width,
 	button_primary: button_primary,
+	button_loading: button_loading,
 	button_secondary: button_secondary,
 	button_empty: button_empty,
 	button_danger: button_danger,
-	button_loading: button_loading,
 	button__icon: button__icon,
 	button__label: button__label
 };
 
-export { button, button__icon, button__label, button_danger, button_empty, button_fill, button_loading, button_primary, button_secondary, styles as default };
+export { button, button__icon, button__label, button_danger, button_empty, button_fill_width, button_loading, button_primary, button_secondary, styles as default };
 //# sourceMappingURL=Button.module.css.js.map

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

@@ -19,7 +19,7 @@ const buttonVariants = cva(styles.button, {
       left: styles["button_align-left"]
     },
     fillWidth: {
-      true: styles["button_fill"]
+      true: styles["button_fill_width"]
     },
     loading: {
       true: styles["button_loading"]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon, IconName } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { forwardRef } from 'react';\nimport styles from './Button.module.css';\n\nexport type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';\ntype Alignment = 'center' | 'left';\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n  // TODO: The type prop ('primary' | 'secondary' | 'empty' | 'danger') shadows the native <button type=\"submit|reset|button\"> attribute. Since type is destructured before ...delegated, consumers can never pass type=\"submit\" for form submission. Consider renaming the visual variant prop to variant (consistent with the CSS class names button_primary etc.). This is a public API problem!\n  /** The visual style variant of the button */\n  type?: ButtonType;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** The text label to display in the button */\n  label?: string;\n  /** Icon to display on the left side of the label */\n  iconLeft?: IconName;\n  /** Icon to display on the right side of the label */\n  iconRight?: IconName;\n  /** Alignment of the button content */\n  align?: Alignment;\n  /** Whether the button should fill the full width of its container */\n  fillWidth?: boolean;\n  /** Whether to show a loading state */\n  loading?: boolean;\n  /** Whether the button should be focused on mount */\n  autoFocus?: boolean;\n}\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    type: {\n      primary: styles['button_primary'],\n      secondary: styles['button_secondary'],\n      empty: styles['button_empty'],\n      danger: styles['button_danger'],\n    },\n    align: {\n      center: styles['button_align-center'],\n      left: styles['button_align-left'],\n    },\n    fillWidth: {\n      true: styles['button_fill'],\n    },\n    loading: {\n      true: styles['button_loading'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    align: 'center',\n  },\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      iconLeft,\n      iconRight,\n      align = 'center',\n      children,\n      fillWidth,\n      label,\n      loading = false,\n      disabled,\n      className,\n      ...delegated\n    },\n    ref\n  ) => (\n    <button\n      ref={ref}\n      className={cn(buttonVariants({ type, align, fillWidth, loading }), className)}\n      disabled={disabled || loading}\n      aria-disabled={disabled || loading || undefined}\n      aria-busy={loading || undefined}\n      {...delegated}\n    >\n      {iconLeft && (\n        <span className={styles.button__icon}>\n          <Icon\n            name={iconLeft}\n            aria-hidden\n            size=\"sm\"\n          />\n        </span>\n      )}\n\n      <span className={styles.button__label}>{label ?? children}</span>\n\n      {iconRight && (\n        <span className={styles.button__icon}>\n          <Icon\n            name={iconRight}\n            aria-hidden\n            size=\"sm\"\n          />\n        </span>\n      )}\n    </button>\n  )\n);\n\nButton.displayName = 'Button';\n"],"names":["buttonVariants","cva","styles","button","variants","type","primary","secondary","empty","danger","align","center","left","fillWidth","true","loading","defaultVariants","Button","forwardRef","iconLeft","iconRight","children","label","disabled","className","delegated","ref","cn","undefined","button__icon","Icon","button__label","displayName"],"mappings":";;;;;;;AA8BA,MAAMA,cAAAA,GAAiBC,GAAAA,CAAIC,MAAAA,CAAOC,MAAAA,EAAQ;AAAA,EACxCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,gBAAgB,CAAA;AAAA,MAChCK,SAAAA,EAAWL,OAAO,kBAAkB,CAAA;AAAA,MACpCM,KAAAA,EAAON,OAAO,cAAc,CAAA;AAAA,MAC5BO,MAAAA,EAAQP,OAAO,eAAe;AAAA,KAChC;AAAA,IACAQ,KAAAA,EAAO;AAAA,MACLC,MAAAA,EAAQT,OAAO,qBAAqB,CAAA;AAAA,MACpCU,IAAAA,EAAMV,OAAO,mBAAmB;AAAA,KAClC;AAAA,IACAW,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMZ,OAAO,aAAa;AAAA,KAC5B;AAAA,IACAa,OAAAA,EAAS;AAAA,MACPD,IAAAA,EAAMZ,OAAO,gBAAgB;AAAA;AAC/B,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,SAAA;AAAA,IACNK,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAMO,MAAAA,GAASC,WACpB,CACE;AAAA,EACEb,IAAAA,GAAO,SAAA;AAAA,EACPc,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAV,KAAAA,GAAQ,QAAA;AAAA,EACRW,QAAAA;AAAAA,EACAR,SAAAA;AAAAA,EACAS,KAAAA;AAAAA,EACAP,OAAAA,GAAU,KAAA;AAAA,EACVQ,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,wBAEA,IAAA,CAAC,QAAA,EAAA,EACC,GAAA,EACA,SAAA,EAAWC,GAAG3B,cAAAA,CAAe;AAAA,EAAEK,IAAAA;AAAAA,EAAMK,KAAAA;AAAAA,EAAOG,SAAAA;AAAAA,EAAWE;AAAQ,CAAC,CAAA,EAAGS,SAAS,CAAA,EAC5E,QAAA,EAAUD,YAAYR,OAAAA,EACtB,eAAA,EAAeQ,QAAAA,IAAYR,OAAAA,IAAWa,MAAAA,EACtC,WAAA,EAAWb,OAAAA,IAAWa,MAAAA,EACtB,GAAIH,SAAAA,EAEHN,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWjB,MAAAA,CAAO2B,YAAAA,EACtB,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EACC,IAAA,EAAMX,QAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAAA,sBAGD,MAAA,EAAA,EAAK,SAAA,EAAWjB,MAAAA,CAAO6B,aAAAA,EAAgBT,mBAASD,QAAAA,EAAS,CAAA;AAAA,EAEzDD,SAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWlB,OAAO2B,YAAAA,EACtB,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EACC,IAAA,EAAMV,SAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb;AAAA,CAAA,EAEJ,CAEJ;AAEAH,MAAAA,CAAOe,WAAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon, IconName } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { forwardRef } from 'react';\nimport styles from './Button.module.css';\n\nexport type ButtonType = 'primary' | 'secondary' | 'empty' | 'danger';\ntype Alignment = 'center' | 'left';\n\nexport interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n  // TODO: The type prop ('primary' | 'secondary' | 'empty' | 'danger') shadows the native <button type=\"submit|reset|button\"> attribute. Since type is destructured before ...delegated, consumers can never pass type=\"submit\" for form submission. Consider renaming the visual variant prop to variant (consistent with the CSS class names button_primary etc.). This is a public API problem!\n  /** The visual style variant of the button */\n  type?: ButtonType;\n  /** Whether the button is disabled */\n  disabled?: boolean;\n  /** The text label to display in the button */\n  label?: string;\n  /** Icon to display on the left side of the label */\n  iconLeft?: IconName;\n  /** Icon to display on the right side of the label */\n  iconRight?: IconName;\n  /** Alignment of the button content */\n  align?: Alignment;\n  /** Whether the button should fill the full width of its container */\n  fillWidth?: boolean;\n  /** Whether to show a loading state */\n  loading?: boolean;\n  /** Whether the button should be focused on mount */\n  autoFocus?: boolean;\n}\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    type: {\n      primary: styles['button_primary'],\n      secondary: styles['button_secondary'],\n      empty: styles['button_empty'],\n      danger: styles['button_danger'],\n    },\n    align: {\n      center: styles['button_align-center'],\n      left: styles['button_align-left'],\n    },\n    fillWidth: {\n      true: styles['button_fill_width'],\n    },\n    loading: {\n      true: styles['button_loading'],\n    },\n  },\n  defaultVariants: {\n    type: 'primary',\n    align: 'center',\n  },\n});\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      type = 'primary',\n      iconLeft,\n      iconRight,\n      align = 'center',\n      children,\n      fillWidth,\n      label,\n      loading = false,\n      disabled,\n      className,\n      ...delegated\n    },\n    ref\n  ) => (\n    <button\n      ref={ref}\n      className={cn(buttonVariants({ type, align, fillWidth, loading }), className)}\n      disabled={disabled || loading}\n      aria-disabled={disabled || loading || undefined}\n      aria-busy={loading || undefined}\n      {...delegated}\n    >\n      {iconLeft && (\n        <span className={styles.button__icon}>\n          <Icon\n            name={iconLeft}\n            aria-hidden\n            size=\"sm\"\n          />\n        </span>\n      )}\n\n      <span className={styles.button__label}>{label ?? children}</span>\n\n      {iconRight && (\n        <span className={styles.button__icon}>\n          <Icon\n            name={iconRight}\n            aria-hidden\n            size=\"sm\"\n          />\n        </span>\n      )}\n    </button>\n  )\n);\n\nButton.displayName = 'Button';\n"],"names":["buttonVariants","cva","styles","button","variants","type","primary","secondary","empty","danger","align","center","left","fillWidth","true","loading","defaultVariants","Button","forwardRef","iconLeft","iconRight","children","label","disabled","className","delegated","ref","cn","undefined","button__icon","Icon","button__label","displayName"],"mappings":";;;;;;;AA8BA,MAAMA,cAAAA,GAAiBC,GAAAA,CAAIC,MAAAA,CAAOC,MAAAA,EAAQ;AAAA,EACxCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,gBAAgB,CAAA;AAAA,MAChCK,SAAAA,EAAWL,OAAO,kBAAkB,CAAA;AAAA,MACpCM,KAAAA,EAAON,OAAO,cAAc,CAAA;AAAA,MAC5BO,MAAAA,EAAQP,OAAO,eAAe;AAAA,KAChC;AAAA,IACAQ,KAAAA,EAAO;AAAA,MACLC,MAAAA,EAAQT,OAAO,qBAAqB,CAAA;AAAA,MACpCU,IAAAA,EAAMV,OAAO,mBAAmB;AAAA,KAClC;AAAA,IACAW,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMZ,OAAO,mBAAmB;AAAA,KAClC;AAAA,IACAa,OAAAA,EAAS;AAAA,MACPD,IAAAA,EAAMZ,OAAO,gBAAgB;AAAA;AAC/B,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,SAAA;AAAA,IACNK,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAEM,MAAMO,MAAAA,GAASC,WACpB,CACE;AAAA,EACEb,IAAAA,GAAO,SAAA;AAAA,EACPc,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAV,KAAAA,GAAQ,QAAA;AAAA,EACRW,QAAAA;AAAAA,EACAR,SAAAA;AAAAA,EACAS,KAAAA;AAAAA,EACAP,OAAAA,GAAU,KAAA;AAAA,EACVQ,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACL,CAAA,EACAC,wBAEA,IAAA,CAAC,QAAA,EAAA,EACC,GAAA,EACA,SAAA,EAAWC,GAAG3B,cAAAA,CAAe;AAAA,EAAEK,IAAAA;AAAAA,EAAMK,KAAAA;AAAAA,EAAOG,SAAAA;AAAAA,EAAWE;AAAQ,CAAC,CAAA,EAAGS,SAAS,CAAA,EAC5E,QAAA,EAAUD,YAAYR,OAAAA,EACtB,eAAA,EAAeQ,QAAAA,IAAYR,OAAAA,IAAWa,MAAAA,EACtC,WAAA,EAAWb,OAAAA,IAAWa,MAAAA,EACtB,GAAIH,SAAAA,EAEHN,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWjB,MAAAA,CAAO2B,YAAAA,EACtB,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EACC,IAAA,EAAMX,QAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAAA,sBAGD,MAAA,EAAA,EAAK,SAAA,EAAWjB,MAAAA,CAAO6B,aAAAA,EAAgBT,mBAASD,QAAAA,EAAS,CAAA;AAAA,EAEzDD,SAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWlB,OAAO2B,YAAAA,EACtB,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EACC,IAAA,EAAMV,SAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb;AAAA,CAAA,EAEJ,CAEJ;AAEAH,MAAAA,CAAOe,WAAAA,GAAc,QAAA;;;;"}

package/dist/esm/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,85 @@
+.buttongroup__9IkOe {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--click-button-group-radii-panel-all);
+  background: var(--click-button-group-color-background-panel);
+}
+
+.buttongroup_type_default__D1bYD {
+  padding: var(--click-button-group-space-panel-default-x)
+    var(--click-button-group-space-panel-default-y);
+  gap: var(--click-button-group-space-panel-default-gap);
+  border: 1px solid var(--click-button-group-color-panel-stroke-default);
+}
+
+.buttongroup_type_borderless__cAhx7 {
+  padding: var(--click-button-group-space-panel-borderless-x)
+    var(--click-button-group-space-panel-borderless-y);
+  gap: var(--click-button-group-space-panel-borderless-gap);
+  border: none;
+}
+
+.buttongroup_fillwidth__WzJlu {
+  width: 100%;
+}
+
+.button__w1Is2 {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  background: var(--click-button-group-color-background-default);
+  color: var(--click-button-group-color-text-default);
+  font: var(--click-button-group-typography-label-default);
+  cursor: pointer;
+}
+
+.button_type_default__G9UA1 {
+  padding: var(--click-button-group-space-button-default-y)
+    var(--click-button-group-space-button-default-x);
+  border-radius: var(--click-button-group-radii-button-default-all);
+}
+
+.button_type_borderless__PydeS {
+  padding: var(--click-button-group-space-button-borderless-y)
+    var(--click-button-group-space-button-borderless-x);
+  border-radius: var(--click-button-group-radii-button-borderless-all);
+}
+
+.button_fillwidth__lqIVG {
+  flex: 1;
+}
+
+.button__w1Is2[aria-pressed='true'] {
+  background: var(--click-button-group-color-background-active);
+  color: var(--click-button-group-color-text-active);
+  font: var(--click-button-group-typography-label-active);
+}
+
+.button__w1Is2:hover {
+  background: var(--click-button-group-color-background-hover);
+  color: var(--click-button-group-color-text-hover);
+  font: var(--click-button-group-typography-label-hover);
+}
+
+.button__w1Is2:disabled {
+  background: var(--click-button-group-color-background-disabled);
+  color: var(--click-button-group-color-text-disabled);
+  font: var(--click-button-group-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button__w1Is2:disabled:active,
+.button__w1Is2:disabled:focus,
+.button__w1Is2:disabled[aria-pressed='true'] {
+  color: var(--click-button-group-color-text-disabled);
+}
+
+.button__w1Is2[aria-pressed='true']:disabled {
+  background: var(--click-button-group-color-background-disabled-active);
+}

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

@@ -0,0 +1,21 @@
+const buttongroup = "buttongroup__9IkOe";
+const buttongroup_type_default = "buttongroup_type_default__D1bYD";
+const buttongroup_type_borderless = "buttongroup_type_borderless__cAhx7";
+const buttongroup_fillwidth = "buttongroup_fillwidth__WzJlu";
+const button = "button__w1Is2";
+const button_type_default = "button_type_default__G9UA1";
+const button_type_borderless = "button_type_borderless__PydeS";
+const button_fillwidth = "button_fillwidth__lqIVG";
+const styles = {
+	buttongroup: buttongroup,
+	buttongroup_type_default: buttongroup_type_default,
+	buttongroup_type_borderless: buttongroup_type_borderless,
+	buttongroup_fillwidth: buttongroup_fillwidth,
+	button: button,
+	button_type_default: button_type_default,
+	button_type_borderless: button_type_borderless,
+	button_fillwidth: button_fillwidth
+};
+
+export { button, button_fillwidth, button_type_borderless, button_type_default, buttongroup, buttongroup_fillwidth, buttongroup_type_borderless, buttongroup_type_default, styles as default };
+//# sourceMappingURL=ButtonGroup.module.css.js.map

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

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