@eightshift/ui-components 4.0.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/package.json +101 -101
  2. package/dist/Button-CvzGKGCo.js +0 -185
  3. package/dist/Collection-ddre1L5v.js +0 -2332
  4. package/dist/Color-MV5kBVXr.js +0 -2452
  5. package/dist/ColorSwatch-BqQfVu4L.js +0 -64
  6. package/dist/ComboBox-jQ-dk95U.js +0 -1906
  7. package/dist/Dialog-DX1aiYyE.js +0 -2300
  8. package/dist/FieldError-52GVSGgC.js +0 -42
  9. package/dist/FocusScope-Cri5BFRz.js +0 -831
  10. package/dist/Form-Cq3fu75_.js +0 -5
  11. package/dist/Group-_emcIVxI.js +0 -48
  12. package/dist/Heading-B2153VXe.js +0 -16
  13. package/dist/Hidden-rE6uR-lr.js +0 -41
  14. package/dist/Input-BxpFEIXV.js +0 -133
  15. package/dist/Label-icmbmNdI.js +0 -17
  16. package/dist/List-BYNHbol3.js +0 -593
  17. package/dist/ListBox-mJ4nQaL7.js +0 -581
  18. package/dist/NumberFormatter-DA8u1Ot7.js +0 -140
  19. package/dist/OverlayArrow-BB0CWwdq.js +0 -629
  20. package/dist/RSPContexts-2lR5GG9p.js +0 -14
  21. package/dist/Select-aab027f3.esm--EmXjiL3.js +0 -2469
  22. package/dist/Separator-D9moUgP8.js +0 -322
  23. package/dist/Slider-rz2XRMGm.js +0 -853
  24. package/dist/Text-DVSAPY-K.js +0 -16
  25. package/dist/VisuallyHidden-f9zX67a_.js +0 -48
  26. package/dist/_commonjsHelpers-CUmg6egw.js +0 -6
  27. package/dist/assets/index.css +0 -37
  28. package/dist/assets/style-admin.css +0 -5255
  29. package/dist/assets/style-editor.css +0 -5255
  30. package/dist/assets/style.css +0 -5261
  31. package/dist/assets/wp-font-enhancements.css +0 -8
  32. package/dist/assets/wp-ui-enhancements.css +0 -299
  33. package/dist/components/animated-visibility/animated-visibility.js +0 -105
  34. package/dist/components/base-control/base-control.js +0 -86
  35. package/dist/components/breakpoint-preview/breakpoint-preview.js +0 -161
  36. package/dist/components/button/button.js +0 -387
  37. package/dist/components/checkbox/checkbox.js +0 -320
  38. package/dist/components/color-pickers/color-picker.js +0 -272
  39. package/dist/components/color-pickers/color-swatch.js +0 -58
  40. package/dist/components/color-pickers/gradient-editor.js +0 -534
  41. package/dist/components/color-pickers/solid-color-picker.js +0 -1567
  42. package/dist/components/component-toggle/component-toggle.js +0 -158
  43. package/dist/components/container-panel/container-panel.js +0 -131
  44. package/dist/components/draggable/draggable-context.js +0 -5
  45. package/dist/components/draggable/draggable-handle.js +0 -46
  46. package/dist/components/draggable/draggable.js +0 -6207
  47. package/dist/components/draggable-list/draggable-list-context.js +0 -5
  48. package/dist/components/draggable-list/draggable-list-item.js +0 -77
  49. package/dist/components/draggable-list/draggable-list.js +0 -151
  50. package/dist/components/expandable/expandable.js +0 -342
  51. package/dist/components/index.js +0 -137
  52. package/dist/components/input-field/input-field.js +0 -231
  53. package/dist/components/item-collection/item-collection.js +0 -59
  54. package/dist/components/layout/hstack.js +0 -30
  55. package/dist/components/layout/vstack.js +0 -30
  56. package/dist/components/link-input/link-input.js +0 -293
  57. package/dist/components/matrix-align/matrix-align.js +0 -134
  58. package/dist/components/menu/menu.js +0 -285
  59. package/dist/components/modal/modal.js +0 -305
  60. package/dist/components/notice/notice.js +0 -123
  61. package/dist/components/number-picker/number-picker.js +0 -292
  62. package/dist/components/option-select/option-select.js +0 -264
  63. package/dist/components/options-panel/options-panel.js +0 -158
  64. package/dist/components/placeholders/file-placeholder.js +0 -42
  65. package/dist/components/placeholders/image-placeholder.js +0 -88
  66. package/dist/components/placeholders/media-placeholder.js +0 -63
  67. package/dist/components/popover/popover.js +0 -207
  68. package/dist/components/radio/radio.js +0 -579
  69. package/dist/components/repeater/repeater-context.js +0 -5
  70. package/dist/components/repeater/repeater-item.js +0 -119
  71. package/dist/components/repeater/repeater.js +0 -280
  72. package/dist/components/responsive/mini-responsive.js +0 -498
  73. package/dist/components/responsive/responsive-legacy.js +0 -343
  74. package/dist/components/responsive/responsive.js +0 -580
  75. package/dist/components/responsive-preview/responsive-preview.js +0 -123
  76. package/dist/components/rich-label/rich-label.js +0 -66
  77. package/dist/components/select/async-multi-select.js +0 -157
  78. package/dist/components/select/async-single-select.js +0 -137
  79. package/dist/components/select/custom-select-default-components.js +0 -38
  80. package/dist/components/select/multi-select-components.js +0 -8
  81. package/dist/components/select/multi-select.js +0 -151
  82. package/dist/components/select/react-select-component-wrappers.js +0 -90
  83. package/dist/components/select/shared.js +0 -26
  84. package/dist/components/select/single-select.js +0 -131
  85. package/dist/components/select/styles.js +0 -49
  86. package/dist/components/select/v2/async-select.js +0 -297
  87. package/dist/components/select/v2/shared.js +0 -24
  88. package/dist/components/select/v2/single-select.js +0 -990
  89. package/dist/components/slider/column-config-slider.js +0 -210
  90. package/dist/components/slider/slider.js +0 -343
  91. package/dist/components/slider/utils.js +0 -84
  92. package/dist/components/spacer/spacer.js +0 -97
  93. package/dist/components/tabs/tabs.js +0 -702
  94. package/dist/components/toggle/switch.js +0 -155
  95. package/dist/components/toggle/toggle.js +0 -64
  96. package/dist/components/toggle-button/toggle-button.js +0 -324
  97. package/dist/components/tooltip/tooltip.js +0 -525
  98. package/dist/context-D2KUdwNL.js +0 -92
  99. package/dist/default-i18n-CT_oS1Fy.js +0 -922
  100. package/dist/filterDOMProps-EDDcM64A.js +0 -28
  101. package/dist/icons/block-icon.js +0 -42
  102. package/dist/icons/generic-color-swatch.js +0 -113
  103. package/dist/icons/icons.js +0 -30371
  104. package/dist/icons/index.js +0 -11
  105. package/dist/icons/jsx-svg.js +0 -50
  106. package/dist/index-641ee5b8.esm-BPz6U6sJ.js +0 -3137
  107. package/dist/index-BKGQ6jGS.js +0 -44
  108. package/dist/index-BYHhzLf-.js +0 -444
  109. package/dist/index.js +0 -139
  110. package/dist/lite-DVmmD_-j.js +0 -7
  111. package/dist/modifiers.esm-BuJQPI1X.js +0 -31
  112. package/dist/multi-select-components-BlZZoNXC.js +0 -3744
  113. package/dist/number-GajL10e1.js +0 -36
  114. package/dist/react-jsx-parser.min-DZCiis5V.js +0 -11753
  115. package/dist/react-select-async.esm-CwUoej5h.js +0 -107
  116. package/dist/react-select.esm-DcwYxadV.js +0 -15
  117. package/dist/style-admin.js +0 -1
  118. package/dist/style-editor.js +0 -1
  119. package/dist/style.js +0 -1
  120. package/dist/textSelection-0UUS8Yfg.js +0 -46
  121. package/dist/useButton-BpOKDWEN.js +0 -71
  122. package/dist/useEvent-B0b-6KBr.js +0 -23
  123. package/dist/useFocusRing-CV5l3lf6.js +0 -107
  124. package/dist/useFormReset-C5OggHsw.js +0 -22
  125. package/dist/useFormValidation-DhDNSjws.js +0 -224
  126. package/dist/useHover-DwDr6ozG.js +0 -900
  127. package/dist/useLabel-D7HkNEHT.js +0 -27
  128. package/dist/useLabels-D8cxd1Z8.js +0 -23
  129. package/dist/useListState-UGlN5-7P.js +0 -161
  130. package/dist/useLocalizedStringFormatter-CFP1YZWQ.js +0 -121
  131. package/dist/useNumberField-CEAj7Mrj.js +0 -1204
  132. package/dist/useNumberFormatter-321rAb4J.js +0 -13
  133. package/dist/usePress-DNW8qpY6.js +0 -664
  134. package/dist/useSingleSelectListState-DC0wWTUM.js +0 -38
  135. package/dist/useToggle-BrpmSOB-.js +0 -59
  136. package/dist/useToggleState-CmQX3SoX.js +0 -19
  137. package/dist/utilities/array-helpers.js +0 -56
  138. package/dist/utilities/debounce-throttle.js +0 -123
  139. package/dist/utilities/es-dash.js +0 -376
  140. package/dist/utilities/index.js +0 -27
  141. package/dist/utilities/text-helpers.js +0 -136
  142. package/dist/utils-DkCSC521.js +0 -370
  143. package/dist/wp/wp-font-enhancements.js +0 -1
  144. package/dist/wp/wp-ui-enhancements.js +0 -1
@@ -1,579 +0,0 @@
1
- import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
- import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-icmbmNdI.js";
3
- import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-DkCSC521.js";
4
- import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-52GVSGgC.js";
5
- import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
6
- import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-DVSAPY-K.js";
7
- import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
8
- import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
9
- import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-C5OggHsw.js";
10
- import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DNW8qpY6.js";
11
- import { a as $f645667febf57a63$export$4c014de7c8940b4c, b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-DwDr6ozG.js";
12
- import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-DhDNSjws.js";
13
- import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-Cri5BFRz.js";
14
- import { a as $9ab94262bd0047c7$export$420e68273165f4ec, $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CV5l3lf6.js";
15
- import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-D2KUdwNL.js";
16
- import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-f9zX67a_.js";
17
- import { c as clsx } from "../../lite-DVmmD_-j.js";
18
- import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
19
- import { RichLabel } from "../rich-label/rich-label.js";
20
- import { BaseControl } from "../base-control/base-control.js";
21
- const $884aeceb3d67f00f$export$37b65e5b5444d35c = /* @__PURE__ */ new WeakMap();
22
- function $0d5c49892c1215da$export$37b0961d2f4751e2(props, state, ref) {
23
- let { value, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby } = props;
24
- const isDisabled = props.isDisabled || state.isDisabled;
25
- let hasChildren = children != null;
26
- let hasAriaLabel = ariaLabel != null || ariaLabelledby != null;
27
- if (!hasChildren && !hasAriaLabel) console.warn("If you do not provide children, you must specify an aria-label for accessibility");
28
- let checked = state.selectedValue === value;
29
- let onChange = (e) => {
30
- e.stopPropagation();
31
- state.setSelectedValue(value);
32
- };
33
- let { pressProps, isPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
34
- isDisabled
35
- });
36
- let { pressProps: labelProps, isPressed: isLabelPressed } = $f6c31cce2adf654f$export$45712eceda6fad21({
37
- isDisabled,
38
- onPress() {
39
- var _ref_current;
40
- state.setSelectedValue(value);
41
- (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.focus();
42
- }
43
- });
44
- let { focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c($3ef42575df84b30b$export$9d1611c77c2fe928(props, {
45
- onFocus: () => state.setLastFocusedValue(value)
46
- }), ref);
47
- let interactions = $3ef42575df84b30b$export$9d1611c77c2fe928(pressProps, focusableProps);
48
- let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
49
- labelable: true
50
- });
51
- let tabIndex = -1;
52
- if (state.selectedValue != null) {
53
- if (state.selectedValue === value) tabIndex = 0;
54
- } else if (state.lastFocusedValue === value || state.lastFocusedValue == null) tabIndex = 0;
55
- if (isDisabled) tabIndex = void 0;
56
- let { name, descriptionId, errorMessageId, validationBehavior } = $884aeceb3d67f00f$export$37b65e5b5444d35c.get(state);
57
- $99facab73266f662$export$5add1d006293d136(ref, state.selectedValue, state.setSelectedValue);
58
- $e93e671b31057976$export$b8473d3665f3a75a({
59
- validationBehavior
60
- }, state, ref);
61
- return {
62
- labelProps: $3ef42575df84b30b$export$9d1611c77c2fe928(labelProps, {
63
- onClick: (e) => e.preventDefault()
64
- }),
65
- inputProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, {
66
- ...interactions,
67
- type: "radio",
68
- name,
69
- tabIndex,
70
- disabled: isDisabled,
71
- required: state.isRequired && validationBehavior === "native",
72
- checked,
73
- value,
74
- onChange,
75
- "aria-describedby": [
76
- props["aria-describedby"],
77
- state.isInvalid ? errorMessageId : null,
78
- descriptionId
79
- ].filter(Boolean).join(" ") || void 0
80
- }),
81
- isDisabled,
82
- isSelected: checked,
83
- isPressed: isPressed || isLabelPressed
84
- };
85
- }
86
- function $430f30ed08ec25fa$export$62b9571f283ff5c2(props, state) {
87
- let { name, isReadOnly, isRequired, isDisabled, orientation = "vertical", validationBehavior = "aria" } = props;
88
- let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
89
- let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
90
- let { labelProps, fieldProps, descriptionProps, errorMessageProps } = $2baaea4c71418dea$export$294aa081a6c6f55d({
91
- ...props,
92
- // Radio group is not an HTML input element so it
93
- // shouldn't be labeled by a <label> element.
94
- labelElementType: "span",
95
- isInvalid: state.isInvalid,
96
- errorMessage: props.errorMessage || validationErrors
97
- });
98
- let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
99
- labelable: true
100
- });
101
- let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
102
- onBlurWithin(e) {
103
- var _props_onBlur;
104
- (_props_onBlur = props.onBlur) === null || _props_onBlur === void 0 ? void 0 : _props_onBlur.call(props, e);
105
- if (!state.selectedValue) state.setLastFocusedValue(null);
106
- },
107
- onFocusWithin: props.onFocus,
108
- onFocusWithinChange: props.onFocusChange
109
- });
110
- let onKeyDown = (e) => {
111
- let nextDir;
112
- switch (e.key) {
113
- case "ArrowRight":
114
- if (direction === "rtl" && orientation !== "vertical") nextDir = "prev";
115
- else nextDir = "next";
116
- break;
117
- case "ArrowLeft":
118
- if (direction === "rtl" && orientation !== "vertical") nextDir = "next";
119
- else nextDir = "prev";
120
- break;
121
- case "ArrowDown":
122
- nextDir = "next";
123
- break;
124
- case "ArrowUp":
125
- nextDir = "prev";
126
- break;
127
- default:
128
- return;
129
- }
130
- e.preventDefault();
131
- let walker = $9bf71ea28793e738$export$2d6ec8fc375ceafa(e.currentTarget, {
132
- from: e.target
133
- });
134
- let nextElem;
135
- if (nextDir === "next") {
136
- nextElem = walker.nextNode();
137
- if (!nextElem) {
138
- walker.currentNode = e.currentTarget;
139
- nextElem = walker.firstChild();
140
- }
141
- } else {
142
- nextElem = walker.previousNode();
143
- if (!nextElem) {
144
- walker.currentNode = e.currentTarget;
145
- nextElem = walker.lastChild();
146
- }
147
- }
148
- if (nextElem) {
149
- nextElem.focus();
150
- state.setSelectedValue(nextElem.value);
151
- }
152
- };
153
- let groupName = $bdb11010cef70236$export$f680877a34711e37(name);
154
- $884aeceb3d67f00f$export$37b65e5b5444d35c.set(state, {
155
- name: groupName,
156
- descriptionId: descriptionProps.id,
157
- errorMessageId: errorMessageProps.id,
158
- validationBehavior
159
- });
160
- return {
161
- radioGroupProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, {
162
- // https://www.w3.org/TR/wai-aria-1.2/#radiogroup
163
- role: "radiogroup",
164
- onKeyDown,
165
- "aria-invalid": state.isInvalid || void 0,
166
- "aria-errormessage": props["aria-errormessage"],
167
- "aria-readonly": isReadOnly || void 0,
168
- "aria-required": isRequired || void 0,
169
- "aria-disabled": isDisabled || void 0,
170
- "aria-orientation": orientation,
171
- ...fieldProps,
172
- ...focusWithinProps
173
- }),
174
- labelProps,
175
- descriptionProps,
176
- errorMessageProps,
177
- isInvalid,
178
- validationErrors,
179
- validationDetails
180
- };
181
- }
182
- let $a54cdc5c1942b639$var$instance = Math.round(Math.random() * 1e10);
183
- let $a54cdc5c1942b639$var$i = 0;
184
- function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
185
- let name = useMemo(() => props.name || `radio-group-${$a54cdc5c1942b639$var$instance}-${++$a54cdc5c1942b639$var$i}`, [
186
- props.name
187
- ]);
188
- var _props_defaultValue;
189
- let [selectedValue, setSelected] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(props.value, (_props_defaultValue = props.defaultValue) !== null && _props_defaultValue !== void 0 ? _props_defaultValue : null, props.onChange);
190
- let [lastFocusedValue, setLastFocusedValue] = useState(null);
191
- let validation = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
192
- ...props,
193
- value: selectedValue
194
- });
195
- let setSelectedValue = (value) => {
196
- if (!props.isReadOnly && !props.isDisabled) {
197
- setSelected(value);
198
- validation.commitValidation();
199
- }
200
- };
201
- let isInvalid = validation.displayValidation.isInvalid;
202
- return {
203
- ...validation,
204
- name,
205
- selectedValue,
206
- setSelectedValue,
207
- lastFocusedValue,
208
- setLastFocusedValue,
209
- isDisabled: props.isDisabled || false,
210
- isReadOnly: props.isReadOnly || false,
211
- isRequired: props.isRequired || false,
212
- validationState: props.validationState || (isInvalid ? "invalid" : null),
213
- isInvalid
214
- };
215
- }
216
- const $b6c3ddc6086f204d$export$a79eda4ff50e30b6 = /* @__PURE__ */ createContext(null);
217
- const $b6c3ddc6086f204d$export$b118023277d4a5c3 = /* @__PURE__ */ createContext(null);
218
- const $b6c3ddc6086f204d$export$29d84393af70866c = /* @__PURE__ */ createContext(null);
219
- const $b6c3ddc6086f204d$export$a98f0dcb43a68a25 = /* @__PURE__ */ forwardRef(function RadioGroup(props, ref) {
220
- [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b6c3ddc6086f204d$export$a79eda4ff50e30b6);
221
- let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
222
- var _props_validationBehavior, _ref;
223
- let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : "native";
224
- let state = $a54cdc5c1942b639$export$bca9d026f8e704eb({
225
- ...props,
226
- validationBehavior
227
- });
228
- let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
229
- let { radioGroupProps, labelProps, descriptionProps, errorMessageProps, ...validation } = $430f30ed08ec25fa$export$62b9571f283ff5c2({
230
- ...props,
231
- label,
232
- validationBehavior
233
- }, state);
234
- let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
235
- ...props,
236
- values: {
237
- orientation: props.orientation || "vertical",
238
- isDisabled: state.isDisabled,
239
- isReadOnly: state.isReadOnly,
240
- isRequired: state.isRequired,
241
- isInvalid: state.isInvalid,
242
- state
243
- },
244
- defaultClassName: "react-aria-RadioGroup"
245
- });
246
- return /* @__PURE__ */ React__default.createElement("div", {
247
- ...radioGroupProps,
248
- ...renderProps,
249
- ref,
250
- slot: props.slot || void 0,
251
- "data-orientation": props.orientation || "vertical",
252
- "data-invalid": state.isInvalid || void 0,
253
- "data-disabled": state.isDisabled || void 0,
254
- "data-readonly": state.isReadOnly || void 0,
255
- "data-required": state.isRequired || void 0
256
- }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
257
- values: [
258
- [
259
- $b6c3ddc6086f204d$export$29d84393af70866c,
260
- state
261
- ],
262
- [
263
- $01b77f81d0f07f68$export$75b6ee27786ba447,
264
- {
265
- ...labelProps,
266
- ref: labelRef,
267
- elementType: "span"
268
- }
269
- ],
270
- [
271
- $514c0188e459b4c0$export$9afb8bc826b033ea,
272
- {
273
- slots: {
274
- description: descriptionProps,
275
- errorMessage: errorMessageProps
276
- }
277
- }
278
- ],
279
- [
280
- $ee014567cb39d3f0$export$ff05c3ac10437e03,
281
- validation
282
- ]
283
- ]
284
- }, renderProps.children));
285
- });
286
- const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef(function Radio(props, ref) {
287
- let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
288
- [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $b6c3ddc6086f204d$export$b118023277d4a5c3);
289
- let state = React__default.useContext($b6c3ddc6086f204d$export$29d84393af70866c);
290
- let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
291
- let { labelProps, inputProps, isSelected, isDisabled, isPressed } = $0d5c49892c1215da$export$37b0961d2f4751e2({
292
- ...$64fa3d84918910a7$export$ef03459518577ad4(props),
293
- // ReactNode type doesn't allow function children.
294
- children: typeof props.children === "function" ? true : props.children
295
- }, state, inputRef);
296
- let { isFocused, isFocusVisible, focusProps } = $f7dceffc5ad7768b$export$4e328f61c538687f();
297
- let interactionDisabled = isDisabled || state.isReadOnly;
298
- let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456({
299
- ...props,
300
- isDisabled: interactionDisabled
301
- });
302
- let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
303
- ...props,
304
- defaultClassName: "react-aria-Radio",
305
- values: {
306
- isSelected,
307
- isPressed,
308
- isHovered,
309
- isFocused,
310
- isFocusVisible,
311
- isDisabled,
312
- isReadOnly: state.isReadOnly,
313
- isInvalid: state.isInvalid,
314
- isRequired: state.isRequired
315
- }
316
- });
317
- let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
318
- delete DOMProps.id;
319
- return /* @__PURE__ */ React__default.createElement("label", {
320
- ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
321
- ref,
322
- "data-selected": isSelected || void 0,
323
- "data-pressed": isPressed || void 0,
324
- "data-hovered": isHovered || void 0,
325
- "data-focused": isFocused || void 0,
326
- "data-focus-visible": isFocusVisible || void 0,
327
- "data-disabled": isDisabled || void 0,
328
- "data-readonly": state.isReadOnly || void 0,
329
- "data-invalid": state.isInvalid || void 0,
330
- "data-required": state.isRequired || void 0
331
- }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
332
- elementType: "span"
333
- }, /* @__PURE__ */ React__default.createElement("input", {
334
- ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
335
- ref: inputRef
336
- })), renderProps.children);
337
- });
338
- /**
339
- * A simple radio button.
340
- *
341
- * @component
342
- * @param {Object} props - Component props.
343
- * @param {JSX.Element} [props.icon] - The checkbox icon.
344
- * @param {string} [props.label] - The checkbox label.
345
- * @param {string} [props.subtitle] - The checkbox subtitle.
346
- * @param {boolean} [props.disabled] - Whether the checkbox is disabled.
347
- * @param {string} [props.className] - Additional classes to add to the checkbox container.
348
- * @param {string} [props.labelClassName] - Additional classes to add to the label container.
349
- * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
350
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
351
- * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
352
- *
353
- * @returns {JSX.Element} The RadioButton component.
354
- *
355
- * @see {@link RadioButtonGroup} for usage example.
356
- *
357
- * @preserve
358
- */
359
- const RadioButton = (props) => {
360
- const {
361
- icon,
362
- label,
363
- subtitle,
364
- disabled,
365
- className,
366
- labelClassName,
367
- design = "default",
368
- alignEnd,
369
- children,
370
- inlineSubtitle,
371
- hidden,
372
- ...rest
373
- } = props;
374
- if (hidden) {
375
- return null;
376
- }
377
- const styleClassName = {
378
- segmented: clsx(
379
- "es:cursor-pointer es:py-1 es:px-1.5 es:border es:border-secondary-300 es:hover:bg-secondary-100/75 es:transition es:min-h-10",
380
- "es:first:rounded-t-xl es:last:rounded-b-xl",
381
- "es:focus-visible:ring-2 es:focus-visible:border-accent-500 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
382
- "es:shadow-xs es:inset-ring es:inset-shadow-xs",
383
- "es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50"
384
- ),
385
- segmentedHorizontal: clsx(
386
- "es:cursor-pointer es:py-1 es:px-1.5 es:border es:border-secondary-300 es:hover:bg-secondary-100/75 es:transition es:grow es:min-h-10",
387
- "es:first:rounded-l-xl es:last:rounded-r-xl",
388
- "es:focus-visible:ring-2 es:focus-visible:border-accent-500 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
389
- "es:shadow-xs es:inset-ring es:inset-shadow-xs",
390
- "es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50"
391
- )
392
- };
393
- return /* @__PURE__ */ jsx(
394
- $b6c3ddc6086f204d$export$d7b12c4107be0d61,
395
- {
396
- isDisabled: disabled,
397
- className: clsx("es:group es:flex es:items-center es:gap-1.5 es:text-sm", styleClassName[design], className),
398
- ...rest,
399
- children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
400
- alignEnd && (label || subtitle || icon) && /* @__PURE__ */ jsx(
401
- RichLabel,
402
- {
403
- icon,
404
- label,
405
- subtitle,
406
- className: clsx("es:ml-1", labelClassName),
407
- inlineSubtitle,
408
- fullWidth: true,
409
- fullSizeSubtitle: true,
410
- as: $01b77f81d0f07f68$export$b04be29aa201d4f5
411
- }
412
- ),
413
- /* @__PURE__ */ jsx(
414
- "div",
415
- {
416
- className: clsx(
417
- "es:size-5 es:flex es:items-center es:justify-center",
418
- "es:transition es:cursor-pointer",
419
- "es:bg-radial es:border es:rounded-full",
420
- "es:shadow-xs es:inset-ring es:inset-shadow-xs",
421
- "es:any-focus:outline-hidden",
422
- !isSelected && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
423
- !isSelected && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",
424
- !isSelected && "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
425
- isSelected && "es:text-white es:from-accent-500 es:to-accent-600",
426
- isSelected && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
427
- isSelected && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
428
- !(design == null ? void 0 : design.startsWith("segmented")) && "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
429
- !(design == null ? void 0 : design.startsWith("segmented")) && !isSelected && "es:group-focus-visible:border-accent-500",
430
- !(design == null ? void 0 : design.startsWith("segmented")) && !alignEnd && subtitle && "es:mb-auto"
431
- ),
432
- children: /* @__PURE__ */ jsx(
433
- AnimatedVisibility,
434
- {
435
- transition: "scaleFade",
436
- visible: isSelected,
437
- className: clsx("es:icon:size-3 es:icon:stroke-2", disabled && "es:opacity-55"),
438
- noInitial: true,
439
- children: /* @__PURE__ */ jsx("div", { className: "es:size-2 es:rounded-full es:bg-white es:shadow-sm" })
440
- }
441
- )
442
- }
443
- ),
444
- !alignEnd && /* @__PURE__ */ jsx(
445
- RichLabel,
446
- {
447
- icon: alignEnd && icon,
448
- label,
449
- subtitle,
450
- className: clsx(labelClassName, subtitle && "es:mt-0.5", "es:[&_>_span_>_svg]:size-5 es:ml-0.5 es:*:space-y-0.5", disabled && "es:opacity-55"),
451
- inlineSubtitle,
452
- fullSizeSubtitle: true,
453
- as: $01b77f81d0f07f68$export$b04be29aa201d4f5
454
- }
455
- ),
456
- !(icon || label || subtitle) && children
457
- ] })
458
- }
459
- );
460
- };
461
- RadioButton.displayName = "RadioButton";
462
- /**
463
- * A group of radio buttons.
464
- * This component is required to control radio buttons.
465
- *
466
- * Each radio button should have a `value` set!
467
- *
468
- * @component
469
- * @param {Object} props - Component props.
470
- * @param {JSX.Element} [props.icon] - Icon to show before the label.
471
- * @param {string} [props.label] - Label to show above the control.
472
- * @param {string} [props.help] - Help text displayed below the control.
473
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
474
- * @param {string} [props.subtitle] - Subtitle to show below the label.
475
- * @param {RadioButtonGroupOrientation} [props.orientation='vertical'] - Orientation of the radio buttons.
476
- * @param {RadioButtonGroupDesign} [props.design='default'] - Design of the radio buttons.
477
- * @param {boolean} [props.disabled] - Whether the radio button group is disabled.
478
- * @param {boolean} [props.readOnly] - Whether the radio button group is read-only.
479
- * @param {string} [props.value] - Value of the currently selected radio button.
480
- * @param {Function} [props.onChange] - Function to call when the value of the selected radio button changes.
481
- * @param {string} [props.className] - Additional classes to add to the group container.
482
- * @param {string} [props.labelClassName] - Additional classes to add to the label container.
483
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
484
- *
485
- * @returns {JSX.Element} The RadioButtonGroup component.
486
- *
487
- * @typedef {'horizontal' | 'vertical'} RadioButtonGroupOrientation
488
- * @typedef {'default' | 'segmented'} RadioButtonGroupDesign
489
- *
490
- * @example
491
- * const [value, setValue] = useState('first'); // Or "null" if you don't want anything selected by default.
492
- *
493
- * <RadioButtonGroup
494
- * label='My radio buttons'
495
- * value={value}
496
- * onChange={setValue}
497
- * >
498
- * <RadioButton value='first' label='First option' />
499
- * <RadioButton value='second' label='Second option' />
500
- * </RadioButtonGroup>
501
- *
502
- * @preserve
503
- */
504
- const RadioButtonGroup = (props) => {
505
- const {
506
- icon,
507
- help,
508
- label,
509
- actions,
510
- subtitle,
511
- orientation = "vertical",
512
- design = "default",
513
- disabled,
514
- readOnly,
515
- value,
516
- onChange,
517
- children,
518
- className,
519
- labelClassName,
520
- hidden,
521
- ...rest
522
- } = props;
523
- if (hidden) {
524
- return null;
525
- }
526
- let mappedChildren = children ?? [];
527
- if (!Array.isArray(children)) {
528
- mappedChildren = [children];
529
- }
530
- mappedChildren = children.map((child, index) => {
531
- if (child.type.displayName !== "RadioButton") {
532
- return child;
533
- }
534
- return cloneElement(child, {
535
- design: orientation === "horizontal" ? `${design}Horizontal` : design,
536
- key: child.props.value ?? index
537
- });
538
- });
539
- return /* @__PURE__ */ jsx(
540
- $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
541
- {
542
- className: clsx("es:w-full", className),
543
- isDisabled: disabled,
544
- isReadOnly: readOnly,
545
- onChange,
546
- value,
547
- orientation,
548
- ...rest,
549
- children: /* @__PURE__ */ jsx(
550
- BaseControl,
551
- {
552
- icon,
553
- label,
554
- subtitle,
555
- actions,
556
- help,
557
- labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
558
- className: labelClassName,
559
- children: /* @__PURE__ */ jsx(
560
- "div",
561
- {
562
- className: clsx(
563
- design === "default" && orientation === "horizontal" && "es:flex es:flex-wrap es:gap-2.5",
564
- design === "default" && orientation === "vertical" && "es:flex es:flex-col es:gap-2.5",
565
- design === "segmented" && orientation === "vertical" && "es:flex es:flex-col es:-space-y-px",
566
- design === "segmented" && orientation === "horizontal" && "es:nowrap es:flex es:-space-x-px"
567
- ),
568
- children: mappedChildren
569
- }
570
- )
571
- }
572
- )
573
- }
574
- );
575
- };
576
- export {
577
- RadioButton,
578
- RadioButtonGroup
579
- };
@@ -1,5 +0,0 @@
1
- import { createContext } from "react";
2
- const RepeaterContext = createContext();
3
- export {
4
- RepeaterContext
5
- };