klip-components 0.6.2 → 0.7.0

package/dist/klip-components.es.js

@@ -83,8 +83,11 @@ const Input = (_c) => {
     suffix,
     helperText,
     className,
+    labelClass,
+    helperTextClass,
     onChange,
-    id
+    id,
+    hasError
   } = _d, props = __objRest(_d, [
     "variant",
     "type",
@@ -93,26 +96,38 @@ const Input = (_c) => {
     "suffix",
     "helperText",
     "className",
+    "labelClass",
+    "helperTextClass",
     "onChange",
-    "id"
+    "id",
+    "hasError"
   ]);
   const generatedId = React.useId();
   const inputId = id || `input-${generatedId}`;
   const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
+  const hasPrefix = !!prefix;
+  const hasSuffix = !!suffix;
   const combinedClass = cn(
     "form-field",
-    { prefix: !!prefix, suffix: !!suffix },
+    { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
     { [`variant-${variant}`]: variant },
     className
   );
   return /* @__PURE__ */ jsxs("article", { className: "input-container", children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "input-label", children: label }),
+    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: cn("input-label", labelClass), children: label }),
     /* @__PURE__ */ jsxs("section", { className: "input-wrapper", children: [
-      prefix && /* @__PURE__ */ jsx("article", { className: "input-addon input-prefix", children: prefix }),
+      prefix && /* @__PURE__ */ jsx("article", { className: "input-prefix", children: prefix }),
       /* @__PURE__ */ jsx("input", __spreadValues({ id: inputId, type, className: combinedClass, onChange: handleChange }, props)),
-      suffix && /* @__PURE__ */ jsx("article", { className: "input-addon input-suffix", children: suffix })
+      suffix && /* @__PURE__ */ jsx("article", { className: "input-suffix", children: suffix })
     ] }),
-    helperText && /* @__PURE__ */ jsx("small", { className: "input-helper-text", children: helperText })
+    helperText && /* @__PURE__ */ jsx(
+      "small",
+      {
+        className: cn("input-helper-text", helperTextClass),
+        style: { color: hasError ? "var(--color-danger)" : "inherit" },
+        children: helperText
+      }
+    )
   ] });
 };
 const Toggle = (_e) => {

package/dist/klip-components.umd.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "klip-components",
   "private": false,
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "A collection of reusable React components for Klip.",
   "type": "module",
   "main": "dist/klip-components.cjs.js",
@@ -54,9 +54,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
-    "@storybook/addon-docs": "^9.0.16",
-    "@storybook/addon-onboarding": "^9.0.16",
-    "@storybook/react-vite": "^9.0.16",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-onboarding": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@types/node": "^24.0.13",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
@@ -67,11 +67,11 @@
     "eslint": "^9.30.1",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.0.16",
+    "eslint-plugin-storybook": "^9.1.2",
     "globals": "^16.3.0",
     "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "storybook": "^9.0.16",
+    "storybook": "^9.1.2",
     "terser": "^5.43.1",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",