@box/blueprint-web 12.77.1 → 12.77.3
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"option":"bp_checkbox_module_option--
|
|
2
|
+
var styles = {"option":"bp_checkbox_module_option--60142","checkbox":"bp_checkbox_module_checkbox--60142","indicator":"bp_checkbox_module_indicator--60142","label":"bp_checkbox_module_label--60142","description":"bp_checkbox_module_description--60142","disabled":"bp_checkbox_module_disabled--60142"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1793,12 +1793,13 @@
|
|
|
1793
1793
|
padding-bottom:var(--size-4);
|
|
1794
1794
|
}
|
|
1795
1795
|
|
|
1796
|
-
.bp_checkbox_module_option--
|
|
1796
|
+
.bp_checkbox_module_option--60142[data-modern=false]{
|
|
1797
1797
|
--checkbox-size:var(--size-4);
|
|
1798
1798
|
--checkbox-label-gap:var(--size-3);
|
|
1799
1799
|
--checkbox-description-padding-left:calc(var(--size-4) + var(--size-3));
|
|
1800
1800
|
--checkbox-line-height:var(--body-default-line-height);
|
|
1801
1801
|
--checkbox-surface:var(--surface-checkbox-surface);
|
|
1802
|
+
--checkbox-surface-disabled:var(--surface-checkbox-surface);
|
|
1802
1803
|
--checkbox-border:var(--border-2) solid var(--border-checkbox-border);
|
|
1803
1804
|
--checkbox-radius:var(--radius-1);
|
|
1804
1805
|
--checkbox-outline-focus:var(--outline-focus-on-light);
|
|
@@ -1810,12 +1811,13 @@
|
|
|
1810
1811
|
--checkbox-border-selected-hover:var(--border-2) solid var(--border-checkbox-border-selected-hover);
|
|
1811
1812
|
}
|
|
1812
1813
|
|
|
1813
|
-
.bp_checkbox_module_option--
|
|
1814
|
+
.bp_checkbox_module_option--60142[data-modern=true]{
|
|
1814
1815
|
--checkbox-size:var(--bp-size-040);
|
|
1815
1816
|
--checkbox-label-gap:var(--bp-space-030);
|
|
1816
1817
|
--checkbox-description-padding-left:calc(var(--bp-size-040) + var(--bp-space-030));
|
|
1817
1818
|
--checkbox-line-height:var(--bp-font-line-height-04);
|
|
1818
1819
|
--checkbox-surface:var(--bp-surface-checkbox-surface);
|
|
1820
|
+
--checkbox-surface-disabled:var(--bp-surface-checkbox-surface-disabled);
|
|
1819
1821
|
--checkbox-border:var(--bp-border-02) solid var(--bp-border-checkbox-border);
|
|
1820
1822
|
--checkbox-radius:var(--bp-radius-02);
|
|
1821
1823
|
--checkbox-outline-focus:var(--bp-outline-focus-on-light);
|
|
@@ -1827,7 +1829,7 @@
|
|
|
1827
1829
|
--checkbox-border-selected-hover:var(--bp-border-02) solid var(--bp-border-checkbox-border-selected-hover);
|
|
1828
1830
|
}
|
|
1829
1831
|
|
|
1830
|
-
.bp_checkbox_module_option--
|
|
1832
|
+
.bp_checkbox_module_option--60142{
|
|
1831
1833
|
display:flex;
|
|
1832
1834
|
flex-direction:column;
|
|
1833
1835
|
font-family:var(--body-default-font-family);
|
|
@@ -1839,7 +1841,7 @@
|
|
|
1839
1841
|
text-decoration:var(--body-default-text-decoration);
|
|
1840
1842
|
text-transform:var(--body-default-text-case);
|
|
1841
1843
|
}
|
|
1842
|
-
.bp_checkbox_module_option--
|
|
1844
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142{
|
|
1843
1845
|
all:unset;
|
|
1844
1846
|
align-items:center;
|
|
1845
1847
|
background-color:var(--checkbox-surface);
|
|
@@ -1853,39 +1855,40 @@
|
|
|
1853
1855
|
margin:calc((var(--checkbox-line-height) - var(--checkbox-size))/2) 0 0 0;
|
|
1854
1856
|
width:var(--checkbox-size);
|
|
1855
1857
|
}
|
|
1856
|
-
.bp_checkbox_module_option--
|
|
1858
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142 .bp_checkbox_module_indicator--60142{
|
|
1857
1859
|
display:flex;
|
|
1858
1860
|
transform:scale(0);
|
|
1859
1861
|
transition-duration:.15s;
|
|
1860
1862
|
transition-property:transform;
|
|
1861
1863
|
transition-timing-function:cubic-bezier(0, 0, .6, 1);
|
|
1862
1864
|
}
|
|
1863
|
-
.bp_checkbox_module_option--
|
|
1865
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:focus-visible{
|
|
1864
1866
|
outline:var(--checkbox-border);
|
|
1865
1867
|
outline-offset:var(--checkbox-outline-offset);
|
|
1866
1868
|
}
|
|
1867
|
-
.bp_checkbox_module_option--
|
|
1869
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142[data-disabled]{
|
|
1870
|
+
background-color:var(--checkbox-surface-disabled);
|
|
1868
1871
|
opacity:60%;
|
|
1869
1872
|
}
|
|
1870
|
-
.bp_checkbox_module_option--
|
|
1873
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142[data-state=checked],.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142[data-state=indeterminate]{
|
|
1871
1874
|
background-color:var(--checkbox-surface-selected);
|
|
1872
1875
|
border:var(--checkbox-border-selected);
|
|
1873
1876
|
}
|
|
1874
|
-
.bp_checkbox_module_option--
|
|
1877
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142[data-state=checked] .bp_checkbox_module_indicator--60142,.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142[data-state=indeterminate] .bp_checkbox_module_indicator--60142{
|
|
1875
1878
|
background-color:var(--checkbox-surface-selected);
|
|
1876
1879
|
transform:scale(1);
|
|
1877
1880
|
}
|
|
1878
|
-
.bp_checkbox_module_option--
|
|
1881
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):focus-visible,.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):hover{
|
|
1879
1882
|
border:var(--checkbox-border-hover);
|
|
1880
1883
|
}
|
|
1881
|
-
.bp_checkbox_module_option--
|
|
1884
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):focus-visible[data-state=checked],.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):focus-visible[data-state=indeterminate],.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):hover[data-state=checked],.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):hover[data-state=indeterminate]{
|
|
1882
1885
|
background-color:var(--checkbox-surface-selected-hover);
|
|
1883
1886
|
border:var(--checkbox-border-selected-hover);
|
|
1884
1887
|
}
|
|
1885
|
-
.bp_checkbox_module_option--
|
|
1888
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):focus-visible[data-state=checked] .bp_checkbox_module_indicator--60142,.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):focus-visible[data-state=indeterminate] .bp_checkbox_module_indicator--60142,.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--60142,.bp_checkbox_module_option--60142 .bp_checkbox_module_checkbox--60142:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--60142{
|
|
1886
1889
|
background-color:var(--checkbox-surface-selected-hover);
|
|
1887
1890
|
}
|
|
1888
|
-
.bp_checkbox_module_option--
|
|
1891
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_label--60142{
|
|
1889
1892
|
cursor:pointer;
|
|
1890
1893
|
display:inline-flex;
|
|
1891
1894
|
flex-direction:row;
|
|
@@ -1893,10 +1896,10 @@
|
|
|
1893
1896
|
width:-moz-fit-content;
|
|
1894
1897
|
width:fit-content;
|
|
1895
1898
|
}
|
|
1896
|
-
.bp_checkbox_module_option--
|
|
1899
|
+
.bp_checkbox_module_option--60142 .bp_checkbox_module_description--60142{
|
|
1897
1900
|
padding-left:var(--checkbox-description-padding-left);
|
|
1898
1901
|
}
|
|
1899
|
-
.bp_checkbox_module_option--
|
|
1902
|
+
.bp_checkbox_module_option--60142.bp_checkbox_module_disabled--60142 .bp_checkbox_module_label--60142{
|
|
1900
1903
|
cursor:default;
|
|
1901
1904
|
}
|
|
1902
1905
|
.bp_icon_button_module_iconButton--06ef3[data-modern=false]{
|
|
@@ -8392,7 +8395,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
8392
8395
|
.bp_radio_group_module_radioButton--5b39a:not([data-disabled]):focus-visible[data-state=checked] .bp_radio_group_module_indicator--5b39a,.bp_radio_group_module_radioButton--5b39a:not([data-disabled]):hover[data-state=checked] .bp_radio_group_module_indicator--5b39a{
|
|
8393
8396
|
background-color:var(--surface-radio-surface-selected-hover);
|
|
8394
8397
|
}
|
|
8395
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8398
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71[data-modern=false]{
|
|
8396
8399
|
--radio-tile-background:var(--surface-radiotile-surface);
|
|
8397
8400
|
--radio-tile-border:var(--border-1) solid var(--border-radiotile-border);
|
|
8398
8401
|
--radio-tile-border-radius:var(--radius-3);
|
|
@@ -8404,9 +8407,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
8404
8407
|
--radio-tile-focus-outline:var(--border-2) solid var(--border-input-border-focus);
|
|
8405
8408
|
--radio-tile-focus-outline-offset:var(--border-2);
|
|
8406
8409
|
--radio-tile-checked-focus-outline-offset:var(--border-3);
|
|
8410
|
+
--radio-tile-label-padding-default:var(--space-2);
|
|
8411
|
+
--radio-tile-label-padding-icon-only:var(--space-2);
|
|
8412
|
+
--radio-tile-label-padding-label-only:var(--space-2);
|
|
8407
8413
|
}
|
|
8408
8414
|
|
|
8409
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8415
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71[data-modern=true]{
|
|
8410
8416
|
--radio-tile-background:var(--bp-surface-radio-tile-surface);
|
|
8411
8417
|
--radio-tile-border:var(--bp-border-01) solid var(--bp-border-radio-tile-border);
|
|
8412
8418
|
--radio-tile-border-radius:var(--bp-radius-06);
|
|
@@ -8418,9 +8424,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
8418
8424
|
--radio-tile-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
|
|
8419
8425
|
--radio-tile-focus-outline-offset:var(--bp-border-02);
|
|
8420
8426
|
--radio-tile-checked-focus-outline-offset:var(--bp-border-03);
|
|
8427
|
+
--radio-tile-label-padding-default:var(--bp-space-030);
|
|
8428
|
+
--radio-tile-label-padding-icon-only:var(--bp-space-020);
|
|
8429
|
+
--radio-tile-label-padding-label-only:var(--bp-space-020) var(--bp-space-030);
|
|
8421
8430
|
}
|
|
8422
8431
|
|
|
8423
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8432
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71{
|
|
8424
8433
|
background-color:var(--radio-tile-background);
|
|
8425
8434
|
border:var(--radio-tile-border);
|
|
8426
8435
|
border-radius:var(--radio-tile-border-radius);
|
|
@@ -8436,35 +8445,35 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
8436
8445
|
-webkit-user-select:none;
|
|
8437
8446
|
user-select:none;
|
|
8438
8447
|
}
|
|
8439
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8448
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71 .bp_radio_tiles_option_module_icon--07c71{
|
|
8440
8449
|
display:inline-flex;
|
|
8441
8450
|
}
|
|
8442
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8451
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71 .bp_radio_tiles_option_module_icon--07c71 > svg > path{
|
|
8443
8452
|
fill:var(--radio-tile-icon-color);
|
|
8444
8453
|
}
|
|
8445
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8454
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71.bp_radio_tiles_option_module_disabled--07c71{
|
|
8446
8455
|
opacity:.6;
|
|
8447
8456
|
}
|
|
8448
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8457
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71:has(:focus-visible){
|
|
8449
8458
|
outline:var(--radio-tile-focus-outline);
|
|
8450
8459
|
outline-offset:var(--radio-tile-focus-outline-offset);
|
|
8451
8460
|
}
|
|
8452
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8461
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71.bp_radio_tiles_option_module_checked--07c71{
|
|
8453
8462
|
background-color:var(--radio-tile-checked-background);
|
|
8454
8463
|
border-color:#0000;
|
|
8455
8464
|
box-shadow:var(--radio-tile-checked-box-shadow);
|
|
8456
8465
|
}
|
|
8457
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8466
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71.bp_radio_tiles_option_module_checked--07c71:focus-within{
|
|
8458
8467
|
outline-offset:var(--radio-tile-checked-focus-outline-offset);
|
|
8459
8468
|
}
|
|
8460
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8469
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71.bp_radio_tiles_option_module_checked--07c71 .bp_radio_tiles_option_module_icon--07c71 > svg > path{
|
|
8461
8470
|
fill:var(--icon-icon-blue);
|
|
8462
8471
|
}
|
|
8463
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8472
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71:hover:not(.bp_radio_tiles_option_module_disabled--07c71, .bp_radio_tiles_option_module_checked--07c71){
|
|
8464
8473
|
background-color:var(--radio-tile-hover-background);
|
|
8465
8474
|
border:var(--radio-tile-hover-border);
|
|
8466
8475
|
}
|
|
8467
|
-
.bp_radio_tiles_option_module_radioTileOption--
|
|
8476
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71 > label{
|
|
8468
8477
|
align-items:center;
|
|
8469
8478
|
box-sizing:border-box;
|
|
8470
8479
|
cursor:inherit;
|
|
@@ -8472,11 +8481,17 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
8472
8481
|
flex-direction:column;
|
|
8473
8482
|
gap:var(--space-2);
|
|
8474
8483
|
justify-content:center;
|
|
8475
|
-
padding:var(--
|
|
8484
|
+
padding:var(--radio-tile-label-padding-default);
|
|
8476
8485
|
width:100%;
|
|
8477
8486
|
}
|
|
8487
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71 > label.bp_radio_tiles_option_module_iconOnly--07c71{
|
|
8488
|
+
padding:var(--radio-tile-label-padding-icon-only);
|
|
8489
|
+
}
|
|
8490
|
+
.bp_radio_tiles_option_module_radioTileOption--07c71 > label.bp_radio_tiles_option_module_labelOnly--07c71{
|
|
8491
|
+
padding:var(--radio-tile-label-padding-label-only);
|
|
8492
|
+
}
|
|
8478
8493
|
|
|
8479
|
-
.bp_radio_tiles_option_module_radioTileLabel--
|
|
8494
|
+
.bp_radio_tiles_option_module_radioTileLabel--07c71{
|
|
8480
8495
|
max-width:100%;
|
|
8481
8496
|
overflow:hidden;
|
|
8482
8497
|
text-align:center;
|
|
@@ -55,6 +55,10 @@ const RadioTilesOption = function RadioTilesOption({
|
|
|
55
55
|
className: radioTileClassNames,
|
|
56
56
|
"data-modern": enableModernizedComponents,
|
|
57
57
|
children: jsxs("label", {
|
|
58
|
+
className: clsx({
|
|
59
|
+
[styles.iconOnly]: !label,
|
|
60
|
+
[styles.labelOnly]: !icon && !children && label
|
|
61
|
+
}),
|
|
58
62
|
children: [jsx(VisuallyHidden, {
|
|
59
63
|
children: jsx("input", {
|
|
60
64
|
checked: isSelected,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"radioTileOption":"bp_radio_tiles_option_module_radioTileOption--
|
|
2
|
+
var styles = {"radioTileOption":"bp_radio_tiles_option_module_radioTileOption--07c71","icon":"bp_radio_tiles_option_module_icon--07c71","disabled":"bp_radio_tiles_option_module_disabled--07c71","checked":"bp_radio_tiles_option_module_checked--07c71","iconOnly":"bp_radio_tiles_option_module_iconOnly--07c71","labelOnly":"bp_radio_tiles_option_module_labelOnly--07c71","radioTileLabel":"bp_radio_tiles_option_module_radioTileLabel--07c71"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "12.77.
|
|
3
|
+
"version": "12.77.3",
|
|
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.15",
|
|
49
49
|
"@ariakit/react-core": "0.4.15",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.69.0",
|
|
51
51
|
"@internationalized/date": "^3.7.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.14.
|
|
80
|
+
"@box/storybook-utils": "^0.14.5",
|
|
81
81
|
"@types/react": "^18.0.0",
|
|
82
82
|
"@types/react-dom": "^18.0.0",
|
|
83
83
|
"react": "^18.3.0",
|