@punkbit/cui 0.0.251-rc.16 → 0.2.0-rc.3

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

@@ -0,0 +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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"}

package/dist/cjs/components/BigStat/index.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+
+const BigStat = ({
+  fillWidth = false,
+  maxWidth,
+  height = "6rem",
+  label = "Label",
+  order = "titleTop",
+  size,
+  spacing = "sm",
+  state = "default",
+  title = "Title",
+  error = false,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $height: height, $order: order, $size: size, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, $error: error, ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(Label, { $state: state, $size: size, $error: error, children: label }),
+  /* @__PURE__ */ jsxRuntime.jsx(Title, { $state: state, $size: size, children: title })
+] });
+const Wrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-fn7rsc-0"
+})(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
+  $fillWidth = false,
+  $maxWidth = "none",
+  $state = "default",
+  $size = "lg",
+  $height = "fixed",
+  $order,
+  $spacing = "sm",
+  $error = false,
+  theme
+}) => `
+    background-color: ${theme.click.bigStat.color.background[$state]};
+    color: ${theme.click.bigStat.color.label[$state]};
+    font: ${theme.click.bigStat.typography[$size].label[$state]};
+    border-radius: ${theme.click.bigStat.radii.all};
+    border: ${theme.click.bigStat.stroke} solid ${$error ? theme.click.bigStat.color.stroke.danger : theme.click.bigStat.color.stroke[$state]};
+  gap: ${theme.click.bigStat.space[$spacing].gap};
+  padding: ${theme.click.bigStat.space.all};
+  min-height: ${$height !== void 0 ? `${$height}` : "auto"};
+  flex-direction: ${$order === "titleBottom" ? "column-reverse" : "column"};
+  width: ${$fillWidth === true ? "100%" : "auto"};
+  max-width: ${$maxWidth ? $maxWidth : "none"};
+  `);
+const Label = styledComponents.styled.div.withConfig({
+  componentId: "sc-fn7rsc-1"
+})(["", ""], ({
+  $state = "default",
+  $size = "lg",
+  $error = false,
+  theme
+}) => `
+    color: ${$error ? theme.click.bigStat.color.label.danger : theme.click.bigStat.color.label[$state]};
+    font: ${theme.click.bigStat.typography[$size].label[$state]};
+  `);
+const Title = styledComponents.styled.div.withConfig({
+  componentId: "sc-fn7rsc-2"
+})(["", ""], ({
+  $state = "default",
+  $size = "lg",
+  theme
+}) => `
+    color: ${theme.click.bigStat.color.title[$state]};
+    font: ${theme.click.bigStat.typography[$size].title[$state]};
+  `);
+
+exports.BigStat = BigStat;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/BigStat/BigStat.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { BigStatProps } from './BigStat.types';\n\n//* Use this component to highlight important pieces of information. */\nexport const BigStat = ({\n  fillWidth = false,\n  maxWidth,\n  height = '6rem',\n  label = 'Label',\n  order = 'titleTop',\n  size,\n  spacing = 'sm',\n  state = 'default',\n  title = 'Title',\n  error = false,\n  ...props\n}: BigStatProps) => (\n  <Wrapper\n    $height={height}\n    $order={order}\n    $size={size}\n    $spacing={spacing}\n    $state={state}\n    $fillWidth={fillWidth}\n    $maxWidth={maxWidth}\n    $error={error}\n    {...props}\n  >\n    <Label\n      $state={state}\n      $size={size}\n      $error={error}\n    >\n      {label}\n    </Label>\n    <Title\n      $state={state}\n      $size={size}\n    >\n      {title}\n    </Title>\n  </Wrapper>\n);\n\nimport { bigStatOrder, bigStatSize, bigStatSpacing, bigStatState } from './BigStat.types';\n\nconst Wrapper = styled.div<{\n  $fillWidth?: boolean;\n  $maxWidth?: string;\n  $height?: string;\n  $order?: bigStatOrder;\n  $size?: bigStatSize;\n  $spacing?: bigStatSpacing;\n  $state?: bigStatState;\n  $error?: boolean;\n}>`\n  display: flex;\n  justify-content: center;\n  box-sizing: border-box;\n  ${({\n    $fillWidth = false,\n    $maxWidth = 'none',\n    $state = 'default',\n    $size = 'lg',\n    $height = 'fixed',\n    $order,\n    $spacing = 'sm',\n    $error = false,\n    theme,\n  }) => `\n    background-color: ${theme.click.bigStat.color.background[$state]};\n    color: ${theme.click.bigStat.color.label[$state]};\n    font: ${theme.click.bigStat.typography[$size].label[$state]};\n    border-radius: ${theme.click.bigStat.radii.all};\n    border: ${theme.click.bigStat.stroke} solid ${\n      $error\n        ? theme.click.bigStat.color.stroke.danger\n        : theme.click.bigStat.color.stroke[$state]\n    };\n  gap: ${theme.click.bigStat.space[$spacing].gap};\n  padding: ${theme.click.bigStat.space.all};\n  min-height: ${$height !== undefined ? `${$height}` : 'auto'};\n  flex-direction: ${$order === 'titleBottom' ? 'column-reverse' : 'column'};\n  width: ${$fillWidth === true ? '100%' : 'auto'};\n  max-width: ${$maxWidth ? $maxWidth : 'none'};\n  `}\n`;\n\nconst Label = styled.div<{\n  $state?: bigStatState;\n  $size?: bigStatSize;\n  $error?: boolean;\n}>`\n  ${({ $state = 'default', $size = 'lg', $error = false, theme }) => `\n    color: ${$error ? theme.click.bigStat.color.label.danger : theme.click.bigStat.color.label[$state]};\n    font: ${theme.click.bigStat.typography[$size].label[$state]};\n  `}\n`;\n\nconst Title = styled.div<{\n  $state?: bigStatState;\n  $size?: bigStatSize;\n}>`\n  ${({ $state = 'default', $size = 'lg', theme }) => `\n    color: ${theme.click.bigStat.color.title[$state]};\n    font: ${theme.click.bigStat.typography[$size].title[$state]};\n  `}\n`;\n"],"names":["BigStat","fillWidth","maxWidth","height","label","order","size","spacing","state","title","error","props","jsx","Wrapper","styled","div","withConfig","componentId","$fillWidth","$maxWidth","$state","$size","$height","$order","$spacing","$error","theme","click","bigStat","color","background","typography","radii","all","stroke","danger","space","gap","undefined","Label","Title"],"mappings":"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"}

package/dist/cjs/components/Button/BaseButton.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponents = require('styled-components');
+
+const BaseButton = styledComponents.styled.button.withConfig({
+  componentId: "sc-1kar17q-0"
+})(["display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;", ""], ({
+  theme
+}) => `
+    padding: ${theme.click.button.basic.space.y} ${theme.click.button.basic.space.x};
+    border-radius: ${theme.click.button.radii.all};
+    gap: ${theme.click.button.basic.space.gap};
+    font: ${theme.click.button.basic.typography.label.default};
+    &:hover {
+      font: ${theme.click.button.basic.typography.label.hover};
+    }
+
+    &:active,
+    &:focus {
+      font: ${theme.click.button.basic.typography.label.active};
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.click.global.color.outline.default};
+      outline-offset: 2px;
+    }
+
+    &:disabled,
+    &:disabled:hover,
+    &:disabled:active {
+      font: ${theme.click.button.basic.typography.label.disabled};
+      cursor: not-allowed;
+    }
+    `);
+
+exports.BaseButton = BaseButton;
+//# sourceMappingURL=BaseButton.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.cjs","sources":["../../../../src/components/Button/BaseButton.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const BaseButton = styled.button`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  ${({ theme }) => `\n    padding: ${theme.click.button.basic.space.y} ${theme.click.button.basic.space.x};\n    border-radius: ${theme.click.button.radii.all};\n    gap: ${theme.click.button.basic.space.gap};\n    font: ${theme.click.button.basic.typography.label.default};\n    &:hover {\n      font: ${theme.click.button.basic.typography.label.hover};\n    }\n\n    &:active,\n    &:focus {\n      font: ${theme.click.button.basic.typography.label.active};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${theme.click.global.color.outline.default};\n      outline-offset: 2px;\n    }\n\n    &:disabled,\n    &:disabled:hover,\n    &:disabled:active {\n      font: ${theme.click.button.basic.typography.label.disabled};\n      cursor: not-allowed;\n    }\n    `}\n`;\n"],"names":["BaseButton","styled","button","withConfig","componentId","theme","click","basic","space","y","x","radii","all","gap","typography","label","default","hover","active","global","color","outline","disabled"],"mappings":";;;;;;AAEO,MAAMA,UAAAA,GAAaC,uBAAAA,CAAOC,MAAAA,CAAMC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2FAAA,EAAA,EAAA,GAMnC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,aAAA,EACJA,KAAAA,CAAMC,KAAAA,CAAMJ,MAAAA,CAAOK,KAAAA,CAAMC,KAAAA,CAAMC,CAAC,CAAA,CAAA,EAAIJ,KAAAA,CAAMC,KAAAA,CAAMJ,MAAAA,CAAOK,KAAAA,CAAMC,KAAAA,CAAME,CAAC,CAAA;AAAA,mBAAA,EAC9DL,KAAAA,CAAMC,KAAAA,CAAMJ,MAAAA,CAAOS,KAAAA,CAAMC,GAAG,CAAA;AAAA,SAAA,EACtCP,KAAAA,CAAMC,KAAAA,CAAMJ,MAAAA,CAAOK,KAAAA,CAAMC,MAAMK,GAAG,CAAA;AAAA,UAAA,EACjCR,MAAMC,KAAAA,CAAMJ,MAAAA,CAAOK,KAAAA,CAAMO,UAAAA,CAAWC,MAAMC,OAAO,CAAA;AAAA;AAAA,YAAA,EAE/CX,MAAMC,KAAAA,CAAMJ,MAAAA,CAAOK,KAAAA,CAAMO,UAAAA,CAAWC,MAAME,KAAK,CAAA;AAAA;;AAAA;AAAA;AAAA,YAAA,EAK/CZ,MAAMC,KAAAA,CAAMJ,MAAAA,CAAOK,KAAAA,CAAMO,UAAAA,CAAWC,MAAMG,MAAM,CAAA;AAAA;;AAAA;AAAA,yBAAA,EAInCb,KAAAA,CAAMC,KAAAA,CAAMa,MAAAA,CAAOC,KAAAA,CAAMC,QAAQL,OAAO,CAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA,YAAA,EAOrDX,MAAMC,KAAAA,CAAMJ,MAAAA,CAAOK,KAAAA,CAAMO,UAAAA,CAAWC,MAAMO,QAAQ,CAAA;AAAA;AAAA;AAAA,IAAA,CAG3D;;;;"}

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

@@ -0,0 +1,62 @@
+require("./Button.css");
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+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 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,
+  align = "center",
+  children,
+  fillWidth,
+  label,
+  loading = false,
+  disabled,
+  className,
+  ...delegated
+}, 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const styledComponents = require('styled-components');
+
+const normalizeToSet = (value) => {
+  if (value === void 0) {
+    return /* @__PURE__ */ new Set();
+  }
+  if (value instanceof Set) {
+    return new Set(value);
+  }
+  return /* @__PURE__ */ new Set([value]);
+};
+const isValueSelected = (value, selection) => {
+  return selection.has(value);
+};
+const ButtonGroup = ({
+  options,
+  selected,
+  defaultSelected,
+  fillWidth = false,
+  onClick,
+  type = "default",
+  multiple = false,
+  ...props
+}) => {
+  const [internalSelection, setInternalSelection] = react.useState(() => normalizeToSet(defaultSelected));
+  const isControlled = selected !== void 0;
+  const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;
+  const onButtonGroupClickCommonHandler = react.useCallback((value) => {
+    let newSelection;
+    if (multiple) {
+      newSelection = new Set(currentSelection);
+      if (newSelection.has(value)) {
+        newSelection.delete(value);
+      } else {
+        newSelection.add(value);
+      }
+    } else {
+      newSelection = /* @__PURE__ */ new Set([value]);
+    }
+    if (!isControlled) {
+      setInternalSelection(newSelection);
+    }
+    onClick?.(value, multiple ? newSelection : value);
+  }, [currentSelection, multiple, isControlled, onClick]);
+  const buttons = options.map(({
+    value,
+    label,
+    ...buttonProps
+  }) => {
+    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, { ...props, $fillWidth: fillWidth, $type: type, role: "group", children: buttons });
+};
+const ButtonGroupWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-17a1yut-0"
+})(["display:inline-flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;padding:", ";gap:", ";border:", ";background:", ";border-radius:", ";width:", ";"], ({
+  theme,
+  $type
+}) => `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`, ({
+  theme,
+  $type
+}) => theme.click.button.group.space.panel[$type].gap, ({
+  theme,
+  $type
+}) => $type === "default" ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}` : "none", ({
+  theme
+}) => theme.click.button.group.color.background.panel, ({
+  theme
+}) => theme.click.button.group.radii.panel.all, ({
+  $fillWidth
+}) => $fillWidth ? "100%" : "auto");
+const Button = styledComponents.styled.button.withConfig({
+  componentId: "sc-17a1yut-1"
+})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;background:", ";color:", ";font:", ";padding:", ";", ";border-radius:", ";cursor:pointer;border:none;&[aria-pressed='true']{background:", ";font:", ";color:", ";}&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ";&:active,&:focus,&[aria-pressed='true']{color:", ";}}&[aria-pressed='true']{background:", ";font:", ";color:", ";&:disabled{background:", ";}}"], ({
+  $active,
+  theme
+}) => $active ? theme.click.button.group.color.background.active : theme.click.button.group.color.background.default, ({
+  theme
+}) => theme.click.button.group.color.text.default, ({
+  theme
+}) => theme.click.button.group.typography.label.default, ({
+  theme,
+  $type
+}) => `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`, ({
+  $fillWidth
+}) => $fillWidth ? "flex: 1;" : "", ({
+  theme,
+  $type
+}) => theme.click.button.group.radii.button[$type].all, ({
+  theme
+}) => theme.click.button.group.color.background.active, ({
+  theme
+}) => theme.click.button.group.typography.label.active, ({
+  theme
+}) => theme.click.button.group.color.text.active, ({
+  theme
+}) => theme.click.button.group.color.background.hover, ({
+  theme
+}) => theme.click.button.group.typography.label.hover, ({
+  theme
+}) => theme.click.button.group.color.text.hover, ({
+  theme
+}) => theme.click.button.group.typography.label.disabled, ({
+  theme
+}) => theme.click.button.group.color.text.disabled, ({
+  theme,
+  $active
+}) => theme.click.button.group.color.background[$active ? "disabled-active" : "disabled"], ({
+  theme
+}) => theme.click.button.group.color.text.disabled, ({
+  theme
+}) => theme.click.button.group.color.background.active, ({
+  theme
+}) => theme.click.button.group.typography.label.active, ({
+  theme
+}) => theme.click.button.group.color.text.active, ({
+  theme
+}) => theme.click.button.group.color.background["disabled-active"]);
+
+exports.ButtonGroup = ButtonGroup;
+//# sourceMappingURL=index.cjs.map