@clickhouse/click-ui 0.4.0 → 0.6.0-rc1

package/dist/cjs/components/ProgressBar/ProgressBar.css

@@ -0,0 +1,124 @@
+.progressbar__21KMf {
+  display: flex;
+  min-height: 2px;
+  padding-right: 0;
+  overflow: hidden;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--click-field-space-gap);
+  border: 1px solid var(--click-field-color-stroke-default);
+  border-radius: var(--click-field-radii-all);
+  background: linear-gradient(
+    var(--progress-grad-dir, to right),
+    var(--global-color-accent-default) 0%,
+    var(--global-color-accent-default) var(--progress),
+    var(--progress-bg, var(--click-field-color-background-default)) var(--progress),
+    var(--progress-bg, var(--click-field-color-background-default)) 100%
+  );
+  background-position: center;
+  background-size: calc(100% + 2px);
+  color: var(--global-color-accent-default);
+  font: var(--typography-styles-product-text-normal-sm);
+  transition: all 100ms ease-in-out;
+}
+
+.progressbar_orientation_vertical__0w-VB {
+  width: auto;
+  height: 100%;
+  flex-direction: column;
+}
+
+/* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so horizontal bars fill the available inline space. */
+.progressbar_orientation_horizontal__MJimN {
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+}
+/* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+
+.progressbar_orientation_horizontal__MJimN.progressbar_dir_start__xUm-Q {
+  --progress-grad-dir: to right;
+}
+
+.progressbar_orientation_horizontal__MJimN.progressbar_dir_end__iGTwK {
+  --progress-grad-dir: to left;
+}
+
+.progressbar_orientation_vertical__0w-VB.progressbar_dir_start__xUm-Q {
+  --progress-grad-dir: to bottom;
+}
+
+.progressbar_orientation_vertical__0w-VB.progressbar_dir_end__iGTwK {
+  --progress-grad-dir: to top;
+}
+
+.progressbar_type_default__B8jtt {
+  padding: 0.25rem var(--click-field-space-x);
+  padding-right: 0;
+}
+
+.progressbar_type_small__bcDiV {
+  padding: 0 var(--click-field-space-x);
+  padding-right: 0;
+}
+
+.progressbar_completed__XhK-p.progressbar_type_default__B8jtt {
+  background: var(--click-field-color-background-default);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar__21KMf:hover {
+  --progress-bg: var(--click-field-color-background-hover);
+
+  border: 1px solid var(--click-field-color-stroke-hover);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar_completed__XhK-p:hover {
+  background: var(--click-field-color-background-hover);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar__21KMf:focus,
+.progressbar__21KMf:focus-within {
+  --progress-bg: var(--click-field-color-background-active);
+
+  border: 1px solid var(--click-field-color-stroke-active);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progressbar_completed__XhK-p:focus,
+.progressbar_completed__XhK-p:focus-within {
+  background: var(--click-field-color-background-active);
+  background-position: center;
+  background-size: calc(100% + 2px);
+}
+
+.progresstext__RAf9Q {
+  width: 100%;
+  font: inherit;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
+     is widely supported on evergreen browsers; the original rule
+     used the same value to invert the text against the gradient fill. */
+  mix-blend-mode: difference;
+}
+
+.progressclosebutton__cGgfw {
+  visibility: hidden;
+  border: 0;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- mix-blend-mode
+     is widely supported on evergreen browsers; the original rule
+     used the same value to invert the close icon against the gradient fill. */
+  mix-blend-mode: difference;
+}
+
+.progressclosebutton_dismissable__p5mDJ {
+  visibility: visible;
+}

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

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const progressbar = "progressbar__21KMf";
+const progressbar_orientation_vertical = "progressbar_orientation_vertical__0w-VB";
+const progressbar_orientation_horizontal = "progressbar_orientation_horizontal__MJimN";
+const progressbar_dir_start = "progressbar_dir_start__xUm-Q";
+const progressbar_dir_end = "progressbar_dir_end__iGTwK";
+const progressbar_type_default = "progressbar_type_default__B8jtt";
+const progressbar_type_small = "progressbar_type_small__bcDiV";
+const progressbar_completed = "progressbar_completed__XhK-p";
+const progresstext = "progresstext__RAf9Q";
+const progressclosebutton = "progressclosebutton__cGgfw";
+const progressclosebutton_dismissable = "progressclosebutton_dismissable__p5mDJ";
+const styles = {
+	progressbar: progressbar,
+	progressbar_orientation_vertical: progressbar_orientation_vertical,
+	progressbar_orientation_horizontal: progressbar_orientation_horizontal,
+	progressbar_dir_start: progressbar_dir_start,
+	progressbar_dir_end: progressbar_dir_end,
+	progressbar_type_default: progressbar_type_default,
+	progressbar_type_small: progressbar_type_small,
+	progressbar_completed: progressbar_completed,
+	progresstext: progresstext,
+	progressclosebutton: progressclosebutton,
+	progressclosebutton_dismissable: progressclosebutton_dismissable
+};
+
+exports.default = styles;
+exports.progressbar = progressbar;
+exports.progressbar_completed = progressbar_completed;
+exports.progressbar_dir_end = progressbar_dir_end;
+exports.progressbar_dir_start = progressbar_dir_start;
+exports.progressbar_orientation_horizontal = progressbar_orientation_horizontal;
+exports.progressbar_orientation_vertical = progressbar_orientation_vertical;
+exports.progressbar_type_default = progressbar_type_default;
+exports.progressbar_type_small = progressbar_type_small;
+exports.progressclosebutton = progressclosebutton;
+exports.progressclosebutton_dismissable = progressclosebutton_dismissable;
+exports.progresstext = progresstext;
+//# sourceMappingURL=ProgressBar.module.css.cjs.map

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

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

package/dist/cjs/components/ProgressBar/index.cjs

@@ -1,72 +1,45 @@
+require("./ProgressBar.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 ProgressBar_module = require('./ProgressBar.module.css.cjs');
 const IconButton = require('../IconButton/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const getGradientDirection = (orientation, dir) => {
-  if (orientation === "vertical") {
-    return dir === "start" ? "to bottom" : "to top";
-  }
-  return dir === "start" ? "to right" : "to left";
-};
-const createGradient = (gradientDir, accentColor, bgColor) => `linear-gradient(${gradientDir}, ${accentColor} 0%, ${accentColor} var(--progress), ${bgColor} var(--progress), ${bgColor} 100%)`;
-const ProgressContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-16gr3cg-0"
-})(["display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:all 100ms ease-in-out;min-height:2px;", " ", ";"], ({
-  $orientation
-}) => $orientation === "vertical" ? `
-    flex-direction: column;
-    width: auto;
-    height: 100%;
-  ` : `
-    width: 100%;
-    width: -webkit-fill-available;
-    width: fill-available;
-    width: stretch;
-  `, ({
-  theme,
-  $completed,
-  $type,
-  $orientation,
-  $dir
-}) => {
-  const gradientDir = getGradientDirection($orientation, $dir);
-  return `
-    background: ${$completed && $type === "default" ? theme.click.field.color.background.default : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.default)};
-    background-size: calc(100% + 2px);
-    background-position: center;
-    gap: ${theme.click.field.space.gap};
-    border-radius: ${theme.click.field.radii.all};
-    font: ${theme.typography.styles.product.text.normal.sm};
-    padding: ${$type === "default" ? "0.25rem" : 0} ${theme.click.field.space.x};
-    padding-right: 0;
-    color: ${theme.global.color.accent.default};
-    border: 1px solid ${theme.click.field.color.stroke.default};
-    &:hover {
-      border: 1px solid ${theme.click.field.color.stroke.hover};
-      background: ${$completed ? theme.click.field.color.background.hover : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.hover)};
-      background-size: calc(100% + 2px);
-      background-position: center;
+const progressBarVariants = classVarianceAuthority.cva(ProgressBar_module.default.progressbar, {
+  variants: {
+    type: {
+      default: ProgressBar_module.default["progressbar_type_default"],
+      small: ProgressBar_module.default["progressbar_type_small"]
+    },
+    orientation: {
+      horizontal: ProgressBar_module.default["progressbar_orientation_horizontal"],
+      vertical: ProgressBar_module.default["progressbar_orientation_vertical"]
+    },
+    dir: {
+      start: ProgressBar_module.default["progressbar_dir_start"],
+      end: ProgressBar_module.default["progressbar_dir_end"]
+    },
+    completed: {
+      true: ProgressBar_module.default["progressbar_completed"]
     }
-    &:focus-within, &:focus {
-      border: 1px solid ${theme.click.field.color.stroke.active};
-      background: ${$completed ? theme.click.field.color.background.active : createGradient(gradientDir, theme.global.color.accent.default, theme.click.field.color.background.active)};
-      background-size: calc(100% + 2px);
-      background-position: center;
+  },
+  defaultVariants: {
+    type: "default",
+    orientation: "horizontal",
+    dir: "start"
+  }
+});
+const closeButtonVariants = classVarianceAuthority.cva(ProgressBar_module.default.progressclosebutton, {
+  variants: {
+    dismissable: {
+      true: ProgressBar_module.default["progressclosebutton_dismissable"]
     }
-  `;
+  }
 });
-const ProgressText = styledComponents.styled.span.withConfig({
-  componentId: "sc-16gr3cg-1"
-})(["width:100%;font:inherit;mix-blend-mode:difference;"]);
-const ProgressCloseButton = styledComponents.styled.button.withConfig({
-  componentId: "sc-16gr3cg-2"
-})(["mix-blend-mode:difference;border:0;visibility:", ";"], ({
-  $dismissable
-}) => $dismissable ? "visible" : "hidden");
 const ProgressBar = ({
   progress,
   type = "default",
@@ -75,23 +48,28 @@ const ProgressBar = ({
   successMessage,
   orientation = "horizontal",
   dir = "start",
+  className,
   ...props
 }) => {
   const completed = progress === 100;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    ProgressContainer,
+    "div",
     {
-      $completed: completed,
-      $type: type,
-      $orientation: orientation,
-      $dir: dir,
       style: {
         "--progress": `${progress}%`
       },
       ...props,
+      className: cva.cn(progressBarVariants({
+        type,
+        orientation,
+        dir,
+        completed
+      }), className),
       children: type === "default" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ProgressText, { $completed: completed, children: successMessage && completed ? successMessage : `${progress}%` }),
-        /* @__PURE__ */ jsxRuntime.jsx(ProgressCloseButton, { as: IconButton.IconButton, size: "sm", type: "ghost", icon: "cross", $dismissable: dismissable, onClick: onCancel, "data-testid": "progressbar-close" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: ProgressBar_module.default.progresstext, children: successMessage && completed ? successMessage : `${progress}%` }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { size: "sm", type: "ghost", icon: "cross", onClick: onCancel, "data-testid": "progressbar-close", className: closeButtonVariants({
+          dismissable
+        }) })
       ] })
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { IconButton } from '@/components/IconButton';\n\ninterface CommonProgressBarProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** The current progress value (0-100) */\n  progress: number;\n  /** Optional label to display */\n  label?: ReactNode;\n  /** Optional error message to display */\n  error?: ReactNode;\n  /** The orientation of the progress bar - horizontal fills width, vertical fills height */\n  orientation?: 'vertical' | 'horizontal';\n  /** The direction of progress fill - start fills from left/top, end fills from right/bottom */\n  dir?: 'start' | 'end';\n}\n\ninterface DefaultProgressBar extends CommonProgressBarProps {\n  /** The type of progress bar - \"default\" shows text and close button */\n  type?: 'default';\n  /** Message to display when progress reaches 100% */\n  successMessage?: ReactNode;\n}\n\ninterface SmallProgressBar extends CommonProgressBarProps {\n  /** The type of progress bar - \"small\" shows only the progress indicator */\n  type: 'small';\n  successMessage?: never;\n  dismissable?: never;\n  onCancel?: never;\n}\n\ninterface DismissableProgressBar {\n  /** When true, shows a close button to cancel the progress */\n  dismissable: true;\n  /** Callback function when the close button is clicked */\n  onCancel: () => void;\n}\n\ninterface NonDismissableProgressBar {\n  /** When false or undefined, the close button is hidden */\n  dismissable?: false;\n  onCancel?: never;\n}\n\nexport type ProgressBarProps =\n  | (DefaultProgressBar & (DismissableProgressBar | NonDismissableProgressBar))\n  | SmallProgressBar;\n\ntype Orientation = 'horizontal' | 'vertical';\ntype Direction = 'start' | 'end';\n\nconst getGradientDirection = (orientation: Orientation, dir: Direction): string => {\n  if (orientation === 'vertical') {\n    return dir === 'start' ? 'to bottom' : 'to top';\n  }\n  return dir === 'start' ? 'to right' : 'to left';\n};\n\nconst createGradient = (gradientDir: string, accentColor: string, bgColor: string) =>\n  `linear-gradient(${gradientDir}, ${accentColor} 0%, ${accentColor} var(--progress), ${bgColor} var(--progress), ${bgColor} 100%)`;\n\n// The tokens are copied from dataloading page and may need to change on the new component creation in figma\nconst ProgressContainer = styled.div<{\n  $completed: boolean;\n  $type: 'small' | 'default';\n  $orientation: Orientation;\n  $dir: Direction;\n}>`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  overflow: hidden;\n  transition: all 100ms ease-in-out;\n  min-height: 2px;\n  ${({ $orientation }) =>\n    $orientation === 'vertical'\n      ? `\n    flex-direction: column;\n    width: auto;\n    height: 100%;\n  `\n      : `\n    width: 100%;\n    width: -webkit-fill-available;\n    width: fill-available;\n    width: stretch;\n  `}\n  ${({ theme, $completed, $type, $orientation, $dir }) => {\n    const gradientDir = getGradientDirection($orientation, $dir);\n    return `\n    background: ${\n      $completed && $type === 'default'\n        ? theme.click.field.color.background.default\n        : createGradient(\n            gradientDir,\n            theme.global.color.accent.default,\n            theme.click.field.color.background.default\n          )\n    };\n    background-size: calc(100% + 2px);\n    background-position: center;\n    gap: ${theme.click.field.space.gap};\n    border-radius: ${theme.click.field.radii.all};\n    font: ${theme.typography.styles.product.text.normal.sm};\n    padding: ${$type === 'default' ? '0.25rem' : 0} ${theme.click.field.space.x};\n    padding-right: 0;\n    color: ${theme.global.color.accent.default};\n    border: 1px solid ${theme.click.field.color.stroke.default};\n    &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.hover};\n      background: ${\n        $completed\n          ? theme.click.field.color.background.hover\n          : createGradient(\n              gradientDir,\n              theme.global.color.accent.default,\n              theme.click.field.color.background.hover\n            )\n      };\n      background-size: calc(100% + 2px);\n      background-position: center;\n    }\n    &:focus-within, &:focus {\n      border: 1px solid ${theme.click.field.color.stroke.active};\n      background: ${\n        $completed\n          ? theme.click.field.color.background.active\n          : createGradient(\n              gradientDir,\n              theme.global.color.accent.default,\n              theme.click.field.color.background.active\n            )\n      };\n      background-size: calc(100% + 2px);\n      background-position: center;\n    }\n  `;\n  }};\n`;\n\nconst ProgressText = styled.span<{ $completed: boolean }>`\n  width: 100%;\n  font: inherit;\n  mix-blend-mode: difference;\n`;\n\nconst ProgressCloseButton = styled.button<{ $dismissable?: boolean }>`\n  mix-blend-mode: difference;\n  border: 0;\n  visibility: ${({ $dismissable }) => ($dismissable ? 'visible' : 'hidden')};\n`;\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <ProgressContainer\n      $completed={completed}\n      $type={type}\n      $orientation={orientation}\n      $dir={dir}\n      // Using a CSS variable avoids generating a new styled-components class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as React.CSSProperties\n      }\n      {...props}\n    >\n      {type === 'default' && (\n        <>\n          <ProgressText $completed={completed}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </ProgressText>\n          <ProgressCloseButton\n            as={IconButton}\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            $dismissable={dismissable}\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n          />\n        </>\n      )}\n    </ProgressContainer>\n  );\n};\n"],"names":["getGradientDirection","orientation","dir","createGradient","gradientDir","accentColor","bgColor","ProgressContainer","styled","div","withConfig","componentId","$orientation","theme","$completed","$type","$dir","click","field","color","background","default","global","accent","space","gap","radii","all","typography","styles","product","text","normal","sm","x","stroke","hover","active","ProgressText","span","ProgressCloseButton","button","$dismissable","ProgressBar","progress","type","dismissable","onCancel","successMessage","props","completed","jsx","jsxs","Fragment","IconButton"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { ProgressBarProps } from './ProgressBar.types';\nimport { IconButton } from '@/components/IconButton';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './ProgressBar.module.css';\n\nconst progressBarVariants = cva(styles.progressbar, {\n  variants: {\n    type: {\n      default: styles['progressbar_type_default'],\n      small: styles['progressbar_type_small'],\n    },\n    orientation: {\n      horizontal: styles['progressbar_orientation_horizontal'],\n      vertical: styles['progressbar_orientation_vertical'],\n    },\n    dir: {\n      start: styles['progressbar_dir_start'],\n      end: styles['progressbar_dir_end'],\n    },\n    completed: {\n      true: styles['progressbar_completed'],\n    },\n  },\n  defaultVariants: {\n    type: 'default',\n    orientation: 'horizontal',\n    dir: 'start',\n  },\n});\n\nconst closeButtonVariants = cva(styles.progressclosebutton, {\n  variants: {\n    dismissable: {\n      true: styles['progressclosebutton_dismissable'],\n    },\n  },\n});\n\nexport const ProgressBar = ({\n  progress,\n  type = 'default',\n  dismissable = false,\n  onCancel,\n  successMessage,\n  orientation = 'horizontal',\n  dir = 'start',\n  className,\n  ...props\n}: ProgressBarProps) => {\n  const completed = progress === 100;\n\n  return (\n    <div\n      // Using a CSS variable avoids generating a new class per progress value.\n      style={\n        {\n          '--progress': `${progress}%`,\n        } as CSSProperties\n      }\n      {...props}\n      className={cn(\n        progressBarVariants({ type, orientation, dir, completed }),\n        className\n      )}\n    >\n      {type === 'default' && (\n        <>\n          <span className={styles.progresstext}>\n            {successMessage && completed ? successMessage : `${progress}%`}\n          </span>\n          <IconButton\n            size=\"sm\"\n            type=\"ghost\"\n            icon=\"cross\"\n            onClick={onCancel}\n            data-testid=\"progressbar-close\"\n            className={closeButtonVariants({ dismissable })}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"names":["progressBarVariants","cva","styles","progressbar","variants","type","default","small","orientation","horizontal","vertical","dir","start","end","completed","true","defaultVariants","closeButtonVariants","progressclosebutton","dismissable","ProgressBar","progress","onCancel","successMessage","className","props","jsx","cn","jsxs","Fragment","progresstext","IconButton"],"mappings":";;;;;;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,0BAAAA,CAAIC,0BAAAA,CAAOC,WAAAA,EAAa;AAAA,EAClDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,2BAAO,0BAA0B,CAAA;AAAA,MAC1CK,KAAAA,EAAOL,2BAAO,wBAAwB;AAAA,KACxC;AAAA,IACAM,WAAAA,EAAa;AAAA,MACXC,UAAAA,EAAYP,2BAAO,oCAAoC,CAAA;AAAA,MACvDQ,QAAAA,EAAUR,2BAAO,kCAAkC;AAAA,KACrD;AAAA,IACAS,GAAAA,EAAK;AAAA,MACHC,KAAAA,EAAOV,2BAAO,uBAAuB,CAAA;AAAA,MACrCW,GAAAA,EAAKX,2BAAO,qBAAqB;AAAA,KACnC;AAAA,IACAY,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMb,2BAAO,uBAAuB;AAAA;AACtC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,SAAA;AAAA,IACNG,WAAAA,EAAa,YAAA;AAAA,IACbG,GAAAA,EAAK;AAAA;AAET,CAAC,CAAA;AAED,MAAMM,mBAAAA,GAAsBhB,0BAAAA,CAAIC,0BAAAA,CAAOgB,mBAAAA,EAAqB;AAAA,EAC1Dd,QAAAA,EAAU;AAAA,IACRe,WAAAA,EAAa;AAAA,MACXJ,IAAAA,EAAMb,2BAAO,iCAAiC;AAAA;AAChD;AAEJ,CAAC,CAAA;AAEM,MAAMkB,cAAcA,CAAC;AAAA,EAC1BC,QAAAA;AAAAA,EACAhB,IAAAA,GAAO,SAAA;AAAA,EACPc,WAAAA,GAAc,KAAA;AAAA,EACdG,QAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAf,WAAAA,GAAc,YAAA;AAAA,EACdG,GAAAA,GAAM,OAAA;AAAA,EACNa,SAAAA;AAAAA,EACA,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAMX,YAAYO,QAAAA,KAAa,GAAA;AAE/B,EAAA,uBACEK,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAGL,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,SAEEI,KAAAA;AAAAA,MACJ,SAAA,EAAWE,OACT3B,mBAAAA,CAAoB;AAAA,QAAEK,IAAAA;AAAAA,QAAMG,WAAAA;AAAAA,QAAaG,GAAAA;AAAAA,QAAKG;AAAAA,OAAW,GACzDU,SACF,CAAA;AAAA,MAECnB,QAAAA,EAAAA,IAAAA,KAAS,6BACRuB,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAAH,cAAA,CAAC,MAAA,EAAA,EAAK,WAAWxB,0BAAAA,CAAO4B,YAAAA,EACrBP,4BAAkBT,SAAAA,GAAYS,cAAAA,GAAiB,CAAA,EAAGF,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACAK,cAAA,CAACK,qBAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,IAAA,EAAK,OAAA,EACL,IAAA,EAAK,OAAA,EACL,OAAA,EAAST,QAAAA,EACT,aAAA,EAAY,mBAAA,EACZ,WAAWL,mBAAAA,CAAoB;AAAA,UAAEE;AAAAA,SAAa,CAAA,EAAE;AAAA,OAAA,EAEpD;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/cjs/components/Separator/Separator.css

@@ -0,0 +1,81 @@
+.separator__mz39H[data-orientation='horizontal'] {
+  width: 100%;
+  border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator__mz39H[data-orientation='vertical'] {
+  height: 100%;
+  border-right: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator_variant_horizontal-xs__SVTMS {
+  margin:
+    var(--click-separator-horizontal-space-y-xs)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-sm__aKMwO {
+  margin:
+    var(--click-separator-horizontal-space-y-sm)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-md__HRIoB {
+  margin:
+    var(--click-separator-horizontal-space-y-md)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-lg__phB0U {
+  margin:
+    var(--click-separator-horizontal-space-y-lg)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xl__z08Bu {
+  margin:
+    var(--click-separator-horizontal-space-y-xl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xxl__5sqqd {
+  margin:
+    var(--click-separator-horizontal-space-y-xxl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_vertical-xs__XN-Os {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xs);
+}
+
+.separator_variant_vertical-sm__ddV3R {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-sm);
+}
+
+.separator_variant_vertical-md__DlYM0 {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-md);
+}
+
+.separator_variant_vertical-lg__00SOr {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-lg);
+}
+
+.separator_variant_vertical-xl__0c4Od {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xl);
+}
+
+.separator_variant_vertical-xxl__H-EOx {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xxl);
+}

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const separator = "separator__mz39H";
+const styles = {
+	separator: separator,
+	"separator_variant_horizontal-xs": "separator_variant_horizontal-xs__SVTMS",
+	"separator_variant_horizontal-sm": "separator_variant_horizontal-sm__aKMwO",
+	"separator_variant_horizontal-md": "separator_variant_horizontal-md__HRIoB",
+	"separator_variant_horizontal-lg": "separator_variant_horizontal-lg__phB0U",
+	"separator_variant_horizontal-xl": "separator_variant_horizontal-xl__z08Bu",
+	"separator_variant_horizontal-xxl": "separator_variant_horizontal-xxl__5sqqd",
+	"separator_variant_vertical-xs": "separator_variant_vertical-xs__XN-Os",
+	"separator_variant_vertical-sm": "separator_variant_vertical-sm__ddV3R",
+	"separator_variant_vertical-md": "separator_variant_vertical-md__DlYM0",
+	"separator_variant_vertical-lg": "separator_variant_vertical-lg__00SOr",
+	"separator_variant_vertical-xl": "separator_variant_vertical-xl__0c4Od",
+	"separator_variant_vertical-xxl": "separator_variant_vertical-xxl__H-EOx"
+};
+
+exports.default = styles;
+exports.separator = separator;
+//# sourceMappingURL=Separator.module.css.cjs.map

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

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

package/dist/cjs/components/Separator/index.cjs

@@ -1,10 +1,13 @@
+require("./Separator.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
 const RadixSeparator = require('@radix-ui/react-separator');
+const cva = require('../../lib/cva.cjs');
+const Separator_module = require('./Separator.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -26,27 +29,32 @@ function _interopNamespace(e) {
 
 const RadixSeparator__namespace = /*#__PURE__*/_interopNamespace(RadixSeparator);
 
-const CUISeparator = styledComponents.styled(RadixSeparator__namespace.Root).withConfig({
-  componentId: "sc-ladr1y-0"
-})(["", ""], ({
-  theme,
-  size,
-  orientation
-}) => `
-    &[data-orientation="horizontal"] {
-      width: 100%;
-      border-top: 0.0625rem solid ${theme.click.separator.color.stroke.default};
-    }
-    &[data-orientation="vertical"] {
-      height: 100%;
-      border-right: 0.0625rem solid ${theme.click.separator.color.stroke.default};
+const separatorVariants = classVarianceAuthority.cva(Separator_module.default.separator, {
+  variants: {
+    variant: {
+      "horizontal-xs": Separator_module.default["separator_variant_horizontal-xs"],
+      "horizontal-sm": Separator_module.default["separator_variant_horizontal-sm"],
+      "horizontal-md": Separator_module.default["separator_variant_horizontal-md"],
+      "horizontal-lg": Separator_module.default["separator_variant_horizontal-lg"],
+      "horizontal-xl": Separator_module.default["separator_variant_horizontal-xl"],
+      "horizontal-xxl": Separator_module.default["separator_variant_horizontal-xxl"],
+      "vertical-xs": Separator_module.default["separator_variant_vertical-xs"],
+      "vertical-sm": Separator_module.default["separator_variant_vertical-sm"],
+      "vertical-md": Separator_module.default["separator_variant_vertical-md"],
+      "vertical-lg": Separator_module.default["separator_variant_vertical-lg"],
+      "vertical-xl": Separator_module.default["separator_variant_vertical-xl"],
+      "vertical-xxl": Separator_module.default["separator_variant_vertical-xxl"]
     }
-    margin: ${orientation === "horizontal" ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}` : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`}
-  `);
+  }
+});
 const Separator = ({
   orientation = "horizontal",
+  size,
+  className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(CUISeparator, { orientation, ...props });
+}) => /* @__PURE__ */ jsxRuntime.jsx(RadixSeparator__namespace.Root, { orientation, ...props, className: cva.cn(separatorVariants({
+  variant: `${orientation}-${size}`
+}), className) });
 
 exports.Separator = Separator;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport * as RadixSeparator from '@radix-ui/react-separator';\nimport { SeparatorProps } from './Separator.types';\nconst CUISeparator = styled(RadixSeparator.Root)<SeparatorProps>`\n  ${({ theme, size, orientation }) => `\n    &[data-orientation=\"horizontal\"] {\n      width: 100%;\n      border-top: 0.0625rem solid ${theme.click.separator.color.stroke.default};\n    }\n    &[data-orientation=\"vertical\"] {\n      height: 100%;\n      border-right: 0.0625rem solid ${theme.click.separator.color.stroke.default};\n    }\n    margin: ${\n      orientation === 'horizontal'\n        ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}`\n        : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`\n    }\n  `}\n`;\n\nexport const Separator = ({ orientation = 'horizontal', ...props }: SeparatorProps) => (\n  <CUISeparator\n    orientation={orientation}\n    {...props}\n  />\n);\n"],"names":["CUISeparator","styled","RadixSeparator","Root","withConfig","componentId","theme","size","orientation","click","separator","color","stroke","default","horizontal","space","y","x","all","vertical","Separator","props","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,YAAAA,GAAeC,uBAAAA,CAAOC,yBAAAA,CAAeC,IAAI,EAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC5C,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,IAAAA;AAAAA,EAAMC;AAAY,CAAA,KAAM;AAAA;AAAA;AAAA,kCAAA,EAGFF,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA,oCAAA,EAIxCP,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA;AAAA,YAAA,EAG1EL,gBAAgB,YAAA,GACZ,CAAA,EAAGF,KAAAA,CAAMG,KAAAA,CAAMC,UAAUI,UAAAA,CAAWC,KAAAA,CAAMC,CAAAA,CAAET,IAAI,CAAC,CAAA,CAAA,EAAID,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUI,WAAWC,KAAAA,CAAME,CAAAA,CAAEC,GAAG,CAAA,CAAA,GACjG,GAAGZ,KAAAA,CAAMG,KAAAA,CAAMC,SAAAA,CAAUS,QAAAA,CAASJ,MAAMC,CAAAA,CAAEE,GAAG,CAAA,CAAA,EAAIZ,KAAAA,CAAMG,MAAMC,SAAAA,CAAUS,QAAAA,CAASJ,MAAME,CAAAA,CAAEV,IAAI,CAAC,CAAA,CAAE;AAAA,EAAA,CAEtG,CAAA;AAGI,MAAMa,YAAYA,CAAC;AAAA,EAAEZ,WAAAA,GAAc,YAAA;AAAA,EAAc,GAAGa;AAAsB,CAAA,qBAC/EC,cAAA,CAAC,YAAA,EAAA,EACC,WAAA,EACA,GAAID,KAAAA,EAAM;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import * as RadixSeparator from '@radix-ui/react-separator';\nimport { cn, cva } from '@/lib/cva';\nimport { SeparatorProps } from './Separator.types';\nimport styles from './Separator.module.css';\n\nconst separatorVariants = cva(styles.separator, {\n  variants: {\n    variant: {\n      'horizontal-xs': styles['separator_variant_horizontal-xs'],\n      'horizontal-sm': styles['separator_variant_horizontal-sm'],\n      'horizontal-md': styles['separator_variant_horizontal-md'],\n      'horizontal-lg': styles['separator_variant_horizontal-lg'],\n      'horizontal-xl': styles['separator_variant_horizontal-xl'],\n      'horizontal-xxl': styles['separator_variant_horizontal-xxl'],\n      'vertical-xs': styles['separator_variant_vertical-xs'],\n      'vertical-sm': styles['separator_variant_vertical-sm'],\n      'vertical-md': styles['separator_variant_vertical-md'],\n      'vertical-lg': styles['separator_variant_vertical-lg'],\n      'vertical-xl': styles['separator_variant_vertical-xl'],\n      'vertical-xxl': styles['separator_variant_vertical-xxl'],\n    },\n  },\n});\n\nexport const Separator = ({\n  orientation = 'horizontal',\n  size,\n  className,\n  ...props\n}: SeparatorProps) => (\n  <RadixSeparator.Root\n    orientation={orientation}\n    {...props}\n    className={cn(separatorVariants({ variant: `${orientation}-${size}` }), className)}\n  />\n);\n"],"names":["separatorVariants","cva","styles","separator","variants","variant","Separator","orientation","size","className","props","jsx","RadixSeparator","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,iBAAAA,GAAoBC,0BAAAA,CAAIC,wBAAAA,CAAOC,SAAAA,EAAW;AAAA,EAC9CC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACP,eAAA,EAAiBH,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,yBAAO,iCAAiC,CAAA;AAAA,MACzD,gBAAA,EAAkBA,yBAAO,kCAAkC,CAAA;AAAA,MAC3D,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,yBAAO,+BAA+B,CAAA;AAAA,MACrD,cAAA,EAAgBA,yBAAO,gCAAgC;AAAA;AACzD;AAEJ,CAAC,CAAA;AAEM,MAAMI,YAAYA,CAAC;AAAA,EACxBC,WAAAA,GAAc,YAAA;AAAA,EACdC,IAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACW,CAAA,qBACdC,cAAA,CAACC,0BAAe,IAAA,EAAf,EACC,aACA,GAAIF,KAAAA,EACJ,SAAA,EAAWG,MAAAA,CAAGb,iBAAAA,CAAkB;AAAA,EAAEK,OAAAA,EAAS,CAAA,EAAGE,WAAW,CAAA,CAAA,EAAIC,IAAI,CAAA;AAAG,CAAC,CAAA,EAAGC,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/Spacer/Spacer.css

@@ -0,0 +1,28 @@
+.spacer__okdOd {
+  display: flex;
+  background: transparent;
+}
+
+.spacer_size_xs__-oP-2 {
+  padding: var(--click-spacer-horizontal-space-y-xs) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_sm__k6iFW {
+  padding: var(--click-spacer-horizontal-space-y-sm) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_md__rX0x5 {
+  padding: var(--click-spacer-horizontal-space-y-md) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_lg__PWKa0 {
+  padding: var(--click-spacer-horizontal-space-y-lg) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_xl__IrjcH {
+  padding: var(--click-spacer-horizontal-space-y-xl) var(--click-spacer-horizontal-space-x-all);
+}
+
+.spacer_size_xxl__upvXv {
+  padding: var(--click-spacer-horizontal-space-y-xxl) var(--click-spacer-horizontal-space-x-all);
+}

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const spacer = "spacer__okdOd";
+const spacer_size_xs = "spacer_size_xs__-oP-2";
+const spacer_size_sm = "spacer_size_sm__k6iFW";
+const spacer_size_md = "spacer_size_md__rX0x5";
+const spacer_size_lg = "spacer_size_lg__PWKa0";
+const spacer_size_xl = "spacer_size_xl__IrjcH";
+const spacer_size_xxl = "spacer_size_xxl__upvXv";
+const styles = {
+	spacer: spacer,
+	spacer_size_xs: spacer_size_xs,
+	spacer_size_sm: spacer_size_sm,
+	spacer_size_md: spacer_size_md,
+	spacer_size_lg: spacer_size_lg,
+	spacer_size_xl: spacer_size_xl,
+	spacer_size_xxl: spacer_size_xxl
+};
+
+exports.default = styles;
+exports.spacer = spacer;
+exports.spacer_size_lg = spacer_size_lg;
+exports.spacer_size_md = spacer_size_md;
+exports.spacer_size_sm = spacer_size_sm;
+exports.spacer_size_xl = spacer_size_xl;
+exports.spacer_size_xs = spacer_size_xs;
+exports.spacer_size_xxl = spacer_size_xxl;
+//# sourceMappingURL=Spacer.module.css.cjs.map

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

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