@clickhouse/click-ui 0.6.2-rc2 → 0.7.0

package/dist/cjs/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/cjs/components/VerticalStepper/VerticalStepper.module.css.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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
+};
+
+exports.default = styles;
+exports.step = step;
+exports.step__bubble = step__bubble;
+exports.step__bubble_status_active = step__bubble_status_active;
+exports.step__bubble_status_complete = step__bubble_status_complete;
+exports.step__bubble_status_incomplete = step__bubble_status_incomplete;
+exports.step__bubble_type_bulleted = step__bubble_type_bulleted;
+exports.step__bubble_type_numbered = step__bubble_type_numbered;
+exports.step__check = step__check;
+exports.step__content = step__content;
+exports.step__content_type_bulleted = step__content_type_bulleted;
+exports.step__content_type_numbered = step__content_type_numbered;
+exports.step__label = step__label;
+exports.step__label_status_active = step__label_status_active;
+exports.step__label_status_complete = step__label_status_complete;
+exports.step__label_type_bulleted = step__label_type_bulleted;
+exports.step__label_type_numbered = step__label_type_numbered;
+exports.step__trigger = step__trigger;
+exports.step__trigger_status_active = step__trigger_status_active;
+exports.step__trigger_status_complete = step__trigger_status_complete;
+exports.step_open = step_open;
+exports.step_status_active = step_status_active;
+exports.step_status_complete = step_status_complete;
+exports.step_type_bulleted = step_type_bulleted;
+exports.step_type_numbered = step_type_numbered;
+exports.stepper = stepper;
+//# sourceMappingURL=VerticalStepper.module.css.cjs.map

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

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

package/dist/cjs/components/VerticalStepper/index.cjs

@@ -1,147 +1,122 @@
+require("./VerticalStepper.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 cva = require('../../lib/cva.cjs');
+const VerticalStepper_module = require('./VerticalStepper.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 const StepperContext = react.createContext({
   type: "numbered"
 });
-const StepRoot = styledComponents.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__ */ jsxRuntime.jsx(StepRoot, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(VerticalStepper_module.default.stepper, className), children: /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value, children }) });
 };
-const StepItem = styledComponents.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 = classVarianceAuthority.cva(VerticalStepper_module.default.step, {
+  variants: {
+    type: {
+      numbered: VerticalStepper_module.default.step_type_numbered,
+      bulleted: VerticalStepper_module.default.step_type_bulleted
+    },
+    status: {
+      active: VerticalStepper_module.default.step_status_active,
+      complete: VerticalStepper_module.default.step_status_complete,
+      incomplete: ""
+    },
+    isOpen: {
+      true: VerticalStepper_module.default.step_open,
+      false: ""
     }
-  `);
-const StepTrigger = styledComponents.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 = styledComponents.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 = styledComponents.styled(Icon.Icon).withConfig({
-  componentId: "sc-xro1ly-4"
-})(["color:inherit;path{stroke-width:3;}"]);
-const StepLabel = styledComponents.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 = styledComponents.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 = classVarianceAuthority.cva(VerticalStepper_module.default.step__trigger, {
+  variants: {
+    status: {
+      active: VerticalStepper_module.default.step__trigger_status_active,
+      complete: VerticalStepper_module.default.step__trigger_status_complete,
+      incomplete: ""
+    }
+  }
+});
+const bubbleVariants = classVarianceAuthority.cva(VerticalStepper_module.default.step__bubble, {
+  variants: {
+    type: {
+      numbered: VerticalStepper_module.default.step__bubble_type_numbered,
+      bulleted: VerticalStepper_module.default.step__bubble_type_bulleted
+    },
+    status: {
+      active: VerticalStepper_module.default.step__bubble_status_active,
+      complete: VerticalStepper_module.default.step__bubble_status_complete,
+      incomplete: VerticalStepper_module.default.step__bubble_status_incomplete
+    }
+  }
+});
+const labelVariants = classVarianceAuthority.cva(VerticalStepper_module.default.step__label, {
+  variants: {
+    type: {
+      numbered: VerticalStepper_module.default.step__label_type_numbered,
+      bulleted: VerticalStepper_module.default.step__label_type_bulleted
+    },
+    status: {
+      active: VerticalStepper_module.default.step__label_status_active,
+      complete: VerticalStepper_module.default.step__label_status_complete,
+      incomplete: ""
+    }
+  }
+});
+const contentVariants = classVarianceAuthority.cva(VerticalStepper_module.default.step__content, {
+  variants: {
+    type: {
+      numbered: VerticalStepper_module.default.step__content_type_numbered,
+      bulleted: VerticalStepper_module.default.step__content_type_bulleted
+    }
+  }
+});
 const VerticalStep = ({
   status = "incomplete",
   children,
   label,
   collapsed = true,
   disabled,
+  className,
   ...props
 }) => {
   const {
     type
   } = react.useContext(StepperContext);
   const isOpen = !collapsed || status === "active";
-  return /* @__PURE__ */ jsxRuntime.jsxs(StepItem, { $type: type, $status: status, $isOpen: isOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(StepTrigger, { $status: status, disabled: status === "incomplete" || disabled, ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StepBubble, { $type: type, $status: status, children: type === "numbered" && status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { name: "check", size: "xs" }) : null }),
-      label && /* @__PURE__ */ jsxRuntime.jsx(StepLabel, { $type: type, $status: status, children: label })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(stepVariants({
+    type,
+    status,
+    isOpen
+  })), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", disabled: status === "incomplete" || disabled, ...props, className: cva.cn(triggerVariants({
+      status
+    }), className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(bubbleVariants({
+        type,
+        status
+      })), children: type === "numbered" && status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "check", size: "xs", className: VerticalStepper_module.default.step__check }) : null }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(labelVariants({
+        type,
+        status
+      })), children: label })
     ] }),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(StepContent, { $type: type, children })
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(contentVariants({
+      type
+    })), children })
   ] });
 };
 VerticalStep.displayName = "VerticalStepper.Step";

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","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","jsxs","displayName","Step"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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","jsxs","jsx","Icon","step__check","displayName","Step"],"mappings":";;;;;;;;;;;AAcA,MAAMA,iBAAiBC,mBAAAA,CAA4B;AAAA,EACjDC,IAAAA,EAAM;AACR,CAAC,CAAA;AAEM,MAAMC,kBAAkBA,CAAC;AAAA,EAC9BC,QAAAA;AAAAA,EACAF,IAAAA,GAAO,UAAA;AAAA,EACPG,SAAAA;AAAAA,EACA,GAAGC;AACiB,CAAA,KAAM;AAC1B,EAAA,MAAMC,KAAAA,GAAQ;AAAA,IACZL;AAAAA,GACF;AACA,EAAA,sCACG,KAAA,EAAA,KACKI,KAAAA,EACJ,SAAA,EAAWE,OAAGC,8BAAAA,CAAOC,OAAAA,EAASL,SAAS,CAAA,EAEvC,yCAAC,cAAA,CAAe,QAAA,EAAf,EAAwB,KAAA,EAAeD,UAAS,CAAA,EACnD,CAAA;AAEJ;AAEA,MAAMO,YAAAA,GAAeC,0BAAAA,CAAIH,8BAAAA,CAAOI,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRZ,IAAAA,EAAM;AAAA,MACJa,UAAUN,8BAAAA,CAAOO,kBAAAA;AAAAA,MACjBC,UAAUR,8BAAAA,CAAOS;AAAAA,KACnB;AAAA,IACAC,MAAAA,EAAQ;AAAA,MACNC,QAAQX,8BAAAA,CAAOY,kBAAAA;AAAAA,MACfC,UAAUb,8BAAAA,CAAOc,oBAAAA;AAAAA,MACjBC,UAAAA,EAAY;AAAA,KACd;AAAA,IACAC,MAAAA,EAAQ;AAAA,MACNC,MAAMjB,8BAAAA,CAAOkB,SAAAA;AAAAA,MACbC,KAAAA,EAAO;AAAA;AACT;AAEJ,CAAC,CAAA;AAED,MAAMC,eAAAA,GAAkBjB,0BAAAA,CAAIH,8BAAAA,CAAOqB,aAAAA,EAAe;AAAA,EAChDhB,QAAAA,EAAU;AAAA,IACRK,MAAAA,EAAQ;AAAA,MACNC,QAAQX,8BAAAA,CAAOsB,2BAAAA;AAAAA,MACfT,UAAUb,8BAAAA,CAAOuB,6BAAAA;AAAAA,MACjBR,UAAAA,EAAY;AAAA;AACd;AAEJ,CAAC,CAAA;AAED,MAAMS,cAAAA,GAAiBrB,0BAAAA,CAAIH,8BAAAA,CAAOyB,YAAAA,EAAc;AAAA,EAC9CpB,QAAAA,EAAU;AAAA,IACRZ,IAAAA,EAAM;AAAA,MACJa,UAAUN,8BAAAA,CAAO0B,0BAAAA;AAAAA,MACjBlB,UAAUR,8BAAAA,CAAO2B;AAAAA,KACnB;AAAA,IACAjB,MAAAA,EAAQ;AAAA,MACNC,QAAQX,8BAAAA,CAAO4B,0BAAAA;AAAAA,MACff,UAAUb,8BAAAA,CAAO6B,4BAAAA;AAAAA,MACjBd,YAAYf,8BAAAA,CAAO8B;AAAAA;AACrB;AAEJ,CAAC,CAAA;AAED,MAAMC,aAAAA,GAAgB5B,0BAAAA,CAAIH,8BAAAA,CAAOgC,WAAAA,EAAa;AAAA,EAC5C3B,QAAAA,EAAU;AAAA,IACRZ,IAAAA,EAAM;AAAA,MACJa,UAAUN,8BAAAA,CAAOiC,yBAAAA;AAAAA,MACjBzB,UAAUR,8BAAAA,CAAOkC;AAAAA,KACnB;AAAA,IACAxB,MAAAA,EAAQ;AAAA,MACNC,QAAQX,8BAAAA,CAAOmC,yBAAAA;AAAAA,MACftB,UAAUb,8BAAAA,CAAOoC,2BAAAA;AAAAA,MACjBrB,UAAAA,EAAY;AAAA;AACd;AAEJ,CAAC,CAAA;AAED,MAAMsB,eAAAA,GAAkBlC,0BAAAA,CAAIH,8BAAAA,CAAOsC,aAAAA,EAAe;AAAA,EAChDjC,QAAAA,EAAU;AAAA,IACRZ,IAAAA,EAAM;AAAA,MACJa,UAAUN,8BAAAA,CAAOuC,2BAAAA;AAAAA,MACjB/B,UAAUR,8BAAAA,CAAOwC;AAAAA;AACnB;AAEJ,CAAC,CAAA;AAED,MAAMC,eAAeA,CAAC;AAAA,EACpB/B,MAAAA,GAAS,YAAA;AAAA,EACTf,QAAAA;AAAAA,EACA+C,KAAAA;AAAAA,EACAC,SAAAA,GAAY,IAAA;AAAA,EACZC,QAAAA;AAAAA,EACAhD,SAAAA;AAAAA,EACA,GAAGC;AACc,CAAA,KAAM;AACvB,EAAA,MAAM;AAAA,IAAEJ;AAAAA,GAAK,GAAIoD,iBAAWtD,cAAc,CAAA;AAC1C,EAAA,MAAMyB,MAAAA,GAAS,CAAC2B,SAAAA,IAAajC,MAAAA,KAAW,QAAA;AACxC,EAAA,uBACEoC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW/C,MAAAA,CAAGG,YAAAA,CAAa;AAAA,IAAET,IAAAA;AAAAA,IAAMiB,MAAAA;AAAAA,IAAQM;AAAAA,GAAQ,CAAC,CAAA,EACvD,QAAA,EAAA;AAAA,oBAAA8B,eAAA,CAAC,QAAA,EAAA,EACC,IAAA,EAAK,QAAA,EACL,QAAA,EAAUpC,MAAAA,KAAW,YAAA,IAAgBkC,QAAAA,EACrC,GAAI/C,KAAAA,EACJ,SAAA,EAAWE,MAAAA,CAAGqB,eAAAA,CAAgB;AAAA,MAAEV;AAAAA,KAAQ,CAAA,EAAGd,SAAS,CAAA,EAEpD,QAAA,EAAA;AAAA,sBAAAmD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWhD,MAAAA,CAAGyB,cAAAA,CAAe;AAAA,QAAE/B,IAAAA;AAAAA,QAAMiB;AAAAA,OAAQ,CAAC,CAAA,EAChDjB,QAAAA,EAAAA,IAAAA,KAAS,UAAA,IAAciB,WAAW,UAAA,mBACjCqC,cAAA,CAACC,SAAA,EAAA,EACC,IAAA,EAAK,SACL,IAAA,EAAK,IAAA,EACL,WAAWhD,8BAAAA,CAAOiD,WAAAA,EAAY,IAE9B,IAAA,EACN,CAAA;AAAA,MACCP,KAAAA,oBAASK,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWhD,OAAGgC,aAAAA,CAAc;AAAA,QAAEtC,IAAAA;AAAAA,QAAMiB;AAAAA,OAAQ,CAAC,CAAA,EAAIgC,QAAAA,EAAAA,KAAAA,EAAM;AAAA,KAAA,EACxE,CAAA;AAAA,IACC1B,MAAAA,oBAAU+B,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWhD,OAAGsC,eAAAA,CAAgB;AAAA,MAAE5C;AAAAA,KAAM,CAAC,CAAA,EAAIE,QAAAA,EAAS;AAAA,GAAA,EACtE,CAAA;AAEJ,CAAA;AACA8C,YAAAA,CAAaS,WAAAA,GAAc,sBAAA;AAC3BxD,eAAAA,CAAgByD,IAAAA,GAAOV,YAAAA;;;;"}