@launchpad-ui/form 0.15.19 → 0.15.21
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 +30 -30
- package/dist/index.js +30 -30
- package/dist/style.css +1 -1
- package/package.json +8 -6
package/dist/index.es.js
CHANGED
|
@@ -10,33 +10,33 @@ import { useLocale } from "react-aria/I18nProvider";
|
|
|
10
10
|
import { useButton } from "react-aria/useButton";
|
|
11
11
|
import { useNumberField as useNumberField$1 } from "react-aria/useNumberField";
|
|
12
12
|
import { useNumberFieldState } from "react-stately/useNumberFieldState";
|
|
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 isActive = "
|
|
31
|
-
const isInvalid = "
|
|
32
|
-
const label = "
|
|
33
|
-
const labelDisabled = "
|
|
34
|
-
const labelOptional = "
|
|
35
|
-
const numberField = "
|
|
36
|
-
const radio = "
|
|
37
|
-
const requiredAsterisk = "
|
|
38
|
-
const suffix = "
|
|
39
|
-
const suffixContainer = "
|
|
13
|
+
const checkbox = "w4hrkW_checkbox";
|
|
14
|
+
const compactTextField = "w4hrkW_compactTextField";
|
|
15
|
+
const field = "w4hrkW_field";
|
|
16
|
+
const fieldError = "w4hrkW_fieldError";
|
|
17
|
+
const fieldErrorMessage = "w4hrkW_fieldErrorMessage";
|
|
18
|
+
const fieldSet = "w4hrkW_fieldSet";
|
|
19
|
+
const form = "w4hrkW_form";
|
|
20
|
+
const formGroup = "w4hrkW_formGroup";
|
|
21
|
+
const formIncreasedErrorMargin = "w4hrkW_formIncreasedErrorMargin";
|
|
22
|
+
const formInline = "w4hrkW_formInline";
|
|
23
|
+
const formInput = "w4hrkW_formInput";
|
|
24
|
+
const formInputTiny = "w4hrkW_formInputTiny";
|
|
25
|
+
const hint = "w4hrkW_hint";
|
|
26
|
+
const iconField = "w4hrkW_iconField";
|
|
27
|
+
const iconFieldButton = "w4hrkW_iconFieldButton";
|
|
28
|
+
const iconFieldIcon = "w4hrkW_iconFieldIcon";
|
|
29
|
+
const iconFieldIconFill = "w4hrkW_iconFieldIconFill";
|
|
30
|
+
const isActive = "w4hrkW_isActive";
|
|
31
|
+
const isInvalid = "w4hrkW_isInvalid";
|
|
32
|
+
const label = "w4hrkW_label";
|
|
33
|
+
const labelDisabled = "w4hrkW_labelDisabled";
|
|
34
|
+
const labelOptional = "w4hrkW_labelOptional";
|
|
35
|
+
const numberField = "w4hrkW_numberField";
|
|
36
|
+
const radio = "w4hrkW_radio";
|
|
37
|
+
const requiredAsterisk = "w4hrkW_requiredAsterisk";
|
|
38
|
+
const suffix = "w4hrkW_suffix";
|
|
39
|
+
const suffixContainer = "w4hrkW_suffixContainer";
|
|
40
40
|
const styles = {
|
|
41
41
|
checkbox,
|
|
42
42
|
compactTextField,
|
|
@@ -61,9 +61,9 @@ const styles = {
|
|
|
61
61
|
labelDisabled,
|
|
62
62
|
labelOptional,
|
|
63
63
|
numberField,
|
|
64
|
-
"numberField-input": "
|
|
65
|
-
"numberField-stepper": "
|
|
66
|
-
"numberField-stepperContainer": "
|
|
64
|
+
"numberField-input": "w4hrkW_numberField-input",
|
|
65
|
+
"numberField-stepper": "w4hrkW_numberField-stepper",
|
|
66
|
+
"numberField-stepperContainer": "w4hrkW_numberField-stepperContainer",
|
|
67
67
|
radio,
|
|
68
68
|
requiredAsterisk,
|
|
69
69
|
suffix,
|
package/dist/index.js
CHANGED
|
@@ -12,33 +12,33 @@ const I18nProvider = require("react-aria/I18nProvider");
|
|
|
12
12
|
const useButton = require("react-aria/useButton");
|
|
13
13
|
const useNumberField$1 = require("react-aria/useNumberField");
|
|
14
14
|
const useNumberFieldState = require("react-stately/useNumberFieldState");
|
|
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 isActive = "
|
|
33
|
-
const isInvalid = "
|
|
34
|
-
const label = "
|
|
35
|
-
const labelDisabled = "
|
|
36
|
-
const labelOptional = "
|
|
37
|
-
const numberField = "
|
|
38
|
-
const radio = "
|
|
39
|
-
const requiredAsterisk = "
|
|
40
|
-
const suffix = "
|
|
41
|
-
const suffixContainer = "
|
|
15
|
+
const checkbox = "w4hrkW_checkbox";
|
|
16
|
+
const compactTextField = "w4hrkW_compactTextField";
|
|
17
|
+
const field = "w4hrkW_field";
|
|
18
|
+
const fieldError = "w4hrkW_fieldError";
|
|
19
|
+
const fieldErrorMessage = "w4hrkW_fieldErrorMessage";
|
|
20
|
+
const fieldSet = "w4hrkW_fieldSet";
|
|
21
|
+
const form = "w4hrkW_form";
|
|
22
|
+
const formGroup = "w4hrkW_formGroup";
|
|
23
|
+
const formIncreasedErrorMargin = "w4hrkW_formIncreasedErrorMargin";
|
|
24
|
+
const formInline = "w4hrkW_formInline";
|
|
25
|
+
const formInput = "w4hrkW_formInput";
|
|
26
|
+
const formInputTiny = "w4hrkW_formInputTiny";
|
|
27
|
+
const hint = "w4hrkW_hint";
|
|
28
|
+
const iconField = "w4hrkW_iconField";
|
|
29
|
+
const iconFieldButton = "w4hrkW_iconFieldButton";
|
|
30
|
+
const iconFieldIcon = "w4hrkW_iconFieldIcon";
|
|
31
|
+
const iconFieldIconFill = "w4hrkW_iconFieldIconFill";
|
|
32
|
+
const isActive = "w4hrkW_isActive";
|
|
33
|
+
const isInvalid = "w4hrkW_isInvalid";
|
|
34
|
+
const label = "w4hrkW_label";
|
|
35
|
+
const labelDisabled = "w4hrkW_labelDisabled";
|
|
36
|
+
const labelOptional = "w4hrkW_labelOptional";
|
|
37
|
+
const numberField = "w4hrkW_numberField";
|
|
38
|
+
const radio = "w4hrkW_radio";
|
|
39
|
+
const requiredAsterisk = "w4hrkW_requiredAsterisk";
|
|
40
|
+
const suffix = "w4hrkW_suffix";
|
|
41
|
+
const suffixContainer = "w4hrkW_suffixContainer";
|
|
42
42
|
const styles = {
|
|
43
43
|
checkbox,
|
|
44
44
|
compactTextField,
|
|
@@ -63,9 +63,9 @@ const styles = {
|
|
|
63
63
|
labelDisabled,
|
|
64
64
|
labelOptional,
|
|
65
65
|
numberField,
|
|
66
|
-
"numberField-input": "
|
|
67
|
-
"numberField-stepper": "
|
|
68
|
-
"numberField-stepperContainer": "
|
|
66
|
+
"numberField-input": "w4hrkW_numberField-input",
|
|
67
|
+
"numberField-stepper": "w4hrkW_numberField-stepper",
|
|
68
|
+
"numberField-stepperContainer": "w4hrkW_numberField-stepperContainer",
|
|
69
69
|
radio,
|
|
70
70
|
requiredAsterisk,
|
|
71
71
|
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)}.w4hrkW_formGroup{border:none;margin:1.25rem 0;padding:0}.w4hrkW_formIncreasedErrorMargin .w4hrkW_formGroup{margin:1.75rem 0}.w4hrkW_formInline .w4hrkW_formGroup{vertical-align:middle;margin:0;display:inline-block}.w4hrkW_form .w4hrkW_formGroup:first-child{margin-top:0}.w4hrkW_form .w4hrkW_formGroup:last-child{margin-bottom:0}.w4hrkW_formInput{width:100%;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;height:2rem;padding:.375rem .625rem;display:block}.w4hrkW_formInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}.w4hrkW_formInput.w4hrkW_isFocused,.w4hrkW_formInput:focus{border-color:var(--lp-color-border-field-focus);outline:0;box-shadow:0 0 0 3px #405bff1a}select.w4hrkW_formInput{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}.w4hrkW_suffixContainer .w4hrkW_formInput{border-radius:var(--lp-border-radius-regular) 0 0 var(--lp-border-radius-regular);border:none}.w4hrkW_isInvalid .w4hrkW_formInput,.w4hrkW_form .w4hrkW_isInvalid .w4hrkW_formInput,.w4hrkW_form .w4hrkW_isInvalid .Select-control,.w4hrkW_form .w4hrkW_isInvalid .CustomSelect>div{border-color:var(--lp-color-border-field-error)}.w4hrkW_iconField.IconBefore .w4hrkW_formInput{padding-left:1.875rem}.w4hrkW_iconField.IconAfter .w4hrkW_formInput{padding-right:1.875rem}.w4hrkW_iconFieldIcon{position:absolute;top:50%;transform:translateY(-50%)}.w4hrkW_iconField.IconBefore .w4hrkW_iconFieldIcon{left:.625rem}.w4hrkW_iconField.IconAfter .w4hrkW_iconFieldIcon{right:.625rem}.w4hrkW_suffixContainer .w4hrkW_formInput:focus{box-shadow:none}:is(.w4hrkW_inlineForm .w4hrkW_formGroup+.w4hrkW_formGroup,.w4hrkW_inlineForm .w4hrkW_formGroup+[data-button],.w4hrkW_inlineForm .w4hrkW_formGroup+[data-button-group]){margin-left:.625rem}.w4hrkW_label{font-size:.8125rem;font-family:var(--lp-font-family-base);word-break:break-word}.w4hrkW_labelDisabled{color:var(--lp-component-form-color-text-label-disabled)}.w4hrkW_labelOptional{color:var(--lp-color-text-ui-secondary);fill:var(--lp-color-text-ui-secondary);margin-left:.4em}.w4hrkW_compactTextField .w4hrkW_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}.w4hrkW_formGroup .w4hrkW_label{align-items:center;margin-bottom:.125rem;display:flex}.w4hrkW_formGroup .w4hrkW_label+.w4hrkW_label{margin-top:.3125rem}.w4hrkW_fieldError{color:var(--lp-color-text-feedback-error);font-size:.8125rem}.w4hrkW_fieldError svg{transform:translateY(-1px)}.w4hrkW_formIncreasedErrorMargin .w4hrkW_fieldError{min-height:1.75rem}.w4hrkW_label .w4hrkW_fieldError{float:right}.w4hrkW_form:not(.w4hrkW_inlineForm) .w4hrkW_fieldError{text-align:left;padding-top:.3125rem;display:block}.w4hrkW_formIncreasedErrorMargin:not(.w4hrkW_inlineForm) .w4hrkW_fieldError{padding-top:.0625rem;padding-bottom:.3125rem}.w4hrkW_form .w4hrkW_isInvalid .w4hrkW_label{color:var(--lp-color-text-feedback-error)}.w4hrkW_formInput::placeholder{color:var(--lp-color-text-field-placeholder)}.w4hrkW_formIncreasedErrorMargin .w4hrkW_formGroup.w4hrkW_isInvalid{margin-bottom:0}.w4hrkW_formIncreasedErrorMargin .w4hrkW_formGroup.w4hrkW_isInvalid+.w4hrkW_formGroup{margin-top:0}.w4hrkW_hint{font-size:.8125rem;font-weight:var(--lp-font-weight-regular);color:var(--lp-color-text-ui-secondary);margin-top:.1875rem;display:block}.w4hrkW_field .w4hrkW_hint{color:var(--lp-color-text-ui-secondary);fill:var(--lp-color-text-ui-secondary);margin:0;font-size:.8125rem}.w4hrkW_form .w4hrkW_field label,.w4hrkW_form .w4hrkW_field .w4hrkW_isInvalid label{color:var(--lp-color-text-ui-primary-base)}.w4hrkW_fieldErrorMessage{color:var(--lp-color-text-feedback-error);font-size:.8125rem}.w4hrkW_field.w4hrkW_formGroup{margin:.625rem 0}.w4hrkW_field.w4hrkW_formGroup:first-child{margin-top:0}.w4hrkW_formInput.w4hrkW_isDisabled,input.w4hrkW_formInput:disabled,select.w4hrkW_formInput:disabled,input.w4hrkW_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)}.w4hrkW_formInput.w4hrkW_isDisabled:hover,.w4hrkW_formInput:disabled:hover{cursor:not-allowed}textarea.w4hrkW_formInput{resize:none;height:auto;min-height:2.5em}textarea.w4hrkW_formInput:disabled,textarea.w4hrkW_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.w4hrkW_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}.w4hrkW_formInput[readonly],.w4hrkW_formInput[readonly]:focus{color:var(--lp-color-text-ui-secondary);border-color:var(--lp-color-gray-500);box-shadow:none}.w4hrkW_checkbox{flex-shrink:0;align-self:flex-start;margin-top:.25rem;margin-right:.3125rem}.w4hrkW_radio{margin-right:.3125rem}.w4hrkW_number{min-width:2.8125rem}.w4hrkW_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}.w4hrkW_suffixContainer:focus-within{border-color:var(--lp-color-border-field-focus);box-shadow:0 0 0 3px #405bff1a}.w4hrkW_suffixContainer .w4hrkW_suffix{background-color:var(--lightningcss-light,var(--lp-color-bg-ui-secondary))var(--lightningcss-dark,var(--lp-color-bg-ui-primary));color:var(--lp-color-text-ui-secondary);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}.w4hrkW_suffix::-webkit-outer-spin-button{appearance:none;margin:0}.w4hrkW_suffix::-webkit-inner-spin-button{appearance:none;margin:0}.w4hrkW_suffix[type=number]{appearance:textfield}.w4hrkW_iconFieldIconFill{fill:var(--lp-color-fill-field-base)}[data-popover-target].w4hrkW_iconFieldButton{display:block}.w4hrkW_formInputTiny{height:1.5rem;padding:.0625rem .375rem}.w4hrkW_iconField{position:relative}.w4hrkW_requiredAsterisk{color:var(--lp-color-text-feedback-error)}.w4hrkW_fieldSet{border:none;margin:1.25rem 0;padding:0}.w4hrkW_compactTextField{width:100%;position:relative}.w4hrkW_compactTextField.w4hrkW_isActive .w4hrkW_label{border-radius:var(--lp-border-radius-regular);opacity:1;pointer-events:auto;transform:translateY(-8px)scale(.9)}.w4hrkW_numberField{display:flex;position:relative}.w4hrkW_numberField .w4hrkW_numberField-input{padding-right:1.5rem}.w4hrkW_numberField .w4hrkW_numberField-stepperContainer{opacity:0;width:1.5rem;transition:all var(--lp-duration-100) linear;flex-direction:column;display:flex;position:absolute;top:1px;bottom:1px;right:1px}.w4hrkW_numberField .w4hrkW_numberField-stepperContainer .w4hrkW_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}.w4hrkW_numberField .w4hrkW_numberField-stepperContainer .w4hrkW_numberField-stepper:first-child{border-top-right-radius:var(--numberField-stepper-border-radius);padding-top:var(--numberField-stepper-padding)}.w4hrkW_numberField .w4hrkW_numberField-stepperContainer .w4hrkW_numberField-stepper:last-child{border-bottom-right-radius:var(--numberField-stepper-border-radius);padding-bottom:var(--numberField-stepper-padding)}.w4hrkW_numberField .w4hrkW_numberField-stepperContainer .w4hrkW_numberField-stepper:hover{background-color:var(--lp-color-bg-interactive-secondary-hover)}.w4hrkW_numberField .w4hrkW_numberField-stepperContainer .w4hrkW_numberField-stepper:active{background-color:var(--lp-color-bg-interactive-secondary-active)}.w4hrkW_numberField .w4hrkW_numberField-stepperContainer .w4hrkW_numberField-stepper span:has(svg){width:100%;color:var(--lp-color-text-ui-primary-base)}.w4hrkW_numberField:has(input:focus) .w4hrkW_numberField-stepperContainer{opacity:1}.w4hrkW_numberField:hover .w4hrkW_numberField-stepperContainer{opacity:1}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@launchpad-ui/form",
|
|
3
|
-
"version": "0.15.
|
|
3
|
+
"version": "0.15.21",
|
|
4
4
|
"description": "Elements for composing forms, such as input fields, labels, radio buttons, etc.",
|
|
5
5
|
"repository": "launchdarkly/launchpad-ui",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -21,15 +21,17 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"classix": "2.2.0",
|
|
23
23
|
"react-stately": "3.48.0",
|
|
24
|
-
"@launchpad-ui/button": "~0.15.
|
|
25
|
-
"@launchpad-ui/icons": "~0.26.
|
|
26
|
-
"@launchpad-ui/tokens": "~0.
|
|
27
|
-
"@launchpad-ui/tooltip": "~0.12.
|
|
24
|
+
"@launchpad-ui/button": "~0.15.22",
|
|
25
|
+
"@launchpad-ui/icons": "~0.26.7",
|
|
26
|
+
"@launchpad-ui/tokens": "~0.19.0",
|
|
27
|
+
"@launchpad-ui/tooltip": "~0.12.9"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"react": "19.2.8",
|
|
31
31
|
"react-aria": "3.50.0",
|
|
32
|
-
"react-dom": "19.2.8"
|
|
32
|
+
"react-dom": "19.2.8",
|
|
33
|
+
"@launchpad-ui/story-utils": "~0.0.0",
|
|
34
|
+
"@launchpad-ui/test-utils": "~0.0.0"
|
|
33
35
|
},
|
|
34
36
|
"peerDependencies": {
|
|
35
37
|
"react": "^19",
|