klip-components 0.6.2 → 0.7.0

package/dist/index.d.ts

@@ -116,7 +116,7 @@ export declare type HtmlInput = Omit<default_2.InputHTMLAttributes<HTMLInputElem
 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.
+ * A versatile input component with support for variants, labels, prefixes, and suffixes.
  *
  * 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`
@@ -126,25 +126,40 @@ declare type HtmlToggle = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'typ
  * @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 = () => {
+ * // Example with simple text prefix/suffix
+ * const BasicExample = () => {
  *   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"
+ *       prefix="@"
+ *       suffix=".com"
+ *     />
+ *   );
+ * };
+ *
+ * @example
+ * // Example with interactive elements (like password toggle)
+ * const PasswordExample = () => {
+ *   const [password, setPassword] = useState('');
+ *   const [showPassword, setShowPassword] = useState(false);
+ *
+ *   return (
+ *     <Input
+ *       type={showPassword ? 'text' : 'password'}
+ *       label="Password"
+ *       placeholder="Enter your password"
+ *       value={password}
+ *       onChange={setPassword}
+ *       prefix={<LockIcon />}
+ *       suffix={
+ *         <button onClick={() => setShowPassword(!showPassword)}>
+ *           {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+ *         </button>
+ *       }
  *     />
  *   );
  * };
@@ -160,12 +175,18 @@ export declare interface InputProps extends HtmlInput {
     type?: default_2.HTMLInputTypeAttribute;
     /** Label text to be displayed above the input */
     label?: string;
+    /** Additional class names for the label */
+    labelClass?: default_2.HTMLAttributes<HTMLLabelElement>['className'];
     /** 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) */
+    /** Content to be rendered after the input (icons, text, buttons, etc.) */
     suffix?: default_2.ReactNode;
     /** Helper text to be displayed below the input */
     helperText?: string;
+    /** Additional class names for the helper text */
+    helperTextClass?: default_2.HTMLAttributes<HTMLInputElement>['className'];
+    /** Whether the input has an error */
+    hasError?: boolean;
 }
 
 export declare type InputVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';

package/dist/klip-components.cjs.js

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