klip-components 0.2.1

package/dist/klip-components.es.js

@@ -0,0 +1,391 @@
+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;
+}
+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 A(...r) {
+  const o = r.join(" ").split(" ").filter(Boolean);
+  return [...new Set(o)].join(" ");
+}
+function $(...r) {
+  const o = L(...r);
+  return A(o);
+}
+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)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return r;
+}
+function X() {
+  const { theme: r } = S();
+  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})`,
+    // 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})`,
+    // 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})`,
+    // 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})`,
+    // Shadows
+    shadowSm: `var(--shadow-sm, ${r.shadows.sm})`,
+    shadowMd: `var(--shadow-md, ${r.shadows.md})`,
+    shadowLg: `var(--shadow-lg, ${r.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) {
+      case "light":
+        return "☀️ Light";
+      case "dark":
+        return "🌙 Dark";
+      case "auto":
+        return `🔄 Auto (${s ? "Dark" : "Light"})`;
+      default:
+        return "Theme";
+    }
+  };
+  return /* @__PURE__ */ d(
+    "button",
+    {
+      onClick: a,
+      className: $(
+        "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
+      ),
+      title: `Current theme: ${o}${o === "auto" ? ` (${s ? "dark" : "light"})` : ""}`,
+      children: i()
+    }
+  );
+}
+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 = {
+  colors: {
+    primary: {
+      main: "#05445e",
+      hover: "#033e52"
+    },
+    secondary: {
+      main: "#189ab4",
+      hover: "#0f7a9c"
+    },
+    tertiary: {
+      main: "#75e6da",
+      hover: "#5cc6c0"
+    },
+    semantic: {
+      success: "#18a558",
+      danger: "#db1f48",
+      warning: "#e9b210",
+      info: "#e0e9e0"
+    }
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  borderRadius: {
+    sm: "4px",
+    base: "8px",
+    lg: "12px"
+  },
+  typography: {
+    fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
+    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 = {
+  colors: {
+    primary: {
+      main: "#7dd3fc",
+      hover: "#0ea5e9"
+    },
+    secondary: {
+      main: "#34d399",
+      hover: "#10b981"
+    },
+    tertiary: {
+      main: "#fbbf24",
+      hover: "#f59e0b"
+    },
+    semantic: {
+      success: "#22c55e",
+      danger: "#ef4444",
+      warning: "#f59e0b",
+      info: "#3b82f6"
+    }
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  borderRadius: {
+    sm: "4px",
+    base: "8px",
+    lg: "12px"
+  },
+  typography: {
+    fontFamily: "Inter, system-ui, Avenir, Helvetica, Arial, sans-serif",
+    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)"
+  }
+};
+function v(r, o) {
+  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
+      }
+    },
+    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
+    }
+  };
+}
+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 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];
+  }
+  return typeof s == "string" ? s : void 0;
+}
+function K(r) {
+  return `--${r.replace(/\./g, "-")}`;
+}
+function F() {
+  return typeof window > "u" ? "light" : 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 U({
+  children: r,
+  defaultMode: o = "auto",
+  theme: e,
+  darkTheme: s = M
+}) {
+  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({});
+  }, []);
+  D(() => {
+    if (typeof window > "u") return;
+    const n = window.matchMedia("(prefers-color-scheme: dark)"), t = (c) => {
+      P(c.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
+  };
+  return /* @__PURE__ */ d(w.Provider, { value: T, children: r });
+}
+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
+};

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { Theme, ThemeMode, ThemeOverride } from '../types/theme';
+export interface ThemeProviderProps {
+    /** Children components */
+    children: React.ReactNode;
+    /** Initial theme mode */
+    defaultMode?: ThemeMode;
+    /** Initial theme overrides */
+    theme?: ThemeOverride;
+    /** Custom dark theme (overrides default) */
+    darkTheme?: Theme;
+}
+/**
+ * Theme Provider component that manages theme state and applies themes to the DOM
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from 'klip-components';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider
+ *       defaultMode="auto"
+ *       theme={{
+ *         colors: {
+ *           primary: { main: '#ff6b6b', hover: '#ff5252' }
+ *         }
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+export declare function ThemeProvider({ children, defaultMode, theme, darkTheme, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAMjE,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,WAAoB,EACpB,KAAK,EACL,SAA4B,GAC7B,EAAE,kBAAkB,2CAgFpB"}

package/dist/theme/context.d.ts

@@ -0,0 +1,17 @@
+import { Theme, ThemeOverride, ThemeMode } from '../types/theme';
+export interface ThemeContextValue {
+    /** Current active theme */
+    theme: Theme;
+    /** Current theme mode */
+    mode: ThemeMode;
+    /** Set theme mode */
+    setMode: (mode: ThemeMode) => void;
+    /** Update theme with overrides */
+    updateTheme: (override: ThemeOverride) => void;
+    /** Reset theme to default */
+    resetTheme: () => void;
+    /** Whether dark mode is active */
+    isDark: boolean;
+}
+export declare const ThemeContext: import('react').Context<ThemeContextValue | undefined>;
+//# sourceMappingURL=context.d.ts.map

package/dist/theme/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/theme/context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,WAAW,iBAAiB;IAChC,2BAA2B;IAC3B,KAAK,EAAE,KAAK,CAAC;IACb,yBAAyB;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,qBAAqB;IACrB,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,kCAAkC;IAClC,WAAW,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,6BAA6B;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,kCAAkC;IAClC,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,wDAA0D,CAAC"}

package/dist/theme/cssGenerator.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from '../types/theme';
+/**
+ * Generates CSS string from theme object
+ */
+export declare function generateThemeCSS(theme: Theme, selector?: string): string;
+/**
+ * Injects CSS into the document head
+ */
+export declare function injectThemeCSS(theme: Theme, id?: string): void;
+/**
+ * Downloads theme as CSS file
+ */
+export declare function downloadThemeCSS(theme: Theme, filename?: string): void;
+//# sourceMappingURL=cssGenerator.d.ts.map

package/dist/theme/cssGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssGenerator.d.ts","sourceRoot":"","sources":["../../src/theme/cssGenerator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,GAAE,MAAgB,GAAG,MAAM,CAsCjF;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,GAAE,MAAwB,GAAG,IAAI,CAc/E;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,GAAE,MAA2B,GAAG,IAAI,CAW1F"}

package/dist/theme/defaultThemes.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '../types/theme';
+/**
+ * Default light theme configuration
+ * Based on the existing CSS variables in variables.css
+ */
+export declare const defaultTheme: Theme;
+/**
+ * Example dark theme
+ */
+export declare const defaultDarkTheme: Theme;
+//# sourceMappingURL=defaultThemes.d.ts.map

package/dist/theme/defaultThemes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultThemes.d.ts","sourceRoot":"","sources":["../../src/theme/defaultThemes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KA8C1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KA8C9B,CAAC"}

package/dist/theme/hooks.d.ts

@@ -0,0 +1,68 @@
+import { ThemeContextValue } from './context';
+/**
+ * Hook to access theme context
+ * Must be used within a ThemeProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, isDark, setMode } = useTheme();
+ *
+ *   return (
+ *     <div style={{ color: theme.colors.primary.main }}>
+ *       <button onClick={() => setMode(isDark ? 'light' : 'dark')}>
+ *         Toggle theme
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Hook to get theme-aware CSS variables
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const cssVars = useThemeVariables();
+ *
+ *   return (
+ *     <div style={{
+ *       backgroundColor: cssVars.primaryColor,
+ *       padding: cssVars.spacingMd,
+ *     }}>
+ *       Content
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useThemeVariables(): {
+    primaryColor: string;
+    primaryHover: string;
+    secondaryColor: string;
+    secondaryHover: string;
+    tertiaryColor: string;
+    tertiaryHover: string;
+    successColor: string;
+    dangerColor: string;
+    warningColor: string;
+    infoColor: string;
+    spacingXs: string;
+    spacingSm: string;
+    spacingMd: string;
+    spacingLg: string;
+    spacingXl: string;
+    borderRadiusSm: string;
+    borderRadius: string;
+    borderRadiusLg: string;
+    fontFamily: string;
+    fontSizeSm: string;
+    fontSizeBase: string;
+    fontSizeLg: string;
+    shadowSm: string;
+    shadowMd: string;
+    shadowLg: string;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/theme/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/theme/hooks.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAE5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;EAuChC"}

package/dist/theme/index.d.ts

@@ -0,0 +1,9 @@
+export type { Theme, ThemeOverride, ThemeMode, ColorPalette, SpacingScale, BorderRadius, Typography, Shadows, } from '../types/theme';
+export { ThemeProvider } from './ThemeProvider';
+export type { ThemeProviderProps } from './ThemeProvider';
+export { ThemeContext } from './context';
+export type { ThemeContextValue } from './context';
+export { useTheme, useThemeVariables } from './hooks';
+export { defaultTheme, defaultDarkTheme as darkTheme } from './defaultThemes';
+export { mergeTheme, applyThemeToDOM, getThemeValue, createCSSVariable, detectColorScheme } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,KAAK,EACL,aAAa,EACb,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,OAAO,GACR,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAGnD,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAGtD,OAAO,EAAE,YAAY,EAAE,gBAAgB,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG9E,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,aAAa,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/theme/utils.d.ts

@@ -0,0 +1,23 @@
+import { Theme, ThemeOverride } from '../types/theme';
+/**
+ * Merges theme overrides with base theme
+ * Performs deep merge to allow partial customization
+ */
+export declare function mergeTheme(baseTheme: Theme, override: ThemeOverride): Theme;
+/**
+ * Applies theme CSS custom properties to the DOM
+ */
+export declare function applyThemeToDOM(theme: Theme, target?: HTMLElement): void;
+/**
+ * Gets CSS custom property value from theme
+ */
+export declare function getThemeValue(theme: Theme, path: string): string | undefined;
+/**
+ * Creates CSS custom property name from theme path
+ */
+export declare function createCSSVariable(path: string): string;
+/**
+ * Detects user's preferred color scheme
+ */
+export declare function detectColorScheme(): 'light' | 'dark';
+//# sourceMappingURL=utils.d.ts.map

package/dist/theme/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/theme/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEtD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,GAAG,KAAK,CAyC3E;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,GAAE,WAAsC,GAAG,IAAI,CAmClG;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAY5E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEtD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,GAAG,MAAM,CAMpD"}

package/dist/types/theme.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Theme system type definitions for klip-components
+ * Provides type safety for color palettes and design tokens
+ */
+export interface ColorPalette {
+    /** Primary color variants */
+    primary: {
+        main: string;
+        hover: string;
+    };
+    /** Secondary color variants */
+    secondary: {
+        main: string;
+        hover: string;
+    };
+    /** Tertiary color variants */
+    tertiary: {
+        main: string;
+        hover: string;
+    };
+    /** Semantic colors */
+    semantic: {
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+    };
+}
+export interface SpacingScale {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+export interface BorderRadius {
+    sm: string;
+    base: string;
+    lg: string;
+}
+export interface Typography {
+    fontFamily: string;
+    fontSize: {
+        sm: string;
+        base: string;
+        lg: string;
+    };
+}
+export interface Shadows {
+    sm: string;
+    md: string;
+    lg: string;
+}
+/**
+ * Complete theme configuration
+ */
+export interface Theme {
+    colors: ColorPalette;
+    spacing: SpacingScale;
+    borderRadius: BorderRadius;
+    typography: Typography;
+    shadows: Shadows;
+}
+/**
+ * Partial theme for customization - allows users to override only specific parts
+ */
+export type ThemeOverride = {
+    colors?: Partial<ColorPalette>;
+    spacing?: Partial<SpacingScale>;
+    borderRadius?: Partial<BorderRadius>;
+    typography?: Partial<Typography>;
+    shadows?: Partial<Shadows>;
+};
+/**
+ * Theme mode options
+ */
+export type ThemeMode = 'light' | 'dark' | 'auto';
+//# sourceMappingURL=theme.d.ts.map

package/dist/types/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/types/theme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,YAAY;IAC3B,6BAA6B;IAC7B,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,+BAA+B;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,8BAA8B;IAC9B,QAAQ,EAAE;QACR,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,sBAAsB;IACtB,QAAQ,EAAE;QACR,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,UAAU;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE;QACR,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;KACZ,CAAC;CACH;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,KAAK;IACpB,MAAM,EAAE,YAAY,CAAC;IACrB,OAAO,EAAE,YAAY,CAAC;IACtB,YAAY,EAAE,YAAY,CAAC;IAC3B,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC"}