@box/blueprint-web 15.1.1 → 15.2.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/lib-esm/index.css +51 -42
- package/dist/lib-esm/password-input/password-input.js +9 -1
- package/dist/lib-esm/primitives/base-text-input/base-text-input.js +2 -0
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/dist/lib-esm/text-input/text-input.js +9 -1
- package/package.json +3 -3
package/dist/lib-esm/index.css
CHANGED
|
@@ -9620,19 +9620,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9620
9620
|
.bp_page_section_module_pageSectionDivider--c939b{
|
|
9621
9621
|
width:100%;
|
|
9622
9622
|
}
|
|
9623
|
-
|
|
9624
|
-
.bp_password_input_module_passwordInput--b74ce input[type=password],.bp_password_input_module_passwordInput--b74ce input[type=text]{
|
|
9625
|
-
padding-inline-end:2.375rem;
|
|
9626
|
-
}
|
|
9627
|
-
.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce{
|
|
9628
|
-
height:var(--size-6);
|
|
9629
|
-
inset-inline-end:.5rem;
|
|
9630
|
-
width:var(--size-6);
|
|
9631
|
-
}
|
|
9632
|
-
.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:active,.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:hover{
|
|
9633
|
-
background:none;
|
|
9634
|
-
}
|
|
9635
|
-
.bp_base_text_input_module_textInputContainerOuter--8494e[data-modern=false]{
|
|
9623
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false]{
|
|
9636
9624
|
--text-input-border-width:var(--border-1);
|
|
9637
9625
|
--text-input-border-width-focused:var(--border-2);
|
|
9638
9626
|
--text-input-border-width-error:var(--border-2);
|
|
@@ -9671,7 +9659,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9671
9659
|
text-decoration:var(--body-default-text-decoration);
|
|
9672
9660
|
text-transform:var(--body-default-text-case);
|
|
9673
9661
|
}
|
|
9674
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9662
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false] .bp_base_text_input_module_label--403b3{
|
|
9675
9663
|
font-family:var(--body-default-bold-font-family);
|
|
9676
9664
|
font-size:var(--body-default-bold-font-size);
|
|
9677
9665
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -9680,7 +9668,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9680
9668
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
9681
9669
|
text-transform:var(--body-default-bold-text-case);
|
|
9682
9670
|
}
|
|
9683
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9671
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=false] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3{
|
|
9684
9672
|
font-family:var(--body-default-font-family);
|
|
9685
9673
|
font-size:var(--body-default-font-size);
|
|
9686
9674
|
font-weight:var(--body-default-font-weight);
|
|
@@ -9690,7 +9678,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9690
9678
|
text-transform:var(--body-default-text-case);
|
|
9691
9679
|
}
|
|
9692
9680
|
|
|
9693
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9681
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true]{
|
|
9694
9682
|
--text-input-border-width:var(--bp-border-01);
|
|
9695
9683
|
--text-input-border-width-focused:var(--bp-border-02);
|
|
9696
9684
|
--text-input-border-width-error:var(--bp-border-02);
|
|
@@ -9724,17 +9712,17 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9724
9712
|
--text-input-hover-border-color:var(--bp-border-input-border-hover);
|
|
9725
9713
|
font-weight:var(--bp-font-weight-regular);
|
|
9726
9714
|
}
|
|
9727
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9715
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true],.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_label--403b3{
|
|
9728
9716
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
9729
9717
|
font-size:var(--bp-font-size-05);
|
|
9730
9718
|
font-style:normal;
|
|
9731
9719
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
9732
9720
|
line-height:var(--bp-font-line-height-04);
|
|
9733
9721
|
}
|
|
9734
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9722
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_label--403b3{
|
|
9735
9723
|
font-weight:var(--bp-font-weight-bold);
|
|
9736
9724
|
}
|
|
9737
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9725
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3{
|
|
9738
9726
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
9739
9727
|
font-size:var(--bp-font-size-05);
|
|
9740
9728
|
font-style:normal;
|
|
@@ -9743,25 +9731,25 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9743
9731
|
line-height:var(--bp-font-line-height-04);
|
|
9744
9732
|
}
|
|
9745
9733
|
|
|
9746
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9734
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3{
|
|
9747
9735
|
--disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
|
|
9748
9736
|
display:flex;
|
|
9749
9737
|
flex-direction:column;
|
|
9750
9738
|
}
|
|
9751
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9739
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_label--403b3{
|
|
9752
9740
|
color:var(--text-input-label-color);
|
|
9753
9741
|
flex:0 0 fit-content;
|
|
9754
9742
|
width:fit-content;
|
|
9755
9743
|
}
|
|
9756
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9744
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_label--403b3:not(.bp_base_text_input_module_hidden--403b3){
|
|
9757
9745
|
margin-block-end:var(--text-input-row-gap);
|
|
9758
9746
|
}
|
|
9759
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9747
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3{
|
|
9760
9748
|
display:flex;
|
|
9761
9749
|
height:var(--size-10);
|
|
9762
9750
|
position:relative;
|
|
9763
9751
|
}
|
|
9764
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9752
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3{
|
|
9765
9753
|
background:var(--text-input-background);
|
|
9766
9754
|
border:var(--text-input-border-width) solid var(--text-input-border-color);
|
|
9767
9755
|
border-radius:var(--text-input-border-radius);
|
|
@@ -9773,84 +9761,105 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
|
|
|
9773
9761
|
padding-inline:var(--text-input-padding-inline);
|
|
9774
9762
|
width:100%;
|
|
9775
9763
|
}
|
|
9776
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9764
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:hover,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:hover,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:hover{
|
|
9777
9765
|
box-shadow:var(--text-input-box-shadow);
|
|
9778
9766
|
}
|
|
9779
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9767
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3::placeholder,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3::placeholder,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3::placeholder{
|
|
9780
9768
|
color:var(--text-input-placeholder-color);
|
|
9781
9769
|
opacity:1;
|
|
9782
9770
|
}
|
|
9783
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9771
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_error--403b3{
|
|
9784
9772
|
background:var(--text-input-error-background);
|
|
9785
9773
|
border:var(--text-input-border-width-error) solid var(--text-input-error-border-color);
|
|
9786
9774
|
outline:0;
|
|
9787
9775
|
padding-inline-start:var(--text-input-padding-inline-error);
|
|
9788
9776
|
}
|
|
9789
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9777
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3{
|
|
9790
9778
|
background-color:var(--text-input-read-only-background);
|
|
9791
9779
|
border-color:var(--text-input-read-only-border-color);
|
|
9792
9780
|
box-shadow:var(--text-input-box-shadow);
|
|
9793
9781
|
color:var(--text-input-read-only-color);
|
|
9794
9782
|
cursor:default;
|
|
9795
9783
|
}
|
|
9796
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9784
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3:focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3:focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_readOnly--403b3:focus-visible{
|
|
9797
9785
|
border:var(--text-input-border-width-focused) solid var(--text-input-border-color-focus);
|
|
9798
9786
|
}
|
|
9799
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9787
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:disabled,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:disabled,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:disabled{
|
|
9800
9788
|
background:var(--text-input-disabled-background);
|
|
9801
9789
|
border-color:var(--text-input-disabled-border-color);
|
|
9802
9790
|
box-shadow:var(--text-input-box-shadow);
|
|
9803
9791
|
color:var(--text-input-disabled-color);
|
|
9804
9792
|
}
|
|
9805
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9793
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:disabled:hover{
|
|
9806
9794
|
border-color:var(--text-input-border-color);
|
|
9807
9795
|
}
|
|
9808
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9796
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:focus-visible{
|
|
9809
9797
|
background:var(--text-input-focused-background);
|
|
9810
9798
|
border:var(--text-input-border-width-focused) solid var(--text-input-focused-border-color);
|
|
9811
9799
|
outline:0;
|
|
9812
9800
|
padding-inline-start:var(--text-input-padding-inline-focused);
|
|
9813
9801
|
}
|
|
9814
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9802
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:has(+ .bp_base_text_input_module_endIcon--403b3),.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:has(+ .bp_base_text_input_module_endIcon--403b3),.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:has(+ .bp_base_text_input_module_endIcon--403b3){
|
|
9815
9803
|
padding-inline-end:calc(var(--text-input-padding-inline) + var(--end-icon-width) + var(--text-input-icon-padding));
|
|
9816
9804
|
}
|
|
9817
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9805
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:not(:disabled, :focus-visible, .bp_base_text_input_module_error--403b3):hover, .bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:not(:disabled, :focus-visible, .bp_base_text_input_module_error--403b3):hover, .bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:not(:disabled, :focus-visible, .bp_base_text_input_module_error--403b3):hover{
|
|
9818
9806
|
background:var(--text-input-hover-background);
|
|
9819
9807
|
border:var(--border-1) solid var(--text-input-hover-border-color);
|
|
9820
9808
|
}
|
|
9821
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9809
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_startIcon--403b3{
|
|
9822
9810
|
left:calc(var(--text-input-padding-inline) + var(--text-input-border-width));
|
|
9823
9811
|
position:absolute;
|
|
9824
9812
|
top:50%;
|
|
9825
9813
|
transform:translateY(-50%);
|
|
9826
9814
|
}
|
|
9827
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9815
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_startIcon--403b3 + input.bp_base_text_input_module_textInput--403b3{
|
|
9828
9816
|
--text-input-start-icon-space:calc(var(--text-input-icon-padding) + var(--start-icon-width));
|
|
9829
9817
|
padding-inline-start:calc(var(--text-input-padding-inline) + var(--text-input-start-icon-space));
|
|
9830
9818
|
}
|
|
9831
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9819
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_startIcon--403b3 + input.bp_base_text_input_module_textInput--403b3:focus-visible{
|
|
9832
9820
|
padding-inline-start:calc(var(--text-input-padding-inline-focused) + var(--text-input-start-icon-space));
|
|
9833
9821
|
}
|
|
9834
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9822
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_startIcon--403b3 + input.bp_base_text_input_module_textInput--403b3.bp_base_text_input_module_error--403b3{
|
|
9835
9823
|
padding-inline-start:calc(var(--text-input-padding-inline-error) + var(--text-input-start-icon-space));
|
|
9836
9824
|
}
|
|
9837
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9825
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_endIcon--403b3{
|
|
9838
9826
|
position:absolute;
|
|
9839
9827
|
right:calc(var(--text-input-padding-inline) + var(--text-input-border-width));
|
|
9840
9828
|
top:50%;
|
|
9841
9829
|
transform:translateY(-50%);
|
|
9842
9830
|
}
|
|
9843
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9831
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_inlineErrorIcon--403b3{
|
|
9844
9832
|
height:var(--text-input-inline-error-icon-height);
|
|
9845
9833
|
width:var(--text-input-inline-error-icon-width);
|
|
9846
9834
|
}
|
|
9847
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9835
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3.bp_base_text_input_module_disabled--403b3{
|
|
9848
9836
|
opacity:var(--disabled-opacity);
|
|
9849
9837
|
}
|
|
9850
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
9838
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_inlineError--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3 .bp_base_text_input_module_subtext--403b3{
|
|
9851
9839
|
margin-block-start:var(--text-input-inline-error-subtext-block-margin);
|
|
9852
9840
|
}
|
|
9853
9841
|
|
|
9842
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3{
|
|
9843
|
+
transition-duration:var(--bp-duration-short);
|
|
9844
|
+
transition-property:border-color, background-color;
|
|
9845
|
+
transition-timing-function:var(--bp-curve-small-off);
|
|
9846
|
+
}
|
|
9847
|
+
.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:not(:disabled).bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:not(:disabled):focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 .bp_base_text_input_module_textInput--403b3:not(:disabled):hover,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:not(:disabled).bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:not(:disabled):focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=number].bp_base_text_input_module_textInput--403b3:not(:disabled):hover,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:not(:disabled).bp_base_text_input_module_error--403b3,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:not(:disabled):focus-visible,.bp_base_text_input_module_textInputContainerOuter--403b3[data-modern=true][data-bp-animated=true] .bp_base_text_input_module_textInputContainer--403b3 input[type=text].bp_base_text_input_module_textInput--403b3:not(:disabled):hover{
|
|
9848
|
+
transition-timing-function:var(--bp-curve-small-on);
|
|
9849
|
+
}
|
|
9850
|
+
|
|
9851
|
+
.bp_password_input_module_passwordInput--b74ce input[type=password],.bp_password_input_module_passwordInput--b74ce input[type=text]{
|
|
9852
|
+
padding-inline-end:2.375rem;
|
|
9853
|
+
}
|
|
9854
|
+
.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce{
|
|
9855
|
+
height:var(--size-6);
|
|
9856
|
+
inset-inline-end:.5rem;
|
|
9857
|
+
width:var(--size-6);
|
|
9858
|
+
}
|
|
9859
|
+
.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:active,.bp_password_input_module_passwordInput--b74ce .bp_password_input_module_iconButton--b74ce:hover{
|
|
9860
|
+
background:none;
|
|
9861
|
+
}
|
|
9862
|
+
|
|
9854
9863
|
.bp_progress_bar_module_reactAriaProgressBar--43526{
|
|
9855
9864
|
display:grid;
|
|
9856
9865
|
grid-template-areas:"label value" "bar bar";
|
|
@@ -2,11 +2,14 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Hidden, Visible } from '@box/blueprint-web-assets/icons/Line';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useRef, useState, useCallback } from 'react';
|
|
5
|
+
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
|
+
import '../blueprint-configuration-context/consts.js';
|
|
7
|
+
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
8
|
+
import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
|
|
5
9
|
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
6
10
|
import { useForkRef } from '../utils/useForkRef.js';
|
|
7
11
|
import { useUniqueId } from '../utils/useUniqueId.js';
|
|
8
12
|
import styles from './password-input.module.js';
|
|
9
|
-
import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
|
|
10
13
|
|
|
11
14
|
const PasswordInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
12
15
|
const {
|
|
@@ -31,9 +34,14 @@ const PasswordInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
31
34
|
}, [isControlled, onPasswordVisibleChange, passwordVisibleFinal]);
|
|
32
35
|
const inputType = passwordVisibleFinal ? 'text' : 'password';
|
|
33
36
|
const iconButtonAriaLabel = passwordVisibleFinal ? hidePasswordAriaLabel : showPasswordAriaLabel;
|
|
37
|
+
const {
|
|
38
|
+
componentsWithAnimationEnabled
|
|
39
|
+
} = useBlueprintConfiguration();
|
|
40
|
+
const isAnimationEnabled = componentsWithAnimationEnabled.includes('PasswordInput');
|
|
34
41
|
return jsx(BaseTextInput, {
|
|
35
42
|
...rest,
|
|
36
43
|
ref: useForkRef(inputRef, forwardedRef),
|
|
44
|
+
"data-bp-animated": isAnimationEnabled ? 'true' : 'false',
|
|
37
45
|
autoComplete: autocomplete,
|
|
38
46
|
className: clsx(styles.passwordInput, props.className),
|
|
39
47
|
endIcon: jsx(IconButton, {
|
|
@@ -41,6 +41,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
41
41
|
startIcon,
|
|
42
42
|
subtext,
|
|
43
43
|
id,
|
|
44
|
+
'data-bp-animated': animatedDataAttribute,
|
|
44
45
|
...rest
|
|
45
46
|
} = props;
|
|
46
47
|
const uniqueId = useUniqueId('input-');
|
|
@@ -79,6 +80,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
79
80
|
[styles.disabled]: disabled,
|
|
80
81
|
[styles.error]: shouldMarkError
|
|
81
82
|
}, className),
|
|
83
|
+
"data-bp-animated": animatedDataAttribute ?? 'false',
|
|
82
84
|
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
83
85
|
children: [jsx(Label, {
|
|
84
86
|
className: clsx([styles.label], {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--
|
|
2
|
+
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--403b3","label":"bp_base_text_input_module_label--403b3","textInputContainer":"bp_base_text_input_module_textInputContainer--403b3","textInput":"bp_base_text_input_module_textInput--403b3","hidden":"bp_base_text_input_module_hidden--403b3","error":"bp_base_text_input_module_error--403b3","readOnly":"bp_base_text_input_module_readOnly--403b3","endIcon":"bp_base_text_input_module_endIcon--403b3","startIcon":"bp_base_text_input_module_startIcon--403b3","inlineErrorIcon":"bp_base_text_input_module_inlineErrorIcon--403b3","disabled":"bp_base_text_input_module_disabled--403b3","inlineError":"bp_base_text_input_module_inlineError--403b3","subtext":"bp_base_text_input_module_subtext--403b3"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -3,11 +3,14 @@ import { PencilCrossed as PencilCrossed$1 } from '@box/blueprint-web-assets/icon
|
|
|
3
3
|
import { PencilCrossed } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { forwardRef, useRef, useCallback, useMemo, cloneElement } from 'react';
|
|
6
|
+
import '../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
7
|
+
import '../blueprint-configuration-context/consts.js';
|
|
8
|
+
import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
9
|
+
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
10
|
import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
|
|
7
11
|
import { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
|
|
8
12
|
import { useForkRef } from '../utils/useForkRef.js';
|
|
9
13
|
import styles from './text-input.module.js';
|
|
10
|
-
import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
|
|
11
14
|
|
|
12
15
|
const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
13
16
|
const {
|
|
@@ -21,6 +24,10 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
21
24
|
const {
|
|
22
25
|
enableModernizedComponents
|
|
23
26
|
} = useBlueprintModernization();
|
|
27
|
+
const {
|
|
28
|
+
componentsWithAnimationEnabled
|
|
29
|
+
} = useBlueprintConfiguration();
|
|
30
|
+
const isAnimationEnabled = componentsWithAnimationEnabled.includes('TextInput');
|
|
24
31
|
const inputRef = useRef(null);
|
|
25
32
|
const focusInput = useCallback(() => {
|
|
26
33
|
inputRef.current?.focus();
|
|
@@ -61,6 +68,7 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
61
68
|
return jsx(BaseTextInput, {
|
|
62
69
|
...rest,
|
|
63
70
|
ref: useForkRef(inputRef, forwardedRef),
|
|
71
|
+
"data-bp-animated": isAnimationEnabled ? 'true' : 'false',
|
|
64
72
|
className: clsx(styles.textInput, props.className),
|
|
65
73
|
readOnly: readOnly,
|
|
66
74
|
...(endIconLocal ? {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "15.
|
|
3
|
+
"version": "15.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.21",
|
|
49
49
|
"@ariakit/react-core": "0.4.21",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.121.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.121.5",
|
|
51
51
|
"@internationalized/date": "^3.12.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.20.
|
|
80
|
+
"@box/storybook-utils": "^0.20.5",
|
|
81
81
|
"@figma/code-connect": "1.4.4",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|