@clickhouse/click-ui 0.2.0-rc.6 → 0.2.0-rc.8

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

@@ -0,0 +1,261 @@
+.button__2ZuB7 {
+  display: flex;
+  position: relative;
+  padding: var(--click-button-basic-space-y) var(--click-button-basic-space-x);
+  overflow: hidden;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  gap: var(--click-button-basic-space-gap);
+  border: 1px solid transparent;
+  border-radius: var(--click-button-radii-all);
+  background: transparent;
+  color: inherit;
+  font: var(--click-button-basic-typography-label-default);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.button_align-center__RdEYc {
+  justify-content: center;
+}
+
+.button_align-left__AmFEH {
+  justify-content: flex-start;
+}
+
+.button_fill__Ph-yl {
+  width: 100%;
+}
+
+.button_primary__5V6PJ {
+  border-color: var(--click-button-basic-color-primary-stroke-default);
+  background-color: var(--click-button-basic-color-primary-background-default);
+  color: var(--click-button-basic-color-primary-text-default);
+}
+
+.button_primary__5V6PJ:disabled {
+  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);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button_primary__5V6PJ:hover:not(:disabled) {
+  border-color: var(--click-button-basic-color-primary-stroke-hover);
+  background-color: var(--click-button-basic-color-primary-background-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button_primary__5V6PJ:focus-visible:not(:disabled) {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  background-color: var(--click-button-basic-color-primary-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-primary-stroke-active);
+  outline-offset: 2px;
+}
+
+.button_primary__5V6PJ:active:not(:disabled),
+.button_primary__5V6PJ:focus:not(:focus-visible, :disabled) {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  background-color: var(--click-button-basic-color-primary-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button_secondary__PXw0N {
+  border-color: var(--click-button-basic-color-secondary-stroke-default);
+  background-color: var(--click-button-basic-color-secondary-background-default);
+  color: var(--click-button-basic-color-secondary-text-default);
+}
+
+.button_secondary__PXw0N:disabled {
+  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);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button_secondary__PXw0N:hover:not(:disabled) {
+  border-color: var(--click-button-basic-color-secondary-stroke-hover);
+  background-color: var(--click-button-basic-color-secondary-background-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button_secondary__PXw0N:focus-visible:not(:disabled) {
+  border-color: var(--click-button-basic-color-secondary-stroke-active);
+  background-color: var(--click-button-basic-color-secondary-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-secondary-stroke-active);
+  outline-offset: 2px;
+}
+
+.button_secondary__PXw0N:active:not(:disabled),
+.button_secondary__PXw0N:focus:not(:focus-visible, :disabled) {
+  border-color: var(--click-button-basic-color-secondary-stroke-active);
+  background-color: var(--click-button-basic-color-secondary-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button_empty__GZ9s7 {
+  border-color: var(--click-button-basic-color-empty-stroke-default);
+  background-color: var(--click-button-basic-color-empty-background-default);
+  color: var(--click-button-basic-color-empty-text-default);
+}
+
+.button_empty__GZ9s7:disabled {
+  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);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button_empty__GZ9s7:hover:not(:disabled) {
+  border-color: var(--click-button-basic-color-empty-stroke-hover);
+  background-color: var(--click-button-basic-color-empty-background-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button_empty__GZ9s7:focus-visible:not(:disabled) {
+  border-color: var(--click-button-basic-color-empty-stroke-active);
+  background-color: var(--click-button-basic-color-empty-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-empty-stroke-active);
+  outline-offset: 2px;
+}
+
+.button_empty__GZ9s7:active:not(:disabled),
+.button_empty__GZ9s7:focus:not(:focus-visible, :disabled) {
+  border-color: var(--click-button-basic-color-empty-stroke-active);
+  background-color: var(--click-button-basic-color-empty-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button_danger__0DN8k {
+  border-color: var(--click-button-basic-color-danger-stroke-default);
+  background-color: var(--click-button-basic-color-danger-background-default);
+  color: var(--click-button-basic-color-danger-text-default);
+}
+
+.button_danger__0DN8k:disabled {
+  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);
+  font: var(--click-button-basic-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button_danger__0DN8k:hover:not(:disabled) {
+  border-color: var(--click-button-basic-color-danger-stroke-hover);
+  background-color: var(--click-button-basic-color-danger-background-hover);
+  font: var(--click-button-basic-typography-label-hover);
+  transition: var(--click-transition-default);
+}
+
+.button_danger__0DN8k:focus-visible:not(:disabled) {
+  border-color: var(--click-button-basic-color-danger-stroke-active);
+  background-color: var(--click-button-basic-color-danger-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: 2px solid var(--click-button-basic-color-danger-stroke-active);
+  outline-offset: 2px;
+}
+
+.button_danger__0DN8k:active:not(:disabled),
+.button_danger__0DN8k:focus:not(:focus-visible, :disabled) {
+  border-color: var(--click-button-basic-color-danger-stroke-active);
+  background-color: var(--click-button-basic-color-danger-background-active);
+  font: var(--click-button-basic-typography-label-active);
+  outline: none;
+}
+
+.button_loading__n2tCt {
+  cursor: not-allowed;
+}
+
+.button_loading__n2tCt::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  animation: shimmer__8Jq1s 1.5s ease-in-out infinite;
+}
+
+.button_primary__5V6PJ.button_loading__n2tCt,
+.button_secondary__PXw0N.button_loading__n2tCt,
+.button_danger__0DN8k.button_loading__n2tCt {
+  opacity: 0.7;
+}
+
+.button_empty__GZ9s7.button_loading__n2tCt {
+  opacity: 0.9;
+}
+
+.button_loading__n2tCt > * {
+  opacity: 0.7;
+}
+
+@keyframes shimmer__8Jq1s {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.button_primary__5V6PJ.button_loading__n2tCt::before {
+  background: var(--click-button-basic-color-primary-background-loading);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+}
+
+.button_secondary__PXw0N.button_loading__n2tCt::before {
+  background: var(--click-button-basic-color-secondary-background-loading);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+}
+
+.button_empty__GZ9s7.button_loading__n2tCt::before {
+  background: var(--click-button-basic-color-empty-background-loading);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+}
+
+.button_danger__0DN8k.button_loading__n2tCt::before {
+  background: var(--click-button-basic-color-danger-background-loading);
+  background-size: 200% 100%;
+  background-repeat: no-repeat;
+}
+
+.button__icon__e6c-f {
+  display: flex;
+  width: var(--click-button-basic-size-icon-all);
+  height: var(--click-button-basic-size-icon-all);
+  justify-content: center;
+  align-items: center;
+}
+
+.button__icon__e6c-f svg {
+  width: var(--click-button-basic-size-icon-all);
+  height: var(--click-button-basic-size-icon-all);
+}
+
+.button__label__tlatE {
+  display: inline-flex;
+  align-items: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button_loading__n2tCt::before {
+    animation: none;
+  }
+}

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const button = "button__2ZuB7";
+const button_fill = "button_fill__Ph-yl";
+const button_primary = "button_primary__5V6PJ";
+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_primary: button_primary,
+	button_secondary: button_secondary,
+	button_empty: button_empty,
+	button_danger: button_danger,
+	button_loading: button_loading,
+	button__icon: button__icon,
+	button__label: button__label
+};
+
+exports.button = button;
+exports.button__icon = button__icon;
+exports.button__label = button__label;
+exports.button_danger = button_danger;
+exports.button_empty = button_empty;
+exports.button_fill = button_fill;
+exports.button_loading = button_loading;
+exports.button_primary = button_primary;
+exports.button_secondary = button_secondary;
+exports.default = styles;
+//# sourceMappingURL=Button.module.css.cjs.map

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

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

package/dist/cjs/components/Button/index.cjs

@@ -1,13 +1,40 @@
+require("./Button.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
-const BaseButton = require('./BaseButton.cjs');
+const cva = require('../../lib/cva.cjs');
+const react = require('react');
+const Button_module = require('./Button.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const Button = ({
+const buttonVariants = classVarianceAuthority.cva(Button_module.default.button, {
+  variants: {
+    type: {
+      primary: Button_module.default["button_primary"],
+      secondary: Button_module.default["button_secondary"],
+      empty: Button_module.default["button_empty"],
+      danger: Button_module.default["button_danger"]
+    },
+    align: {
+      center: Button_module.default["button_align-center"],
+      left: Button_module.default["button_align-left"]
+    },
+    fillWidth: {
+      true: Button_module.default["button_fill"]
+    },
+    loading: {
+      true: Button_module.default["button_loading"]
+    }
+  },
+  defaultVariants: {
+    type: "primary",
+    align: "center"
+  }
+});
+const Button = react.forwardRef(({
   type = "primary",
   iconLeft,
   iconRight,
@@ -17,130 +44,19 @@ const Button = ({
   label,
   loading = false,
   disabled,
+  className,
   ...delegated
-}) => /* @__PURE__ */ jsxRuntime.jsxs(StyledButton, { $styleType: type, $align: align, $fillWidth: fillWidth, $loading: loading, disabled: disabled || loading, "aria-disabled": disabled || loading, role: "button", "data-fill-width": fillWidth, ...delegated, children: [
-  iconLeft && /* @__PURE__ */ jsxRuntime.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
-  /* @__PURE__ */ jsxRuntime.jsx("span", { children: label ?? children }),
-  iconRight && /* @__PURE__ */ jsxRuntime.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" })
-] });
-const shimmerFullWidth = styledComponents.keyframes({
-  "0%": {
-    backgroundPosition: "100% 0"
-  },
-  "100%": {
-    backgroundPosition: "-100% 0"
-  }
-});
-const shimmerFixedWidth = styledComponents.keyframes({
-  "0%": {
-    backgroundPosition: "-200px 0"
-  },
-  "100%": {
-    backgroundPosition: "200px 0"
-  }
-});
-const StyledButton = styledComponents.styled(BaseButton.BaseButton).withConfig({
-  componentId: "sc-1k4tz4c-0"
-})(["width:", ";color:", ";background-color:", ";border:", " solid ", ";font:", ";position:relative;display:flex;align-items:center;justify-content:", ";white-space:nowrap;overflow:hidden;flex-shrink:0;&::before{content:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background:", ";background-size:", ";background-repeat:", ";}&[data-fill-width='true']::before{animation:", " 1.5s ease-in-out infinite;}&[data-fill-width='false']::before,&:not([data-fill-width])::before{animation:", " 1.5s ease-in-out infinite;}&:hover{background-color:", ";border:", " solid ", ";transition:", ";font:", ";}&:active,&:focus{background-color:", ";border:1px solid ", ";font:", ";}", " ", ""], ({
-  $fillWidth
-}) => $fillWidth ? "100%" : "revert", ({
-  $styleType = "primary",
-  theme
-}) => theme.click.button.basic.color[$styleType].text.default, ({
-  $styleType = "primary",
-  theme
-}) => theme.click.button.basic.color[$styleType].background.default, ({
-  theme
-}) => theme.click.button.stroke, ({
-  $styleType = "primary",
-  theme
-}) => theme.click.button.basic.color[$styleType].stroke.default, ({
-  theme
-}) => theme.click.button.basic.typography.label.default, ({
-  $align
-}) => $align === "left" ? "flex-start" : "center", ({
-  $loading
-}) => $loading ? '""' : "none", ({
-  $styleType,
-  theme
-}) => theme.click.button.basic.color[$styleType].background.loading, ({
-  $fillWidth
-}) => $fillWidth ? "200% 100%" : "200px 100%", ({
-  $fillWidth
-}) => $fillWidth ? "repeat" : "no-repeat", shimmerFullWidth, shimmerFixedWidth, ({
-  $styleType = "primary",
-  theme
-}) => theme.click.button.basic.color[$styleType].background.hover, ({
-  theme
-}) => theme.click.button.stroke, ({
-  $styleType = "primary",
-  theme
-}) => theme.click.button.basic.color[$styleType].stroke.hover, ({
-  theme
-}) => theme.transition.default, ({
-  theme
-}) => theme.click.button.basic.typography.label.hover, ({
-  $styleType = "primary",
-  theme
-}) => theme.click.button.basic.color[$styleType].background.active, ({
-  $styleType = "primary",
-  theme
-}) => theme.click.button.basic.color[$styleType].stroke.active, ({
-  theme
-}) => theme.click.button.basic.typography.label.active, ({
-  $loading,
-  $styleType,
-  theme
-}) => {
-  if ($loading) {
-    return "";
-  }
-  const bgDisabled = theme.click.button.basic.color[$styleType].background.disabled;
-  const textDisabled = theme.click.button.basic.color[$styleType].text.disabled;
-  const strokeDisabled = theme.click.button.basic.color[$styleType].stroke.disabled;
-  const stroke = theme.click.button.stroke;
-  const fontDisabled = theme.click.button.basic.typography.label.disabled;
-  return `
-      &:disabled,
-      &:disabled:hover,
-      &:disabled:active {
-        background-color: ${bgDisabled};
-        color: ${textDisabled};
-        border: ${stroke} solid ${strokeDisabled};
-        font: ${fontDisabled};
-        cursor: not-allowed;
-      }
-    `;
-}, ({
-  $loading,
-  $styleType
-}) => {
-  if (!$loading) {
-    return "";
-  }
-  const btnOpacity = $styleType === "empty" ? 0.9 : 0.7;
-  return `
-      cursor: not-allowed;
-      opacity: ${btnOpacity};
-
-      /* Dim text and icons */
-      > * {
-        opacity: 0.7;
-      }
-    `;
-});
-const ButtonIconWrapper = (props) => /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...props });
-const ButtonIcon = styledComponents.styled(ButtonIconWrapper).withConfig({
-  componentId: "sc-1k4tz4c-1"
-})(["height:", ";width:", ";svg{height:", ";width:", ";}"], ({
-  theme
-}) => theme.click.button.basic.size.icon.all, ({
-  theme
-}) => theme.click.button.basic.size.icon.all, ({
-  theme
-}) => theme.click.button.basic.size.icon.all, ({
-  theme
-}) => theme.click.button.basic.size.icon.all);
+}, ref) => /* @__PURE__ */ jsxRuntime.jsxs("button", { ref, className: cva.cn(buttonVariants({
+  type,
+  align,
+  fillWidth,
+  loading
+}), className), disabled: disabled || loading, "aria-disabled": disabled || loading || void 0, "aria-busy": loading || void 0, ...delegated, children: [
+  iconLeft && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: iconLeft, "aria-hidden": true, size: "sm" }) }),
+  /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__label, children: label ?? children }),
+  iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_module.default.button__icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: iconRight, "aria-hidden": true, size: "sm" }) })
+] }));
+Button.displayName = "Button";
 
 exports.Button = Button;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Icon } from '@/components/Icon';\nimport { styled, keyframes } from 'styled-components';\nimport { BaseButton } from './BaseButton';\nimport { Alignment, ButtonProps, ButtonType } from './Button.types';\n\nexport const Button = ({\n  type = 'primary',\n  iconLeft,\n  iconRight,\n  align = 'center',\n  children,\n  fillWidth,\n  label,\n  loading = false,\n  disabled,\n  ...delegated\n}: ButtonProps) => (\n  <StyledButton\n    $styleType={type}\n    $align={align}\n    $fillWidth={fillWidth}\n    $loading={loading}\n    disabled={disabled || loading}\n    aria-disabled={disabled || loading}\n    role=\"button\"\n    data-fill-width={fillWidth}\n    {...delegated}\n  >\n    {iconLeft && (\n      <ButtonIcon\n        name={iconLeft}\n        aria-hidden\n        size=\"sm\"\n      />\n    )}\n\n    <span>{label ?? children}</span>\n\n    {iconRight && (\n      <ButtonIcon\n        name={iconRight}\n        aria-hidden\n        size=\"sm\"\n      />\n    )}\n  </StyledButton>\n);\n\nconst shimmerFullWidth = keyframes({\n  '0%': {\n    backgroundPosition: '100% 0',\n  },\n  '100%': {\n    backgroundPosition: '-100% 0',\n  },\n});\n\nconst shimmerFixedWidth = keyframes({\n  '0%': {\n    backgroundPosition: '-200px 0',\n  },\n  '100%': {\n    backgroundPosition: '200px 0',\n  },\n});\n\nconst StyledButton = styled(BaseButton)<{\n  $styleType: ButtonType;\n  $align?: Alignment;\n  $fillWidth?: boolean;\n  $loading?: boolean;\n}>`\n  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'revert')};\n  color: ${({ $styleType = 'primary', theme }) =>\n    theme.click.button.basic.color[$styleType].text.default};\n  background-color: ${({ $styleType = 'primary', theme }) =>\n    theme.click.button.basic.color[$styleType].background.default};\n  border: ${({ theme }) => theme.click.button.stroke} solid\n    ${({ $styleType = 'primary', theme }) =>\n      theme.click.button.basic.color[$styleType].stroke.default};\n  font: ${({ theme }) => theme.click.button.basic.typography.label.default};\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: ${({ $align }) => ($align === 'left' ? 'flex-start' : 'center')};\n  white-space: nowrap;\n  overflow: hidden;\n  flex-shrink: 0;\n\n  &::before {\n    content: ${({ $loading }) => ($loading ? '\"\"' : 'none')};\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    pointer-events: none;\n    background: ${({ $styleType, theme }) =>\n      theme.click.button.basic.color[$styleType].background.loading};\n    background-size: ${({ $fillWidth }) => ($fillWidth ? '200% 100%' : '200px 100%')};\n    background-repeat: ${({ $fillWidth }) => ($fillWidth ? 'repeat' : 'no-repeat')};\n  }\n\n  &[data-fill-width='true']::before {\n    animation: ${shimmerFullWidth} 1.5s ease-in-out infinite;\n  }\n\n  &[data-fill-width='false']::before,\n  &:not([data-fill-width])::before {\n    animation: ${shimmerFixedWidth} 1.5s ease-in-out infinite;\n  }\n\n  &:hover {\n    background-color: ${({ $styleType = 'primary', theme }) =>\n      theme.click.button.basic.color[$styleType].background.hover};\n    border: ${({ theme }) => theme.click.button.stroke} solid\n      ${({ $styleType = 'primary', theme }) =>\n        theme.click.button.basic.color[$styleType].stroke.hover};\n    transition: ${({ theme }) => theme.transition.default};\n    font: ${({ theme }) => theme.click.button.basic.typography.label.hover};\n  }\n\n  &:active,\n  &:focus {\n    background-color: ${({ $styleType = 'primary', theme }) =>\n      theme.click.button.basic.color[$styleType].background.active};\n    border: 1px solid\n      ${({ $styleType = 'primary', theme }) =>\n        theme.click.button.basic.color[$styleType].stroke.active};\n    font: ${({ theme }) => theme.click.button.basic.typography.label.active};\n  }\n\n  ${({ $loading, $styleType, theme }) => {\n    if ($loading) {\n      return '';\n    }\n\n    const bgDisabled = theme.click.button.basic.color[$styleType].background.disabled;\n    const textDisabled = theme.click.button.basic.color[$styleType].text.disabled;\n    const strokeDisabled = theme.click.button.basic.color[$styleType].stroke.disabled;\n    const stroke = theme.click.button.stroke;\n    const fontDisabled = theme.click.button.basic.typography.label.disabled;\n\n    return `\n      &:disabled,\n      &:disabled:hover,\n      &:disabled:active {\n        background-color: ${bgDisabled};\n        color: ${textDisabled};\n        border: ${stroke} solid ${strokeDisabled};\n        font: ${fontDisabled};\n        cursor: not-allowed;\n      }\n    `;\n  }}\n\n  /* Loading state styling */\n  ${({ $loading, $styleType }) => {\n    if (!$loading) {\n      return '';\n    }\n\n    const btnOpacity = $styleType === 'empty' ? 0.9 : 0.7;\n\n    return `\n      cursor: not-allowed;\n      opacity: ${btnOpacity};\n\n      /* Dim text and icons */\n      > * {\n        opacity: 0.7;\n      }\n    `;\n  }}\n`;\n\n// Lazy wrapper to avoid circular dependency issues at module load time\nconst ButtonIconWrapper = (props: React.ComponentProps<typeof Icon>) => (\n  <Icon {...props} />\n);\n\nconst ButtonIcon = styled(ButtonIconWrapper)`\n  height: ${({ theme }) => theme.click.button.basic.size.icon.all};\n  width: ${({ theme }) => theme.click.button.basic.size.icon.all};\n  svg {\n    height: ${({ theme }) => theme.click.button.basic.size.icon.all};\n    width: ${({ theme }) => theme.click.button.basic.size.icon.all};\n  }\n`;\n"],"names":["Button","type","iconLeft","iconRight","align","children","fillWidth","label","loading","disabled","delegated","jsxs","jsx","shimmerFullWidth","keyframes","backgroundPosition","shimmerFixedWidth","StyledButton","styled","BaseButton","withConfig","componentId","$fillWidth","$styleType","theme","click","button","basic","color","text","default","background","stroke","typography","$align","$loading","hover","transition","active","bgDisabled","textDisabled","strokeDisabled","fontDisabled","btnOpacity","ButtonIconWrapper","props","Icon","ButtonIcon","size","icon","all"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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","jsxs","cn","undefined","jsx","button__icon","Icon","button__label","displayName"],"mappings":";;;;;;;;;;;AA8BA,MAAMA,cAAAA,GAAiBC,0BAAAA,CAAIC,qBAAAA,CAAOC,MAAAA,EAAQ;AAAA,EACxCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,sBAAO,gBAAgB,CAAA;AAAA,MAChCK,SAAAA,EAAWL,sBAAO,kBAAkB,CAAA;AAAA,MACpCM,KAAAA,EAAON,sBAAO,cAAc,CAAA;AAAA,MAC5BO,MAAAA,EAAQP,sBAAO,eAAe;AAAA,KAChC;AAAA,IACAQ,KAAAA,EAAO;AAAA,MACLC,MAAAA,EAAQT,sBAAO,qBAAqB,CAAA;AAAA,MACpCU,IAAAA,EAAMV,sBAAO,mBAAmB;AAAA,KAClC;AAAA,IACAW,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMZ,sBAAO,aAAa;AAAA,KAC5B;AAAA,IACAa,OAAAA,EAAS;AAAA,MACPD,IAAAA,EAAMZ,sBAAO,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,iBACpB,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,wBAEAC,eAAA,CAAC,QAAA,EAAA,EACC,GAAA,EACA,SAAA,EAAWC,OAAG5B,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,IAAWc,MAAAA,EACtC,WAAA,EAAWd,OAAAA,IAAWc,MAAAA,EACtB,GAAIJ,SAAAA,EAEHN,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA,oBACCW,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW5B,qBAAAA,CAAO6B,YAAAA,EACtB,QAAA,kBAAAD,cAAA,CAACE,SAAA,EAAA,EACC,IAAA,EAAMb,QAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb,CAAA;AAAA,iCAGD,MAAA,EAAA,EAAK,SAAA,EAAWjB,qBAAAA,CAAO+B,aAAAA,EAAgBX,mBAASD,QAAAA,EAAS,CAAA;AAAA,EAEzDD,SAAAA,oBACCU,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW5B,sBAAO6B,YAAAA,EACtB,QAAA,kBAAAD,cAAA,CAACE,SAAA,EAAA,EACC,IAAA,EAAMZ,SAAAA,EACN,aAAA,EAAW,IAAA,EACX,IAAA,EAAK,MAAI,CAAA,EAEb;AAAA,CAAA,EAEJ,CAEJ;AAEAH,MAAAA,CAAOiB,WAAAA,GAAc,QAAA;;;;"}

package/dist/cjs/components/ButtonGroup/index.cjs

@@ -56,7 +56,7 @@ const ButtonGroup = ({
     const isActive = isValueSelected(value, currentSelection);
     return /* @__PURE__ */ jsxRuntime.jsx(Button, { $active: isActive, "aria-pressed": isActive, $fillWidth: fillWidth, $type: type, onClick: () => onButtonGroupClickCommonHandler(value), role: "button", ...buttonProps, children: label }, value);
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: buttons });
+  return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupWrapper, { ...props, $fillWidth: fillWidth, $type: type, role: "group", children: buttons });
 };
 const ButtonGroupWrapper = styledComponents.styled.div.withConfig({
   componentId: "sc-ukgugp-0"

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { styled } from 'styled-components';\nimport { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';\n\nconst normalizeToSet = (value: SelectionValue | undefined): Set<string> => {\n  if (value === undefined) {\n    return new Set();\n  }\n  if (value instanceof Set) {\n    return new Set(value);\n  }\n  return new Set([value]);\n};\n\nconst isValueSelected = (value: string, selection: Set<string>): boolean => {\n  return selection.has(value);\n};\n\nexport const ButtonGroup = ({\n  options,\n  selected,\n  defaultSelected,\n  fillWidth = false,\n  onClick,\n  type = 'default',\n  multiple = false,\n  ...props\n}: ButtonGroupProps) => {\n  const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>\n    normalizeToSet(defaultSelected)\n  );\n\n  // Use `selected` if the parent needs to own\n  // or sync the selection state management (controlled\n  // by consumer app)\n  // Use `defaultSelected` if the component can manage\n  // its own state independently (uncontrolled)\n  const isControlled = selected !== undefined;\n  const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;\n\n  const onButtonGroupClickCommonHandler = useCallback(\n    (value: string) => {\n      let newSelection: Set<string>;\n\n      if (multiple) {\n        newSelection = new Set(currentSelection);\n        if (newSelection.has(value)) {\n          newSelection.delete(value);\n        } else {\n          newSelection.add(value);\n        }\n      } else {\n        newSelection = new Set([value]);\n      }\n\n      if (!isControlled) {\n        setInternalSelection(newSelection);\n      }\n\n      // WARN: Single mode returns string\n      // while multiple mode returns Set (DS)\n      onClick?.(value, multiple ? newSelection : value);\n    },\n    [currentSelection, multiple, isControlled, onClick]\n  );\n\n  const buttons = options.map(({ value, label, ...buttonProps }) => {\n    const isActive = isValueSelected(value, currentSelection);\n\n    return (\n      <Button\n        key={value}\n        $active={isActive}\n        aria-pressed={isActive}\n        $fillWidth={fillWidth}\n        $type={type}\n        onClick={() => onButtonGroupClickCommonHandler(value)}\n        role=\"button\"\n        {...buttonProps}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <ButtonGroupWrapper\n      $fillWidth={fillWidth}\n      $type={type}\n      {...props}\n    >\n      {buttons}\n    </ButtonGroupWrapper>\n  );\n};\n\nimport { ButtonGroupType } from './ButtonGroup.types';\n\nconst ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupType }>`\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};\n  gap: ${({ theme, $type }) => theme.click.button.group.space.panel[$type].gap};\n  border: ${({ theme, $type }) =>\n    $type === 'default'\n      ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`\n      : 'none'};\n  background: ${({ theme }) => theme.click.button.group.color.background.panel};\n  border-radius: ${({ theme }) => theme.click.button.group.radii.panel.all};\n  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};\n`;\n\nconst Button = styled.button<{\n  $active: boolean;\n  $fillWidth: boolean;\n  $type: ButtonGroupType;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: ${({ $active, theme }) =>\n    $active\n      ? theme.click.button.group.color.background.active\n      : theme.click.button.group.color.background.default};\n  color: ${({ theme }) => theme.click.button.group.color.text.default};\n  font: ${({ theme }) => theme.click.button.group.typography.label.default};\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};\n  ${({ $fillWidth }) => ($fillWidth ? 'flex: 1;' : '')};\n  border-radius: ${({ theme, $type }) =>\n    theme.click.button.group.radii.button[$type].all};\n  cursor: pointer;\n  border: none;\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n  }\n\n  &:hover {\n    background: ${({ theme }) => theme.click.button.group.color.background.hover};\n    font: ${({ theme }) => theme.click.button.group.typography.label.hover};\n    color: ${({ theme }) => theme.click.button.group.color.text.hover};\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    font: ${({ theme }) => theme.click.button.group.typography.label.disabled};\n    color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    background: ${({ theme, $active }) =>\n      theme.click.button.group.color.background[\n        $active ? 'disabled-active' : 'disabled'\n      ]};\n\n    &:active,\n    &:focus,\n    &[aria-pressed='true'] {\n      color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    }\n  }\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n    &:disabled {\n      background: ${({ theme }) =>\n        theme.click.button.group.color.background['disabled-active']};\n    }\n  }\n`;\n"],"names":["normalizeToSet","value","undefined","Set","isValueSelected","selection","has","ButtonGroup","options","selected","defaultSelected","fillWidth","onClick","type","multiple","props","internalSelection","setInternalSelection","useState","isControlled","currentSelection","onButtonGroupClickCommonHandler","useCallback","newSelection","delete","add","buttons","map","label","buttonProps","isActive","jsx","ButtonGroupWrapper","styled","div","withConfig","componentId","theme","$type","click","button","group","space","panel","x","y","gap","color","stroke","background","radii","all","$fillWidth","Button","$active","active","default","text","typography","hover","disabled"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { styled } from 'styled-components';\nimport { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';\n\nconst normalizeToSet = (value: SelectionValue | undefined): Set<string> => {\n  if (value === undefined) {\n    return new Set();\n  }\n  if (value instanceof Set) {\n    return new Set(value);\n  }\n  return new Set([value]);\n};\n\nconst isValueSelected = (value: string, selection: Set<string>): boolean => {\n  return selection.has(value);\n};\n\nexport const ButtonGroup = ({\n  options,\n  selected,\n  defaultSelected,\n  fillWidth = false,\n  onClick,\n  type = 'default',\n  multiple = false,\n  ...props\n}: ButtonGroupProps) => {\n  const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>\n    normalizeToSet(defaultSelected)\n  );\n\n  // Use `selected` if the parent needs to own\n  // or sync the selection state management (controlled\n  // by consumer app)\n  // Use `defaultSelected` if the component can manage\n  // its own state independently (uncontrolled)\n  const isControlled = selected !== undefined;\n  const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;\n\n  const onButtonGroupClickCommonHandler = useCallback(\n    (value: string) => {\n      let newSelection: Set<string>;\n\n      if (multiple) {\n        newSelection = new Set(currentSelection);\n        if (newSelection.has(value)) {\n          newSelection.delete(value);\n        } else {\n          newSelection.add(value);\n        }\n      } else {\n        newSelection = new Set([value]);\n      }\n\n      if (!isControlled) {\n        setInternalSelection(newSelection);\n      }\n\n      // WARN: Single mode returns string\n      // while multiple mode returns Set (DS)\n      onClick?.(value, multiple ? newSelection : value);\n    },\n    [currentSelection, multiple, isControlled, onClick]\n  );\n\n  const buttons = options.map(({ value, label, ...buttonProps }) => {\n    const isActive = isValueSelected(value, currentSelection);\n\n    return (\n      <Button\n        key={value}\n        $active={isActive}\n        aria-pressed={isActive}\n        $fillWidth={fillWidth}\n        $type={type}\n        onClick={() => onButtonGroupClickCommonHandler(value)}\n        role=\"button\"\n        {...buttonProps}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <ButtonGroupWrapper\n      {...props}\n      $fillWidth={fillWidth}\n      $type={type}\n      role=\"group\"\n    >\n      {buttons}\n    </ButtonGroupWrapper>\n  );\n};\n\nimport { ButtonGroupType } from './ButtonGroup.types';\n\nconst ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupType }>`\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};\n  gap: ${({ theme, $type }) => theme.click.button.group.space.panel[$type].gap};\n  border: ${({ theme, $type }) =>\n    $type === 'default'\n      ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`\n      : 'none'};\n  background: ${({ theme }) => theme.click.button.group.color.background.panel};\n  border-radius: ${({ theme }) => theme.click.button.group.radii.panel.all};\n  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};\n`;\n\nconst Button = styled.button<{\n  $active: boolean;\n  $fillWidth: boolean;\n  $type: ButtonGroupType;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: ${({ $active, theme }) =>\n    $active\n      ? theme.click.button.group.color.background.active\n      : theme.click.button.group.color.background.default};\n  color: ${({ theme }) => theme.click.button.group.color.text.default};\n  font: ${({ theme }) => theme.click.button.group.typography.label.default};\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};\n  ${({ $fillWidth }) => ($fillWidth ? 'flex: 1;' : '')};\n  border-radius: ${({ theme, $type }) =>\n    theme.click.button.group.radii.button[$type].all};\n  cursor: pointer;\n  border: none;\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n  }\n\n  &:hover {\n    background: ${({ theme }) => theme.click.button.group.color.background.hover};\n    font: ${({ theme }) => theme.click.button.group.typography.label.hover};\n    color: ${({ theme }) => theme.click.button.group.color.text.hover};\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    font: ${({ theme }) => theme.click.button.group.typography.label.disabled};\n    color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    background: ${({ theme, $active }) =>\n      theme.click.button.group.color.background[\n        $active ? 'disabled-active' : 'disabled'\n      ]};\n\n    &:active,\n    &:focus,\n    &[aria-pressed='true'] {\n      color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    }\n  }\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n    &:disabled {\n      background: ${({ theme }) =>\n        theme.click.button.group.color.background['disabled-active']};\n    }\n  }\n`;\n"],"names":["normalizeToSet","value","undefined","Set","isValueSelected","selection","has","ButtonGroup","options","selected","defaultSelected","fillWidth","onClick","type","multiple","props","internalSelection","setInternalSelection","useState","isControlled","currentSelection","onButtonGroupClickCommonHandler","useCallback","newSelection","delete","add","buttons","map","label","buttonProps","isActive","jsx","ButtonGroupWrapper","styled","div","withConfig","componentId","theme","$type","click","button","group","space","panel","x","y","gap","color","stroke","background","radii","all","$fillWidth","Button","$active","active","default","text","typography","hover","disabled"],"mappings":"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"}