klip-components 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 deleonagencyorg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,223 @@
+# 🚀 Klip Components
+
+A modern, flexible, and reusable React component library built with TypeScript and Vite.
+
+[![npm version](https://badge.fury.io/js/klip-components.svg)](https://badge.fury.io/js/klip-components)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+
+## ✨ 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
+- 📦 **Tree Shakable**: Import only what you need
+- ⚡ **Zero Setup**: No server configuration required - works with static builds
+- 📚 **Well Documented**: Complete Storybook documentation
+
+## 📦 Installation
+
+```bash
+npm install klip-components
+# or
+yarn add klip-components
+# or
+bun add klip-components
+```
+
+## 🔧 Quick Start
+
+```tsx
+import { ThemeProvider, Button } from 'klip-components';
+
+function App() {
+  return (
+    <ThemeProvider
+      theme={{
+        colors: {
+          primary: { main: '#ff6b6b', hover: '#ff5252' },
+        },
+      }}
+    >
+      <Button variant="primary">Custom Themed Button</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+### Theme Provider Setup
+
+For custom themes and dark/light mode support, wrap your app with the `ThemeProvider`:
+
+```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',
+    },
+  },
+};
+
+function App() {
+  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>
+  );
+}
+```
+
+### Using Theme Hooks
+
+Access theme values and controls in your components:
+
+```tsx
+import { useTheme } from 'klip-components';
+
+function ThemedComponent() {
+  const { theme, isDark, setMode, updateTheme } = useTheme();
+
+  const handleCustomize = () => {
+    updateTheme({
+      colors: {
+        primary: { main: '#ff6b6b', hover: '#ff5252' },
+      },
+    });
+  };
+
+  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>
+  );
+}
+```
+
+## 🎨 Theme System
+
+The theme system is **zero-configuration** and works perfectly with static builds:
+
+- ✅ **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
+
+## 📖 Documentation
+
+Explore all components and their variants in our Storybook documentation:
+
+```bash
+# Clone the repository
+git clone https://github.com/deleonagencyorg/klip_components
+cd klip-components
+
+# Install dependencies
+bun install
+
+# Start Storybook
+bun run storybook
+```
+
+Visit `http://localhost:6006` to see the interactive component documentation.
+
+## 🛠️ Development
+
+### Prerequisites
+
+- Node.js 22+ or Bun
+- React 18+
+
+### Setup
+
+```bash
+# Clone the repository
+git clone <repository-url>
+cd klip-components
+
+# Install dependencies
+bun install
+
+# Start development server
+bun run dev
+
+# Start Storybook
+bun run storybook
+
+# Build the library
+bun run build
+
+# Run linting
+bun run lint
+```
+
+### Scripts
+
+| Script            | Description                        |
+| ----------------- | ---------------------------------- |
+| `dev`             | Start development server           |
+| `build`           | Build the library for production   |
+| `storybook`       | Start Storybook development server |
+| `build-storybook` | Build Storybook for production     |
+| `lint`            | Run ESLint                         |
+| `preview`         | Preview production build           |
+
+## 🤝 Contributing
+
+We welcome contributions! Please follow these steps:
+
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+### Development Guidelines
+
+- Write TypeScript for all components
+- Include proper JSDoc documentation
+- Add Storybook stories for new components
+- Follow the existing code style
+- Test your changes thoroughly
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🔗 Links
+
+- [npm Package](#)
+- [Storybook Documentation](#) <!-- Add your Storybook URL -->
+- [GitHub Issues](#)
+
+## 🙏 Acknowledgments
+
+- Built with [React](https://reactjs.org/)
+- Bundled with [Vite](https://vitejs.dev/)
+- Documented with [Storybook](https://storybook.js.org/)
+- Styled with CSS Variables
+
+---
+
+_Made with ❤️ by the Klip team_

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,60 @@
+import { default as React } from 'react';
+/**
+ * Props interface for the Button component.
+ * Extends standard HTML button attributes with additional styling options.
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant of the button */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    /** Size of the button */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether the button should take full width of its container */
+    block?: boolean;
+    /** Content to be rendered inside the button */
+    children: React.ReactNode;
+}
+/**
+ * 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: React.FC<ButtonProps>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzD,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgBxC,CAAC"}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/dist/components/Debug/Debug.d.ts

@@ -0,0 +1,8 @@
+export interface DebugProps {
+    className?: string;
+}
+/**
+ * Debug component to help identify React version issues
+ */
+export declare function Debug({ className }: DebugProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Debug.d.ts.map

package/dist/components/Debug/Debug.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Debug.d.ts","sourceRoot":"","sources":["../../../src/components/Debug/Debug.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAE,SAAS,EAAE,EAAE,UAAU,2CAU9C"}

package/dist/components/Debug/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Debug';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Debug/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Debug/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/SimpleButton/SimpleButton.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+export interface SimpleButtonProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * Simple button component without hooks for testing
+ */
+export declare function SimpleButton({ children, onClick, className }: SimpleButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SimpleButton.d.ts.map

package/dist/components/SimpleButton/SimpleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleButton.d.ts","sourceRoot":"","sources":["../../../src/components/SimpleButton/SimpleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAgB/E"}

package/dist/components/SimpleButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SimpleButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SimpleButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SimpleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/components/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,9 @@
+export interface ThemeToggleProps {
+    className?: string;
+}
+/**
+ * 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): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/components/ThemeToggle/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/ThemeToggle.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAwC1D"}

package/dist/components/ThemeToggle/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeToggle } from './ThemeToggle';
+export type { ThemeToggleProps } from './ThemeToggle';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ThemeToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+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

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,wBAAwB,CAAC;AAGhC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAG1C,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/dist/klip-components.cjs.js

@@ -0,0 +1,37 @@
+"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;

package/dist/klip-components.css

@@ -0,0 +1 @@
+:root{--primary-color:#05445e;--primary-hover:#033e52;--secondary-color:#189ab4;--secondary-hover:#0f7a9c;--tertiary-color:#75e6da;--tertiary-hover:#5cc6c0;--success-color:#18a558;--danger-color:#db1f48;--warning-color:#e9b210;--info-color:#e0e9e0;--border-radius:8px;--border-radius-sm:4px;--border-radius-lg:12px;--font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1)}.btn{align-items:center;border:1px solid transparent;border-radius:var(--border-radius);cursor:pointer;display:inline-flex;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:500;justify-content:center;line-height:1.5;padding:var(--spacing-sm) var(--spacing-md);text-decoration:none;transition:all .15s ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.btn:disabled{cursor:not-allowed;opacity:.6;pointer-events:none}.btn:focus{outline:2px solid var(--primary-color);outline-offset:2px}.btn-primary{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover);border-color:var(--primary-hover)}.btn-secondary{background-color:transparent;border-color:var(--primary-color);color:var(--primary-color)}.btn-secondary:hover:not(:disabled){background-color:var(--primary-color);color:#fff}.btn-success{background-color:var(--success-color);border-color:var(--success-color);color:#fff}.btn-danger{background-color:var(--danger-color);border-color:var(--danger-color);color:#fff}.btn-sm{border-radius:var(--border-radius-sm);font-size:var(--font-size-sm);padding:var(--spacing-xs) var(--spacing-sm)}.btn-lg{border-radius:var(--border-radius-lg);font-size:var(--font-size-lg);padding:var(--spacing-md) var(--spacing-lg)}.btn-block{display:flex;width:100%}