siesa-ui-kit 1.0.4 → 1.0.6

package/dist/index.js

@@ -0,0 +1,1479 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, cloneElement, useRef, useEffect, useState, createContext, useContext } from "react";
+const Button = ({
+  type = "default",
+  size = "base",
+  iconOnly = false,
+  leftIcon,
+  rightIcon,
+  children,
+  disabled = false,
+  className = "",
+  onClick,
+  htmlType = "button",
+  fullWidth = false,
+  ariaLabel,
+  badge = false,
+  badgeCount,
+  badgeColor = "red",
+  ...rest
+}) => {
+  const sizeClasses = {
+    xs: iconOnly ? "h-6 w-6 p-1" : "h-6 py-1 px-2 gap-2",
+    sm: iconOnly ? "h-7 w-7 p-1.5" : "h-7 py-1 px-2 gap-2",
+    base: iconOnly ? "h-8 w-8 p-2" : "h-8 py-1.5 px-2.5 gap-2",
+    l: iconOnly ? "h-9 w-9 p-2.5" : "h-9 py-2 px-3 gap-3",
+    xl: iconOnly ? "h-10 w-10 p-3" : "h-10 py-2 px-4 gap-3"
+  };
+  const iconSizeClasses = {
+    xs: "w-4 h-4",
+    sm: "w-4 h-4",
+    base: "w-4 h-4",
+    l: "w-4 h-4",
+    xl: "w-4 h-4"
+  };
+  const textSizeClasses = {
+    xs: "text-xs",
+    // Label Tiny - 12px
+    sm: "text-sm",
+    // Label Small - 14px
+    base: "text-sm",
+    // Label Small - 14px (default para base)
+    l: "text-sm",
+    // Label Small - 14px (corregido según Figma)
+    xl: "text-sm"
+    // Label Small - 14px (corregido según Figma)
+  };
+  const typeClasses = {
+    default: `
+      bg-primary-custom-600
+      text-primary-inverse-content
+      border
+      border-primary-inverse-border
+      shadow-button-inset
+      hover:bg-primary-custom-500
+      active:scale-95
+      transition-all
+      duration-150
+      dark:bg-dark-bg-inverse
+      dark:text-dark-content-inverse
+      dark:border-dark-border-inverse
+      dark:hover:bg-dark-bg-inverse/90
+    `,
+    outline: `
+      bg-transparent
+      text-primary-custom-600
+      border
+      border-primary-custom-300
+      shadow-sm
+      hover:bg-primary-custom-100
+      active:scale-95
+      transition-all
+      duration-150
+      dark:text-dark-content-custom
+      dark:border-dark-border-custom
+      dark:hover:bg-dark-bg-custom/20
+    `,
+    plain: `
+      bg-transparent
+      text-primary-custom-600
+      border
+      border-transparent
+      hover:bg-hover-overlay
+      active:scale-95
+      transition-all
+      duration-150
+      dark:text-dark-content-custom
+      dark:hover:bg-hover-overlay-dark
+    `
+  };
+  const baseClasses = `
+    inline-flex
+    items-center
+    justify-center
+    rounded-md
+    font-bold
+    whitespace-nowrap
+    focus:outline-none
+    focus:ring-4
+    focus:ring-primary-custom-400
+    focus:ring-offset-2
+    focus:ring-offset-primary-custom-100
+    dark:focus:ring-dark-border-custom
+    dark:focus:ring-offset-dark-bg-primary
+    disabled:opacity-50
+    disabled:cursor-not-allowed
+    disabled:pointer-events-none
+  `;
+  const widthClass = fullWidth ? "w-full" : "";
+  const buttonClasses = [
+    baseClasses,
+    sizeClasses[size],
+    typeClasses[type],
+    widthClass,
+    className
+  ].join(" ").replace(/\s+/g, " ").trim();
+  const renderIcon = (icon) => {
+    if (!icon) return null;
+    return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center justify-center ${iconSizeClasses[size]}`, children: icon });
+  };
+  const renderContent = () => {
+    if (iconOnly) {
+      return renderIcon(leftIcon);
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && renderIcon(leftIcon),
+      children && /* @__PURE__ */ jsx("span", { className: textSizeClasses[size], children }),
+      rightIcon && renderIcon(rightIcon)
+    ] });
+  };
+  const badgeColorClasses = {
+    zinc: { bg: "bg-zinc-600", text: "text-white" },
+    red: { bg: "bg-red-700", text: "text-white" },
+    orange: { bg: "bg-orange-700", text: "text-white" },
+    amber: { bg: "bg-amber-700", text: "text-white" },
+    yellow: { bg: "bg-yellow-700", text: "text-white" },
+    lime: { bg: "bg-lime-700", text: "text-white" },
+    green: { bg: "bg-green-700", text: "text-white" },
+    emerald: { bg: "bg-emerald-700", text: "text-white" },
+    teal: { bg: "bg-teal-700", text: "text-white" },
+    cyan: { bg: "bg-cyan-700", text: "text-white" },
+    sky: { bg: "bg-sky-700", text: "text-white" },
+    blue: { bg: "bg-blue-700", text: "text-white" },
+    indigo: { bg: "bg-indigo-700", text: "text-white" },
+    violet: { bg: "bg-violet-700", text: "text-white" },
+    purple: { bg: "bg-purple-700", text: "text-white" },
+    fuchsia: { bg: "bg-fuchsia-700", text: "text-white" },
+    pink: { bg: "bg-pink-700", text: "text-white" },
+    rose: { bg: "bg-rose-700", text: "text-white" },
+    primary: { bg: "bg-primary-custom-600", text: "text-white" },
+    secondary: { bg: "bg-zinc-600", text: "text-white" },
+    tertiary: { bg: "bg-zinc-600", text: "text-white" }
+  };
+  const badgeColors = badgeColorClasses[badgeColor] || badgeColorClasses.red;
+  const renderBadge = () => {
+    if (!badge && badgeCount === void 0) return null;
+    if (badgeCount !== void 0) {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `
+            absolute
+            -top-1
+            -right-1
+            flex
+            items-center
+            justify-center
+            min-w-[16px]
+            h-4
+            px-1
+            rounded-full
+            text-[10px]
+            font-bold
+            leading-none
+            ${badgeColors.bg}
+            ${badgeColors.text}
+            pointer-events-none
+          `.trim().replace(/\s+/g, " "),
+          "aria-label": `${badgeCount} notificaciones`,
+          children: badgeCount > 99 ? "99+" : badgeCount
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `
+          absolute
+          -top-1
+          -right-1
+          w-2
+          h-2
+          rounded-full
+          ${badgeColors.bg}
+          pointer-events-none
+        `.trim().replace(/\s+/g, " "),
+        "aria-label": "Notificación"
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: htmlType,
+      className: `${buttonClasses} ${badge || badgeCount !== void 0 ? "relative" : ""}`,
+      disabled,
+      onClick,
+      "aria-label": ariaLabel,
+      ...rest,
+      children: [
+        renderContent(),
+        renderBadge()
+      ]
+    }
+  );
+};
+const Input = forwardRef(
+  ({
+    label,
+    labelSecondary,
+    helperText,
+    error = false,
+    errorMessage,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
+    className = "",
+    disabled = false,
+    id,
+    ...props
+  }, ref) => {
+    const inputId = id || `input-${Math.random().toString(36).substr(2, 9)}`;
+    const baseInputClasses = `
+      w-full
+      px-3
+      py-1.5
+      text-sm
+      leading-6
+      font-normal
+      text-content-primary
+      bg-bg-primary
+      border
+      border-border-primary
+      rounded-md
+      outline-none
+      transition-all
+      duration-150
+      placeholder:text-content-tertiary
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+      dark:text-dark-content-primary
+      dark:placeholder:text-dark-content-tertiary
+    `;
+    const interactiveClasses = !disabled ? `
+        hover:border-primary-custom-600
+        focus:border-primary-custom-600
+        focus:ring-2
+        focus:ring-primary-custom-400
+        focus:ring-offset-2
+        dark:hover:border-dark-border-custom
+        dark:focus:border-dark-border-custom
+        dark:focus:ring-dark-border-custom
+        dark:focus:ring-offset-dark-bg-primary
+      ` : `
+        opacity-50
+        cursor-not-allowed
+        bg-bg-secondary
+        dark:bg-dark-bg-secondary
+      `;
+    const errorClasses = error ? `
+        !border-error-border
+        focus:!ring-error-border/30
+        focus:!ring-offset-2
+        dark:!border-error-border
+        dark:focus:!ring-error-border/30
+        dark:focus:!ring-offset-dark-bg-primary
+      ` : "";
+    const containerClasses = fullWidth ? "w-full" : "w-[265px]";
+    const renderIcon = (icon) => {
+      if (!icon) return null;
+      const existingClassName = icon.props.className || "";
+      return cloneElement(icon, {
+        className: `w-4 h-4 text-content-tertiary dark:text-dark-content-tertiary ${existingClassName}`
+      });
+    };
+    return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-2 ${containerClasses} ${className}`, children: [
+      label && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "flex items-center w-full font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1", children: label }),
+            labelSecondary && /* @__PURE__ */ jsx("span", { className: "text-xs leading-4 text-primary-custom-600 dark:text-primary-custom-600", children: labelSecondary })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+        leftIcon && /* @__PURE__ */ jsx("div", { className: "absolute left-3 pointer-events-none", children: renderIcon(leftIcon) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            disabled,
+            className: `
+              ${baseInputClasses}
+              ${interactiveClasses}
+              ${errorClasses}
+              ${leftIcon ? "pl-9" : ""}
+              ${rightIcon ? "pr-9" : ""}
+            `.trim().replace(/\s+/g, " "),
+            ...props
+          }
+        ),
+        rightIcon && /* @__PURE__ */ jsx("div", { className: "absolute right-3 pointer-events-none", children: renderIcon(rightIcon) })
+      ] }),
+      (helperText || errorMessage) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: `
+              text-xs
+              leading-5
+              ${error ? "text-error-content dark:text-error-content" : "text-content-tertiary dark:text-dark-content-tertiary"}
+            `.trim().replace(/\s+/g, " "),
+          children: error && errorMessage ? errorMessage : helperText
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+const Textarea = forwardRef(
+  ({
+    label,
+    description,
+    helperText,
+    error = false,
+    errorMessage,
+    fullWidth = false,
+    resize = "vertical",
+    className = "",
+    disabled = false,
+    id,
+    rows = 4,
+    ...props
+  }, ref) => {
+    const textareaId = id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
+    const baseTextareaClasses = `
+      w-full
+      px-3
+      pr-1.5
+      py-1.5
+      text-base
+      leading-6
+      font-normal
+      bg-bg-primary
+      border
+      border-border-primary
+      rounded-lg
+      outline-none
+      transition-all
+      duration-150
+      placeholder:text-content-tertiary
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+      dark:text-dark-content-primary
+      dark:placeholder:text-dark-content-tertiary
+    `;
+    const interactiveClasses = !disabled ? `
+        hover:border-zinc-400
+        focus:border-2
+        focus:border-primary-custom-600
+        dark:hover:border-zinc-500
+        dark:focus:border-2
+        dark:focus:border-dark-border-custom
+      ` : `
+        opacity-50
+        cursor-not-allowed
+        bg-bg-secondary
+        dark:bg-dark-bg-secondary
+      `;
+    const errorClasses = error ? `
+        !border-error-border
+        focus:!border-2
+        focus:!border-error-border
+        dark:!border-error-border
+        dark:focus:!border-2
+        dark:focus:!border-error-border
+      ` : "";
+    const resizeClasses = resize === "none" ? "resize-none" : resize === "vertical" ? "resize-y" : resize === "horizontal" ? "resize-x" : "resize";
+    const containerClasses = fullWidth ? "w-full" : "w-[312px]";
+    return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-2 ${containerClasses} ${className}`, children: [
+      (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 w-full", children: [
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: textareaId,
+            className: "font-bold text-sm leading-5 text-content-primary dark:text-dark-content-primary",
+            children: label
+          }
+        ),
+        description && /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-content-secondary dark:text-dark-content-secondary", children: description })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          id: textareaId,
+          disabled,
+          rows,
+          className: `
+            ${baseTextareaClasses}
+            ${interactiveClasses}
+            ${errorClasses}
+            ${resizeClasses}
+          `.trim().replace(/\s+/g, " "),
+          ...props
+        }
+      ),
+      (helperText || errorMessage) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: `
+              text-sm
+              leading-5
+              text-content-tertiary
+              dark:text-dark-content-tertiary
+            `.trim().replace(/\s+/g, " "),
+          children: error && errorMessage ? errorMessage : helperText
+        }
+      )
+    ] });
+  }
+);
+Textarea.displayName = "Textarea";
+const Checkbox = forwardRef(
+  ({
+    label,
+    description,
+    checked = false,
+    indeterminate = false,
+    disabled = false,
+    className = "",
+    id,
+    onChange,
+    ...props
+  }, ref) => {
+    const inputRef = useRef(null);
+    const combinedRef = ref || inputRef;
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    useEffect(() => {
+      if (combinedRef.current) {
+        combinedRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate, combinedRef]);
+    const baseCheckboxClasses = `
+      w-4
+      h-4
+      rounded
+      border
+      border-border-primary
+      bg-bg-primary
+      transition-all
+      duration-150
+      flex
+      items-center
+      justify-center
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+    `;
+    const interactiveClasses = !disabled ? checked || indeterminate ? `
+          peer-hover:border-[#50a5f7]
+          peer-focus:ring-2
+          peer-focus:ring-primary-custom-400/20
+          peer-focus:border-primary-custom-600
+          dark:peer-hover:border-[#50a5f7]
+          dark:peer-focus:border-dark-border-custom
+          dark:peer-focus:ring-dark-border-custom/20
+        ` : `
+          peer-hover:border-[#b6b6b9]
+          peer-focus:ring-2
+          peer-focus:ring-primary-custom-400/20
+          peer-focus:border-primary-custom-600
+          dark:peer-hover:border-[#b6b6b9]
+          dark:peer-focus:border-dark-border-custom
+          dark:peer-focus:ring-dark-border-custom/20
+        ` : `
+        opacity-50
+        cursor-not-allowed
+      `;
+    const checkedClasses = checked || indeterminate ? `
+        !bg-primary-custom-600
+        !border-primary-custom-500
+        shadow-button-inset
+        dark:!bg-dark-bg-inverse
+        dark:!border-dark-bg-inverse
+      ` : "";
+    const checkboxClasses = [
+      baseCheckboxClasses,
+      interactiveClasses,
+      checkedClasses,
+      disabled ? "cursor-not-allowed" : "cursor-pointer"
+    ].join(" ").replace(/\s+/g, " ").trim();
+    return /* @__PURE__ */ jsxs("div", { className: `inline-flex gap-3 items-start ${className}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-5 w-4 shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: combinedRef,
+            type: "checkbox",
+            id: checkboxId,
+            checked,
+            disabled,
+            onChange,
+            className: "peer sr-only",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxs("label", { htmlFor: checkboxId, className: checkboxClasses, children: [
+          checked && !indeterminate && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-3 h-3 text-primary-inverse-content pointer-events-none",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M10 3L4.5 8.5L2 6",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          indeterminate && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "w-3 h-3 text-primary-inverse-content pointer-events-none",
+              viewBox: "0 0 12 12",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M2 6H10",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round"
+                }
+              )
+            }
+          )
+        ] })
+      ] }),
+      (label || description) && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: checkboxId,
+          className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+          children: [
+            label && /* @__PURE__ */ jsx("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: description })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+const Radio = forwardRef(
+  ({
+    label,
+    description,
+    checked = false,
+    disabled = false,
+    className = "",
+    id,
+    onChange,
+    value,
+    name,
+    ...props
+  }, ref) => {
+    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+    const baseRadioClasses = `
+      w-4
+      h-4
+      rounded-full
+      border
+      border-border-primary
+      bg-bg-primary
+      transition-all
+      duration-150
+      flex
+      items-center
+      justify-center
+      dark:bg-dark-bg-primary
+      dark:border-dark-border-primary
+    `;
+    const interactiveClasses = !disabled ? `
+        peer-hover:border-primary-custom-600
+        peer-focus:ring-2
+        peer-focus:ring-primary-custom-400
+        peer-focus:border-primary-custom-600
+        dark:peer-hover:border-dark-border-custom
+        dark:peer-focus:ring-dark-border-custom
+        dark:peer-focus:border-dark-border-custom
+      ` : `
+        opacity-50
+        cursor-not-allowed
+      `;
+    const checkedClasses = checked ? `
+        !bg-primary-custom-600
+        !border-primary-inverse-border
+        shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]
+        dark:!bg-dark-bg-inverse
+        dark:!border-dark-bg-inverse
+      ` : "";
+    return /* @__PURE__ */ jsxs("div", { className: `flex gap-3 items-start ${className}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-5 w-4 shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "radio",
+            id: radioId,
+            checked,
+            disabled,
+            onChange,
+            value,
+            name,
+            className: "peer sr-only",
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: radioId,
+            className: `
+              ${baseRadioClasses}
+              ${interactiveClasses}
+              ${checkedClasses}
+              ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
+            `.trim().replace(/\s+/g, " "),
+            children: checked && /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 bg-white rounded-full dark:bg-dark-content-inverse" })
+          }
+        )
+      ] }),
+      (label || description) && /* @__PURE__ */ jsxs(
+        "label",
+        {
+          htmlFor: radioId,
+          className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+          children: [
+            label && /* @__PURE__ */ jsx("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: label }),
+            description && /* @__PURE__ */ jsx("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: description })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+const Switch = forwardRef(
+  ({
+    label,
+    description,
+    labelPosition = "leading",
+    checked = false,
+    disabled = false,
+    className = "",
+    id,
+    onChange,
+    ariaLabel,
+    ...props
+  }, ref) => {
+    const switchId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
+    const baseTrackClasses = `
+      w-8
+      h-5
+      rounded-xl
+      border
+      overflow-hidden
+      relative
+      transition-all
+      duration-200
+    `;
+    const getTrackStateClasses = () => {
+      if (disabled) {
+        return checked ? `
+            bg-primary-custom-600
+            border-primary-inverse-border
+            opacity-50
+            cursor-not-allowed
+            dark:bg-primary-custom-600
+            dark:border-primary-inverse-border
+          ` : `
+            bg-[#fafafa]
+            border-border-primary
+            opacity-50
+            cursor-not-allowed
+            dark:bg-dark-bg-primary
+            dark:border-dark-border-primary
+          `;
+      }
+      return checked ? `
+          bg-primary-custom-600
+          border-primary-inverse-border
+          cursor-pointer
+          peer-hover:border-[#307cc5]
+          peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+          dark:bg-primary-custom-600
+          dark:border-primary-inverse-border
+          dark:peer-hover:border-[#307cc5]
+          dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+        ` : `
+          bg-[#fafafa]
+          border-border-primary
+          cursor-pointer
+          peer-hover:border-[#b6b6b9]
+          peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+          dark:bg-dark-bg-primary
+          dark:border-dark-border-primary
+          dark:peer-hover:border-[#b6b6b9]
+          dark:peer-focus:shadow-[0px_0px_0px_2px_#dbeefe,0px_1px_2px_0px_rgba(0,0,0,0.05),0px_0px_0px_4px_#60b6fa]
+        `;
+    };
+    const getButtonClasses = () => {
+      const baseButtonClasses = `
+        absolute
+        w-4
+        h-4
+        bg-white
+        rounded-[10px]
+        border
+        top-1/2
+        -translate-y-1/2
+        transition-all
+        duration-200
+      `;
+      const positionClass = checked ? "left-[13px]" : "left-px";
+      if (disabled) {
+        const borderClass2 = checked ? "border-primary-inverse-border dark:border-primary-inverse-border" : "border-border-primary dark:border-dark-border-primary";
+        return `${baseButtonClasses} ${positionClass} ${borderClass2}`;
+      }
+      const borderClass = checked ? `
+          border-primary-inverse-border
+          peer-hover:border-[#307cc5]
+          dark:border-primary-inverse-border
+          dark:peer-hover:border-[#307cc5]
+        ` : `
+          border-border-primary
+          peer-hover:border-[#b6b6b9]
+          dark:border-dark-border-primary
+          dark:peer-hover:border-[#b6b6b9]
+        `;
+      return `${baseButtonClasses} ${positionClass} ${borderClass}`;
+    };
+    const trackClasses = [
+      baseTrackClasses,
+      getTrackStateClasses()
+    ].join(" ").replace(/\s+/g, " ").trim();
+    const buttonClasses = getButtonClasses().replace(/\s+/g, " ").trim();
+    const LabelContent = label || description ? /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: switchId,
+        className: `flex-1 flex flex-col gap-1 text-sm leading-5 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+        children: [
+          label && /* @__PURE__ */ jsx("span", { className: "font-bold text-content-primary dark:text-dark-content-primary", children: label }),
+          description && /* @__PURE__ */ jsx("span", { className: "font-normal text-content-secondary dark:text-content-secondary", children: description })
+        ]
+      }
+    ) : null;
+    const SwitchInput = /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center shrink-0", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          id: switchId,
+          checked,
+          disabled,
+          onChange,
+          className: "peer sr-only",
+          "aria-label": ariaLabel || label,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: switchId,
+          className: trackClasses,
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("div", { className: buttonClasses })
+        }
+      )
+    ] });
+    return /* @__PURE__ */ jsx("div", { className: `flex gap-2 items-center w-[344px] ${className}`, children: labelPosition === "leading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      LabelContent,
+      SwitchInput
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      SwitchInput,
+      LabelContent
+    ] }) });
+  }
+);
+Switch.displayName = "Switch";
+const Avatar = forwardRef(
+  ({
+    size = "10",
+    type = "circular",
+    src,
+    alt = "",
+    initials,
+    className = "",
+    ...props
+  }, ref) => {
+    const containerSizeClasses = {
+      "4": "w-5 h-5",
+      "6": "w-6 h-6",
+      "8": "w-8 h-8",
+      "10": "w-10 h-10"
+    };
+    const textSizeClasses = {
+      "4": "text-xs",
+      // 12px - Paragraph Tiny
+      "6": "text-xs",
+      // 12px - Paragraph Tiny
+      "8": "text-sm",
+      // 14px - Paragraph Small
+      "10": "text-base"
+      // 16px - Paragraph Base
+    };
+    const typeClasses = {
+      circular: "rounded-full",
+      rounded: "rounded-md"
+    };
+    const baseClasses = `
+      relative
+      inline-flex
+      items-center
+      justify-center
+      overflow-hidden
+      ${containerSizeClasses[size]}
+      ${typeClasses[type]}
+    `;
+    if (src) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: `${baseClasses} ${className}`.trim().replace(/\s+/g, " "),
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src,
+              alt,
+              className: "w-full h-full object-cover",
+              ...props
+            }
+          )
+        }
+      );
+    }
+    if (initials) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: `
+            ${baseClasses}
+            ${textSizeClasses[size]}
+            bg-content-primary
+            text-white
+            font-normal
+            dark:bg-dark-bg-inverse
+            dark:text-dark-content-inverse
+            ${className}
+          `.trim().replace(/\s+/g, " "),
+          children: /* @__PURE__ */ jsx("span", { className: "leading-none", children: initials })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `
+          ${baseClasses}
+          bg-background-secondary
+          dark:bg-dark-bg-primary
+          ${className}
+        `.trim().replace(/\s+/g, " ")
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+const Divider = forwardRef(
+  ({
+    type = "default",
+    className = "",
+    ...props
+  }, ref) => {
+    const typeClasses = {
+      // Default: Línea más visible para separaciones claras
+      // Light: border-primary (#e4e4e7)
+      // Dark: dark-border-primary (#71717a)
+      default: "bg-border-primary dark:bg-dark-border-primary",
+      // Soft: Línea más sutil para separaciones suaves
+      // Light: border-secondary (#f4f4f5 - muy claro)
+      // Dark: gray-700 (#374151 - gris medio-oscuro, más sutil que dark-border-primary)
+      soft: "bg-border-secondary dark:bg-gray-700"
+    };
+    const baseClasses = "w-full h-px border-0";
+    const finalClasses = [
+      baseClasses,
+      typeClasses[type],
+      className
+    ].join(" ").replace(/\s+/g, " ").trim();
+    return /* @__PURE__ */ jsx(
+      "hr",
+      {
+        ref,
+        className: finalClasses,
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+const DescriptionList = forwardRef(
+  ({
+    term,
+    details,
+    className = "",
+    ...props
+  }, ref) => {
+    const baseClasses = `
+      flex
+      flex-wrap
+      gap-1
+      items-start
+      py-2.5
+      border-b
+      border-border-secondary
+      dark:border-gray-700
+    `;
+    const columnClasses = "flex-1 min-w-[180px]";
+    const finalClasses = [baseClasses, className].join(" ").replace(/\s+/g, " ").trim();
+    return /* @__PURE__ */ jsxs("div", { ref, className: finalClasses, ...props, children: [
+      /* @__PURE__ */ jsx("div", { className: columnClasses, children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-content-secondary dark:text-gray-400 font-normal", children: term }) }),
+      /* @__PURE__ */ jsx("div", { className: columnClasses, children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-content-primary dark:text-dark-content-primary font-normal", children: details }) })
+    ] });
+  }
+);
+DescriptionList.displayName = "DescriptionList";
+const Alert = forwardRef(
+  ({
+    title,
+    description,
+    children,
+    actions,
+    onCancel,
+    onConfirm,
+    cancelText = "Cancelar",
+    confirmText = "Confirmar",
+    className = "",
+    ...props
+  }, ref) => {
+    const actionButtons = actions || /* @__PURE__ */ jsxs(Fragment, { children: [
+      onCancel && /* @__PURE__ */ jsx(Button, { type: "plain", size: "base", onClick: onCancel, children: cancelText }),
+      onConfirm && /* @__PURE__ */ jsx(Button, { type: "default", size: "base", onClick: onConfirm, children: confirmText })
+    ] });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: `
+          w-[512px]
+          bg-white
+          dark:bg-dark-bg-primary
+          border
+          border-border-primary
+          dark:border-dark-border-primary
+          rounded-xl
+          ${className}
+        `.trim().replace(/\s+/g, " "),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "p-6 flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 font-normal text-content-tertiary dark:text-content-tertiary", children: description })
+          ] }),
+          children && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3 items-center justify-end", children: actionButtons })
+        ] })
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+const Badge = forwardRef(
+  ({
+    color = "zinc",
+    leftIcon,
+    label,
+    count,
+    className = "",
+    ...props
+  }, ref) => {
+    const colorClasses = {
+      zinc: {
+        bg: "bg-zinc-100",
+        text: "text-zinc-600",
+        hover: "hover:bg-zinc-200",
+        notificationBg: "bg-zinc-600",
+        notificationText: "text-zinc-100"
+      },
+      red: {
+        bg: "bg-red-100",
+        text: "text-red-700",
+        hover: "hover:bg-red-200",
+        notificationBg: "bg-red-700",
+        notificationText: "text-red-100"
+      },
+      orange: {
+        bg: "bg-orange-100",
+        text: "text-orange-700",
+        hover: "hover:bg-orange-200",
+        notificationBg: "bg-orange-700",
+        notificationText: "text-orange-100"
+      },
+      amber: {
+        bg: "bg-amber-100",
+        text: "text-amber-700",
+        hover: "hover:bg-amber-200",
+        notificationBg: "bg-amber-700",
+        notificationText: "text-amber-100"
+      },
+      yellow: {
+        bg: "bg-yellow-100",
+        text: "text-yellow-700",
+        hover: "hover:bg-yellow-200",
+        notificationBg: "bg-yellow-700",
+        notificationText: "text-yellow-100"
+      },
+      lime: {
+        bg: "bg-lime-100",
+        text: "text-lime-700",
+        hover: "hover:bg-lime-200",
+        notificationBg: "bg-lime-700",
+        notificationText: "text-lime-100"
+      },
+      green: {
+        bg: "bg-green-100",
+        text: "text-green-700",
+        hover: "hover:bg-green-200",
+        notificationBg: "bg-green-700",
+        notificationText: "text-green-100"
+      },
+      emerald: {
+        bg: "bg-emerald-100",
+        text: "text-emerald-700",
+        hover: "hover:bg-emerald-200",
+        notificationBg: "bg-emerald-700",
+        notificationText: "text-emerald-100"
+      },
+      teal: {
+        bg: "bg-teal-100",
+        text: "text-teal-700",
+        hover: "hover:bg-teal-200",
+        notificationBg: "bg-teal-700",
+        notificationText: "text-teal-100"
+      },
+      cyan: {
+        bg: "bg-cyan-100",
+        text: "text-cyan-700",
+        hover: "hover:bg-cyan-200",
+        notificationBg: "bg-cyan-700",
+        notificationText: "text-cyan-100"
+      },
+      sky: {
+        bg: "bg-sky-100",
+        text: "text-sky-700",
+        hover: "hover:bg-sky-200",
+        notificationBg: "bg-sky-700",
+        notificationText: "text-sky-100"
+      },
+      blue: {
+        bg: "bg-blue-100",
+        text: "text-blue-700",
+        hover: "hover:bg-blue-200",
+        notificationBg: "bg-blue-700",
+        notificationText: "text-blue-100"
+      },
+      indigo: {
+        bg: "bg-indigo-100",
+        text: "text-indigo-700",
+        hover: "hover:bg-indigo-200",
+        notificationBg: "bg-indigo-700",
+        notificationText: "text-indigo-100"
+      },
+      violet: {
+        bg: "bg-violet-100",
+        text: "text-violet-700",
+        hover: "hover:bg-violet-200",
+        notificationBg: "bg-violet-700",
+        notificationText: "text-violet-100"
+      },
+      purple: {
+        bg: "bg-purple-100",
+        text: "text-purple-700",
+        hover: "hover:bg-purple-200",
+        notificationBg: "bg-purple-700",
+        notificationText: "text-purple-100"
+      },
+      fuchsia: {
+        bg: "bg-fuchsia-100",
+        text: "text-fuchsia-700",
+        hover: "hover:bg-fuchsia-200",
+        notificationBg: "bg-fuchsia-700",
+        notificationText: "text-fuchsia-100"
+      },
+      pink: {
+        bg: "bg-pink-100",
+        text: "text-pink-700",
+        hover: "hover:bg-pink-200",
+        notificationBg: "bg-pink-700",
+        notificationText: "text-pink-100"
+      },
+      rose: {
+        bg: "bg-rose-100",
+        text: "text-rose-700",
+        hover: "hover:bg-rose-200",
+        notificationBg: "bg-rose-700",
+        notificationText: "text-rose-100"
+      },
+      primary: {
+        bg: "bg-primary-custom-100",
+        text: "text-primary-custom-600",
+        hover: "hover:bg-primary-custom-200",
+        notificationBg: "bg-primary-custom-600",
+        notificationText: "text-primary-custom-100"
+      },
+      secondary: {
+        bg: "bg-zinc-100",
+        text: "text-zinc-600",
+        hover: "hover:bg-zinc-200",
+        notificationBg: "bg-zinc-600",
+        notificationText: "text-zinc-100"
+      },
+      tertiary: {
+        bg: "bg-zinc-100",
+        text: "text-zinc-600",
+        hover: "hover:bg-zinc-200",
+        notificationBg: "bg-zinc-600",
+        notificationText: "text-zinc-100"
+      }
+    };
+    const colors = colorClasses[color];
+    const renderIcon = (icon) => {
+      const existingClassName = icon.props.className || "";
+      return cloneElement(icon, {
+        className: `w-3 h-3 ${existingClassName}`.trim()
+      });
+    };
+    const finalClasses = [
+      "inline-flex",
+      "items-center",
+      "gap-1",
+      "px-1.5",
+      "py-1",
+      "rounded-md",
+      "font-sans",
+      colors.bg,
+      colors.hover,
+      "transition-colors",
+      "duration-200",
+      className
+    ].filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: finalClasses,
+        ...props,
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center ${colors.text}`, children: renderIcon(leftIcon) }),
+          /* @__PURE__ */ jsx("span", { className: `font-sans text-xs leading-4 ${colors.text}`, children: label }),
+          count !== void 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `
+              h-3
+              flex
+              items-center
+              justify-center
+              px-0.5
+              rounded-sm
+              min-w-[12px]
+              ${colors.notificationBg}
+            `.trim().replace(/\s+/g, " "),
+              children: /* @__PURE__ */ jsx("span", { className: `font-sans text-xs leading-4 ${colors.notificationText}`, children: count })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+const Quantity = forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue = 0,
+    onChange,
+    min = 0,
+    max,
+    label,
+    linkText,
+    onLinkClick,
+    helperText,
+    error = false,
+    disabled = false,
+    className = "",
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const currentValue = isControlled ? controlledValue : internalValue;
+    useEffect(() => {
+      if (!isControlled) {
+        setInternalValue(defaultValue);
+      }
+    }, [defaultValue, isControlled]);
+    const handleValueChange = (newValue) => {
+      let clampedValue = newValue;
+      if (min !== void 0 && clampedValue < min) {
+        clampedValue = min;
+      }
+      if (max !== void 0 && clampedValue > max) {
+        clampedValue = max;
+      }
+      if (!isControlled) {
+        setInternalValue(clampedValue);
+      }
+      onChange?.(clampedValue);
+    };
+    const handleDecrement = () => {
+      if (disabled) return;
+      handleValueChange(currentValue - 1);
+    };
+    const handleIncrement = () => {
+      if (disabled) return;
+      handleValueChange(currentValue + 1);
+    };
+    const isDecrementDisabled = disabled || min !== void 0 && currentValue <= min;
+    const isIncrementDisabled = disabled || max !== void 0 && currentValue >= max;
+    const MinusIcon = () => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3 8H13",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+    const PlusIcon = () => /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M8 3V13M3 8H13",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+    const borderClass = error ? "border-error-border dark:border-error-border" : "border-border-primary dark:border-dark-border-primary";
+    const hoverClass = !disabled && !error ? "hover:border-[#f9f9f9] dark:hover:border-[#f9f9f9]" : "";
+    const focusClass = !disabled && !error ? "focus-within:border-2 focus-within:border-[#329cff] dark:focus-within:border-[#329cff]" : "";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: `flex flex-col gap-2 ${className}`.trim(),
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-sm leading-5 font-bold text-content-primary dark:text-dark-content-primary", children: label }),
+            linkText && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onLinkClick,
+                disabled,
+                className: `
+                  text-xs leading-4
+                  text-primary-custom-600
+                  hover:underline
+                  dark:text-primary-custom-600
+                  ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+                  transition-colors
+                  duration-200
+                `.trim().replace(/\s+/g, " "),
+                children: linkText
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `
+            flex
+            items-center
+            gap-2
+            px-3
+            py-1.5
+            bg-white
+            dark:bg-dark-bg-primary
+            border
+            ${borderClass}
+            ${hoverClass}
+            ${focusClass}
+            rounded-lg
+            transition-colors
+            duration-200
+            ${disabled ? "opacity-50 cursor-not-allowed" : ""}
+          `.trim().replace(/\s+/g, " "),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleDecrement,
+                    disabled: isDecrementDisabled,
+                    className: `
+              flex
+              items-center
+              justify-center
+              w-4
+              h-4
+              ${isDecrementDisabled ? "text-content-tertiary dark:text-content-tertiary cursor-not-allowed" : "text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer"}
+              transition-colors
+              duration-200
+            `.trim().replace(/\s+/g, " "),
+                    "aria-label": "Decrementar",
+                    children: /* @__PURE__ */ jsx(MinusIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex-1 text-center", children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `
+                text-base leading-6
+                ${currentValue === 0 ? "text-content-tertiary dark:text-content-tertiary" : "text-content-primary dark:text-dark-content-primary"}
+              `.trim().replace(/\s+/g, " "),
+                    children: currentValue
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleIncrement,
+                    disabled: isIncrementDisabled,
+                    className: `
+              flex
+              items-center
+              justify-center
+              w-4
+              h-4
+              ${isIncrementDisabled ? "text-content-tertiary dark:text-content-tertiary cursor-not-allowed" : "text-content-primary dark:text-dark-content-primary hover:text-content-secondary dark:hover:text-content-secondary cursor-pointer"}
+              transition-colors
+              duration-200
+            `.trim().replace(/\s+/g, " "),
+                    "aria-label": "Incrementar",
+                    children: /* @__PURE__ */ jsx(PlusIcon, {})
+                  }
+                )
+              ]
+            }
+          ),
+          helperText && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: `
+              text-sm leading-5
+              ${error ? "text-error-content dark:text-error-content" : "text-content-tertiary dark:text-content-tertiary"}
+            `.trim().replace(/\s+/g, " "),
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Quantity.displayName = "Quantity";
+const ThemeContext = createContext(void 0);
+const ThemeProvider = ({
+  children,
+  defaultTheme = "light"
+}) => {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("siesa-ui-theme");
+      return savedTheme || defaultTheme;
+    }
+    return defaultTheme;
+  });
+  useEffect(() => {
+    const root = window.document.documentElement;
+    if (theme === "dark") {
+      root.classList.add("dark");
+    } else {
+      root.classList.remove("dark");
+    }
+    localStorage.setItem("siesa-ui-theme", theme);
+  }, [theme]);
+  const toggleTheme = () => {
+    setThemeState((prev) => prev === "light" ? "dark" : "light");
+  };
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, toggleTheme, setTheme }, children });
+};
+const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme debe ser usado dentro de un ThemeProvider");
+  }
+  return context;
+};
+export {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Checkbox,
+  DescriptionList,
+  Divider,
+  Input,
+  Quantity,
+  Radio,
+  Switch,
+  Textarea,
+  ThemeProvider,
+  useTheme
+};
+//# sourceMappingURL=index.js.map