@clickhouse/click-ui 0.4.0 → 0.6.0-rc1

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

@@ -1,87 +1,75 @@
+import "./CardPrimary.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
 import { withTopBadge } from './withTopBadge.js';
+import { cn } from '../../lib/cva.js';
+import styles from './CardPrimary.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 import { Title } from '../Title/index.js';
 import { Text } from '../Text/index.js';
 import { Spacer } from '../Spacer/index.js';
 import { Button } from '../Button/index.js';
+import { cva } from 'class-variance-authority';
 
-const Wrapper = styled.div.withConfig({
-  componentId: "sc-2dguvi-0"
-})(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ";}&[aria-disabled='true'],&[aria-disabled='true']:hover,&[aria-disabled='true']:focus,&[aria-disabled='true']:active{pointer-events:none;", "}", ""], ({
-  theme
-}) => theme.click.card.primary.color.background.default, ({
-  theme
-}) => theme.click.card.primary.radii.all, ({
-  theme
-}) => `1px solid ${theme.click.card.primary.color.stroke.default}`, ({
-  $alignContent
-}) => $alignContent === "start" ? "left" : $alignContent === "end" ? "right" : "center", ({
-  $size = "md",
-  theme
-}) => `${theme.click.card.primary.space[$size].x} ${theme.click.card.primary.space[$size].y}`, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.space[$size].gap, ({
-  $hasShadow,
-  theme
-}) => $hasShadow ? theme.shadow[1] : "none", ({
-  theme
-}) => theme.click.card.secondary.color.background.hover, ({
-  theme
-}) => theme.click.button.basic.color.primary.background.hover, ({
-  theme
-}) => theme.click.button.basic.color.primary.stroke.hover, ({
-  theme
-}) => theme.click.button.basic.color.primary.background.active, ({
-  theme
-}) => theme.click.button.basic.color.primary.stroke.active, ({
-  theme
-}) => theme.click.button.basic.color.primary.stroke.active, ({
-  theme
-}) => `
-    background-color: ${theme.click.card.primary.color.background.disabled};
-    color: ${theme.click.card.primary.color.title.disabled};
-    border: 1px solid ${theme.click.card.primary.color.stroke.disabled};
-    cursor: not-allowed;
-
-    button {
-      background-color: ${theme.click.button.basic.color.primary.background.disabled};
-      border-color: ${theme.click.button.basic.color.primary.stroke.disabled};
-      &:active {
-        background-color: ${theme.click.button.basic.color.primary.background.disabled};
-        border-color: ${theme.click.button.basic.color.primary.stroke.disabled};
-      }
-    }`, ({
-  $isSelected,
-  theme
-}) => $isSelected ? `border-color: ${theme.click.button.basic.color.primary.stroke.active};` : "");
-const Header = styled.div.withConfig({
-  componentId: "sc-2dguvi-1"
-})(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg,img{height:", ";width:", ";}"], ({
-  $alignContent = "center"
-}) => ["start", "end"].includes($alignContent) ? `flex-${$alignContent}` : $alignContent, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.space[$size].gap, ({
-  $disabled,
-  theme
-}) => $disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.size.icon[$size].all, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.size.icon[$size].all);
-const Content = styled.div.withConfig({
-  componentId: "sc-2dguvi-2"
-})(["width:100%;display:flex;flex-direction:column;align-self:", ";gap:", ";flex:1;"], ({
-  $alignContent = "center"
-}) => ["start", "end"].includes($alignContent) ? `flex-${$alignContent}` : $alignContent, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.space[$size].gap);
+const wrapperVariants = cva(styles.wrapper, {
+  variants: {
+    size: {
+      sm: styles["wrapper_size_sm"],
+      md: styles["wrapper_size_md"]
+    },
+    align: {
+      start: styles["wrapper_align_start"],
+      center: styles["wrapper_align_center"],
+      end: styles["wrapper_align_end"]
+    },
+    hasShadow: {
+      true: styles["wrapper_shadow"]
+    },
+    isSelected: {
+      true: styles["wrapper_selected"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "center"
+  }
+});
+const headerVariants = cva(styles.header, {
+  variants: {
+    size: {
+      sm: styles["header_size_sm"],
+      md: styles["header_size_md"]
+    },
+    align: {
+      start: styles["header_align_start"],
+      center: styles["header_align_center"],
+      end: styles["header_align_end"]
+    },
+    disabled: {
+      true: styles["header_disabled"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "center"
+  }
+});
+const contentVariants = cva(styles.content, {
+  variants: {
+    size: {
+      sm: styles["content_size_sm"],
+      md: styles["content_size_md"]
+    },
+    align: {
+      start: styles["content_align_start"],
+      center: styles["content_align_center"],
+      end: styles["content_align_end"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "center"
+  }
+});
 const convertCardAlignToTextAlign = (align) => {
   if (align === "center") {
     return "center";
@@ -102,6 +90,7 @@ const Card = ({
   onButtonClick,
   isSelected,
   children,
+  className,
   ...props
 }) => {
   const handleClick = (e) => {
@@ -113,12 +102,24 @@ const Card = ({
     }
   };
   const Component = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
-  return /* @__PURE__ */ jsxs(Wrapper, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
-    (icon || title) && /* @__PURE__ */ jsxs(Header, { $size: size, $disabled: disabled, $alignContent: alignContent, children: [
+  return /* @__PURE__ */ jsxs("div", { "aria-disabled": disabled, tabIndex: 0, ...props, className: cn(wrapperVariants({
+    size,
+    align: alignContent,
+    hasShadow,
+    isSelected
+  }), className), children: [
+    (icon || title) && /* @__PURE__ */ jsxs("div", { className: cn(headerVariants({
+      size,
+      align: alignContent,
+      disabled
+    })), children: [
       iconUrl ? /* @__PURE__ */ jsx("img", { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsx(SvgImage, { name: icon, "aria-hidden": true }),
       title && /* @__PURE__ */ jsx(Title, { type: "h3", children: title })
     ] }),
-    (description || children) && /* @__PURE__ */ jsxs(Content, { $size: size, $alignContent: alignContent, children: [
+    (description || children) && /* @__PURE__ */ jsxs("div", { className: cn(contentVariants({
+      size,
+      align: alignContent
+    })), children: [
       description && /* @__PURE__ */ jsx(Text, { color: "muted", align: convertCardAlignToTextAlign(alignContent ?? "start"), children: description }),
       children
     ] }),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/CardPrimary/CardPrimary.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { Title } from '@/components/Title';\nimport { Text, type TextAlignment } from '@/components/Text';\nimport { withTopBadge } from './withTopBadge';\nimport { Button } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CardPrimaryProps, CardPrimarySize } from './CardPrimary.types';\n\ntype ContentAlignment = 'start' | 'center' | 'end';\n\nconst Wrapper = styled.div<{\n  $size?: CardPrimarySize;\n  $hasShadow?: boolean;\n  $isSelected?: boolean;\n  $alignContent?: ContentAlignment;\n}>`\n  background-color: ${({ theme }) => theme.click.card.primary.color.background.default};\n  border-radius: ${({ theme }) => theme.click.card.primary.radii.all};\n  border: ${({ theme }) => `1px solid ${theme.click.card.primary.color.stroke.default}`};\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  text-align: ${({ $alignContent }) =>\n    $alignContent === 'start' ? 'left' : $alignContent === 'end' ? 'right' : 'center'};\n  flex-direction: column;\n  padding: ${({ $size = 'md', theme }) =>\n    `${theme.click.card.primary.space[$size].x} ${theme.click.card.primary.space[$size].y}`};\n  gap: ${({ $size = 'md', theme }) => theme.click.card.primary.space[$size].gap};\n  box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : 'none')};\n\n  &:hover,\n  &:focus {\n    background-color: ${({ theme }) => theme.click.card.secondary.color.background.hover};\n    cursor: pointer;\n    button {\n      background-color: ${({ theme }) =>\n        theme.click.button.basic.color.primary.background.hover};\n      border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.hover};\n      &:active {\n        background-color: ${({ theme }) =>\n          theme.click.button.basic.color.primary.background.active};\n        border-color: ${({ theme }) =>\n          theme.click.button.basic.color.primary.stroke.active};\n      }\n    }\n  }\n\n  &:active {\n    border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.active};\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']:hover,\n  &[aria-disabled='true']:focus,\n  &[aria-disabled='true']:active {\n    pointer-events: none;\n    ${({ theme }) => `\n    background-color: ${theme.click.card.primary.color.background.disabled};\n    color: ${theme.click.card.primary.color.title.disabled};\n    border: 1px solid ${theme.click.card.primary.color.stroke.disabled};\n    cursor: not-allowed;\n\n    button {\n      background-color: ${theme.click.button.basic.color.primary.background.disabled};\n      border-color: ${theme.click.button.basic.color.primary.stroke.disabled};\n      &:active {\n        background-color: ${theme.click.button.basic.color.primary.background.disabled};\n        border-color: ${theme.click.button.basic.color.primary.stroke.disabled};\n      }\n    }`}\n  }\n\n  ${({ $isSelected, theme }) =>\n    $isSelected\n      ? `border-color: ${theme.click.button.basic.color.primary.stroke.active};`\n      : ''}\n`;\n\nconst Header = styled.div<{\n  $size?: 'sm' | 'md';\n  $disabled?: boolean;\n  $alignContent?: ContentAlignment;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: ${({ $alignContent = 'center' }) =>\n    ['start', 'end'].includes($alignContent) ? `flex-${$alignContent}` : $alignContent};\n  gap: ${({ $size = 'md', theme }) => theme.click.card.primary.space[$size].gap};\n\n  h3 {\n    color: ${({ $disabled, theme }) =>\n      $disabled == true\n        ? theme.click.global.color.text.muted\n        : theme.click.global.color.text.default};\n  }\n\n  svg,\n  img {\n    height: ${({ $size = 'md', theme }) => theme.click.card.primary.size.icon[$size].all};\n    width: ${({ $size = 'md', theme }) => theme.click.card.primary.size.icon[$size].all};\n  }\n`;\n\nconst Content = styled.div<{ $size?: 'sm' | 'md'; $alignContent?: ContentAlignment }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-self: ${({ $alignContent = 'center' }) =>\n    ['start', 'end'].includes($alignContent) ? `flex-${$alignContent}` : $alignContent};\n  gap: ${({ $size = 'md', theme }) => theme.click.card.primary.space[$size].gap};\n  flex: 1;\n`;\n\nconst convertCardAlignToTextAlign = (align: ContentAlignment): TextAlignment => {\n  if (align === 'center') {\n    return 'center';\n  }\n  return align === 'start' ? 'left' : 'right';\n};\n\nconst Card = ({\n  alignContent,\n  title,\n  icon,\n  iconUrl,\n  hasShadow = false,\n  description,\n  infoUrl,\n  infoText,\n  size,\n  disabled = false,\n  onButtonClick,\n  isSelected,\n  children,\n  ...props\n}: CardPrimaryProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n\n  const Component = !!infoUrl || typeof onButtonClick === 'function' ? Button : 'div';\n  return (\n    <Wrapper\n      $alignContent={alignContent}\n      $hasShadow={hasShadow}\n      $size={size}\n      aria-disabled={disabled}\n      $isSelected={isSelected}\n      tabIndex={0}\n      {...props}\n    >\n      {(icon || title) && (\n        <Header\n          $size={size}\n          $disabled={disabled}\n          $alignContent={alignContent}\n        >\n          {iconUrl ? (\n            <img\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n              />\n            )\n          )}\n          {title && <Title type=\"h3\">{title}</Title>}\n        </Header>\n      )}\n\n      {(description || children) && (\n        <Content\n          $size={size}\n          $alignContent={alignContent}\n        >\n          {description && (\n            <Text\n              color=\"muted\"\n              align={convertCardAlignToTextAlign(alignContent ?? 'start')}\n            >\n              {description}\n            </Text>\n          )}\n          {children}\n        </Content>\n      )}\n\n      {size == 'sm' && <Spacer size=\"sm\" />}\n\n      {infoText && (\n        <Component\n          onClick={handleClick}\n          disabled={disabled}\n        >\n          {infoText}\n        </Component>\n      )}\n    </Wrapper>\n  );\n};\n\nexport const CardPrimary = withTopBadge<CardPrimaryProps>(Card);\n"],"names":["Wrapper","styled","div","withConfig","componentId","theme","click","card","primary","color","background","default","radii","all","stroke","$alignContent","$size","space","x","y","gap","$hasShadow","shadow","secondary","hover","button","basic","active","disabled","title","$isSelected","Header","includes","$disabled","global","text","muted","size","icon","Content","convertCardAlignToTextAlign","align","Card","alignContent","iconUrl","hasShadow","description","infoUrl","infoText","onButtonClick","isSelected","children","props","handleClick","e","length","window","open","Component","Button","Icon","CardPrimary","withTopBadge"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CardPrimary/CardPrimary.tsx"],"sourcesContent":["import { Title } from '@/components/Title';\nimport { Text, type TextAlignment } from '@/components/Text';\nimport { withTopBadge } from './withTopBadge';\nimport { Button } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { cn, cva } from '@/lib/cva';\nimport { CardPrimaryProps } from './CardPrimary.types';\nimport styles from './CardPrimary.module.css';\n\ntype ContentAlignment = 'start' | 'center' | 'end';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    size: {\n      sm: styles['wrapper_size_sm'],\n      md: styles['wrapper_size_md'],\n    },\n    align: {\n      start: styles['wrapper_align_start'],\n      center: styles['wrapper_align_center'],\n      end: styles['wrapper_align_end'],\n    },\n    hasShadow: {\n      true: styles['wrapper_shadow'],\n    },\n    isSelected: {\n      true: styles['wrapper_selected'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst headerVariants = cva(styles.header, {\n  variants: {\n    size: {\n      sm: styles['header_size_sm'],\n      md: styles['header_size_md'],\n    },\n    align: {\n      start: styles['header_align_start'],\n      center: styles['header_align_center'],\n      end: styles['header_align_end'],\n    },\n    disabled: {\n      true: styles['header_disabled'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst contentVariants = cva(styles.content, {\n  variants: {\n    size: {\n      sm: styles['content_size_sm'],\n      md: styles['content_size_md'],\n    },\n    align: {\n      start: styles['content_align_start'],\n      center: styles['content_align_center'],\n      end: styles['content_align_end'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst convertCardAlignToTextAlign = (align: ContentAlignment): TextAlignment => {\n  if (align === 'center') {\n    return 'center';\n  }\n  return align === 'start' ? 'left' : 'right';\n};\n\nconst Card = ({\n  alignContent,\n  title,\n  icon,\n  iconUrl,\n  hasShadow = false,\n  description,\n  infoUrl,\n  infoText,\n  size,\n  disabled = false,\n  onButtonClick,\n  isSelected,\n  children,\n  className,\n  ...props\n}: CardPrimaryProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n\n  const Component = !!infoUrl || typeof onButtonClick === 'function' ? Button : 'div';\n  return (\n    <div\n      aria-disabled={disabled}\n      tabIndex={0}\n      {...props}\n      className={cn(\n        wrapperVariants({ size, align: alignContent, hasShadow, isSelected }),\n        className\n      )}\n    >\n      {(icon || title) && (\n        <div className={cn(headerVariants({ size, align: alignContent, disabled }))}>\n          {iconUrl ? (\n            <img\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n              />\n            )\n          )}\n          {title && <Title type=\"h3\">{title}</Title>}\n        </div>\n      )}\n\n      {(description || children) && (\n        <div className={cn(contentVariants({ size, align: alignContent }))}>\n          {description && (\n            <Text\n              color=\"muted\"\n              align={convertCardAlignToTextAlign(alignContent ?? 'start')}\n            >\n              {description}\n            </Text>\n          )}\n          {children}\n        </div>\n      )}\n\n      {size == 'sm' && <Spacer size=\"sm\" />}\n\n      {infoText && (\n        <Component\n          onClick={handleClick}\n          disabled={disabled}\n        >\n          {infoText}\n        </Component>\n      )}\n    </div>\n  );\n};\n\nexport const CardPrimary = withTopBadge<CardPrimaryProps>(Card);\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","size","sm","md","align","start","center","end","hasShadow","true","isSelected","defaultVariants","headerVariants","header","disabled","contentVariants","content","convertCardAlignToTextAlign","Card","alignContent","title","icon","iconUrl","description","infoUrl","infoText","onButtonClick","children","className","props","handleClick","e","length","window","open","Component","Button","cn","Icon","CardPrimary","withTopBadge"],"mappings":"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"}

package/dist/esm/components/CardPrimary/withTopBadge.js

@@ -7,7 +7,7 @@ const withTopBadge = (Component) => ({
 }) => {
   return /* @__PURE__ */ jsxs(TopBadgeWrapper, { alignItems: "stretch", fillWidth: true, children: [
     /* @__PURE__ */ jsx(Component, { ...props }),
-    topBadgeText && /* @__PURE__ */ jsx(CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, $isSelected: props.isSelected || false })
+    topBadgeText && /* @__PURE__ */ jsx(CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, isSelected: props.isSelected || false })
   ] });
 };
 

package/dist/esm/components/CardPrimary/withTopBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"withTopBadge.js","sources":["../../../../src/components/CardPrimary/withTopBadge.tsx"],"sourcesContent":["import { CardPrimaryTopBadge, TopBadgeWrapper } from './CardPrimaryTopBadge';\nimport { ComponentType, FC } from 'react';\n\nexport interface WithTopBadgeProps {\n  topBadgeText?: string;\n  isSelected?: boolean;\n}\n\nexport const withTopBadge =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithTopBadgeProps> =>\n  ({ topBadgeText, ...props }: P & WithTopBadgeProps) => {\n    return (\n      <TopBadgeWrapper\n        alignItems=\"stretch\"\n        fillWidth\n      >\n        <Component {...(props as P)} />\n        {topBadgeText && (\n          <CardPrimaryTopBadge\n            data-testid=\"card-top-badge\"\n            text={topBadgeText}\n            $isSelected={props.isSelected || false}\n          />\n        )}\n      </TopBadgeWrapper>\n    );\n  };\n"],"names":["withTopBadge","Component","topBadgeText","props","isSelected"],"mappings":";;;AAQO,MAAMA,YAAAA,GACX,CAAmBC,SAAAA,KACnB,CAAC;AAAA,EAAEC,YAAAA;AAAAA,EAAc,GAAGC;AAA6B,CAAA,KAAM;AACrD,EAAA,uBACE,IAAA,CAAC,eAAA,EAAA,EACC,UAAA,EAAW,SAAA,EACX,WAAS,IAAA,EAET,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,KAAeA,KAAAA,EAAY,CAAA;AAAA,IAC3BD,YAAAA,oBACC,GAAA,CAAC,mBAAA,EAAA,EACC,aAAA,EAAY,gBAAA,EACZ,MAAMA,YAAAA,EACN,WAAA,EAAaC,KAAAA,CAAMC,UAAAA,IAAc,KAAA,EAAM;AAAA,GAAA,EAG7C,CAAA;AAEJ;;;;"}
+{"version":3,"file":"withTopBadge.js","sources":["../../../../src/components/CardPrimary/withTopBadge.tsx"],"sourcesContent":["import { CardPrimaryTopBadge, TopBadgeWrapper } from './CardPrimaryTopBadge';\nimport { ComponentType, FC } from 'react';\n\nexport interface WithTopBadgeProps {\n  topBadgeText?: string;\n  isSelected?: boolean;\n}\n\nexport const withTopBadge =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithTopBadgeProps> =>\n  ({ topBadgeText, ...props }: P & WithTopBadgeProps) => {\n    return (\n      <TopBadgeWrapper\n        alignItems=\"stretch\"\n        fillWidth\n      >\n        <Component {...(props as P)} />\n        {topBadgeText && (\n          <CardPrimaryTopBadge\n            data-testid=\"card-top-badge\"\n            text={topBadgeText}\n            isSelected={props.isSelected || false}\n          />\n        )}\n      </TopBadgeWrapper>\n    );\n  };\n"],"names":["withTopBadge","Component","topBadgeText","props","isSelected"],"mappings":";;;AAQO,MAAMA,YAAAA,GACX,CAAmBC,SAAAA,KACnB,CAAC;AAAA,EAAEC,YAAAA;AAAAA,EAAc,GAAGC;AAA6B,CAAA,KAAM;AACrD,EAAA,uBACE,IAAA,CAAC,eAAA,EAAA,EACC,UAAA,EAAW,SAAA,EACX,WAAS,IAAA,EAET,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,KAAeA,KAAAA,EAAY,CAAA;AAAA,IAC3BD,YAAAA,oBACC,GAAA,CAAC,mBAAA,EAAA,EACC,aAAA,EAAY,gBAAA,EACZ,MAAMA,YAAAA,EACN,UAAA,EAAYC,KAAAA,CAAMC,UAAAA,IAAc,KAAA,EAAM;AAAA,GAAA,EAG5C,CAAA;AAEJ;;;;"}

package/dist/esm/components/Checkbox/Checkbox.css

@@ -0,0 +1,116 @@
+/* The wrapper class is applied alongside FormRoot's styled-components class.
+   The .wrapper.wrapper double-class boost matches the specificity behavior of
+   the original `styled(FormRoot)` chain so these overrides reliably beat
+   FormRoot's `align-items: flex-start` regardless of stylesheet insertion
+   order between CSS Modules and the runtime-injected styled-components. */
+.wrapper__rpthW.wrapper__rpthW {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `max-width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  max-width: fit-content;
+  align-items: center;
+}
+
+.checkinput__oErG6 {
+  display: flex;
+  width: var(--click-checkbox-size-all);
+  height: var(--click-checkbox-size-all);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--checkbox-stroke-default);
+  border-radius: var(--click-checkbox-radii-all);
+  background: var(--checkbox-bg-default);
+  cursor: pointer;
+}
+
+.checkinput_variant_default__7KgZ1 {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-default-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-default-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-default-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-default-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-default-stroke-active);
+}
+
+.checkinput_variant_var1__dF7nF {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var1-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var1-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var1-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var1-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var1-stroke-active);
+}
+
+.checkinput_variant_var2__pHifP {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var2-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var2-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var2-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var2-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var2-stroke-active);
+}
+
+.checkinput_variant_var3__8KFg4 {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var3-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var3-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var3-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var3-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var3-stroke-active);
+}
+
+.checkinput_variant_var4__-C02i {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var4-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var4-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var4-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var4-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var4-stroke-active);
+}
+
+.checkinput_variant_var5__DuiuL {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var5-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var5-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var5-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var5-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var5-stroke-active);
+}
+
+.checkinput_variant_var6__DqZFO {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var6-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var6-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var6-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var6-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var6-stroke-active);
+}
+
+.checkinput__oErG6:hover {
+  background: var(--checkbox-bg-hover);
+}
+
+.checkinput__oErG6[data-state='checked'],
+.checkinput__oErG6[data-state='indeterminate'] {
+  border-color: var(--checkbox-stroke-active);
+  background: var(--checkbox-bg-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after checked/indeterminate to mirror the source cascade order;
+   matches the styled-components rule which used a nested `&[data-disabled]`
+   block placed after the state selectors. */
+.checkinput__oErG6[data-disabled] {
+  border-color: var(--click-checkbox-color-stroke-disabled);
+  background: var(--click-checkbox-color-background-disabled);
+  cursor: not-allowed;
+}
+
+.checkinput__oErG6[data-disabled][data-state='checked'],
+.checkinput__oErG6[data-disabled][data-state='indeterminate'] {
+  border-color: var(--click-checkbox-color-stroke-disabled);
+  background: var(--click-checkbox-color-background-disabled);
+}
+/* stylelint-enable no-descending-specificity */
+
+.checkicon__wvW5M {
+  color: var(--click-checkbox-color-check-active);
+}
+
+.checkicon__wvW5M[data-disabled] {
+  color: var(--click-checkbox-color-check-disabled);
+}

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

@@ -0,0 +1,25 @@
+const wrapper = "wrapper__rpthW";
+const checkinput = "checkinput__oErG6";
+const checkinput_variant_default = "checkinput_variant_default__7KgZ1";
+const checkinput_variant_var1 = "checkinput_variant_var1__dF7nF";
+const checkinput_variant_var2 = "checkinput_variant_var2__pHifP";
+const checkinput_variant_var3 = "checkinput_variant_var3__8KFg4";
+const checkinput_variant_var4 = "checkinput_variant_var4__-C02i";
+const checkinput_variant_var5 = "checkinput_variant_var5__DuiuL";
+const checkinput_variant_var6 = "checkinput_variant_var6__DqZFO";
+const checkicon = "checkicon__wvW5M";
+const styles = {
+	wrapper: wrapper,
+	checkinput: checkinput,
+	checkinput_variant_default: checkinput_variant_default,
+	checkinput_variant_var1: checkinput_variant_var1,
+	checkinput_variant_var2: checkinput_variant_var2,
+	checkinput_variant_var3: checkinput_variant_var3,
+	checkinput_variant_var4: checkinput_variant_var4,
+	checkinput_variant_var5: checkinput_variant_var5,
+	checkinput_variant_var6: checkinput_variant_var6,
+	checkicon: checkicon
+};
+
+export { checkicon, checkinput, checkinput_variant_default, checkinput_variant_var1, checkinput_variant_var2, checkinput_variant_var3, checkinput_variant_var4, checkinput_variant_var5, checkinput_variant_var6, styles as default, wrapper };
+//# sourceMappingURL=Checkbox.module.css.js.map

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

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

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

@@ -1,14 +1,30 @@
+import "./Checkbox.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import { useId } from 'react';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Checkbox.module.css.js';
+import { FormRoot } from '../FormContainer/FormRoot.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 import { GenericLabel } from '../GenericLabel/index.js';
-import { FormRoot } from '../FormContainer/FormRoot.js';
+import { cva } from 'class-variance-authority';
 
-const Wrapper = styled(FormRoot).withConfig({
-  componentId: "sc-1sck1ja-0"
-})(["align-items:center;max-width:fit-content;"]);
+const checkInputVariants = cva(styles.checkinput, {
+  variants: {
+    variant: {
+      default: styles["checkinput_variant_default"],
+      var1: styles["checkinput_variant_var1"],
+      var2: styles["checkinput_variant_var2"],
+      var3: styles["checkinput_variant_var3"],
+      var4: styles["checkinput_variant_var4"],
+      var5: styles["checkinput_variant_var5"],
+      var6: styles["checkinput_variant_var6"]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
 const Checkbox = ({
   id,
   label,
@@ -17,56 +33,27 @@ const Checkbox = ({
   orientation = "horizontal",
   dir = "end",
   checked,
+  className,
   ...delegated
 }) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
-    /* @__PURE__ */ jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant, disabled, "aria-label": `${label}`, checked, ...delegated, children: /* @__PURE__ */ jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
+  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, className: styles.wrapper, children: [
+    /* @__PURE__ */ jsx(RadixCheckbox.Root, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, checked, ...delegated, className: cn(checkInputVariants({
+      variant
+    }), className), children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: styles.checkicon, children: /* @__PURE__ */ jsx(
+      SvgImage,
+      {
+        name: checked === "indeterminate" ? "minus" : "check",
+        size: "sm",
+        ...checked === "indeterminate" ? {} : {
+          width: "0.8rem",
+          height: "0.8rem"
+        }
+      }
+    ) }) }),
     label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
-const CheckInput = styled(RadixCheckbox.Root).withConfig({
-  componentId: "sc-1sck1ja-1"
-})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;", ";"], ({
-  theme,
-  variant
-}) => `
-    border-radius: ${theme.click.checkbox.radii.all};
-    width: ${theme.click.checkbox.size.all};
-    height: ${theme.click.checkbox.size.all};
-    background: ${theme.click.checkbox.color.variations[variant].background.default};
-    border: 1px solid ${theme.click.checkbox.color.variations[variant].stroke.default};
-    cursor: pointer;
-
-    &:hover {
-      background: ${theme.click.checkbox.color.variations[variant].background.hover};
-    }
-    &[data-state="checked"],
-    &[data-state="indeterminate"] {
-      border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};
-      background: ${theme.click.checkbox.color.variations[variant].background.active};
-    }
-    &[data-disabled] {
-      background: ${theme.click.checkbox.color.background.disabled};
-      border-color: ${theme.click.checkbox.color.stroke.disabled};
-      cursor: not-allowed;
-      &[data-state="checked"],
-      &[data-state="indeterminate"] {
-        background: ${theme.click.checkbox.color.background.disabled};
-        border-color: ${theme.click.checkbox.color.stroke.disabled};
-      }
-    }
-  `);
-const CheckIconWrapper = styled(RadixCheckbox.Indicator).withConfig({
-  componentId: "sc-1sck1ja-2"
-})(["", ""], ({
-  theme
-}) => `
-    color: ${theme.click.checkbox.color.check.active};
-    &[data-disabled] {
-      color: ${theme.click.checkbox.color.check.disabled};
-    }
-  `);
 
 export { Checkbox };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { styled } from 'styled-components';\nimport { FormRoot } from '@/components/FormContainer';\nimport { CheckboxProps, CheckboxVariants } from './Checkbox.types';\n\nconst Wrapper = styled(FormRoot)`\n  align-items: center;\n  max-width: fit-content;\n`;\n\nexport const Checkbox = ({\n  id,\n  label,\n  variant = 'default',\n  disabled,\n  orientation = 'horizontal',\n  dir = 'end',\n  checked,\n  ...delegated\n}: CheckboxProps) => {\n  const defaultId = useId();\n  return (\n    <Wrapper\n      $orientation={orientation}\n      $dir={dir}\n    >\n      <CheckInput\n        id={id ?? defaultId}\n        data-testid=\"checkbox\"\n        variant={variant}\n        disabled={disabled}\n        aria-label={`${label}`}\n        checked={checked}\n        {...delegated}\n      >\n        <CheckIconWrapper>\n          <Icon\n            name={checked === 'indeterminate' ? 'minus' : 'check'}\n            size=\"sm\"\n          />\n        </CheckIconWrapper>\n      </CheckInput>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </Wrapper>\n  );\n};\n\nconst CheckInput = styled(RadixCheckbox.Root)<{\n  variant: CheckboxVariants;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n\n  ${({ theme, variant }) => `\n    border-radius: ${theme.click.checkbox.radii.all};\n    width: ${theme.click.checkbox.size.all};\n    height: ${theme.click.checkbox.size.all};\n    background: ${theme.click.checkbox.color.variations[variant].background.default};\n    border: 1px solid ${theme.click.checkbox.color.variations[variant].stroke.default};\n    cursor: pointer;\n\n    &:hover {\n      background: ${theme.click.checkbox.color.variations[variant].background.hover};\n    }\n    &[data-state=\"checked\"],\n    &[data-state=\"indeterminate\"] {\n      border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};\n      background: ${theme.click.checkbox.color.variations[variant].background.active};\n    }\n    &[data-disabled] {\n      background: ${theme.click.checkbox.color.background.disabled};\n      border-color: ${theme.click.checkbox.color.stroke.disabled};\n      cursor: not-allowed;\n      &[data-state=\"checked\"],\n      &[data-state=\"indeterminate\"] {\n        background: ${theme.click.checkbox.color.background.disabled};\n        border-color: ${theme.click.checkbox.color.stroke.disabled};\n      }\n    }\n  `};\n`;\n\nconst CheckIconWrapper = styled(RadixCheckbox.Indicator)`\n  ${({ theme }) => `\n    color: ${theme.click.checkbox.color.check.active};\n    &[data-disabled] {\n      color: ${theme.click.checkbox.color.check.disabled};\n    }\n  `}\n`;\n"],"names":["Wrapper","styled","FormRoot","withConfig","componentId","Checkbox","id","label","variant","disabled","orientation","dir","checked","delegated","defaultId","useId","Icon","CheckInput","RadixCheckbox","Root","theme","click","checkbox","radii","all","size","color","variations","background","default","stroke","hover","active","CheckIconWrapper","Indicator","check"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n  variants: {\n    variant: {\n      default: styles['checkinput_variant_default'],\n      var1: styles['checkinput_variant_var1'],\n      var2: styles['checkinput_variant_var2'],\n      var3: styles['checkinput_variant_var3'],\n      var4: styles['checkinput_variant_var4'],\n      var5: styles['checkinput_variant_var5'],\n      var6: styles['checkinput_variant_var6'],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const Checkbox = ({\n  id,\n  label,\n  variant = 'default',\n  disabled,\n  orientation = 'horizontal',\n  dir = 'end',\n  checked,\n  className,\n  ...delegated\n}: CheckboxProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      className={styles.wrapper}\n    >\n      <RadixCheckbox.Root\n        id={id ?? defaultId}\n        data-testid=\"checkbox\"\n        disabled={disabled}\n        aria-label={`${label}`}\n        checked={checked}\n        {...delegated}\n        className={cn(checkInputVariants({ variant }), className)}\n      >\n        <RadixCheckbox.Indicator className={styles.checkicon}>\n          <Icon\n            name={checked === 'indeterminate' ? 'minus' : 'check'}\n            size=\"sm\"\n            // The `check` glyph was scaled up 1.25x at the SVG level; render it\n            // here at 1rem / 1.25 = 0.8rem so the checkmark keeps its original\n            // size inside the box. `minus` (indeterminate) is unaffected.\n            {...(checked === 'indeterminate'\n              ? {}\n              : { width: '0.8rem', height: '0.8rem' })}\n          />\n        </RadixCheckbox.Indicator>\n      </RadixCheckbox.Root>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n"],"names":["checkInputVariants","cva","styles","checkinput","variants","variant","default","var1","var2","var3","var4","var5","var6","defaultVariants","Checkbox","id","label","disabled","orientation","dir","checked","className","delegated","defaultId","useId","wrapper","cn","checkicon","Icon","width","height"],"mappings":";;;;;;;;;;AAUA,MAAMA,kBAAAA,GAAqBC,GAAAA,CAAIC,MAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACPC,OAAAA,EAASJ,OAAO,4BAA4B,CAAA;AAAA,MAC5CK,IAAAA,EAAML,OAAO,yBAAyB,CAAA;AAAA,MACtCM,IAAAA,EAAMN,OAAO,yBAAyB,CAAA;AAAA,MACtCO,IAAAA,EAAMP,OAAO,yBAAyB,CAAA;AAAA,MACtCQ,IAAAA,EAAMR,OAAO,yBAAyB,CAAA;AAAA,MACtCS,IAAAA,EAAMT,OAAO,yBAAyB,CAAA;AAAA,MACtCU,IAAAA,EAAMV,OAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACAW,eAAAA,EAAiB;AAAA,IACfR,OAAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAMS,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAX,OAAAA,GAAU,SAAA;AAAA,EACVY,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,KAAAA,EAAM;AACxB,EAAA,uBACE,IAAA,CAAC,YACC,YAAA,EAAcN,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWjB,OAAOuB,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAc,IAAA,EAAd,EACC,IAAIV,EAAAA,IAAMQ,SAAAA,EACV,eAAY,UAAA,EACZ,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EACJ,SAAA,EAAWI,GAAG1B,kBAAAA,CAAmB;AAAA,MAAEK;AAAAA,KAAS,CAAA,EAAGgB,SAAS,CAAA,EAExD,QAAA,kBAAA,GAAA,CAAC,cAAc,SAAA,EAAd,EAAwB,SAAA,EAAWnB,MAAAA,CAAOyB,SAAAA,EACzC,QAAA,kBAAA,GAAA;AAAA,MAACC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAMR,OAAAA,KAAY,eAAA,GAAkB,OAAA,GAAU,OAAA;AAAA,QAC9C,IAAA,EAAK,IAAA;AAAA,QAIL,GAAKA,OAAAA,KAAY,eAAA,GACb,EAAC,GACD;AAAA,UAAES,KAAAA,EAAO,QAAA;AAAA,UAAUC,MAAAA,EAAQ;AAAA;AAAS;AAAA,OAE5C,CAAA,EACF,CAAA;AAAA,IACCd,yBACC,GAAA,CAAC,YAAA,EAAA,EACC,SAASD,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}