prometeo-design-system 1.7.6 → 1.8.0

package/dist/Steps.es.js

@@ -1,14 +1,27 @@
 import { j as e } from "./jsx-runtime-ByW6EXIE.js";
 import { c as j } from "./cn-B6yFEsav.js";
 import { motion as r } from "framer-motion";
+import N from "react";
 import { Icons as y } from "./Icons.es.js";
 const b = ({
-  index: l,
-  isHorizontal: s,
-  currentStep: d
+  index: n,
+  isHorizontal: t,
+  currentStep: u,
+  size: s
 }) => {
-  const i = l < d, n = l === d - 1;
-  return /* @__PURE__ */ e.jsxs("div", { className: `relative ${s ? "w-20 h-1" : "w-0.5 h-8"}`, children: [
+  const i = n < u, x = n === u - 1, o = {
+    horizontal: {
+      sm: "w-[44px] h-[2px]",
+      md: "w-20 h-1",
+      lg: "w-20 h-1"
+    },
+    vertical: {
+      sm: "w-[2px] h-[44px]",
+      md: "w-1 h-20",
+      lg: "w-1 h-20"
+    }
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: `relative ${t ? o.horizontal[s] : o.vertical[s]}`, children: [
     /* @__PURE__ */ e.jsx(
       "div",
       {
@@ -20,33 +33,33 @@ const b = ({
       {
         className: "absolute inset-0 rounded-full bg-primary-default-default",
         initial: {
-          scaleX: s ? 0 : 1,
-          scaleY: s ? 1 : 0,
+          scaleX: t ? 0 : 1,
+          scaleY: t ? 1 : 0,
           opacity: 0
         },
         animate: {
-          scaleX: i ? 1 : s ? 0 : 1,
-          scaleY: i || s ? 1 : 0,
+          scaleX: i ? 1 : t ? 0 : 1,
+          scaleY: i || t ? 1 : 0,
           opacity: i ? 1 : 0
         },
         transition: {
           duration: 0.2,
           ease: "easeInOut",
-          delay: l * 0.1
+          delay: n * 0.1
         },
         style: {
-          originX: s ? 0 : 0.5,
-          originY: s ? 0.5 : 0
+          originX: t ? 0 : 0.5,
+          originY: t ? 0.5 : 0
         }
       }
     ),
-    n && /* @__PURE__ */ e.jsx(
+    x && /* @__PURE__ */ e.jsx(
       r.div,
       {
         className: "absolute inset-0 rounded-full bg-primary-default-default",
         initial: {
-          scaleX: s ? 0 : 1,
-          scaleY: s ? 1 : 0,
+          scaleX: t ? 0 : 1,
+          scaleY: t ? 1 : 0,
           opacity: 0
         },
         animate: {
@@ -60,130 +73,141 @@ const b = ({
           ease: "easeInOut"
         },
         style: {
-          originX: s ? 0 : 0.5,
-          originY: s ? 0.5 : 0,
+          originX: t ? 0 : 0.5,
+          originY: t ? 0.5 : 0,
           filter: "blur(4px)"
         }
       }
     )
   ] });
-}, I = ({
-  steps: l,
-  currentStep: s,
-  orientation: d = "horizontal",
-  variant: i = "default",
-  size: n = "md",
-  className: f = "",
-  onStepClick: x,
+}, k = ({
+  steps: n,
+  currentStep: t,
+  orientation: u = "horizontal",
+  variant: s = "default",
+  size: i = "md",
+  className: x = "",
+  onStepClick: o,
   allowClickableSteps: p = !1
 }) => {
-  const c = d === "horizontal", v = (t) => ({
-    sm: { right: "-40px", top: "16px" },
-    md: { right: "-40px", top: "20px" },
-    lg: { right: "-40px", top: "24px" }
-  })[t], m = {
+  const c = u === "horizontal", m = {
     sm: {
-      circle: "w-8 h-8 text-xs",
+      circle: "size-7 aspect-square text-xs",
       title: "text-sm",
-      description: "text-xs",
-      spacing: c ? "gap-4" : "gap-1"
+      description: "text-[11px] w-16",
+      spacing: c ? "gap-2" : "gap-1",
+      connectorContainer: "px-2",
+      iconSize: 20
     },
     md: {
       circle: "w-10 h-10 text-sm",
       title: "text-base",
-      description: "text-sm",
-      spacing: c ? "gap-3" : "gap-2"
+      description: "text-sm w-20",
+      spacing: c ? "gap-3" : "gap-2",
+      connectorContainer: "px-2",
+      iconSize: 24
     },
     lg: {
       circle: "w-12 h-12 text-base",
       title: "text-lg",
-      description: "text-base",
-      spacing: c ? "gap-4" : "gap-3"
+      description: "text-base w-28",
+      spacing: c ? "gap-4" : "gap-3",
+      connectorContainer: "px-2",
+      iconSize: 28
     }
-  }, N = (t) => t < s ? "completed" : t === s ? "current" : "upcoming", g = (t) => {
-    const a = `${m[n].circle} rounded-full flex items-center justify-center font-medium`;
-    switch (t) {
+  }, w = (a) => a < t ? "completed" : a === t ? "current" : "upcoming", h = (a) => {
+    const l = `${m[i].circle} rounded-full flex items-center justify-center font-medium`;
+    switch (a) {
       case "completed":
-        return `${a} bg-primary-default-default text-neutral-strong-default shadow-lg`;
+        return `${l} bg-primary-default-default text-neutral-strong-default shadow-lg`;
       case "current":
-        return `${a} border-3 border-primary text-neutral-strong-default shadow-lg duration-900`;
+        return `${l} ring-[2px] ring-primary-default-default text-neutral-strong-default shadow-lg duration-900 `;
       default:
-        return `${a} bg-neutral-medium-default text-neutral-medium-default`;
+        return `${l} bg-neutral-medium-default text-neutral-medium-default`;
     }
-  }, h = (t) => {
-    p && x && x(t);
-  }, w = c ? `flex items-center ${f}` : `space-y-0 ${f}`;
-  return /* @__PURE__ */ e.jsx("div", { className: w, children: l.map((t, a) => {
-    const o = N(a), u = p && x;
-    return /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: c ? /* @__PURE__ */ e.jsx("div", { className: "flex", children: /* @__PURE__ */ e.jsxs("div", { className: "w-40 flex flex-col items-center relative", children: [
-      /* @__PURE__ */ e.jsx(
-        r.div,
-        {
-          className: `${g(o)} ${u ? "cursor-pointer" : ""} relative z-10`,
-          initial: { scale: 0.8, opacity: 0 },
-          animate: { scale: 1, opacity: 1 },
-          transition: { duration: 0.3, delay: a * 0.1 },
-          whileTap: u ? { scale: 0.95 } : {},
-          onClick: () => h(a),
-          children: i === "numbered" || !t.icon ? o === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: a + 1 }) : t.icon
-        }
-      ),
-      a < l.length - 1 && /* @__PURE__ */ e.jsx(
+  }, g = (a) => {
+    p && o && o(a);
+  }, v = c ? `flex items-center w-full justify-center ${x}` : `space-y-0 ${x}`;
+  return /* @__PURE__ */ e.jsx("div", { className: v, children: n.map((a, l) => {
+    const d = w(l), f = p && o;
+    return /* @__PURE__ */ e.jsx("div", { className: "flex items-center", children: c ? /* @__PURE__ */ e.jsxs("div", { className: "flex", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "w-max flex flex-col items-center relative", children: [
+        /* @__PURE__ */ e.jsx(
+          r.div,
+          {
+            className: `${h(d)} ${f ? "cursor-pointer" : ""} relative z-10`,
+            initial: { scale: 0.8, opacity: 0 },
+            animate: { scale: 1, opacity: 1 },
+            transition: { duration: 0.3, delay: l * 0.3 },
+            whileTap: f ? { scale: 0.95 } : {},
+            onClick: () => g(l),
+            children: s === "numbered" || s === "numbered-minimal" || !a.icon ? d === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: l + 1 }) : N.cloneElement(a.icon, { size: m[i].iconSize })
+          }
+        ),
+        s !== "minimal" && s !== "numbered-minimal" && a.description && /* @__PURE__ */ e.jsx("p", { className: j(
+          "absolute text-center w-28 -bottom-2 translate-y-full",
+          m[i].description,
+          "text-gray-400 mt-2 text-center",
+          d === "current" ? "text-neutral-strong-default font-semibold " : "text-neutral-medium-default"
+        ), children: a.description })
+      ] }),
+      l < n.length - 1 && /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: "absolute",
-          style: v(n),
+          className: `flex items-center w-max ${m[i].connectorContainer}`,
           children: /* @__PURE__ */ e.jsx(
             b,
             {
-              index: a,
+              index: l,
               isHorizontal: c,
-              currentStep: s
+              currentStep: t,
+              size: i
             }
           )
         }
-      ),
-      i !== "minimal" && t.description && /* @__PURE__ */ e.jsx("p", { className: j(
-        m[n].description,
-        "text-gray-400 mt-2 text-center max-w-full",
-        o === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"
-      ), children: t.description })
-    ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "relative flex w-36", children: [
-      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center w-full", children: [
+      )
+    ] }) : /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col items-center w-max", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center w-full relative", children: [
         /* @__PURE__ */ e.jsx(
           r.div,
           {
-            className: `${g(o)} ${u ? "cursor-pointer" : ""}`,
+            className: `${h(d)} ${f ? "cursor-pointer" : ""}`,
             initial: { scale: 0.8, opacity: 0 },
             animate: { scale: 1, opacity: 1 },
-            transition: { duration: 0.3, delay: a * 0.1 },
-            whileTap: u ? { scale: 0.95 } : {},
-            onClick: () => h(a),
-            children: i === "numbered" || !t.icon ? o === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: a + 1 }) : t.icon
+            transition: { duration: 0.3, delay: l * 0.1 },
+            whileTap: f ? { scale: 0.95 } : {},
+            onClick: () => g(l),
+            children: s === "numbered" || s === "numbered-minimal" || !a.icon ? d === "completed" ? /* @__PURE__ */ e.jsx(r.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { duration: 0.2 }, children: /* @__PURE__ */ e.jsx(y.Check, { size: 24, className: "text-neutral-strong-default" }) }) : /* @__PURE__ */ e.jsx("span", { children: l + 1 }) : a.icon
           }
         ),
-        a < l.length - 1 && /* @__PURE__ */ e.jsx(
-          b,
+        s !== "minimal" && s !== "numbered-minimal" && /* @__PURE__ */ e.jsx(
+          r.div,
           {
-            index: a,
-            isHorizontal: c,
-            currentStep: s
+            className: `absolute -right-4 top-1/2 -translate-y-1/2  translate-x-full ml-4  gap-3 flex flex-col w-full ${m[i].spacing} flex  h-full`,
+            initial: { opacity: 0, x: -10 },
+            animate: { opacity: 1, x: 0 },
+            transition: { duration: 0.3, delay: l * 0.1 + 0.1 },
+            children: a.description && /* @__PURE__ */ e.jsx("p", { className: j(
+              "h-full text-start flex items-center justify-start ",
+              m[i].description,
+              "text-gray-400",
+              d === "current" ? "text-neutral-strong-default font-semibold " : "text-neutral-medium-default"
+            ), children: a.description })
           }
         )
       ] }),
-      i !== "minimal" && /* @__PURE__ */ e.jsx(
-        r.div,
+      l < n.length - 1 && /* @__PURE__ */ e.jsx("div", { className: "py-2", children: /* @__PURE__ */ e.jsx(
+        b,
         {
-          className: `absolute -right-30 ml-4 top-3 gap-3 flex flex-col w-full ${m[n].spacing} flex  h-full`,
-          initial: { opacity: 0, x: -10 },
-          animate: { opacity: 1, x: 0 },
-          transition: { duration: 0.3, delay: a * 0.1 + 0.1 },
-          children: t.description && /* @__PURE__ */ e.jsx("p", { className: j(m[n].description, "text-gray-400", o === "current" ? "text-neutral-strong-default font-semibold text-sm" : "text-neutral-medium-default"), children: t.description })
+          index: l,
+          isHorizontal: c,
+          currentStep: t,
+          size: i
         }
-      )
-    ] }) }, t.id);
+      ) })
+    ] }) }, a.id);
   }) });
 };
 export {
-  I as Steps
+  k as Steps
 };

package/dist/components/OtpInput/OtpInput.d.ts

@@ -1,15 +1,27 @@
+import { default as React } from 'react';
 export interface OtpInputProps {
     value?: string;
     onChange?: (value: string) => void;
     onComplete?: (value: string) => void;
+    onBlur?: () => void;
     maxLength?: number;
     placeholder?: string;
     disabled?: boolean;
     className?: string;
     autoFocus?: boolean;
     pasteTransformer?: (pasted: string) => string;
-    errorComponent?: React.ReactNode;
+    errorComponent?: React.ReactElement<{
+        className?: string;
+    }> | string;
     hasError?: boolean;
+    helperComponent?: React.ReactElement<{
+        className?: string;
+    }> | string;
+    helperAlignment?: 'left' | 'center' | 'right';
+    slotClassName?: string;
+    hideSlotsMiddleSeparator?: boolean;
+    name?: string;
+    variant?: 'default' | 'error' | 'success';
 }
-declare const OtpInputComponent: ({ value, onChange, onComplete, maxLength, placeholder, disabled, className, autoFocus, pasteTransformer, errorComponent, hasError, }: OtpInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const OtpInputComponent: ({ value, name, onChange, onComplete, onBlur, maxLength, placeholder, disabled, className, autoFocus, pasteTransformer, errorComponent, hasError, helperComponent, helperAlignment, slotClassName, variant, hideSlotsMiddleSeparator }: OtpInputProps) => import("react/jsx-runtime").JSX.Element;
 export default OtpInputComponent;

package/dist/components/Steps/Steps.d.ts

@@ -3,13 +3,15 @@ export interface Step {
     id: string | number;
     title: string;
     description?: string;
-    icon?: React.ReactNode;
+    icon?: React.ReactElement<{
+        size: number;
+    }>;
 }
 export interface StepsProps {
     steps: Step[];
     currentStep: number;
     orientation?: "horizontal" | "vertical";
-    variant?: "default" | "minimal" | "numbered";
+    variant?: "default" | "minimal" | "numbered" | "numbered-minimal";
     size?: "sm" | "md" | "lg";
     className?: string;
     onStepClick?: (stepIndex: number) => void;

package/dist/exports/useDevice.d.ts

@@ -1 +1 @@
-export { useDevices } from '../hooks/useDevice';
+export { useIsMobile } from '../hooks/useDevice';

package/dist/hooks/useDevice.d.ts

@@ -1,7 +1 @@
-export declare const useDevices: () => {
-    isMobile: boolean;
-    isTablet: boolean;
-    isDesktop: boolean;
-    isTouchDevice: boolean;
-    screenWidth: number;
-};
+export declare const useIsMobile: () => boolean;

package/dist/index.d.ts

@@ -41,7 +41,7 @@ export { SidebarProvider as SidebarRefProvider, useSidebarContext } from './comp
 export { SidebarProvider } from './components/Sidebar/hooks/SidebarProvider';
 export { useSidebar } from './components/Sidebar/hooks/useSidebarHook';
 export { useClickOutside } from './hooks/useClickOutside';
-export { useDevices } from './hooks/useDevice';
+export { useIsMobile } from './hooks/useDevice';
 export type { ButtonProps } from './components/Button/Button';
 export type { ISessionLocalStorage } from './components/CardProfile/CardProfile';
 export type { CheckBoxProps } from './components/CheckBox/CheckBox';

package/dist/preview/SelectPreview.d.ts

@@ -0,0 +1,2 @@
+declare const SelectPreview: () => import("react/jsx-runtime").JSX.Element;
+export default SelectPreview;

package/dist/preview/StepsPreview.d.ts

@@ -0,0 +1,2 @@
+declare const StepsPreview: () => import("react/jsx-runtime").JSX.Element;
+export default StepsPreview;