@clickhouse/click-ui 0.5.0 → 0.6.0-rc1

package/dist/esm/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/esm/components/ProgressBar/ProgressBar.module.css.js

@@ -0,0 +1,27 @@
+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
+};
+
+export { styles as default, progressbar, progressbar_completed, progressbar_dir_end, progressbar_dir_start, progressbar_orientation_horizontal, progressbar_orientation_vertical, progressbar_type_default, progressbar_type_small, progressclosebutton, progressclosebutton_dismissable, progresstext };
+//# sourceMappingURL=ProgressBar.module.css.js.map

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

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

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

@@ -1,68 +1,41 @@
+import "./ProgressBar.css";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './ProgressBar.module.css.js';
 import { IconButton } from '../IconButton/index.js';
+import { cva } from '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 = 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 = cva(styles.progressbar, {
+  variants: {
+    type: {
+      default: styles["progressbar_type_default"],
+      small: styles["progressbar_type_small"]
+    },
+    orientation: {
+      horizontal: styles["progressbar_orientation_horizontal"],
+      vertical: styles["progressbar_orientation_vertical"]
+    },
+    dir: {
+      start: styles["progressbar_dir_start"],
+      end: styles["progressbar_dir_end"]
+    },
+    completed: {
+      true: styles["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 = cva(styles.progressclosebutton, {
+  variants: {
+    dismissable: {
+      true: styles["progressclosebutton_dismissable"]
     }
-  `;
+  }
 });
-const ProgressText = styled.span.withConfig({
-  componentId: "sc-16gr3cg-1"
-})(["width:100%;font:inherit;mix-blend-mode:difference;"]);
-const ProgressCloseButton = styled.button.withConfig({
-  componentId: "sc-16gr3cg-2"
-})(["mix-blend-mode:difference;border:0;visibility:", ";"], ({
-  $dismissable
-}) => $dismissable ? "visible" : "hidden");
 const ProgressBar = ({
   progress,
   type = "default",
@@ -71,23 +44,28 @@ const ProgressBar = ({
   successMessage,
   orientation = "horizontal",
   dir = "start",
+  className,
   ...props
 }) => {
   const completed = progress === 100;
   return /* @__PURE__ */ jsx(
-    ProgressContainer,
+    "div",
     {
-      $completed: completed,
-      $type: type,
-      $orientation: orientation,
-      $dir: dir,
       style: {
         "--progress": `${progress}%`
       },
       ...props,
+      className: cn(progressBarVariants({
+        type,
+        orientation,
+        dir,
+        completed
+      }), className),
       children: type === "default" && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ProgressText, { $completed: completed, children: successMessage && completed ? successMessage : `${progress}%` }),
-        /* @__PURE__ */ jsx(ProgressCloseButton, { as: IconButton, size: "sm", type: "ghost", icon: "cross", $dismissable: dismissable, onClick: onCancel, "data-testid": "progressbar-close" })
+        /* @__PURE__ */ jsx("span", { className: styles.progresstext, children: successMessage && completed ? successMessage : `${progress}%` }),
+        /* @__PURE__ */ jsx(IconButton, { size: "sm", type: "ghost", icon: "cross", onClick: onCancel, "data-testid": "progressbar-close", className: closeButtonVariants({
+          dismissable
+        }) })
       ] })
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","IconButton"],"mappings":"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"}
+{"version":3,"file":"index.js","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","cn","progresstext"],"mappings":";;;;;;AAMA,MAAMA,mBAAAA,GAAsBC,GAAAA,CAAIC,MAAAA,CAAOC,WAAAA,EAAa;AAAA,EAClDC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAASJ,OAAO,0BAA0B,CAAA;AAAA,MAC1CK,KAAAA,EAAOL,OAAO,wBAAwB;AAAA,KACxC;AAAA,IACAM,WAAAA,EAAa;AAAA,MACXC,UAAAA,EAAYP,OAAO,oCAAoC,CAAA;AAAA,MACvDQ,QAAAA,EAAUR,OAAO,kCAAkC;AAAA,KACrD;AAAA,IACAS,GAAAA,EAAK;AAAA,MACHC,KAAAA,EAAOV,OAAO,uBAAuB,CAAA;AAAA,MACrCW,GAAAA,EAAKX,OAAO,qBAAqB;AAAA,KACnC;AAAA,IACAY,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMb,OAAO,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,GAAAA,CAAIC,MAAAA,CAAOgB,mBAAAA,EAAqB;AAAA,EAC1Dd,QAAAA,EAAU;AAAA,IACRe,WAAAA,EAAa;AAAA,MACXJ,IAAAA,EAAMb,OAAO,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,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAEC,KAAA,EACE;AAAA,QACE,YAAA,EAAc,GAAGA,QAAQ,CAAA,CAAA;AAAA,OAC3B;AAAA,SAEEI,KAAAA;AAAAA,MACJ,SAAA,EAAWC,GACT1B,mBAAAA,CAAoB;AAAA,QAAEK,IAAAA;AAAAA,QAAMG,WAAAA;AAAAA,QAAaG,GAAAA;AAAAA,QAAKG;AAAAA,OAAW,GACzDU,SACF,CAAA;AAAA,MAECnB,QAAAA,EAAAA,IAAAA,KAAS,6BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,WAAWH,MAAAA,CAAOyB,YAAAA,EACrBJ,4BAAkBT,SAAAA,GAAYS,cAAAA,GAAiB,CAAA,EAAGF,QAAQ,CAAA,CAAA,CAAA,EAC7D,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EACC,IAAA,EAAK,IAAA,EACL,IAAA,EAAK,OAAA,EACL,IAAA,EAAK,OAAA,EACL,OAAA,EAASC,QAAAA,EACT,aAAA,EAAY,mBAAA,EACZ,WAAWL,mBAAAA,CAAoB;AAAA,UAAEE;AAAAA,SAAa,CAAA,EAAE;AAAA,OAAA,EAEpD;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/esm/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/esm/components/Separator/Separator.module.css.js

@@ -0,0 +1,19 @@
+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"
+};
+
+export { styles as default, separator };
+//# sourceMappingURL=Separator.module.css.js.map

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

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

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

@@ -1,28 +1,36 @@
+import "./Separator.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
 import * as RadixSeparator from '@radix-ui/react-separator';
+import { cn } from '../../lib/cva.js';
+import styles from './Separator.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const CUISeparator = styled(RadixSeparator.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 = cva(styles.separator, {
+  variants: {
+    variant: {
+      "horizontal-xs": styles["separator_variant_horizontal-xs"],
+      "horizontal-sm": styles["separator_variant_horizontal-sm"],
+      "horizontal-md": styles["separator_variant_horizontal-md"],
+      "horizontal-lg": styles["separator_variant_horizontal-lg"],
+      "horizontal-xl": styles["separator_variant_horizontal-xl"],
+      "horizontal-xxl": styles["separator_variant_horizontal-xxl"],
+      "vertical-xs": styles["separator_variant_vertical-xs"],
+      "vertical-sm": styles["separator_variant_vertical-sm"],
+      "vertical-md": styles["separator_variant_vertical-md"],
+      "vertical-lg": styles["separator_variant_vertical-lg"],
+      "vertical-xl": styles["separator_variant_vertical-xl"],
+      "vertical-xxl": styles["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__ */ jsx(CUISeparator, { orientation, ...props });
+}) => /* @__PURE__ */ jsx(RadixSeparator.Root, { orientation, ...props, className: cn(separatorVariants({
+  variant: `${orientation}-${size}`
+}), className) });
 
 export { Separator };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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"],"mappings":";;;;AAGA,MAAMA,YAAAA,GAAeC,MAAAA,CAAOC,cAAAA,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/E,GAAA,CAAC,YAAA,EAAA,EACC,WAAA,EACA,GAAIA,KAAAA,EAAM;;;;"}
+{"version":3,"file":"index.js","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","cn"],"mappings":";;;;;;AAKA,MAAMA,iBAAAA,GAAoBC,GAAAA,CAAIC,MAAAA,CAAOC,SAAAA,EAAW;AAAA,EAC9CC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACP,eAAA,EAAiBH,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,eAAA,EAAiBA,OAAO,iCAAiC,CAAA;AAAA,MACzD,gBAAA,EAAkBA,OAAO,kCAAkC,CAAA;AAAA,MAC3D,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,aAAA,EAAeA,OAAO,+BAA+B,CAAA;AAAA,MACrD,cAAA,EAAgBA,OAAO,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,qBACd,GAAA,CAAC,eAAe,IAAA,EAAf,EACC,aACA,GAAIA,KAAAA,EACJ,SAAA,EAAWC,EAAAA,CAAGX,iBAAAA,CAAkB;AAAA,EAAEK,OAAAA,EAAS,CAAA,EAAGE,WAAW,CAAA,CAAA,EAAIC,IAAI,CAAA;AAAG,CAAC,CAAA,EAAGC,SAAS,CAAA,EAAE;;;;"}

package/dist/esm/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/esm/components/Spacer/Spacer.module.css.js

@@ -0,0 +1,19 @@
+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
+};
+
+export { styles as default, spacer, spacer_size_lg, spacer_size_md, spacer_size_sm, spacer_size_xl, spacer_size_xs, spacer_size_xxl };
+//# sourceMappingURL=Spacer.module.css.js.map

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

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

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

@@ -1,15 +1,29 @@
+import "./Spacer.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Spacer.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const CUISpacer = styled.div.withConfig({
-  componentId: "sc-6ga865-0"
-})(["background:transparent;display:flex;padding:", ";"], ({
-  theme,
-  $size = "md"
-}) => `${theme.click.spacer.horizontal.space.y[$size]} ${theme.click.spacer.horizontal.space.x.all}`);
+const spacerVariants = cva(styles.spacer, {
+  variants: {
+    size: {
+      xs: styles["spacer_size_xs"],
+      sm: styles["spacer_size_sm"],
+      md: styles["spacer_size_md"],
+      lg: styles["spacer_size_lg"],
+      xl: styles["spacer_size_xl"],
+      xxl: styles["spacer_size_xxl"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const Spacer = ({
   size
-}) => /* @__PURE__ */ jsx(CUISpacer, { $size: size });
+}) => /* @__PURE__ */ jsx("div", { className: cn(spacerVariants({
+  size
+})) });
 
 export { Spacer };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SpacerProps, SizeType } from './Spacer.types';\n\nconst CUISpacer = styled.div<{\n  $size?: SizeType;\n}>`\n  background: transparent;\n  display: flex;\n  padding: ${({ theme, $size = 'md' }) =>\n    `${theme.click.spacer.horizontal.space.y[$size]} ${theme.click.spacer.horizontal.space.x.all}`};\n`;\n\nexport const Spacer = ({ size }: SpacerProps) => <CUISpacer $size={size} />;\n"],"names":["CUISpacer","styled","div","withConfig","componentId","theme","$size","click","spacer","horizontal","space","y","x","all","Spacer","size"],"mappings":";;;AAGA,MAAMA,SAAAA,GAAYC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,8CAAA,EAAA,GAAA,GAKf,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,KAAAA,GAAQ;AAAK,CAAA,KAChC,GAAGD,KAAAA,CAAME,KAAAA,CAAMC,MAAAA,CAAOC,UAAAA,CAAWC,MAAMC,CAAAA,CAAEL,KAAK,CAAC,CAAA,CAAA,EAAID,MAAME,KAAAA,CAAMC,MAAAA,CAAOC,WAAWC,KAAAA,CAAME,CAAAA,CAAEC,GAAG,CAAA,CAAE,CAAA;AAG3F,MAAMC,SAASA,CAAC;AAAA,EAAEC;AAAkB,CAAA,qBAAM,GAAA,CAAC,SAAA,EAAA,EAAU,KAAA,EAAOA,IAAAA,EAAK;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Spacer/Spacer.tsx"],"sourcesContent":["import { cn, cva } from '@/lib/cva';\nimport { SpacerProps } from './Spacer.types';\nimport styles from './Spacer.module.css';\n\nconst spacerVariants = cva(styles.spacer, {\n  variants: {\n    size: {\n      xs: styles['spacer_size_xs'],\n      sm: styles['spacer_size_sm'],\n      md: styles['spacer_size_md'],\n      lg: styles['spacer_size_lg'],\n      xl: styles['spacer_size_xl'],\n      xxl: styles['spacer_size_xxl'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nexport const Spacer = ({ size }: SpacerProps) => (\n  <div className={cn(spacerVariants({ size }))} />\n);\n"],"names":["spacerVariants","cva","styles","spacer","variants","size","xs","sm","md","lg","xl","xxl","defaultVariants","Spacer","cn"],"mappings":";;;;;AAIA,MAAMA,cAAAA,GAAiBC,GAAAA,CAAIC,MAAAA,CAAOC,MAAAA,EAAQ;AAAA,EACxCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,gBAAgB,CAAA;AAAA,MAC3BK,EAAAA,EAAIL,OAAO,gBAAgB,CAAA;AAAA,MAC3BM,EAAAA,EAAIN,OAAO,gBAAgB,CAAA;AAAA,MAC3BO,EAAAA,EAAIP,OAAO,gBAAgB,CAAA;AAAA,MAC3BQ,EAAAA,EAAIR,OAAO,gBAAgB,CAAA;AAAA,MAC3BS,GAAAA,EAAKT,OAAO,iBAAiB;AAAA;AAC/B,GACF;AAAA,EACAU,eAAAA,EAAiB;AAAA,IACfP,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAEM,MAAMQ,SAASA,CAAC;AAAA,EAAER;AAAkB,CAAA,qBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWS,EAAAA,CAAGd,cAAAA,CAAe;AAAA,EAAEK;AAAK,CAAC,CAAC,CAAA,EAAE;;;;"}