@launchpad-ui/form 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -0
- package/dist/Checkbox.d.ts +36 -0
- package/dist/Checkbox.d.ts.map +1 -0
- package/dist/CompactTextField.d.ts +22 -0
- package/dist/CompactTextField.d.ts.map +1 -0
- package/dist/FieldError.d.ts +12 -0
- package/dist/FieldError.d.ts.map +1 -0
- package/dist/FieldSet.d.ts +10 -0
- package/dist/FieldSet.d.ts.map +1 -0
- package/dist/Form.d.ts +19 -0
- package/dist/Form.d.ts.map +1 -0
- package/dist/FormField.d.ts +19 -0
- package/dist/FormField.d.ts.map +1 -0
- package/dist/FormGroup.d.ts +15 -0
- package/dist/FormGroup.d.ts.map +1 -0
- package/dist/FormHint.d.ts +11 -0
- package/dist/FormHint.d.ts.map +1 -0
- package/dist/IconField.d.ts +11 -0
- package/dist/IconField.d.ts.map +1 -0
- package/dist/InputGroup.d.ts +6 -0
- package/dist/InputGroup.d.ts.map +1 -0
- package/dist/Label.d.ts +14 -0
- package/dist/Label.d.ts.map +1 -0
- package/dist/Radio.d.ts +56 -0
- package/dist/Radio.d.ts.map +1 -0
- package/dist/RadioGroup.d.ts +41 -0
- package/dist/RadioGroup.d.ts.map +1 -0
- package/dist/RequiredAsterisk.d.ts +8 -0
- package/dist/RequiredAsterisk.d.ts.map +1 -0
- package/dist/Select.d.ts +17 -0
- package/dist/Select.d.ts.map +1 -0
- package/dist/TextArea.d.ts +12 -0
- package/dist/TextArea.d.ts.map +1 -0
- package/dist/TextField.d.ts +21 -0
- package/dist/TextField.d.ts.map +1 -0
- package/dist/index.d.ts +29 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.es.js +511 -0
- package/dist/index.es.js.map +7 -0
- package/dist/index.js +556 -0
- package/dist/index.js.map +7 -0
- package/dist/styles/CompactTextField.css +2 -0
- package/dist/styles/CompactTextField.css.map +1 -0
- package/dist/styles/FieldSet.css +2 -0
- package/dist/styles/FieldSet.css.map +1 -0
- package/dist/styles/Form.css +2 -0
- package/dist/styles/Form.css.map +1 -0
- package/dist/styles/FormField.css +2 -0
- package/dist/styles/FormField.css.map +1 -0
- package/dist/styles/FormHint.css +2 -0
- package/dist/styles/FormHint.css.map +1 -0
- package/dist/styles/FormInput.css +2 -0
- package/dist/styles/FormInput.css.map +1 -0
- package/dist/styles/IconField.css +2 -0
- package/dist/styles/IconField.css.map +1 -0
- package/dist/styles/InputGroup.css +2 -0
- package/dist/styles/InputGroup.css.map +1 -0
- package/dist/styles/RequiredAsterisk.css +2 -0
- package/dist/styles/RequiredAsterisk.css.map +1 -0
- package/dist/styles/styles.css +2 -0
- package/dist/styles/styles.css.map +1 -0
- package/dist/utils/index.d.ts +5 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/package.json +50 -0
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAAA,iGAOA,mGAKA,2EAKA,oCAIA","sources":["src/styles/FormField.css"],"sourcesContent":[".FormField-hint {\n margin: 0;\n font-size: 1.3rem;\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n}\n\n.Form .FormField .Form-label,\n.Form .FormField .is-invalid .Form-label {\n color: var(--color-black-300);\n}\n\n.FormField-errorMessage {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n.FormField.Form-group {\n margin: 1rem 0;\n}\n\n.FormField.Form-group:first-child {\n margin-top: 0;\n}\n"],"names":[]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAAA","sources":["src/styles/FormHint.css"],"sourcesContent":[".Form-hint {\n display: block;\n margin-top: 0.3rem;\n font-size: 1.3rem;\n font-weight: var(--font-weight-regular);\n color: var(--color-gray-700);\n}\n"],"names":[]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
.FormInput{width:100%;font-size:1.3rem;font-family:var(--font-family-base);line-height:var(--line-height-base);color:var(--color-black-300);border:1px solid var(--color-gray-500);border-radius:var(--border-radius);background-color:#fff;padding:.6rem 1rem;transition:all .1s linear;display:block}.FormInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}input.FormInput,select.FormInput{height:3.2rem}.FormInput.is-disabled,input.FormInput:disabled,select.FormInput:disabled,input.FormInput:read-only{background-color:var(--color-white-100)}.FormInput.is-disabled:hover,.FormInput:disabled:hover{cursor:not-allowed}textarea.FormInput{min-height:2.5em;resize:none}textarea.FormInput:disabled,textarea.FormInput:read-only{background-color:var(--color-white-100)}input.FormInput::-webkit-autofill{box-shadow:inset 0 0 0 50px #fff}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}input.FormInput--tiny{height:2.4rem;padding:.1rem .6rem}.FormInput.is-focused,.FormInput:focus{border-color:var(--color-blue-500);outline:0;box-shadow:0 0 0 3px #405bff1a}.FormInput[readonly],.FormInput[readonly]:focus{color:var(--color-gray-700);border-color:var(--color-gray-500);box-shadow:none}.Form-checkbox{flex-shrink:0;align-self:flex-start;margin-top:.4rem;margin-right:.5rem}.Form-radio{margin-right:.5rem}.FormInput-select{-webkit-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:2rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:2rem}.FormInput-number{min-width:4.5rem}.FormInput-suffixContainer{border:1px solid var(--color-gray-500);border-radius:var(--border-radius);transition:all .1s linear;display:inline-flex;overflow:hidden}.FormInput-suffixContainer:focus-within{border-color:var(--color-blue-500);box-shadow:0 0 0 3px #405bff1a}.FormInput-suffixContainer .FormInput{border-radius:var(--border-radius)0 0 var(--border-radius);border:none}.FormInput-suffixContainer .FormInput:focus{box-shadow:none}.FormInput-suffixContainer label.FormInput-suffix{background-color:var(--color-gray-100);color:var(--color-gray-500);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}input.FormInput-suffix::-webkit-outer-spin-button,input.FormInput-suffix::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input.FormInput-suffix[type=number]{-webkit-appearance:textfield;appearance:textfield}
|
2
|
+
/*# sourceMappingURL=FormInput.css.map */
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAEA,uSAcA,oEAKA,+CAKA,4IAOA,0EAKA,gDAKA,iGAKA,mEAKA,oNAQA,uFAOA,2FAOA,kDAIA,wDAKA,mHAOA,+HAOA,uFAOA,+BAIA,weAUA,mCAIA,mKAQA,0GAKA,6GAKA,4DAIA,uMAUA,qJAOA","sources":["src/styles/FormInput.css"],"sourcesContent":["/* stylelint-disable no-descending-specificity */\n\n.FormInput {\n display: block;\n width: 100%;\n padding: 0.6rem 1rem;\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n background-color: #fff;\n color: var(--color-black-300);\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n transition: all 100ms linear;\n}\n\n.FormInput:placeholder-shown {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\ninput.FormInput,\nselect.FormInput {\n height: 3.2rem;\n}\n\n.FormInput.is-disabled,\ninput.FormInput:disabled,\nselect.FormInput:disabled,\ninput.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\n.FormInput.is-disabled:hover,\n.FormInput:disabled:hover {\n cursor: not-allowed;\n}\n\ntextarea.FormInput {\n min-height: 2.5em;\n resize: none;\n}\n\ntextarea.FormInput:disabled,\ntextarea.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\ninput.FormInput::-webkit-autofill {\n box-shadow: 0 0 0 50px #fff inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n display: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='checkbox']:disabled {\n pointer-events: none;\n}\n\ninput.FormInput--tiny {\n padding: 0.1rem 0.6rem;\n height: 2.4rem;\n}\n\n.FormInput.is-focused,\n.FormInput:focus {\n outline: 0;\n border-color: var(--color-blue-500);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput[readonly],\n.FormInput[readonly]:focus {\n color: var(--color-gray-700);\n border-color: var(--color-gray-500);\n box-shadow: none;\n}\n\n.Form-checkbox {\n align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */\n flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n margin-right: 0.5rem;\n margin-top: 0.4rem;\n}\n\n.Form-radio {\n margin-right: 0.5rem;\n}\n\n.FormInput-select {\n appearance: none;\n background: transparent;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>');\n background-size: 2rem;\n background-repeat: no-repeat;\n background-position: right 0.4em top 50%, 0 0;\n padding-right: 2rem;\n}\n\n.FormInput-number {\n min-width: 4.5rem;\n}\n\n.FormInput-suffixContainer {\n display: inline-flex;\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n overflow: hidden;\n transition: all 0.1s linear;\n}\n\n.FormInput-suffixContainer:focus-within {\n border-color: var(--color-blue-500);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput-suffixContainer .FormInput {\n border: none;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n}\n\n.FormInput-suffixContainer .FormInput:focus {\n box-shadow: none;\n}\n\n.FormInput-suffixContainer label.FormInput-suffix {\n padding: 0 2px;\n background-color: var(--color-gray-100);\n color: var(--color-gray-500);\n cursor: text;\n display: inline-flex;\n align-items: center;\n position: initial;\n}\n\ninput.FormInput-suffix::-webkit-outer-spin-button,\ninput.FormInput-suffix::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput.FormInput-suffix[type='number'] {\n appearance: textfield;\n}\n\n/* stylelint-enable no-descending-specificity */\n"],"names":[]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAAA,6BAIA,wCAIA","sources":["src/styles/IconField.css"],"sourcesContent":[".IconField {\n position: relative;\n}\n\n.IconField .FormInput {\n padding-left: 3rem;\n}\n\n.FormInput ~ .Icon {\n position: absolute;\n fill: var(--color-gray-600);\n top: 50%;\n transform: translateY(-50%);\n left: 1rem;\n}\n"],"names":[]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAAA,yBAIA","sources":["src/styles/InputGroup.css"],"sourcesContent":[".InputGroup {\n display: flex;\n}\n\n.InputGroup > * + * {\n margin-left: 1rem;\n}\n"],"names":[]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"AAAA","sources":["src/styles/RequiredAsterisk.css"],"sourcesContent":[".RequiredAsterisk {\n margin-left: var(--spacing-1);\n color: var(--color-system-red-700);\n}\n"],"names":[]}
|
@@ -0,0 +1,2 @@
|
|
1
|
+
.CompactTextField{width:100%;position:relative}.CompactTextField .Form-label{color:var(--color-gray-600);opacity:0;pointer-events:none;transform-origin:0 0;z-index:1;background-color:#fff;padding:0 3px;transition:all .1s ease-in-out;position:absolute;top:-2px;left:10px}.CompactTextField.is-active .Form-label{border-radius:var(--border-radius);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}.FieldSet{border:none;margin:2rem 0;padding:0}.Form-group{margin:2rem 0}.Form--increasedErrorMargin .Form-group{margin:2.8rem 0}.Form .Form-group:first-child{margin-top:0}.Form .Form-group:last-child{margin-bottom:0}.Form--inline .Form-group{vertical-align:middle;margin:0;display:inline-block}.Form--inline .Form-group+.Form-group,.Form--inline .Form-group+.Button{margin-left:1rem}.Form-label{font-size:1.3rem;font-family:var(--font-family-base);word-break:break-word}.Form-label--disabled{color:var(--color-gray-800)}.Form-labelOptional{margin-left:.4em}.u-d-inline .Form-label+.Form-label{margin-left:1rem}.Form-group .Form-label{align-items:center;margin-bottom:.2rem;display:flex}.Form-group .Form-label+.Form-label{margin-top:.5rem}.Form .Form-error{background:var(--color-system-red-600);color:#fff;font-weight:var(--font-weight-regular);border-radius:var(--border-radius);padding:.7rem 1.4rem}.Form-fieldError{color:var(--color-system-red-600);font-size:1.3rem}.Form--increasedErrorMargin .Form-fieldError{min-height:2.8rem}.Form:not(.Form--inline) .Form-fieldError{text-align:left;padding-top:.5rem;display:block}.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError{padding-top:.1rem;padding-bottom:.5rem}.Form-label .Form-fieldError{float:right}.Form .is-invalid .Form-label{color:var(--color-system-red-600)}::placeholder{color:var(--color-gray-600)}.Form .is-invalid .Select-control,.Form .is-invalid .CustomSelect>div,.Form .is-invalid .FormInput{border-color:var(--color-system-red-600)}.Form--increasedErrorMargin .Form-group.is-invalid{margin-bottom:0}.Form--increasedErrorMargin .Form-group.is-invalid+.Form-group,.Form--increasedErrorMargin .Form-group.is-invalid+.Form-hint{margin-top:0}.FormField-hint{color:var(--color-gray-700);fill:var(--color-gray-700);margin:0;font-size:1.3rem}.Form .FormField .Form-label,.Form .FormField .is-invalid .Form-label{color:var(--color-black-300)}.FormField-errorMessage{color:var(--color-system-red-600);font-size:1.3rem}.FormField.Form-group{margin:1rem 0}.FormField.Form-group:first-child{margin-top:0}.Form-hint{font-size:1.3rem;font-weight:var(--font-weight-regular);color:var(--color-gray-700);margin-top:.3rem;display:block}.FormInput{width:100%;font-size:1.3rem;font-family:var(--font-family-base);line-height:var(--line-height-base);color:var(--color-black-300);border:1px solid var(--color-gray-500);border-radius:var(--border-radius);background-color:#fff;padding:.6rem 1rem;transition:all .1s linear;display:block}.FormInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}input.FormInput,select.FormInput{height:3.2rem}.FormInput.is-disabled,input.FormInput:disabled,select.FormInput:disabled,input.FormInput:read-only{background-color:var(--color-white-100)}.FormInput.is-disabled:hover,.FormInput:disabled:hover{cursor:not-allowed}textarea.FormInput{min-height:2.5em;resize:none}textarea.FormInput:disabled,textarea.FormInput:read-only{background-color:var(--color-white-100)}input.FormInput::-webkit-autofill{box-shadow:inset 0 0 0 50px #fff}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}input.FormInput--tiny{height:2.4rem;padding:.1rem .6rem}.FormInput.is-focused,.FormInput:focus{border-color:var(--color-blue-500);outline:0;box-shadow:0 0 0 3px #405bff1a}.FormInput[readonly],.FormInput[readonly]:focus{color:var(--color-gray-700);border-color:var(--color-gray-500);box-shadow:none}.Form-checkbox{flex-shrink:0;align-self:flex-start;margin-top:.4rem;margin-right:.5rem}.Form-radio{margin-right:.5rem}.FormInput-select{-webkit-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:2rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:2rem}.FormInput-number{min-width:4.5rem}.FormInput-suffixContainer{border:1px solid var(--color-gray-500);border-radius:var(--border-radius);transition:all .1s linear;display:inline-flex;overflow:hidden}.FormInput-suffixContainer:focus-within{border-color:var(--color-blue-500);box-shadow:0 0 0 3px #405bff1a}.FormInput-suffixContainer .FormInput{border-radius:var(--border-radius)0 0 var(--border-radius);border:none}.FormInput-suffixContainer .FormInput:focus{box-shadow:none}.FormInput-suffixContainer label.FormInput-suffix{background-color:var(--color-gray-100);color:var(--color-gray-500);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}input.FormInput-suffix::-webkit-outer-spin-button,input.FormInput-suffix::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input.FormInput-suffix[type=number]{-webkit-appearance:textfield;appearance:textfield}.IconField{position:relative}.IconField .FormInput{padding-left:3rem}.FormInput~.Icon{fill:var(--color-gray-600);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.InputGroup{display:flex}.InputGroup>*+*{margin-left:1rem}.RequiredAsterisk{margin-left:var(--spacing-1);color:var(--color-system-red-700)}
|
2
|
+
/*# sourceMappingURL=styles.css.map */
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"mappings":"ACAA,+CAKA,+NAcA,0IEnBA,8CECA,0BAMA,wDAIA,2CAIA,6CAIA,8EAMA,yFAKA,uFAMA,kDAIA,qCAIA,qDAIA,4EAMA,qDAIA,mKAQA,oEAOA,+DAIA,0FAMA,uGAKA,yCAIA,gEAIA,0CAIA,4IAMA,mEAIA,0IC9GA,iGAOA,mGAKA,2EAKA,oCAIA,+CJrBA,8HEEA,uSAcA,oEAKA,+CAKA,4IAOA,0EAKA,gDAKA,iGAKA,mEAKA,oNAQA,uFAOA,2FAOA,kDAIA,wDAKA,mHAOA,+HAOA,uFAOA,+BAIA,weAUA,mCAIA,mKAQA,0GAKA,6GAKA,4DAIA,uMAUA,qJAOA,sFGlKA,6BAIA,wCAIA,2GCRA,yBAIA,iCCJA","sources":["src/styles/styles.css","src/styles/CompactTextField.css","src/styles/FormHint.css","src/styles/FieldSet.css","src/styles/FormInput.css","src/styles/Form.css","src/styles/FormField.css","src/styles/IconField.css","src/styles/InputGroup.css","src/styles/RequiredAsterisk.css"],"sourcesContent":["@import './CompactTextField.css';\n@import './FieldSet.css';\n@import './Form.css';\n@import './FormField.css';\n@import './FormHint.css';\n@import './FormInput.css';\n@import './IconField.css';\n@import './InputGroup.css';\n@import './RequiredAsterisk.css';\n",".CompactTextField {\n position: relative;\n width: 100%;\n}\n\n.CompactTextField .Form-label {\n position: absolute;\n top: -2px;\n left: 10px;\n padding: 0 3px;\n color: var(--color-gray-600);\n opacity: 0;\n pointer-events: none;\n background-color: #fff;\n transform-origin: 0 0; /* preserve left alignment after scaling */\n transition: all 100ms ease-in-out;\n z-index: 1; /* Fixes layout issue in Firefox */\n}\n\n.CompactTextField.is-active .Form-label {\n border-radius: var(--border-radius);\n opacity: 1;\n pointer-events: auto;\n transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */\n}\n",".Form-hint {\n display: block;\n margin-top: 0.3rem;\n font-size: 1.3rem;\n font-weight: var(--font-weight-regular);\n color: var(--color-gray-700);\n}\n",".FieldSet {\n border: none;\n margin: 2rem 0;\n padding: 0;\n}\n","/* stylelint-disable no-descending-specificity */\n\n.FormInput {\n display: block;\n width: 100%;\n padding: 0.6rem 1rem;\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n background-color: #fff;\n color: var(--color-black-300);\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n transition: all 100ms linear;\n}\n\n.FormInput:placeholder-shown {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\ninput.FormInput,\nselect.FormInput {\n height: 3.2rem;\n}\n\n.FormInput.is-disabled,\ninput.FormInput:disabled,\nselect.FormInput:disabled,\ninput.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\n.FormInput.is-disabled:hover,\n.FormInput:disabled:hover {\n cursor: not-allowed;\n}\n\ntextarea.FormInput {\n min-height: 2.5em;\n resize: none;\n}\n\ntextarea.FormInput:disabled,\ntextarea.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\ninput.FormInput::-webkit-autofill {\n box-shadow: 0 0 0 50px #fff inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n display: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='checkbox']:disabled {\n pointer-events: none;\n}\n\ninput.FormInput--tiny {\n padding: 0.1rem 0.6rem;\n height: 2.4rem;\n}\n\n.FormInput.is-focused,\n.FormInput:focus {\n outline: 0;\n border-color: var(--color-blue-500);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput[readonly],\n.FormInput[readonly]:focus {\n color: var(--color-gray-700);\n border-color: var(--color-gray-500);\n box-shadow: none;\n}\n\n.Form-checkbox {\n align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */\n flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n margin-right: 0.5rem;\n margin-top: 0.4rem;\n}\n\n.Form-radio {\n margin-right: 0.5rem;\n}\n\n.FormInput-select {\n appearance: none;\n background: transparent;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>');\n background-size: 2rem;\n background-repeat: no-repeat;\n background-position: right 0.4em top 50%, 0 0;\n padding-right: 2rem;\n}\n\n.FormInput-number {\n min-width: 4.5rem;\n}\n\n.FormInput-suffixContainer {\n display: inline-flex;\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n overflow: hidden;\n transition: all 0.1s linear;\n}\n\n.FormInput-suffixContainer:focus-within {\n border-color: var(--color-blue-500);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput-suffixContainer .FormInput {\n border: none;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n}\n\n.FormInput-suffixContainer .FormInput:focus {\n box-shadow: none;\n}\n\n.FormInput-suffixContainer label.FormInput-suffix {\n padding: 0 2px;\n background-color: var(--color-gray-100);\n color: var(--color-gray-500);\n cursor: text;\n display: inline-flex;\n align-items: center;\n position: initial;\n}\n\ninput.FormInput-suffix::-webkit-outer-spin-button,\ninput.FormInput-suffix::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput.FormInput-suffix[type='number'] {\n appearance: textfield;\n}\n\n/* stylelint-enable no-descending-specificity */\n","/* stylelint-disable no-descending-specificity */\n.Form-group {\n margin: 2rem 0;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-group {\n margin: 2.8rem 0;\n}\n\n.Form .Form-group:first-child {\n margin-top: 0;\n}\n\n.Form .Form-group:last-child {\n margin-bottom: 0;\n}\n\n.Form--inline .Form-group {\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n}\n\n.Form--inline .Form-group + .Form-group,\n.Form--inline .Form-group + .Button {\n margin-left: 1rem;\n}\n\n.Form-label {\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n word-break: break-word;\n}\n\n.Form-label--disabled {\n color: var(--color-gray-800);\n}\n\n.Form-labelOptional {\n margin-left: 0.4em;\n}\n\n.u-d-inline .Form-label + .Form-label {\n margin-left: 1rem;\n}\n\n.Form-group .Form-label {\n display: flex;\n align-items: center;\n margin-bottom: 0.2rem;\n}\n\n.Form-group .Form-label + .Form-label {\n margin-top: 0.5rem;\n}\n\n.Form .Form-error {\n background: var(--color-system-red-600);\n color: #fff;\n font-weight: var(--font-weight-regular);\n padding: 0.7rem 1.4rem;\n border-radius: var(--border-radius);\n}\n\n.Form-fieldError {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-fieldError {\n min-height: 2.8rem;\n}\n\n.Form:not(.Form--inline) .Form-fieldError {\n display: block;\n padding-top: 0.5rem;\n text-align: left;\n}\n\n.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {\n padding-top: 0.1rem;\n padding-bottom: 0.5rem;\n}\n\n.Form-label .Form-fieldError {\n float: right;\n}\n\n.Form .is-invalid .Form-label {\n color: var(--color-system-red-600);\n}\n\n::placeholder {\n color: var(--color-gray-600);\n}\n\n.Form .is-invalid .Select-control,\n.Form .is-invalid .CustomSelect > div,\n.Form .is-invalid .FormInput {\n border-color: var(--color-system-red-600);\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid {\n margin-bottom: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {\n margin-top: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {\n margin-top: 0;\n}\n/* stylelint-enable no-descending-specificity */\n",".FormField-hint {\n margin: 0;\n font-size: 1.3rem;\n color: var(--color-gray-700);\n fill: var(--color-gray-700);\n}\n\n.Form .FormField .Form-label,\n.Form .FormField .is-invalid .Form-label {\n color: var(--color-black-300);\n}\n\n.FormField-errorMessage {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n.FormField.Form-group {\n margin: 1rem 0;\n}\n\n.FormField.Form-group:first-child {\n margin-top: 0;\n}\n",".IconField {\n position: relative;\n}\n\n.IconField .FormInput {\n padding-left: 3rem;\n}\n\n.FormInput ~ .Icon {\n position: absolute;\n fill: var(--color-gray-600);\n top: 50%;\n transform: translateY(-50%);\n left: 1rem;\n}\n",".InputGroup {\n display: flex;\n}\n\n.InputGroup > * + * {\n margin-left: 1rem;\n}\n",".RequiredAsterisk {\n margin-left: var(--spacing-1);\n color: var(--color-system-red-700);\n}\n"],"names":[]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,aAAK,SAAS,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEnC,QAAA,MAAM,kBAAkB,qBAAsB,SAAS,uBACe,CAAC;AAEvE,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,CAAC"}
|
package/package.json
ADDED
@@ -0,0 +1,50 @@
|
|
1
|
+
{
|
2
|
+
"name": "@launchpad-ui/form",
|
3
|
+
"version": "0.1.0",
|
4
|
+
"publishConfig": {
|
5
|
+
"access": "public"
|
6
|
+
},
|
7
|
+
"description": "Elements for composing forms, such as input fields, labels, radio buttons, etc.",
|
8
|
+
"files": [
|
9
|
+
"dist"
|
10
|
+
],
|
11
|
+
"main": "dist/index.js",
|
12
|
+
"module": "dist/index.es.js",
|
13
|
+
"types": "dist/index.d.ts",
|
14
|
+
"sideEffects": [
|
15
|
+
"**/*.css"
|
16
|
+
],
|
17
|
+
"exports": {
|
18
|
+
".": {
|
19
|
+
"types": "./dist/index.d.ts",
|
20
|
+
"import": "./dist/index.es.js",
|
21
|
+
"require": "./dist/index.js"
|
22
|
+
},
|
23
|
+
"./package.json": "./package.json",
|
24
|
+
"./styles/*": "./dist/styles/*"
|
25
|
+
},
|
26
|
+
"source": "src/index.ts",
|
27
|
+
"dependencies": {
|
28
|
+
"@launchpad-ui/icons": "~0.1.5",
|
29
|
+
"@launchpad-ui/tokens": "~0.1.4",
|
30
|
+
"@react-aria/visually-hidden": "^3.3.0",
|
31
|
+
"clsx": "^1.1.1",
|
32
|
+
"lodash-es": "^4.17.21"
|
33
|
+
},
|
34
|
+
"peerDependencies": {
|
35
|
+
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
36
|
+
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
37
|
+
},
|
38
|
+
"devDependencies": {
|
39
|
+
"@types/lodash-es": "^4.17.6",
|
40
|
+
"react": "^18.1.0",
|
41
|
+
"react-dom": "^18.1.0"
|
42
|
+
},
|
43
|
+
"scripts": {
|
44
|
+
"build": "tsc --project tsconfig.build.json && node build.js",
|
45
|
+
"clean": "rm -rf dist",
|
46
|
+
"e2e": "exit 0",
|
47
|
+
"lint": "eslint '**/*.{ts,tsx,js}' && stylelint '**/*.css' --ignore-path ../../.stylelintignore",
|
48
|
+
"test": "vitest run --coverage"
|
49
|
+
}
|
50
|
+
}
|