@clickhouse/click-ui 0.6.0 → 0.6.1-rc1

package/dist/cjs/components/Link/index.cjs

@@ -1,25 +1,49 @@
+require("./Link.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
-const common = require('./common.cjs');
+const cva = require('../../lib/cva.cjs');
+const Link_module = require('./Link.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const CuiLink = styledComponents.styled.a.withConfig({
-  componentId: "sc-1bwz77u-0"
-})(["", ""], common.linkStyles);
-const IconWrapper = styledComponents.styled.span.withConfig({
-  componentId: "sc-1bwz77u-1"
-})([".external-icon{height:", ";width:", ";}"], ({
-  $size,
-  theme
-}) => $size === "xs" || $size === "sm" ? theme.click.link.icon.size.sm.height : theme.click.link.icon.size.md.height, ({
-  $size,
-  theme
-}) => $size === "xs" || $size === "sm" ? theme.click.link.icon.size.sm.width : theme.click.link.icon.size.md.width);
+const linkVariants = classVarianceAuthority.cva(Link_module.default.link, {
+  variants: {
+    size: {
+      xs: Link_module.default["link_size_xs"],
+      sm: Link_module.default["link_size_sm"],
+      md: Link_module.default["link_size_md"],
+      lg: Link_module.default["link_size_lg"]
+    },
+    weight: {
+      normal: Link_module.default["link_weight_normal"],
+      medium: Link_module.default["link_weight_medium"],
+      semibold: Link_module.default["link_weight_semibold"],
+      bold: Link_module.default["link_weight_bold"],
+      mono: Link_module.default["link_weight_mono"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    weight: "normal"
+  }
+});
+const externalIconVariants = classVarianceAuthority.cva("", {
+  variants: {
+    size: {
+      xs: Link_module.default["external-icon_size_xs"],
+      sm: Link_module.default["external-icon_size_sm"],
+      md: Link_module.default["external-icon_size_md"],
+      lg: Link_module.default["external-icon_size_lg"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const _Link = ({
   size = "md",
   weight = "normal",
@@ -27,11 +51,20 @@ const _Link = ({
   icon,
   children,
   component,
+  className,
   ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsxs(CuiLink, { ref, $size: size, $weight: weight, as: component ?? "a", onClick, ...props, children: [
-  children,
-  icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { $size: size, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: "external-icon", "data-testid": icon }) })
-] });
+}, ref) => {
+  const Component = component ?? "a";
+  return /* @__PURE__ */ jsxRuntime.jsxs(Component, { ref, onClick, ...props, className: cva.cn(linkVariants({
+    size,
+    weight
+  }), className), children: [
+    children,
+    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, className: cva.cn("external-icon", externalIconVariants({
+      size
+    })), "data-testid": icon }) })
+  ] });
+};
 const Link = react.forwardRef(_Link);
 
 exports.Link = Link;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { styled } from 'styled-components';\nimport { linkStyles } from './common';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst CuiLink = styled.a<{ $size: TextSize; $weight: TextWeight }>`\n  ${linkStyles}\n`;\n\nconst IconWrapper = styled.span<{ $size: TextSize }>`\n  .external-icon {\n    height: ${({ $size, theme }) =>\n      $size === 'xs' || $size === 'sm'\n        ? theme.click.link.icon.size.sm.height\n        : theme.click.link.icon.size.md.height};\n    width: ${({ $size, theme }) =>\n      $size === 'xs' || $size === 'sm'\n        ? theme.click.link.icon.size.sm.width\n        : theme.click.link.icon.size.md.width};\n  }\n`;\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof T> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    ...props\n  }: Omit<ComponentProps<T>, keyof T> & LinkProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <CuiLink\n    ref={ref}\n    $size={size}\n    $weight={weight}\n    as={component ?? 'a'}\n    onClick={onClick}\n    {...props}\n  >\n    {children}\n    {icon && (\n      <IconWrapper $size={size}>\n        <Icon\n          name={icon}\n          className=\"external-icon\"\n          data-testid={icon}\n        />\n      </IconWrapper>\n    )}\n  </CuiLink>\n);\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["CuiLink","styled","a","withConfig","componentId","linkStyles","IconWrapper","span","$size","theme","click","link","icon","size","sm","height","md","width","_Link","weight","onClick","children","component","props","ref","jsxs","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;AA6BA,MAAMA,OAAAA,GAAUC,uBAAAA,CAAOC,CAAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACpBC,iBAAU,CAAA;AAGd,MAAMC,WAAAA,GAAcL,uBAAAA,CAAOM,IAAAA,CAAIJ,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,wBAAA,EAAA,SAAA,EAAA,IAAA,GAEjB,CAAC;AAAA,EAAEI,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KACxBD,UAAU,IAAA,IAAQA,KAAAA,KAAU,OACxBC,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,IAAAA,CAAKC,IAAAA,CAAKC,EAAAA,CAAGC,MAAAA,GAC9BN,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,KAAKC,IAAAA,CAAKG,EAAAA,CAAGD,QAC3B,CAAC;AAAA,EAAEP,KAAAA;AAAAA,EAAOC;AAAM,CAAA,KACvBD,UAAU,IAAA,IAAQA,KAAAA,KAAU,IAAA,GACxBC,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,IAAAA,CAAKC,IAAAA,CAAKC,EAAAA,CAAGG,QAC9BR,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,IAAAA,CAAKC,IAAAA,CAAKG,GAAGC,KAAK,CAAA;AAS7C,MAAMC,QAAQ,CACZ;AAAA,EACEL,IAAAA,GAAO,IAAA;AAAA,EACPM,MAAAA,GAAS,QAAA;AAAA,EACTC,OAAAA;AAAAA,EACAR,IAAAA;AAAAA,EACAS,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AAC4C,CAAA,EACjDC,GAAAA,qBAEAC,eAAA,CAAC,OAAA,EAAA,EACC,GAAA,EACA,KAAA,EAAOZ,IAAAA,EACP,OAAA,EAASM,MAAAA,EACT,EAAA,EAAIG,SAAAA,IAAa,GAAA,EACjB,OAAA,EACA,GAAIC,KAAAA,EAEHF,QAAAA,EAAAA;AAAAA,EAAAA,QAAAA;AAAAA,EACAT,IAAAA,oBACCc,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAOb,IAAAA,EAClB,QAAA,kBAAAa,cAAA,CAACC,SAAA,EAAA,EACC,IAAA,EAAMf,IAAAA,EACN,SAAA,EAAU,eAAA,EACV,aAAA,EAAaA,MAAK,CAAA,EAEtB;AAAA,CAAA,EAEJ,CAAA;AAEK,MAAMgB,IAAAA,GAAiCC,iBAAWX,KAAK;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst externalIconVariants = cva('', {\n  variants: {\n    size: {\n      xs: styles['external-icon_size_xs'],\n      sm: styles['external-icon_size_sm'],\n      md: styles['external-icon_size_md'],\n      lg: styles['external-icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn('external-icon', externalIconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","externalIconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,oBAAAA,GAAuBhB,2BAAI,EAAA,EAAI;AAAA,EACnCG,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,uBAAuB,CAAA;AAAA,MAClCK,EAAAA,EAAIL,oBAAO,uBAAuB,CAAA;AAAA,MAClCM,EAAAA,EAAIN,oBAAO,uBAAuB,CAAA;AAAA,MAClCO,EAAAA,EAAIP,oBAAO,uBAAuB;AAAA;AACpC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,oBACCS,cAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,SAAA,EAAA,EACC,MAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAG,eAAA,EAAiBX,oBAAAA,CAAqB;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EAC7D,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}

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":";;;;;;;;;;;;;;;;;;;;;;;;"}