klip-components 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -1,7 +1,359 @@
-export * from './components/Button';
-export * from './components/ThemeToggle';
-export * from './components/Debug';
-export * from './components/SimpleButton';
-export * from './theme';
-export * from './utils';
-//# sourceMappingURL=index.d.ts.map
+import { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
+import { Context } from 'react';
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+/**
+ * Applies theme CSS custom properties to the DOM
+ */
+export declare function applyThemeToDOM(theme: Theme, target?: HTMLElement): void;
+
+export declare interface BorderRadius {
+    sm: string;
+    base: string;
+    lg: string;
+    full: string;
+}
+
+/**
+ * A flexible and reusable Button component with multiple variants, sizes, and styling options.
+ * Supports all standard HTML button attributes and provides additional customization through props.
+ * Uses CSS classes for styling and conditionally applies classes based on props.
+ *
+ * @param {ButtonProps} props - The props for the Button component
+ * @param {('primary'|'secondary'|'success'|'danger')} [props.variant='primary'] - Visual style variant
+ * @param {('sm'|'md'|'lg')} [props.size='md'] - Button size
+ * @param {boolean} [props.block=false] - Whether button should be full width
+ * @param {string} [props.className=''] - Additional CSS classes to apply
+ * @param {React.ReactNode} props.children - Content to render inside the button
+ * @param {...React.ButtonHTMLAttributes<HTMLButtonElement>} props - All other standard button attributes
+ * @returns {JSX.Element} The rendered Button component
+ *
+ * @example
+ * // Basic primary button
+ * <Button>Click me</Button>
+ *
+ * @example
+ * // Secondary button with small size
+ * <Button variant="secondary" size="sm">Small Button</Button>
+ *
+ * @example
+ * // Full-width danger button with click handler
+ * <Button
+ *   variant="danger"
+ *   block
+ *   onClick={() => console.log('Clicked!')}
+ * >
+ *   Delete Item
+ * </Button>
+ *
+ * @example
+ * // Disabled success button with custom class
+ * <Button
+ *   variant="success"
+ *   size="lg"
+ *   disabled
+ *   className="my-custom-class"
+ * >
+ *   Save Changes
+ * </Button>
+ */
+export declare const Button: default_2.FC<ButtonProps>;
+
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant of the button */
+    variant?: ButtonVariant;
+    /** Content to be rendered inside the button */
+    children: default_2.ReactNode;
+}
+
+/**
+ * Props interface for the Button component.
+ * Extends standard HTML button attributes with additional styling options.
+ */
+declare type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'link' | 'outline' | 'ghost' | 'icon';
+
+export { ClassValue }
+
+export { clsx }
+
+/**
+ * Combines and conditionally applies CSS classes using clsx, then deduplicates them.
+ * This function leverages clsx for conditional class handling and mergeClasses for deduplication.
+ * Useful for component styling where you need both conditional logic and duplicate removal.
+ *
+ * @param {...ClassValue[]} inputs - Variable number of class values (strings, objects, arrays, etc.) supported by clsx
+ * @returns {string} A deduplicated string of CSS classes
+ *
+ * @example
+ * cn('btn', { 'btn-primary': true, 'btn-disabled': false }, 'mt-4')
+ * // Returns: 'btn btn-primary mt-4'
+ *
+ * @example
+ * cn('text-base', 'text-red-500', { 'font-bold': isActive }, 'text-base')
+ * // Returns: 'text-base text-red-500 font-bold' (if isActive is true)
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Theme system type definitions for klip-components
+ * Provides type safety for color palettes and design tokens
+ */
+export declare interface ColorPalette {
+    /** Primary color variants */
+    primary: {
+        main: string;
+        hover: string;
+    };
+    /** Secondary color variants */
+    secondary: {
+        main: string;
+        hover: string;
+    };
+    /** Semantic colors */
+    semantic: {
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+        light: string;
+        dark: string;
+        link: string;
+    };
+}
+
+/**
+ * Creates CSS custom property name from theme path
+ */
+export declare function createCSSVariable(path: string): string;
+
+/**
+ * Example dark theme
+ */
+export declare const darkTheme: Theme;
+
+/**
+ * Default light theme configuration
+ * Based on the existing CSS variables in variables.css
+ */
+export declare const defaultTheme: Theme;
+
+/**
+ * Detects user's preferred color scheme
+ */
+export declare function detectColorScheme(): 'light' | 'dark';
+
+/**
+ * Gets CSS custom property value from theme
+ */
+export declare function getThemeValue(theme: Theme, path: string): string | undefined;
+
+/**
+ * Merges multiple CSS class strings and removes duplicates while preserving order.
+ * Takes an array of class strings, splits them by spaces, filters out empty values,
+ * and returns a deduplicated string of classes.
+ *
+ * @param {...string[]} classes - Variable number of CSS class strings to merge
+ * @returns {string} A single string containing all unique CSS classes separated by spaces
+ *
+ * @example
+ * mergeClasses('btn primary', 'btn secondary', 'active')
+ * // Returns: 'btn primary secondary active'
+ *
+ * @example
+ * mergeClasses('text-red-500 font-bold', 'text-red-500 underline')
+ * // Returns: 'text-red-500 font-bold underline'
+ */
+export declare function mergeClasses(...classes: string[]): string;
+
+/**
+ * Merges theme overrides with base theme
+ * Performs deep merge to allow partial customization
+ */
+export declare function mergeTheme(baseTheme: Theme, override: ThemeOverride): Theme;
+
+export declare interface Shadows {
+    sm: string;
+    md: string;
+    lg: string;
+}
+
+export declare interface SpacingScale {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+
+/**
+ * Complete theme configuration
+ */
+export declare interface Theme {
+    colors: ColorPalette;
+    spacing: SpacingScale;
+    borderRadius: BorderRadius;
+    typography: Typography;
+    shadows: Shadows;
+}
+
+export declare const ThemeContext: Context<ThemeContextValue | undefined>;
+
+export declare 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;
+}
+
+/**
+ * Theme mode options
+ */
+export declare type ThemeMode = 'light' | 'dark' | 'auto';
+
+/**
+ * Partial theme for customization - allows users to override only specific parts
+ */
+export declare type ThemeOverride = {
+    colors?: Partial<ColorPalette>;
+    spacing?: Partial<SpacingScale>;
+    borderRadius?: Partial<BorderRadius>;
+    typography?: Partial<Typography>;
+    shadows?: Partial<Shadows>;
+};
+
+/**
+ * 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): JSX.Element;
+
+export declare interface ThemeProviderProps {
+    /** Children components */
+    children: default_2.ReactNode;
+    /** Initial theme mode */
+    defaultMode?: ThemeMode;
+    /** Initial theme overrides */
+    theme?: ThemeOverride;
+    /** Custom dark theme (overrides default) */
+    darkTheme?: Theme;
+}
+
+/**
+ * A simple theme toggle button component that demonstrates theme usage
+ * Shows how to use the useTheme hook and access theme values
+ */
+export declare function ThemeToggle({ className }: ThemeToggleProps): JSX.Element;
+
+export declare interface ThemeToggleProps {
+    className?: string;
+}
+
+export declare interface Typography {
+    fontFamily: string;
+    fontSize: {
+        sm: string;
+        base: string;
+        lg: string;
+    };
+}
+
+/**
+ * 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;
+    successColor: string;
+    dangerColor: string;
+    warningColor: string;
+    infoColor: string;
+    lightColor: string;
+    darkColor: string;
+    linkColor: string;
+    spacingXs: string;
+    spacingSm: string;
+    spacingMd: string;
+    spacingLg: string;
+    spacingXl: string;
+    borderRadiusSm: string;
+    borderRadius: string;
+    borderRadiusLg: string;
+    borderRadiusFull: string;
+    fontFamily: string;
+    fontSizeSm: string;
+    fontSizeBase: string;
+    fontSizeLg: string;
+    shadowSm: string;
+    shadowMd: string;
+    shadowLg: string;
+};
+
+export { }

package/dist/klip-components.cjs.js

@@ -1,37 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),n=require("react");function x(r){var o,s,e="";if(typeof r=="string"||typeof r=="number")e+=r;else if(typeof r=="object")if(Array.isArray(r)){var a=r.length;for(o=0;o<a;o++)r[o]&&(s=x(r[o]))&&(e&&(e+=" "),e+=s)}else for(s in r)r[s]&&(e&&(e+=" "),e+=s);return e}function $(){for(var r,o,s=0,e="",a=arguments.length;s<a;s++)(r=arguments[s])&&(o=x(r))&&(e&&(e+=" "),e+=o);return e}function w(...r){const o=r.join(" ").split(" ").filter(Boolean);return[...new Set(o)].join(" ")}function u(...r){const o=$(...r);return w(o)}const B=({variant:r="primary",size:o="md",block:s=!1,className:e="",children:a,...l})=>c.jsx("button",{className:u("btn",`btn-${r}`,o!=="md"&&`btn-${o}`,s&&"btn-block",e),...l,children:a}),f=n.createContext(void 0);function h(){const r=n.useContext(f);if(r===void 0)throw new Error("useTheme must be used within a ThemeProvider");return r}function D(){const{theme:r}=h();return{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})`,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})`,borderRadiusSm:`var(--border-radius-sm, ${r.borderRadius.sm})`,borderRadius:`var(--border-radius, ${r.borderRadius.base})`,borderRadiusLg:`var(--border-radius-lg, ${r.borderRadius.lg})`,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})`,shadowSm:`var(--shadow-sm, ${r.shadows.sm})`,shadowMd:`var(--shadow-md, ${r.shadows.md})`,shadowLg:`var(--shadow-lg, ${r.shadows.lg})`}}function M({className:r}){const{mode:o,setMode:s,isDark:e}=h(),a=()=>{s(o==="auto"?"light":o==="light"?"dark":"auto")},l=()=>{switch(o){case"light":return"☀️ Light";case"dark":return"🌙 Dark";case"auto":return`🔄 Auto (${e?"Dark":"Light"})`;default:return"Theme"}};return c.jsx("button",{onClick:a,className:u("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"?` (${e?"dark":"light"})`:""}`,children:l()})}function E({className:r}){return console.log("React version:",n.version),console.log("React object:",n),c.jsxs("div",{className:r,children:[c.jsxs("p",{children:["React Version: ",n.version]}),c.jsxs("p",{children:["React loaded: ",n?"Yes":"No"]})]})}function L({children:r,onClick:o,className:s}){return c.jsx("button",{onClick:o,className:s,style:{padding:"8px 16px",backgroundColor:"#007bff",color:"white",border:"none",borderRadius:"4px"},children:r})}const m={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)"}},S={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 g(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 A(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 V(r,o){const s=o.split(".");let e=r;for(const a of s){if(typeof e!="object"||e===null||!(a in e))return;e=e[a]}return typeof e=="string"?e:void 0}function F(r){return`--${r.replace(/\./g,"-")}`}function k(){return typeof window>"u"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function O(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 H({children:r,defaultMode:o="auto",theme:s,darkTheme:e=S}){const[a,l]=n.useState(o),[y,b]=n.useState(s||{}),[C,P]=n.useState(()=>k()==="dark"),v=a==="dark"||a==="auto"&&C,p=g(v?e:m,y),T=n.useCallback(t=>{l(t)},[]),z=n.useCallback(t=>{b(i=>g({...m,...i},t))},[]),R=n.useCallback(()=>{b({})},[]);n.useEffect(()=>{if(typeof window>"u")return;const t=window.matchMedia("(prefers-color-scheme: dark)"),i=d=>{P(d.matches)};return t.addEventListener("change",i),()=>t.removeEventListener("change",i)},[]),n.useLayoutEffect(()=>{if(Object.keys(y).length>0){const t=O(p),i=document.getElementById("klip-custom-theme");i&&i.remove();const d=document.createElement("style");d.id="klip-custom-theme",d.textContent=t,document.head.insertBefore(d,document.head.firstChild)}else{const t=document.getElementById("klip-custom-theme");t&&t.remove()}},[p,y]);const j={theme:p,mode:a,setMode:T,updateTheme:z,resetTheme:R,isDark:v};return c.jsx(f.Provider,{value:j,children:r})}exports.Button=B;exports.Debug=E;exports.SimpleButton=L;exports.ThemeContext=f;exports.ThemeProvider=H;exports.ThemeToggle=M;exports.applyThemeToDOM=A;exports.clsx=$;exports.cn=u;exports.createCSSVariable=F;exports.darkTheme=S;exports.defaultTheme=m;exports.detectColorScheme=k;exports.getThemeValue=V;exports.mergeClasses=w;exports.mergeTheme=g;exports.useTheme=h;exports.useThemeVariables=D;
+"use strict";var r=Object.defineProperty,e=Object.defineProperties,o=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,l=Object.prototype.hasOwnProperty,n=Object.prototype.propertyIsEnumerable,a=(e,o,s)=>o in e?r(e,o,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[o]=s,t=(r,e)=>{for(var o in e||(e={}))l.call(e,o)&&a(r,o,e[o]);if(s)for(var o of s(e))n.call(e,o)&&a(r,o,e[o]);return r},i=(r,s)=>e(r,o(s));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),c=require("react");function u(r){var e,o,s="";if("string"==typeof r||"number"==typeof r)s+=r;else if("object"==typeof r)if(Array.isArray(r)){var l=r.length;for(e=0;e<l;e++)r[e]&&(o=u(r[e]))&&(s&&(s+=" "),s+=o)}else for(o in r)r[o]&&(s&&(s+=" "),s+=o);return s}function p(){for(var r,e,o=0,s="",l=arguments.length;o<l;o++)(r=arguments[o])&&(e=u(r))&&(s&&(s+=" "),s+=e);return s}function m(...r){const e=r.join(" ").split(" ").filter(Boolean);return[...new Set(e)].join(" ")}function g(...r){return m(p(...r))}const y=c.createContext(void 0);function f(){const r=c.useContext(y);if(void 0===r)throw new Error("useTheme must be used within a ThemeProvider");return r}const h={colors:{primary:{main:"#2d99ff",hover:"#2682d9"},secondary:{main:"#f5f7fa",hover:"#e3e5e8"},semantic:{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:"12px",lg:"20px",full:"50%"},typography:{fontFamily:"Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI',\n    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)"}},v={colors:{primary:{main:"#2d99ff",hover:"#2682d9"},secondary:{main:"#f5f7fa",hover:"#e3e5e8"},semantic:{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:"12px",lg:"20px",full:"50%"},typography:{fontFamily:"Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI',\n    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)"}};function b(r,e){var o,s,l,n;return{colors:{primary:t(t({},r.colors.primary),null==(o=e.colors)?void 0:o.primary),secondary:t(t({},r.colors.secondary),null==(s=e.colors)?void 0:s.secondary),semantic:t(t({},r.colors.semantic),null==(l=e.colors)?void 0:l.semantic)},spacing:t(t({},r.spacing),e.spacing),borderRadius:t(t({},r.borderRadius),e.borderRadius),typography:i(t(t({},r.typography),e.typography),{fontSize:t(t({},r.typography.fontSize),null==(n=e.typography)?void 0:n.fontSize)}),shadows:t(t({},r.shadows),e.shadows)}}function x(){return"undefined"==typeof window?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}exports.Button=r=>{var e=r,{variant:o="primary",className:a="",children:c}=e,u=((r,e)=>{var o={};for(var a in r)l.call(r,a)&&e.indexOf(a)<0&&(o[a]=r[a]);if(null!=r&&s)for(var a of s(r))e.indexOf(a)<0&&n.call(r,a)&&(o[a]=r[a]);return o})(e,["variant","className","children"]);return d.jsx("button",i(t({className:g("rounded btn",`btn-${o}`,a)},u),{children:c}))},exports.ThemeContext=y,exports.ThemeProvider=function({children:r,defaultMode:e="auto",theme:o,darkTheme:s=v}){const[l,n]=c.useState(e),[a,i]=c.useState(o||{}),[u,p]=c.useState(()=>"dark"===x()),m="dark"===l||"auto"===l&&u,g=b(m?s:h,a),f=c.useCallback(r=>{n(r)},[]),$=c.useCallback(r=>{i(e=>b(t(t({},h),e),r))},[]),w=c.useCallback(()=>{i({})},[]);c.useEffect(()=>{if("undefined"==typeof window)return;const r=window.matchMedia("(prefers-color-scheme: dark)"),e=r=>{p(r.matches)};return r.addEventListener("change",e),()=>r.removeEventListener("change",e)},[]),c.useLayoutEffect(()=>{const r=function(r,e=":root"){var o,s,l,n,a,t,i,d,c,u,p,m,g,y,f,h,v,b,x,$,w,S,k,P,C,z,R,j,T,E,O,M,F,L,I,A,N,B,D,U,H,V,q,X,G,J,K,Q,W,Y,Z,_,rr,er,or,sr,lr,nr,ar,tr,ir,dr,cr,ur,pr,mr,gr,yr;return`${e}{${[`--color-primary:${null!=(l=null==(s=null==(o=r.colors)?void 0:o.primary)?void 0:s.main)?l:""}`,`--hover-primary:${null!=(t=null==(a=null==(n=r.colors)?void 0:n.primary)?void 0:a.hover)?t:""}`,`--color-secondary:${null!=(c=null==(d=null==(i=r.colors)?void 0:i.secondary)?void 0:d.main)?c:""}`,`--hover-secondary:${null!=(m=null==(p=null==(u=r.colors)?void 0:u.secondary)?void 0:p.hover)?m:""}`,`--color-success:${null!=(f=null==(y=null==(g=r.colors)?void 0:g.semantic)?void 0:y.success)?f:""}`,`--color-danger:${null!=(b=null==(v=null==(h=r.colors)?void 0:h.semantic)?void 0:v.danger)?b:""}`,`--color-warning:${null!=(w=null==($=null==(x=r.colors)?void 0:x.semantic)?void 0:$.warning)?w:""}`,`--color-info:${null!=(P=null==(k=null==(S=r.colors)?void 0:S.semantic)?void 0:k.info)?P:""}`,`--color-light:${null!=(R=null==(z=null==(C=r.colors)?void 0:C.semantic)?void 0:z.light)?R:""}`,`--color-dark:${null!=(E=null==(T=null==(j=r.colors)?void 0:j.semantic)?void 0:T.dark)?E:""}`,`--color-link:${null!=(F=null==(M=null==(O=r.colors)?void 0:O.semantic)?void 0:M.link)?F:""}`,`--rounded:${null!=(I=null==(L=r.borderRadius)?void 0:L.base)?I:""}`,`--rounded-sm:${null!=(N=null==(A=r.borderRadius)?void 0:A.sm)?N:""}`,`--rounded-lg:${null!=(D=null==(B=r.borderRadius)?void 0:B.lg)?D:""}`,`--rounded-full:${null!=(H=null==(U=r.borderRadius)?void 0:U.full)?H:""}`,`--font-family:${null!=(q=null==(V=r.typography)?void 0:V.fontFamily)?q:""}`,`--font-sm:${null!=(J=null==(G=null==(X=r.typography)?void 0:X.fontSize)?void 0:G.sm)?J:""}`,`--font-base:${null!=(W=null==(Q=null==(K=r.typography)?void 0:K.fontSize)?void 0:Q.base)?W:""}`,`--font-lg:${null!=(_=null==(Z=null==(Y=r.typography)?void 0:Y.fontSize)?void 0:Z.lg)?_:""}`,`--spacing-xs:${null!=(er=null==(rr=r.spacing)?void 0:rr.xs)?er:""}`,`--spacing-sm:${null!=(sr=null==(or=r.spacing)?void 0:or.sm)?sr:""}`,`--spacing-md:${null!=(nr=null==(lr=r.spacing)?void 0:lr.md)?nr:""}`,`--spacing-lg:${null!=(tr=null==(ar=r.spacing)?void 0:ar.lg)?tr:""}`,`--spacing-xl:${null!=(dr=null==(ir=r.spacing)?void 0:ir.xl)?dr:""}`,`--shadow-sm:${null!=(ur=null==(cr=r.shadows)?void 0:cr.sm)?ur:""}`,`--shadow-md:${null!=(mr=null==(pr=r.shadows)?void 0:pr.md)?mr:""}`,`--shadow-lg:${null!=(yr=null==(gr=r.shadows)?void 0:gr.lg)?yr:""}`].join(";")}}`}(g),e=document.getElementById("klip-custom-theme");e&&e.remove();const o=document.createElement("style");o.id="klip-custom-theme",o.textContent=r,document.head.appendChild(o)},[g]);const S={theme:g,mode:l,setMode:f,updateTheme:$,resetTheme:w,isDark:m};return d.jsx(y.Provider,{value:S,children:r})},exports.ThemeToggle=function({className:r}){const{mode:e,setMode:o,isDark:s}=f();return d.jsx("button",{onClick:()=>{o("auto"===e?"light":"light"===e?"dark":"auto")},className:g("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: ${e}${"auto"===e?` (${s?"dark":"light"})`:""}`,children:(()=>{switch(e){case"light":return"☀️ Light";case"dark":return"🌙 Dark";case"auto":return`🔄 Auto (${s?"Dark":"Light"})`;default:return"Theme"}})()})},exports.applyThemeToDOM=function(r,e=document.documentElement){e.style.setProperty("--primary-color",r.colors.primary.main),e.style.setProperty("--primary-hover",r.colors.primary.hover),e.style.setProperty("--secondary-color",r.colors.secondary.main),e.style.setProperty("--secondary-hover",r.colors.secondary.hover),e.style.setProperty("--success-color",r.colors.semantic.success),e.style.setProperty("--danger-color",r.colors.semantic.danger),e.style.setProperty("--warning-color",r.colors.semantic.warning),e.style.setProperty("--info-color",r.colors.semantic.info),e.style.setProperty("--spacing-xs",r.spacing.xs),e.style.setProperty("--spacing-sm",r.spacing.sm),e.style.setProperty("--spacing-md",r.spacing.md),e.style.setProperty("--spacing-lg",r.spacing.lg),e.style.setProperty("--spacing-xl",r.spacing.xl),e.style.setProperty("--border-radius-sm",r.borderRadius.sm),e.style.setProperty("--border-radius",r.borderRadius.base),e.style.setProperty("--border-radius-lg",r.borderRadius.lg),e.style.setProperty("--font-family",r.typography.fontFamily),e.style.setProperty("--font-size-sm",r.typography.fontSize.sm),e.style.setProperty("--font-size-base",r.typography.fontSize.base),e.style.setProperty("--font-size-lg",r.typography.fontSize.lg),e.style.setProperty("--shadow-sm",r.shadows.sm),e.style.setProperty("--shadow-md",r.shadows.md),e.style.setProperty("--shadow-lg",r.shadows.lg)},exports.clsx=p,exports.cn=g,exports.createCSSVariable=function(r){return`--${r.replace(/\./g,"-")}`},exports.darkTheme=v,exports.defaultTheme=h,exports.detectColorScheme=x,exports.getThemeValue=function(r,e){const o=e.split(".");let s=r;for(const l of o){if("object"!=typeof s||null===s||!(l in s))return;s=s[l]}return"string"==typeof s?s:void 0},exports.mergeClasses=m,exports.mergeTheme=b,exports.useTheme=f,exports.useThemeVariables=function(){const{theme:r}=f();return{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})`,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})`,lightColor:`var(--light-color, ${r.colors.semantic.light})`,darkColor:`var(--dark-color, ${r.colors.semantic.dark})`,linkColor:`var(--link-color, ${r.colors.semantic.link})`,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})`,borderRadiusSm:`var(--border-radius-sm, ${r.borderRadius.sm})`,borderRadius:`var(--border-radius, ${r.borderRadius.base})`,borderRadiusLg:`var(--border-radius-lg, ${r.borderRadius.lg})`,borderRadiusFull:`var(--border-radius-full, ${r.borderRadius.full})`,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})`,shadowSm:`var(--shadow-sm, ${r.shadows.sm})`,shadowMd:`var(--shadow-md, ${r.shadows.md})`,shadowLg:`var(--shadow-lg, ${r.shadows.lg})`}};