@clickhouse/click-ui 0.6.2-rc2 → 0.7.0

package/dist/esm/components/VerticalStepper/VerticalStepper.css

@@ -0,0 +1,302 @@
+.stepper__ZgysL {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  counter-reset: vertical-stepper;
+}
+
+.step__eY9Kr {
+  --step-padding-bottom: var(--step-padding-bottom-default);
+  --step-connector-stroke: var(--step-connector-stroke-incomplete);
+
+  display: flex;
+  position: relative;
+  box-sizing: content-box;
+  width: 100%;
+  padding: 0;
+  padding-bottom: var(--step-padding-bottom);
+  flex-direction: column;
+  gap: var(--step-gap-y) var(--step-gap-x);
+}
+
+.step_type_numbered__Nurpd {
+  --step-gap-y: var(--click-stepper-vertical-numbered-content-space-gap-y);
+  --step-gap-x: var(--click-stepper-vertical-numbered-content-space-gap-x);
+  --step-padding-bottom-default: var(
+    --click-stepper-vertical-numbered-content-space-bottom-default
+  );
+  --step-padding-bottom-active: var(
+    --click-stepper-vertical-numbered-content-space-bottom-active
+  );
+  --step-connector-top: var(--click-stepper-vertical-numbered-step-size-height);
+  --step-connector-left: calc(
+    var(--click-stepper-vertical-numbered-step-size-width) / 2
+  );
+  --step-connector-width: var(
+    --click-stepper-vertical-numbered-connector-size-width
+  );
+  --step-connector-stroke-incomplete: var(
+    --click-stepper-vertical-numbered-connector-color-stroke-incomplete
+  );
+  --step-connector-stroke-complete: var(
+    --click-stepper-vertical-numbered-connector-color-stroke-complete
+  );
+  --step-connector-stroke-active: var(
+    --click-stepper-vertical-numbered-connector-color-stroke-active
+  );
+}
+
+.step_type_bulleted__xa6va {
+  --step-gap-y: var(--click-stepper-vertical-bulleted-content-space-gap-y);
+  --step-gap-x: var(--click-stepper-vertical-bulleted-content-space-gap-x);
+  --step-padding-bottom-default: var(
+    --click-stepper-vertical-bulleted-content-space-bottom-default
+  );
+  --step-padding-bottom-active: var(
+    --click-stepper-vertical-bulleted-content-space-bottom-active
+  );
+  --step-connector-top: var(--click-stepper-vertical-bulleted-step-size-height);
+  --step-connector-left: calc(
+    var(--click-stepper-vertical-bulleted-step-size-width) / 2
+  );
+  --step-connector-width: var(
+    --click-stepper-vertical-bulleted-connector-size-width
+  );
+  --step-connector-stroke-incomplete: var(
+    --click-stepper-vertical-bulleted-connector-color-stroke-incomplete
+  );
+  --step-connector-stroke-complete: var(
+    --click-stepper-vertical-bulleted-connector-color-stroke-complete
+  );
+  --step-connector-stroke-active: var(
+    --click-stepper-vertical-bulleted-connector-color-stroke-active
+  );
+}
+
+.step_open__klC-e {
+  --step-padding-bottom: var(--step-padding-bottom-active);
+}
+
+.step_status_complete__VGJWi {
+  --step-connector-stroke: var(--step-connector-stroke-complete);
+}
+
+.step_status_active__rQLtX {
+  --step-connector-stroke: var(--step-connector-stroke-active);
+}
+
+.step__eY9Kr:not(:last-of-type)::before {
+  content: "";
+  position: absolute;
+  top: var(--step-connector-top);
+  left: var(--step-connector-left);
+  box-sizing: content-box;
+  width: var(--step-connector-width);
+  height: 100%;
+  background: var(--step-connector-stroke);
+}
+
+.step__trigger__UM7J2 {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-direction: row;
+  align-items: center;
+  gap: inherit;
+  border: none;
+  background: transparent;
+  cursor: not-allowed;
+}
+
+.step__trigger_status_active__9hgV8 {
+  cursor: default;
+}
+
+.step__trigger_status_complete__mVt0I {
+  cursor: pointer;
+}
+
+.step__bubble__JqiD4 {
+  --bubble-background: var(--bubble-background-incomplete);
+  --bubble-stroke: var(--bubble-stroke-incomplete);
+  --bubble-icon: var(--bubble-icon-incomplete);
+
+  display: grid;
+  position: relative;
+  box-sizing: content-box;
+  width: var(--bubble-size);
+  height: var(--bubble-size);
+  border: 2px solid var(--bubble-stroke);
+  border-radius: var(--bubble-radii);
+  background: var(--bubble-background);
+  color: var(--bubble-icon);
+  font: var(--click-stepper-vertical-numbered-step-typography-number-default);
+  counter-increment: vertical-stepper;
+  place-items: center;
+}
+
+.step__bubble_type_numbered__0Mq85 {
+  --bubble-size: var(--click-stepper-vertical-numbered-step-size-width);
+  --bubble-radii: var(--click-stepper-vertical-numbered-step-radii-default);
+  --bubble-background-incomplete: var(
+    --click-stepper-vertical-numbered-step-color-background-incomplete
+  );
+  --bubble-background-complete: var(
+    --click-stepper-vertical-numbered-step-color-background-complete
+  );
+  --bubble-background-active: var(
+    --click-stepper-vertical-numbered-step-color-background-active
+  );
+  --bubble-stroke-incomplete: var(
+    --click-stepper-vertical-numbered-step-color-stroke-incomplete
+  );
+  --bubble-stroke-complete: var(
+    --click-stepper-vertical-numbered-step-color-stroke-complete
+  );
+  --bubble-stroke-active: var(
+    --click-stepper-vertical-numbered-step-color-stroke-active
+  );
+  --bubble-icon-incomplete: var(
+    --click-stepper-vertical-numbered-step-color-icon-incomplete
+  );
+  --bubble-icon-complete: var(
+    --click-stepper-vertical-numbered-step-color-icon-complete
+  );
+  --bubble-icon-active: var(
+    --click-stepper-vertical-numbered-step-color-icon-active
+  );
+}
+
+.step__bubble_type_bulleted__upwgF {
+  --bubble-size: var(--click-stepper-vertical-bulleted-step-size-width);
+  --bubble-radii: var(--click-stepper-vertical-bulleted-step-radii-default);
+  --bubble-background-incomplete: var(
+    --click-stepper-vertical-bulleted-step-color-background-incomplete
+  );
+  --bubble-background-complete: var(
+    --click-stepper-vertical-bulleted-step-color-background-complete
+  );
+  --bubble-background-active: var(
+    --click-stepper-vertical-bulleted-step-color-background-active
+  );
+  --bubble-stroke-incomplete: var(
+    --click-stepper-vertical-bulleted-step-color-stroke-incomplete
+  );
+  --bubble-stroke-complete: var(
+    --click-stepper-vertical-bulleted-step-color-stroke-complete
+  );
+  --bubble-stroke-active: var(
+    --click-stepper-vertical-bulleted-step-color-stroke-active
+  );
+  --bubble-icon-incomplete: var(
+    --click-stepper-vertical-bulleted-step-color-icon-incomplete
+  );
+  --bubble-icon-complete: var(
+    --click-stepper-vertical-bulleted-step-color-icon-complete
+  );
+  --bubble-icon-active: var(
+    --click-stepper-vertical-bulleted-step-color-icon-active
+  );
+}
+
+.step__bubble_status_complete__pwF7A {
+  --bubble-background: var(--bubble-background-complete);
+  --bubble-stroke: var(--bubble-stroke-complete);
+  --bubble-icon: var(--bubble-icon-complete);
+}
+
+.step__bubble_status_active__8DpW9 {
+  --bubble-background: var(--bubble-background-active);
+  --bubble-stroke: var(--bubble-stroke-active);
+  --bubble-icon: var(--bubble-icon-active);
+}
+
+.step__bubble_type_numbered__0Mq85.step__bubble_status_incomplete__obFaf::before,
+.step__bubble_type_numbered__0Mq85.step__bubble_status_active__8DpW9::before {
+  content: counter(vertical-stepper);
+  box-sizing: content-box;
+  color: inherit;
+  font: inherit;
+}
+
+.step__bubble_type_bulleted__upwgF.step__bubble_status_complete__pwF7A::after {
+  content: "";
+  position: absolute;
+  box-sizing: content-box;
+  width: 50%;
+  height: 50%;
+  border-radius: inherit;
+  background: var(--click-stepper-vertical-bulleted-step-color-icon-complete);
+}
+
+.step__check__FLpAl {
+  color: inherit;
+}
+
+.step__check__FLpAl path {
+  stroke-width: 3;
+}
+
+.step__label__qeVN9 {
+  --label-color: var(--label-color-incomplete);
+
+  display: flex;
+  flex-direction: column;
+  gap: inherit;
+  color: var(--label-color);
+  font: var(--label-font);
+}
+
+.step__label_type_numbered__TfXtm {
+  --label-font: var(--click-stepper-vertical-numbered-typography-title-default);
+  --label-color-incomplete: var(
+    --click-stepper-vertical-numbered-color-title-incomplete
+  );
+  --label-color-complete: var(
+    --click-stepper-vertical-numbered-color-title-complete
+  );
+  --label-color-active: var(
+    --click-stepper-vertical-numbered-color-title-active
+  );
+}
+
+.step__label_type_bulleted__3l3aZ {
+  --label-font: var(--click-stepper-vertical-bulleted-typography-title-default);
+  --label-color-incomplete: var(
+    --click-stepper-vertical-bulleted-color-title-incomplete
+  );
+  --label-color-complete: var(
+    --click-stepper-vertical-bulleted-color-title-complete
+  );
+  --label-color-active: var(
+    --click-stepper-vertical-bulleted-color-title-active
+  );
+}
+
+.step__label_status_complete__Trs-h {
+  --label-color: var(--label-color-complete);
+}
+
+.step__label_status_active__b8vFI {
+  --label-color: var(--label-color-active);
+}
+
+.step__content__mslBh {
+  display: flex;
+  width: 100%;
+  padding-left: var(--content-padding-left);
+  flex-direction: column;
+}
+
+.step__content_type_numbered__Vo5Da {
+  --content-padding-left: var(
+    --click-stepper-vertical-numbered-content-space-left
+  );
+}
+
+.step__content_type_bulleted__RBhi8 {
+  --content-padding-left: var(
+    --click-stepper-vertical-bulleted-content-space-left
+  );
+}

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

@@ -0,0 +1,55 @@
+const stepper = "stepper__ZgysL";
+const step = "step__eY9Kr";
+const step_type_numbered = "step_type_numbered__Nurpd";
+const step_type_bulleted = "step_type_bulleted__xa6va";
+const step_open = "step_open__klC-e";
+const step_status_complete = "step_status_complete__VGJWi";
+const step_status_active = "step_status_active__rQLtX";
+const step__trigger = "step__trigger__UM7J2";
+const step__trigger_status_active = "step__trigger_status_active__9hgV8";
+const step__trigger_status_complete = "step__trigger_status_complete__mVt0I";
+const step__bubble = "step__bubble__JqiD4";
+const step__bubble_type_numbered = "step__bubble_type_numbered__0Mq85";
+const step__bubble_type_bulleted = "step__bubble_type_bulleted__upwgF";
+const step__bubble_status_complete = "step__bubble_status_complete__pwF7A";
+const step__bubble_status_active = "step__bubble_status_active__8DpW9";
+const step__bubble_status_incomplete = "step__bubble_status_incomplete__obFaf";
+const step__check = "step__check__FLpAl";
+const step__label = "step__label__qeVN9";
+const step__label_type_numbered = "step__label_type_numbered__TfXtm";
+const step__label_type_bulleted = "step__label_type_bulleted__3l3aZ";
+const step__label_status_complete = "step__label_status_complete__Trs-h";
+const step__label_status_active = "step__label_status_active__b8vFI";
+const step__content = "step__content__mslBh";
+const step__content_type_numbered = "step__content_type_numbered__Vo5Da";
+const step__content_type_bulleted = "step__content_type_bulleted__RBhi8";
+const styles = {
+	stepper: stepper,
+	step: step,
+	step_type_numbered: step_type_numbered,
+	step_type_bulleted: step_type_bulleted,
+	step_open: step_open,
+	step_status_complete: step_status_complete,
+	step_status_active: step_status_active,
+	step__trigger: step__trigger,
+	step__trigger_status_active: step__trigger_status_active,
+	step__trigger_status_complete: step__trigger_status_complete,
+	step__bubble: step__bubble,
+	step__bubble_type_numbered: step__bubble_type_numbered,
+	step__bubble_type_bulleted: step__bubble_type_bulleted,
+	step__bubble_status_complete: step__bubble_status_complete,
+	step__bubble_status_active: step__bubble_status_active,
+	step__bubble_status_incomplete: step__bubble_status_incomplete,
+	step__check: step__check,
+	step__label: step__label,
+	step__label_type_numbered: step__label_type_numbered,
+	step__label_type_bulleted: step__label_type_bulleted,
+	step__label_status_complete: step__label_status_complete,
+	step__label_status_active: step__label_status_active,
+	step__content: step__content,
+	step__content_type_numbered: step__content_type_numbered,
+	step__content_type_bulleted: step__content_type_bulleted
+};
+
+export { styles as default, step, step__bubble, step__bubble_status_active, step__bubble_status_complete, step__bubble_status_incomplete, step__bubble_type_bulleted, step__bubble_type_numbered, step__check, step__content, step__content_type_bulleted, step__content_type_numbered, step__label, step__label_status_active, step__label_status_complete, step__label_type_bulleted, step__label_type_numbered, step__trigger, step__trigger_status_active, step__trigger_status_complete, step_open, step_status_active, step_status_complete, step_type_bulleted, step_type_numbered, stepper };
+//# sourceMappingURL=VerticalStepper.module.css.js.map

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

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

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

@@ -1,143 +1,118 @@
+import "./VerticalStepper.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useContext } from 'react';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './VerticalStepper.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
 const StepperContext = createContext({
   type: "numbered"
 });
-const StepRoot = styled.div.withConfig({
-  componentId: "sc-xro1ly-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;counter-reset:vertical-stepper;width:100%;"]);
 const VerticalStepper = ({
   children,
   type = "numbered",
+  className,
   ...props
 }) => {
   const value = {
     type
   };
-  return /* @__PURE__ */ jsx(StepRoot, { ...props, children: /* @__PURE__ */ jsx(StepperContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(styles.stepper, className), children: /* @__PURE__ */ jsx(StepperContext.Provider, { value, children }) });
 };
-const StepItem = styled.div.withConfig({
-  componentId: "sc-xro1ly-1"
-})(["display:flex;flex-direction:column;position:relative;width:100%;padding:0;", ""], ({
-  theme,
-  $type,
-  $status,
-  $isOpen
-}) => `
-    row-gap: ${theme.click.stepper.vertical[$type].content.space.gap.y};
-    column-gap: ${theme.click.stepper.vertical[$type].content.space.gap.x};
-    padding-bottom: ${theme.click.stepper.vertical[$type].content.space.bottom[$isOpen ? "active" : "default"]};
-    box-sizing: content-box;
-    &:not(:last-of-type) {
-      &::before{
-        content: "";
-        position: absolute;
-        top: ${theme.click.stepper.vertical[$type].step.size.height};
-        height: 100%;
-        left: calc(${theme.click.stepper.vertical[$type].step.size.width}  / 2 );
-        width: ${theme.click.stepper.vertical[$type].connector.size.width};
-        background: ${theme.click.stepper.vertical[$type].connector.color.stroke[$status]};
-        box-sizing: content-box;
-      }
+const stepVariants = cva(styles.step, {
+  variants: {
+    type: {
+      numbered: styles.step_type_numbered,
+      bulleted: styles.step_type_bulleted
+    },
+    status: {
+      active: styles.step_status_active,
+      complete: styles.step_status_complete,
+      incomplete: ""
+    },
+    isOpen: {
+      true: styles.step_open,
+      false: ""
     }
-  `);
-const StepTrigger = styled.button.withConfig({
-  componentId: "sc-xro1ly-2"
-})(["", ""], ({
-  $status
-}) => `
-    display: flex;
-    align-items: center;
-    padding: 0;
-    width: 100%;
-    background: transparent;
-    border: none;
-    gap: inherit;
-    cursor: ${$status === "active" ? "default" : $status === "complete" ? "pointer" : "not-allowed"};
-    flex-direction: row;
-  `);
-const StepBubble = styled.div.withConfig({
-  componentId: "sc-xro1ly-3"
-})(["", ""], ({
-  theme,
-  $type,
-  $status
-}) => `
-    display: grid;
-    place-items: center;
-    position: relative;
-    width: ${theme.click.stepper.vertical[$type].step.size.width};
-    height: ${theme.click.stepper.vertical[$type].step.size.width};
-    border-radius: ${theme.click.stepper.vertical[$type].step.radii.default};
-    background: ${theme.click.stepper.vertical[$type].step.color.background[$status]};
-    border: 2px solid ${theme.click.stepper.vertical[$type].step.color.stroke[$status]};
-    font: ${theme.click.stepper.vertical.numbered.step.typography.number.default};
-    color: ${theme.click.stepper.vertical[$type].step.color.icon[$status]};
-    counter-increment: vertical-stepper;
-    box-sizing: content-box;
-    ${$type === "numbered" && $status !== "complete" ? `
-        &::before {
-          box-sizing: content-box;
-          font: inherit;
-          color: inherit;
-          content: counter(vertical-stepper);
-        }
-    ` : ""}
-      ${$status == "complete" && $type === "bulleted" ? `
-      &::after {
-        box-sizing: content-box;
-        content: "";
-        position: absolute;
-        width: 50%;
-        height: 50%;
-        border-radius: inherit;
-        background: ${theme.click.stepper.vertical.bulleted.step.color.icon.complete}
-      }
-      ` : ""};
-  `);
-const CheckIcon = styled(SvgImage).withConfig({
-  componentId: "sc-xro1ly-4"
-})(["color:inherit;path{stroke-width:3;}"]);
-const StepLabel = styled.div.withConfig({
-  componentId: "sc-xro1ly-5"
-})(["display:flex;flex-direction:column;", ")"], ({
-  theme,
-  $type,
-  $status
-}) => `
-    font: ${theme.click.stepper.vertical[$type].typography.title.default};
-    color: ${theme.click.stepper.vertical[$type].color.title[$status]};
-    gap: inherit;
-  `);
-const StepContent = styled.div.withConfig({
-  componentId: "sc-xro1ly-6"
-})(["display:flex;width:100%;flex-direction:column;", ""], ({
-  theme,
-  $type
-}) => `
-    padding-left: ${theme.click.stepper.vertical[$type].content.space.left};
-  `);
+  }
+});
+const triggerVariants = cva(styles.step__trigger, {
+  variants: {
+    status: {
+      active: styles.step__trigger_status_active,
+      complete: styles.step__trigger_status_complete,
+      incomplete: ""
+    }
+  }
+});
+const bubbleVariants = cva(styles.step__bubble, {
+  variants: {
+    type: {
+      numbered: styles.step__bubble_type_numbered,
+      bulleted: styles.step__bubble_type_bulleted
+    },
+    status: {
+      active: styles.step__bubble_status_active,
+      complete: styles.step__bubble_status_complete,
+      incomplete: styles.step__bubble_status_incomplete
+    }
+  }
+});
+const labelVariants = cva(styles.step__label, {
+  variants: {
+    type: {
+      numbered: styles.step__label_type_numbered,
+      bulleted: styles.step__label_type_bulleted
+    },
+    status: {
+      active: styles.step__label_status_active,
+      complete: styles.step__label_status_complete,
+      incomplete: ""
+    }
+  }
+});
+const contentVariants = cva(styles.step__content, {
+  variants: {
+    type: {
+      numbered: styles.step__content_type_numbered,
+      bulleted: styles.step__content_type_bulleted
+    }
+  }
+});
 const VerticalStep = ({
   status = "incomplete",
   children,
   label,
   collapsed = true,
   disabled,
+  className,
   ...props
 }) => {
   const {
     type
   } = useContext(StepperContext);
   const isOpen = !collapsed || status === "active";
-  return /* @__PURE__ */ jsxs(StepItem, { $type: type, $status: status, $isOpen: isOpen, children: [
-    /* @__PURE__ */ jsxs(StepTrigger, { $status: status, disabled: status === "incomplete" || disabled, ...props, children: [
-      /* @__PURE__ */ jsx(StepBubble, { $type: type, $status: status, children: type === "numbered" && status === "complete" ? /* @__PURE__ */ jsx(CheckIcon, { name: "check", size: "xs" }) : null }),
-      label && /* @__PURE__ */ jsx(StepLabel, { $type: type, $status: status, children: label })
+  return /* @__PURE__ */ jsxs("div", { className: cn(stepVariants({
+    type,
+    status,
+    isOpen
+  })), children: [
+    /* @__PURE__ */ jsxs("button", { type: "button", disabled: status === "incomplete" || disabled, ...props, className: cn(triggerVariants({
+      status
+    }), className), children: [
+      /* @__PURE__ */ jsx("div", { className: cn(bubbleVariants({
+        type,
+        status
+      })), children: type === "numbered" && status === "complete" ? /* @__PURE__ */ jsx(SvgImage, { name: "check", size: "xs", className: styles.step__check }) : null }),
+      label && /* @__PURE__ */ jsx("div", { className: cn(labelVariants({
+        type,
+        status
+      })), children: label })
     ] }),
-    isOpen && /* @__PURE__ */ jsx(StepContent, { $type: type, children })
+    isOpen && /* @__PURE__ */ jsx("div", { className: cn(contentVariants({
+      type
+    })), children })
   ] });
 };
 VerticalStep.displayName = "VerticalStepper.Step";

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/VerticalStepper/VerticalStepper.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport {\n  VerticalStepperProps,\n  VerticalStepProps,\n  StepperType,\n  StepStatus,\n} from './VerticalStepper.types';\n\ntype ContextProps = {\n  type: StepperType;\n};\n\nconst StepperContext = createContext<ContextProps>({\n  type: 'numbered',\n});\n\nconst StepRoot = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  counter-reset: vertical-stepper;\n  width: 100%;\n`;\n\nexport const VerticalStepper = ({\n  children,\n  type = 'numbered',\n  ...props\n}: VerticalStepperProps) => {\n  const value = {\n    type,\n  };\n  return (\n    <StepRoot {...props}>\n      <StepperContext.Provider value={value}>{children}</StepperContext.Provider>\n    </StepRoot>\n  );\n};\nconst StepItem = styled.div<{\n  $type: StepperType;\n  $status: StepStatus;\n  $isOpen: boolean;\n}>`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  padding: 0;\n  ${({ theme, $type, $status, $isOpen }) => `\n    row-gap: ${theme.click.stepper.vertical[$type].content.space.gap.y};\n    column-gap: ${theme.click.stepper.vertical[$type].content.space.gap.x};\n    padding-bottom: ${\n      theme.click.stepper.vertical[$type].content.space.bottom[\n        $isOpen ? 'active' : 'default'\n      ]\n    };\n    box-sizing: content-box;\n    &:not(:last-of-type) {\n      &::before{\n        content: \"\";\n        position: absolute;\n        top: ${theme.click.stepper.vertical[$type].step.size.height};\n        height: 100%;\n        left: calc(${theme.click.stepper.vertical[$type].step.size.width}  / 2 );\n        width: ${theme.click.stepper.vertical[$type].connector.size.width};\n        background: ${\n          theme.click.stepper.vertical[$type].connector.color.stroke[$status]\n        };\n        box-sizing: content-box;\n      }\n    }\n  `}\n`;\n\nconst StepTrigger = styled.button<{\n  $status: StepStatus;\n}>`\n  ${({ $status }) => `\n    display: flex;\n    align-items: center;\n    padding: 0;\n    width: 100%;\n    background: transparent;\n    border: none;\n    gap: inherit;\n    cursor: ${\n      $status === 'active'\n        ? 'default'\n        : $status === 'complete'\n          ? 'pointer'\n          : 'not-allowed'\n    };\n    flex-direction: row;\n  `}\n`;\n\nconst StepBubble = styled.div<{ $type: StepperType; $status: StepStatus }>`\n  ${({ theme, $type, $status }) => `\n    display: grid;\n    place-items: center;\n    position: relative;\n    width: ${theme.click.stepper.vertical[$type].step.size.width};\n    height: ${theme.click.stepper.vertical[$type].step.size.width};\n    border-radius: ${theme.click.stepper.vertical[$type].step.radii.default};\n    background: ${theme.click.stepper.vertical[$type].step.color.background[$status]};\n    border: 2px solid ${theme.click.stepper.vertical[$type].step.color.stroke[$status]};\n    font: ${theme.click.stepper.vertical.numbered.step.typography.number.default};\n    color: ${theme.click.stepper.vertical[$type].step.color.icon[$status]};\n    counter-increment: vertical-stepper;\n    box-sizing: content-box;\n    ${\n      $type === 'numbered' && $status !== 'complete'\n        ? `\n        &::before {\n          box-sizing: content-box;\n          font: inherit;\n          color: inherit;\n          content: counter(vertical-stepper);\n        }\n    `\n        : ''\n    }\n      ${\n        $status == 'complete' && $type === 'bulleted'\n          ? `\n      &::after {\n        box-sizing: content-box;\n        content: \"\";\n        position: absolute;\n        width: 50%;\n        height: 50%;\n        border-radius: inherit;\n        background: ${theme.click.stepper.vertical.bulleted.step.color.icon.complete}\n      }\n      `\n          : ''\n      };\n  `}\n`;\n\nconst CheckIcon = styled(Icon)`\n  color: inherit;\n  path {\n    stroke-width: 3;\n  }\n`;\nconst StepLabel = styled.div<{ $type: StepperType; $status: StepStatus }>`\n  display: flex;\n  flex-direction: column;\n  ${({ theme, $type, $status }) => `\n    font: ${theme.click.stepper.vertical[$type].typography.title.default};\n    color: ${theme.click.stepper.vertical[$type].color.title[$status]};\n    gap: inherit;\n  `})\n`;\n\nconst StepContent = styled.div<{ $type: StepperType }>`\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  ${({ theme, $type }) => `\n    padding-left: ${theme.click.stepper.vertical[$type].content.space.left};\n  `}\n`;\n\nconst VerticalStep = ({\n  status = 'incomplete',\n  children,\n  label,\n  collapsed = true,\n  disabled,\n  ...props\n}: VerticalStepProps) => {\n  const { type } = useContext(StepperContext);\n  const isOpen = !collapsed || status === 'active';\n  return (\n    <StepItem\n      $type={type}\n      $status={status}\n      $isOpen={isOpen}\n    >\n      <StepTrigger\n        $status={status}\n        disabled={status === 'incomplete' || disabled}\n        {...props}\n      >\n        <StepBubble\n          $type={type}\n          $status={status}\n        >\n          {type === 'numbered' && status === 'complete' ? (\n            <CheckIcon\n              name=\"check\"\n              size=\"xs\"\n            />\n          ) : null}\n        </StepBubble>\n        {label && (\n          <StepLabel\n            $type={type}\n            $status={status}\n          >\n            {label}\n          </StepLabel>\n        )}\n      </StepTrigger>\n      {isOpen && <StepContent $type={type}>{children}</StepContent>}\n    </StepItem>\n  );\n};\nVerticalStep.displayName = 'VerticalStepper.Step';\nVerticalStepper.Step = VerticalStep;\n"],"names":["StepperContext","createContext","type","StepRoot","styled","div","withConfig","componentId","VerticalStepper","children","props","value","StepItem","theme","$type","$status","$isOpen","click","stepper","vertical","content","space","gap","y","x","bottom","step","size","height","width","connector","color","stroke","StepTrigger","button","StepBubble","radii","default","background","numbered","typography","number","icon","bulleted","complete","CheckIcon","Icon","StepLabel","title","StepContent","left","VerticalStep","status","label","collapsed","disabled","useContext","isOpen","displayName","Step"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/VerticalStepper/VerticalStepper.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './VerticalStepper.module.css';\nimport {\n  VerticalStepperProps,\n  VerticalStepProps,\n  StepperType,\n} from './VerticalStepper.types';\n\ntype ContextProps = {\n  type: StepperType;\n};\n\nconst StepperContext = createContext<ContextProps>({\n  type: 'numbered',\n});\n\nexport const VerticalStepper = ({\n  children,\n  type = 'numbered',\n  className,\n  ...props\n}: VerticalStepperProps) => {\n  const value = {\n    type,\n  };\n  return (\n    <div\n      {...props}\n      className={cn(styles.stepper, className)}\n    >\n      <StepperContext.Provider value={value}>{children}</StepperContext.Provider>\n    </div>\n  );\n};\n\nconst stepVariants = cva(styles.step, {\n  variants: {\n    type: {\n      numbered: styles.step_type_numbered,\n      bulleted: styles.step_type_bulleted,\n    },\n    status: {\n      active: styles.step_status_active,\n      complete: styles.step_status_complete,\n      incomplete: '',\n    },\n    isOpen: {\n      true: styles.step_open,\n      false: '',\n    },\n  },\n});\n\nconst triggerVariants = cva(styles.step__trigger, {\n  variants: {\n    status: {\n      active: styles.step__trigger_status_active,\n      complete: styles.step__trigger_status_complete,\n      incomplete: '',\n    },\n  },\n});\n\nconst bubbleVariants = cva(styles.step__bubble, {\n  variants: {\n    type: {\n      numbered: styles.step__bubble_type_numbered,\n      bulleted: styles.step__bubble_type_bulleted,\n    },\n    status: {\n      active: styles.step__bubble_status_active,\n      complete: styles.step__bubble_status_complete,\n      incomplete: styles.step__bubble_status_incomplete,\n    },\n  },\n});\n\nconst labelVariants = cva(styles.step__label, {\n  variants: {\n    type: {\n      numbered: styles.step__label_type_numbered,\n      bulleted: styles.step__label_type_bulleted,\n    },\n    status: {\n      active: styles.step__label_status_active,\n      complete: styles.step__label_status_complete,\n      incomplete: '',\n    },\n  },\n});\n\nconst contentVariants = cva(styles.step__content, {\n  variants: {\n    type: {\n      numbered: styles.step__content_type_numbered,\n      bulleted: styles.step__content_type_bulleted,\n    },\n  },\n});\n\nconst VerticalStep = ({\n  status = 'incomplete',\n  children,\n  label,\n  collapsed = true,\n  disabled,\n  className,\n  ...props\n}: VerticalStepProps) => {\n  const { type } = useContext(StepperContext);\n  const isOpen = !collapsed || status === 'active';\n  return (\n    <div className={cn(stepVariants({ type, status, isOpen }))}>\n      <button\n        type=\"button\"\n        disabled={status === 'incomplete' || disabled}\n        {...props}\n        className={cn(triggerVariants({ status }), className)}\n      >\n        <div className={cn(bubbleVariants({ type, status }))}>\n          {type === 'numbered' && status === 'complete' ? (\n            <Icon\n              name=\"check\"\n              size=\"xs\"\n              className={styles.step__check}\n            />\n          ) : null}\n        </div>\n        {label && <div className={cn(labelVariants({ type, status }))}>{label}</div>}\n      </button>\n      {isOpen && <div className={cn(contentVariants({ type }))}>{children}</div>}\n    </div>\n  );\n};\nVerticalStep.displayName = 'VerticalStepper.Step';\nVerticalStepper.Step = VerticalStep;\n"],"names":["StepperContext","createContext","type","VerticalStepper","children","className","props","value","cn","styles","stepper","stepVariants","cva","step","variants","numbered","step_type_numbered","bulleted","step_type_bulleted","status","active","step_status_active","complete","step_status_complete","incomplete","isOpen","true","step_open","false","triggerVariants","step__trigger","step__trigger_status_active","step__trigger_status_complete","bubbleVariants","step__bubble","step__bubble_type_numbered","step__bubble_type_bulleted","step__bubble_status_active","step__bubble_status_complete","step__bubble_status_incomplete","labelVariants","step__label","step__label_type_numbered","step__label_type_bulleted","step__label_status_active","step__label_status_complete","contentVariants","step__content","step__content_type_numbered","step__content_type_bulleted","VerticalStep","label","collapsed","disabled","useContext","Icon","step__check","displayName","Step"],"mappings":"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"}

package/dist/types/components/Assets/Logos/Polaris.d.ts

@@ -0,0 +1,3 @@
+import { SVGAssetProps } from '../../../types';
+declare const Polaris: (props: SVGAssetProps) => import("react/jsx-runtime").JSX.Element;
+export default Polaris;

package/dist/types/components/Assets/Logos/system/types.d.ts

@@ -1,7 +1,7 @@
 import { SVGAttributes } from 'react';
 import { AssetSize } from '../../../../types';
 import { ThemeName } from '../../../../theme/theme.types';
-export type LogoName = 'airbyte' | 'alloydb' | 'apache-iceberg' | 'aws' | 'aws-athena' | 'aws-aurora' | 'aws-glue' | 'aws-kinesis' | 'aws-msk' | 'aws-rds' | 'aws-redshift' | 'aws-s3' | 'azure' | 'azure-blob-storage' | 'azure-event-hub' | 'biglake-metastore' | 'bigquery' | 'clickhouse' | 'cloudflare' | 'confluent' | 'crunchy-bridge' | 'csharp' | 'databricks' | 'datagrip' | 'dbeaver' | 'dbt' | 'decodeable' | 'deepnote' | 'deltalake' | 'digitalocean' | 'feature-database' | 'feature-hexagon' | 'fivetran' | 'gcp' | 'gcs' | 'github' | 'golang' | 'google' | 'grafana' | 'hex' | 'hudi' | 'iceberg' | 'jdbc' | 'kafka' | 'kubernetes' | 'lakekeeper' | 'mariadb' | 'metabase' | 'microsoft' | 'mongodb' | 'mysql' | 'neondb' | 'nessie' | 'nodejs' | 'onelake' | 'ovh' | 'planetscale' | 'postgres' | 'prequel' | 'python' | 'redpanda' | 'rust' | 'snowflake' | 'supabase' | 'superset' | 'tableau' | 'tigerdata' | 'upstash' | 'vector' | 'warpstream';
+export type LogoName = 'airbyte' | 'alloydb' | 'apache-iceberg' | 'aws' | 'aws-athena' | 'aws-aurora' | 'aws-glue' | 'aws-kinesis' | 'aws-msk' | 'aws-rds' | 'aws-redshift' | 'aws-s3' | 'azure' | 'azure-blob-storage' | 'azure-event-hub' | 'biglake-metastore' | 'bigquery' | 'clickhouse' | 'cloudflare' | 'confluent' | 'crunchy-bridge' | 'csharp' | 'databricks' | 'datagrip' | 'dbeaver' | 'dbt' | 'decodeable' | 'deepnote' | 'deltalake' | 'digitalocean' | 'feature-database' | 'feature-hexagon' | 'fivetran' | 'gcp' | 'gcs' | 'github' | 'golang' | 'google' | 'grafana' | 'hex' | 'hudi' | 'iceberg' | 'jdbc' | 'kafka' | 'kubernetes' | 'lakekeeper' | 'mariadb' | 'metabase' | 'microsoft' | 'mongodb' | 'mysql' | 'neondb' | 'nessie' | 'nodejs' | 'onelake' | 'ovh' | 'planetscale' | 'polaris' | 'postgres' | 'prequel' | 'python' | 'redpanda' | 'rust' | 'snowflake' | 'supabase' | 'superset' | 'tableau' | 'tigerdata' | 'upstash' | 'vector' | 'warpstream';
 export interface LogoProps extends SVGAttributes<SVGElement> {
     name: LogoName;
     theme?: ThemeName;

package/dist/types/components/BigStat/BigStat.d.ts

@@ -1,2 +1,2 @@
 import { BigStatProps } from './BigStat.types';
-export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, error, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, error, className, style, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;