klip-components 0.2.1 → 0.3.0

package/dist/klip-components.es.js

@@ -1,391 +1,356 @@
-import { jsx as d, jsxs as m } from "react/jsx-runtime";
-import l, { createContext as j, useContext as B, useState as g, useCallback as u, useEffect as D, useLayoutEffect as E } from "react";
-function x(r) {
-  var o, e, s = "";
-  if (typeof r == "string" || typeof r == "number") s += r;
-  else if (typeof r == "object") if (Array.isArray(r)) {
-    var a = r.length;
-    for (o = 0; o < a; o++) r[o] && (e = x(r[o])) && (s && (s += " "), s += e);
-  } else for (e in r) r[e] && (s && (s += " "), s += e);
-  return s;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useEffect, useLayoutEffect } from "react";
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
 }
-function L() {
-  for (var r, o, e = 0, s = "", a = arguments.length; e < a; e++) (r = arguments[e]) && (o = x(r)) && (s && (s += " "), s += o);
-  return s;
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
 }
-function A(...r) {
-  const o = r.join(" ").split(" ").filter(Boolean);
-  return [...new Set(o)].join(" ");
+function mergeClasses(...classes) {
+  const allClasses = classes.join(" ").split(" ").filter(Boolean);
+  return [...new Set(allClasses)].join(" ");
 }
-function $(...r) {
-  const o = L(...r);
-  return A(o);
+function cn(...inputs) {
+  const joinedClasses = clsx(...inputs);
+  return mergeClasses(joinedClasses);
 }
-const N = ({
-  variant: r = "primary",
-  size: o = "md",
-  block: e = !1,
-  className: s = "",
-  children: a,
-  ...i
-}) => /* @__PURE__ */ d(
-  "button",
-  {
-    className: $("btn", `btn-${r}`, o !== "md" && `btn-${o}`, e && "btn-block", s),
-    ...i,
-    children: a
-  }
-), w = j(void 0);
-function S() {
-  const r = B(w);
-  if (r === void 0)
+const Button = (_a) => {
+  var _b = _a, { variant = "primary", className = "", children } = _b, props = __objRest(_b, ["variant", "className", "children"]);
+  return /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues({ className: cn("rounded btn", `btn-${variant}`, className) }, props), { children }));
+};
+const ThemeContext = createContext(void 0);
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
     throw new Error("useTheme must be used within a ThemeProvider");
-  return r;
+  }
+  return context;
 }
-function X() {
-  const { theme: r } = S();
+function useThemeVariables() {
+  const { theme } = useTheme();
   return {
     // Colors
-    primaryColor: `var(--primary-color, ${r.colors.primary.main})`,
-    primaryHover: `var(--primary-hover, ${r.colors.primary.hover})`,
-    secondaryColor: `var(--secondary-color, ${r.colors.secondary.main})`,
-    secondaryHover: `var(--secondary-hover, ${r.colors.secondary.hover})`,
-    tertiaryColor: `var(--tertiary-color, ${r.colors.tertiary.main})`,
-    tertiaryHover: `var(--tertiary-hover, ${r.colors.tertiary.hover})`,
-    successColor: `var(--success-color, ${r.colors.semantic.success})`,
-    dangerColor: `var(--danger-color, ${r.colors.semantic.danger})`,
-    warningColor: `var(--warning-color, ${r.colors.semantic.warning})`,
-    infoColor: `var(--info-color, ${r.colors.semantic.info})`,
+    primaryColor: `var(--primary-color, ${theme.colors.primary.main})`,
+    primaryHover: `var(--primary-hover, ${theme.colors.primary.hover})`,
+    secondaryColor: `var(--secondary-color, ${theme.colors.secondary.main})`,
+    secondaryHover: `var(--secondary-hover, ${theme.colors.secondary.hover})`,
+    successColor: `var(--success-color, ${theme.colors.semantic.success})`,
+    dangerColor: `var(--danger-color, ${theme.colors.semantic.danger})`,
+    warningColor: `var(--warning-color, ${theme.colors.semantic.warning})`,
+    infoColor: `var(--info-color, ${theme.colors.semantic.info})`,
+    lightColor: `var(--light-color, ${theme.colors.semantic.light})`,
+    darkColor: `var(--dark-color, ${theme.colors.semantic.dark})`,
+    linkColor: `var(--link-color, ${theme.colors.semantic.link})`,
     // Spacing
-    spacingXs: `var(--spacing-xs, ${r.spacing.xs})`,
-    spacingSm: `var(--spacing-sm, ${r.spacing.sm})`,
-    spacingMd: `var(--spacing-md, ${r.spacing.md})`,
-    spacingLg: `var(--spacing-lg, ${r.spacing.lg})`,
-    spacingXl: `var(--spacing-xl, ${r.spacing.xl})`,
+    spacingXs: `var(--spacing-xs, ${theme.spacing.xs})`,
+    spacingSm: `var(--spacing-sm, ${theme.spacing.sm})`,
+    spacingMd: `var(--spacing-md, ${theme.spacing.md})`,
+    spacingLg: `var(--spacing-lg, ${theme.spacing.lg})`,
+    spacingXl: `var(--spacing-xl, ${theme.spacing.xl})`,
     // Border radius
-    borderRadiusSm: `var(--border-radius-sm, ${r.borderRadius.sm})`,
-    borderRadius: `var(--border-radius, ${r.borderRadius.base})`,
-    borderRadiusLg: `var(--border-radius-lg, ${r.borderRadius.lg})`,
+    borderRadiusSm: `var(--border-radius-sm, ${theme.borderRadius.sm})`,
+    borderRadius: `var(--border-radius, ${theme.borderRadius.base})`,
+    borderRadiusLg: `var(--border-radius-lg, ${theme.borderRadius.lg})`,
+    borderRadiusFull: `var(--border-radius-full, ${theme.borderRadius.full})`,
     // Typography
-    fontFamily: `var(--font-family, ${r.typography.fontFamily})`,
-    fontSizeSm: `var(--font-size-sm, ${r.typography.fontSize.sm})`,
-    fontSizeBase: `var(--font-size-base, ${r.typography.fontSize.base})`,
-    fontSizeLg: `var(--font-size-lg, ${r.typography.fontSize.lg})`,
+    fontFamily: `var(--font-family, ${theme.typography.fontFamily})`,
+    fontSizeSm: `var(--font-size-sm, ${theme.typography.fontSize.sm})`,
+    fontSizeBase: `var(--font-size-base, ${theme.typography.fontSize.base})`,
+    fontSizeLg: `var(--font-size-lg, ${theme.typography.fontSize.lg})`,
     // Shadows
-    shadowSm: `var(--shadow-sm, ${r.shadows.sm})`,
-    shadowMd: `var(--shadow-md, ${r.shadows.md})`,
-    shadowLg: `var(--shadow-lg, ${r.shadows.lg})`
+    shadowSm: `var(--shadow-sm, ${theme.shadows.sm})`,
+    shadowMd: `var(--shadow-md, ${theme.shadows.md})`,
+    shadowLg: `var(--shadow-lg, ${theme.shadows.lg})`
   };
 }
-function Q({ className: r }) {
-  const { mode: o, setMode: e, isDark: s } = S(), a = () => {
-    e(o === "auto" ? "light" : o === "light" ? "dark" : "auto");
-  }, i = () => {
-    switch (o) {
+function ThemeToggle({ className }) {
+  const { mode, setMode, isDark } = useTheme();
+  const handleToggle = () => {
+    if (mode === "auto") {
+      setMode("light");
+    } else if (mode === "light") {
+      setMode("dark");
+    } else {
+      setMode("auto");
+    }
+  };
+  const getButtonText = () => {
+    switch (mode) {
       case "light":
         return "☀️ Light";
       case "dark":
         return "🌙 Dark";
       case "auto":
-        return `🔄 Auto (${s ? "Dark" : "Light"})`;
+        return `🔄 Auto (${isDark ? "Dark" : "Light"})`;
       default:
         return "Theme";
     }
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ jsx(
     "button",
     {
-      onClick: a,
-      className: $(
+      onClick: handleToggle,
+      className: cn(
         "px-3 py-2 rounded-md text-sm font-medium transition-colors",
         "bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600",
         "text-gray-900 dark:text-gray-100",
-        r
+        className
       ),
-      title: `Current theme: ${o}${o === "auto" ? ` (${s ? "dark" : "light"})` : ""}`,
-      children: i()
+      title: `Current theme: ${mode}${mode === "auto" ? ` (${isDark ? "dark" : "light"})` : ""}`,
+      children: getButtonText()
     }
   );
 }
-function Y({ className: r }) {
-  return console.log("React version:", l.version), console.log("React object:", l), /* @__PURE__ */ m("div", { className: r, children: [
-    /* @__PURE__ */ m("p", { children: [
-      "React Version: ",
-      l.version
-    ] }),
-    /* @__PURE__ */ m("p", { children: [
-      "React loaded: ",
-      l ? "Yes" : "No"
-    ] })
-  ] });
-}
-function q({ children: r, onClick: o, className: e }) {
-  return /* @__PURE__ */ d(
-    "button",
-    {
-      onClick: o,
-      className: e,
-      style: {
-        padding: "8px 16px",
-        backgroundColor: "#007bff",
-        color: "white",
-        border: "none",
-        borderRadius: "4px"
-      },
-      children: r
-    }
-  );
-}
-const b = {
+const defaultTheme = {
   colors: {
-    primary: {
-      main: "#05445e",
-      hover: "#033e52"
-    },
-    secondary: {
-      main: "#189ab4",
-      hover: "#0f7a9c"
-    },
-    tertiary: {
-      main: "#75e6da",
-      hover: "#5cc6c0"
-    },
+    primary: { main: "#2d99ff", hover: "#2682d9" },
+    secondary: { main: "#f5f7fa", hover: "#e3e5e8" },
     semantic: {
       success: "#18a558",
       danger: "#db1f48",
       warning: "#e9b210",
-      info: "#e0e9e0"
+      info: "#75e6da",
+      light: "#ffffff",
+      dark: "#1a1926",
+      link: "#2d99ff"
     }
   },
-  spacing: {
-    xs: "0.25rem",
-    sm: "0.5rem",
-    md: "1rem",
-    lg: "1.5rem",
-    xl: "2rem"
-  },
-  borderRadius: {
-    sm: "4px",
-    base: "8px",
-    lg: "12px"
-  },
+  spacing: { xs: "0.25rem", sm: "0.5rem", md: "1rem", lg: "1.5rem", xl: "2rem" },
+  borderRadius: { sm: "4px", base: "12px", lg: "20px", full: "50%" },
   typography: {
-    fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
-    fontSize: {
-      sm: "0.875rem",
-      base: "1rem",
-      lg: "1.125rem"
-    }
+    fontFamily: `Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
+    fontSize: { sm: "0.875rem", base: "1rem", lg: "1.125rem" }
   },
   shadows: {
     sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
     md: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
     lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)"
   }
-}, M = {
+};
+const defaultDarkTheme = {
   colors: {
-    primary: {
-      main: "#7dd3fc",
-      hover: "#0ea5e9"
-    },
-    secondary: {
-      main: "#34d399",
-      hover: "#10b981"
-    },
-    tertiary: {
-      main: "#fbbf24",
-      hover: "#f59e0b"
-    },
+    primary: { main: "#2d99ff", hover: "#2682d9" },
+    secondary: { main: "#f5f7fa", hover: "#e3e5e8" },
     semantic: {
-      success: "#22c55e",
-      danger: "#ef4444",
-      warning: "#f59e0b",
-      info: "#3b82f6"
+      success: "#18a558",
+      danger: "#db1f48",
+      warning: "#e9b210",
+      info: "#75e6da",
+      light: "#ffffff",
+      dark: "#1a1926",
+      link: "#2d99ff"
     }
   },
-  spacing: {
-    xs: "0.25rem",
-    sm: "0.5rem",
-    md: "1rem",
-    lg: "1.5rem",
-    xl: "2rem"
-  },
-  borderRadius: {
-    sm: "4px",
-    base: "8px",
-    lg: "12px"
-  },
+  spacing: { xs: "0.25rem", sm: "0.5rem", md: "1rem", lg: "1.5rem", xl: "2rem" },
+  borderRadius: { sm: "4px", base: "12px", lg: "20px", full: "50%" },
   typography: {
-    fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
-    fontSize: {
-      sm: "0.875rem",
-      base: "1rem",
-      lg: "1.125rem"
-    }
+    fontFamily: `Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`,
+    fontSize: { sm: "0.875rem", base: "1rem", lg: "1.125rem" }
   },
   shadows: {
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.15)",
-    md: "0 4px 6px -1px rgb(0 0 0 / 0.2)",
-    lg: "0 10px 15px -3px rgb(0 0 0 / 0.25)"
+    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    md: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1)"
   }
 };
-function v(r, o) {
+function mergeTheme(baseTheme, override) {
+  var _a, _b, _c, _d;
   return {
     colors: {
-      primary: {
-        ...r.colors.primary,
-        ...o.colors?.primary
-      },
-      secondary: {
-        ...r.colors.secondary,
-        ...o.colors?.secondary
-      },
-      tertiary: {
-        ...r.colors.tertiary,
-        ...o.colors?.tertiary
-      },
-      semantic: {
-        ...r.colors.semantic,
-        ...o.colors?.semantic
-      }
+      primary: __spreadValues(__spreadValues({}, baseTheme.colors.primary), (_a = override.colors) == null ? void 0 : _a.primary),
+      secondary: __spreadValues(__spreadValues({}, baseTheme.colors.secondary), (_b = override.colors) == null ? void 0 : _b.secondary),
+      semantic: __spreadValues(__spreadValues({}, baseTheme.colors.semantic), (_c = override.colors) == null ? void 0 : _c.semantic)
     },
-    spacing: {
-      ...r.spacing,
-      ...o.spacing
-    },
-    borderRadius: {
-      ...r.borderRadius,
-      ...o.borderRadius
-    },
-    typography: {
-      ...r.typography,
-      ...o.typography,
-      fontSize: {
-        ...r.typography.fontSize,
-        ...o.typography?.fontSize
-      }
-    },
-    shadows: {
-      ...r.shadows,
-      ...o.shadows
-    }
+    spacing: __spreadValues(__spreadValues({}, baseTheme.spacing), override.spacing),
+    borderRadius: __spreadValues(__spreadValues({}, baseTheme.borderRadius), override.borderRadius),
+    typography: __spreadProps(__spreadValues(__spreadValues({}, baseTheme.typography), override.typography), {
+      fontSize: __spreadValues(__spreadValues({}, baseTheme.typography.fontSize), (_d = override.typography) == null ? void 0 : _d.fontSize)
+    }),
+    shadows: __spreadValues(__spreadValues({}, baseTheme.shadows), override.shadows)
   };
 }
-function G(r, o = document.documentElement) {
-  o.style.setProperty("--primary-color", r.colors.primary.main), o.style.setProperty("--primary-hover", r.colors.primary.hover), o.style.setProperty("--secondary-color", r.colors.secondary.main), o.style.setProperty("--secondary-hover", r.colors.secondary.hover), o.style.setProperty("--tertiary-color", r.colors.tertiary.main), o.style.setProperty("--tertiary-hover", r.colors.tertiary.hover), o.style.setProperty("--success-color", r.colors.semantic.success), o.style.setProperty("--danger-color", r.colors.semantic.danger), o.style.setProperty("--warning-color", r.colors.semantic.warning), o.style.setProperty("--info-color", r.colors.semantic.info), o.style.setProperty("--spacing-xs", r.spacing.xs), o.style.setProperty("--spacing-sm", r.spacing.sm), o.style.setProperty("--spacing-md", r.spacing.md), o.style.setProperty("--spacing-lg", r.spacing.lg), o.style.setProperty("--spacing-xl", r.spacing.xl), o.style.setProperty("--border-radius-sm", r.borderRadius.sm), o.style.setProperty("--border-radius", r.borderRadius.base), o.style.setProperty("--border-radius-lg", r.borderRadius.lg), o.style.setProperty("--font-family", r.typography.fontFamily), o.style.setProperty("--font-size-sm", r.typography.fontSize.sm), o.style.setProperty("--font-size-base", r.typography.fontSize.base), o.style.setProperty("--font-size-lg", r.typography.fontSize.lg), o.style.setProperty("--shadow-sm", r.shadows.sm), o.style.setProperty("--shadow-md", r.shadows.md), o.style.setProperty("--shadow-lg", r.shadows.lg);
+function applyThemeToDOM(theme, target = document.documentElement) {
+  target.style.setProperty("--primary-color", theme.colors.primary.main);
+  target.style.setProperty("--primary-hover", theme.colors.primary.hover);
+  target.style.setProperty("--secondary-color", theme.colors.secondary.main);
+  target.style.setProperty("--secondary-hover", theme.colors.secondary.hover);
+  target.style.setProperty("--success-color", theme.colors.semantic.success);
+  target.style.setProperty("--danger-color", theme.colors.semantic.danger);
+  target.style.setProperty("--warning-color", theme.colors.semantic.warning);
+  target.style.setProperty("--info-color", theme.colors.semantic.info);
+  target.style.setProperty("--spacing-xs", theme.spacing.xs);
+  target.style.setProperty("--spacing-sm", theme.spacing.sm);
+  target.style.setProperty("--spacing-md", theme.spacing.md);
+  target.style.setProperty("--spacing-lg", theme.spacing.lg);
+  target.style.setProperty("--spacing-xl", theme.spacing.xl);
+  target.style.setProperty("--border-radius-sm", theme.borderRadius.sm);
+  target.style.setProperty("--border-radius", theme.borderRadius.base);
+  target.style.setProperty("--border-radius-lg", theme.borderRadius.lg);
+  target.style.setProperty("--font-family", theme.typography.fontFamily);
+  target.style.setProperty("--font-size-sm", theme.typography.fontSize.sm);
+  target.style.setProperty("--font-size-base", theme.typography.fontSize.base);
+  target.style.setProperty("--font-size-lg", theme.typography.fontSize.lg);
+  target.style.setProperty("--shadow-sm", theme.shadows.sm);
+  target.style.setProperty("--shadow-md", theme.shadows.md);
+  target.style.setProperty("--shadow-lg", theme.shadows.lg);
 }
-function J(r, o) {
-  const e = o.split(".");
-  let s = r;
-  for (const a of e) {
-    if (typeof s != "object" || s === null || !(a in s))
-      return;
-    s = s[a];
+function getThemeValue(theme, path) {
+  const pathArray = path.split(".");
+  let current = theme;
+  for (const key of pathArray) {
+    if (typeof current !== "object" || current === null || !(key in current)) {
+      return void 0;
+    }
+    current = current[key];
   }
-  return typeof s == "string" ? s : void 0;
+  return typeof current === "string" ? current : void 0;
 }
-function K(r) {
-  return `--${r.replace(/\./g, "-")}`;
+function createCSSVariable(path) {
+  return `--${path.replace(/\./g, "-")}`;
 }
-function F() {
-  return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+function detectColorScheme() {
+  if (typeof window === "undefined") {
+    return "light";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function H(r, o = ":root") {
-  return `
-${o} {
-  /* Colors */
-  --primary-color: ${r.colors.primary.main};
-  --primary-hover: ${r.colors.primary.hover};
-  --secondary-color: ${r.colors.secondary.main};
-  --secondary-hover: ${r.colors.secondary.hover};
-  --tertiary-color: ${r.colors.tertiary.main};
-  --tertiary-hover: ${r.colors.tertiary.hover};
-  --success-color: ${r.colors.semantic.success};
-  --danger-color: ${r.colors.semantic.danger};
-  --warning-color: ${r.colors.semantic.warning};
-  --info-color: ${r.colors.semantic.info};
-
-  /* Spacing */
-  --spacing-xs: ${r.spacing.xs};
-  --spacing-sm: ${r.spacing.sm};
-  --spacing-md: ${r.spacing.md};
-  --spacing-lg: ${r.spacing.lg};
-  --spacing-xl: ${r.spacing.xl};
-
-  /* Border Radius */
-  --border-radius-sm: ${r.borderRadius.sm};
-  --border-radius: ${r.borderRadius.base};
-  --border-radius-lg: ${r.borderRadius.lg};
-
-  /* Typography */
-  --font-family: ${r.typography.fontFamily};
-  --font-size-sm: ${r.typography.fontSize.sm};
-  --font-size-base: ${r.typography.fontSize.base};
-  --font-size-lg: ${r.typography.fontSize.lg};
-
-  /* Shadows */
-  --shadow-sm: ${r.shadows.sm};
-  --shadow-md: ${r.shadows.md};
-  --shadow-lg: ${r.shadows.lg};
-}`;
+function generateThemeCSS(theme, selector = ":root") {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na;
+  const vars = [
+    `--color-primary:${(_c = (_b = (_a = theme.colors) == null ? void 0 : _a.primary) == null ? void 0 : _b.main) != null ? _c : ""}`,
+    `--hover-primary:${(_f = (_e = (_d = theme.colors) == null ? void 0 : _d.primary) == null ? void 0 : _e.hover) != null ? _f : ""}`,
+    `--color-secondary:${(_i = (_h = (_g = theme.colors) == null ? void 0 : _g.secondary) == null ? void 0 : _h.main) != null ? _i : ""}`,
+    `--hover-secondary:${(_l = (_k = (_j = theme.colors) == null ? void 0 : _j.secondary) == null ? void 0 : _k.hover) != null ? _l : ""}`,
+    `--color-success:${(_o = (_n = (_m = theme.colors) == null ? void 0 : _m.semantic) == null ? void 0 : _n.success) != null ? _o : ""}`,
+    `--color-danger:${(_r = (_q = (_p = theme.colors) == null ? void 0 : _p.semantic) == null ? void 0 : _q.danger) != null ? _r : ""}`,
+    `--color-warning:${(_u = (_t = (_s = theme.colors) == null ? void 0 : _s.semantic) == null ? void 0 : _t.warning) != null ? _u : ""}`,
+    `--color-info:${(_x = (_w = (_v = theme.colors) == null ? void 0 : _v.semantic) == null ? void 0 : _w.info) != null ? _x : ""}`,
+    `--color-light:${(_A = (_z = (_y = theme.colors) == null ? void 0 : _y.semantic) == null ? void 0 : _z.light) != null ? _A : ""}`,
+    `--color-dark:${(_D = (_C = (_B = theme.colors) == null ? void 0 : _B.semantic) == null ? void 0 : _C.dark) != null ? _D : ""}`,
+    `--color-link:${(_G = (_F = (_E = theme.colors) == null ? void 0 : _E.semantic) == null ? void 0 : _F.link) != null ? _G : ""}`,
+    `--rounded:${(_I = (_H = theme.borderRadius) == null ? void 0 : _H.base) != null ? _I : ""}`,
+    `--rounded-sm:${(_K = (_J = theme.borderRadius) == null ? void 0 : _J.sm) != null ? _K : ""}`,
+    `--rounded-lg:${(_M = (_L = theme.borderRadius) == null ? void 0 : _L.lg) != null ? _M : ""}`,
+    `--rounded-full:${(_O = (_N = theme.borderRadius) == null ? void 0 : _N.full) != null ? _O : ""}`,
+    `--font-family:${(_Q = (_P = theme.typography) == null ? void 0 : _P.fontFamily) != null ? _Q : ""}`,
+    `--font-sm:${(_T = (_S = (_R = theme.typography) == null ? void 0 : _R.fontSize) == null ? void 0 : _S.sm) != null ? _T : ""}`,
+    `--font-base:${(_W = (_V = (_U = theme.typography) == null ? void 0 : _U.fontSize) == null ? void 0 : _V.base) != null ? _W : ""}`,
+    `--font-lg:${(_Z = (_Y = (_X = theme.typography) == null ? void 0 : _X.fontSize) == null ? void 0 : _Y.lg) != null ? _Z : ""}`,
+    `--spacing-xs:${(_$ = (__ = theme.spacing) == null ? void 0 : __.xs) != null ? _$ : ""}`,
+    `--spacing-sm:${(_ba = (_aa = theme.spacing) == null ? void 0 : _aa.sm) != null ? _ba : ""}`,
+    `--spacing-md:${(_da = (_ca = theme.spacing) == null ? void 0 : _ca.md) != null ? _da : ""}`,
+    `--spacing-lg:${(_fa = (_ea = theme.spacing) == null ? void 0 : _ea.lg) != null ? _fa : ""}`,
+    `--spacing-xl:${(_ha = (_ga = theme.spacing) == null ? void 0 : _ga.xl) != null ? _ha : ""}`,
+    `--shadow-sm:${(_ja = (_ia = theme.shadows) == null ? void 0 : _ia.sm) != null ? _ja : ""}`,
+    `--shadow-md:${(_la = (_ka = theme.shadows) == null ? void 0 : _ka.md) != null ? _la : ""}`,
+    `--shadow-lg:${(_na = (_ma = theme.shadows) == null ? void 0 : _ma.lg) != null ? _na : ""}`
+  ];
+  return `${selector}{${vars.join(";")}}`;
 }
-function U({
-  children: r,
-  defaultMode: o = "auto",
-  theme: e,
-  darkTheme: s = M
+function ThemeProvider({
+  children,
+  defaultMode = "auto",
+  theme,
+  darkTheme = defaultDarkTheme
 }) {
-  const [a, i] = g(o), [y, f] = g(e || {}), [k, P] = g(() => F() === "dark"), h = a === "dark" || a === "auto" && k, p = v(h ? s : b, y), z = u((n) => {
-    i(n);
-  }, []), C = u((n) => {
-    f((t) => v({ ...b, ...t }, n));
-  }, []), R = u(() => {
-    f({});
+  const [mode, setModeState] = useState(defaultMode);
+  const [themeOverride, setThemeOverride] = useState(theme || {});
+  const [systemDark, setSystemDark] = useState(() => detectColorScheme() === "dark");
+  const isDark = mode === "dark" || mode === "auto" && systemDark;
+  const baseTheme = isDark ? darkTheme : defaultTheme;
+  const mergedTheme = mergeTheme(baseTheme, themeOverride);
+  const setMode = useCallback((newMode) => {
+    setModeState(newMode);
   }, []);
-  D(() => {
-    if (typeof window > "u") return;
-    const n = window.matchMedia("(prefers-color-scheme: dark)"), t = (c) => {
-      P(c.matches);
+  const updateTheme = useCallback((override) => {
+    setThemeOverride((prev) => mergeTheme(__spreadValues(__spreadValues({}, defaultTheme), prev), override));
+  }, []);
+  const resetTheme = useCallback(() => {
+    setThemeOverride({});
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setSystemDark(e.matches);
     };
-    return n.addEventListener("change", t), () => n.removeEventListener("change", t);
-  }, []), E(() => {
-    if (Object.keys(y).length > 0) {
-      const n = H(p), t = document.getElementById("klip-custom-theme");
-      t && t.remove();
-      const c = document.createElement("style");
-      c.id = "klip-custom-theme", c.textContent = n, document.head.insertBefore(c, document.head.firstChild);
-    } else {
-      const n = document.getElementById("klip-custom-theme");
-      n && n.remove();
-    }
-  }, [p, y]);
-  const T = {
-    theme: p,
-    mode: a,
-    setMode: z,
-    updateTheme: C,
-    resetTheme: R,
-    isDark: h
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  useLayoutEffect(() => {
+    const css = generateThemeCSS(mergedTheme);
+    const existingStyle = document.getElementById("klip-custom-theme");
+    if (existingStyle) existingStyle.remove();
+    const style = document.createElement("style");
+    style.id = "klip-custom-theme";
+    style.textContent = css;
+    document.head.appendChild(style);
+  }, [mergedTheme]);
+  const contextValue = {
+    theme: mergedTheme,
+    mode,
+    setMode,
+    updateTheme,
+    resetTheme,
+    isDark
   };
-  return /* @__PURE__ */ d(w.Provider, { value: T, children: r });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
 }
 export {
-  N as Button,
-  Y as Debug,
-  q as SimpleButton,
-  w as ThemeContext,
-  U as ThemeProvider,
-  Q as ThemeToggle,
-  G as applyThemeToDOM,
-  L as clsx,
-  $ as cn,
-  K as createCSSVariable,
-  M as darkTheme,
-  b as defaultTheme,
-  F as detectColorScheme,
-  J as getThemeValue,
-  A as mergeClasses,
-  v as mergeTheme,
-  S as useTheme,
-  X as useThemeVariables
+  Button,
+  ThemeContext,
+  ThemeProvider,
+  ThemeToggle,
+  applyThemeToDOM,
+  clsx,
+  cn,
+  createCSSVariable,
+  defaultDarkTheme as darkTheme,
+  defaultTheme,
+  detectColorScheme,
+  getThemeValue,
+  mergeClasses,
+  mergeTheme,
+  useTheme,
+  useThemeVariables
 };