siesa-ui-kit 1.0.6 → 1.0.8

package/dist/index.js

@@ -1,1479 +0,0 @@
-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