@salt-ds/core 1.13.3 → 1.13.4
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/css/salt-core.css +8 -63
- package/dist-cjs/accordion/AccordionHeader.css.js +1 -1
- package/dist-cjs/avatar/Avatar.css.js +1 -1
- package/dist-cjs/button/Button.css.js +1 -1
- package/dist-cjs/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-cjs/input/Input.css.js +1 -1
- package/dist-cjs/link/Link.css.js +1 -1
- package/dist-cjs/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-cjs/status-indicator/StatusIndicator.css.js +1 -1
- package/dist-cjs/switch/Switch.css.js +1 -1
- package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js +1 -1
- package/dist-cjs/tooltip/Tooltip.js.map +1 -1
- package/dist-cjs/tooltip/useTooltip.js +1 -6
- package/dist-cjs/tooltip/useTooltip.js.map +1 -1
- package/dist-cjs/utils/marginMiddleware.js +2 -2
- package/dist-cjs/utils/marginMiddleware.js.map +1 -1
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js +12 -4
- package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-es/accordion/AccordionHeader.css.js +1 -1
- package/dist-es/avatar/Avatar.css.js +1 -1
- package/dist-es/button/Button.css.js +1 -1
- package/dist-es/checkbox/CheckboxIcon.css.js +1 -1
- package/dist-es/input/Input.css.js +1 -1
- package/dist-es/link/Link.css.js +1 -1
- package/dist-es/radio-button/RadioButtonIcon.css.js +1 -1
- package/dist-es/status-indicator/StatusIndicator.css.js +1 -1
- package/dist-es/switch/Switch.css.js +1 -1
- package/dist-es/toggle-button/ToggleButton.css.js +1 -1
- package/dist-es/tooltip/Tooltip.js +1 -1
- package/dist-es/tooltip/Tooltip.js.map +1 -1
- package/dist-es/tooltip/useTooltip.js +1 -6
- package/dist-es/tooltip/useTooltip.js.map +1 -1
- package/dist-es/utils/marginMiddleware.js +2 -2
- package/dist-es/utils/marginMiddleware.js.map +1 -1
- package/dist-es/utils/useFloatingUI/useFloatingUI.js +12 -4
- package/dist-es/utils/useFloatingUI/useFloatingUI.js.map +1 -1
- package/dist-types/tooltip/useTooltip.d.ts +7 -13
- package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts +11 -6
- package/package.json +2 -2
package/css/salt-core.css
CHANGED
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
font-family: var(--salt-text-fontFamily);
|
|
33
33
|
color: var(--salt-content-primary-foreground);
|
|
34
34
|
font-weight: var(--salt-text-fontWeight-strong);
|
|
35
|
-
--saltIcon-color: currentcolor;
|
|
36
35
|
text-align: left;
|
|
37
36
|
cursor: var(--salt-actionable-cursor-hover);
|
|
38
37
|
}
|
|
@@ -43,7 +42,6 @@
|
|
|
43
42
|
.saltAccordionHeader:disabled {
|
|
44
43
|
background: var(--salt-actionable-secondary-background);
|
|
45
44
|
color: var(--salt-content-primary-foreground-disabled);
|
|
46
|
-
--saltIcon-fill: var(--salt-content-primary-foreground-disabled);
|
|
47
45
|
}
|
|
48
46
|
.saltAccordionHeader-icon {
|
|
49
47
|
transition: transform var(--salt-duration-perceptible) ease-in-out;
|
|
@@ -114,8 +112,7 @@
|
|
|
114
112
|
--avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));
|
|
115
113
|
--avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));
|
|
116
114
|
--avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));
|
|
117
|
-
--saltIcon-
|
|
118
|
-
--salt-size-icon: calc(var(--avatar-container-size) / 2);
|
|
115
|
+
--saltIcon-size: calc(var(--avatar-container-size) / 2);
|
|
119
116
|
}
|
|
120
117
|
.saltAvatar {
|
|
121
118
|
line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));
|
|
@@ -261,19 +258,6 @@
|
|
|
261
258
|
--button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);
|
|
262
259
|
--button-text-color-hover: var(--salt-actionable-cta-foreground-hover);
|
|
263
260
|
}
|
|
264
|
-
.saltButton-cta {
|
|
265
|
-
--saltIcon-color: var(--salt-actionable-cta-foreground);
|
|
266
|
-
}
|
|
267
|
-
.saltButton-cta:hover {
|
|
268
|
-
--saltIcon-color: var(--salt-actionable-cta-foreground-hover);
|
|
269
|
-
}
|
|
270
|
-
.saltButton-cta:active,
|
|
271
|
-
.saltButton-cta.saltButton-active {
|
|
272
|
-
--saltIcon-color: var(--salt-actionable-cta-foreground-active);
|
|
273
|
-
}
|
|
274
|
-
.saltButton-cta.saltButton-disabled {
|
|
275
|
-
--saltIcon-color: var(--salt-actionable-cta-foreground-disabled);
|
|
276
|
-
}
|
|
277
261
|
.saltButton-primary {
|
|
278
262
|
--button-background: var(--salt-actionable-primary-background);
|
|
279
263
|
--button-background-active: var(--salt-actionable-primary-background-active);
|
|
@@ -284,19 +268,6 @@
|
|
|
284
268
|
--button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);
|
|
285
269
|
--button-text-color-hover: var(--salt-actionable-primary-foreground-hover);
|
|
286
270
|
}
|
|
287
|
-
.saltButton-primary {
|
|
288
|
-
--saltIcon-color: var(--salt-actionable-primary-foreground);
|
|
289
|
-
}
|
|
290
|
-
.saltButton-primary:hover {
|
|
291
|
-
--saltIcon-color: var(--salt-actionable-primary-foreground-hover);
|
|
292
|
-
}
|
|
293
|
-
.saltButton-primary:active,
|
|
294
|
-
.saltButton-primary.saltButton-active {
|
|
295
|
-
--saltIcon-color: var(--salt-actionable-primary-foreground-active);
|
|
296
|
-
}
|
|
297
|
-
.saltButton-primary.saltButton-disabled {
|
|
298
|
-
--saltIcon-color: var(--salt-actionable-primary-foreground-disabled);
|
|
299
|
-
}
|
|
300
271
|
.saltButton-secondary {
|
|
301
272
|
--button-background: var(--salt-actionable-secondary-background);
|
|
302
273
|
--button-background-active: var(--salt-actionable-secondary-background-active);
|
|
@@ -307,19 +278,6 @@
|
|
|
307
278
|
--button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);
|
|
308
279
|
--button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);
|
|
309
280
|
}
|
|
310
|
-
.saltButton-secondary {
|
|
311
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground);
|
|
312
|
-
}
|
|
313
|
-
.saltButton-secondary:hover {
|
|
314
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground-hover);
|
|
315
|
-
}
|
|
316
|
-
.saltButton-secondary:active,
|
|
317
|
-
.saltButton-secondary.saltButton-active {
|
|
318
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground-active);
|
|
319
|
-
}
|
|
320
|
-
.saltButton-secondary.saltButton-disabled {
|
|
321
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);
|
|
322
|
-
}
|
|
323
281
|
.saltButton {
|
|
324
282
|
align-items: var(--saltButton-alignItems, center);
|
|
325
283
|
appearance: none;
|
|
@@ -616,7 +574,6 @@ a:link .saltInteractableCard * {
|
|
|
616
574
|
color: var(--salt-selectable-foreground);
|
|
617
575
|
background: var(--salt-container-primary-background);
|
|
618
576
|
position: relative;
|
|
619
|
-
--saltIcon-color: currentColor;
|
|
620
577
|
--saltIcon-size: 100%;
|
|
621
578
|
display: flex;
|
|
622
579
|
}
|
|
@@ -981,6 +938,7 @@ a:link .saltInteractableCard * {
|
|
|
981
938
|
background: var(--salt-content-foreground-highlight);
|
|
982
939
|
}
|
|
983
940
|
.saltInput-input::placeholder {
|
|
941
|
+
color: var(--salt-content-secondary-foreground);
|
|
984
942
|
font-weight: var(--salt-text-fontWeight-small);
|
|
985
943
|
}
|
|
986
944
|
.saltInput-focused {
|
|
@@ -1083,20 +1041,16 @@ a:link .saltInteractableCard * {
|
|
|
1083
1041
|
margin-bottom: -2px;
|
|
1084
1042
|
}
|
|
1085
1043
|
.saltLink:visited {
|
|
1086
|
-
--saltIcon-color: var(--link-color-visited);
|
|
1087
1044
|
color: var(--link-color-visited);
|
|
1088
1045
|
}
|
|
1089
1046
|
.saltLink:hover {
|
|
1090
|
-
--saltIcon-color: var(--link-color-hover);
|
|
1091
1047
|
color: var(--link-color-hover);
|
|
1092
1048
|
text-decoration: var(--link-textDecoration-hover);
|
|
1093
1049
|
}
|
|
1094
1050
|
.saltLink:active {
|
|
1095
|
-
--saltIcon-color: var(--link-color-active);
|
|
1096
1051
|
color: var(--link-color-active);
|
|
1097
1052
|
}
|
|
1098
1053
|
.saltLink:focus {
|
|
1099
|
-
--saltIcon-color: var(--link-color-focus);
|
|
1100
1054
|
outline: var(--link-focus-outline);
|
|
1101
1055
|
color: var(--link-color-focus);
|
|
1102
1056
|
text-decoration: var(--link-textDecoration-hover);
|
|
@@ -1420,7 +1374,6 @@ a:link .saltInteractableCard * {
|
|
|
1420
1374
|
border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
|
|
1421
1375
|
color: var(--salt-selectable-foreground);
|
|
1422
1376
|
background: var(--salt-container-primary-background);
|
|
1423
|
-
--saltIcon-color: currentColor;
|
|
1424
1377
|
--saltIcon-size: 100%;
|
|
1425
1378
|
display: flex;
|
|
1426
1379
|
}
|
|
@@ -1574,20 +1527,19 @@ a:link .saltInteractableCard * {
|
|
|
1574
1527
|
--statusIndicator-info-color: var(--salt-status-info-foreground);
|
|
1575
1528
|
--statusIndicator-success-color: var(--salt-status-success-foreground);
|
|
1576
1529
|
--statusIndicator-error-color: var(--salt-status-error-foreground);
|
|
1577
|
-
--
|
|
1578
|
-
color: var(--statusIndicator-Color);
|
|
1530
|
+
color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));
|
|
1579
1531
|
}
|
|
1580
1532
|
.saltStatusIndicator-error {
|
|
1581
|
-
--statusIndicator-Color: var(--
|
|
1533
|
+
--statusIndicator-Color: var(--statusIndicator-error-color);
|
|
1582
1534
|
}
|
|
1583
1535
|
.saltStatusIndicator-warning {
|
|
1584
|
-
--statusIndicator-Color: var(--
|
|
1536
|
+
--statusIndicator-Color: var(--statusIndicator-warning-color);
|
|
1585
1537
|
}
|
|
1586
1538
|
.saltStatusIndicator-success {
|
|
1587
|
-
--statusIndicator-Color: var(--
|
|
1539
|
+
--statusIndicator-Color: var(--statusIndicator-success-color);
|
|
1588
1540
|
}
|
|
1589
1541
|
.saltStatusIndicator-info {
|
|
1590
|
-
--statusIndicator-Color: var(--
|
|
1542
|
+
--statusIndicator-Color: var(--statusIndicator-info-color);
|
|
1591
1543
|
}
|
|
1592
1544
|
|
|
1593
1545
|
/* src/switch/Switch.css */
|
|
@@ -1608,7 +1560,6 @@ a:link .saltInteractableCard * {
|
|
|
1608
1560
|
}
|
|
1609
1561
|
.saltSwitch-track {
|
|
1610
1562
|
border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);
|
|
1611
|
-
--saltIcon-color: currentColor;
|
|
1612
1563
|
--saltIcon-size: 100%;
|
|
1613
1564
|
display: flex;
|
|
1614
1565
|
flex-shrink: 0;
|
|
@@ -1916,38 +1867,32 @@ label.saltText small,
|
|
|
1916
1867
|
padding-left: var(--salt-spacing-100);
|
|
1917
1868
|
padding-right: var(--salt-spacing-100);
|
|
1918
1869
|
gap: var(--salt-spacing-50);
|
|
1919
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground);
|
|
1920
1870
|
}
|
|
1921
1871
|
.saltToggleButton:hover {
|
|
1922
1872
|
background: var(--salt-actionable-secondary-background-hover);
|
|
1923
1873
|
color: var(--salt-actionable-secondary-foreground-hover);
|
|
1924
1874
|
cursor: var(--salt-actionable-cursor-hover);
|
|
1925
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground-hover);
|
|
1926
1875
|
}
|
|
1927
1876
|
.saltToggleButton:focus-visible {
|
|
1928
1877
|
outline: var(--salt-focused-outline);
|
|
1929
1878
|
background: var(--salt-actionable-secondary-background-hover);
|
|
1930
1879
|
color: var(--salt-actionable-secondary-foreground-hover);
|
|
1931
1880
|
cursor: var(--salt-actionable-cursor-hover);
|
|
1932
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground-hover);
|
|
1933
1881
|
}
|
|
1934
1882
|
.saltToggleButton[aria-checked=true]:focus-visible {
|
|
1935
1883
|
background: var(--salt-actionable-secondary-background-active);
|
|
1936
1884
|
color: var(--salt-actionable-secondary-foreground-active);
|
|
1937
1885
|
cursor: var(--salt-actionable-cursor-active);
|
|
1938
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground-active);
|
|
1939
1886
|
}
|
|
1940
1887
|
.saltToggleButton[aria-checked=true] {
|
|
1941
1888
|
background: var(--salt-actionable-secondary-background-active);
|
|
1942
1889
|
color: var(--salt-actionable-secondary-foreground-active);
|
|
1943
1890
|
cursor: var(--salt-actionable-cursor-active);
|
|
1944
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground-active);
|
|
1945
1891
|
}
|
|
1946
1892
|
.saltToggleButton:disabled {
|
|
1947
1893
|
background: var(--salt-actionable-secondary-background-disabled);
|
|
1948
1894
|
cursor: var(--salt-actionable-cursor-disabled);
|
|
1949
1895
|
color: var(--salt-actionable-secondary-foreground-disabled);
|
|
1950
|
-
--saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);
|
|
1951
1896
|
}
|
|
1952
1897
|
|
|
1953
1898
|
/* src/toggle-button-group/ToggleButtonGroup.css */
|
|
@@ -2019,4 +1964,4 @@ label.saltText small,
|
|
|
2019
1964
|
--tooltip-status-borderColor: var(--salt-status-success-borderColor);
|
|
2020
1965
|
}
|
|
2021
1966
|
|
|
2022
|
-
/* src/
|
|
1967
|
+
/* src/b8b08f15-4c03-4f15-8c15-8a6007826739.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-strong);\n
|
|
3
|
+
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-strong);\n text-align: left;\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n background: var(--salt-actionable-secondary-background);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n margin-left: auto;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=AccordionHeader.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n --avatar-base-size: var(--salt-size-base, 12px);\n --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n /* Icon styling */\n --saltIcon-
|
|
3
|
+
var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n --avatar-base-size: var(--salt-size-base, 12px);\n --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n /* Icon styling */\n --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n display: flex;\n justify-content: center;\n align-items: center;\n background: var(--saltAvatar-background, var(--salt-accent-background));\n color: var(--avatar-foreground);\n font-size: var(--avatar-fontSize);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n width: var(--avatar-container-size);\n min-width: var(--avatar-container-size);\n height: var(--avatar-container-size);\n min-height: var(--avatar-container-size);\n overflow: hidden;\n user-select: none;\n border-radius: 50%;\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n width: 100%;\n height: 100%;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Avatar.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/*
|
|
3
|
+
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, transparent);\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, 0);\n border-radius: var(--saltButton-borderRadius, 0);\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n display: inline-flex;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Button.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-
|
|
3
|
+
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=CheckboxIcon.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
3
|
+
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Input.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltLink {\n --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n /* When focused, we also want hover style */\n --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n --link-textDecoration: var(--salt-navigable-textDecoration);\n --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n --link-fontFamily: var(--salt-text-fontFamily);\n --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n color: var(--link-color);\n letter-spacing: 0px;\n text-decoration: var(--link-textDecoration);\n font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n margin-left: var(--salt-size-adornmentGap);\n margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n
|
|
3
|
+
var css_248z = ".saltLink {\n --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n /* When focused, we also want hover style */\n --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n --link-textDecoration: var(--salt-navigable-textDecoration);\n --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n --link-fontFamily: var(--salt-text-fontFamily);\n --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n color: var(--link-color);\n letter-spacing: 0px;\n text-decoration: var(--link-textDecoration);\n font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n margin-left: var(--salt-size-adornmentGap);\n margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n color: var(--link-color-hover);\n text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n outline: var(--link-focus-outline);\n color: var(--link-color-focus);\n text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n display: block;\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n top: 0px;\n left: 0px;\n opacity: 0;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Link.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n --radioButton-size: var(--salt-size-selectable);\n width: var(--radioButton-size);\n height: var(--radioButton-size);\n min-width: var(--radioButton-size);\n min-height: var(--radioButton-size);\n border-radius: 50%;\n\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n --saltIcon-
|
|
3
|
+
var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n --radioButton-size: var(--salt-size-selectable);\n width: var(--radioButton-size);\n height: var(--radioButton-size);\n min-width: var(--radioButton-size);\n min-height: var(--radioButton-size);\n border-radius: 50%;\n\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n --saltIcon-size: 100%;\n display: flex;\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButtonIcon-checked,\n.saltRadioButton:hover .saltRadioButtonIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=RadioButtonIcon.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltStatusIndicator {\n --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n --statusIndicator-info-color: var(--salt-status-info-foreground);\n --statusIndicator-success-color: var(--salt-status-success-foreground);\n --statusIndicator-error-color: var(--salt-status-error-foreground);\n
|
|
3
|
+
var css_248z = ".saltStatusIndicator {\n --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n --statusIndicator-info-color: var(--salt-status-info-foreground);\n --statusIndicator-success-color: var(--salt-status-success-foreground);\n --statusIndicator-error-color: var(--salt-status-error-foreground);\n color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));\n}\n\n.saltStatusIndicator-error {\n --statusIndicator-Color: var(--statusIndicator-error-color);\n}\n\n.saltStatusIndicator-warning {\n --statusIndicator-Color: var(--statusIndicator-warning-color);\n}\n\n.saltStatusIndicator-success {\n --statusIndicator-Color: var(--statusIndicator-success-color);\n}\n\n.saltStatusIndicator-info {\n --statusIndicator-Color: var(--statusIndicator-info-color);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=StatusIndicator.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n color: var(--salt-content-primary-foreground);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n --saltIcon-
|
|
3
|
+
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n color: var(--salt-content-primary-foreground);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-disabled);\n color: var(--salt-selectable-foreground-disabled);\n background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Switch.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border: 0 solid transparent;\n border-radius: 0;\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-text-action-textTransform);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-text-action-textAlign);\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n
|
|
3
|
+
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border: 0 solid transparent;\n border-radius: 0;\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-text-action-textTransform);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-text-action-textAlign);\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n}\n\n.saltToggleButton:hover {\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton:focus-visible {\n outline: var(--salt-focused-outline);\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n}\n\n.saltToggleButton:disabled {\n background: var(--salt-actionable-secondary-background-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=ToggleButton.css.js.map
|
|
@@ -73,8 +73,8 @@ const Tooltip = React.forwardRef(
|
|
|
73
73
|
/* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
|
|
74
74
|
className: clsx.clsx(withBaseName(), withBaseName(status), className),
|
|
75
75
|
open: open && !disabled,
|
|
76
|
-
ref: floatingRef,
|
|
77
76
|
...getTooltipProps(),
|
|
77
|
+
ref: floatingRef,
|
|
78
78
|
...getTooltipPosition(),
|
|
79
79
|
children: /* @__PURE__ */ jsxRuntime.jsx(TooltipBase.TooltipBase, {
|
|
80
80
|
hideIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status =\n formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : statusProp;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status =\n formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : statusProp;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-expect-error children.ref cannot currently be typed.\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n open={open && !disabled}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","VALIDATION_NAMED_STATUS","useFloatingComponent","useTooltip","useForkRef","isValidElement","jsxs","Fragment","cloneElement","mergeProps","jsx","clsx","TooltipBase"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChBC,mCAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SACJ,yBAA8B,KAAA,KAAA,CAAA,IAC9BC,yCAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,UAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,kCAAqB,EAAA,CAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA;AAAA,MAEjBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAcD,qBAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,IACE,uBAAAE,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAeF,oBAAA,CAAA,QAAQ,CACtB,IAAAG,kBAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEFC,cAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACd,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAC,kBAAAD,cAAA,CAAAE,uBAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -75,12 +75,7 @@ function useTooltip(props) {
|
|
|
75
75
|
]);
|
|
76
76
|
const arrowProps = {
|
|
77
77
|
ref: arrowRef,
|
|
78
|
-
context
|
|
79
|
-
style: {
|
|
80
|
-
position: strategy,
|
|
81
|
-
left: arrowX != null ? arrowX : 0,
|
|
82
|
-
top: arrowY != null ? arrowY : 0
|
|
83
|
-
}
|
|
78
|
+
context
|
|
84
79
|
};
|
|
85
80
|
const getTooltipProps = () => {
|
|
86
81
|
return getFloatingProps({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n elements,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n elements,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"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"}
|
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const margin = (value = 0) => ({
|
|
6
6
|
name: "margin",
|
|
7
7
|
options: value,
|
|
8
|
-
fn(
|
|
9
|
-
const { x, y, elements } =
|
|
8
|
+
fn(middlewareState) {
|
|
9
|
+
const { x, y, elements } = middlewareState;
|
|
10
10
|
if (elements.floating.children.length > 0) {
|
|
11
11
|
const rootChildElement = elements.floating.children[0];
|
|
12
12
|
rootChildElement.style.setProperty("margin", value.toString());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\
|
|
1
|
+
{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\n\nexport const margin = (value = 0): Middleware => ({\n name: \"margin\",\n options: value,\n fn(middlewareState) {\n const { x, y, elements } = middlewareState;\n\n if (elements.floating.children.length > 0) {\n const rootChildElement = elements.floating.children[0] as HTMLElement;\n rootChildElement.style.setProperty(\"margin\", value.toString());\n }\n return {\n x: x,\n y: y,\n };\n },\n});\n"],"names":[],"mappings":";;;;AAEa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,eAAiB,EAAA;AAClB,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,eAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
|
|
@@ -8,7 +8,15 @@ var React = require('react');
|
|
|
8
8
|
var SaltProvider = require('../../salt-provider/SaltProvider.js');
|
|
9
9
|
|
|
10
10
|
const DefaultFloatingComponent = React.forwardRef(function DefaultFloatingComponent2(props, ref) {
|
|
11
|
-
const {
|
|
11
|
+
const {
|
|
12
|
+
open,
|
|
13
|
+
top,
|
|
14
|
+
left,
|
|
15
|
+
position,
|
|
16
|
+
width,
|
|
17
|
+
height,
|
|
18
|
+
...rest
|
|
19
|
+
} = props;
|
|
12
20
|
const style = {
|
|
13
21
|
top,
|
|
14
22
|
left,
|
|
@@ -94,7 +102,7 @@ function useFloatingUI(props) {
|
|
|
94
102
|
middleware: contextMiddleware,
|
|
95
103
|
animationFrame
|
|
96
104
|
} = useFloatingPlatform();
|
|
97
|
-
const {
|
|
105
|
+
const { refs, update, ...rest } = react.useFloating({
|
|
98
106
|
placement,
|
|
99
107
|
strategy,
|
|
100
108
|
middleware: contextMiddleware(middleware),
|
|
@@ -107,8 +115,8 @@ function useFloatingUI(props) {
|
|
|
107
115
|
platform: contextPlaform
|
|
108
116
|
});
|
|
109
117
|
return {
|
|
110
|
-
reference,
|
|
111
|
-
floating,
|
|
118
|
+
reference: refs.setReference,
|
|
119
|
+
floating: refs.setFloating,
|
|
112
120
|
refs,
|
|
113
121
|
update,
|
|
114
122
|
...rest
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n
|
|
1
|
+
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determinig whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Position props for the floating component\n */\n top: number;\n left: number;\n width?: number;\n height?: number;\n position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n /* eslint-disable @typescript-eslint/no-unused-vars */\n width,\n height,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n return open ? (\n <FloatingPortal>\n <SaltProvider>\n <div style={style} {...rest} ref={ref} />\n </SaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame ?? false,\n }),\n [platformProp, middleware, animationFrame]\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const handleOpenChange = (open: boolean) => {\n update();\n onOpenChange?.(open);\n };\n\n const {\n platform: contextPlaform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlaform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","jsx","FloatingPortal","SaltProvider","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-strong);\n
|
|
1
|
+
var css_248z = ".saltAccordionHeader {\n display: flex;\n gap: var(--salt-spacing-100);\n padding: var(--salt-spacing-50) var(--salt-spacing-100);\n align-items: center;\n border: 0;\n width: 100%;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n background: var(--salt-actionable-secondary-background);\n font-size: var(--salt-text-fontSize);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-fontWeight-strong);\n text-align: left;\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n outline: var(--salt-focused-outline);\n outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n background: var(--salt-actionable-secondary-background);\n color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n margin-left: auto;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=AccordionHeader.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n --avatar-base-size: var(--salt-size-base, 12px);\n --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n /* Icon styling */\n --saltIcon-
|
|
1
|
+
var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n --avatar-base-size: var(--salt-size-base, 12px);\n --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n /* Icon styling */\n --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n display: flex;\n justify-content: center;\n align-items: center;\n background: var(--saltAvatar-background, var(--salt-accent-background));\n color: var(--avatar-foreground);\n font-size: var(--avatar-fontSize);\n font-family: var(--salt-text-fontFamily);\n font-weight: var(--salt-text-fontWeight);\n width: var(--avatar-container-size);\n min-width: var(--avatar-container-size);\n height: var(--avatar-container-size);\n min-height: var(--avatar-container-size);\n overflow: hidden;\n user-select: none;\n border-radius: 50%;\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n width: 100%;\n height: 100%;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Avatar.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/*
|
|
1
|
+
var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n --button-background: var(--salt-actionable-cta-background);\n --button-background-active: var(--salt-actionable-cta-background-active);\n --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n --button-background-hover: var(--salt-actionable-cta-background-hover);\n --button-text-color: var(--salt-actionable-cta-foreground);\n --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n --button-background: var(--salt-actionable-primary-background);\n --button-background-active: var(--salt-actionable-primary-background-active);\n --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n --button-background-hover: var(--salt-actionable-primary-background-hover);\n --button-text-color: var(--salt-actionable-primary-foreground);\n --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n --button-background: var(--salt-actionable-secondary-background);\n --button-background-active: var(--salt-actionable-secondary-background-active);\n --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n --button-background-hover: var(--salt-actionable-secondary-background-hover);\n --button-text-color: var(--salt-actionable-secondary-foreground);\n --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, transparent);\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, 0);\n border-radius: var(--saltButton-borderRadius, 0);\n color: var(--saltButton-text-color, var(--button-text-color));\n cursor: var(--saltButton-cursor, pointer);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n display: inline-flex;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Button.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-
|
|
1
|
+
var css_248z = ".saltCheckboxIcon {\n --checkbox-size: var(--salt-size-selectable);\n width: var(--checkbox-size);\n min-width: var(--checkbox-size);\n height: var(--checkbox-size);\n min-height: var(--checkbox-size);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n position: relative;\n --saltIcon-size: 100%;\n display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n content: \"\";\n position: absolute;\n top: 50%;\n left: 50%;\n width: calc(var(--checkbox-size) - 6px);\n height: 2px;\n background: currentColor;\n transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=CheckboxIcon.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
1
|
+
var css_248z = "/* Style applied to the root element */\n.saltInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltInput-background, var(--input-background));\n color: var(--saltInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltInput-height, var(--salt-size-base));\n line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltInput-minHeight, var(--salt-size-base));\n min-width: var(--saltInput-minWidth, 4em);\n padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n}\n\n.saltInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: var(--input-textAlign);\n width: 100%;\n}\n\n/* Reset in the class */\n.saltInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Input.css.js.map
|
package/dist-es/link/Link.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltLink {\n --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n /* When focused, we also want hover style */\n --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n --link-textDecoration: var(--salt-navigable-textDecoration);\n --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n --link-fontFamily: var(--salt-text-fontFamily);\n --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n color: var(--link-color);\n letter-spacing: 0px;\n text-decoration: var(--link-textDecoration);\n font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n margin-left: var(--salt-size-adornmentGap);\n margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n
|
|
1
|
+
var css_248z = ".saltLink {\n --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n /* When focused, we also want hover style */\n --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n --link-textDecoration: var(--salt-navigable-textDecoration);\n --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n --link-fontFamily: var(--salt-text-fontFamily);\n --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n color: var(--link-color);\n letter-spacing: 0px;\n text-decoration: var(--link-textDecoration);\n font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n margin-left: var(--salt-size-adornmentGap);\n margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n color: var(--link-color-hover);\n text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n outline: var(--link-focus-outline);\n color: var(--link-color-focus);\n text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n display: block;\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n top: 0px;\n left: 0px;\n opacity: 0;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Link.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n --radioButton-size: var(--salt-size-selectable);\n width: var(--radioButton-size);\n height: var(--radioButton-size);\n min-width: var(--radioButton-size);\n min-height: var(--radioButton-size);\n border-radius: 50%;\n\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n --saltIcon-
|
|
1
|
+
var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n --radioButton-size: var(--salt-size-selectable);\n width: var(--radioButton-size);\n height: var(--radioButton-size);\n min-width: var(--radioButton-size);\n min-height: var(--radioButton-size);\n border-radius: 50%;\n\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n --saltIcon-size: 100%;\n display: flex;\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButtonIcon-checked,\n.saltRadioButton:hover .saltRadioButtonIcon-checked {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\n border-color: var(--salt-selectable-borderColor-disabled);\n background: var(--salt-container-primary-background-disabled);\n color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-error {\n color: var(--salt-status-error-foreground);\n border-color: var(--salt-status-error-borderColor);\n outline-color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n color: var(--salt-status-warning-foreground);\n border-color: var(--salt-status-warning-borderColor);\n outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly {\n border-color: var(--salt-selectable-borderColor-readonly);\n color: var(--salt-content-primary-foreground);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=RadioButtonIcon.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltStatusIndicator {\n --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n --statusIndicator-info-color: var(--salt-status-info-foreground);\n --statusIndicator-success-color: var(--salt-status-success-foreground);\n --statusIndicator-error-color: var(--salt-status-error-foreground);\n
|
|
1
|
+
var css_248z = ".saltStatusIndicator {\n --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n --statusIndicator-info-color: var(--salt-status-info-foreground);\n --statusIndicator-success-color: var(--salt-status-success-foreground);\n --statusIndicator-error-color: var(--salt-status-error-foreground);\n color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));\n}\n\n.saltStatusIndicator-error {\n --statusIndicator-Color: var(--statusIndicator-error-color);\n}\n\n.saltStatusIndicator-warning {\n --statusIndicator-Color: var(--statusIndicator-warning-color);\n}\n\n.saltStatusIndicator-success {\n --statusIndicator-Color: var(--statusIndicator-success-color);\n}\n\n.saltStatusIndicator-info {\n --statusIndicator-Color: var(--statusIndicator-info-color);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=StatusIndicator.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n color: var(--salt-content-primary-foreground);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n --saltIcon-
|
|
1
|
+
var css_248z = ".saltSwitch {\n display: flex;\n gap: var(--salt-spacing-100);\n position: relative;\n cursor: var(--salt-selectable-cursor-hover);\n color: var(--salt-content-primary-foreground);\n\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n color: var(--salt-content-primary-foreground-disabled);\n cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n --saltIcon-size: 100%;\n display: flex;\n flex-shrink: 0;\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n align-items: center;\n color: var(--salt-selectable-foreground);\n background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n outline-offset: var(--salt-focused-outlineOffset);\n outline: var(--salt-focused-outline);\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-hover);\n color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selected);\n color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-disabled);\n color: var(--salt-selectable-foreground-disabled);\n background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n border-color: var(--salt-selectable-borderColor-selectedDisabled);\n color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n display: flex;\n aspect-ratio: 1;\n height: var(--salt-size-selectable);\n background: currentColor;\n margin: var(--salt-spacing-25);\n border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n border-color: var(--salt-selectable-borderColor-hover);\n transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n background: transparent;\n border-color: var(--salt-selectable-borderColor-selected);\n transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n cursor: inherit;\n left: 0;\n margin: 0;\n opacity: 0;\n padding: 0;\n position: absolute;\n top: 0;\n z-index: var(--salt-zIndex-default);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n .saltSwitch:hover .saltSwitch-thumb {\n transition: none;\n }\n}\n\n.salt-density-high .saltSwitch-thumb {\n border: 0;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=Switch.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border: 0 solid transparent;\n border-radius: 0;\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-text-action-textTransform);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-text-action-textAlign);\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n
|
|
1
|
+
var css_248z = ".saltToggleButton {\n align-items: center;\n justify-content: center;\n appearance: none;\n -webkit-appearance: none;\n display: inline-flex;\n background: var(--salt-actionable-secondary-background);\n border: 0 solid transparent;\n border-radius: 0;\n height: var(--salt-size-base);\n color: var(--salt-actionable-secondary-foreground);\n text-transform: var(--salt-text-action-textTransform);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-fontFamily);\n text-align: var(--salt-text-action-textAlign);\n letter-spacing: var(--salt-text-action-letterSpacing);\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n padding-left: var(--salt-spacing-100);\n padding-right: var(--salt-spacing-100);\n gap: var(--salt-spacing-50);\n}\n\n.saltToggleButton:hover {\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton:focus-visible {\n outline: var(--salt-focused-outline);\n background: var(--salt-actionable-secondary-background-hover);\n color: var(--salt-actionable-secondary-foreground-hover);\n cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n background: var(--salt-actionable-secondary-background-active);\n color: var(--salt-actionable-secondary-foreground-active);\n cursor: var(--salt-actionable-cursor-active);\n}\n\n.saltToggleButton:disabled {\n background: var(--salt-actionable-secondary-background-disabled);\n cursor: var(--salt-actionable-cursor-disabled);\n color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { css_248z as default };
|
|
4
4
|
//# sourceMappingURL=ToggleButton.css.js.map
|
|
@@ -69,8 +69,8 @@ const Tooltip = forwardRef(
|
|
|
69
69
|
/* @__PURE__ */ jsx(FloatingComponent, {
|
|
70
70
|
className: clsx(withBaseName(), withBaseName(status), className),
|
|
71
71
|
open: open && !disabled,
|
|
72
|
-
ref: floatingRef,
|
|
73
72
|
...getTooltipProps(),
|
|
73
|
+
ref: floatingRef,
|
|
74
74
|
...getTooltipPosition(),
|
|
75
75
|
children: /* @__PURE__ */ jsx(TooltipBase, {
|
|
76
76
|
hideIcon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status =\n formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : statusProp;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n makePrefixer,\n mergeProps,\n UseFloatingUIProps,\n useForkRef,\n useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n /**\n * The children will be the Tooltip's trigger.\n */\n children: ReactNode;\n /**\n * Whether to hide the Tooltip arrow. Defaults to `false`.\n */\n hideArrow?: boolean;\n /**\n * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n */\n hideIcon?: boolean;\n /**\n * Content displayed inside the Tooltip. Can be a string or a React component.\n */\n content: ReactNode;\n /**\n * A string to determine the status of the Tooltip. Defaults to `info`.\n */\n status?: ValidationStatus;\n /**\n * Delay in milliseconds before the Tooltip is shown.\n */\n enterDelay?: number;\n /**\n * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n */\n leaveDelay?: number;\n /**\n * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n */\n disabled?: boolean;\n /**\n * Option to remove the hover listener.\n */\n disableHoverListener?: boolean;\n /**\n * Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled: disabledProp = false,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status: statusProp = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const {\n disabled: formFieldDisabled,\n validationStatus: formFieldValidationStatus,\n } = useFormFieldProps();\n\n const disabled = formFieldDisabled ?? disabledProp;\n const status =\n formFieldValidationStatus !== undefined &&\n VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n ? formFieldValidationStatus\n : statusProp;\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n getTooltipPosition,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-expect-error children.ref cannot currently be typed.\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n <FloatingComponent\n className={clsx(withBaseName(), withBaseName(status), className)}\n open={open && !disabled}\n {...getTooltipProps()}\n ref={floatingRef}\n {...getTooltipPosition()}\n >\n <TooltipBase\n hideIcon={hideIcon}\n status={status}\n content={content}\n hideArrow={hideArrow}\n arrowProps={arrowProps}\n />\n </FloatingComponent>\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SACJ,yBAA8B,KAAA,KAAA,CAAA,IAC9B,wBAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,UAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACd,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -71,12 +71,7 @@ function useTooltip(props) {
|
|
|
71
71
|
]);
|
|
72
72
|
const arrowProps = {
|
|
73
73
|
ref: arrowRef,
|
|
74
|
-
context
|
|
75
|
-
style: {
|
|
76
|
-
position: strategy,
|
|
77
|
-
left: arrowX != null ? arrowX : 0,
|
|
78
|
-
top: arrowY != null ? arrowY : 0
|
|
79
|
-
}
|
|
74
|
+
context
|
|
80
75
|
};
|
|
81
76
|
const getTooltipProps = () => {
|
|
82
77
|
return getFloatingProps({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n elements,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n
|
|
1
|
+
{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n arrow,\n flip,\n offset,\n safePolygon,\n shift,\n useDismiss,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n /**\n * Do not respond to focus events.\n */\n disableFocusListener?: boolean;\n /**\n * Do not respond to hover events.\n */\n disableHoverListener?: boolean;\n /**\n * The number of milliseconds to wait before showing the tooltip.\n * This prop won't impact the enter touch delay (`enterTouchDelay`).\n */\n enterDelay?: number;\n /**\n * The number of milliseconds to wait before hiding the tooltip.\n * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n */\n leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n const {\n enterDelay,\n leaveDelay,\n open: openProp,\n onOpenChange,\n placement: placementProp,\n disableHoverListener,\n disableFocusListener,\n } = props || {};\n\n const arrowRef = useRef<SVGSVGElement | null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Tooltip\",\n state: \"open\",\n });\n const handleOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChange?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n placement,\n context,\n elements,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement: placementProp,\n middleware: [\n offset(8),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useHover(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n enabled: !disableHoverListener,\n handleClose: safePolygon(),\n }),\n useFocus(context, { enabled: !disableFocusListener }),\n useRole(context, { role: \"tooltip\" }),\n useDismiss(context),\n useAriaAnnounce(context, {\n delay: {\n open: enterDelay,\n close: leaveDelay,\n },\n }),\n ]);\n\n const arrowProps = {\n ref: arrowRef,\n context,\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getTooltipPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.offsetWidth,\n height: elements.floating?.offsetHeight,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n getTooltipPosition,\n };\n}\n"],"names":["open"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
const margin = (value = 0) => ({
|
|
2
2
|
name: "margin",
|
|
3
3
|
options: value,
|
|
4
|
-
fn(
|
|
5
|
-
const { x, y, elements } =
|
|
4
|
+
fn(middlewareState) {
|
|
5
|
+
const { x, y, elements } = middlewareState;
|
|
6
6
|
if (elements.floating.children.length > 0) {
|
|
7
7
|
const rootChildElement = elements.floating.children[0];
|
|
8
8
|
rootChildElement.style.setProperty("margin", value.toString());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\
|
|
1
|
+
{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\n\nexport const margin = (value = 0): Middleware => ({\n name: \"margin\",\n options: value,\n fn(middlewareState) {\n const { x, y, elements } = middlewareState;\n\n if (elements.floating.children.length > 0) {\n const rootChildElement = elements.floating.children[0] as HTMLElement;\n rootChildElement.style.setProperty(\"margin\", value.toString());\n }\n return {\n x: x,\n y: y,\n };\n },\n});\n"],"names":[],"mappings":"AAEa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,eAAiB,EAAA;AAClB,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,eAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
|
|
@@ -4,7 +4,15 @@ import { forwardRef, createContext, useMemo, useContext } from 'react';
|
|
|
4
4
|
import { SaltProvider } from '../../salt-provider/SaltProvider.js';
|
|
5
5
|
|
|
6
6
|
const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(props, ref) {
|
|
7
|
-
const {
|
|
7
|
+
const {
|
|
8
|
+
open,
|
|
9
|
+
top,
|
|
10
|
+
left,
|
|
11
|
+
position,
|
|
12
|
+
width,
|
|
13
|
+
height,
|
|
14
|
+
...rest
|
|
15
|
+
} = props;
|
|
8
16
|
const style = {
|
|
9
17
|
top,
|
|
10
18
|
left,
|
|
@@ -90,7 +98,7 @@ function useFloatingUI(props) {
|
|
|
90
98
|
middleware: contextMiddleware,
|
|
91
99
|
animationFrame
|
|
92
100
|
} = useFloatingPlatform();
|
|
93
|
-
const {
|
|
101
|
+
const { refs, update, ...rest } = useFloating({
|
|
94
102
|
placement,
|
|
95
103
|
strategy,
|
|
96
104
|
middleware: contextMiddleware(middleware),
|
|
@@ -103,8 +111,8 @@ function useFloatingUI(props) {
|
|
|
103
111
|
platform: contextPlaform
|
|
104
112
|
});
|
|
105
113
|
return {
|
|
106
|
-
reference,
|
|
107
|
-
floating,
|
|
114
|
+
reference: refs.setReference,
|
|
115
|
+
floating: refs.setFloating,
|
|
108
116
|
refs,
|
|
109
117
|
update,
|
|
110
118
|
...rest
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n
|
|
1
|
+
{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n Middleware,\n Placement,\n Platform,\n Strategy,\n autoUpdate,\n flip,\n limitShift,\n platform,\n shift,\n useFloating,\n FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n createContext,\n ReactNode,\n useContext,\n useMemo,\n forwardRef,\n ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the floating component is open (used for determinig whether to show the component)\n * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n * for caching windows and reusing them, rather than always spawning a new one\n */\n open: boolean;\n /**\n * Position props for the floating component\n */\n top: number;\n left: number;\n width?: number;\n height?: number;\n position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n HTMLDivElement,\n FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n const {\n open,\n top,\n left,\n position,\n /* eslint-disable @typescript-eslint/no-unused-vars */\n width,\n height,\n /* eslint-enable @typescript-eslint/no-unused-vars */\n ...rest\n } = props;\n const style = {\n top,\n left,\n position,\n };\n return open ? (\n <FloatingPortal>\n <SaltProvider>\n <div style={style} {...rest} ref={ref} />\n </SaltProvider>\n </FloatingPortal>\n ) : null;\n});\n\nexport interface FloatingComponentContextType {\n Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n extends FloatingComponentContextType {\n children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n props: FloatingComponentProviderProps\n) {\n const { Component, children } = props;\n const value = useMemo(() => ({ Component }), [Component]);\n\n return (\n <FloatingComponentContext.Provider value={value}>\n {children}\n </FloatingComponentContext.Provider>\n );\n}\n\nexport function useFloatingComponent() {\n return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps {\n /**\n * Sets position relative to trigger.\n */\n placement?: Placement;\n strategy?: Strategy;\n /**\n * Function to update the default middleware used to extend or replace it\n */\n middleware?: Middleware[];\n /**\n * Sets visible state.\n */\n open?: boolean;\n /**\n * Callback function triggered when open state changes.\n */\n onOpenChange?: (open: boolean) => void;\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n platform: Platform;\n middleware: GetMiddleware;\n animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n platform,\n middleware: defaultGetMiddleware,\n animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n platform?: Platform;\n middleware?: GetMiddleware;\n children: ReactNode;\n animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n const {\n platform: platformProp,\n middleware,\n animationFrame,\n children,\n } = props;\n\n const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n () => ({\n platform: platformProp ?? platform,\n middleware: middleware ?? defaultGetMiddleware,\n animationFrame: animationFrame ?? false,\n }),\n [platformProp, middleware, animationFrame]\n );\n\n return (\n <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n {children}\n </FloatingPlatformContext.Provider>\n );\n}\n\nexport function useFloatingPlatform() {\n return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n flip(),\n shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n reference: UseFloatingRefs[\"setReference\"];\n floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n const {\n placement,\n strategy,\n middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n open = false,\n onOpenChange,\n } = props;\n\n const handleOpenChange = (open: boolean) => {\n update();\n onOpenChange?.(open);\n };\n\n const {\n platform: contextPlaform,\n middleware: contextMiddleware,\n animationFrame,\n } = useFloatingPlatform();\n\n const { refs, update, ...rest } = useFloating({\n placement,\n strategy,\n middleware: contextMiddleware(middleware),\n open,\n onOpenChange: handleOpenChange,\n whileElementsMounted: (...args) => {\n const cleanup = autoUpdate(...args, { animationFrame });\n\n return cleanup;\n },\n platform: contextPlaform,\n });\n\n return {\n reference: refs.setReference,\n floating: refs.setFloating,\n refs,\n update,\n ...rest,\n };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}
|
|
@@ -24,17 +24,16 @@ export declare function useTooltip(props?: UseTooltipProps): {
|
|
|
24
24
|
arrowProps: {
|
|
25
25
|
ref: import("react").MutableRefObject<SVGSVGElement | null>;
|
|
26
26
|
context: {
|
|
27
|
-
x: number
|
|
28
|
-
y: number
|
|
27
|
+
x: number;
|
|
28
|
+
y: number;
|
|
29
29
|
placement: import("@floating-ui/utils").Placement;
|
|
30
30
|
strategy: import("@floating-ui/utils").Strategy;
|
|
31
31
|
middlewareData: import("@floating-ui/core").MiddlewareData;
|
|
32
|
-
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
33
|
-
floating: (node: HTMLElement | null) => void;
|
|
34
|
-
update: () => void;
|
|
35
32
|
isPositioned: boolean;
|
|
33
|
+
update: () => void;
|
|
34
|
+
floatingStyles: import("react").CSSProperties;
|
|
36
35
|
open: boolean;
|
|
37
|
-
onOpenChange: (open: boolean) => void;
|
|
36
|
+
onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
|
|
38
37
|
events: import("@floating-ui/react").FloatingEvents;
|
|
39
38
|
dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
|
|
40
39
|
nodeId: string | undefined;
|
|
@@ -42,15 +41,10 @@ export declare function useTooltip(props?: UseTooltipProps): {
|
|
|
42
41
|
refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
|
|
43
42
|
elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
|
|
44
43
|
};
|
|
45
|
-
style: {
|
|
46
|
-
position: import("@floating-ui/utils").Strategy;
|
|
47
|
-
left: number;
|
|
48
|
-
top: number;
|
|
49
|
-
};
|
|
50
44
|
};
|
|
51
45
|
open: boolean;
|
|
52
|
-
floating: (node: HTMLElement | null) => void;
|
|
53
|
-
reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
|
|
46
|
+
floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
|
|
47
|
+
reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
|
|
54
48
|
getTooltipProps: () => HTMLProps<HTMLDivElement>;
|
|
55
49
|
getTriggerProps: () => Record<string, unknown>;
|
|
56
50
|
getTooltipPosition: () => {
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Middleware, Placement, Platform, Strategy, useFloating } from "@floating-ui/react";
|
|
2
|
-
import { ReactNode,
|
|
3
|
-
|
|
4
|
-
export interface FloatingComponentProps {
|
|
2
|
+
import { ReactNode, ComponentPropsWithoutRef } from "react";
|
|
3
|
+
export interface FloatingComponentProps extends ComponentPropsWithoutRef<"div"> {
|
|
5
4
|
/**
|
|
6
5
|
* Whether the floating component is open (used for determinig whether to show the component)
|
|
7
6
|
* We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.
|
|
@@ -17,8 +16,9 @@ export interface FloatingComponentProps {
|
|
|
17
16
|
height?: number;
|
|
18
17
|
position: Strategy;
|
|
19
18
|
}
|
|
19
|
+
declare const DefaultFloatingComponent: import("react").ForwardRefExoticComponent<FloatingComponentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
20
20
|
export interface FloatingComponentContextType {
|
|
21
|
-
Component:
|
|
21
|
+
Component: typeof DefaultFloatingComponent;
|
|
22
22
|
}
|
|
23
23
|
export interface FloatingComponentProviderProps extends FloatingComponentContextType {
|
|
24
24
|
children: ReactNode;
|
|
@@ -64,14 +64,19 @@ export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
|
|
|
64
64
|
fn: (state: {
|
|
65
65
|
x: number;
|
|
66
66
|
y: number;
|
|
67
|
+
platform: import("@floating-ui/core").Platform;
|
|
67
68
|
initialPlacement: Placement;
|
|
68
69
|
placement: Placement;
|
|
69
70
|
strategy: Strategy;
|
|
70
71
|
middlewareData: import("@floating-ui/core").MiddlewareData;
|
|
71
72
|
rects: import("@floating-ui/utils").ElementRects;
|
|
72
|
-
platform: import("@floating-ui/core").Platform;
|
|
73
73
|
elements: import("@floating-ui/dom").Elements;
|
|
74
74
|
}) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
|
|
75
75
|
}[];
|
|
76
|
-
|
|
76
|
+
declare type UseFloatingRefs = ReturnType<typeof useFloating>["refs"];
|
|
77
|
+
export interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {
|
|
78
|
+
reference: UseFloatingRefs["setReference"];
|
|
79
|
+
floating: UseFloatingRefs["setFloating"];
|
|
80
|
+
}
|
|
81
|
+
export declare function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn;
|
|
77
82
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salt-ds/core",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.4",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
"main": "dist-cjs/index.js",
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@floating-ui/react": "^0.
|
|
14
|
+
"@floating-ui/react": "^0.26.5",
|
|
15
15
|
"clsx": "^2.0.0",
|
|
16
16
|
"@salt-ds/window": "^0.1.1",
|
|
17
17
|
"@salt-ds/styles": "^0.2.1",
|