@clickhouse/click-ui 0.6.0 → 0.6.1-rc2

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

@@ -0,0 +1,72 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const header = "header__Cn2aH";
+const description = "description__4EWfD";
+const cardicon = "cardicon__VX2fX";
+const contentwrapper = "contentwrapper__u9SOr";
+const contentwrapper_size_md = "contentwrapper_size_md__lNQPZ";
+const contentwrapper_size_sm = "contentwrapper_size_sm__GDVYr";
+const icontextcontentwrapper = "icontextcontentwrapper__D6gbe";
+const icontextcontentwrapper_alignment_top = "icontextcontentwrapper_alignment_top__rsOIa";
+const icontextcontentwrapper_alignment_center = "icontextcontentwrapper_alignment_center__GiQqi";
+const icontextcontentwrapper_size_md = "icontextcontentwrapper_size_md__vl0h-";
+const icontextcontentwrapper_size_sm = "icontextcontentwrapper_size_sm__VNsIL";
+const wrapper = "wrapper__gPLR5";
+const wrapper_color_default = "wrapper_color_default__cSCG8";
+const wrapper_color_muted = "wrapper_color_muted__DFlsG";
+const wrapper_alignment_top = "wrapper_alignment_top__QcYt3";
+const wrapper_alignment_center = "wrapper_alignment_center__X8Sjf";
+const wrapper_size_md = "wrapper_size_md__cIFpL";
+const wrapper_size_sm = "wrapper_size_sm__alRqs";
+const wrapper_selectable = "wrapper_selectable__shWc3";
+const wrapper_selected = "wrapper_selected__FUouc";
+const wrapper_disabled = "wrapper_disabled__QRVx8";
+const styles = {
+	header: header,
+	description: description,
+	cardicon: cardicon,
+	contentwrapper: contentwrapper,
+	contentwrapper_size_md: contentwrapper_size_md,
+	contentwrapper_size_sm: contentwrapper_size_sm,
+	icontextcontentwrapper: icontextcontentwrapper,
+	icontextcontentwrapper_alignment_top: icontextcontentwrapper_alignment_top,
+	icontextcontentwrapper_alignment_center: icontextcontentwrapper_alignment_center,
+	icontextcontentwrapper_size_md: icontextcontentwrapper_size_md,
+	icontextcontentwrapper_size_sm: icontextcontentwrapper_size_sm,
+	wrapper: wrapper,
+	wrapper_color_default: wrapper_color_default,
+	wrapper_color_muted: wrapper_color_muted,
+	wrapper_alignment_top: wrapper_alignment_top,
+	wrapper_alignment_center: wrapper_alignment_center,
+	wrapper_size_md: wrapper_size_md,
+	wrapper_size_sm: wrapper_size_sm,
+	wrapper_selectable: wrapper_selectable,
+	wrapper_selected: wrapper_selected,
+	wrapper_disabled: wrapper_disabled
+};
+
+exports.cardicon = cardicon;
+exports.contentwrapper = contentwrapper;
+exports.contentwrapper_size_md = contentwrapper_size_md;
+exports.contentwrapper_size_sm = contentwrapper_size_sm;
+exports.default = styles;
+exports.description = description;
+exports.header = header;
+exports.icontextcontentwrapper = icontextcontentwrapper;
+exports.icontextcontentwrapper_alignment_center = icontextcontentwrapper_alignment_center;
+exports.icontextcontentwrapper_alignment_top = icontextcontentwrapper_alignment_top;
+exports.icontextcontentwrapper_size_md = icontextcontentwrapper_size_md;
+exports.icontextcontentwrapper_size_sm = icontextcontentwrapper_size_sm;
+exports.wrapper = wrapper;
+exports.wrapper_alignment_center = wrapper_alignment_center;
+exports.wrapper_alignment_top = wrapper_alignment_top;
+exports.wrapper_color_default = wrapper_color_default;
+exports.wrapper_color_muted = wrapper_color_muted;
+exports.wrapper_disabled = wrapper_disabled;
+exports.wrapper_selectable = wrapper_selectable;
+exports.wrapper_selected = wrapper_selected;
+exports.wrapper_size_md = wrapper_size_md;
+exports.wrapper_size_sm = wrapper_size_sm;
+//# sourceMappingURL=CardHorizontal.module.css.cjs.map

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

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

package/dist/cjs/components/CardHorizontal/index.cjs

@@ -1,110 +1,74 @@
+require("./CardHorizontal.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const CardHorizontal_module = require('./CardHorizontal.module.css.cjs');
+const Icon = require('../Icon/index.cjs');
 const Container = require('../Container/index.cjs');
 const Badge = require('../Badge/index.cjs');
 const Button = require('../Button/index.cjs');
-const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const Header = styledComponents.styled.div.withConfig({
-  componentId: "sc-1qnbjoa-0"
-})(["max-width:100%;gap:inherit;"]);
-const Description = styledComponents.styled.div.withConfig({
-  componentId: "sc-1qnbjoa-1"
-})(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
-  theme
-}) => theme.click.card.horizontal.space.md.gap);
-const Wrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1qnbjoa-2"
-})(["display:inline-flex;width:100%;max-width:100%;align-items:", ";align-self:", ";justify-content:flex-start;", ""], ({
-  $alignment
-}) => $alignment === "top" ? "flex-start" : "center", ({
-  $alignment
-}) => $alignment === "top" ? "stretch" : "auto", ({
-  theme,
-  $color,
-  $size,
-  $isSelected,
-  $isSelectable,
-  $disabled
-}) => `
-    background: ${theme.click.card.horizontal[$color].color.background.default};
-    color: ${theme.click.card.horizontal[$color].color.title.default};
-    border-radius: ${theme.click.card.horizontal.radii.all};
-    border: 1px solid ${theme.click.card.horizontal[$color].color.stroke[$isSelectable ? $isSelected ? "active" : "hover" : "default"]};
-     padding: ${$size === "md" ? `${theme.click.card.horizontal.space.md.y} ${theme.click.card.horizontal.space.md.x}` : `${theme.click.card.horizontal.space.sm.y} ${theme.click.card.horizontal.space.sm.x}`};
-    font: ${theme.click.card.horizontal.typography.title.default};
-    ${Description} {
-      color: ${theme.click.card.horizontal[$color].color.description.default};
-      font: ${theme.click.card.horizontal.typography.description.default};
+const wrapperVariants = classVarianceAuthority.cva(CardHorizontal_module.default.wrapper, {
+  variants: {
+    color: {
+      default: CardHorizontal_module.default["wrapper_color_default"],
+      muted: CardHorizontal_module.default["wrapper_color_muted"]
+    },
+    size: {
+      sm: CardHorizontal_module.default["wrapper_size_sm"],
+      md: CardHorizontal_module.default["wrapper_size_md"]
+    },
+    alignment: {
+      center: CardHorizontal_module.default["wrapper_alignment_center"],
+      top: CardHorizontal_module.default["wrapper_alignment_top"]
+    },
+    selectable: {
+      true: CardHorizontal_module.default["wrapper_selectable"]
+    },
+    selected: {
+      true: CardHorizontal_module.default["wrapper_selected"]
+    },
+    disabled: {
+      true: CardHorizontal_module.default["wrapper_disabled"]
     }
-    &:hover{
-      background-color: ${theme.click.card.horizontal[$color].color.background[$isSelectable ? "hover" : "default"]};
-      color: ${theme.click.card.horizontal[$color].color.title[$isSelectable ? "hover" : "default"]};
-      border: 1px solid ${theme.click.card.horizontal[$color].color.stroke[$isSelectable ? $isSelected ? "active" : "default" : "default"]};
-      cursor: ${$isSelectable ? "pointer" : "default"};
-      font: ${theme.click.card.horizontal.typography.title.hover};
-      ${Description} {
-        color: ${theme.click.card.horizontal[$color].color.description[$isSelectable ? "hover" : "default"]};
-        font: ${theme.click.card.horizontal.typography.description[$isSelectable ? "hover" : "default"]};
-      }
+  },
+  defaultVariants: {
+    color: "default",
+    size: "md",
+    alignment: "center"
+  }
+});
+const contentWrapperVariants = classVarianceAuthority.cva(CardHorizontal_module.default.contentwrapper, {
+  variants: {
+    size: {
+      sm: CardHorizontal_module.default["contentwrapper_size_sm"],
+      md: CardHorizontal_module.default["contentwrapper_size_md"]
     }
-
-    &:active, &:focus, &:focus-within {
-      background-color: ${theme.click.card.horizontal[$color].color.background[$isSelectable ? "active" : "default"]};
-      color: ${theme.click.card.horizontal[$color].color.title[$isSelectable ? "active" : "default"]};
-      border: 1px solid ${theme.click.card.horizontal[$color].color.stroke[$isSelectable ? "active" : "default"]};
-      ${Description} {
-        color: ${theme.click.card.horizontal[$color].color.description[$isSelectable ? "active" : "default"]};
-        font: ${theme.click.card.horizontal.typography.description[$isSelectable ? "active" : "default"]};
-      }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const iconTextContentWrapperVariants = classVarianceAuthority.cva(CardHorizontal_module.default.icontextcontentwrapper, {
+  variants: {
+    size: {
+      sm: CardHorizontal_module.default["icontextcontentwrapper_size_sm"],
+      md: CardHorizontal_module.default["icontextcontentwrapper_size_md"]
+    },
+    alignment: {
+      center: CardHorizontal_module.default["icontextcontentwrapper_alignment_center"],
+      top: CardHorizontal_module.default["icontextcontentwrapper_alignment_top"]
     }
-    ${$disabled ? `
-          pointer-events: none;
-          &,
-          &:hover,
-          &:active, &:focus, &:focus-within {
-            background-color: ${theme.click.card.horizontal[$color].color.background.disabled};
-            color: ${theme.click.card.horizontal[$color].color.title.disabled};
-            border: 1px solid ${theme.click.card.horizontal[$color].color.stroke[$isSelected ? "active" : "disabled"]};
-            cursor: not-allowed;
-            ${Description} {
-              color: ${theme.click.card.horizontal[$color].color.description.disabled};
-              font: ${theme.click.card.horizontal.typography.description.disabled};
-            }
-          },
-          &:active, &:focus, &:focus-within {
-            border: 1px solid ${theme.click.card.horizontal[$color].color.stroke.active};
-          }
-        ` : ""}
-  `);
-const CardIcon = styledComponents.styled(Icon.Icon).withConfig({
-  componentId: "sc-1qnbjoa-3"
-})(["", ""], ({
-  theme
-}) => `
-      height: ${theme.click.card.horizontal.icon.size.all};
-      width: ${theme.click.card.horizontal.icon.size.all};
-  `);
-const ContentWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1qnbjoa-4"
-})(["display:flex;flex-direction:row;width:100%;gap:", ";@media (max-width:", "){flex-direction:column;}"], ({
-  theme,
-  $size
-}) => $size === "md" ? theme.click.card.horizontal.space.md.gap : theme.click.card.horizontal.space.sm.gap, ({
-  theme
-}) => theme.breakpoint.sizes.md);
-const IconTextContentWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1qnbjoa-5"
-})(["display:flex;flex-direction:row;align-items:", ";width:100%;gap:", ";"], ({
-  $alignment
-}) => $alignment === "top" ? "flex-start" : "center", ({
-  theme,
-  $size
-}) => $size === "md" ? theme.click.card.horizontal.space.md.gap : theme.click.card.horizontal.space.sm.gap);
+  },
+  defaultVariants: {
+    size: "md",
+    alignment: "center"
+  }
+});
 const CardHorizontal = ({
   title,
   icon,
@@ -123,6 +87,7 @@ const CardHorizontal = ({
   badgeIcon,
   badgeIconDir,
   onButtonClick,
+  className,
   ...props
 }) => {
   const handleClick = (e) => {
@@ -137,16 +102,28 @@ const CardHorizontal = ({
       window.open(infoUrl, "_blank");
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { $disabled: disabled, $isSelected: isSelected, $isSelectable: isSelectable, $color: color, $size: size, $alignment: alignment, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: handleClick, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { $size: size, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(IconTextContentWrapper, { $size: size, $alignment: alignment, children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx(CardIcon, { name: icon, "aria-hidden": true }),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: handleClick, ...props, className: cva.cn(wrapperVariants({
+    color,
+    size,
+    alignment,
+    selectable: isSelectable,
+    selected: isSelected,
+    disabled
+  }), className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(contentWrapperVariants({
+    size
+  })), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(iconTextContentWrapperVariants({
+      size,
+      alignment
+    })), children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "aria-hidden": true, className: CardHorizontal_module.default.cardicon }),
       /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { padding: "none", orientation: "vertical", children: [
-        title && /* @__PURE__ */ jsxRuntime.jsxs(Header, { as: Container.Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
+        title && /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { className: CardHorizontal_module.default.header, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
           /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
           badgeText && /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
         ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }),
-        children && /* @__PURE__ */ jsxRuntime.jsx(Description, { children })
+        description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardHorizontal_module.default.description, children: description }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardHorizontal_module.default.description, children })
       ] })
     ] }),
     infoText && /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-button", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { label: infoText, onClick: handleClick, disabled, fillWidth: true }) })

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/CardHorizontal/CardHorizontal.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { Badge } from '@/components/Badge';\nimport { Button } from '@/components/Button';\nimport { Container } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport {\n  CardHorizontalProps,\n  CardSize,\n  CardColor,\n  CardAlignment,\n} from './CardHorizontal.types';\n\nconst Header = styled.div`\n  max-width: 100%;\n  gap: inherit;\n`;\n\nconst Description = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: start;\n  gap: ${({ theme }) => theme.click.card.horizontal.space.md.gap};\n  flex: 1;\n  width: 100%;\n`;\n\nconst Wrapper = styled.div<{\n  $hasShadow?: boolean;\n  $disabled?: boolean;\n  $isSelected?: boolean;\n  $isSelectable?: boolean;\n  $color: CardColor;\n  $size?: CardSize;\n  $alignment: CardAlignment;\n}>`\n  display: inline-flex;\n  width: 100%;\n  max-width: 100%;\n  align-items: ${({ $alignment }) => ($alignment === 'top' ? 'flex-start' : 'center')};\n  align-self: ${({ $alignment }) => ($alignment === 'top' ? 'stretch' : 'auto')};\n  justify-content: flex-start;\n\n  ${({ theme, $color, $size, $isSelected, $isSelectable, $disabled }) => `\n    background: ${theme.click.card.horizontal[$color].color.background.default};\n    color: ${theme.click.card.horizontal[$color].color.title.default};\n    border-radius: ${theme.click.card.horizontal.radii.all};\n    border: 1px solid ${\n      theme.click.card.horizontal[$color].color.stroke[\n        $isSelectable ? ($isSelected ? 'active' : 'hover') : 'default'\n      ]\n    };\n     padding: ${\n       $size === 'md'\n         ? `${theme.click.card.horizontal.space.md.y} ${theme.click.card.horizontal.space.md.x}`\n         : `${theme.click.card.horizontal.space.sm.y} ${theme.click.card.horizontal.space.sm.x}`\n     };\n    font: ${theme.click.card.horizontal.typography.title.default};\n    ${Description} {\n      color: ${theme.click.card.horizontal[$color].color.description.default};\n      font: ${theme.click.card.horizontal.typography.description.default};\n    }\n    &:hover{\n      background-color: ${\n        theme.click.card.horizontal[$color].color.background[\n          $isSelectable ? 'hover' : 'default'\n        ]\n      };\n      color: ${\n        theme.click.card.horizontal[$color].color.title[\n          $isSelectable ? 'hover' : 'default'\n        ]\n      };\n      border: 1px solid ${\n        theme.click.card.horizontal[$color].color.stroke[\n          $isSelectable ? ($isSelected ? 'active' : 'default') : 'default'\n        ]\n      };\n      cursor: ${$isSelectable ? 'pointer' : 'default'};\n      font: ${theme.click.card.horizontal.typography.title.hover};\n      ${Description} {\n        color: ${\n          theme.click.card.horizontal[$color].color.description[\n            $isSelectable ? 'hover' : 'default'\n          ]\n        };\n        font: ${\n          theme.click.card.horizontal.typography.description[\n            $isSelectable ? 'hover' : 'default'\n          ]\n        };\n      }\n    }\n\n    &:active, &:focus, &:focus-within {\n      background-color: ${\n        theme.click.card.horizontal[$color].color.background[\n          $isSelectable ? 'active' : 'default'\n        ]\n      };\n      color: ${\n        theme.click.card.horizontal[$color].color.title[\n          $isSelectable ? 'active' : 'default'\n        ]\n      };\n      border: 1px solid ${\n        theme.click.card.horizontal[$color].color.stroke[\n          $isSelectable ? 'active' : 'default'\n        ]\n      };\n      ${Description} {\n        color: ${\n          theme.click.card.horizontal[$color].color.description[\n            $isSelectable ? 'active' : 'default'\n          ]\n        };\n        font: ${\n          theme.click.card.horizontal.typography.description[\n            $isSelectable ? 'active' : 'default'\n          ]\n        };\n      }\n    }\n    ${\n      $disabled\n        ? `\n          pointer-events: none;\n          &,\n          &:hover,\n          &:active, &:focus, &:focus-within {\n            background-color: ${\n              theme.click.card.horizontal[$color].color.background.disabled\n            };\n            color: ${theme.click.card.horizontal[$color].color.title.disabled};\n            border: 1px solid ${\n              theme.click.card.horizontal[$color].color.stroke[\n                $isSelected ? 'active' : 'disabled'\n              ]\n            };\n            cursor: not-allowed;\n            ${Description} {\n              color: ${theme.click.card.horizontal[$color].color.description.disabled};\n              font: ${theme.click.card.horizontal.typography.description.disabled};\n            }\n          },\n          &:active, &:focus, &:focus-within {\n            border: 1px solid ${theme.click.card.horizontal[$color].color.stroke.active};\n          }\n        `\n        : ''\n    }\n  `}\n`;\n\nconst CardIcon = styled(Icon)`\n  ${({ theme }) => `\n      height: ${theme.click.card.horizontal.icon.size.all};\n      width: ${theme.click.card.horizontal.icon.size.all};\n  `}\n`;\n\nconst ContentWrapper = styled.div<{ $size: CardSize }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: ${({ theme, $size }) =>\n    $size === 'md'\n      ? theme.click.card.horizontal.space.md.gap\n      : theme.click.card.horizontal.space.sm.gap};\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {\n    flex-direction: column;\n  }\n`;\n\nconst IconTextContentWrapper = styled.div<{ $size: CardSize; $alignment: CardAlignment }>`\n  display: flex;\n  flex-direction: row;\n  align-items: ${({ $alignment }) => ($alignment === 'top' ? 'flex-start' : 'center')};\n  width: 100%;\n  gap: ${({ theme, $size }) =>\n    $size === 'md'\n      ? theme.click.card.horizontal.space.md.gap\n      : theme.click.card.horizontal.space.sm.gap};\n`;\n\nexport const CardHorizontal = ({\n  title,\n  icon,\n  description,\n  disabled = false,\n  infoText,\n  infoUrl,\n  isSelected,\n  isSelectable = infoText ? false : true,\n  children,\n  color = 'default',\n  size = 'md',\n  alignment = 'center',\n  badgeText,\n  badgeState,\n  badgeIcon,\n  badgeIconDir,\n  onButtonClick,\n  ...props\n}: CardHorizontalProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n  return (\n    <Wrapper\n      $disabled={disabled}\n      $isSelected={isSelected}\n      $isSelectable={isSelectable}\n      $color={color}\n      $size={size}\n      $alignment={alignment}\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={handleClick}\n      {...props}\n    >\n      <ContentWrapper $size={size}>\n        <IconTextContentWrapper\n          $size={size}\n          $alignment={alignment}\n        >\n          {icon && (\n            <CardIcon\n              name={icon}\n              aria-hidden\n            />\n          )}\n          <Container\n            padding=\"none\"\n            orientation=\"vertical\"\n          >\n            {title && (\n              <Header\n                as={Container}\n                isResponsive={false}\n                gap=\"xs\"\n                justifyContent=\"space-between\"\n                fillWidth\n              >\n                <Container\n                  orientation=\"horizontal\"\n                  gap=\"xs\"\n                  isResponsive={false}\n                  fillWidth={false}\n                  grow=\"1\"\n                >\n                  {title}\n                </Container>\n                {badgeText && (\n                  <Container\n                    isResponsive={false}\n                    justifyContent=\"end\"\n                    fillWidth={false}\n                    data-testid=\"horizontal-card-badge\"\n                  >\n                    <Badge\n                      text={badgeText}\n                      size=\"md\"\n                      state={badgeState}\n                      icon={badgeIcon}\n                      iconDir={badgeIconDir}\n                    />\n                  </Container>\n                )}\n              </Header>\n            )}\n\n            {description && <Description>{description}</Description>}\n            {children && <Description>{children}</Description>}\n          </Container>\n        </IconTextContentWrapper>\n        {infoText && (\n          <Container\n            justifyContent=\"end\"\n            fillWidth={false}\n            data-testid=\"horizontal-card-button\"\n          >\n            <Button\n              label={infoText}\n              onClick={handleClick}\n              disabled={disabled}\n              fillWidth\n            />\n          </Container>\n        )}\n      </ContentWrapper>\n    </Wrapper>\n  );\n};\n"],"names":["Header","styled","div","withConfig","componentId","Description","theme","click","card","horizontal","space","md","gap","Wrapper","$alignment","$color","$size","$isSelected","$isSelectable","$disabled","color","background","default","title","radii","all","stroke","y","x","sm","typography","description","hover","disabled","active","CardIcon","Icon","icon","size","ContentWrapper","breakpoint","sizes","IconTextContentWrapper","CardHorizontal","infoText","infoUrl","isSelected","isSelectable","children","alignment","badgeText","badgeState","badgeIcon","badgeIconDir","onButtonClick","props","handleClick","e","preventDefault","length","window","open","jsx","jsxs","Container","Badge","Button"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CardHorizontal/CardHorizontal.tsx"],"sourcesContent":["import { Badge } from '@/components/Badge';\nimport { Button } from '@/components/Button';\nimport { Container } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { CardHorizontalProps } from './CardHorizontal.types';\nimport styles from './CardHorizontal.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    color: {\n      default: styles['wrapper_color_default'],\n      muted: styles['wrapper_color_muted'],\n    },\n    size: {\n      sm: styles['wrapper_size_sm'],\n      md: styles['wrapper_size_md'],\n    },\n    alignment: {\n      center: styles['wrapper_alignment_center'],\n      top: styles['wrapper_alignment_top'],\n    },\n    selectable: {\n      true: styles['wrapper_selectable'],\n    },\n    selected: {\n      true: styles['wrapper_selected'],\n    },\n    disabled: {\n      true: styles['wrapper_disabled'],\n    },\n  },\n  defaultVariants: {\n    color: 'default',\n    size: 'md',\n    alignment: 'center',\n  },\n});\n\nconst contentWrapperVariants = cva(styles.contentwrapper, {\n  variants: {\n    size: {\n      sm: styles['contentwrapper_size_sm'],\n      md: styles['contentwrapper_size_md'],\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\nconst iconTextContentWrapperVariants = cva(styles.icontextcontentwrapper, {\n  variants: {\n    size: {\n      sm: styles['icontextcontentwrapper_size_sm'],\n      md: styles['icontextcontentwrapper_size_md'],\n    },\n    alignment: {\n      center: styles['icontextcontentwrapper_alignment_center'],\n      top: styles['icontextcontentwrapper_alignment_top'],\n    },\n  },\n  defaultVariants: { size: 'md', alignment: 'center' },\n});\n\nexport const CardHorizontal = ({\n  title,\n  icon,\n  description,\n  disabled = false,\n  infoText,\n  infoUrl,\n  isSelected,\n  isSelectable = infoText ? false : true,\n  children,\n  color = 'default',\n  size = 'md',\n  alignment = 'center',\n  badgeText,\n  badgeState,\n  badgeIcon,\n  badgeIconDir,\n  onButtonClick,\n  className,\n  ...props\n}: CardHorizontalProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n  return (\n    <div\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={handleClick}\n      {...props}\n      className={cn(\n        wrapperVariants({\n          color,\n          size,\n          alignment,\n          selectable: isSelectable,\n          selected: isSelected,\n          disabled,\n        }),\n        className\n      )}\n    >\n      <div className={cn(contentWrapperVariants({ size }))}>\n        <div className={cn(iconTextContentWrapperVariants({ size, alignment }))}>\n          {icon && (\n            <Icon\n              name={icon}\n              aria-hidden\n              className={styles.cardicon}\n            />\n          )}\n          <Container\n            padding=\"none\"\n            orientation=\"vertical\"\n          >\n            {title && (\n              <Container\n                className={styles.header}\n                isResponsive={false}\n                gap=\"xs\"\n                justifyContent=\"space-between\"\n                fillWidth\n              >\n                <Container\n                  orientation=\"horizontal\"\n                  gap=\"xs\"\n                  isResponsive={false}\n                  fillWidth={false}\n                  grow=\"1\"\n                >\n                  {title}\n                </Container>\n                {badgeText && (\n                  <Container\n                    isResponsive={false}\n                    justifyContent=\"end\"\n                    fillWidth={false}\n                    data-testid=\"horizontal-card-badge\"\n                  >\n                    <Badge\n                      text={badgeText}\n                      size=\"md\"\n                      state={badgeState}\n                      icon={badgeIcon}\n                      iconDir={badgeIconDir}\n                    />\n                  </Container>\n                )}\n              </Container>\n            )}\n\n            {description && <div className={styles.description}>{description}</div>}\n            {children && <div className={styles.description}>{children}</div>}\n          </Container>\n        </div>\n        {infoText && (\n          <Container\n            justifyContent=\"end\"\n            fillWidth={false}\n            data-testid=\"horizontal-card-button\"\n          >\n            <Button\n              label={infoText}\n              onClick={handleClick}\n              disabled={disabled}\n              fillWidth\n            />\n          </Container>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","color","default","muted","size","sm","md","alignment","center","top","selectable","true","selected","disabled","defaultVariants","contentWrapperVariants","contentwrapper","iconTextContentWrapperVariants","icontextcontentwrapper","CardHorizontal","title","icon","description","infoText","infoUrl","isSelected","isSelectable","children","badgeText","badgeState","badgeIcon","badgeIconDir","onButtonClick","className","props","handleClick","e","preventDefault","length","window","open","jsx","cn","jsxs","Icon","cardicon","Container","header","Badge","Button"],"mappings":"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"}

package/dist/cjs/components/CardPrimary/CardPrimary.css

@@ -0,0 +1,182 @@
+.wrapper__zCfLE {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  flex-direction: column;
+  border: 1px solid var(--click-card-primary-color-stroke-default);
+  border-radius: var(--click-card-primary-radii-all);
+  background-color: var(--click-card-primary-color-background-default);
+  text-align: center;
+}
+
+.wrapper_align_start__37pdg {
+  text-align: left;
+}
+
+.wrapper_align_center__37eoU {
+  text-align: center;
+}
+
+.wrapper_align_end__xbC8w {
+  text-align: right;
+}
+
+.wrapper_size_md__tu4Nx {
+  padding: var(--click-card-primary-space-md-x) var(--click-card-primary-space-md-y);
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.wrapper_size_sm__8H2nS {
+  padding: var(--click-card-primary-space-sm-x) var(--click-card-primary-space-sm-y);
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.wrapper_shadow__6Yg0s {
+  box-shadow: var(--shadow-1);
+}
+
+.wrapper_selected__eO9y0 {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+.wrapper__zCfLE:hover,
+.wrapper__zCfLE:focus {
+  background-color: var(--click-card-secondary-color-background-hover);
+  cursor: pointer;
+}
+
+.wrapper__zCfLE:hover button,
+.wrapper__zCfLE:focus button {
+  border-color: var(--click-button-basic-color-primary-stroke-hover);
+  background-color: var(--click-button-basic-color-primary-background-hover);
+}
+
+.wrapper__zCfLE:hover button:active,
+.wrapper__zCfLE:focus button:active {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  background-color: var(--click-button-basic-color-primary-background-active);
+}
+
+.wrapper__zCfLE:active {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/active to mirror the source cascade order;
+   pointer-events:none prevents the hover/active rules from applying when disabled. */
+.wrapper__zCfLE[aria-disabled='true'],
+.wrapper__zCfLE[aria-disabled='true']:hover,
+.wrapper__zCfLE[aria-disabled='true']:focus,
+.wrapper__zCfLE[aria-disabled='true']:active {
+  border: 1px solid var(--click-card-primary-color-stroke-disabled);
+  background-color: var(--click-card-primary-color-background-disabled);
+  color: var(--click-card-primary-color-title-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__zCfLE[aria-disabled='true'] button,
+.wrapper__zCfLE[aria-disabled='true']:hover button,
+.wrapper__zCfLE[aria-disabled='true']:focus button,
+.wrapper__zCfLE[aria-disabled='true']:active button,
+.wrapper__zCfLE[aria-disabled='true'] button:active,
+.wrapper__zCfLE[aria-disabled='true']:hover button:active,
+.wrapper__zCfLE[aria-disabled='true']:focus button:active,
+.wrapper__zCfLE[aria-disabled='true']:active button:active {
+  border-color: var(--click-button-basic-color-primary-stroke-disabled);
+  background-color: var(--click-button-basic-color-primary-background-disabled);
+}
+/* stylelint-enable no-descending-specificity */
+
+.header__8rODG {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header_align_start__M1I-O {
+  align-items: flex-start;
+}
+
+.header_align_center__BztmN {
+  align-items: center;
+}
+
+.header_align_end__3XI7U {
+  align-items: flex-end;
+}
+
+.header_size_md__VoWrw {
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.header__8rODG.header_size_md__VoWrw svg,
+.header__8rODG.header_size_md__VoWrw img {
+  width: var(--click-card-primary-size-icon-md-all);
+  height: var(--click-card-primary-size-icon-md-all);
+}
+
+.header_size_sm__voZ7g {
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.header__8rODG.header_size_sm__voZ7g svg,
+.header__8rODG.header_size_sm__voZ7g img {
+  width: var(--click-card-primary-size-icon-sm-all);
+  height: var(--click-card-primary-size-icon-sm-all);
+}
+
+.header__8rODG.header__8rODG h3 {
+  color: var(--click-global-color-text-default);
+}
+
+.header__8rODG.header_disabled__SJxQn h3 {
+  color: var(--click-global-color-text-muted);
+}
+
+.content__zhXwY {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  align-self: center;
+}
+
+.content_align_start__T730K {
+  align-self: flex-start;
+}
+
+.content_align_center__zIpiO {
+  align-self: center;
+}
+
+.content_align_end__L62bf {
+  align-self: flex-end;
+}
+
+.content_size_md__MrRdD {
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.content_size_sm__fy4p3 {
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.topbadgewrapper__uA9pl {
+  position: relative;
+}
+
+.topbadge__E79OZ {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.topbadge_selected__zrz5r {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+div:active + .topbadge__E79OZ {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}

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

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const wrapper = "wrapper__zCfLE";
+const wrapper_align_start = "wrapper_align_start__37pdg";
+const wrapper_align_center = "wrapper_align_center__37eoU";
+const wrapper_align_end = "wrapper_align_end__xbC8w";
+const wrapper_size_md = "wrapper_size_md__tu4Nx";
+const wrapper_size_sm = "wrapper_size_sm__8H2nS";
+const wrapper_shadow = "wrapper_shadow__6Yg0s";
+const wrapper_selected = "wrapper_selected__eO9y0";
+const header = "header__8rODG";
+const header_align_start = "header_align_start__M1I-O";
+const header_align_center = "header_align_center__BztmN";
+const header_align_end = "header_align_end__3XI7U";
+const header_size_md = "header_size_md__VoWrw";
+const header_size_sm = "header_size_sm__voZ7g";
+const header_disabled = "header_disabled__SJxQn";
+const content = "content__zhXwY";
+const content_align_start = "content_align_start__T730K";
+const content_align_center = "content_align_center__zIpiO";
+const content_align_end = "content_align_end__L62bf";
+const content_size_md = "content_size_md__MrRdD";
+const content_size_sm = "content_size_sm__fy4p3";
+const topbadgewrapper = "topbadgewrapper__uA9pl";
+const topbadge = "topbadge__E79OZ";
+const topbadge_selected = "topbadge_selected__zrz5r";
+const styles = {
+	wrapper: wrapper,
+	wrapper_align_start: wrapper_align_start,
+	wrapper_align_center: wrapper_align_center,
+	wrapper_align_end: wrapper_align_end,
+	wrapper_size_md: wrapper_size_md,
+	wrapper_size_sm: wrapper_size_sm,
+	wrapper_shadow: wrapper_shadow,
+	wrapper_selected: wrapper_selected,
+	header: header,
+	header_align_start: header_align_start,
+	header_align_center: header_align_center,
+	header_align_end: header_align_end,
+	header_size_md: header_size_md,
+	header_size_sm: header_size_sm,
+	header_disabled: header_disabled,
+	content: content,
+	content_align_start: content_align_start,
+	content_align_center: content_align_center,
+	content_align_end: content_align_end,
+	content_size_md: content_size_md,
+	content_size_sm: content_size_sm,
+	topbadgewrapper: topbadgewrapper,
+	topbadge: topbadge,
+	topbadge_selected: topbadge_selected
+};
+
+exports.content = content;
+exports.content_align_center = content_align_center;
+exports.content_align_end = content_align_end;
+exports.content_align_start = content_align_start;
+exports.content_size_md = content_size_md;
+exports.content_size_sm = content_size_sm;
+exports.default = styles;
+exports.header = header;
+exports.header_align_center = header_align_center;
+exports.header_align_end = header_align_end;
+exports.header_align_start = header_align_start;
+exports.header_disabled = header_disabled;
+exports.header_size_md = header_size_md;
+exports.header_size_sm = header_size_sm;
+exports.topbadge = topbadge;
+exports.topbadge_selected = topbadge_selected;
+exports.topbadgewrapper = topbadgewrapper;
+exports.wrapper = wrapper;
+exports.wrapper_align_center = wrapper_align_center;
+exports.wrapper_align_end = wrapper_align_end;
+exports.wrapper_align_start = wrapper_align_start;
+exports.wrapper_selected = wrapper_selected;
+exports.wrapper_shadow = wrapper_shadow;
+exports.wrapper_size_md = wrapper_size_md;
+exports.wrapper_size_sm = wrapper_size_sm;
+//# sourceMappingURL=CardPrimary.module.css.cjs.map

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

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