@k8slens/lds-form 0.1.0

package/README.md

@@ -0,0 +1,32 @@
+# Lens Design System – React Form components
+
+## Documentation
+Browse the documentation at [lensapp.github.io/lens-design-system](http://lensapp.github.io/lens-design-system/?path=/docs/form).
+
+## What is included?
+
+### ES Modules
+- `./lib/es/index.js` - Main ES module
+- `./lib/es/ComponentName/ComponentName.js` - Individual ES modules
+
+### CommonJS modules
+- `./lib/cjs/index.js` - Main CommonJS module
+- `./lib/cjs/ComponentName/ComponentName.js` - Individual CommonJS modules
+
+### AMD package
+- `./lib/web/[version-number]/index.css` - Static CSS for web
+- `./lib/web/[version-number]/index.js` - AMD package for RequireJS. Requires external `react` import.
+
+## Usage with React apps
+- run `npm i -s @k8slens/lds @k8slens/lds-tokens`
+- import `@k8slens/lds-tokens/lib/web/font-imports.css` in your React app to include fonts
+- import `@k8slens/lds-form/index.css` in your React app to include form styles
+- Use in a component:
+
+```jsx
+import { FormErrorCompoenent } from "@k8slens/lds-form";
+
+export const Component = () => (
+  <FormErrorCompoenent label="My Button" />
+);
+```

package/lib/cjs/FormErrorMessage/FormErrorMessage.js

@@ -0,0 +1 @@
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),t=require("clsx"),a=require("./FormErrorMessage.module.css.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(r),u=l(t);module.exports=function(r){var t=r.id,l=r.forId,o=r.errors,i=e.__rest(r,["id","forId","errors"]);return s.default.createElement("label",e.__assign({},i,{className:u.default(a.formErrorMessage,i.className),id:t,htmlFor:l}),s.default.createElement("ul",null,o.map((function(e){return s.default.createElement("li",{key:e},e)}))))};

package/lib/cjs/FormErrorMessage/FormErrorMessage.module.css.js

@@ -0,0 +1 @@
+"use strict";module.exports={formErrorMessage:"lds-form-error-message"};

package/lib/cjs/FormField/FormField.js

@@ -0,0 +1 @@
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),l=require("clsx"),s=require("../FormLabel/FormLabel.js"),a=require("../FormErrorMessage/FormErrorMessage.js"),o=require("./FormField.module.css.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=d(r),t=d(l);module.exports=function(r){var l=r.id,d=r.label,u=r.labelId,n=r.errorId,c=r.required,m=r.errors,f=r.children,b=r.labelProps,p=r.errorProps,v=e.__rest(r,["id","label","labelId","errorId","required","errors","children","labelProps","errorProps"]);return"development"!==process.env.NODE_ENV||l||console.warn("No id provided for <FormField> with label ".concat(d,". This might be caused by the missing id issue on the first render of a HeadlessUI Combobox. Make sure to provide id for all other FormField components.")),i.default.createElement("div",e.__assign({},v,{className:t.default(o.formField,v.className||"")}),l&&i.default.createElement(s,e.__assign({id:u,forId:l,required:c,label:d},b,{className:t.default(o.label,null==b?void 0:b.className)})),!l&&i.default.createElement("label",null),f,l&&m&&i.default.createElement(a,e.__assign({},p,{className:t.default(o.error,null==p?void 0:p.className),forId:l,id:n,errors:m})))};

package/lib/cjs/FormField/FormField.module.css.js

@@ -0,0 +1 @@
+"use strict";module.exports={formField:"lds-form-field",label:"lds-form-field--label",error:"lds-form-field--error"};

package/lib/cjs/FormInput/FormInput.js

@@ -0,0 +1 @@
+"use strict";var r=require("../_virtual/_tslib.js"),e=require("react"),a=require("@k8slens/lds"),l=require("../common/usePrevious.js"),i=require("../common/useFieldIds.js"),u=require("../common/useInputErrorProps.js"),o=require("../common/useFormComponentData.js"),t=require("../FormField/FormField.js"),n=require("../common/helpers.js");function s(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var d=s(e);var v=function(r,e,a,l,i){if(void 0===i&&(i={valid:!0}),l&&null!==l&&(i=n.getInputValidity(l)),a){var u=a(r,i,e.name,e);"string"==typeof u?(i[u]=!0,i.valid=!1):u&&(u.forEach((function(r){i[r]=!0})),i.valid=!1)}return i};module.exports=function(s){var p=s.id,c=s.label,f=s.wrapperProps,m=s.labelProps,P=s.validate,_=s.errorParser,b=void 0===_?o.defaultErrorParser:_,y=s.errorProps,g=s.value,q=s.onChange,I=s.type,F=r.__rest(s,["id","label","wrapperProps","labelProps","validate","errorParser","errorProps","value","onChange","type"]),j=l.usePrevious(g),E=e.useRef(null),C=i.useFieldIds(p),h=C.id,V=C.labelId,k=C.errorId,w=o.useFormComponentData({value:g,errorParser:b,constraints:F,label:c}),D=w.currentValue,x=w.setCurrentValue,N=w.errors,R=u.useInputErrorProps({id:k,errors:N}),z=e.useCallback((function(e){var a=e.target,l=function(r,e){return"number"===e?parseFloat(r):r}(a.value,I),i=v(l,F,P,a,r.__assign({},a.validity));x({value:l,validity:r.__assign({},i)}),q(l,null==i?void 0:i.valid)}),[I,P,q,x,F]);return e.useEffect((function(){var e,a;if(j!==g&&g!==D.value){var l=g;E.current&&n.setNativeValue(E.current,l);var i=v(l,u.useInputErrorProps,P,E.current),o=null===(e=D.validity)||void 0===e?void 0:e.valid,t=null==i?void 0:i.valid;x({value:l,validity:i}),o!==t&&q(l,t)}else if(D.validity){var s=v(D.value,F,P,E.current);(o=null===(a=D.validity)||void 0===a?void 0:a.valid)!==(t=null==s?void 0:s.valid)&&(x((function(e){return r.__assign(r.__assign({},e),{validity:s})})),q(D.value,t))}}),[P,g,j,D,x,q,F]),d.default.createElement(t,r.__assign({id:h,label:c,labelId:V,errorId:k,errors:N,required:F.required,labelProps:m,errorProps:y},f),d.default.createElement(a.Input,r.__assign({ref:E,id:h,"aria-labelledby":V},R,F,{type:I,value:null==D?void 0:D.value,onChange:z})))};

package/lib/cjs/FormLabel/FormLabel.js

@@ -0,0 +1 @@
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react"),a=require("clsx"),l=require("./FormLabel.module.css.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=t(r),s=t(a);module.exports=function(r){var a=r.id,t=r.forId,d=r.label,i=r.required,n=e.__rest(r,["id","forId","label","required"]);return u.default.createElement("label",e.__assign({},n,{id:a,htmlFor:t,className:s.default(l.formLabel,null==n?void 0:n.className)}),d,i&&u.default.createElement(u.default.Fragment,null,u.default.createElement("span",{"aria-hidden":!0,className:l.requiredAsterisk}," "),u.default.createElement("span",{className:"lds-only-aria"}," required")))};

package/lib/cjs/FormLabel/FormLabel.module.css.js

@@ -0,0 +1 @@
+"use strict";module.exports={formLabel:"lds-form-label",requiredAsterisk:"lds-form-label--required-asterisk"};

package/lib/cjs/_virtual/_tslib.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.__assign=function(){return exports.__assign=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},exports.__assign.apply(this,arguments)},exports.__rest=function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};

package/lib/cjs/common/helpers.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./validation.js");exports.getInputValidity=function(t){for(var r={},o=0,a=e.validityKeys;o<a.length;o++){var i=a[o];r[i]=t.validity[i]}return r},exports.setNativeValue=function(e,t){var r=(Object.getOwnPropertyDescriptor(e,"value")||{}).set,o=Object.getPrototypeOf(e),a=(Object.getOwnPropertyDescriptor(o,"value")||{}).set;r&&r!==a?r.call(e,t):a?a.call(e,t):console.warn("Could not set native value of input")};

package/lib/cjs/common/useFieldIds.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("lodash/uniqueId"),r=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=t(e);exports.useFieldIds=function(e){var t=r.useMemo((function(){return e||u.default("form-field-")}),[e]);return{id:t,labelId:"".concat(t,"-label"),errorId:"".concat(t,"-error")}};

package/lib/cjs/common/useFormComponentData.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(require("lodash/uniq"));exports.defaultErrorParser=function(e,t,r){var n=r.min,a=r.max,o=r.minLength,u=r.maxLength,l={valueMissing:"Required",tooShort:"Min. length is ".concat(o," chars"),tooLong:"Max. length is ".concat(u," chars"),rangeUnderflow:"Value should be at least ".concat(n),rangeOverflow:"Value should be no more than ".concat(a),default:"Value is invalid"};return l[t]||l.default},exports.useFormComponentData=function(t){var n=t.value,a=t.errorParser,o=t.constraints,u=void 0===o?{}:o,l=t.label,i=e.useState({value:n}),s=i[0],c=i[1],h=e.useMemo((function(){for(var e=s.value,t=s.validity,n=[],o=Object.keys(t||{}).filter((function(e){return"valid"!==e})),i=0,c=o;i<c.length;i++){var h=c[i],d=void 0;switch(h){case"tooShort":t&&(t[h]||"string"==typeof e&&u.minLength&&e.length<u.minLength)&&(d=a(e,h,u,l));break;case"tooLong":t&&(t[h]||"string"==typeof e&&u.maxLength&&e.length>u.maxLength)&&(d=a(e,h,u,l));break;default:t&&t[h]&&(d=a(e,h,u,l))}d&&n.push(d)}!1!==(null==t?void 0:t.valid)||n.length||(d=a(e,"unknown",u,l))&&n.push(d);return r.default(n)}),[s,u,a,l]);return{currentValue:s,setCurrentValue:c,errors:h}};

package/lib/cjs/common/useInputErrorProps.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react");exports.useInputErrorProps=function(e){var i=e.id,t=e.errors;return r.useMemo((function(){return(null==t?void 0:t.length)?{"aria-invalid":!0,"aria-errormessage":i,"aria-describedby":i}:{}}),[t,i])};

package/lib/cjs/common/usePrevious.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");exports.usePrevious=function(r){var t=e.useRef();return e.useEffect((function(){t.current=r}),[r]),t.current};

package/lib/cjs/common/validation.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validityKeys=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valid","valueMissing"];

package/lib/cjs/index.css

@@ -0,0 +1 @@
+.lds-form-label{color:var(--color-font-form-field-label);display:block;font-size:.875rem;font-size:var(--typography-heading-size-h3);font-weight:700;line-height:1.25rem;text-align:left;text-transform:uppercase}.lds-form-label--required-asterisk:after{color:var(--alias-color-text-accent);content:"*";display:inline-block}.lds-form-error-message{color:var(--color-font-form-field-error);display:block;font-size:.75rem;line-height:1rem}.lds-form-error-message>ul{list-style-type:none}.lds-form-field{min-height:var(--size-form-field-min-block-size)}.lds-form-field--label{-webkit-margin-after:var(--spacing-form-field-label-margin-block-end);-webkit-padding-start:var(--spacing-form-field-label-padding-inline-start);margin-bottom:var(--spacing-form-field-label-margin-block-end);padding-left:var(--spacing-form-field-label-padding-inline-start)}.lds-form-field--error{-webkit-margin-before:var(--spacing-form-field-error-margin-block-start);-webkit-margin-after:var(--spacing-form-field-error-margin-block-end);-webkit-padding-start:var(--spacing-form-field-error-padding-inline-start);margin-bottom:var(--spacing-form-field-error-margin-block-end);margin-top:var(--spacing-form-field-error-margin-block-start);padding-left:var(--spacing-form-field-error-padding-inline-start)}

package/lib/cjs/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("./FormField/FormField.js"),e=require("./FormErrorMessage/FormErrorMessage.js"),o=require("./FormLabel/FormLabel.js"),s=require("./FormInput/FormInput.js"),t=require("./common/useFormComponentData.js");exports.FormField=r,exports.FormErrorMessage=e,exports.FormLabel=o,exports.FormInput=s,exports.defaultErrorParser=t.defaultErrorParser;

package/lib/es/FormErrorMessage/FormErrorMessage.js

@@ -0,0 +1 @@
+import{__rest as r,__assign as e}from"../_virtual/_tslib.js";import o from"react";import t from"clsx";import m from"./FormErrorMessage.module.css.js";var a=function(a){var l=a.id,s=a.forId,i=a.errors,c=r(a,["id","forId","errors"]);return o.createElement("label",e({},c,{className:t(m.formErrorMessage,c.className),id:l,htmlFor:s}),o.createElement("ul",null,i.map((function(r){return o.createElement("li",{key:r},r)}))))};export{a as default};

package/lib/es/FormErrorMessage/FormErrorMessage.module.css.js

@@ -0,0 +1 @@
+var r={formErrorMessage:"lds-form-error-message"};export{r as default};

package/lib/es/FormField/FormField.js

@@ -0,0 +1 @@
+import{__rest as r,__assign as e}from"../_virtual/_tslib.js";import o from"react";import l from"clsx";import s from"../FormLabel/FormLabel.js";import a from"../FormErrorMessage/FormErrorMessage.js";import i from"./FormField.module.css.js";function m(m){var d=m.id,t=m.label,c=m.labelId,n=m.errorId,b=m.required,p=m.errors,f=m.children,u=m.labelProps,F=m.errorProps,v=r(m,["id","label","labelId","errorId","required","errors","children","labelProps","errorProps"]);return"development"!==process.env.NODE_ENV||d||console.warn("No id provided for <FormField> with label ".concat(t,". This might be caused by the missing id issue on the first render of a HeadlessUI Combobox. Make sure to provide id for all other FormField components.")),o.createElement("div",e({},v,{className:l(i.formField,v.className||"")}),d&&o.createElement(s,e({id:c,forId:d,required:b,label:t},u,{className:l(i.label,null==u?void 0:u.className)})),!d&&o.createElement("label",null),f,d&&p&&o.createElement(a,e({},F,{className:l(i.error,null==F?void 0:F.className),forId:d,id:n,errors:p})))}export{m as default};

package/lib/es/FormField/FormField.module.css.js

@@ -0,0 +1 @@
+var l={formField:"lds-form-field",label:"lds-form-field--label",error:"lds-form-field--error"};export{l as default};

package/lib/es/FormInput/FormInput.js

@@ -0,0 +1 @@
+import{__rest as r,__assign as e}from"../_virtual/_tslib.js";import l,{useRef as o,useCallback as a,useEffect as i}from"react";import{Input as t}from"@k8slens/lds";import{usePrevious as n}from"../common/usePrevious.js";import{useFieldIds as u}from"../common/useFieldIds.js";import{useInputErrorProps as v}from"../common/useInputErrorProps.js";import{useFormComponentData as d,defaultErrorParser as s}from"../common/useFormComponentData.js";import m from"../FormField/FormField.js";import{setNativeValue as p,getInputValidity as f}from"../common/helpers.js";var c=function(r,e,l,o,a){if(void 0===a&&(a={valid:!0}),o&&null!==o&&(a=f(o)),l){var i=l(r,a,e.name,e);"string"==typeof i?(a[i]=!0,a.valid=!1):i&&(i.forEach((function(r){a[r]=!0})),a.valid=!1)}return a};function b(f){var b=f.id,P=f.label,y=f.wrapperProps,j=f.labelProps,F=f.validate,I=f.errorParser,g=void 0===I?s:I,h=f.errorProps,C=f.value,E=f.onChange,q=f.type,w=r(f,["id","label","wrapperProps","labelProps","validate","errorParser","errorProps","value","onChange","type"]),V=n(C),_=o(null),k=u(b),x=k.id,D=k.labelId,z=k.errorId,A=d({value:C,errorParser:g,constraints:w,label:P}),B=A.currentValue,G=A.setCurrentValue,H=A.errors,J=v({id:z,errors:H}),K=a((function(r){var l=r.target,o=function(r,e){return"number"===e?parseFloat(r):r}(l.value,q),a=c(o,w,F,l,e({},l.validity));G({value:o,validity:e({},a)}),E(o,null==a?void 0:a.valid)}),[q,F,E,G,w]);return i((function(){var r,l;if(V!==C&&C!==B.value){var o=C;_.current&&p(_.current,o);var a=c(o,v,F,_.current),i=null===(r=B.validity)||void 0===r?void 0:r.valid,t=null==a?void 0:a.valid;G({value:o,validity:a}),i!==t&&E(o,t)}else if(B.validity){var n=c(B.value,w,F,_.current);(i=null===(l=B.validity)||void 0===l?void 0:l.valid)!==(t=null==n?void 0:n.valid)&&(G((function(r){return e(e({},r),{validity:n})})),E(B.value,t))}}),[F,C,V,B,G,E,w]),l.createElement(m,e({id:x,label:P,labelId:D,errorId:z,errors:H,required:w.required,labelProps:j,errorProps:h},y),l.createElement(t,e({ref:_,id:x,"aria-labelledby":D},J,w,{type:q,value:null==B?void 0:B.value,onChange:K})))}export{b as default};

package/lib/es/FormLabel/FormLabel.js

@@ -0,0 +1 @@
+import{__rest as e,__assign as r}from"../_virtual/_tslib.js";import a from"react";import l from"clsx";import t from"./FormLabel.module.css.js";var m=function(m){var s=m.id,i=m.forId,o=m.label,d=m.required,n=e(m,["id","forId","label","required"]);return a.createElement("label",r({},n,{id:s,htmlFor:i,className:l(t.formLabel,null==n?void 0:n.className)}),o,d&&a.createElement(a.Fragment,null,a.createElement("span",{"aria-hidden":!0,className:t.requiredAsterisk}," "),a.createElement("span",{className:"lds-only-aria"}," required")))};export{m as default};

package/lib/es/FormLabel/FormLabel.module.css.js

@@ -0,0 +1 @@
+var e={formLabel:"lds-form-label",requiredAsterisk:"lds-form-label--required-asterisk"};export{e as default};

package/lib/es/_virtual/_tslib.js

@@ -0,0 +1 @@
+var r=function(){return r=Object.assign||function(r){for(var t,e=1,n=arguments.length;e<n;e++)for(var o in t=arguments[e])Object.prototype.hasOwnProperty.call(t,o)&&(r[o]=t[o]);return r},r.apply(this,arguments)};function t(r,t){var e={};for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&t.indexOf(n)<0&&(e[n]=r[n]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(r);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(r,n[o])&&(e[n[o]]=r[n[o]])}return e}export{r as __assign,t as __rest};

package/lib/es/common/helpers.js

@@ -0,0 +1 @@
+import{validityKeys as t}from"./validation.js";var e=function(t,e){var r=(Object.getOwnPropertyDescriptor(t,"value")||{}).set,o=Object.getPrototypeOf(t),a=(Object.getOwnPropertyDescriptor(o,"value")||{}).set;r&&r!==a?r.call(t,e):a?a.call(t,e):console.warn("Could not set native value of input")},r=function(e){for(var r={},o=0,a=t;o<a.length;o++){var n=a[o];r[n]=e.validity[n]}return r};export{r as getInputValidity,e as setNativeValue};

package/lib/es/common/useFieldIds.js

@@ -0,0 +1 @@
+import r from"lodash/uniqueId";import{useMemo as o}from"react";var e=function(e){var t=o((function(){return e||r("form-field-")}),[e]);return{id:t,labelId:"".concat(t,"-label"),errorId:"".concat(t,"-error")}};export{e as useFieldIds};

package/lib/es/common/useFormComponentData.js

@@ -0,0 +1 @@
+import{useState as e,useMemo as n}from"react";import t from"lodash/uniq";var r=function(e,n,t){var r=t.min,a=t.max,o=t.minLength,l=t.maxLength,i={valueMissing:"Required",tooShort:"Min. length is ".concat(o," chars"),tooLong:"Max. length is ".concat(l," chars"),rangeUnderflow:"Value should be at least ".concat(r),rangeOverflow:"Value should be no more than ".concat(a),default:"Value is invalid"};return i[n]||i.default},a=function(r){var a=r.value,o=r.errorParser,l=r.constraints,i=void 0===l?{}:l,u=r.label,s=e({value:a}),h=s[0],c=s[1],g=n((function(){for(var e=h.value,n=h.validity,r=[],a=Object.keys(n||{}).filter((function(e){return"valid"!==e})),l=0,s=a;l<s.length;l++){var c=s[l],g=void 0;switch(c){case"tooShort":n&&(n[c]||"string"==typeof e&&i.minLength&&e.length<i.minLength)&&(g=o(e,c,i,u));break;case"tooLong":n&&(n[c]||"string"==typeof e&&i.maxLength&&e.length>i.maxLength)&&(g=o(e,c,i,u));break;default:n&&n[c]&&(g=o(e,c,i,u))}g&&r.push(g)}!1!==(null==n?void 0:n.valid)||r.length||(g=o(e,"unknown",i,u))&&r.push(g);return t(r)}),[h,i,o,u]);return{currentValue:h,setCurrentValue:c,errors:g}};export{r as defaultErrorParser,a as useFormComponentData};

package/lib/es/common/useInputErrorProps.js

@@ -0,0 +1 @@
+import{useMemo as r}from"react";var a=function(a){var e=a.id,i=a.errors;return r((function(){return(null==i?void 0:i.length)?{"aria-invalid":!0,"aria-errormessage":e,"aria-describedby":e}:{}}),[i,e])};export{a as useInputErrorProps};

package/lib/es/common/usePrevious.js

@@ -0,0 +1 @@
+import{useRef as r,useEffect as t}from"react";function n(n){var c=r();return t((function(){c.current=n}),[n]),c.current}export{n as usePrevious};

package/lib/es/common/validation.js

@@ -0,0 +1 @@
+var t=["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valid","valueMissing"];export{t as validityKeys};

package/lib/es/index.css

@@ -0,0 +1 @@
+.lds-form-label{color:var(--color-font-form-field-label);display:block;font-size:.875rem;font-size:var(--typography-heading-size-h3);font-weight:700;line-height:1.25rem;text-align:left;text-transform:uppercase}.lds-form-label--required-asterisk:after{color:var(--alias-color-text-accent);content:"*";display:inline-block}.lds-form-error-message{color:var(--color-font-form-field-error);display:block;font-size:.75rem;line-height:1rem}.lds-form-error-message>ul{list-style-type:none}.lds-form-field{min-height:var(--size-form-field-min-block-size)}.lds-form-field--label{-webkit-margin-after:var(--spacing-form-field-label-margin-block-end);-webkit-padding-start:var(--spacing-form-field-label-padding-inline-start);margin-bottom:var(--spacing-form-field-label-margin-block-end);padding-left:var(--spacing-form-field-label-padding-inline-start)}.lds-form-field--error{-webkit-margin-before:var(--spacing-form-field-error-margin-block-start);-webkit-margin-after:var(--spacing-form-field-error-margin-block-end);-webkit-padding-start:var(--spacing-form-field-error-padding-inline-start);margin-bottom:var(--spacing-form-field-error-margin-block-end);margin-top:var(--spacing-form-field-error-margin-block-start);padding-left:var(--spacing-form-field-error-padding-inline-start)}

package/lib/es/index.js

@@ -0,0 +1 @@
+export{default as FormField}from"./FormField/FormField.js";export{default as FormErrorMessage}from"./FormErrorMessage/FormErrorMessage.js";export{default as FormLabel}from"./FormLabel/FormLabel.js";export{default as FormInput}from"./FormInput/FormInput.js";export{defaultErrorParser}from"./common/useFormComponentData.js";

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@k8slens/lds-form",
+  "version": "0.1.0",
+  "description": "Lens Design System – React Form components",
+  "author": "Mirantis Inc",
+  "license": "MIT",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/es/index.js",
+  "types": "./lib/es/index.d.ts",
+  "type": "module",
+  "files": [
+    "lib/"
+  ],
+  "scripts": {
+    "start": "npm run rollup-watch",
+    "build": "npm run clean && npm run rollup",
+    "build:production": "npm run build",
+    "rollup-watch": "rollup -c --watch",
+    "rollup": "rollup -c",
+    "clean": "rimraf lib",
+    "test": "jest",
+    "lint": "eslint --resolve-plugins-relative-to ./node_modules/@k8slens/eslint-config .",
+    "format": "eslint --resolve-plugins-relative-to ./node_modules/@k8slens/eslint-config --fix .",
+    "prepack": "node prepack"
+  },
+  "devDependencies": {
+    "@k8slens/eslint-config": ">=0.1.0 <1.0.0",
+    "@k8slens/lds-tokens": ">=0.2.0 <1.0.0",
+    "@rollup/plugin-node-resolve": "14.0.1",
+    "@storybook/react": "6.5.13",
+    "@svgr/rollup": "6.5.1",
+    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "13.5.0",
+    "@types/jest": "27.5.2",
+    "eslint": "8.26.0",
+    "glob": "8.0.3",
+    "jest": "29.2.2",
+    "jest-environment-jsdom": "29.2.2",
+    "postcss-import": "15.0.0",
+    "postcss-logical": "5.0.4",
+    "rimraf": "3.0.2",
+    "rollup": "2.79.0",
+    "rollup-plugin-delete": "2.0.0",
+    "rollup-plugin-inline-svg": "3.0.3",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-terser": "7.0.2",
+    "rollup-plugin-typescript": "1.0.1",
+    "rollup-plugin-typescript2": "0.33.0",
+    "tailwindcss": "3.1.8",
+    "typescript": "4.8.4",
+    "ts-jest": "29.0.3"
+  },
+  "peerDependencies": {
+    "@k8slens/lds": ">=0.2.0 <1.0.0",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
+    "clsx": "^1.2.1",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(css|less)$": "<rootDir>/../../__mocks__/CSSStub.js",
+      "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
+    }
+  }
+}