prometeo-design-system 1.6.7 → 1.6.9

package/dist/ProfilePictureUpload.es.js

@@ -0,0 +1,207 @@
+import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { motion as n, AnimatePresence as L } from "framer-motion";
+import { useRef as B, useState as C } from "react";
+import b from "./Avatar.es.js";
+const I = {
+  sm: "w-16 h-16",
+  md: "w-24 h-24",
+  lg: "w-32 h-32",
+  xl: "w-40 h-40"
+}, M = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8"
+}, N = {
+  sm: "w-6 h-6",
+  md: "w-7 h-7",
+  lg: "w-8 h-8",
+  xl: "w-10 h-10"
+}, P = {
+  sm: "-bottom-1 -right-0.5",
+  md: "-bottom-0.5 -right-0.5",
+  lg: "bottom-1 right-1",
+  xl: "bottom-3 right-2"
+}, d = {
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-7 h-7"
+}, S = {
+  sm: "-top-0.5 -right-0.5",
+  md: "-top-1 -right-1",
+  lg: "-top-1 -right-0",
+  xl: "top-1 right-1"
+};
+function A({
+  imageUrl: s,
+  fallbackText: f = "S L",
+  onFileSelect: p,
+  onEditClick: l,
+  onRemoveClick: g,
+  size: o = "lg",
+  className: x,
+  disabled: t = !1,
+  showRemoveButton: w = !0,
+  acceptedTypes: v = "image/*",
+  maxFileSize: c = 5 * 1024 * 1024,
+  onError: u
+}) {
+  const h = B(null), [i, m] = C(!1), j = (r) => r.type.startsWith("image/") ? r.size > c ? (u?.(`La imagen debe ser menor a ${Math.round(c / 1024 / 1024)}MB`), !1) : !0 : (u?.("Por favor selecciona un archivo de imagen válido"), !1), y = (r) => {
+    const a = r.target.files?.[0];
+    a && (j(a) && p?.(a), r.target.value = "");
+  }, k = () => {
+    t || (l ? l() : h.current?.click());
+  }, $ = (r) => {
+    r.stopPropagation(), !t && g?.();
+  };
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      onMouseEnter: () => m(!0),
+      onMouseLeave: () => m(!1),
+      className: `relative inline-block border-inherit ${x || ""}`,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            ref: h,
+            type: "file",
+            accept: v,
+            onChange: y,
+            className: "hidden",
+            disabled: t
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          n.div,
+          {
+            className: `
+                    ${I[o]} 
+                    rounded-full 
+                    overflow-hidden
+                    flex items-center justify-center
+                    relative
+                    ${t ? "opacity-50 cursor-not-allowed" : ""}
+                `,
+            children: /* @__PURE__ */ e.jsx(
+              b,
+              {
+                urlImage: s,
+                fallbackText: f,
+                sizeImage: o,
+                sizeFallback: o
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          n.button,
+          {
+            className: `
+                    absolute 
+                    ${P[o]}
+                    border-3
+                    border-inherit
+                    ${N[o]}
+                    rounded-lg 
+                    bg-primary-default-default 
+                    hover:bg-primary-default-hover
+                    transition-all duration-300
+                    flex 
+                    items-center 
+                    justify-center
+                    cursor-pointer
+                    ${t ? "opacity-50 cursor-not-allowed" : ""}
+               `,
+            onClick: k,
+            disabled: t,
+            whileTap: t ? {} : { scale: 0.95, transition: { duration: 0.2, ease: "easeInOut" } },
+            initial: { scale: 0, rotate: -180 },
+            animate: { scale: 1, rotate: 0 },
+            children: /* @__PURE__ */ e.jsx(
+              n.svg,
+              {
+                className: `${M[o]} text-white`,
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                animate: i && !t ? {
+                  x: [0, -1, 0, 1, -1, 0, 1],
+                  y: [0, 1, 0, 1, 0, 1, 1],
+                  rotate: [0, 5, -3, 8, -5, 3, 1],
+                  transition: {
+                    duration: 2,
+                    ease: "easeInOut"
+                  }
+                } : { x: 0, y: 0, rotate: 0 },
+                transition: {
+                  duration: 1.2,
+                  repeat: 0,
+                  ease: "easeInOut"
+                },
+                children: /* @__PURE__ */ e.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e.jsx(L, { children: s && w && !t && /* @__PURE__ */ e.jsx(
+          n.button,
+          {
+            className: `
+                            absolute 
+                            ${S[o]} 
+                            ${d[o]} 
+                            rounded-full 
+                            shadow-lg 
+                           bg-error-light
+                            flex 
+                            cursor-pointer
+                            items-center 
+                            justify-center
+                            ${t ? "opacity-50 cursor-not-allowed" : ""}
+                        `,
+            disabled: t,
+            onClick: $,
+            initial: { scale: 0, opacity: 0, rotate: -90 },
+            animate: {
+              scale: i ? 1 : 0.8,
+              opacity: i ? 1 : 0,
+              rotate: 0
+            },
+            exit: { scale: 0, opacity: 0, rotate: 90 },
+            whileTap: { scale: 0.9 },
+            transition: {
+              type: "spring",
+              stiffness: 300,
+              damping: 25
+            },
+            children: /* @__PURE__ */ e.jsx(
+              n.svg,
+              {
+                className: `${d[o]} text-white p-1`,
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                whileHover: { rotate: 90 },
+                transition: { duration: 0.2 },
+                children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  A as ProfilePictureUpload
+};

package/dist/Steps.d.ts

@@ -0,0 +1,2 @@
+export * from './exports/Steps'
+export {}

package/dist/Steps.es.js

@@ -0,0 +1,189 @@
+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 { Icons as y } from "./Icons.es.js";
+const b = ({
+  index: l,
+  isHorizontal: s,
+  currentStep: d
+}) => {
+  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: [
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: "absolute inset-0 rounded-full bg-neutral-medium-default"
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      r.div,
+      {
+        className: "absolute inset-0 rounded-full bg-primary-default-default",
+        initial: {
+          scaleX: s ? 0 : 1,
+          scaleY: s ? 1 : 0,
+          opacity: 0
+        },
+        animate: {
+          scaleX: i ? 1 : s ? 0 : 1,
+          scaleY: i || s ? 1 : 0,
+          opacity: i ? 1 : 0
+        },
+        transition: {
+          duration: 0.2,
+          ease: "easeInOut",
+          delay: l * 0.1
+        },
+        style: {
+          originX: s ? 0 : 0.5,
+          originY: s ? 0.5 : 0
+        }
+      }
+    ),
+    n && /* @__PURE__ */ e.jsx(
+      r.div,
+      {
+        className: "absolute inset-0 rounded-full bg-primary-default-default",
+        initial: {
+          scaleX: s ? 0 : 1,
+          scaleY: s ? 1 : 0,
+          opacity: 0
+        },
+        animate: {
+          scaleX: 1,
+          scaleY: 1,
+          opacity: [0, 0.3, 0]
+        },
+        transition: {
+          duration: 1.5,
+          repeat: 1 / 0,
+          ease: "easeInOut"
+        },
+        style: {
+          originX: s ? 0 : 0.5,
+          originY: s ? 0.5 : 0,
+          filter: "blur(4px)"
+        }
+      }
+    )
+  ] });
+}, I = ({
+  steps: l,
+  currentStep: s,
+  orientation: d = "horizontal",
+  variant: i = "default",
+  size: n = "md",
+  className: f = "",
+  onStepClick: x,
+  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 = {
+    sm: {
+      circle: "w-8 h-8 text-xs",
+      title: "text-sm",
+      description: "text-xs",
+      spacing: c ? "gap-4" : "gap-1"
+    },
+    md: {
+      circle: "w-10 h-10 text-sm",
+      title: "text-base",
+      description: "text-sm",
+      spacing: c ? "gap-3" : "gap-2"
+    },
+    lg: {
+      circle: "w-12 h-12 text-base",
+      title: "text-lg",
+      description: "text-base",
+      spacing: c ? "gap-4" : "gap-3"
+    }
+  }, 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) {
+      case "completed":
+        return `${a} 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`;
+      default:
+        return `${a} 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(
+        "div",
+        {
+          className: "absolute",
+          style: v(n),
+          children: /* @__PURE__ */ e.jsx(
+            b,
+            {
+              index: a,
+              isHorizontal: c,
+              currentStep: s
+            }
+          )
+        }
+      ),
+      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.jsx(
+          r.div,
+          {
+            className: `${g(o)} ${u ? "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
+          }
+        ),
+        a < l.length - 1 && /* @__PURE__ */ e.jsx(
+          b,
+          {
+            index: a,
+            isHorizontal: c,
+            currentStep: s
+          }
+        )
+      ] }),
+      i !== "minimal" && /* @__PURE__ */ e.jsx(
+        r.div,
+        {
+          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 })
+        }
+      )
+    ] }) }, t.id);
+  }) });
+};
+export {
+  I as Steps
+};

package/dist/components/Button/Button.d.ts

@@ -22,6 +22,7 @@ export interface ButtonProps extends VariantProps<typeof buttonVariants> {
     className?: string;
     disabled?: boolean;
     variant?: "filled" | "outline" | "text";
+    form?: string;
 }
-export default function Button({ label, onClick, icon, contentClassName, loadingText, animate, animateIcon, isLoading, disabled, type, variant, color, size, children, Spinner, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function Button({ label, onClick, icon, contentClassName, loadingText, animate, animateIcon, isLoading, disabled, type, variant, color, size, children, Spinner, className, form, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/InputFormik/InputFormik.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+export type LabelVariant = "default" | "static";
 export interface IInputFormik {
     label: string;
     icon?: ReactNode;
@@ -8,6 +9,8 @@ export interface IInputFormik {
     id?: string;
     type?: string;
     name: string;
+    labelVariant?: LabelVariant;
+    placeholder?: string;
     onBlur?: () => void;
     onFocus?: () => void;
     disabled?: boolean;
@@ -15,5 +18,5 @@ export interface IInputFormik {
     onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
-declare const InputFormik: ({ icon, iconPosition, label, className, containerClassName, id, type, disabled, ...props }: IInputFormik) => import("react/jsx-runtime").JSX.Element;
+declare const InputFormik: ({ icon, iconPosition, label, className, containerClassName, id, type, labelVariant, placeholder, disabled, ...props }: IInputFormik) => import("react/jsx-runtime").JSX.Element;
 export default InputFormik;

package/dist/components/InputMultiple/InputMultiple.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-interface InputMultipleProps {
+export interface InputMultipleProps {
     label: string;
     name: string;
     onChange: (value: string[]) => void;

package/dist/components/ProfilePictureUpload/ProfilePictureUpload.d.ts

@@ -1,4 +1,4 @@
-interface ProfilePictureUploadProps {
+export interface ProfilePictureUploadProps {
     imageUrl?: string;
     fallbackText?: string;
     onFileSelect?: (file: File) => void;
@@ -13,4 +13,3 @@ interface ProfilePictureUploadProps {
     onError?: (error: string) => void;
 }
 export declare function ProfilePictureUpload({ imageUrl, fallbackText, onFileSelect, onEditClick, onRemoveClick, size, className, disabled, showRemoveButton, acceptedTypes, maxFileSize, onError, }: ProfilePictureUploadProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/exports/InputMultiple.d.ts

@@ -0,0 +1 @@
+export { default as InputMultiple } from '../components/InputMultiple/InputMultiple';

package/dist/exports/ProfilePictureUpload.d.ts

@@ -0,0 +1,2 @@
+export { ProfilePictureUpload } from '../components/ProfilePictureUpload/ProfilePictureUpload';
+export type { ProfilePictureUploadProps } from '../components/ProfilePictureUpload/ProfilePictureUpload';

package/dist/exports/Steps.d.ts

@@ -0,0 +1,2 @@
+export { default as Steps } from '../components/Steps/Steps';
+export type { Step, StepsProps } from '../components/Steps/Steps';

package/dist/index.d.ts

@@ -12,16 +12,19 @@ export { default as InputFormik } from './components/InputFormik/InputFormik';
 export { default as Logo } from './components/Logo/Logo';
 export { Menu } from './components/Menu/MenuComposable';
 export { default as Pagination } from './components/Pagination/Pagination';
+export { ProfilePictureUpload } from './components/ProfilePictureUpload/ProfilePictureUpload';
 export { default as ProgressBar } from './components/ProgressBar/ProgressBar';
 export { default as Select } from './components/Select/Select';
 export { default as SelectFormik } from './components/SelectFormik/SelectFormik';
 export { default as ChangueAccount } from './components/Sidebar/components/changue-account';
 export { default as Spinner } from './components/Spinner/Spinner';
+export { default as Steps } from './components/Steps/Steps';
 export { default as SwipeContainer } from './components/SwipeContainer/SwipeContainer';
 export { default as TabLinks } from './components/TabLinks/TabLinks';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/Table/Table';
 export { default as TextArea } from './components/TextArea/TextArea';
 export { default as Tooltip } from './components/Tooltip/Tootip';
+export { default as InputMultiple } from './components/InputMultiple/InputMultiple';
 export { default as LayoutGeneric } from './components/Layout/LayoutGeneric';
 export * from './components/Sidebar';
 export { SecondaryBar } from './components/Sidebar/SecondaryBar/SecondaryBar';
@@ -56,6 +59,8 @@ export type { INavAction, INavLink, Role, RoleLevels, } from './components/Sideb
 export type { SidebarContextValue } from './components/Sidebar/hooks/useSidebarHook';
 export type { SpinnerProps, SpinnerSize, SpinnerVariant, } from './components/Spinner/Spinner';
 export type { PaginationProps } from './components/Pagination/Pagination';
+export type { ProfilePictureUploadProps } from './components/ProfilePictureUpload/ProfilePictureUpload';
+export type { Step, StepsProps } from './components/Steps/Steps';
 export type { SelectOptionRendererProps, SelectProps, SelectionDisplayProps, } from './components/Select/Select';
 export type { ISelectFormik, ISelectFormikOption, } from './components/SelectFormik/SelectFormik';
 export type { DialogHandle } from './components/Dialog/Dialog';
@@ -64,4 +69,5 @@ export type { ToasterPrometeo } from './components/Toaster/Toaster';
 export type { LayoutGenericProps } from './components/Layout/LayoutGeneric';
 export type { CountdownProgressProps } from './components/ProgressBar/ProgressBar';
 export type { IToolTipProps } from './components/Tooltip/Tootip';
+export type { InputMultipleProps } from './components/InputMultiple/InputMultiple';
 export { Icons } from './Icons/Icons';