@yamada-ui/react 2.2.1-dev-20260428082432 → 2.2.1-dev-20260428083739

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 (235) hide show
  1. package/dist/cjs/components/slider/use-slider.cjs +6 -8
  2. package/dist/cjs/components/slider/use-slider.cjs.map +1 -1
  3. package/dist/esm/components/slider/use-slider.js +6 -8
  4. package/dist/esm/components/slider/use-slider.js.map +1 -1
  5. package/dist/types/components/accordion/accordion.d.ts +4 -2
  6. package/dist/types/components/accordion/use-accordion.d.ts +11 -11
  7. package/dist/types/components/action-bar/action-bar.d.ts +3 -2
  8. package/dist/types/components/airy/airy.d.ts +3 -2
  9. package/dist/types/components/alert/alert.d.ts +5 -2
  10. package/dist/types/components/alpha-slider/alpha-slider.d.ts +3 -2
  11. package/dist/types/components/aspect-ratio/aspect-ratio.d.ts +2 -2
  12. package/dist/types/components/autocomplete/autocomplete.d.ts +4 -2
  13. package/dist/types/components/autocomplete/autocomplete.style.d.ts +1 -1
  14. package/dist/types/components/autocomplete/use-autocomplete.d.ts +7 -5
  15. package/dist/types/components/avatar/avatar.d.ts +5 -5
  16. package/dist/types/components/avatar/use-avatar-group.d.ts +2 -2
  17. package/dist/types/components/badge/badge.d.ts +2 -2
  18. package/dist/types/components/bleed/bleed.d.ts +2 -2
  19. package/dist/types/components/blockquote/blockquote.d.ts +2 -2
  20. package/dist/types/components/breadcrumb/breadcrumb.d.ts +2 -2
  21. package/dist/types/components/breadcrumb/use-breadcrumb.d.ts +2 -2
  22. package/dist/types/components/button/button-group.d.ts +1 -0
  23. package/dist/types/components/button/button.d.ts +3 -2
  24. package/dist/types/components/button/icon-button.d.ts +2 -2
  25. package/dist/types/components/calendar/calendar.d.ts +3 -2
  26. package/dist/types/components/calendar/calendar.style.d.ts +2 -2
  27. package/dist/types/components/calendar/use-calendar.d.ts +9 -8
  28. package/dist/types/components/card/card.d.ts +2 -2
  29. package/dist/types/components/carousel/carousel.d.ts +3 -2
  30. package/dist/types/components/carousel/carousel.style.d.ts +2 -2
  31. package/dist/types/components/carousel/use-carousel.d.ts +3 -3
  32. package/dist/types/components/center/center.d.ts +2 -2
  33. package/dist/types/components/chart/area-chart.d.ts +2 -2
  34. package/dist/types/components/chart/bar-chart.d.ts +2 -2
  35. package/dist/types/components/chart/chart.d.ts +5 -5
  36. package/dist/types/components/chart/composed-chart.d.ts +2 -2
  37. package/dist/types/components/chart/donut-chart.d.ts +2 -2
  38. package/dist/types/components/chart/use-chart.d.ts +2 -2
  39. package/dist/types/components/checkbox/checkbox-group.d.ts +2 -0
  40. package/dist/types/components/checkbox/checkbox.d.ts +5 -4
  41. package/dist/types/components/checkbox/use-checkbox-group.d.ts +3 -2
  42. package/dist/types/components/checkbox/use-checkbox.d.ts +1 -0
  43. package/dist/types/components/checkbox-card/checkbox-card-group.d.ts +3 -0
  44. package/dist/types/components/checkbox-card/checkbox-card.d.ts +6 -4
  45. package/dist/types/components/circle-progress/circle-progress.d.ts +3 -2
  46. package/dist/types/components/close-button/close-button.d.ts +3 -2
  47. package/dist/types/components/code/code.d.ts +2 -2
  48. package/dist/types/components/collapse/collapse.d.ts +3 -2
  49. package/dist/types/components/color-picker/color-picker.d.ts +6 -2
  50. package/dist/types/components/color-picker/color-picker.style.d.ts +1 -1
  51. package/dist/types/components/color-picker/use-color-picker.d.ts +5 -2
  52. package/dist/types/components/color-selector/color-selector.d.ts +6 -2
  53. package/dist/types/components/color-selector/color-selector.style.d.ts +2 -2
  54. package/dist/types/components/color-selector/use-color-selector.d.ts +5 -3
  55. package/dist/types/components/color-swatch/color-swatch.d.ts +2 -2
  56. package/dist/types/components/container/container.d.ts +2 -2
  57. package/dist/types/components/data-list/data-list.d.ts +2 -2
  58. package/dist/types/components/date-picker/date-picker.d.ts +5 -2
  59. package/dist/types/components/date-picker/use-date-picker.d.ts +7 -4
  60. package/dist/types/components/drawer/drawer.d.ts +5 -2
  61. package/dist/types/components/drawer/use-drawer.d.ts +2 -0
  62. package/dist/types/components/dropzone/dropzone.d.ts +7 -4
  63. package/dist/types/components/dropzone/use-dropzone.d.ts +1 -0
  64. package/dist/types/components/editable/editable.d.ts +5 -4
  65. package/dist/types/components/editable/use-editable.d.ts +3 -2
  66. package/dist/types/components/em/em.d.ts +2 -2
  67. package/dist/types/components/empty-state/empty-state.d.ts +2 -2
  68. package/dist/types/components/fade/fade.d.ts +3 -2
  69. package/dist/types/components/fade-scale/fade-scale.d.ts +1 -0
  70. package/dist/types/components/field/field.d.ts +3 -3
  71. package/dist/types/components/field/field.style.d.ts +2 -2
  72. package/dist/types/components/field/use-field-props.d.ts +3 -3
  73. package/dist/types/components/fieldset/fieldset.d.ts +4 -3
  74. package/dist/types/components/fieldset/fieldset.style.d.ts +1 -1
  75. package/dist/types/components/file-button/file-button.d.ts +4 -2
  76. package/dist/types/components/file-button/use-file-button.d.ts +20 -18
  77. package/dist/types/components/file-input/file-input.d.ts +4 -2
  78. package/dist/types/components/file-input/use-file-input.d.ts +16 -15
  79. package/dist/types/components/flex/flex.d.ts +2 -2
  80. package/dist/types/components/flip/flip.d.ts +5 -4
  81. package/dist/types/components/float/float.d.ts +2 -2
  82. package/dist/types/components/form/form.d.ts +4 -3
  83. package/dist/types/components/format/format-byte.d.ts +4 -4
  84. package/dist/types/components/format/format-date-time.d.ts +4 -4
  85. package/dist/types/components/format/format-number.d.ts +2 -2
  86. package/dist/types/components/format/use-format-byte.d.ts +1 -0
  87. package/dist/types/components/format/use-format-date-time.d.ts +1 -0
  88. package/dist/types/components/format/use-format-number.d.ts +1 -0
  89. package/dist/types/components/grid/grid-item.d.ts +2 -2
  90. package/dist/types/components/grid/grid.d.ts +2 -2
  91. package/dist/types/components/group/group.d.ts +3 -2
  92. package/dist/types/components/group/use-group.d.ts +2 -2
  93. package/dist/types/components/heading/heading.d.ts +2 -2
  94. package/dist/types/components/highlight/highlight.d.ts +2 -0
  95. package/dist/types/components/hue-slider/hue-slider.d.ts +4 -3
  96. package/dist/types/components/icon/icon.d.ts +5 -5
  97. package/dist/types/components/image/image.d.ts +2 -2
  98. package/dist/types/components/indicator/indicator.d.ts +5 -4
  99. package/dist/types/components/infinite-scroll-area/infinite-scroll-area.d.ts +2 -2
  100. package/dist/types/components/input/input-addon.d.ts +2 -2
  101. package/dist/types/components/input/input-element.d.ts +2 -2
  102. package/dist/types/components/input/input-group.d.ts +2 -0
  103. package/dist/types/components/input/input.d.ts +3 -2
  104. package/dist/types/components/kbd/kbd.d.ts +2 -2
  105. package/dist/types/components/link/link.d.ts +2 -2
  106. package/dist/types/components/link-box/link-box.d.ts +2 -2
  107. package/dist/types/components/list/list.d.ts +2 -2
  108. package/dist/types/components/loading/loading-provider.d.ts +2 -2
  109. package/dist/types/components/loading/loading.d.ts +4 -3
  110. package/dist/types/components/loading/use-loading-component.d.ts +1 -0
  111. package/dist/types/components/mark/mark.d.ts +2 -2
  112. package/dist/types/components/menu/menu.d.ts +3 -2
  113. package/dist/types/components/menu/use-menu.d.ts +11 -11
  114. package/dist/types/components/modal/modal.d.ts +6 -2
  115. package/dist/types/components/native-accordion/native-accordion.d.ts +2 -2
  116. package/dist/types/components/native-accordion/use-native-accordion.d.ts +2 -2
  117. package/dist/types/components/native-popover/native-popover.d.ts +2 -2
  118. package/dist/types/components/native-select/native-select.d.ts +4 -2
  119. package/dist/types/components/native-select/use-native-select.d.ts +1 -0
  120. package/dist/types/components/native-table/native-table.d.ts +4 -4
  121. package/dist/types/components/notice/notice.style.d.ts +1 -1
  122. package/dist/types/components/notice/use-notice.d.ts +3 -0
  123. package/dist/types/components/number-input/number-input.d.ts +3 -2
  124. package/dist/types/components/number-input/number-input.style.d.ts +1 -1
  125. package/dist/types/components/number-input/use-number-input.d.ts +1 -0
  126. package/dist/types/components/pagination/pagination.d.ts +3 -2
  127. package/dist/types/components/pagination/use-pagination.d.ts +2 -2
  128. package/dist/types/components/password-input/password-input.d.ts +3 -2
  129. package/dist/types/components/password-input/strength-meter.d.ts +2 -2
  130. package/dist/types/components/password-input/use-password-input.d.ts +3 -2
  131. package/dist/types/components/picture/picture.d.ts +1 -0
  132. package/dist/types/components/pin-input/pin-input.d.ts +4 -2
  133. package/dist/types/components/pin-input/use-pin-input.d.ts +8 -7
  134. package/dist/types/components/popover/popover.d.ts +3 -2
  135. package/dist/types/components/progress/progress.d.ts +4 -4
  136. package/dist/types/components/progress/use-progress.d.ts +706 -706
  137. package/dist/types/components/qr-code/qr-code.d.ts +2 -2
  138. package/dist/types/components/radio/radio-group.d.ts +2 -0
  139. package/dist/types/components/radio/radio.d.ts +5 -4
  140. package/dist/types/components/radio/use-radio-group.d.ts +3 -2
  141. package/dist/types/components/radio/use-radio.d.ts +1 -0
  142. package/dist/types/components/radio-card/radio-card-group.d.ts +3 -0
  143. package/dist/types/components/radio-card/radio-card.d.ts +6 -4
  144. package/dist/types/components/rating/use-rating.d.ts +8 -7
  145. package/dist/types/components/reorder/reorder.d.ts +3 -2
  146. package/dist/types/components/reorder/reorder.style.d.ts +1 -1
  147. package/dist/types/components/reorder/use-reorder.d.ts +3 -3
  148. package/dist/types/components/resizable/resizable.d.ts +2 -2
  149. package/dist/types/components/resizable/resizable.style.d.ts +2 -2
  150. package/dist/types/components/resizable/use-resizable.d.ts +2 -2
  151. package/dist/types/components/ripple/ripple.d.ts +3 -2
  152. package/dist/types/components/ripple/use-ripple.d.ts +2 -2
  153. package/dist/types/components/rotate/rotate.d.ts +3 -2
  154. package/dist/types/components/saturation-slider/saturation-slider.d.ts +2 -2
  155. package/dist/types/components/saturation-slider/use-saturation-slider.d.ts +3 -2
  156. package/dist/types/components/scroll-area/scroll-area.d.ts +2 -2
  157. package/dist/types/components/segmented-control/segmented-control.d.ts +3 -2
  158. package/dist/types/components/segmented-control/use-segmented-control.d.ts +10 -9
  159. package/dist/types/components/select/select.d.ts +4 -2
  160. package/dist/types/components/select/use-select.d.ts +6 -4
  161. package/dist/types/components/separator/separator.d.ts +2 -2
  162. package/dist/types/components/sidebar/sidebar.d.ts +7 -2
  163. package/dist/types/components/sidebar/use-sidebar.d.ts +9 -9
  164. package/dist/types/components/simple-grid/simple-grid.d.ts +3 -2
  165. package/dist/types/components/skeleton/skeleton.d.ts +2 -2
  166. package/dist/types/components/slide/slide.d.ts +3 -2
  167. package/dist/types/components/slide-fade/slide-fade.d.ts +3 -2
  168. package/dist/types/components/slider/slider.d.ts +2 -2
  169. package/dist/types/components/slider/use-slider.d.ts +3 -2
  170. package/dist/types/components/snacks/snacks.d.ts +2 -0
  171. package/dist/types/components/snacks/use-snacks.d.ts +1 -0
  172. package/dist/types/components/stack/h-stack.d.ts +2 -2
  173. package/dist/types/components/stack/stack.d.ts +2 -2
  174. package/dist/types/components/stack/v-stack.d.ts +2 -2
  175. package/dist/types/components/stack/z-stack.d.ts +2 -2
  176. package/dist/types/components/stat/stat.d.ts +2 -2
  177. package/dist/types/components/stat/stat.style.d.ts +2 -2
  178. package/dist/types/components/status/status.d.ts +2 -2
  179. package/dist/types/components/steps/steps.d.ts +2 -2
  180. package/dist/types/components/steps/use-steps.d.ts +10 -10
  181. package/dist/types/components/switch/switch.d.ts +2 -2
  182. package/dist/types/components/switch/use-switch.d.ts +1 -0
  183. package/dist/types/components/table/table.d.ts +4 -2
  184. package/dist/types/components/tabs/tabs.d.ts +2 -2
  185. package/dist/types/components/tabs/use-tabs.d.ts +16 -16
  186. package/dist/types/components/tag/tag.d.ts +2 -2
  187. package/dist/types/components/text/text.d.ts +2 -2
  188. package/dist/types/components/textarea/textarea.d.ts +4 -2
  189. package/dist/types/components/textarea/use-autosize.d.ts +2 -2
  190. package/dist/types/components/timeline/timeline.d.ts +4 -4
  191. package/dist/types/components/tip/tip.d.ts +3 -0
  192. package/dist/types/components/toggle/toggle-group.d.ts +1 -1
  193. package/dist/types/components/toggle/toggle.d.ts +5 -3
  194. package/dist/types/components/toggle/use-toggle-group.d.ts +2 -2
  195. package/dist/types/components/toggle/use-toggle.d.ts +3 -2
  196. package/dist/types/components/tooltip/tooltip.d.ts +4 -2
  197. package/dist/types/components/tree/tree.d.ts +6 -2
  198. package/dist/types/components/tree/use-tree.d.ts +183 -182
  199. package/dist/types/components/visually-hidden/visually-hidden.d.ts +2 -2
  200. package/dist/types/components/wrap/wrap.d.ts +3 -2
  201. package/dist/types/core/components/create-component.d.ts +7 -9
  202. package/dist/types/core/components/index.types.d.ts +0 -1
  203. package/dist/types/core/components/use-component-style.d.ts +0 -2
  204. package/dist/types/core/components/utils.d.ts +0 -1
  205. package/dist/types/core/constant.d.ts +0 -1
  206. package/dist/types/core/css/calc.d.ts +0 -1
  207. package/dist/types/core/css/config.d.ts +0 -1
  208. package/dist/types/core/css/css.d.ts +0 -1
  209. package/dist/types/core/css/index.types.d.ts +0 -1
  210. package/dist/types/core/css/styles.d.ts +0 -1
  211. package/dist/types/core/css/token.d.ts +0 -1
  212. package/dist/types/core/css/use-css.d.ts +0 -1
  213. package/dist/types/core/css/utils.d.ts +0 -2
  214. package/dist/types/core/generated-theme-tokens.types.d.ts +0 -1
  215. package/dist/types/core/index.d.ts +0 -2
  216. package/dist/types/core/system/color-mode-provider.d.ts +2 -2
  217. package/dist/types/core/system/config.d.ts +0 -1
  218. package/dist/types/core/system/create-system.d.ts +0 -1
  219. package/dist/types/core/system/factory.d.ts +0 -1
  220. package/dist/types/core/system/index.types.d.ts +0 -1
  221. package/dist/types/core/system/storage-script.d.ts +3 -3
  222. package/dist/types/core/system/styled.d.ts +2 -3
  223. package/dist/types/core/system/system-provider.d.ts +2 -2
  224. package/dist/types/core/system/var.d.ts +0 -2
  225. package/dist/types/hooks/use-async-callback/index.d.ts +1 -0
  226. package/dist/types/hooks/use-breakpoint/use-breakpoint-state.d.ts +2 -2
  227. package/dist/types/hooks/use-clipboard/index.d.ts +2 -2
  228. package/dist/types/hooks/use-combobox/index.d.ts +13 -12
  229. package/dist/types/hooks/use-counter/index.d.ts +2 -2
  230. package/dist/types/hooks/use-descendants/index.d.ts +2 -2
  231. package/dist/types/index.d.ts +106 -0
  232. package/dist/types/providers/i18n-provider/i18n-provider.d.ts +3 -3
  233. package/dist/types/providers/ui-provider/ui-provider.d.ts +3 -2
  234. package/dist/types/utils/children.d.ts +2 -2
  235. package/package.json +2 -2
@@ -4,6 +4,8 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
4
4
  const require_dom = require('../../utils/dom.cjs');
5
5
  const require_ref = require('../../utils/ref.cjs');
6
6
  const require_utils_index = require('../../utils/index.cjs');
7
+ const require_props = require('../../core/components/props.cjs');
8
+ require('../../core/index.cjs');
7
9
  const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
8
10
  const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
9
11
  require('../../providers/i18n-provider/index.cjs');
@@ -136,14 +138,10 @@ const useSlider = (props = {}) => {
136
138
  tenStep
137
139
  ]);
138
140
  const getRootProps = (0, react.useCallback)((props$1 = {}) => {
139
- const computedProps = {
140
- ...dataProps,
141
- "data-orientation": orientation,
142
- ...rest,
143
- ...props$1,
144
- onBlur: (0, require_utils_index.utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
145
- onFocus: (0, require_utils_index.utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
146
- };
141
+ const computedProps = require_props.mergeProps(dataProps, { "data-orientation": orientation }, rest, props$1, {
142
+ onBlur: eventProps.onBlur,
143
+ onFocus: eventProps.onFocus
144
+ })();
147
145
  computedProps.style ??= {};
148
146
  if ((0, require_utils_index.utils_exports.isArray)(percent)) {
149
147
  computedProps.style["--range-start"] = `${Math.abs(percent[0])}%`;
@@ -1 +1 @@
1
- {"version":3,"file":"use-slider.cjs","names":["useFieldProps","useControllableState","useI18n","usePanEvent","value","min","max","step","getRootProps: PropGetter","computedProps: HTMLProps","props","getInputProps: PropGetter<\"input\", { index?: number }>","visuallyHiddenAttributes","mergeRefs","getTrackProps: PropGetter","getRangeProps: PropGetter","valueProp","percent","rest","props: HTMLProps"],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n runKeyAction,\n valueToPercent,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] | number = number>\n extends\n Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n * The minimum distance between slider thumbs.\n * Useful for preventing the thumbs from being too close together.\n *\n * @default 0\n */\n betweenThumbs?: number\n /**\n * The initial value of the slider.\n */\n defaultValue?: Y\n /**\n * The base `id` to use for the slider.\n */\n id?: string\n /**\n * The maximum allowed value of the slider. Cannot be less than min.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum allowed value of the slider. Cannot be greater than max.\n *\n * @default 0\n */\n min?: number\n /**\n * The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n */\n name?: string\n /**\n * The orientation of the slider.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * The step in which increments or decrements have to be made.\n *\n * @default 1\n */\n step?: number\n /**\n * The value of the slider.\n */\n value?: Y\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number, index: number) => string | undefined\n /**\n * Function called whenever the slider value changes.\n */\n onChange?: (value: Y) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (value: Y) => void\n /**\n * Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] | number = number>(\n props: UseSliderProps<Y> = {},\n) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n betweenThumbs = 0,\n defaultValue = 0 as Y,\n disabled,\n getAriaValueText,\n max = 100,\n min = 0,\n orientation = \"horizontal\",\n readOnly,\n required,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"slider\")\n const currentIndex = useRef(0)\n const interactive = !(disabled || readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const start = currentIndex.current === 0\n const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeEnd?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n onChangeEnd?.(panValue as Y)\n }\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChange(currentIndex.current, panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const distances = value.map((value) => Math.abs(value - panValue))\n const closest = Math.min(...distances)\n const index = distances.indexOf(closest)\n\n currentIndex.current = index\n\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeStart?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n currentIndex.current = 0\n\n onChangeStart?.(value as Y)\n }\n\n onChange(currentIndex.current, panValue)\n },\n })\n const range = !isNumber(value)\n const percent = (\n range\n ? value.map((value) => valueToPercent(value, min, max))\n : valueToPercent(value, min, max)\n ) as Y extends number ? number : number[]\n const tenStep = (max - min) / 10\n const oneStep = step || (max - min) / 100\n\n if (max < min) console.warn(\"Do not assign a number less than 'min' to 'max'\")\n\n const getMinMax = useCallback(\n (index: number) => {\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = range ? value[oppositeIndex] : value\n\n return {\n max: range ? (start ? oppositeValue - betweenThumbs : max) : max,\n min: range ? (start ? min : oppositeValue + betweenThumbs) : min,\n }\n },\n [betweenThumbs, max, min, range, value],\n )\n\n const getPanValue = useCallback(\n ({ x, y }: Point, { bottom, height, left, width }: DOMRect) => {\n const diff = orientation === \"horizontal\" ? x - left : bottom - y\n const length = orientation === \"horizontal\" ? width : height\n const percent = diff / length\n\n let nextValue = percentToValue(percent, min, max)\n\n nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n nextValue = clampNumber(nextValue, min, max)\n\n return nextValue\n },\n [orientation, min, max, step],\n )\n\n const onChange = useCallback(\n (index: number, value: number) => {\n if (!interactive) return\n\n const { max, min } = getMinMax(index)\n\n value = parseFloat(roundNumberToStep(value, min, oneStep))\n value = clampNumber(value, min, max)\n\n setValue((prev) => {\n if (isArray(prev)) {\n const next = [...prev]\n\n next[index] = value\n\n return next as Y\n } else {\n return value as Y\n }\n })\n },\n [getMinMax, interactive, oneStep, setValue],\n )\n\n const stepUp = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! + step)\n : onChange(index, value + step),\n [oneStep, range, onChange, value],\n )\n\n const stepDown = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! - step)\n : onChange(index, value - step),\n [oneStep, range, onChange, value],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLDivElement>) => {\n const { max, min } = getMinMax(index)\n\n runKeyAction(ev, {\n ArrowDown: () => stepDown(index),\n ArrowLeft: () => stepDown(index),\n ArrowRight: () => stepUp(index),\n ArrowUp: () => stepUp(index),\n End: () => onChange(index, max),\n Home: () => onChange(index, min),\n PageDown: () => stepDown(index, tenStep),\n PageUp: () => stepUp(index, tenStep),\n })\n },\n [getMinMax, onChange, stepDown, stepUp, tenStep],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const computedProps: HTMLProps = {\n ...dataProps,\n \"data-orientation\": orientation,\n ...rest,\n ...props,\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n computedProps.style ??= {}\n\n if (isArray(percent)) {\n computedProps.style[\"--range-start\"] = `${Math.abs(percent[0]!)}%`\n computedProps.style[\"--range-end\"] = `${Math.abs(percent[1]!)}%`\n } else {\n computedProps.style[\"--range-start\"] = \"0%\"\n computedProps.style[\"--range-end\"] = `${Math.abs(percent)}%`\n }\n\n return computedProps\n },\n [dataProps, eventProps, orientation, percent, rest],\n )\n\n const getInputProps: PropGetter<\"input\", { index?: number }> = useCallback(\n ({ index = 0, ...props } = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: range ? value[index]! : value,\n ...props,\n ref: index === 0 ? mergeRefs(props.ref, ref) : props.ref,\n }),\n [\n dataProps,\n ariaProps,\n id,\n name,\n disabled,\n readOnly,\n required,\n range,\n value,\n ref,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props) =>\n getPanEventProps({\n ...dataProps,\n \"data-orientation\": orientation,\n ...props,\n }),\n [dataProps, getPanEventProps, orientation],\n )\n\n const getRangeProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n \"data-orientation\": orientation,\n \"data-range\": dataAttr(range),\n ...props,\n }),\n [dataProps, orientation, range],\n )\n\n const getMarkProps: RequiredPropGetter<\"div\", { value: number }> =\n useCallback(\n ({ style, value: valueProp, ...props }) => {\n const between = range\n ? value[0] < valueProp && valueProp < value[1]\n : valueProp < value\n const percent = valueToPercent(valueProp, min, max)\n\n return {\n ...dataProps,\n \"aria-hidden\": true,\n \"data-between\": dataAttr(between),\n \"data-orientation\": orientation,\n role: \"presentation\",\n ...props,\n style: { ...style, \"--mark-position\": `${percent}%` },\n }\n },\n [dataProps, max, min, orientation, range, value],\n )\n\n const getThumbProps: PropGetter<\"div\", { index?: number }> = useCallback(\n ({ index = 0, ...rest } = {}) => {\n const { max, min } = getMinMax(index)\n\n const props: HTMLProps = {\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Slider thumb\"),\n \"aria-orientation\": orientation,\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...rest,\n \"aria-labelledby\": cx(rest[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(rest.onKeyDown, onKeyDown(index)),\n }\n\n if (range) {\n const currentValue = value[index]!\n\n props[\"data-start\"] = dataAttr(index === 0)\n props[\"data-end\"] = dataAttr(index === 1)\n props[\"aria-valuenow\"] = currentValue\n props[\"aria-valuetext\"] =\n ariaValueText ??\n getAriaValueText?.(currentValue, index) ??\n currentValue.toString()\n } else {\n props[\"data-end\"] = dataAttr(index === 0)\n props[\"aria-valuenow\"] = value\n props[\"aria-valuetext\"] =\n ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString()\n }\n\n return props\n },\n [\n t,\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n getMinMax,\n interactive,\n onKeyDown,\n orientation,\n range,\n value,\n ],\n )\n\n return {\n percent,\n range,\n setValue,\n stepDown,\n stepUp,\n value,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSliderReturn = ReturnType<typeof useSlider>\n"],"mappings":"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"}
1
+ {"version":3,"file":"use-slider.cjs","names":["useFieldProps","useControllableState","useI18n","usePanEvent","value","min","max","step","getRootProps: PropGetter","computedProps: HTMLProps","mergeProps","props","getInputProps: PropGetter<\"input\", { index?: number }>","visuallyHiddenAttributes","mergeRefs","getTrackProps: PropGetter","getRangeProps: PropGetter","valueProp","percent","rest","props: HTMLProps"],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n runKeyAction,\n valueToPercent,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] | number = number>\n extends\n Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n * The minimum distance between slider thumbs.\n * Useful for preventing the thumbs from being too close together.\n *\n * @default 0\n */\n betweenThumbs?: number\n /**\n * The initial value of the slider.\n */\n defaultValue?: Y\n /**\n * The base `id` to use for the slider.\n */\n id?: string\n /**\n * The maximum allowed value of the slider. Cannot be less than min.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum allowed value of the slider. Cannot be greater than max.\n *\n * @default 0\n */\n min?: number\n /**\n * The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n */\n name?: string\n /**\n * The orientation of the slider.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * The step in which increments or decrements have to be made.\n *\n * @default 1\n */\n step?: number\n /**\n * The value of the slider.\n */\n value?: Y\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number, index: number) => string | undefined\n /**\n * Function called whenever the slider value changes.\n */\n onChange?: (value: Y) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (value: Y) => void\n /**\n * Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] | number = number>(\n props: UseSliderProps<Y> = {},\n) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n betweenThumbs = 0,\n defaultValue = 0 as Y,\n disabled,\n getAriaValueText,\n max = 100,\n min = 0,\n orientation = \"horizontal\",\n readOnly,\n required,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"slider\")\n const currentIndex = useRef(0)\n const interactive = !(disabled || readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const start = currentIndex.current === 0\n const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeEnd?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n onChangeEnd?.(panValue as Y)\n }\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChange(currentIndex.current, panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const distances = value.map((value) => Math.abs(value - panValue))\n const closest = Math.min(...distances)\n const index = distances.indexOf(closest)\n\n currentIndex.current = index\n\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeStart?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n currentIndex.current = 0\n\n onChangeStart?.(value as Y)\n }\n\n onChange(currentIndex.current, panValue)\n },\n })\n const range = !isNumber(value)\n const percent = (\n range\n ? value.map((value) => valueToPercent(value, min, max))\n : valueToPercent(value, min, max)\n ) as Y extends number ? number : number[]\n const tenStep = (max - min) / 10\n const oneStep = step || (max - min) / 100\n\n if (max < min) console.warn(\"Do not assign a number less than 'min' to 'max'\")\n\n const getMinMax = useCallback(\n (index: number) => {\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = range ? value[oppositeIndex] : value\n\n return {\n max: range ? (start ? oppositeValue - betweenThumbs : max) : max,\n min: range ? (start ? min : oppositeValue + betweenThumbs) : min,\n }\n },\n [betweenThumbs, max, min, range, value],\n )\n\n const getPanValue = useCallback(\n ({ x, y }: Point, { bottom, height, left, width }: DOMRect) => {\n const diff = orientation === \"horizontal\" ? x - left : bottom - y\n const length = orientation === \"horizontal\" ? width : height\n const percent = diff / length\n\n let nextValue = percentToValue(percent, min, max)\n\n nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n nextValue = clampNumber(nextValue, min, max)\n\n return nextValue\n },\n [orientation, min, max, step],\n )\n\n const onChange = useCallback(\n (index: number, value: number) => {\n if (!interactive) return\n\n const { max, min } = getMinMax(index)\n\n value = parseFloat(roundNumberToStep(value, min, oneStep))\n value = clampNumber(value, min, max)\n\n setValue((prev) => {\n if (isArray(prev)) {\n const next = [...prev]\n\n next[index] = value\n\n return next as Y\n } else {\n return value as Y\n }\n })\n },\n [getMinMax, interactive, oneStep, setValue],\n )\n\n const stepUp = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! + step)\n : onChange(index, value + step),\n [oneStep, range, onChange, value],\n )\n\n const stepDown = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! - step)\n : onChange(index, value - step),\n [oneStep, range, onChange, value],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLDivElement>) => {\n const { max, min } = getMinMax(index)\n\n runKeyAction(ev, {\n ArrowDown: () => stepDown(index),\n ArrowLeft: () => stepDown(index),\n ArrowRight: () => stepUp(index),\n ArrowUp: () => stepUp(index),\n End: () => onChange(index, max),\n Home: () => onChange(index, min),\n PageDown: () => stepDown(index, tenStep),\n PageUp: () => stepUp(index, tenStep),\n })\n },\n [getMinMax, onChange, stepDown, stepUp, tenStep],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const computedProps: HTMLProps = mergeProps(\n dataProps,\n { \"data-orientation\": orientation },\n rest,\n props,\n { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n )()\n\n computedProps.style ??= {}\n\n if (isArray(percent)) {\n computedProps.style[\"--range-start\"] = `${Math.abs(percent[0]!)}%`\n computedProps.style[\"--range-end\"] = `${Math.abs(percent[1]!)}%`\n } else {\n computedProps.style[\"--range-start\"] = \"0%\"\n computedProps.style[\"--range-end\"] = `${Math.abs(percent)}%`\n }\n\n return computedProps\n },\n [dataProps, eventProps, orientation, percent, rest],\n )\n\n const getInputProps: PropGetter<\"input\", { index?: number }> = useCallback(\n ({ index = 0, ...props } = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: range ? value[index]! : value,\n ...props,\n ref: index === 0 ? mergeRefs(props.ref, ref) : props.ref,\n }),\n [\n dataProps,\n ariaProps,\n id,\n name,\n disabled,\n readOnly,\n required,\n range,\n value,\n ref,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props) =>\n getPanEventProps({\n ...dataProps,\n \"data-orientation\": orientation,\n ...props,\n }),\n [dataProps, getPanEventProps, orientation],\n )\n\n const getRangeProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n \"data-orientation\": orientation,\n \"data-range\": dataAttr(range),\n ...props,\n }),\n [dataProps, orientation, range],\n )\n\n const getMarkProps: RequiredPropGetter<\"div\", { value: number }> =\n useCallback(\n ({ style, value: valueProp, ...props }) => {\n const between = range\n ? value[0] < valueProp && valueProp < value[1]\n : valueProp < value\n const percent = valueToPercent(valueProp, min, max)\n\n return {\n ...dataProps,\n \"aria-hidden\": true,\n \"data-between\": dataAttr(between),\n \"data-orientation\": orientation,\n role: \"presentation\",\n ...props,\n style: { ...style, \"--mark-position\": `${percent}%` },\n }\n },\n [dataProps, max, min, orientation, range, value],\n )\n\n const getThumbProps: PropGetter<\"div\", { index?: number }> = useCallback(\n ({ index = 0, ...rest } = {}) => {\n const { max, min } = getMinMax(index)\n\n const props: HTMLProps = {\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Slider thumb\"),\n \"aria-orientation\": orientation,\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...rest,\n \"aria-labelledby\": cx(rest[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(rest.onKeyDown, onKeyDown(index)),\n }\n\n if (range) {\n const currentValue = value[index]!\n\n props[\"data-start\"] = dataAttr(index === 0)\n props[\"data-end\"] = dataAttr(index === 1)\n props[\"aria-valuenow\"] = currentValue\n props[\"aria-valuetext\"] =\n ariaValueText ??\n getAriaValueText?.(currentValue, index) ??\n currentValue.toString()\n } else {\n props[\"data-end\"] = dataAttr(index === 0)\n props[\"aria-valuenow\"] = value\n props[\"aria-valuetext\"] =\n ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString()\n }\n\n return props\n },\n [\n t,\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n getMinMax,\n interactive,\n onKeyDown,\n orientation,\n range,\n value,\n ],\n )\n\n return {\n percent,\n range,\n setValue,\n stepDown,\n stepUp,\n value,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSliderReturn = ReturnType<typeof useSlider>\n"],"mappings":"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"}
@@ -3,6 +3,8 @@
3
3
  import { runKeyAction, visuallyHiddenAttributes } from "../../utils/dom.js";
4
4
  import { mergeRefs } from "../../utils/ref.js";
5
5
  import { utils_exports } from "../../utils/index.js";
6
+ import { mergeProps } from "../../core/components/props.js";
7
+ import "../../core/index.js";
6
8
  import { useControllableState } from "../../hooks/use-controllable-state/index.js";
7
9
  import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
8
10
  import "../../providers/i18n-provider/index.js";
@@ -135,14 +137,10 @@ const useSlider = (props = {}) => {
135
137
  tenStep
136
138
  ]);
137
139
  const getRootProps = useCallback((props$1 = {}) => {
138
- const computedProps = {
139
- ...dataProps,
140
- "data-orientation": orientation,
141
- ...rest,
142
- ...props$1,
143
- onBlur: (0, utils_exports.handlerAll)(props$1.onBlur, eventProps.onBlur),
144
- onFocus: (0, utils_exports.handlerAll)(props$1.onFocus, eventProps.onFocus)
145
- };
140
+ const computedProps = mergeProps(dataProps, { "data-orientation": orientation }, rest, props$1, {
141
+ onBlur: eventProps.onBlur,
142
+ onFocus: eventProps.onFocus
143
+ })();
146
144
  computedProps.style ??= {};
147
145
  if ((0, utils_exports.isArray)(percent)) {
148
146
  computedProps.style["--range-start"] = `${Math.abs(percent[0])}%`;
@@ -1 +1 @@
1
- {"version":3,"file":"use-slider.js","names":["value","min","max","step","getRootProps: PropGetter","computedProps: HTMLProps","props","getInputProps: PropGetter<\"input\", { index?: number }>","getTrackProps: PropGetter","getRangeProps: PropGetter","valueProp","percent","rest","props: HTMLProps"],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n runKeyAction,\n valueToPercent,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] | number = number>\n extends\n Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n * The minimum distance between slider thumbs.\n * Useful for preventing the thumbs from being too close together.\n *\n * @default 0\n */\n betweenThumbs?: number\n /**\n * The initial value of the slider.\n */\n defaultValue?: Y\n /**\n * The base `id` to use for the slider.\n */\n id?: string\n /**\n * The maximum allowed value of the slider. Cannot be less than min.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum allowed value of the slider. Cannot be greater than max.\n *\n * @default 0\n */\n min?: number\n /**\n * The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n */\n name?: string\n /**\n * The orientation of the slider.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * The step in which increments or decrements have to be made.\n *\n * @default 1\n */\n step?: number\n /**\n * The value of the slider.\n */\n value?: Y\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number, index: number) => string | undefined\n /**\n * Function called whenever the slider value changes.\n */\n onChange?: (value: Y) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (value: Y) => void\n /**\n * Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] | number = number>(\n props: UseSliderProps<Y> = {},\n) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n betweenThumbs = 0,\n defaultValue = 0 as Y,\n disabled,\n getAriaValueText,\n max = 100,\n min = 0,\n orientation = \"horizontal\",\n readOnly,\n required,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"slider\")\n const currentIndex = useRef(0)\n const interactive = !(disabled || readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const start = currentIndex.current === 0\n const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeEnd?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n onChangeEnd?.(panValue as Y)\n }\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChange(currentIndex.current, panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const distances = value.map((value) => Math.abs(value - panValue))\n const closest = Math.min(...distances)\n const index = distances.indexOf(closest)\n\n currentIndex.current = index\n\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeStart?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n currentIndex.current = 0\n\n onChangeStart?.(value as Y)\n }\n\n onChange(currentIndex.current, panValue)\n },\n })\n const range = !isNumber(value)\n const percent = (\n range\n ? value.map((value) => valueToPercent(value, min, max))\n : valueToPercent(value, min, max)\n ) as Y extends number ? number : number[]\n const tenStep = (max - min) / 10\n const oneStep = step || (max - min) / 100\n\n if (max < min) console.warn(\"Do not assign a number less than 'min' to 'max'\")\n\n const getMinMax = useCallback(\n (index: number) => {\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = range ? value[oppositeIndex] : value\n\n return {\n max: range ? (start ? oppositeValue - betweenThumbs : max) : max,\n min: range ? (start ? min : oppositeValue + betweenThumbs) : min,\n }\n },\n [betweenThumbs, max, min, range, value],\n )\n\n const getPanValue = useCallback(\n ({ x, y }: Point, { bottom, height, left, width }: DOMRect) => {\n const diff = orientation === \"horizontal\" ? x - left : bottom - y\n const length = orientation === \"horizontal\" ? width : height\n const percent = diff / length\n\n let nextValue = percentToValue(percent, min, max)\n\n nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n nextValue = clampNumber(nextValue, min, max)\n\n return nextValue\n },\n [orientation, min, max, step],\n )\n\n const onChange = useCallback(\n (index: number, value: number) => {\n if (!interactive) return\n\n const { max, min } = getMinMax(index)\n\n value = parseFloat(roundNumberToStep(value, min, oneStep))\n value = clampNumber(value, min, max)\n\n setValue((prev) => {\n if (isArray(prev)) {\n const next = [...prev]\n\n next[index] = value\n\n return next as Y\n } else {\n return value as Y\n }\n })\n },\n [getMinMax, interactive, oneStep, setValue],\n )\n\n const stepUp = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! + step)\n : onChange(index, value + step),\n [oneStep, range, onChange, value],\n )\n\n const stepDown = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! - step)\n : onChange(index, value - step),\n [oneStep, range, onChange, value],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLDivElement>) => {\n const { max, min } = getMinMax(index)\n\n runKeyAction(ev, {\n ArrowDown: () => stepDown(index),\n ArrowLeft: () => stepDown(index),\n ArrowRight: () => stepUp(index),\n ArrowUp: () => stepUp(index),\n End: () => onChange(index, max),\n Home: () => onChange(index, min),\n PageDown: () => stepDown(index, tenStep),\n PageUp: () => stepUp(index, tenStep),\n })\n },\n [getMinMax, onChange, stepDown, stepUp, tenStep],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const computedProps: HTMLProps = {\n ...dataProps,\n \"data-orientation\": orientation,\n ...rest,\n ...props,\n onBlur: handlerAll(props.onBlur, eventProps.onBlur),\n onFocus: handlerAll(props.onFocus, eventProps.onFocus),\n }\n\n computedProps.style ??= {}\n\n if (isArray(percent)) {\n computedProps.style[\"--range-start\"] = `${Math.abs(percent[0]!)}%`\n computedProps.style[\"--range-end\"] = `${Math.abs(percent[1]!)}%`\n } else {\n computedProps.style[\"--range-start\"] = \"0%\"\n computedProps.style[\"--range-end\"] = `${Math.abs(percent)}%`\n }\n\n return computedProps\n },\n [dataProps, eventProps, orientation, percent, rest],\n )\n\n const getInputProps: PropGetter<\"input\", { index?: number }> = useCallback(\n ({ index = 0, ...props } = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: range ? value[index]! : value,\n ...props,\n ref: index === 0 ? mergeRefs(props.ref, ref) : props.ref,\n }),\n [\n dataProps,\n ariaProps,\n id,\n name,\n disabled,\n readOnly,\n required,\n range,\n value,\n ref,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props) =>\n getPanEventProps({\n ...dataProps,\n \"data-orientation\": orientation,\n ...props,\n }),\n [dataProps, getPanEventProps, orientation],\n )\n\n const getRangeProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n \"data-orientation\": orientation,\n \"data-range\": dataAttr(range),\n ...props,\n }),\n [dataProps, orientation, range],\n )\n\n const getMarkProps: RequiredPropGetter<\"div\", { value: number }> =\n useCallback(\n ({ style, value: valueProp, ...props }) => {\n const between = range\n ? value[0] < valueProp && valueProp < value[1]\n : valueProp < value\n const percent = valueToPercent(valueProp, min, max)\n\n return {\n ...dataProps,\n \"aria-hidden\": true,\n \"data-between\": dataAttr(between),\n \"data-orientation\": orientation,\n role: \"presentation\",\n ...props,\n style: { ...style, \"--mark-position\": `${percent}%` },\n }\n },\n [dataProps, max, min, orientation, range, value],\n )\n\n const getThumbProps: PropGetter<\"div\", { index?: number }> = useCallback(\n ({ index = 0, ...rest } = {}) => {\n const { max, min } = getMinMax(index)\n\n const props: HTMLProps = {\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Slider thumb\"),\n \"aria-orientation\": orientation,\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...rest,\n \"aria-labelledby\": cx(rest[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(rest.onKeyDown, onKeyDown(index)),\n }\n\n if (range) {\n const currentValue = value[index]!\n\n props[\"data-start\"] = dataAttr(index === 0)\n props[\"data-end\"] = dataAttr(index === 1)\n props[\"aria-valuenow\"] = currentValue\n props[\"aria-valuetext\"] =\n ariaValueText ??\n getAriaValueText?.(currentValue, index) ??\n currentValue.toString()\n } else {\n props[\"data-end\"] = dataAttr(index === 0)\n props[\"aria-valuenow\"] = value\n props[\"aria-valuetext\"] =\n ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString()\n }\n\n return props\n },\n [\n t,\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n getMinMax,\n interactive,\n onKeyDown,\n orientation,\n range,\n value,\n ],\n )\n\n return {\n percent,\n range,\n setValue,\n stepDown,\n stepUp,\n value,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSliderReturn = ReturnType<typeof useSlider>\n"],"mappings":"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"}
1
+ {"version":3,"file":"use-slider.js","names":["value","min","max","step","getRootProps: PropGetter","computedProps: HTMLProps","props","getInputProps: PropGetter<\"input\", { index?: number }>","getTrackProps: PropGetter","getRangeProps: PropGetter","valueProp","percent","rest","props: HTMLProps"],"sources":["../../../../src/components/slider/use-slider.ts"],"sourcesContent":["\"use client\"\n\nimport type { KeyboardEvent } from \"react\"\nimport type {\n HTMLProps,\n HTMLRefAttributes,\n Orientation,\n PropGetter,\n RequiredPropGetter,\n} from \"../../core\"\nimport type { Point } from \"../../utils\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useRef } from \"react\"\nimport { mergeProps } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { usePanEvent } from \"../../hooks/use-pan-event\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport {\n clampNumber,\n cx,\n dataAttr,\n handlerAll,\n isArray,\n isNumber,\n mergeRefs,\n percentToValue,\n roundNumberToStep,\n runKeyAction,\n valueToPercent,\n visuallyHiddenAttributes,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\nexport interface UseSliderProps<Y extends [number, number] | number = number>\n extends\n Omit<HTMLProps, \"defaultValue\" | \"onChange\" | \"ref\">,\n HTMLRefAttributes<\"input\">,\n FieldProps {\n /**\n * The minimum distance between slider thumbs.\n * Useful for preventing the thumbs from being too close together.\n *\n * @default 0\n */\n betweenThumbs?: number\n /**\n * The initial value of the slider.\n */\n defaultValue?: Y\n /**\n * The base `id` to use for the slider.\n */\n id?: string\n /**\n * The maximum allowed value of the slider. Cannot be less than min.\n *\n * @default 100\n */\n max?: number\n /**\n * The minimum allowed value of the slider. Cannot be greater than max.\n *\n * @default 0\n */\n min?: number\n /**\n * The name attribute of the hidden `input` field.\n * This is particularly useful in forms.\n */\n name?: string\n /**\n * The orientation of the slider.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * The step in which increments or decrements have to be made.\n *\n * @default 1\n */\n step?: number\n /**\n * The value of the slider.\n */\n value?: Y\n /**\n * This is used to format the value so that screen readers\n * can speak out a more human-friendly value.\n *\n * It is used to set the `aria-valuetext` property of the input.\n */\n getAriaValueText?: (value: number, index: number) => string | undefined\n /**\n * Function called whenever the slider value changes.\n */\n onChange?: (value: Y) => void\n /**\n * Function called when the user is done selecting a new value.\n */\n onChangeEnd?: (value: Y) => void\n /**\n * Function called when the user starts selecting a new value.\n */\n onChangeStart?: (value: Y) => void\n}\n\nexport const useSlider = <Y extends [number, number] | number = number>(\n props: UseSliderProps<Y> = {},\n) => {\n const {\n props: {\n id,\n ref,\n name,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-valuetext\": ariaValueText,\n betweenThumbs = 0,\n defaultValue = 0 as Y,\n disabled,\n getAriaValueText,\n max = 100,\n min = 0,\n orientation = \"horizontal\",\n readOnly,\n required,\n step = 1,\n value: valueProp,\n onChange: onChangeProp,\n onChangeEnd,\n onChangeStart,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange: onChangeProp,\n })\n const { t } = useI18n(\"slider\")\n const currentIndex = useRef(0)\n const interactive = !(disabled || readOnly)\n const [_, getPanEventProps] = usePanEvent<HTMLDivElement>({\n onEnd: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const start = currentIndex.current === 0\n const oppositeIndex = currentIndex.current === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeEnd?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n onChangeEnd?.(panValue as Y)\n }\n },\n onMove: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n onChange(currentIndex.current, panValue)\n },\n onStart: (_, point, rect) => {\n if (!interactive) return\n\n const panValue = getPanValue(point, rect)\n\n if (range) {\n const distances = value.map((value) => Math.abs(value - panValue))\n const closest = Math.min(...distances)\n const index = distances.indexOf(closest)\n\n currentIndex.current = index\n\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = value[oppositeIndex]\n\n onChangeStart?.(\n (start ? [panValue, oppositeValue] : [oppositeValue, panValue]) as Y,\n )\n } else {\n currentIndex.current = 0\n\n onChangeStart?.(value as Y)\n }\n\n onChange(currentIndex.current, panValue)\n },\n })\n const range = !isNumber(value)\n const percent = (\n range\n ? value.map((value) => valueToPercent(value, min, max))\n : valueToPercent(value, min, max)\n ) as Y extends number ? number : number[]\n const tenStep = (max - min) / 10\n const oneStep = step || (max - min) / 100\n\n if (max < min) console.warn(\"Do not assign a number less than 'min' to 'max'\")\n\n const getMinMax = useCallback(\n (index: number) => {\n const start = index === 0\n const oppositeIndex = index === 0 ? 1 : 0\n const oppositeValue = range ? value[oppositeIndex] : value\n\n return {\n max: range ? (start ? oppositeValue - betweenThumbs : max) : max,\n min: range ? (start ? min : oppositeValue + betweenThumbs) : min,\n }\n },\n [betweenThumbs, max, min, range, value],\n )\n\n const getPanValue = useCallback(\n ({ x, y }: Point, { bottom, height, left, width }: DOMRect) => {\n const diff = orientation === \"horizontal\" ? x - left : bottom - y\n const length = orientation === \"horizontal\" ? width : height\n const percent = diff / length\n\n let nextValue = percentToValue(percent, min, max)\n\n nextValue = parseFloat(roundNumberToStep(nextValue, min, step))\n nextValue = clampNumber(nextValue, min, max)\n\n return nextValue\n },\n [orientation, min, max, step],\n )\n\n const onChange = useCallback(\n (index: number, value: number) => {\n if (!interactive) return\n\n const { max, min } = getMinMax(index)\n\n value = parseFloat(roundNumberToStep(value, min, oneStep))\n value = clampNumber(value, min, max)\n\n setValue((prev) => {\n if (isArray(prev)) {\n const next = [...prev]\n\n next[index] = value\n\n return next as Y\n } else {\n return value as Y\n }\n })\n },\n [getMinMax, interactive, oneStep, setValue],\n )\n\n const stepUp = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! + step)\n : onChange(index, value + step),\n [oneStep, range, onChange, value],\n )\n\n const stepDown = useCallback(\n (index: number, step = oneStep) =>\n range\n ? onChange(index, value[index]! - step)\n : onChange(index, value - step),\n [oneStep, range, onChange, value],\n )\n\n const onKeyDown = useCallback(\n (index: number) => (ev: KeyboardEvent<HTMLDivElement>) => {\n const { max, min } = getMinMax(index)\n\n runKeyAction(ev, {\n ArrowDown: () => stepDown(index),\n ArrowLeft: () => stepDown(index),\n ArrowRight: () => stepUp(index),\n ArrowUp: () => stepUp(index),\n End: () => onChange(index, max),\n Home: () => onChange(index, min),\n PageDown: () => stepDown(index, tenStep),\n PageUp: () => stepUp(index, tenStep),\n })\n },\n [getMinMax, onChange, stepDown, stepUp, tenStep],\n )\n\n const getRootProps: PropGetter = useCallback(\n (props = {}) => {\n const computedProps: HTMLProps = mergeProps(\n dataProps,\n { \"data-orientation\": orientation },\n rest,\n props,\n { onBlur: eventProps.onBlur, onFocus: eventProps.onFocus },\n )()\n\n computedProps.style ??= {}\n\n if (isArray(percent)) {\n computedProps.style[\"--range-start\"] = `${Math.abs(percent[0]!)}%`\n computedProps.style[\"--range-end\"] = `${Math.abs(percent[1]!)}%`\n } else {\n computedProps.style[\"--range-start\"] = \"0%\"\n computedProps.style[\"--range-end\"] = `${Math.abs(percent)}%`\n }\n\n return computedProps\n },\n [dataProps, eventProps, orientation, percent, rest],\n )\n\n const getInputProps: PropGetter<\"input\", { index?: number }> = useCallback(\n ({ index = 0, ...props } = {}) => ({\n ...visuallyHiddenAttributes,\n ...dataProps,\n ...ariaProps,\n id,\n type: \"hidden\",\n name,\n disabled,\n readOnly,\n required,\n value: range ? value[index]! : value,\n ...props,\n ref: index === 0 ? mergeRefs(props.ref, ref) : props.ref,\n }),\n [\n dataProps,\n ariaProps,\n id,\n name,\n disabled,\n readOnly,\n required,\n range,\n value,\n ref,\n ],\n )\n\n const getTrackProps: PropGetter = useCallback(\n (props) =>\n getPanEventProps({\n ...dataProps,\n \"data-orientation\": orientation,\n ...props,\n }),\n [dataProps, getPanEventProps, orientation],\n )\n\n const getRangeProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n \"data-orientation\": orientation,\n \"data-range\": dataAttr(range),\n ...props,\n }),\n [dataProps, orientation, range],\n )\n\n const getMarkProps: RequiredPropGetter<\"div\", { value: number }> =\n useCallback(\n ({ style, value: valueProp, ...props }) => {\n const between = range\n ? value[0] < valueProp && valueProp < value[1]\n : valueProp < value\n const percent = valueToPercent(valueProp, min, max)\n\n return {\n ...dataProps,\n \"aria-hidden\": true,\n \"data-between\": dataAttr(between),\n \"data-orientation\": orientation,\n role: \"presentation\",\n ...props,\n style: { ...style, \"--mark-position\": `${percent}%` },\n }\n },\n [dataProps, max, min, orientation, range, value],\n )\n\n const getThumbProps: PropGetter<\"div\", { index?: number }> = useCallback(\n ({ index = 0, ...rest } = {}) => {\n const { max, min } = getMinMax(index)\n\n const props: HTMLProps = {\n ...dataProps,\n ...ariaProps,\n \"aria-label\": t(\"Slider thumb\"),\n \"aria-orientation\": orientation,\n \"aria-valuemax\": max,\n \"aria-valuemin\": min,\n role: \"slider\",\n tabIndex: interactive ? 0 : -1,\n ...rest,\n \"aria-labelledby\": cx(rest[\"aria-labelledby\"], ariaLabelledBy),\n onKeyDown: handlerAll(rest.onKeyDown, onKeyDown(index)),\n }\n\n if (range) {\n const currentValue = value[index]!\n\n props[\"data-start\"] = dataAttr(index === 0)\n props[\"data-end\"] = dataAttr(index === 1)\n props[\"aria-valuenow\"] = currentValue\n props[\"aria-valuetext\"] =\n ariaValueText ??\n getAriaValueText?.(currentValue, index) ??\n currentValue.toString()\n } else {\n props[\"data-end\"] = dataAttr(index === 0)\n props[\"aria-valuenow\"] = value\n props[\"aria-valuetext\"] =\n ariaValueText ?? getAriaValueText?.(value, index) ?? value.toString()\n }\n\n return props\n },\n [\n t,\n ariaLabelledBy,\n ariaProps,\n ariaValueText,\n dataProps,\n getAriaValueText,\n getMinMax,\n interactive,\n onKeyDown,\n orientation,\n range,\n value,\n ],\n )\n\n return {\n percent,\n range,\n setValue,\n stepDown,\n stepUp,\n value,\n getInputProps,\n getMarkProps,\n getRangeProps,\n getRootProps,\n getThumbProps,\n getTrackProps,\n onChange,\n }\n}\n\nexport type UseSliderReturn = ReturnType<typeof useSlider>\n"],"mappings":"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"}
@@ -3,11 +3,13 @@ import { ThemeProps } from "../../core/system/index.types.js";
3
3
  import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
4
4
  import "../../core/index.js";
5
5
  import { WithTransitionProps } from "../motion/index.types.js";
6
+ import "../motion/index.js";
6
7
  import { CollapseProps } from "../collapse/collapse.js";
8
+ import "../collapse/index.js";
7
9
  import "../../index.js";
8
10
  import { AccordionStyle } from "./accordion.style.js";
9
11
  import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
10
- import * as react92 from "react";
12
+ import * as react841 from "react";
11
13
 
12
14
  //#region src/components/accordion/accordion.d.ts
13
15
  interface AccordionCallBackProps {
@@ -31,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
31
33
  */
32
34
  items?: AccordionItem[];
33
35
  }
34
- declare const AccordionPropsContext: react92.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
36
+ declare const AccordionPropsContext: react841.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
35
37
  /**
36
38
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
37
39
  *
@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
2
2
  import "../../core/index.js";
3
3
  import { Descendant } from "../../hooks/use-descendants/index.js";
4
4
  import "../../index.js";
5
- import * as react93 from "react";
5
+ import * as react47 from "react";
6
6
 
7
7
  //#region src/components/accordion/use-accordion.d.ts
8
- declare const AccordionDescendantsContext: react93.Context<{
8
+ declare const AccordionDescendantsContext: react47.Context<{
9
9
  active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
10
10
  count: (props?: Partial<{}> | undefined) => number;
11
11
  destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react93.Context<{
24
24
  prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
25
25
  register: (props?: {
26
26
  disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
27
- } | undefined) => react93.RefCallback<HTMLButtonElement>;
27
+ } | undefined) => react47.RefCallback<HTMLButtonElement>;
28
28
  unregister: (node?: HTMLButtonElement | null | undefined) => void;
29
29
  value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
30
30
  values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react93.Context<{
50
50
  prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
51
51
  register: (props?: {
52
52
  disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
53
- } | undefined) => react93.RefCallback<HTMLButtonElement>;
53
+ } | undefined) => react47.RefCallback<HTMLButtonElement>;
54
54
  unregister: (node?: HTMLButtonElement | null | undefined) => void;
55
55
  value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
56
56
  values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
57
57
  };
58
- register: react93.RefCallback<HTMLButtonElement>;
58
+ register: react47.RefCallback<HTMLButtonElement>;
59
59
  }, useAccordionDescendants: () => {
60
60
  active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
61
61
  count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react93.Context<{
75
75
  prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
76
76
  register: (props?: {
77
77
  disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
78
- } | undefined) => react93.RefCallback<HTMLButtonElement>;
78
+ } | undefined) => react47.RefCallback<HTMLButtonElement>;
79
79
  unregister: (node?: HTMLButtonElement | null | undefined) => void;
80
80
  value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
81
81
  values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
82
82
  };
83
83
  interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
84
- declare const AccordionContext: react93.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
84
+ declare const AccordionContext: react47.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
85
85
  interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
86
- declare const AccordionItemContext: react93.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
86
+ declare const AccordionItemContext: react47.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
87
87
  interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
88
88
  /**
89
89
  * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
137
137
  prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
138
138
  register: (props?: {
139
139
  disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
140
- } | undefined) => react93.RefCallback<HTMLButtonElement>;
140
+ } | undefined) => react47.RefCallback<HTMLButtonElement>;
141
141
  unregister: (node?: HTMLButtonElement | null | undefined) => void;
142
142
  value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
143
143
  values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
145
145
  focusedIndex: number;
146
146
  index: number | number[];
147
147
  multiple: boolean | undefined;
148
- setFocusedIndex: react93.Dispatch<react93.SetStateAction<number>>;
149
- setIndex: react93.Dispatch<react93.SetStateAction<number | number[]>>;
148
+ setFocusedIndex: react47.Dispatch<react47.SetStateAction<number>>;
149
+ setIndex: react47.Dispatch<react47.SetStateAction<number | number[]>>;
150
150
  toggle: boolean | undefined;
151
151
  getRootProps: PropGetter<"div", undefined, undefined>;
152
152
  };
@@ -4,9 +4,10 @@ import "../../core/index.js";
4
4
  import { ActionBarStyle } from "./action-bar.style.js";
5
5
  import { PortalProps } from "../portal/portal.js";
6
6
  import { UsePopupAnimationProps } from "../popover/popover.js";
7
+ import "../popover/index.js";
7
8
  import { UseActionBarProps } from "./use-action-bar.js";
8
9
  import "../../index.js";
9
- import * as react78 from "react";
10
+ import * as react82 from "react";
10
11
  import { PropsWithChildren, ReactNode } from "react";
11
12
 
12
13
  //#region src/components/action-bar/action-bar.d.ts
@@ -28,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
28
29
  */
29
30
  onCloseComplete?: () => void;
30
31
  }
31
- declare const ActionBarPropsContext: react78.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
32
+ declare const ActionBarPropsContext: react82.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
32
33
  /**
33
34
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
34
35
  *
@@ -2,9 +2,10 @@ import { KeyframeIdent, ThemeProps } from "../../core/system/index.types.js";
2
2
  import { Component } from "../../core/components/index.types.js";
3
3
  import "../../core/index.js";
4
4
  import { HTMLMotionProps } from "../motion/index.types.js";
5
+ import "../motion/index.js";
5
6
  import { AiryStyle } from "./airy.style.js";
6
7
  import "../../index.js";
7
- import * as react952 from "react";
8
+ import * as react840 from "react";
8
9
  import { ReactNode } from "react";
9
10
 
10
11
  //#region src/components/airy/airy.d.ts
@@ -56,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
56
57
  */
57
58
  onChange?: (value: KeyframeIdent) => void;
58
59
  }
59
- declare const AiryPropsContext: react952.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
60
+ declare const AiryPropsContext: react840.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
60
61
  /**
61
62
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
62
63
  *
@@ -3,10 +3,13 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
3
3
  import "../../core/index.js";
4
4
  import { AlertStyle } from "./alert.style.js";
5
5
  import { IconProps } from "../icon/icon.js";
6
+ import "../icon/index.js";
6
7
  import { LoadingProps } from "../loading/loading.js";
8
+ import "../loading/index.js";
7
9
  import { StatusScheme } from "../status/status.js";
10
+ import "../status/index.js";
8
11
  import "../../index.js";
9
- import * as react105 from "react";
12
+ import * as react85 from "react";
10
13
 
11
14
  //#region src/components/alert/alert.d.ts
12
15
  interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -17,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
17
20
  */
18
21
  status?: StatusScheme;
19
22
  }
20
- declare const AlertPropsContext: react105.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
23
+ declare const AlertPropsContext: react85.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
21
24
  /**
22
25
  * `Alert` is a component that conveys information to the user.
23
26
  *
@@ -3,8 +3,9 @@ import { Component } from "../../core/components/index.types.js";
3
3
  import "../../core/index.js";
4
4
  import { AlphaSliderStyle } from "./alpha-slider.style.js";
5
5
  import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
6
+ import "../hue-slider/index.js";
6
7
  import "../../index.js";
7
- import * as react91 from "react";
8
+ import * as react833 from "react";
8
9
 
9
10
  //#region src/components/alpha-slider/alpha-slider.d.ts
10
11
  interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -37,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
37
38
  */
38
39
  trackProps?: AlphaSliderTrackProps;
39
40
  }
40
- declare const AlphaSliderPropsContext: react91.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
41
+ declare const AlphaSliderPropsContext: react833.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
41
42
  /**
42
43
  * `AlphaSlider` is a component used to allow the user to select color transparency.
43
44
  *
@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
2
2
  import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
3
3
  import "../../core/index.js";
4
4
  import "../../index.js";
5
- import * as react79 from "react";
5
+ import * as react83 from "react";
6
6
 
7
7
  //#region src/components/aspect-ratio/aspect-ratio.d.ts
8
8
  interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
13
13
  */
14
14
  ratio?: StyleValue<number>;
15
15
  }
16
- declare const AspectRatioPropsContext: react79.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
16
+ declare const AspectRatioPropsContext: react83.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
17
17
  /**
18
18
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
19
19
  *
@@ -3,14 +3,16 @@ import { ThemeProps } from "../../core/system/index.types.js";
3
3
  import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
4
4
  import "../../core/index.js";
5
5
  import { PopoverContentProps, UsePopoverStyleProps, UsePopupAnimationProps } from "../popover/popover.js";
6
+ import "../popover/index.js";
6
7
  import { AutocompleteStyle } from "./autocomplete.style.js";
7
8
  import { UseComboboxGroupProps } from "../../hooks/use-combobox/index.js";
8
9
  import { UseInputBorderProps } from "../input/use-input-border.js";
9
10
  import { InputElementProps } from "../input/input-element.js";
10
11
  import { InputGroupRootProps } from "../input/input-group.js";
12
+ import "../input/index.js";
11
13
  import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
12
14
  import "../../index.js";
13
- import * as react61 from "react";
15
+ import * as react121 from "react";
14
16
  import { ReactElement, ReactNode } from "react";
15
17
 
16
18
  //#region src/components/autocomplete/autocomplete.d.ts
@@ -66,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
66
68
  */
67
69
  rootProps?: InputGroupRootProps;
68
70
  }
69
- declare const AutocompletePropsContext: react61.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
71
+ declare const AutocompletePropsContext: react121.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
70
72
  /**
71
73
  * `Autocomplete` is a component used to display suggestions in response to user text input.
72
74
  *
@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
3
3
  import "../../index.js";
4
4
 
5
5
  //#region src/components/autocomplete/autocomplete.style.d.ts
6
- declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "empty" | "field" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "empty" | "field" | "valueText">>, {
6
+ declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
7
7
  xs: {
8
8
  empty: {
9
9
  gap: "1.5";
@@ -2,11 +2,13 @@ import { index_d_exports } from "../../utils/index.js";
2
2
  import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
3
3
  import "../../core/index.js";
4
4
  import { UsePopoverProps } from "../popover/use-popover.js";
5
+ import "../popover/index.js";
5
6
  import { FieldProps } from "../field/field.js";
7
+ import "../field/index.js";
6
8
  import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
7
9
  import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
8
10
  import "../../index.js";
9
- import * as react62 from "react";
11
+ import * as react834 from "react";
10
12
  import { ChangeEvent, ReactNode } from "react";
11
13
 
12
14
  //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -26,7 +28,7 @@ interface AutocompleteFilter {
26
28
  }
27
29
  type AutocompleteMatcher = typeof index_d_exports.match;
28
30
  interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
29
- declare const AutocompleteContext: react62.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
31
+ declare const AutocompleteContext: react834.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
30
32
  interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
31
33
  /**
32
34
  * If `true`, the autocomplete will allow custom value.
@@ -154,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
154
156
  lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
155
157
  nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
156
158
  prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
157
- register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react62.RefCallback<HTMLDivElement>;
159
+ register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react834.RefCallback<HTMLDivElement>;
158
160
  unregister: (node?: HTMLDivElement | null | undefined) => void;
159
161
  value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
160
162
  values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -164,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
164
166
  items: ComboboxItem[];
165
167
  max: number | undefined;
166
168
  open: boolean;
167
- setInputValue: react62.Dispatch<react62.SetStateAction<string>>;
168
- setValue: react62.Dispatch<react62.SetStateAction<Multiple extends true ? string[] : string>>;
169
+ setInputValue: react834.Dispatch<react834.SetStateAction<string>>;
170
+ setValue: react834.Dispatch<react834.SetStateAction<Multiple extends true ? string[] : string>>;
169
171
  value: Multiple extends true ? string[] : string;
170
172
  valueMap: {
171
173
  [key: string]: ComboboxItemWithValue;
@@ -6,9 +6,9 @@ import "../../core/index.js";
6
6
  import { AvatarStyle } from "./avatar.style.js";
7
7
  import { UseAvatarProps } from "./use-avatar.js";
8
8
  import "../../index.js";
9
- import * as react55 from "react";
9
+ import * as react122 from "react";
10
10
  import { ReactElement } from "react";
11
- import * as _yamada_ui_utils0 from "@yamada-ui/utils";
11
+ import * as _yamada_ui_utils9 from "@yamada-ui/utils";
12
12
 
13
13
  //#region src/components/avatar/avatar.d.ts
14
14
  interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
25
25
  */
26
26
  imageProps?: AvatarImageProps;
27
27
  }
28
- declare const component: <H extends As | "fragment" = "div", R extends _yamada_ui_utils0.Dict = _yamada_ui_utils0.Dict<any>>(el: H | react55.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
28
+ declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils9.Dict = _yamada_ui_utils9.Dict<any>>(el: H | react122.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
29
29
  shape: {
30
30
  circle: {
31
31
  root: {
@@ -148,7 +148,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _yamada_u
148
148
  name,
149
149
  className,
150
150
  ...options
151
- }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react55.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react55.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils0.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
151
+ }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react122.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react122.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils9.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
152
152
  shape: {
153
153
  circle: {
154
154
  root: {
@@ -271,7 +271,7 @@ declare const component: <H extends As | "fragment" = "div", R extends _yamada_u
271
271
  className,
272
272
  withContext,
273
273
  transferProps
274
- }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils0.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
274
+ }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils9.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
275
275
  shape: {
276
276
  circle: {
277
277
  root: {
@@ -1,6 +1,6 @@
1
1
  import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
2
2
  import "../../core/index.js";
3
- import * as react58 from "react";
3
+ import * as react125 from "react";
4
4
 
5
5
  //#region src/components/avatar/use-avatar-group.d.ts
6
6
  interface UseAvatarGroupProps extends HTMLProps {
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
19
19
  reverse,
20
20
  ...rest
21
21
  }?: UseAvatarGroupProps) => {
22
- children: react58.ReactElement<any, string | react58.JSXElementConstructor<any>>[];
22
+ children: react125.ReactElement<any, string | react125.JSXElementConstructor<any>>[];
23
23
  excess: number;
24
24
  getRootProps: PropGetter<"div", undefined, undefined>;
25
25
  };
@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
3
3
  import "../../core/index.js";
4
4
  import { BadgeStyle } from "./badge.style.js";
5
5
  import "../../index.js";
6
- import * as react54 from "react";
6
+ import * as react31 from "react";
7
7
 
8
8
  //#region src/components/badge/badge.d.ts
9
9
  interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
10
- declare const BadgePropsContext: react54.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
10
+ declare const BadgePropsContext: react31.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
11
11
  /**
12
12
  * `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
13
13
  *