mokona-ui 0.0.1

package/dist/chunk-MVGUWG27.js

@@ -0,0 +1,56 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        "text-display1",
+        "text-title1",
+        "text-title2",
+        "text-title3",
+        "text-body1",
+        "text-body2",
+        "text-caption1"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { __objRest, __spreadProps, __spreadValues, cn };
+//# sourceMappingURL=chunk-MVGUWG27.js.map
+//# sourceMappingURL=chunk-MVGUWG27.js.map

package/dist/chunk-MVGUWG27.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,UAAU,mBAAA,CAAoB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,WAAA,EAAa;AAAA,MACX,WAAA,EAAa;AAAA,QACX,eAAA;AAAA,QACA,aAAA;AAAA,QACA,aAAA;AAAA,QACA,aAAA;AAAA,QACA,YAAA;AAAA,QACA,YAAA;AAAA,QACA;AAAA;AACF;AACF;AAEJ,CAAC,CAAA;AAEM,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B","file":"chunk-MVGUWG27.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [\n        \"text-display1\",\n        \"text-title1\",\n        \"text-title2\",\n        \"text-title3\",\n        \"text-body1\",\n        \"text-body2\",\n        \"text-caption1\",\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"]}

package/dist/chunk-MWP6IFVJ.cjs

@@ -0,0 +1,93 @@
+'use strict';
+
+var chunk4V3IOZPC_cjs = require('./chunk-4V3IOZPC.cjs');
+var React = require('react');
+var Label = require('@radix-ui/react-label');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var Label__namespace = /*#__PURE__*/_interopNamespace(Label);
+
+var Textarea = React__namespace.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, label, helperText, errorMessage, isError, showCount, maxLength, id, value, onChange } = _b, props = chunk4V3IOZPC_cjs.__objRest(_b, ["className", "label", "helperText", "errorMessage", "isError", "showCount", "maxLength", "id", "value", "onChange"]);
+    const generatedId = React__namespace.useId();
+    const inputId = id != null ? id : generatedId;
+    const hasError = isError || !!errorMessage;
+    const [count, setCount] = React__namespace.useState(
+      typeof value === "string" ? value.length : 0
+    );
+    const handleChange = (e) => {
+      setCount(e.target.value.length);
+      onChange == null ? void 0 : onChange(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(
+        Label__namespace.Root,
+        {
+          htmlFor: inputId,
+          className: "text-[14px] font-semibold text-[var(--color-foreground)]",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        chunk4V3IOZPC_cjs.__spreadValues({
+          ref,
+          id: inputId,
+          value,
+          onChange: handleChange,
+          maxLength,
+          className: chunk4V3IOZPC_cjs.cn(
+            "w-full min-h-[100px] px-4 py-3 rounded-xl resize-none",
+            "text-[16px] text-[var(--color-foreground)]",
+            "bg-[var(--color-muted)] outline-none",
+            "border-2 border-transparent",
+            "placeholder:text-[var(--color-muted-foreground)]",
+            "transition-colors duration-150",
+            "focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]",
+            "disabled:opacity-40 disabled:cursor-not-allowed",
+            hasError && "border-[var(--color-negative)] bg-[var(--color-background)]",
+            className
+          ),
+          "aria-invalid": hasError,
+          "aria-describedby": hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0
+        }, props)
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-start", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          hasError && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${inputId}-error`, className: "text-[12px] text-[var(--color-negative)]", role: "alert", children: errorMessage }),
+          !hasError && helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${inputId}-helper`, className: "text-[12px] text-[var(--color-muted-foreground)]", children: helperText })
+        ] }),
+        showCount && maxLength && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[12px] text-[var(--color-muted-foreground)] shrink-0 ml-auto", children: [
+          count,
+          "/",
+          maxLength
+        ] })
+      ] })
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+
+exports.Textarea = Textarea;
+//# sourceMappingURL=chunk-MWP6IFVJ.cjs.map
+//# sourceMappingURL=chunk-MWP6IFVJ.cjs.map

package/dist/chunk-MWP6IFVJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Textarea/Textarea.tsx"],"names":["React","__objRest","jsxs","jsx","Label","__spreadValues","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAM,QAAA,GAAiBA,gBAAA,CAAA,UAAA;AAAA,EACrB,CACE,IACA,GAAA,KACG;AAFH,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAA,SAAA,EAAW,OAAO,UAAA,EAAY,YAAA,EAAc,SAAS,SAAA,EAAW,SAAA,EAAW,EAAA,EAAI,KAAA,EAAO,QAAA,EAf5F,GAeI,IAAqG,KAAA,GAAAC,2BAAA,CAArG,EAAA,EAAqG,CAAnG,WAAA,EAAW,OAAA,EAAO,YAAA,EAAY,gBAAc,SAAA,EAAS,WAAA,EAAW,WAAA,EAAW,IAAA,EAAI,OAAA,EAAO,UAAA,CAAA,CAAA;AAGxF,IAAA,MAAM,cAAoBD,gBAAA,CAAA,KAAA,EAAM;AAChC,IAAA,MAAM,UAAU,EAAA,IAAA,IAAA,GAAA,EAAA,GAAM,WAAA;AACtB,IAAA,MAAM,QAAA,GAAW,OAAA,IAAW,CAAC,CAAC,YAAA;AAC9B,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAUA,gBAAA,CAAA,QAAA;AAAA,MAC9B,OAAO,KAAA,KAAU,QAAA,GAAW,KAAA,CAAM,MAAA,GAAS;AAAA,KAC7C;AAEA,IAAA,MAAM,YAAA,GAAe,CAAC,CAAA,KAA8C;AAClE,MAAA,QAAA,CAAS,CAAA,CAAE,MAAA,CAAO,KAAA,CAAM,MAAM,CAAA;AAC9B,MAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAW,CAAA,CAAA;AAAA,IACb,CAAA;AAEA,IAAA,uBACEE,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACCC,cAAA;AAAA,QAAOC,gBAAA,CAAA,IAAA;AAAA,QAAN;AAAA,UACC,OAAA,EAAS,OAAA;AAAA,UACT,SAAA,EAAU,0DAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,sBAEFD,cAAA;AAAA,QAAC,UAAA;AAAA,QAAAE,gCAAA,CAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA,EAAI,OAAA;AAAA,UACJ,KAAA;AAAA,UACA,QAAA,EAAU,YAAA;AAAA,UACV,SAAA;AAAA,UACA,SAAA,EAAWC,oBAAA;AAAA,YACT,uDAAA;AAAA,YACA,4CAAA;AAAA,YACA,sCAAA;AAAA,YACA,6BAAA;AAAA,YACA,kDAAA;AAAA,YACA,gCAAA;AAAA,YACA,wEAAA;AAAA,YACA,iDAAA;AAAA,YACA,QAAA,IAAY,6DAAA;AAAA,YACZ;AAAA,WACF;AAAA,UACA,cAAA,EAAc,QAAA;AAAA,UACd,kBAAA,EACE,WAAW,CAAA,EAAG,OAAO,WAAW,UAAA,GAAa,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,GAAY;AAAA,SAAA,EAEjE,KAAA;AAAA,OACN;AAAA,sBACAJ,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kCAAA,EACb,QAAA,EAAA;AAAA,wBAAAA,eAAA,CAAC,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,QAAA,IAAY,YAAA,oBACXC,cAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,CAAA,EAAG,OAAO,CAAA,MAAA,CAAA,EAAU,SAAA,EAAU,0CAAA,EAA2C,IAAA,EAAK,OAAA,EAClF,QAAA,EAAA,YAAA,EACH,CAAA;AAAA,UAED,CAAC,QAAA,IAAY,UAAA,oBACZA,cAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,CAAA,EAAG,OAAO,CAAA,OAAA,CAAA,EAAW,SAAA,EAAU,kDAAA,EACnC,QAAA,EAAA,UAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,SAAA,IAAa,SAAA,oBACZD,eAAA,CAAC,GAAA,EAAA,EAAE,WAAU,mEAAA,EACV,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UAAM,GAAA;AAAA,UAAE;AAAA,SAAA,EACX;AAAA,OAAA,EAEJ;AAAA,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-MWP6IFVJ.cjs","sourcesContent":["import * as React from \"react\";\nimport * as Label from \"@radix-ui/react-label\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: string;\n  helperText?: string;\n  errorMessage?: string;\n  isError?: boolean;\n  showCount?: boolean;\n  maxLength?: number;\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    { className, label, helperText, errorMessage, isError, showCount, maxLength, id, value, onChange, ...props },\n    ref\n  ) => {\n    const generatedId = React.useId();\n    const inputId = id ?? generatedId;\n    const hasError = isError || !!errorMessage;\n    const [count, setCount] = React.useState(\n      typeof value === \"string\" ? value.length : 0\n    );\n\n    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n      setCount(e.target.value.length);\n      onChange?.(e);\n    };\n\n    return (\n      <div className=\"flex flex-col gap-1.5 w-full\">\n        {label && (\n          <Label.Root\n            htmlFor={inputId}\n            className=\"text-[14px] font-semibold text-[var(--color-foreground)]\"\n          >\n            {label}\n          </Label.Root>\n        )}\n        <textarea\n          ref={ref}\n          id={inputId}\n          value={value}\n          onChange={handleChange}\n          maxLength={maxLength}\n          className={cn(\n            \"w-full min-h-[100px] px-4 py-3 rounded-xl resize-none\",\n            \"text-[16px] text-[var(--color-foreground)]\",\n            \"bg-[var(--color-muted)] outline-none\",\n            \"border-2 border-transparent\",\n            \"placeholder:text-[var(--color-muted-foreground)]\",\n            \"transition-colors duration-150\",\n            \"focus:border-[var(--color-primary)] focus:bg-[var(--color-background)]\",\n            \"disabled:opacity-40 disabled:cursor-not-allowed\",\n            hasError && \"border-[var(--color-negative)] bg-[var(--color-background)]\",\n            className\n          )}\n          aria-invalid={hasError}\n          aria-describedby={\n            hasError ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined\n          }\n          {...props}\n        />\n        <div className=\"flex justify-between items-start\">\n          <div>\n            {hasError && errorMessage && (\n              <p id={`${inputId}-error`} className=\"text-[12px] text-[var(--color-negative)]\" role=\"alert\">\n                {errorMessage}\n              </p>\n            )}\n            {!hasError && helperText && (\n              <p id={`${inputId}-helper`} className=\"text-[12px] text-[var(--color-muted-foreground)]\">\n                {helperText}\n              </p>\n            )}\n          </div>\n          {showCount && maxLength && (\n            <p className=\"text-[12px] text-[var(--color-muted-foreground)] shrink-0 ml-auto\">\n              {count}/{maxLength}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n"]}

package/dist/chunk-NF7D4E7V.js

@@ -0,0 +1,52 @@
+import { __objRest, __spreadProps, __spreadValues, cn } from './chunk-MVGUWG27.js';
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var sizeMap = { sm: "h-1", md: "h-2", lg: "h-3" };
+var colorMap = {
+  primary: "bg-[var(--color-primary)]",
+  positive: "bg-[var(--color-positive)]",
+  negative: "bg-[var(--color-negative)]",
+  warning: "bg-[var(--color-warning)]"
+};
+var Progress = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, value = 0, size = "md", color = "primary", showLabel = false } = _b, props = __objRest(_b, ["className", "value", "size", "color", "showLabel"]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-1.5", children: [
+    showLabel && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-[12px] text-[var(--color-muted-foreground)]", children: [
+      /* @__PURE__ */ jsx("span", { children: "\uC9C4\uD589\uB960" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        Math.round(value),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ProgressPrimitive.Root,
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "relative w-full overflow-hidden rounded-full bg-[var(--color-muted)]",
+          sizeMap[size],
+          className
+        ),
+        value
+      }, props), {
+        children: /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            className: cn(
+              "h-full transition-all duration-500 ease-out rounded-full",
+              colorMap[color]
+            ),
+            style: { width: `${Math.min(100, Math.max(0, value))}%` }
+          }
+        )
+      })
+    )
+  ] });
+});
+Progress.displayName = "Progress";
+
+export { Progress };
+//# sourceMappingURL=chunk-NF7D4E7V.js.map
+//# sourceMappingURL=chunk-NF7D4E7V.js.map

package/dist/chunk-NF7D4E7V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Progress/Progress.tsx"],"names":[],"mappings":";;;;;AAYA,IAAM,UAAU,EAAE,EAAA,EAAI,OAAO,EAAA,EAAI,KAAA,EAAO,IAAI,KAAA,EAAM;AAClD,IAAM,QAAA,GAAW;AAAA,EACf,OAAA,EAAS,2BAAA;AAAA,EACT,QAAA,EAAU,4BAAA;AAAA,EACV,QAAA,EAAU,4BAAA;AAAA,EACV,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA,CAGrB,CAAC,EAAA,EAAuF,GAAA,KAAK;AAA5F,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,aAAW,KAAA,GAAQ,CAAA,EAAG,IAAA,GAAO,IAAA,EAAM,QAAQ,SAAA,EAAW,SAAA,GAAY,KAAA,EAvBvE,GAuBG,IAA8E,KAAA,GAAA,SAAA,CAA9E,EAAA,EAA8E,CAA5E,WAAA,EAAW,OAAA,EAAW,QAAa,OAAA,EAAmB,WAAA,CAAA,CAAA;AACzD,EAAA,uBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,IAAA,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uEAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAK,QAAA,EAAA,oBAAA,EAAG,CAAA;AAAA,2BACR,MAAA,EAAA,EAAM,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,MAAM,KAAK,CAAA;AAAA,QAAE;AAAA,OAAA,EAAC;AAAA,KAAA,EAC5B,CAAA;AAAA,oBAEF,GAAA;AAAA,MAAmB,iBAAA,CAAA,IAAA;AAAA,MAAlB,aAAA,CAAA,cAAA,CAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,sEAAA;AAAA,UACA,QAAQ,IAAI,CAAA;AAAA,UACZ;AAAA,SACF;AAAA,QACA;AAAA,OAAA,EACI,KAAA,CAAA,EARL;AAAA,QAUC,QAAA,kBAAA,GAAA;AAAA,UAAmB,iBAAA,CAAA,SAAA;AAAA,UAAlB;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,0DAAA;AAAA,cACA,SAAS,KAAK;AAAA,aAChB;AAAA,YACA,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAC,CAAA,CAAA,CAAA;AAAI;AAAA;AAC1D,OAAA;AAAA;AACF,GAAA,EACF,CAAA;AAAA,CACD;AACD,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-NF7D4E7V.js","sourcesContent":["import * as React from \"react\";\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface ProgressProps\n  extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {\n  value?: number;\n  size?: \"sm\" | \"md\" | \"lg\";\n  color?: \"primary\" | \"positive\" | \"negative\" | \"warning\";\n  showLabel?: boolean;\n}\n\nconst sizeMap = { sm: \"h-1\", md: \"h-2\", lg: \"h-3\" };\nconst colorMap = {\n  primary: \"bg-[var(--color-primary)]\",\n  positive: \"bg-[var(--color-positive)]\",\n  negative: \"bg-[var(--color-negative)]\",\n  warning: \"bg-[var(--color-warning)]\",\n};\n\nconst Progress = React.forwardRef<\n  React.ElementRef<typeof ProgressPrimitive.Root>,\n  ProgressProps\n>(({ className, value = 0, size = \"md\", color = \"primary\", showLabel = false, ...props }, ref) => (\n  <div className=\"w-full flex flex-col gap-1.5\">\n    {showLabel && (\n      <div className=\"flex justify-between text-[12px] text-[var(--color-muted-foreground)]\">\n        <span>진행률</span>\n        <span>{Math.round(value)}%</span>\n      </div>\n    )}\n    <ProgressPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"relative w-full overflow-hidden rounded-full bg-[var(--color-muted)]\",\n        sizeMap[size],\n        className\n      )}\n      value={value}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        className={cn(\n          \"h-full transition-all duration-500 ease-out rounded-full\",\n          colorMap[color]\n        )}\n        style={{ width: `${Math.min(100, Math.max(0, value))}%` }}\n      />\n    </ProgressPrimitive.Root>\n  </div>\n));\nProgress.displayName = \"Progress\";\n\nexport { Progress };\n"]}

package/dist/chunk-NRBDDNYV.cjs

@@ -0,0 +1,107 @@
+'use strict';
+
+var chunk4V3IOZPC_cjs = require('./chunk-4V3IOZPC.cjs');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function getStatus(index, currentStep) {
+  if (index < currentStep) return "completed";
+  if (index === currentStep) return "active";
+  return "upcoming";
+}
+var Stepper = ({ steps, currentStep, orientation = "horizontal", className }) => {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk4V3IOZPC_cjs.cn("flex flex-col", className), children: steps.map((step, index) => {
+      const status = getStatus(index, currentStep);
+      const isLast = index === steps.length - 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { index, status }),
+          !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunk4V3IOZPC_cjs.cn(
+                "w-0.5 flex-1 mt-1 mb-1 min-h-[24px]",
+                status === "completed" ? "bg-[var(--color-primary)]" : "bg-[var(--color-border)]"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk4V3IOZPC_cjs.cn("flex flex-col pb-6", isLast && "pb-0"), children: /* @__PURE__ */ jsxRuntime.jsx(StepLabel, { step, status }) })
+      ] }, index);
+    }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk4V3IOZPC_cjs.cn("flex items-start", className), children: steps.map((step, index) => {
+    const status = getStatus(index, currentStep);
+    const isLast = index === steps.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StepIndicator, { index, status }),
+        /* @__PURE__ */ jsxRuntime.jsx(StepLabel, { step, status, centered: true })
+      ] }),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: chunk4V3IOZPC_cjs.cn(
+            "h-0.5 flex-1 mt-[18px] mx-2 shrink",
+            status === "completed" ? "bg-[var(--color-primary)]" : "bg-[var(--color-border)]"
+          )
+        }
+      )
+    ] }, index);
+  }) });
+};
+function StepIndicator({ index, status }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: chunk4V3IOZPC_cjs.cn(
+        "flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[14px] font-semibold transition-colors duration-200",
+        status === "completed" ? "bg-[var(--color-primary)] text-white" : status === "active" ? "border-2 border-[var(--color-primary)] text-[var(--color-primary)] bg-[var(--color-surface)]" : "border-2 border-[var(--color-border)] text-[var(--color-muted-foreground)] bg-[var(--color-surface)]"
+      ),
+      children: status === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: index + 1 })
+    }
+  );
+}
+function StepLabel({ step, status, centered }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunk4V3IOZPC_cjs.cn("flex flex-col gap-0.5", centered && "items-center text-center"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: chunk4V3IOZPC_cjs.cn(
+          "text-[13px] font-medium",
+          status === "active" ? "text-[var(--color-primary)]" : status === "completed" ? "text-[var(--color-foreground)]" : "text-[var(--color-muted-foreground)]"
+        ),
+        children: step.title
+      }
+    ),
+    step.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[var(--color-muted-foreground)]", children: step.description })
+  ] });
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) });
+}
+
+exports.Stepper = Stepper;
+//# sourceMappingURL=chunk-NRBDDNYV.cjs.map
+//# sourceMappingURL=chunk-NRBDDNYV.cjs.map

package/dist/chunk-NRBDDNYV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Stepper/Stepper.tsx"],"names":["jsx","cn","jsxs","React"],"mappings":"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","file":"chunk-NRBDDNYV.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface StepItem {\n  title: string;\n  description?: string;\n}\n\nexport type StepStatus = \"completed\" | \"active\" | \"upcoming\";\n\nexport interface StepperProps {\n  steps: StepItem[];\n  currentStep: number;\n  orientation?: \"horizontal\" | \"vertical\";\n  className?: string;\n}\n\nfunction getStatus(index: number, currentStep: number): StepStatus {\n  if (index < currentStep) return \"completed\";\n  if (index === currentStep) return \"active\";\n  return \"upcoming\";\n}\n\nconst Stepper = ({ steps, currentStep, orientation = \"horizontal\", className }: StepperProps) => {\n  if (orientation === \"vertical\") {\n    return (\n      <div className={cn(\"flex flex-col\", className)}>\n        {steps.map((step, index) => {\n          const status = getStatus(index, currentStep);\n          const isLast = index === steps.length - 1;\n\n          return (\n            <div key={index} className=\"flex gap-4\">\n              <div className=\"flex flex-col items-center\">\n                <StepIndicator index={index} status={status} />\n                {!isLast && (\n                  <div\n                    className={cn(\n                      \"w-0.5 flex-1 mt-1 mb-1 min-h-[24px]\",\n                      status === \"completed\" ? \"bg-[var(--color-primary)]\" : \"bg-[var(--color-border)]\"\n                    )}\n                  />\n                )}\n              </div>\n              <div className={cn(\"flex flex-col pb-6\", isLast && \"pb-0\")}>\n                <StepLabel step={step} status={status} />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"flex items-start\", className)}>\n      {steps.map((step, index) => {\n        const status = getStatus(index, currentStep);\n        const isLast = index === steps.length - 1;\n\n        return (\n          <React.Fragment key={index}>\n            <div className=\"flex flex-col items-center gap-2 min-w-0 flex-1\">\n              <StepIndicator index={index} status={status} />\n              <StepLabel step={step} status={status} centered />\n            </div>\n            {!isLast && (\n              <div\n                className={cn(\n                  \"h-0.5 flex-1 mt-[18px] mx-2 shrink\",\n                  status === \"completed\" ? \"bg-[var(--color-primary)]\" : \"bg-[var(--color-border)]\"\n                )}\n              />\n            )}\n          </React.Fragment>\n        );\n      })}\n    </div>\n  );\n};\n\nfunction StepIndicator({ index, status }: { index: number; status: StepStatus }) {\n  return (\n    <div\n      className={cn(\n        \"flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-[14px] font-semibold transition-colors duration-200\",\n        status === \"completed\"\n          ? \"bg-[var(--color-primary)] text-white\"\n          : status === \"active\"\n          ? \"border-2 border-[var(--color-primary)] text-[var(--color-primary)] bg-[var(--color-surface)]\"\n          : \"border-2 border-[var(--color-border)] text-[var(--color-muted-foreground)] bg-[var(--color-surface)]\"\n      )}\n    >\n      {status === \"completed\" ? <CheckIcon /> : <span>{index + 1}</span>}\n    </div>\n  );\n}\n\nfunction StepLabel({ step, status, centered }: { step: StepItem; status: StepStatus; centered?: boolean }) {\n  return (\n    <div className={cn(\"flex flex-col gap-0.5\", centered && \"items-center text-center\")}>\n      <span\n        className={cn(\n          \"text-[13px] font-medium\",\n          status === \"active\"\n            ? \"text-[var(--color-primary)]\"\n            : status === \"completed\"\n            ? \"text-[var(--color-foreground)]\"\n            : \"text-[var(--color-muted-foreground)]\"\n        )}\n      >\n        {step.title}\n      </span>\n      {step.description && (\n        <span className=\"text-[12px] text-[var(--color-muted-foreground)]\">{step.description}</span>\n      )}\n    </div>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n\nexport { Stepper };\n"]}