klip-components 0.2.1 → 0.6.1

package/dist/index.d.ts

@@ -1,7 +1,236 @@
-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 { default as default_2 } from 'react';
+
+/**
+ * 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;
+    /** 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.
+ */
+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;
+
+export declare type HtmlInput = Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'suffix' | 'type' | 'onChange'>;
+
+/**
+ * A utility type to extract valid HTML attributes for an input element,
+ * while omitting props that are explicitly handled by the Toggle component.
+ */
+declare type HtmlToggle = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'onChange'>;
+
+/**
+ * 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;
+}
+
+export declare type InputVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';
+
+/**
+ * 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;
+
+/**
+ * A customizable toggle component.
+ *
+ * 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`.
+ *
+ * @param {ToggleProps} props The props for the component.
+ * @returns {React.ReactElement} The rendered switch component.
+ *
+ * @example
+ * // Example of a parent component managing the switch's state.
+ * import { useState } from 'react';
+ *
+ * const MyComponent = () => {
+ *   const [isEnabled, setIsEnabled] = useState(false);
+ *
+ *   return (
+ *     <Switch
+ *       checked={isEnabled}
+ *       onChange={setIsEnabled}
+ *       label="Enable Feature"
+ *       labelPosition="right"
+ *       aria-label="Feature Toggle"
+ *     />
+ *   );
+ * };
+ */
+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,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 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;