klip-components 0.3.0 → 0.6.2

package/README.md

@@ -9,13 +9,11 @@ A modern, flexible, and reusable React component library built with TypeScript a
 ## ✨ Features
 
 - 🎨 **Modern Design**: Clean and professional UI components
-- 🌈 **Theme System**: Client-side theme generation with custom colors and dark/light mode
 - 🔧 **TypeScript**: Full TypeScript support with comprehensive type definitions
 - 📱 **Responsive**: Mobile-first design approach
 - ♿ **Accessible**: Built with accessibility best practices in mind
-- 🎯 **Flexible**: Highly customizable with variants, sizes, and theme overrides
+- 🎯 **Flexible**: Highly customizable with variants and properties
 - 📦 **Tree Shakable**: Import only what you need
-- ⚡ **Zero Setup**: No server configuration required - works with static builds
 - 📚 **Well Documented**: Complete Storybook documentation
 
 ## 📦 Installation
@@ -30,99 +28,73 @@ bun add klip-components
 
 ## 🔧 Quick Start
 
+Here's how to import and use some of the components from `klip-components`.
+
+### Button
+
 ```tsx
-import { ThemeProvider, Button } from 'klip-components';
+import { Button } from 'klip-components';
 
 function App() {
   return (
-    <ThemeProvider
-      theme={{
-        colors: {
-          primary: { main: '#ff6b6b', hover: '#ff5252' },
-        },
-      }}
-    >
-      <Button variant="primary">Custom Themed Button</Button>
-    </ThemeProvider>
+    <Button variant="primary" onClick={() => alert('Button clicked!')}>
+      Click Me
+    </Button>
   );
 }
 ```
 
-### Theme Provider Setup
-
-For custom themes and dark/light mode support, wrap your app with the `ThemeProvider`:
+### Input
 
 ```tsx
-import { ThemeProvider, Button, ThemeToggle } from 'klip-components';
-
-// Custom brand colors
-const customTheme = {
-  colors: {
-    primary: {
-      main: '#8b5cf6', // Purple
-      hover: '#7c3aed',
-    },
-    secondary: {
-      main: '#10b981', // Emerald
-      hover: '#059669',
-    },
-  },
-};
+import { Input } from 'klip-components';
+import { useState } from 'react';
 
 function App() {
+  const [value, setValue] = useState('');
+
   return (
-    <ThemeProvider defaultMode="auto" theme={customTheme}>
-      <div>
-        <ThemeToggle />
-        <Button variant="primary" size="lg">
-          Themed Button
-        </Button>
-        <Button variant="secondary" size="sm">
-          Secondary Button
-        </Button>
-      </div>
-    </ThemeProvider>
+    <Input
+      label="Username"
+      placeholder="Enter your username"
+      value={value}
+      onChange={setValue}
+      helperText="This is a hint for the user."
+    />
   );
 }
 ```
 
-### Using Theme Hooks
-
-Access theme values and controls in your components:
+### Toggle Switch
 
 ```tsx
-import { useTheme } from 'klip-components';
-
-function ThemedComponent() {
-  const { theme, isDark, setMode, updateTheme } = useTheme();
+import { Toggle } from 'klip-components';
+import { useState } from 'react';
 
-  const handleCustomize = () => {
-    updateTheme({
-      colors: {
-        primary: { main: '#ff6b6b', hover: '#ff5252' },
-      },
-    });
-  };
+function App() {
+  const [isEnabled, setIsEnabled] = useState(false);
 
-  return (
-    <div>
-      <h2>Current Mode: {isDark ? 'Dark' : 'Light'}</h2>
-      <button onClick={() => setMode(isDark ? 'light' : 'dark')}>Toggle Theme</button>
-      <button onClick={handleCustomize}>Customize Colors</button>
-    </div>
-  );
+  return <Toggle label="Enable Feature" checked={isEnabled} onChange={setIsEnabled} />;
 }
 ```
 
-## 🎨 Theme System
+### Button Select
 
-The theme system is **zero-configuration** and works perfectly with static builds:
+```tsx
+import { ButtonSelect } from 'klip-components';
+import { useState } from 'react';
 
-- ✅ **No server setup required** - pure client-side CSS generation
-- ✅ **Zero FOUC** - themes load before React renders
-- ✅ **Static build friendly** - works with any hosting platform
-- ✅ **Dynamic theming** - change colors at runtime
-- ✅ **Dark/light mode** - automatic system detection with manual override
+function App() {
+  const [selectedValue, setSelectedValue] = useState('option1');
+  const options = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ];
+
+  return <ButtonSelect options={options} value={selectedValue} onChange={setSelectedValue} />;
+}
+```
 
 ## 📖 Documentation
 
@@ -216,7 +188,7 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 - Built with [React](https://reactjs.org/)
 - Bundled with [Vite](https://vitejs.dev/)
 - Documented with [Storybook](https://storybook.js.org/)
-- Styled with CSS Variables
+- Styled with plain CSS and CSS Variables
 
 ---
 

package/dist/index.d.ts

@@ -1,20 +1,6 @@
 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.
@@ -64,10 +50,35 @@ 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;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Icon to display at the start of the button */
+    startIcon?: default_2.ReactNode;
+    /** Icon to display at the end of the button */
+    endIcon?: default_2.ReactNode;
     /** Content to be rendered inside the button */
     children: default_2.ReactNode;
 }
 
+export declare const ButtonSelect: default_2.FC<ButtonSelectProps>;
+
+export declare interface ButtonSelectOption {
+    value: string;
+    child: default_2.ReactNode;
+}
+
+export declare interface ButtonSelectProps {
+    options: ButtonSelectOption[];
+    value: ButtonSelectValue;
+    onChange: (value: ButtonSelectValue) => void;
+    disabled?: boolean;
+    multiple?: boolean;
+}
+
+export declare type ButtonSelectValue = string | string[];
+
+declare type ButtonSize = 'sm' | 'md' | 'lg';
+
 /**
  * Props interface for the Button component.
  * Extends standard HTML button attributes with additional styling options.
@@ -96,58 +107,68 @@ export { clsx }
  */
 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;
+export declare type HtmlInput = Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'suffix' | 'type' | 'onChange'>;
 
 /**
- * Example dark theme
+ * A utility type to extract valid HTML attributes for an input element,
+ * while omitting props that are explicitly handled by the Toggle component.
  */
-export declare const darkTheme: Theme;
+declare type HtmlToggle = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'onChange'>;
 
 /**
- * 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';
+ * A versatile input component with support for variants, labels, prefixes, suffixes, and helper text.
+ *
+ * It's a controlled component that wraps a standard HTML input and extends its functionality.
+ * It forwards most standard input props like `placeholder`, `disabled`, and `value`. The `onChange`
+ * callback receives the input value directly as a string, making it easier to work with.
+ *
+ * @param {InputProps} props The props for the component.
+ * @returns {React.ReactElement} The rendered input component.
+ *
+ * @example
+ * // Example of a parent component managing the input's state.
+ * import { useState } from 'react';
+ * // Assuming you have an icon component or SVG, for example from heroicons
+ * // import { UserIcon } from '@heroicons/react/24/solid';
+ *
+ * const MyForm = () => {
+ *   const [username, setUsername] = useState('');
+ *
+ *   return (
+ *     <Input
+ *       variant="primary"
+ *       type="text"
+ *       label="Username"
+ *       placeholder="Enter your username"
+ *       value={username}
+ *       onChange={setUsername}
+ *       prefix={<span>@</span>}
+ *       helperText="Your public display name."
+ *       aria-label="Username"
+ *     />
+ *   );
+ * };
+ */
+export declare const Input: default_2.FC<InputProps>;
+
+export declare interface InputProps extends HtmlInput {
+    /** Callback function invoked when the input value changes */
+    onChange?: (value: string) => void;
+    /** Visual style variant of the input */
+    variant?: InputVariant;
+    /** Type of the input field */
+    type?: default_2.HTMLInputTypeAttribute;
+    /** Label text to be displayed above the input */
+    label?: string;
+    /** Content to be rendered before the input (can be text, icon, or any React node) */
+    prefix?: default_2.ReactNode;
+    /** Content to be rendered after the input (can be text, icon, or any React node) */
+    suffix?: default_2.ReactNode;
+    /** Helper text to be displayed below the input */
+    helperText?: string;
+}
 
-/**
- * Gets CSS custom property value from theme
- */
-export declare function getThemeValue(theme: Theme, path: string): string | undefined;
+export declare type InputVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';
 
 /**
  * Merges multiple CSS class strings and removes duplicates while preserving order.
@@ -168,192 +189,48 @@ export declare function getThemeValue(theme: Theme, path: string): string | unde
 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
+ * A customizable toggle component.
  *
- * @example
- * ```tsx
- * import { ThemeProvider } from 'klip-components';
+ * It functions as a controlled component, with its state managed by the `checked`
+ * and `onChange` props. It supports labels, custom sizes, colors, and all
+ * standard input attributes like `disabled` or `aria-label`.
  *
- * 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
+ * @param {ToggleProps} props The props for the component.
+ * @returns {React.ReactElement} The rendered switch component.
  *
  * @example
- * ```tsx
- * function MyComponent() {
- *   const { theme, isDark, setMode } = useTheme();
+ * // Example of a parent component managing the switch's state.
+ * import { useState } from 'react';
  *
- *   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();
+ * const MyComponent = () => {
+ *   const [isEnabled, setIsEnabled] = useState(false);
  *
  *   return (
- *     <div style={{
- *       backgroundColor: cssVars.primaryColor,
- *       padding: cssVars.spacingMd,
- *     }}>
- *       Content
- *     </div>
+ *     <Switch
+ *       checked={isEnabled}
+ *       onChange={setIsEnabled}
+ *       label="Enable Feature"
+ *       labelPosition="right"
+ *       aria-label="Feature Toggle"
+ *     />
  *   );
- * }
- * ```
- */
-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 declare const Toggle: React.FC<ToggleProps>;
+
+export declare interface ToggleProps extends HtmlToggle {
+    /** Color of the toggle when in the "on" state. */
+    color?: string;
+    /** The total width of the toggle. Can be any valid CSS unit (e.g., '4rem', '60px'). */
+    size?: string;
+    /** Determines if the toggle is in the "on" (true) or "off" (false) state. */
+    checked?: boolean;
+    /** Callback function that is invoked when the toggle's state changes. */
+    onChange?: (checked: boolean) => void;
+    /** Optional text label to display next to the toggle. */
+    label?: string;
+    /** Position of the label relative to the toggle. Defaults to 'right'. */
+    labelPosition?: 'left' | 'right' | 'top' | 'bottom';
+}
 
 export { }

package/dist/klip-components.cjs.js

@@ -1 +1 @@
-"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})`}};
+"use strict";var e=Object.defineProperty,r=Object.defineProperties,t=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,l=(r,t,n)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[t]=n,i=(e,r)=>{for(var t in r||(r={}))s.call(r,t)&&l(e,t,r[t]);if(n)for(var t of n(r))a.call(r,t)&&l(e,t,r[t]);return e},c=(e,r)=>{var t={};for(var l in e)s.call(e,l)&&r.indexOf(l)<0&&(t[l]=e[l]);if(null!=e&&n)for(var l of n(e))r.indexOf(l)<0&&a.call(e,l)&&(t[l]=e[l]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),p=require("react");function u(e){var r,t,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(r=0;r<s;r++)e[r]&&(t=u(e[r]))&&(n&&(n+=" "),n+=t)}else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function d(){for(var e,r,t=0,n="",s=arguments.length;t<s;t++)(e=arguments[t])&&(r=u(e))&&(n&&(n+=" "),n+=r);return n}function f(...e){const r=e.join(" ").split(" ").filter(Boolean);return[...new Set(r)].join(" ")}function h(...e){return f(d(...e))}exports.Button=e=>{var n,s=e,{variant:a="primary",size:l="md",startIcon:p,endIcon:u,className:d="",children:f}=s,x=c(s,["variant","size","startIcon","endIcon","className","children"]);return o.jsxs("button",(n=i({className:h("rounded btn",`btn-${a}`,`btn-${l}`,d)},x),r(n,t({children:[p&&o.jsx("span",{className:"btn-icon-start",children:p}),f,u&&o.jsx("span",{className:"btn-icon-end",children:u})]}))))},exports.ButtonSelect=({options:e,value:r,onChange:t,disabled:n=!1,multiple:s=!1})=>{const a=e=>Array.isArray(r)?r.includes(e):e===r;return o.jsx("div",{className:"button-select "+(n?"disabled":""),children:e.map(({value:e,child:l})=>o.jsx("button",{className:"button-select-option "+(a(e)?"selected":""),onClick:()=>(e=>{if(n)return;if(!s)return void t(e);const a=Array.isArray(r)?r:[],l=a.includes(e)?a.filter(r=>r!==e):[...a,e];t(l)})(e),disabled:n,type:"button",children:l},e))})},exports.Input=e=>{var r=e,{variant:t="primary",type:n="text",label:s,prefix:a,suffix:l,helperText:u,className:d,onChange:f,id:x}=r,b=c(r,["variant","type","label","prefix","suffix","helperText","className","onChange","id"]);const m=p.useId(),j=x||`input-${m}`,v=h("form-field",{prefix:!!a,suffix:!!l},{[`variant-${t}`]:t},d);return o.jsxs("article",{className:"input-container",children:[s&&o.jsx("label",{htmlFor:j,className:"input-label",children:s}),o.jsxs("section",{className:"input-wrapper",children:[a&&o.jsx("article",{className:"input-addon input-prefix",children:a}),o.jsx("input",i({id:j,type:n,className:v,onChange:e=>null==f?void 0:f(e.target.value)},b)),l&&o.jsx("article",{className:"input-addon input-suffix",children:l})]}),u&&o.jsx("small",{className:"input-helper-text",children:u})]})},exports.Toggle=e=>{var r=e,{color:t="var(--color-primary)",size:n="3.75rem",checked:s=!1,onChange:a,label:l,labelPosition:p="right",className:u}=r,d=c(r,["color","size","checked","onChange","label","labelPosition","className"]);return o.jsxs("label",{className:h("switch-container",p,u),children:[o.jsxs("div",{className:"toggle-switch",style:{"--switch-size":n,"--switch-color":t},children:[o.jsx("input",i({type:"checkbox",role:"switch",checked:s,onChange:e=>null==a?void 0:a(e.target.checked)},d)),o.jsx("span",{className:"slider"})]}),l&&o.jsx("span",{className:"switch-label",children:l})]})},exports.clsx=d,exports.cn=h,exports.mergeClasses=f;