@launchpad-ui/form 0.10.13 → 0.11.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/dist/index.es.js +34 -34
- package/dist/index.js +34 -34
- package/dist/style.css +1 -1
- package/package.json +5 -5
package/dist/index.es.js
CHANGED
|
@@ -10,37 +10,37 @@ import { useButton } from "@react-aria/button";
|
|
|
10
10
|
import { useLocale } from "@react-aria/i18n";
|
|
11
11
|
import { useNumberField as useNumberField$1 } from "@react-aria/numberfield";
|
|
12
12
|
import { useNumberFieldState } from "@react-stately/numberfield";
|
|
13
|
-
const checkbox = "
|
|
14
|
-
const compactTextField = "
|
|
15
|
-
const field = "
|
|
16
|
-
const fieldError = "
|
|
17
|
-
const fieldErrorMessage = "
|
|
18
|
-
const fieldSet = "
|
|
19
|
-
const form = "
|
|
20
|
-
const formGroup = "
|
|
21
|
-
const formIncreasedErrorMargin = "
|
|
22
|
-
const formInline = "
|
|
23
|
-
const formInput = "
|
|
24
|
-
const formInputTiny = "
|
|
25
|
-
const hint = "
|
|
26
|
-
const iconField = "
|
|
27
|
-
const iconFieldButton = "
|
|
28
|
-
const iconFieldIcon = "
|
|
29
|
-
const iconFieldIconFill = "
|
|
30
|
-
const inlineForm = "
|
|
31
|
-
const isActive = "
|
|
32
|
-
const isDisabled = "
|
|
33
|
-
const isFocused = "
|
|
34
|
-
const isInvalid = "
|
|
35
|
-
const label = "
|
|
36
|
-
const labelDisabled = "
|
|
37
|
-
const labelOptional = "
|
|
38
|
-
const number = "
|
|
39
|
-
const numberField = "
|
|
40
|
-
const radio = "
|
|
41
|
-
const requiredAsterisk = "
|
|
42
|
-
const suffix = "
|
|
43
|
-
const suffixContainer = "
|
|
13
|
+
const checkbox = "QJPOUG_checkbox";
|
|
14
|
+
const compactTextField = "QJPOUG_compactTextField";
|
|
15
|
+
const field = "QJPOUG_field";
|
|
16
|
+
const fieldError = "QJPOUG_fieldError";
|
|
17
|
+
const fieldErrorMessage = "QJPOUG_fieldErrorMessage";
|
|
18
|
+
const fieldSet = "QJPOUG_fieldSet";
|
|
19
|
+
const form = "QJPOUG_form";
|
|
20
|
+
const formGroup = "QJPOUG_formGroup";
|
|
21
|
+
const formIncreasedErrorMargin = "QJPOUG_formIncreasedErrorMargin";
|
|
22
|
+
const formInline = "QJPOUG_formInline";
|
|
23
|
+
const formInput = "QJPOUG_formInput";
|
|
24
|
+
const formInputTiny = "QJPOUG_formInputTiny";
|
|
25
|
+
const hint = "QJPOUG_hint";
|
|
26
|
+
const iconField = "QJPOUG_iconField";
|
|
27
|
+
const iconFieldButton = "QJPOUG_iconFieldButton";
|
|
28
|
+
const iconFieldIcon = "QJPOUG_iconFieldIcon";
|
|
29
|
+
const iconFieldIconFill = "QJPOUG_iconFieldIconFill";
|
|
30
|
+
const inlineForm = "QJPOUG_inlineForm";
|
|
31
|
+
const isActive = "QJPOUG_isActive";
|
|
32
|
+
const isDisabled = "QJPOUG_isDisabled";
|
|
33
|
+
const isFocused = "QJPOUG_isFocused";
|
|
34
|
+
const isInvalid = "QJPOUG_isInvalid";
|
|
35
|
+
const label = "QJPOUG_label";
|
|
36
|
+
const labelDisabled = "QJPOUG_labelDisabled";
|
|
37
|
+
const labelOptional = "QJPOUG_labelOptional";
|
|
38
|
+
const number = "QJPOUG_number";
|
|
39
|
+
const numberField = "QJPOUG_numberField";
|
|
40
|
+
const radio = "QJPOUG_radio";
|
|
41
|
+
const requiredAsterisk = "QJPOUG_requiredAsterisk";
|
|
42
|
+
const suffix = "QJPOUG_suffix";
|
|
43
|
+
const suffixContainer = "QJPOUG_suffixContainer";
|
|
44
44
|
const styles = {
|
|
45
45
|
checkbox,
|
|
46
46
|
compactTextField,
|
|
@@ -69,9 +69,9 @@ const styles = {
|
|
|
69
69
|
labelOptional,
|
|
70
70
|
number,
|
|
71
71
|
numberField,
|
|
72
|
-
"numberField-input": "QJPOUG_numberField-
|
|
73
|
-
"numberField-stepper": "QJPOUG_numberField-
|
|
74
|
-
"numberField-stepperContainer": "QJPOUG_numberField-
|
|
72
|
+
"numberField-input": "QJPOUG_numberField-input",
|
|
73
|
+
"numberField-stepper": "QJPOUG_numberField-stepper",
|
|
74
|
+
"numberField-stepperContainer": "QJPOUG_numberField-stepperContainer",
|
|
75
75
|
radio,
|
|
76
76
|
requiredAsterisk,
|
|
77
77
|
suffix,
|
package/dist/index.js
CHANGED
|
@@ -12,37 +12,37 @@ const button$1 = require("@react-aria/button");
|
|
|
12
12
|
const i18n = require("@react-aria/i18n");
|
|
13
13
|
const numberfield$1 = require("@react-aria/numberfield");
|
|
14
14
|
const numberfield = require("@react-stately/numberfield");
|
|
15
|
-
const checkbox = "
|
|
16
|
-
const compactTextField = "
|
|
17
|
-
const field = "
|
|
18
|
-
const fieldError = "
|
|
19
|
-
const fieldErrorMessage = "
|
|
20
|
-
const fieldSet = "
|
|
21
|
-
const form = "
|
|
22
|
-
const formGroup = "
|
|
23
|
-
const formIncreasedErrorMargin = "
|
|
24
|
-
const formInline = "
|
|
25
|
-
const formInput = "
|
|
26
|
-
const formInputTiny = "
|
|
27
|
-
const hint = "
|
|
28
|
-
const iconField = "
|
|
29
|
-
const iconFieldButton = "
|
|
30
|
-
const iconFieldIcon = "
|
|
31
|
-
const iconFieldIconFill = "
|
|
32
|
-
const inlineForm = "
|
|
33
|
-
const isActive = "
|
|
34
|
-
const isDisabled = "
|
|
35
|
-
const isFocused = "
|
|
36
|
-
const isInvalid = "
|
|
37
|
-
const label = "
|
|
38
|
-
const labelDisabled = "
|
|
39
|
-
const labelOptional = "
|
|
40
|
-
const number = "
|
|
41
|
-
const numberField = "
|
|
42
|
-
const radio = "
|
|
43
|
-
const requiredAsterisk = "
|
|
44
|
-
const suffix = "
|
|
45
|
-
const suffixContainer = "
|
|
15
|
+
const checkbox = "QJPOUG_checkbox";
|
|
16
|
+
const compactTextField = "QJPOUG_compactTextField";
|
|
17
|
+
const field = "QJPOUG_field";
|
|
18
|
+
const fieldError = "QJPOUG_fieldError";
|
|
19
|
+
const fieldErrorMessage = "QJPOUG_fieldErrorMessage";
|
|
20
|
+
const fieldSet = "QJPOUG_fieldSet";
|
|
21
|
+
const form = "QJPOUG_form";
|
|
22
|
+
const formGroup = "QJPOUG_formGroup";
|
|
23
|
+
const formIncreasedErrorMargin = "QJPOUG_formIncreasedErrorMargin";
|
|
24
|
+
const formInline = "QJPOUG_formInline";
|
|
25
|
+
const formInput = "QJPOUG_formInput";
|
|
26
|
+
const formInputTiny = "QJPOUG_formInputTiny";
|
|
27
|
+
const hint = "QJPOUG_hint";
|
|
28
|
+
const iconField = "QJPOUG_iconField";
|
|
29
|
+
const iconFieldButton = "QJPOUG_iconFieldButton";
|
|
30
|
+
const iconFieldIcon = "QJPOUG_iconFieldIcon";
|
|
31
|
+
const iconFieldIconFill = "QJPOUG_iconFieldIconFill";
|
|
32
|
+
const inlineForm = "QJPOUG_inlineForm";
|
|
33
|
+
const isActive = "QJPOUG_isActive";
|
|
34
|
+
const isDisabled = "QJPOUG_isDisabled";
|
|
35
|
+
const isFocused = "QJPOUG_isFocused";
|
|
36
|
+
const isInvalid = "QJPOUG_isInvalid";
|
|
37
|
+
const label = "QJPOUG_label";
|
|
38
|
+
const labelDisabled = "QJPOUG_labelDisabled";
|
|
39
|
+
const labelOptional = "QJPOUG_labelOptional";
|
|
40
|
+
const number = "QJPOUG_number";
|
|
41
|
+
const numberField = "QJPOUG_numberField";
|
|
42
|
+
const radio = "QJPOUG_radio";
|
|
43
|
+
const requiredAsterisk = "QJPOUG_requiredAsterisk";
|
|
44
|
+
const suffix = "QJPOUG_suffix";
|
|
45
|
+
const suffixContainer = "QJPOUG_suffixContainer";
|
|
46
46
|
const styles = {
|
|
47
47
|
checkbox,
|
|
48
48
|
compactTextField,
|
|
@@ -71,9 +71,9 @@ const styles = {
|
|
|
71
71
|
labelOptional,
|
|
72
72
|
number,
|
|
73
73
|
numberField,
|
|
74
|
-
"numberField-input": "QJPOUG_numberField-
|
|
75
|
-
"numberField-stepper": "QJPOUG_numberField-
|
|
76
|
-
"numberField-stepperContainer": "QJPOUG_numberField-
|
|
74
|
+
"numberField-input": "QJPOUG_numberField-input",
|
|
75
|
+
"numberField-stepper": "QJPOUG_numberField-stepper",
|
|
76
|
+
"numberField-stepperContainer": "QJPOUG_numberField-stepperContainer",
|
|
77
77
|
radio,
|
|
78
78
|
requiredAsterisk,
|
|
79
79
|
suffix,
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root,[data-theme=default]{--lp-component-form-color-text-label-disabled:var(--lp-color-gray-800)}[data-theme=dark]{--lp-component-form-color-text-label-disabled:var(--lp-color-gray-400)}.
|
|
1
|
+
:root,[data-theme=default]{--lp-component-form-color-text-label-disabled:var(--lp-color-gray-800)}[data-theme=dark]{--lp-component-form-color-text-label-disabled:var(--lp-color-gray-400)}.QJPOUG_formGroup{border:none;margin:1.25rem 0;padding:0}.QJPOUG_formIncreasedErrorMargin .QJPOUG_formGroup{margin:1.75rem 0}.QJPOUG_formInline .QJPOUG_formGroup{vertical-align:middle;margin:0;display:inline-block}.QJPOUG_form .QJPOUG_formGroup:first-child{margin-top:0}.QJPOUG_form .QJPOUG_formGroup:last-child{margin-bottom:0}.QJPOUG_formInput{font-size:.8125rem;font-family:var(--lp-font-family-base);line-height:var(--lp-line-height-300);background-color:var(--lp-color-bg-field-base);color:var(--lp-color-text-ui-primary-base);border:1px solid var(--lp-color-border-field-base);border-radius:var(--lp-border-radius-regular);transition:all var(--lp-duration-100)linear;width:100%;height:2rem;padding:.375rem .625rem;display:block}.QJPOUG_formInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}.QJPOUG_formInput.QJPOUG_isFocused,.QJPOUG_formInput:focus{border-color:var(--lp-color-border-field-focus);outline:0;box-shadow:0 0 0 3px #405bff1a}select.QJPOUG_formInput{-webkit-appearance:none;-moz-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:1.25rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:1.25rem}.QJPOUG_suffixContainer .QJPOUG_formInput{border-radius:var(--lp-border-radius-regular)0 0 var(--lp-border-radius-regular);border:none}.QJPOUG_isInvalid .QJPOUG_formInput,.QJPOUG_form .QJPOUG_isInvalid .QJPOUG_formInput,.QJPOUG_form .QJPOUG_isInvalid .Select-control,.QJPOUG_form .QJPOUG_isInvalid .CustomSelect>div{border-color:var(--lp-color-border-field-error)}.QJPOUG_iconField.IconBefore .QJPOUG_formInput{padding-left:1.875rem}.QJPOUG_iconField.IconAfter .QJPOUG_formInput{padding-right:1.875rem}.QJPOUG_iconFieldIcon{position:absolute;top:50%;transform:translateY(-50%)}.QJPOUG_iconField.IconBefore .QJPOUG_iconFieldIcon{left:.625rem}.QJPOUG_iconField.IconAfter .QJPOUG_iconFieldIcon{right:.625rem}.QJPOUG_suffixContainer .QJPOUG_formInput:focus{box-shadow:none}:is(.QJPOUG_inlineForm .QJPOUG_formGroup+.QJPOUG_formGroup,.QJPOUG_inlineForm .QJPOUG_formGroup+[class*=_Button]){margin-left:.625rem}.QJPOUG_label{font-size:.8125rem;font-family:var(--lp-font-family-base);word-break:break-word}.QJPOUG_labelDisabled{color:var(--lp-component-form-color-text-label-disabled)}.QJPOUG_labelOptional{color:var(--lp-color-text-ui-secondary);fill:var(--lp-color-text-ui-secondary);margin-left:.4em}.QJPOUG_compactTextField .QJPOUG_label{color:var(--lp-color-text-ui-primary-base);opacity:0;pointer-events:none;background-color:var(--lp-color-bg-ui-primary);transform-origin:0 0;transition:all var(--lp-duration-100)ease-in-out;z-index:1;padding:0 3px;position:absolute;top:-2px;left:10px}.QJPOUG_formGroup .QJPOUG_label{align-items:center;margin-bottom:.125rem;display:flex}.QJPOUG_formGroup .QJPOUG_label+.QJPOUG_label{margin-top:.3125rem}.QJPOUG_fieldError{color:var(--lp-color-text-feedback-error);font-size:.8125rem}.QJPOUG_fieldError svg{transform:translateY(-1px)}.QJPOUG_formIncreasedErrorMargin .QJPOUG_fieldError{min-height:1.75rem}.QJPOUG_label .QJPOUG_fieldError{float:right}.QJPOUG_form:not(.QJPOUG_inlineForm) .QJPOUG_fieldError{text-align:left;padding-top:.3125rem;display:block}.QJPOUG_formIncreasedErrorMargin:not(.QJPOUG_inlineForm) .QJPOUG_fieldError{padding-top:.0625rem;padding-bottom:.3125rem}.QJPOUG_form .QJPOUG_isInvalid .QJPOUG_label{color:var(--lp-color-text-feedback-error)}.QJPOUG_formInput::placeholder{color:var(--lp-color-text-field-placeholder)}.QJPOUG_formIncreasedErrorMargin .QJPOUG_formGroup.QJPOUG_isInvalid{margin-bottom:0}.QJPOUG_formIncreasedErrorMargin .QJPOUG_formGroup.QJPOUG_isInvalid+.QJPOUG_formGroup{margin-top:0}.QJPOUG_hint{font-size:.8125rem;font-weight:var(--lp-font-weight-regular);color:var(--lp-color-text-ui-secondary);margin-top:.1875rem;display:block}.QJPOUG_field .QJPOUG_hint{color:var(--lp-color-text-ui-secondary);fill:var(--lp-color-text-ui-secondary);margin:0;font-size:.8125rem}.QJPOUG_form .QJPOUG_field label,.QJPOUG_form .QJPOUG_field .QJPOUG_isInvalid label{color:var(--lp-color-text-ui-primary-base)}.QJPOUG_fieldErrorMessage{color:var(--lp-color-text-feedback-error);font-size:.8125rem}.QJPOUG_field.QJPOUG_formGroup{margin:.625rem 0}.QJPOUG_field.QJPOUG_formGroup:first-child{margin-top:0}.QJPOUG_formInput.QJPOUG_isDisabled,input.QJPOUG_formInput:disabled,select.QJPOUG_formInput:disabled,input.QJPOUG_formInput:read-only{opacity:1;background-color:var(--lp-color-bg-field-disabled);color:var(--lp-color-text-field-disabled);border-color:var(--lp-color-border-field-disabled)}.QJPOUG_formInput.QJPOUG_isDisabled:hover,.QJPOUG_formInput:disabled:hover{cursor:not-allowed}textarea.QJPOUG_formInput{resize:none;height:auto;min-height:2.5em}textarea.QJPOUG_formInput:disabled,textarea.QJPOUG_formInput:read-only{opacity:1;color:var(--lp-color-text-field-disabled);background-color:var(--lp-color-bg-field-disabled);border-color:var(--lp-color-border-field-disabled)}input.QJPOUG_formInput::-webkit-autofill{box-shadow:0 0 0 50px var(--lp-color-bg-field-base)inset}input[type=search]::-webkit-search-decoration{display:none}input[type=search]::-webkit-search-cancel-button{display:none}input[type=search]::-webkit-search-results-button{display:none}input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear{width:0;height:0;display:none}input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear{width:0;height:0;display:none}input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}.QJPOUG_formInput[readonly],.QJPOUG_formInput[readonly]:focus{color:var(--lp-color-text-ui-secondary);border-color:var(--lp-color-gray-500);box-shadow:none}.QJPOUG_checkbox{flex-shrink:0;align-self:flex-start;margin-top:.25rem;margin-right:.3125rem}.QJPOUG_radio{margin-right:.3125rem}.QJPOUG_number{min-width:2.8125rem}.QJPOUG_suffixContainer{border:1px solid var(--lp-color-border-field-base);border-radius:var(--lp-border-radius-regular);transition:all .1s linear;display:inline-flex;overflow:hidden}.QJPOUG_suffixContainer:focus-within{border-color:var(--lp-color-border-field-focus);box-shadow:0 0 0 3px #405bff1a}.QJPOUG_suffixContainer .QJPOUG_suffix{background-color:var(--lp-color-bg-field-aside);color:var(--lp-color-text-ui-secondary);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}.QJPOUG_suffix::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.QJPOUG_suffix::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.QJPOUG_suffix[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.QJPOUG_iconFieldIconFill{fill:var(--lp-color-fill-field-base)}[class*=_Popover-target].QJPOUG_iconFieldButton{display:block}.QJPOUG_formInputTiny{height:1.5rem;padding:.0625rem .375rem}.QJPOUG_iconField{position:relative}.QJPOUG_requiredAsterisk{color:var(--lp-color-text-feedback-error)}.QJPOUG_fieldSet{border:none;margin:1.25rem 0;padding:0}.QJPOUG_compactTextField{width:100%;position:relative}.QJPOUG_compactTextField.QJPOUG_isActive .QJPOUG_label{border-radius:var(--lp-border-radius-regular);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}.QJPOUG_numberField{display:flex;position:relative}.QJPOUG_numberField .QJPOUG_numberField-input{padding-right:1.5rem}.QJPOUG_numberField .QJPOUG_numberField-stepperContainer{opacity:0;transition:all var(--lp-duration-100)linear;flex-direction:column;width:1.5rem;display:flex;position:absolute;top:1px;bottom:1px;right:1px}.QJPOUG_numberField .QJPOUG_numberField-stepperContainer .QJPOUG_numberField-stepper{--numberField-stepper-padding:.25rem;--numberField-stepper-border-radius:calc(var(--lp-border-radius-regular) - .0625rem);background-color:var(--lp-color-bg-field-base);cursor:pointer;padding:0 var(--numberField-stepper-padding);border:none;border-radius:0;flex:auto;justify-content:center;align-items:center;min-height:1px;display:flex;overflow:hidden}.QJPOUG_numberField .QJPOUG_numberField-stepperContainer .QJPOUG_numberField-stepper:first-child{border-top-right-radius:var(--numberField-stepper-border-radius);padding-top:var(--numberField-stepper-padding)}.QJPOUG_numberField .QJPOUG_numberField-stepperContainer .QJPOUG_numberField-stepper:last-child{border-bottom-right-radius:var(--numberField-stepper-border-radius);padding-bottom:var(--numberField-stepper-padding)}.QJPOUG_numberField .QJPOUG_numberField-stepperContainer .QJPOUG_numberField-stepper:hover{background-color:var(--lp-color-bg-interactive-secondary-hover)}.QJPOUG_numberField .QJPOUG_numberField-stepperContainer .QJPOUG_numberField-stepper:active{background-color:var(--lp-color-bg-interactive-secondary-active)}.QJPOUG_numberField .QJPOUG_numberField-stepperContainer .QJPOUG_numberField-stepper span:has(svg){color:var(--lp-color-text-ui-primary-base);width:100%}:-webkit-any(.QJPOUG_numberField:hover,.QJPOUG_numberField:has(input:focus)) .QJPOUG_numberField-stepperContainer{opacity:1}:-moz-any(.QJPOUG_numberField:hover,.QJPOUG_numberField:has(input:focus)) .QJPOUG_numberField-stepperContainer{opacity:1}:is(.QJPOUG_numberField:hover,.QJPOUG_numberField:has(input:focus)) .QJPOUG_numberField-stepperContainer{opacity:1}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@launchpad-ui/form",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.11.0",
|
|
4
4
|
"status": "beta",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
"@react-aria/visually-hidden": "3.8.8",
|
|
33
33
|
"@react-stately/numberfield": "3.8.0",
|
|
34
34
|
"classix": "2.1.17",
|
|
35
|
-
"@launchpad-ui/button": "~0.
|
|
36
|
-
"@launchpad-ui/icons": "~0.
|
|
37
|
-
"@launchpad-ui/tokens": "~0.9.
|
|
38
|
-
"@launchpad-ui/tooltip": "~0.
|
|
35
|
+
"@launchpad-ui/button": "~0.12.0",
|
|
36
|
+
"@launchpad-ui/icons": "~0.16.0",
|
|
37
|
+
"@launchpad-ui/tokens": "~0.9.4",
|
|
38
|
+
"@launchpad-ui/tooltip": "~0.9.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "18.2.0",
|