@ralorotech/duino-ui/dist/index.js

UI library for Duino projects

'use strict';

var chunkAQNDSPDX_js = require('./chunk-AQNDSPDX.js');
var chunkUBPQUXME_js = require('./chunk-UBPQUXME.js');
var react = require('react');
var jsxRuntime = require('react/jsx-runtime');

var defaultTheme = {
  colors: {
    brand: {
      50: "#f0fdfa",
      100: "#ccfbf1",
      200: "#99f6e4",
      300: "#5eead4",
      400: "#2dd4bf",
      500: "#14b8a6",
      600: "#0d9488",
      700: "#008184",
      800: "#005c5f",
      900: "#134e4a"
    },
    danger: "#ef4444",
    background: "#ffffff",
    foreground: "#13151a",
    muted: "#6b7280",
    border: "#e5e7eb",
    ring: "#5eead4"
  },
  radius: "12px",
  font: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"',
  spacing: {
    sm: "0.375rem",
    md: "0.5rem",
    lg: "0.75rem"
  }
};
var ThemeContext = react.createContext({
  theme: defaultTheme,
  setTheme: () => {
  },
  resetTheme: () => {
  },
  applyPreset: () => {
  }
});
var themePresets = {
  arduino: defaultTheme,
  blue: {
    ...defaultTheme,
    colors: {
      ...defaultTheme.colors,
      brand: {
        50: "#eff6ff",
        100: "#dbeafe",
        200: "#bfdbfe",
        300: "#93c5fd",
        400: "#60a5fa",
        500: "#3b82f6",
        600: "#2563eb",
        700: "#1d4ed8",
        800: "#1e40af",
        900: "#1e3a8a"
      },
      ring: "#93c5fd"
    },
    radius: "8px"
  },
  purple: {
    ...defaultTheme,
    colors: {
      ...defaultTheme.colors,
      brand: {
        50: "#faf5ff",
        100: "#f3e8ff",
        200: "#e9d5ff",
        300: "#d8b4fe",
        400: "#c084fc",
        500: "#a855f7",
        600: "#9333ea",
        700: "#7c3aed",
        800: "#6b21a8",
        900: "#581c87"
      },
      ring: "#d8b4fe"
    },
    radius: "16px"
  },
  minimal: {
    ...defaultTheme,
    colors: {
      ...defaultTheme.colors,
      brand: {
        50: "#f9fafb",
        100: "#f3f4f6",
        200: "#e5e7eb",
        300: "#d1d5db",
        400: "#9ca3af",
        500: "#6b7280",
        600: "#4b5563",
        700: "#374151",
        800: "#1f2937",
        900: "#111827"
      },
      ring: "#d1d5db"
    },
    radius: "4px"
  },
  dark: {
    ...defaultTheme,
    colors: {
      ...defaultTheme.colors,
      background: "#1f2937",
      foreground: "#f9fafb",
      muted: "#9ca3af",
      border: "#374151"
    }
  }
};
var ThemeProvider = ({
  children,
  initialTheme,
  preset
}) => {
  const [theme, setThemeState] = react.useState(() => {
    if (preset) {
      return { ...themePresets[preset], ...initialTheme };
    }
    return { ...defaultTheme, ...initialTheme };
  });
  const setTheme = (newTheme) => {
    setThemeState((prev) => {
      var _a;
      return {
        ...prev,
        ...newTheme,
        colors: {
          ...prev.colors,
          ...newTheme.colors || {},
          brand: { ...prev.colors.brand, ...((_a = newTheme.colors) == null ? void 0 : _a.brand) || {} }
        },
        spacing: { ...prev.spacing, ...newTheme.spacing || {} }
      };
    });
  };
  const resetTheme = () => {
    setThemeState(defaultTheme);
  };
  const applyPreset = (presetName) => {
    setThemeState(themePresets[presetName]);
  };
  react.useEffect(() => {
    const root = document.documentElement;
    Object.entries(theme.colors.brand).forEach(([key, value]) => {
      root.style.setProperty(`--duino-brand-${key}`, value);
    });
    root.style.setProperty("--duino-danger-500", theme.colors.danger);
    root.style.setProperty("--duino-color-bg", theme.colors.background);
    root.style.setProperty("--duino-color-fg", theme.colors.foreground);
    root.style.setProperty("--duino-color-muted", theme.colors.muted);
    root.style.setProperty("--duino-border", theme.colors.border);
    root.style.setProperty("--duino-ring", theme.colors.ring);
    root.style.setProperty("--duino-radius", theme.radius);
    root.style.setProperty("--duino-font", theme.font);
    root.style.setProperty("--duino-gap-sm", theme.spacing.sm);
    root.style.setProperty("--duino-gap", theme.spacing.md);
    root.style.setProperty("--duino-gap-lg", theme.spacing.lg);
  }, [theme]);
  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resetTheme, applyPreset }, children });
};
var useTheme = () => {
  const context = react.useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};
var ThemeSwitcher = ({
  className = "",
  showColorPicker = true,
  showPresets = true,
  showCustomization = true
}) => {
  const { theme, applyPreset, setTheme, resetTheme } = useTheme();
  const [customColor, setCustomColor] = react.useState("#14b8a6");
  const [customRadius, setCustomRadius] = react.useState("12");
  const handlePresetChange = (presetName) => {
    applyPreset(presetName);
  };
  const handleCustomColorChange = (color) => {
    setCustomColor(color);
    const palette = {
      50: `color-mix(in srgb, ${color} 5%, white)`,
      100: `color-mix(in srgb, ${color} 10%, white)`,
      200: `color-mix(in srgb, ${color} 25%, white)`,
      300: `color-mix(in srgb, ${color} 40%, white)`,
      400: `color-mix(in srgb, ${color} 70%, white)`,
      500: color,
      600: `color-mix(in srgb, ${color} 90%, black)`,
      700: `color-mix(in srgb, ${color} 80%, black)`,
      800: `color-mix(in srgb, ${color} 70%, black)`,
      900: `color-mix(in srgb, ${color} 60%, black)`
    };
    setTheme({
      colors: {
        ...theme.colors,
        brand: palette,
        ring: palette[300]
      }
    });
  };
  const handleRadiusChange = (radius) => {
    setCustomRadius(radius);
    setTheme({ radius: `${radius}px` });
  };
  const presetInfo = {
    arduino: { name: "Arduino", color: "#14b8a6", description: "Teal cl\xE1sico de Arduino" },
    blue: { name: "Azul", color: "#3b82f6", description: "Azul corporativo" },
    purple: { name: "P\xFArpura", color: "#a855f7", description: "P\xFArpura moderno" },
    minimal: { name: "Minimal", color: "#6b7280", description: "Gris minimalista" },
    dark: { name: "Oscuro", color: "#14b8a6", description: "Tema oscuro" }
  };
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `duino-theme-switcher ${className}`, style: {
    padding: "20px",
    border: "1px solid var(--duino-border)",
    borderRadius: "var(--duino-radius)",
    backgroundColor: "var(--duino-color-bg)",
    fontFamily: "var(--duino-font)"
  }, children: [
    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: {
      margin: "0 0 16px 0",
      color: "var(--duino-color-fg)",
      fontSize: "18px",
      fontWeight: "600"
    }, children: "\u{1F3A8} Personalizar Tema" }),
    showPresets && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "24px" }, children: [
      /* @__PURE__ */ jsxRuntime.jsx("h4", { style: {
        margin: "0 0 12px 0",
        color: "var(--duino-color-fg)",
        fontSize: "14px",
        fontWeight: "500"
      }, children: "Temas Predefinidos" }),
      /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
        gap: "8px"
      }, children: Object.entries(presetInfo).map(([key, info]) => /* @__PURE__ */ jsxRuntime.jsxs(
        "button",
        {
          onClick: () => handlePresetChange(key),
          className: "duino-btn duino-btn--ghost",
          style: {
            display: "flex",
            alignItems: "center",
            gap: "8px",
            justifyContent: "flex-start",
            padding: "8px 12px",
            textAlign: "left"
          },
          children: [
            /* @__PURE__ */ jsxRuntime.jsx(
              "div",
              {
                style: {
                  width: "16px",
                  height: "16px",
                  borderRadius: "50%",
                  backgroundColor: info.color,
                  flexShrink: 0
                }
              }
            ),
            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", fontWeight: "500" }, children: info.name }),
              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "12px", opacity: 0.7 }, children: info.description })
            ] })
          ]
        },
        key
      )) })
    ] }),
    showColorPicker && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "24px" }, children: [
      /* @__PURE__ */ jsxRuntime.jsx("h4", { style: {
        margin: "0 0 12px 0",
        color: "var(--duino-color-fg)",
        fontSize: "14px",
        fontWeight: "500"
      }, children: "Color Personalizado" }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "input",
          {
            type: "color",
            value: customColor,
            onChange: (e) => handleCustomColorChange(e.target.value),
            style: {
              width: "40px",
              height: "40px",
              borderRadius: "var(--duino-radius)",
              border: "1px solid var(--duino-border)",
              cursor: "pointer"
            }
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          "input",
          {
            type: "text",
            value: customColor,
            onChange: (e) => handleCustomColorChange(e.target.value),
            placeholder: "#14b8a6",
            style: {
              flex: 1,
              padding: "8px 12px",
              borderRadius: "var(--duino-radius)",
              border: "1px solid var(--duino-border)",
              fontSize: "14px",
              fontFamily: "monospace"
            }
          }
        )
      ] })
    ] }),
    showCustomization && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "24px" }, children: [
      /* @__PURE__ */ jsxRuntime.jsx("h4", { style: {
        margin: "0 0 12px 0",
        color: "var(--duino-color-fg)",
        fontSize: "14px",
        fontWeight: "500"
      }, children: "Border Radius" }),
      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "input",
          {
            type: "range",
            min: "0",
            max: "24",
            value: customRadius,
            onChange: (e) => handleRadiusChange(e.target.value),
            style: { flex: 1 }
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: {
          minWidth: "50px",
          fontSize: "14px",
          fontFamily: "monospace",
          color: "var(--duino-color-muted)"
        }, children: [
          customRadius,
          "px"
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "8px", flexWrap: "wrap" }, children: [
      /* @__PURE__ */ jsxRuntime.jsx(
        "button",
        {
          onClick: resetTheme,
          className: "duino-btn duino-btn--secondary",
          style: { fontSize: "14px" },
          children: "Resetear"
        }
      ),
      /* @__PURE__ */ jsxRuntime.jsx(
        "button",
        {
          onClick: () => {
            const css = generateThemeCSS(theme);
            navigator.clipboard.writeText(css);
            alert("\xA1CSS copiado al portapapeles!");
          },
          className: "duino-btn duino-btn--ghost",
          style: { fontSize: "14px" },
          children: "Copiar CSS"
        }
      )
    ] })
  ] });
};
var generateThemeCSS = (theme) => {
  const brandColors = Object.entries(theme.colors.brand).map(([key, value]) => `  --duino-brand-${key}: ${value};`).join("\n");
  return `:root {
${brandColors}
  --duino-danger-500: ${theme.colors.danger};
  --duino-color-bg: ${theme.colors.background};
  --duino-color-fg: ${theme.colors.foreground};
  --duino-color-muted: ${theme.colors.muted};
  --duino-border: ${theme.colors.border};
  --duino-ring: ${theme.colors.ring};
  --duino-radius: ${theme.radius};
  --duino-font: ${theme.font};
  --duino-gap-sm: ${theme.spacing.sm};
  --duino-gap: ${theme.spacing.md};
  --duino-gap-lg: ${theme.spacing.lg};
}`;
};

Object.defineProperty(exports, "Button", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Button; }
});
Object.defineProperty(exports, "Collapse", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Collapse; }
});
Object.defineProperty(exports, "CollapsePanel", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.CollapsePanel; }
});
Object.defineProperty(exports, "Image", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Image; }
});
Object.defineProperty(exports, "MessageProvider", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.MessageProvider; }
});
Object.defineProperty(exports, "Modal", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Modal; }
});
Object.defineProperty(exports, "Popover", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Popover; }
});
Object.defineProperty(exports, "Select", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Select; }
});
Object.defineProperty(exports, "Sender", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Sender; }
});
Object.defineProperty(exports, "Spin", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Spin; }
});
Object.defineProperty(exports, "Table", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Table; }
});
Object.defineProperty(exports, "Upload", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.Upload; }
});
Object.defineProperty(exports, "useMessage", {
  enumerable: true,
  get: function () { return chunkAQNDSPDX_js.useMessage; }
});
Object.defineProperty(exports, "bem", {
  enumerable: true,
  get: function () { return chunkUBPQUXME_js.bem; }
});
Object.defineProperty(exports, "cx", {
  enumerable: true,
  get: function () { return chunkUBPQUXME_js.cx; }
});
exports.ThemeProvider = ThemeProvider;
exports.ThemeSwitcher = ThemeSwitcher;
exports.themePresets = themePresets;
exports.useTheme = useTheme;
//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map