@yamada-ui/react 2.3.0-dev-20260724085908 → 2.3.0-dev-20260730080927
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/accordion/accordion.cjs.map +1 -1
- package/dist/cjs/components/action-bar/action-bar.cjs.map +1 -1
- package/dist/cjs/components/airy/airy.cjs.map +1 -1
- package/dist/cjs/components/alert/alert.cjs.map +1 -1
- package/dist/cjs/components/alpha-slider/alpha-slider.cjs.map +1 -1
- package/dist/cjs/components/autocomplete/autocomplete.cjs.map +1 -1
- package/dist/cjs/components/autocomplete/use-autocomplete.cjs.map +1 -1
- package/dist/cjs/components/avatar/avatar-group.cjs.map +1 -1
- package/dist/cjs/components/avatar/avatar.cjs.map +1 -1
- package/dist/cjs/components/blockquote/blockquote.cjs.map +1 -1
- package/dist/cjs/components/breadcrumb/breadcrumb.cjs.map +1 -1
- package/dist/cjs/components/button/button-group.cjs.map +1 -1
- package/dist/cjs/components/button/button.cjs.map +1 -1
- package/dist/cjs/components/calendar/calendar.cjs.map +1 -1
- package/dist/cjs/components/calendar/use-calendar.cjs.map +1 -1
- package/dist/cjs/components/carousel/carousel.cjs.map +1 -1
- package/dist/cjs/components/chart/cartesian-chart.cjs.map +1 -1
- package/dist/cjs/components/chart/chart.cjs.map +1 -1
- package/dist/cjs/components/chart/polar-chart.cjs.map +1 -1
- package/dist/cjs/components/checkbox/checkbox-group.cjs.map +1 -1
- package/dist/cjs/components/checkbox/checkbox.cjs.map +1 -1
- package/dist/cjs/components/checkbox-card/checkbox-card-group.cjs.map +1 -1
- package/dist/cjs/components/checkbox-card/checkbox-card.cjs.map +1 -1
- package/dist/cjs/components/circle-progress/circle-progress.cjs.map +1 -1
- package/dist/cjs/components/collapse/collapse.cjs.map +1 -1
- package/dist/cjs/components/color-picker/color-picker.cjs.map +1 -1
- package/dist/cjs/components/color-selector/color-selector.cjs.map +1 -1
- package/dist/cjs/components/color-swatch/color-swatch-group.cjs.map +1 -1
- package/dist/cjs/components/color-swatch/color-swatch.cjs.map +1 -1
- package/dist/cjs/components/data-list/data-list.cjs.map +1 -1
- package/dist/cjs/components/date-picker/date-picker.cjs.map +1 -1
- package/dist/cjs/components/date-picker/use-date-picker.cjs.map +1 -1
- package/dist/cjs/components/drawer/drawer.cjs +1 -1
- package/dist/cjs/components/drawer/drawer.cjs.map +1 -1
- package/dist/cjs/components/dropzone/dropzone.cjs.map +1 -1
- package/dist/cjs/components/editable/editable.cjs.map +1 -1
- package/dist/cjs/components/editable/use-editable.cjs +4 -5
- package/dist/cjs/components/editable/use-editable.cjs.map +1 -1
- package/dist/cjs/components/empty-state/empty-state.cjs.map +1 -1
- package/dist/cjs/components/fade/fade.cjs.map +1 -1
- package/dist/cjs/components/fade-scale/fade-scale.cjs.map +1 -1
- package/dist/cjs/components/field/field.cjs.map +1 -1
- package/dist/cjs/components/fieldset/fieldset.cjs.map +1 -1
- package/dist/cjs/components/file-input/file-input.cjs.map +1 -1
- package/dist/cjs/components/flip/flip.cjs.map +1 -1
- package/dist/cjs/components/focus-lock/focus-lock.cjs +26 -9
- package/dist/cjs/components/focus-lock/focus-lock.cjs.map +1 -1
- package/dist/cjs/components/focus-lock/index.cjs +1 -0
- package/dist/cjs/components/form/form.cjs.map +1 -1
- package/dist/cjs/components/format/format-byte.cjs.map +1 -1
- package/dist/cjs/components/format/format-date-time.cjs.map +1 -1
- package/dist/cjs/components/format/format-number.cjs.map +1 -1
- package/dist/cjs/components/highlight/highlight.cjs.map +1 -1
- package/dist/cjs/components/hue-slider/hue-slider.cjs.map +1 -1
- package/dist/cjs/components/icon/icons/circle-euro-icon.cjs +14 -0
- package/dist/cjs/components/icon/icons/circle-euro-icon.cjs.map +1 -0
- package/dist/cjs/components/icon/icons/index.cjs +9 -3
- package/dist/cjs/components/icon/icons/index.cjs.map +1 -1
- package/dist/cjs/components/icon/icons/scan-box-icon.cjs +14 -0
- package/dist/cjs/components/icon/icons/scan-box-icon.cjs.map +1 -0
- package/dist/cjs/components/icon/icons/server-plus-icon.cjs +14 -0
- package/dist/cjs/components/icon/icons/server-plus-icon.cjs.map +1 -0
- package/dist/cjs/components/icon/index.cjs +6 -2
- package/dist/cjs/components/indicator/indicator.cjs.map +1 -1
- package/dist/cjs/components/infinite-scroll-area/infinite-scroll-area.cjs.map +1 -1
- package/dist/cjs/components/input/input-group.cjs.map +1 -1
- package/dist/cjs/components/link-box/link-box.cjs.map +1 -1
- package/dist/cjs/components/list/list.cjs.map +1 -1
- package/dist/cjs/components/loading/audio.cjs.map +1 -1
- package/dist/cjs/components/loading/background.cjs.map +1 -1
- package/dist/cjs/components/loading/circles.cjs.map +1 -1
- package/dist/cjs/components/loading/dots.cjs.map +1 -1
- package/dist/cjs/components/loading/grid.cjs.map +1 -1
- package/dist/cjs/components/loading/loading-provider.cjs.map +1 -1
- package/dist/cjs/components/loading/oval.cjs.map +1 -1
- package/dist/cjs/components/loading/page.cjs.map +1 -1
- package/dist/cjs/components/loading/puff.cjs.map +1 -1
- package/dist/cjs/components/loading/rings.cjs.map +1 -1
- package/dist/cjs/components/loading/screen.cjs.map +1 -1
- package/dist/cjs/components/loading/suspense.cjs.map +1 -1
- package/dist/cjs/components/menu/menu.cjs.map +1 -1
- package/dist/cjs/components/menu/use-menu.cjs.map +1 -1
- package/dist/cjs/components/modal/modal.cjs +39 -21
- package/dist/cjs/components/modal/modal.cjs.map +1 -1
- package/dist/cjs/components/native-accordion/native-accordion.cjs.map +1 -1
- package/dist/cjs/components/native-popover/native-popover.cjs.map +1 -1
- package/dist/cjs/components/native-select/native-select.cjs.map +1 -1
- package/dist/cjs/components/native-select/use-native-select.cjs.map +1 -1
- package/dist/cjs/components/native-table/native-table.cjs.map +1 -1
- package/dist/cjs/components/notice/notice-provider.cjs.map +1 -1
- package/dist/cjs/components/notice/notice.cjs.map +1 -1
- package/dist/cjs/components/notice/use-notice.cjs.map +1 -1
- package/dist/cjs/components/number-input/number-input.cjs.map +1 -1
- package/dist/cjs/components/number-input/use-number-input.cjs +2 -1
- package/dist/cjs/components/number-input/use-number-input.cjs.map +1 -1
- package/dist/cjs/components/pagination/pagination.cjs.map +1 -1
- package/dist/cjs/components/password-input/password-input.cjs.map +1 -1
- package/dist/cjs/components/password-input/strength-meter.cjs.map +1 -1
- package/dist/cjs/components/picture/picture.cjs.map +1 -1
- package/dist/cjs/components/pin-input/pin-input.cjs.map +1 -1
- package/dist/cjs/components/popover/popover.cjs +66 -24
- package/dist/cjs/components/popover/popover.cjs.map +1 -1
- package/dist/cjs/components/portal/portal.cjs +16 -0
- package/dist/cjs/components/portal/portal.cjs.map +1 -1
- package/dist/cjs/components/progress/progress.cjs.map +1 -1
- package/dist/cjs/components/qr-code/qr-code.cjs.map +1 -1
- package/dist/cjs/components/radio/radio-group.cjs.map +1 -1
- package/dist/cjs/components/radio/radio.cjs.map +1 -1
- package/dist/cjs/components/radio-card/radio-card-group.cjs.map +1 -1
- package/dist/cjs/components/radio-card/radio-card.cjs.map +1 -1
- package/dist/cjs/components/rating/rating.cjs.map +1 -1
- package/dist/cjs/components/reorder/reorder.cjs.map +1 -1
- package/dist/cjs/components/resizable/resizable.cjs.map +1 -1
- package/dist/cjs/components/ripple/ripple.cjs.map +1 -1
- package/dist/cjs/components/rotate/rotate.cjs.map +1 -1
- package/dist/cjs/components/saturation-slider/saturation-slider.cjs.map +1 -1
- package/dist/cjs/components/saturation-slider/use-saturation-slider.cjs.map +1 -1
- package/dist/cjs/components/segmented-control/segmented-control.cjs.map +1 -1
- package/dist/cjs/components/select/select.cjs.map +1 -1
- package/dist/cjs/components/select/use-select.cjs.map +1 -1
- package/dist/cjs/components/sidebar/sidebar.cjs.map +1 -1
- package/dist/cjs/components/skeleton/skeleton-text.cjs.map +1 -1
- package/dist/cjs/components/slide/slide.cjs.map +1 -1
- package/dist/cjs/components/slide-fade/slide-fade.cjs.map +1 -1
- package/dist/cjs/components/slider/slider.cjs.map +1 -1
- package/dist/cjs/components/slot/slot.cjs.map +1 -1
- package/dist/cjs/components/snacks/snacks.cjs.map +1 -1
- package/dist/cjs/components/stack/stack.cjs.map +1 -1
- package/dist/cjs/components/stack/z-stack.cjs.map +1 -1
- package/dist/cjs/components/stat/stat.cjs.map +1 -1
- package/dist/cjs/components/status/status.cjs.map +1 -1
- package/dist/cjs/components/steps/steps.cjs.map +1 -1
- package/dist/cjs/components/switch/switch.cjs.map +1 -1
- package/dist/cjs/components/table/table.cjs.map +1 -1
- package/dist/cjs/components/tabs/tabs.cjs.map +1 -1
- package/dist/cjs/components/tag/tag.cjs.map +1 -1
- package/dist/cjs/components/timeline/timeline.cjs.map +1 -1
- package/dist/cjs/components/tip/tip.cjs.map +1 -1
- package/dist/cjs/components/toggle/toggle-group.cjs.map +1 -1
- package/dist/cjs/components/tooltip/tooltip.cjs +2 -2
- package/dist/cjs/components/tooltip/tooltip.cjs.map +1 -1
- package/dist/cjs/components/tree/tree.cjs.map +1 -1
- package/dist/cjs/components/tree/use-tree.cjs.map +1 -1
- package/dist/cjs/core/components/create-component.cjs.map +1 -1
- package/dist/cjs/core/css/focus-ring.cjs +4 -1
- package/dist/cjs/core/css/focus-ring.cjs.map +1 -1
- package/dist/cjs/core/system/breakpoint.cjs.map +1 -1
- package/dist/cjs/core/system/environment-provider.cjs.map +1 -1
- package/dist/cjs/core/system/styled.cjs.map +1 -1
- package/dist/cjs/core/system/theme-provider.cjs.map +1 -1
- package/dist/cjs/hooks/use-async-callback/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-breakpoint/use-breakpoint.cjs.map +1 -1
- package/dist/cjs/hooks/use-combobox/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-field-sizing/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-focus/index.cjs +8 -4
- package/dist/cjs/hooks/use-focus/index.cjs.map +1 -1
- package/dist/cjs/hooks/use-outside-click/index.cjs +4 -2
- package/dist/cjs/hooks/use-outside-click/index.cjs.map +1 -1
- package/dist/cjs/index.cjs +12 -4
- package/dist/cjs/providers/ui-provider/ui-provider.cjs.map +1 -1
- package/dist/cjs/utils/dom.cjs +4 -1
- package/dist/cjs/utils/dom.cjs.map +1 -1
- package/dist/cjs/utils/store.cjs.map +1 -1
- package/dist/esm/components/accordion/accordion.js.map +1 -1
- package/dist/esm/components/action-bar/action-bar.js.map +1 -1
- package/dist/esm/components/airy/airy.js.map +1 -1
- package/dist/esm/components/alert/alert.js.map +1 -1
- package/dist/esm/components/alpha-slider/alpha-slider.js.map +1 -1
- package/dist/esm/components/autocomplete/autocomplete.js.map +1 -1
- package/dist/esm/components/autocomplete/use-autocomplete.js.map +1 -1
- package/dist/esm/components/avatar/avatar-group.js.map +1 -1
- package/dist/esm/components/avatar/avatar.js.map +1 -1
- package/dist/esm/components/blockquote/blockquote.js.map +1 -1
- package/dist/esm/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/esm/components/button/button-group.js.map +1 -1
- package/dist/esm/components/button/button.js.map +1 -1
- package/dist/esm/components/calendar/calendar.js.map +1 -1
- package/dist/esm/components/calendar/use-calendar.js.map +1 -1
- package/dist/esm/components/carousel/carousel.js.map +1 -1
- package/dist/esm/components/chart/cartesian-chart.js.map +1 -1
- package/dist/esm/components/chart/chart.js.map +1 -1
- package/dist/esm/components/chart/polar-chart.js.map +1 -1
- package/dist/esm/components/checkbox/checkbox-group.js.map +1 -1
- package/dist/esm/components/checkbox/checkbox.js.map +1 -1
- package/dist/esm/components/checkbox-card/checkbox-card-group.js.map +1 -1
- package/dist/esm/components/checkbox-card/checkbox-card.js.map +1 -1
- package/dist/esm/components/circle-progress/circle-progress.js.map +1 -1
- package/dist/esm/components/collapse/collapse.js.map +1 -1
- package/dist/esm/components/color-picker/color-picker.js.map +1 -1
- package/dist/esm/components/color-selector/color-selector.js.map +1 -1
- package/dist/esm/components/color-swatch/color-swatch-group.js.map +1 -1
- package/dist/esm/components/color-swatch/color-swatch.js.map +1 -1
- package/dist/esm/components/data-list/data-list.js.map +1 -1
- package/dist/esm/components/date-picker/date-picker.js.map +1 -1
- package/dist/esm/components/date-picker/use-date-picker.js.map +1 -1
- package/dist/esm/components/drawer/drawer.js +1 -1
- package/dist/esm/components/drawer/drawer.js.map +1 -1
- package/dist/esm/components/dropzone/dropzone.js.map +1 -1
- package/dist/esm/components/editable/editable.js.map +1 -1
- package/dist/esm/components/editable/use-editable.js +4 -5
- package/dist/esm/components/editable/use-editable.js.map +1 -1
- package/dist/esm/components/empty-state/empty-state.js.map +1 -1
- package/dist/esm/components/fade/fade.js.map +1 -1
- package/dist/esm/components/fade-scale/fade-scale.js.map +1 -1
- package/dist/esm/components/field/field.js.map +1 -1
- package/dist/esm/components/fieldset/fieldset.js.map +1 -1
- package/dist/esm/components/file-input/file-input.js.map +1 -1
- package/dist/esm/components/flip/flip.js.map +1 -1
- package/dist/esm/components/focus-lock/focus-lock.js +27 -11
- package/dist/esm/components/focus-lock/focus-lock.js.map +1 -1
- package/dist/esm/components/focus-lock/index.js +2 -2
- package/dist/esm/components/form/form.js.map +1 -1
- package/dist/esm/components/format/format-byte.js.map +1 -1
- package/dist/esm/components/format/format-date-time.js.map +1 -1
- package/dist/esm/components/format/format-number.js.map +1 -1
- package/dist/esm/components/highlight/highlight.js.map +1 -1
- package/dist/esm/components/hue-slider/hue-slider.js.map +1 -1
- package/dist/esm/components/icon/icons/circle-euro-icon.js +14 -0
- package/dist/esm/components/icon/icons/circle-euro-icon.js.map +1 -0
- package/dist/esm/components/icon/icons/index.js +7 -3
- package/dist/esm/components/icon/icons/index.js.map +1 -1
- package/dist/esm/components/icon/icons/scan-box-icon.js +14 -0
- package/dist/esm/components/icon/icons/scan-box-icon.js.map +1 -0
- package/dist/esm/components/icon/icons/server-plus-icon.js +14 -0
- package/dist/esm/components/icon/icons/server-plus-icon.js.map +1 -0
- package/dist/esm/components/icon/index.js +4 -2
- package/dist/esm/components/indicator/indicator.js.map +1 -1
- package/dist/esm/components/infinite-scroll-area/infinite-scroll-area.js.map +1 -1
- package/dist/esm/components/input/input-group.js.map +1 -1
- package/dist/esm/components/link-box/link-box.js.map +1 -1
- package/dist/esm/components/list/list.js.map +1 -1
- package/dist/esm/components/loading/audio.js.map +1 -1
- package/dist/esm/components/loading/background.js.map +1 -1
- package/dist/esm/components/loading/circles.js.map +1 -1
- package/dist/esm/components/loading/dots.js.map +1 -1
- package/dist/esm/components/loading/grid.js.map +1 -1
- package/dist/esm/components/loading/loading-provider.js.map +1 -1
- package/dist/esm/components/loading/oval.js.map +1 -1
- package/dist/esm/components/loading/page.js.map +1 -1
- package/dist/esm/components/loading/puff.js.map +1 -1
- package/dist/esm/components/loading/rings.js.map +1 -1
- package/dist/esm/components/loading/screen.js.map +1 -1
- package/dist/esm/components/loading/suspense.js.map +1 -1
- package/dist/esm/components/menu/menu.js.map +1 -1
- package/dist/esm/components/menu/use-menu.js.map +1 -1
- package/dist/esm/components/modal/modal.js +40 -21
- package/dist/esm/components/modal/modal.js.map +1 -1
- package/dist/esm/components/native-accordion/native-accordion.js.map +1 -1
- package/dist/esm/components/native-popover/native-popover.js.map +1 -1
- package/dist/esm/components/native-select/native-select.js.map +1 -1
- package/dist/esm/components/native-select/use-native-select.js.map +1 -1
- package/dist/esm/components/native-table/native-table.js.map +1 -1
- package/dist/esm/components/notice/notice-provider.js.map +1 -1
- package/dist/esm/components/notice/notice.js.map +1 -1
- package/dist/esm/components/notice/use-notice.js.map +1 -1
- package/dist/esm/components/number-input/number-input.js.map +1 -1
- package/dist/esm/components/number-input/use-number-input.js +2 -1
- package/dist/esm/components/number-input/use-number-input.js.map +1 -1
- package/dist/esm/components/pagination/pagination.js.map +1 -1
- package/dist/esm/components/password-input/password-input.js.map +1 -1
- package/dist/esm/components/password-input/strength-meter.js.map +1 -1
- package/dist/esm/components/picture/picture.js.map +1 -1
- package/dist/esm/components/pin-input/pin-input.js.map +1 -1
- package/dist/esm/components/popover/popover.js +67 -25
- package/dist/esm/components/popover/popover.js.map +1 -1
- package/dist/esm/components/portal/portal.js +17 -1
- package/dist/esm/components/portal/portal.js.map +1 -1
- package/dist/esm/components/progress/progress.js.map +1 -1
- package/dist/esm/components/qr-code/qr-code.js.map +1 -1
- package/dist/esm/components/radio/radio-group.js.map +1 -1
- package/dist/esm/components/radio/radio.js.map +1 -1
- package/dist/esm/components/radio-card/radio-card-group.js.map +1 -1
- package/dist/esm/components/radio-card/radio-card.js.map +1 -1
- package/dist/esm/components/rating/rating.js.map +1 -1
- package/dist/esm/components/reorder/reorder.js.map +1 -1
- package/dist/esm/components/resizable/resizable.js.map +1 -1
- package/dist/esm/components/ripple/ripple.js.map +1 -1
- package/dist/esm/components/rotate/rotate.js.map +1 -1
- package/dist/esm/components/saturation-slider/saturation-slider.js.map +1 -1
- package/dist/esm/components/saturation-slider/use-saturation-slider.js.map +1 -1
- package/dist/esm/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/esm/components/select/select.js.map +1 -1
- package/dist/esm/components/select/use-select.js.map +1 -1
- package/dist/esm/components/sidebar/sidebar.js.map +1 -1
- package/dist/esm/components/skeleton/skeleton-text.js.map +1 -1
- package/dist/esm/components/slide/slide.js.map +1 -1
- package/dist/esm/components/slide-fade/slide-fade.js.map +1 -1
- package/dist/esm/components/slider/slider.js.map +1 -1
- package/dist/esm/components/slot/slot.js.map +1 -1
- package/dist/esm/components/snacks/snacks.js.map +1 -1
- package/dist/esm/components/stack/stack.js.map +1 -1
- package/dist/esm/components/stack/z-stack.js.map +1 -1
- package/dist/esm/components/stat/stat.js.map +1 -1
- package/dist/esm/components/status/status.js.map +1 -1
- package/dist/esm/components/steps/steps.js.map +1 -1
- package/dist/esm/components/switch/switch.js.map +1 -1
- package/dist/esm/components/table/table.js.map +1 -1
- package/dist/esm/components/tabs/tabs.js.map +1 -1
- package/dist/esm/components/tag/tag.js.map +1 -1
- package/dist/esm/components/timeline/timeline.js.map +1 -1
- package/dist/esm/components/tip/tip.js.map +1 -1
- package/dist/esm/components/toggle/toggle-group.js.map +1 -1
- package/dist/esm/components/tooltip/tooltip.js +2 -2
- package/dist/esm/components/tooltip/tooltip.js.map +1 -1
- package/dist/esm/components/tree/tree.js.map +1 -1
- package/dist/esm/components/tree/use-tree.js.map +1 -1
- package/dist/esm/core/components/create-component.js.map +1 -1
- package/dist/esm/core/css/focus-ring.js +4 -1
- package/dist/esm/core/css/focus-ring.js.map +1 -1
- package/dist/esm/core/system/breakpoint.js.map +1 -1
- package/dist/esm/core/system/environment-provider.js.map +1 -1
- package/dist/esm/core/system/styled.js.map +1 -1
- package/dist/esm/core/system/theme-provider.js.map +1 -1
- package/dist/esm/hooks/use-breakpoint/use-breakpoint.js.map +1 -1
- package/dist/esm/hooks/use-combobox/index.js.map +1 -1
- package/dist/esm/hooks/use-field-sizing/index.js.map +1 -1
- package/dist/esm/hooks/use-focus/index.js +8 -4
- package/dist/esm/hooks/use-focus/index.js.map +1 -1
- package/dist/esm/hooks/use-outside-click/index.js +4 -2
- package/dist/esm/hooks/use-outside-click/index.js.map +1 -1
- package/dist/esm/index.js +9 -4
- package/dist/esm/providers/ui-provider/ui-provider.js.map +1 -1
- package/dist/esm/utils/dom.js +4 -1
- package/dist/esm/utils/dom.js.map +1 -1
- package/dist/esm/utils/store.js.map +1 -1
- package/dist/types/components/avatar/avatar.d.ts +3 -3
- package/dist/types/components/avatar/avatar.style.d.ts +1 -1
- package/dist/types/components/chart/cartesian-chart.style.d.ts +1 -1
- package/dist/types/components/chart/polar-chart.style.d.ts +1 -1
- package/dist/types/components/focus-lock/focus-lock.d.ts +2 -1
- package/dist/types/components/focus-lock/index.d.ts +2 -2
- package/dist/types/components/icon/icons/circle-euro-icon.d.ts +13 -0
- package/dist/types/components/icon/icons/index.d.ts +5 -3
- package/dist/types/components/icon/icons/index.types.d.ts +1 -1
- package/dist/types/components/icon/icons/scan-box-icon.d.ts +13 -0
- package/dist/types/components/icon/icons/server-plus-icon.d.ts +13 -0
- package/dist/types/components/icon/index.d.ts +4 -2
- package/dist/types/components/menu/use-menu.d.ts +1 -1
- package/dist/types/components/modal/modal.d.ts +37 -1
- package/dist/types/components/popover/popover.d.ts +57 -2
- package/dist/types/components/tooltip/tooltip.d.ts +8 -1
- package/dist/types/core/css/focus-ring.d.ts +1 -0
- package/dist/types/index.d.ts +6 -4
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +1 -1
- package/package.json +6 -6
- package/dist/cjs/components/icon/icons/circle-euro-sign-icon.cjs +0 -14
- package/dist/cjs/components/icon/icons/circle-euro-sign-icon.cjs.map +0 -1
- package/dist/esm/components/icon/icons/circle-euro-sign-icon.js +0 -14
- package/dist/esm/components/icon/icons/circle-euro-sign-icon.js.map +0 -1
- package/dist/types/components/icon/icons/circle-euro-sign-icon.d.ts +0 -13
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editable.cjs","names":["createSlotComponent","editableStyle","useEditable","useInputBorder","EditableContext","styled","useEditableContext"],"sources":["../../../../src/components/editable/editable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { EditableStyle } from \"./editable.style\"\nimport type { UseEditableProps, UseEditableReturn } from \"./use-editable\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { useInputBorder } from \"../input\"\nimport { editableStyle } from \"./editable.style\"\nimport {\n EditableContext,\n useEditable,\n useEditableContext,\n} from \"./use-editable\"\n\ninterface EditableElementProps extends Pick<\n UseEditableReturn,\n \"editing\" | \"onCancel\" | \"onEdit\" | \"onSubmit\"\n> {}\n\nexport interface EditableRootProps\n extends\n Omit<\n HTMLStyledProps,\n \"children\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"value\"\n >,\n ThemeProps<EditableStyle>,\n UseInputBorderProps,\n UseEditableProps {\n /**\n * The editable children to use.\n */\n children?: ReactNodeOrFunction<EditableElementProps>\n}\n\nconst {\n PropsContext: EditablePropsContext,\n usePropsContext: useEditablePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<EditableRootProps, EditableStyle>(\n \"editable\",\n editableStyle,\n)\n\nexport { EditablePropsContext, useEditablePropsContext }\n\n/**\n * `Editable` is a component used to obtain inline editable text input.\n *\n * @see https://yamada-ui.com/docs/components/editable\n */\nexport const EditableRoot = withProvider(\n ({ children, errorBorderColor, focusBorderColor, ...props }) => {\n const {\n editing,\n value: _value,\n getRootProps,\n onCancel,\n onEdit,\n onSubmit,\n ...rest\n } = useEditable(props)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const cloneChildren = runIfFn(children, {\n editing,\n onCancel,\n onEdit,\n onSubmit,\n })\n\n return (\n <EditableContext value={{ editing, ...rest }}>\n <styled.div {...getRootProps()} {...varProps}>\n {cloneChildren}\n </styled.div>\n </EditableContext>\n )\n },\n)()\n\nexport interface EditablePreviewProps extends HTMLStyledProps<\"span\"> {}\n\nexport const EditablePreview = withContext<\"span\", EditablePreviewProps>(\n \"span\",\n \"preview\",\n)(undefined, (props) => {\n const { getPreviewProps } = useEditableContext()\n\n return { ...getPreviewProps(props) }\n})\n\nexport interface EditableInputProps extends HTMLStyledProps<\"input\"> {}\n\nexport const EditableInput = withContext<\"input\", EditableInputProps>(\n \"input\",\n \"input\",\n)(undefined, (props) => {\n const { getInputProps } = useEditableContext()\n\n return { ...getInputProps(props) }\n})\n\nexport interface EditableTextareaProps extends HTMLStyledProps<\"textarea\"> {}\n\nexport const EditableTextarea = withContext<\"textarea\", EditableTextareaProps>(\n \"textarea\",\n \"textarea\",\n)(undefined, (props) => {\n const { getTextareaProps } = useEditableContext()\n\n return { ...getTextareaProps(props) }\n})\n\nexport interface EditableControlProps extends HTMLStyledProps {}\n\nexport const EditableControl = withContext<\"div\", EditableControlProps>(\n \"div\",\n \"control\",\n)(undefined, (props) => {\n const { getControlProps } = useEditableContext()\n\n return { ...getControlProps(props) }\n})\n\nexport interface EditableEditTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableEditTrigger = withContext<\n \"button\",\n EditableEditTriggerProps\n>(\"button\", { name: \"EditTrigger\", slot: [\"trigger\", \"edit\"] })(\n undefined,\n (props) => {\n const { getEditProps } = useEditableContext()\n\n return { asChild: true, ...getEditProps(props) }\n },\n)\n\nexport interface EditableCancelTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableCancelTrigger = withContext<\n \"button\",\n EditableCancelTriggerProps\n>(\"button\", { name: \"CancelTrigger\", slot: [\"trigger\", \"cancel\"] })(\n undefined,\n (props) => {\n const { getCancelProps } = useEditableContext()\n\n return { asChild: true, ...getCancelProps(props) }\n },\n)\n\nexport interface EditableSubmitTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableSubmitTrigger = withContext<\n \"button\",\n EditableSubmitTriggerProps\n>(\"button\", { name: \"SubmitTrigger\", slot: [\"trigger\", \"submit\"] })(\n undefined,\n (props) => {\n const { getSubmitProps } = useEditableContext()\n\n return { asChild: true, ...getSubmitProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;AAqCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACEA,yBAAAA,oBACF,YACAC,uBAAAA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,YAAY;CAC9D,MAAM,EACJ,SACA,OAAO,QACP,cACA,UACA,QACA,UACA,GAAG,SACDC,qBAAAA,YAAY,KAAK;CACrB,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,iBAAA,GAAA,oBAAA,cAAA,QAAA,CAAwB,UAAU;EACtC;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,iBAAD;EAAiB,OAAO;GAAE;GAAS,GAAG;EAAK;
|
|
1
|
+
{"version":3,"file":"editable.cjs","names":["createSlotComponent","editableStyle","useEditable","useInputBorder","EditableContext","styled","useEditableContext"],"sources":["../../../../src/components/editable/editable.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { EditableStyle } from \"./editable.style\"\nimport type { UseEditableProps, UseEditableReturn } from \"./use-editable\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { runIfFn } from \"../../utils\"\nimport { useInputBorder } from \"../input\"\nimport { editableStyle } from \"./editable.style\"\nimport {\n EditableContext,\n useEditable,\n useEditableContext,\n} from \"./use-editable\"\n\ninterface EditableElementProps extends Pick<\n UseEditableReturn,\n \"editing\" | \"onCancel\" | \"onEdit\" | \"onSubmit\"\n> {}\n\nexport interface EditableRootProps\n extends\n Omit<\n HTMLStyledProps,\n \"children\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"value\"\n >,\n ThemeProps<EditableStyle>,\n UseInputBorderProps,\n UseEditableProps {\n /**\n * The editable children to use.\n */\n children?: ReactNodeOrFunction<EditableElementProps>\n}\n\nconst {\n PropsContext: EditablePropsContext,\n usePropsContext: useEditablePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<EditableRootProps, EditableStyle>(\n \"editable\",\n editableStyle,\n)\n\nexport { EditablePropsContext, useEditablePropsContext }\n\n/**\n * `Editable` is a component used to obtain inline editable text input.\n *\n * @see https://yamada-ui.com/docs/components/editable\n */\nexport const EditableRoot = withProvider(\n ({ children, errorBorderColor, focusBorderColor, ...props }) => {\n const {\n editing,\n value: _value,\n getRootProps,\n onCancel,\n onEdit,\n onSubmit,\n ...rest\n } = useEditable(props)\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const cloneChildren = runIfFn(children, {\n editing,\n onCancel,\n onEdit,\n onSubmit,\n })\n\n return (\n <EditableContext value={{ editing, ...rest }}>\n <styled.div {...getRootProps()} {...varProps}>\n {cloneChildren}\n </styled.div>\n </EditableContext>\n )\n },\n)()\n\nexport interface EditablePreviewProps extends HTMLStyledProps<\"span\"> {}\n\nexport const EditablePreview = withContext<\"span\", EditablePreviewProps>(\n \"span\",\n \"preview\",\n)(undefined, (props) => {\n const { getPreviewProps } = useEditableContext()\n\n return { ...getPreviewProps(props) }\n})\n\nexport interface EditableInputProps extends HTMLStyledProps<\"input\"> {}\n\nexport const EditableInput = withContext<\"input\", EditableInputProps>(\n \"input\",\n \"input\",\n)(undefined, (props) => {\n const { getInputProps } = useEditableContext()\n\n return { ...getInputProps(props) }\n})\n\nexport interface EditableTextareaProps extends HTMLStyledProps<\"textarea\"> {}\n\nexport const EditableTextarea = withContext<\"textarea\", EditableTextareaProps>(\n \"textarea\",\n \"textarea\",\n)(undefined, (props) => {\n const { getTextareaProps } = useEditableContext()\n\n return { ...getTextareaProps(props) }\n})\n\nexport interface EditableControlProps extends HTMLStyledProps {}\n\nexport const EditableControl = withContext<\"div\", EditableControlProps>(\n \"div\",\n \"control\",\n)(undefined, (props) => {\n const { getControlProps } = useEditableContext()\n\n return { ...getControlProps(props) }\n})\n\nexport interface EditableEditTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableEditTrigger = withContext<\n \"button\",\n EditableEditTriggerProps\n>(\"button\", { name: \"EditTrigger\", slot: [\"trigger\", \"edit\"] })(\n undefined,\n (props) => {\n const { getEditProps } = useEditableContext()\n\n return { asChild: true, ...getEditProps(props) }\n },\n)\n\nexport interface EditableCancelTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableCancelTrigger = withContext<\n \"button\",\n EditableCancelTriggerProps\n>(\"button\", { name: \"CancelTrigger\", slot: [\"trigger\", \"cancel\"] })(\n undefined,\n (props) => {\n const { getCancelProps } = useEditableContext()\n\n return { asChild: true, ...getCancelProps(props) }\n },\n)\n\nexport interface EditableSubmitTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const EditableSubmitTrigger = withContext<\n \"button\",\n EditableSubmitTriggerProps\n>(\"button\", { name: \"SubmitTrigger\", slot: [\"trigger\", \"submit\"] })(\n undefined,\n (props) => {\n const { getSubmitProps } = useEditableContext()\n\n return { asChild: true, ...getSubmitProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;AAqCA,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACEA,yBAAAA,oBACF,YACAC,uBAAAA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EAAE,UAAU,kBAAkB,kBAAkB,GAAG,YAAY;CAC9D,MAAM,EACJ,SACA,OAAO,QACP,cACA,UACA,QACA,UACA,GAAG,SACDC,qBAAAA,YAAY,KAAK;CACrB,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,iBAAA,GAAA,oBAAA,cAAA,QAAA,CAAwB,UAAU;EACtC;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,qBAAAA,iBAAD;EAAiB,OAAO;GAAE;GAAS,GAAG;EAAK;EACzC,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;GAAY,GAAI,aAAa;GAAG,GAAI;GACjC,UAAA;EACS,CAAA;CACG,CAAA;AAErB,CACF,CAAC,CAAC;AAIF,MAAa,kBAAkB,YAC7B,QACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoBC,qBAAAA,mBAAmB;CAE/C,OAAO,EAAE,GAAG,gBAAgB,KAAK,EAAE;AACrC,CAAC;AAID,MAAa,gBAAgB,YAC3B,SACA,OACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,kBAAkBA,qBAAAA,mBAAmB;CAE7C,OAAO,EAAE,GAAG,cAAc,KAAK,EAAE;AACnC,CAAC;AAID,MAAa,mBAAmB,YAC9B,YACA,UACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,qBAAqBA,qBAAAA,mBAAmB;CAEhD,OAAO,EAAE,GAAG,iBAAiB,KAAK,EAAE;AACtC,CAAC;AAID,MAAa,kBAAkB,YAC7B,OACA,SACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,oBAAoBA,qBAAAA,mBAAmB;CAE/C,OAAO,EAAE,GAAG,gBAAgB,KAAK,EAAE;AACrC,CAAC;AAID,MAAa,sBAAsB,YAGjC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,MAAM;AAAE,CAAC,CAAC,CAC7D,KAAA,IACC,UAAU;CACT,MAAM,EAAE,iBAAiBA,qBAAAA,mBAAmB;CAE5C,OAAO;EAAE,SAAS;EAAM,GAAG,aAAa,KAAK;CAAE;AACjD,CACF;AAIA,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAiB,MAAM,CAAC,WAAW,QAAQ;AAAE,CAAC,CAAC,CACjE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,mBAAmBA,qBAAAA,mBAAmB;CAE9C,OAAO;EAAE,SAAS;EAAM,GAAG,eAAe,KAAK;CAAE;AACnD,CACF;AAIA,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAiB,MAAM,CAAC,WAAW,QAAQ;AAAE,CAAC,CAAC,CACjE,KAAA,IACC,UAAU;CACT,MAAM,EAAE,mBAAmBA,qBAAAA,mBAAmB;CAE9C,OAAO;EAAE,SAAS;EAAM,GAAG,eAAe,KAAK;CAAE;AACnD,CACF"}
|
|
@@ -65,8 +65,8 @@ const useEditable = (props = {}) => {
|
|
|
65
65
|
}, [onCancel]);
|
|
66
66
|
const onBlur = (0, react.useCallback)((ev) => {
|
|
67
67
|
if (!editing) return;
|
|
68
|
-
const
|
|
69
|
-
const relatedTarget = ev.relatedTarget ??
|
|
68
|
+
const rootNode = ev.currentTarget.getRootNode();
|
|
69
|
+
const relatedTarget = (0, require_utils_index.utils_exports.isShadowRoot)(rootNode) ? rootNode.activeElement ?? ev.relatedTarget : ev.relatedTarget ?? rootNode.activeElement;
|
|
70
70
|
const targetIsCancel = (0, require_utils_index.utils_exports.contains)(cancelRef.current, relatedTarget);
|
|
71
71
|
const targetIsSubmit = (0, require_utils_index.utils_exports.contains)(submitRef.current, relatedTarget);
|
|
72
72
|
if (!(!targetIsCancel && !targetIsSubmit)) return;
|
|
@@ -102,9 +102,8 @@ const useEditable = (props = {}) => {
|
|
|
102
102
|
selectAllOnFocus
|
|
103
103
|
]);
|
|
104
104
|
(0, react.useEffect)(() => {
|
|
105
|
-
if (editing) return;
|
|
106
|
-
|
|
107
|
-
if (el?.ownerDocument.activeElement === el) el?.blur();
|
|
105
|
+
if (editing || !inputRef.current) return;
|
|
106
|
+
if ((0, require_utils_index.utils_exports.isActiveElement)(inputRef.current, inputRef.current.getRootNode())) inputRef.current.blur();
|
|
108
107
|
}, [editing]);
|
|
109
108
|
const getRootProps = (0, react.useCallback)((props) => ({
|
|
110
109
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-editable.cjs","names":["createContext","useFieldProps","useCallbackRef","useControllableState","mergeRefs"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n contains,\n createContext,\n handlerAll,\n mergeRefs,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n UseEditableReturn,\n \"getRootProps\" | \"onCancel\" | \"onEdit\" | \"onSubmit\" | \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n /**\n * The initial value of the Editable in both edit & preview mode.\n */\n defaultValue?: string\n /**\n * The placeholder text when the value is empty.\n */\n placeholder?: string\n /**\n * If `true`, the read only view, has a `tabIndex` set to `0`\n * so it can receive focus via the keyboard or click.\n *\n * @default true\n */\n previewFocusable?: boolean\n /**\n * If `true`, the input's text will be highlighted on focus.\n *\n * @default true\n */\n selectAllOnFocus?: boolean\n /**\n * If `true`, the Editable will start with edit mode by default.\n */\n startWithEditView?: boolean\n /**\n * If `true`, it'll update the value onBlur and turn off the edit mode.\n *\n * @default true\n */\n submitOnBlur?: boolean\n /**\n * The value of the Editable in both edit & preview mode.\n */\n value?: string\n /**\n * Callback invoked when user cancels input with the `Esc` key.\n * It provides the last confirmed value as argument.\n */\n onCancel?: (preValue: string) => void\n /**\n * A callback invoked when user changes input.\n */\n onChange?: (value: string) => void\n /**\n * A callback invoked once the user enters edit mode.\n */\n onEdit?: () => void\n /**\n * A callback invoked when user confirms value with `enter` key or by blurring input.\n */\n onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps = {}) => {\n const {\n props: {\n id,\n defaultValue,\n disabled,\n placeholder,\n previewFocusable = true,\n readOnly,\n required,\n selectAllOnFocus = true,\n startWithEditView,\n submitOnBlur = true,\n value: valueProp,\n onCancel: onCancelProp,\n onChange: onChangeProp,\n onEdit: onEditProp,\n onSubmit: onSubmitProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const [editing, setEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue || \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n const interactive = !editing && !disabled\n const emptyValue = value.length === 0\n const [prevValue, setPrevValue] = useState(value)\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n const previewRef = useRef<HTMLElement>(null)\n const editRef = useRef<HTMLButtonElement>(null)\n const cancelRef = useRef<HTMLButtonElement>(null)\n const submitRef = useRef<HTMLButtonElement>(null)\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n setValue(ev.currentTarget.value),\n [setValue],\n )\n\n const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n const onEdit = useCallback(() => {\n if (interactive) setEditing(true)\n }, [interactive])\n\n const onCancel = useCallback(() => {\n setEditing(false)\n setValue(prevValue)\n onCancelProp?.(prevValue)\n }, [prevValue, onCancelProp, setValue])\n\n const onSubmit = useCallback(() => {\n setEditing(false)\n setPrevValue(value)\n onSubmitProp?.(value)\n }, [onSubmitProp, value])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n if (ev.key === \"Escape\") {\n ev.preventDefault()\n onCancel()\n } else {\n const { metaKey, shiftKey } = ev\n\n if (!shiftKey && !metaKey) {\n ev.preventDefault()\n onSubmit()\n }\n }\n },\n [onCancel, onSubmit],\n )\n\n const onKeyDownWithoutSubmit = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\") return\n\n ev.preventDefault()\n onCancel()\n },\n [onCancel],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent) => {\n if (!editing) return\n\n const ownerDocument = ev.currentTarget.ownerDocument\n const relatedTarget = (ev.relatedTarget ??\n ownerDocument.activeElement) as HTMLElement\n const targetIsCancel = contains(cancelRef.current, relatedTarget)\n const targetIsSubmit = contains(submitRef.current, relatedTarget)\n const validBlur = !targetIsCancel && !targetIsSubmit\n\n if (!validBlur) return\n\n if (submitOnBlur) onSubmit()\n else onCancel()\n },\n [editing, submitOnBlur, onSubmit, onCancel],\n )\n\n useFocusOnPointerDown({\n ref: inputRef,\n elements: [cancelRef, submitRef],\n enabled: editing,\n })\n\n useSafeLayoutEffect(() => {\n if (!editing) return\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n }, [])\n\n useUpdateEffect(() => {\n if (!editing) {\n editRef.current?.focus()\n\n return\n }\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n\n onEditRef()\n }, [editing, onEditRef, selectAllOnFocus])\n\n useEffect(() => {\n if (editing) return\n\n const el = inputRef.current\n const activeEl = el?.ownerDocument.activeElement\n\n if (activeEl === el) el?.blur()\n }, [editing])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest,\n ...dataProps,\n ...props,\n }),\n [rest, dataProps],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(previewRef, ref),\n children: emptyValue ? placeholder : value,\n hidden: editing,\n tabIndex: interactive && previewFocusable ? 0 : undefined,\n onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n }),\n [\n dataProps,\n editing,\n interactive,\n previewFocusable,\n emptyValue,\n onEdit,\n onUpdatePrevValue,\n placeholder,\n value,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDown,\n ],\n )\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDownWithoutSubmit,\n ],\n )\n\n const getControlProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n role: \"group\",\n ...props,\n }),\n [dataProps],\n )\n\n const getEditProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(editRef, ref),\n disabled,\n hidden: editing,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [dataProps, disabled, editing, onEdit],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [dataProps, disabled, editing, onSubmit],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [dataProps, disabled, editing, onCancel],\n )\n\n return {\n editing,\n value,\n getCancelProps,\n getControlProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getRootProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"use-editable.cjs","names":["createContext","useFieldProps","useCallbackRef","useControllableState","mergeRefs"],"sources":["../../../../src/components/editable/use-editable.ts"],"sourcesContent":["\"use client\"\n\nimport type { ChangeEvent, FocusEvent, KeyboardEvent } from \"react\"\nimport type { PropGetter } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { useFocusOnPointerDown } from \"../../hooks/use-focus\"\nimport {\n contains,\n createContext,\n handlerAll,\n isActiveElement,\n isShadowRoot,\n mergeRefs,\n useCallbackRef,\n useSafeLayoutEffect,\n useUpdateEffect,\n} from \"../../utils\"\nimport { useFieldProps } from \"../field\"\n\ninterface EditableContext extends Omit<\n UseEditableReturn,\n \"getRootProps\" | \"onCancel\" | \"onEdit\" | \"onSubmit\" | \"value\"\n> {}\n\nconst [EditableContext, useEditableContext] = createContext<EditableContext>({\n name: \"EditableContext\",\n})\n\nexport { EditableContext, useEditableContext }\n\nexport interface UseEditableProps extends FieldProps {\n /**\n * The initial value of the Editable in both edit & preview mode.\n */\n defaultValue?: string\n /**\n * The placeholder text when the value is empty.\n */\n placeholder?: string\n /**\n * If `true`, the read only view, has a `tabIndex` set to `0`\n * so it can receive focus via the keyboard or click.\n *\n * @default true\n */\n previewFocusable?: boolean\n /**\n * If `true`, the input's text will be highlighted on focus.\n *\n * @default true\n */\n selectAllOnFocus?: boolean\n /**\n * If `true`, the Editable will start with edit mode by default.\n */\n startWithEditView?: boolean\n /**\n * If `true`, it'll update the value onBlur and turn off the edit mode.\n *\n * @default true\n */\n submitOnBlur?: boolean\n /**\n * The value of the Editable in both edit & preview mode.\n */\n value?: string\n /**\n * Callback invoked when user cancels input with the `Esc` key.\n * It provides the last confirmed value as argument.\n */\n onCancel?: (preValue: string) => void\n /**\n * A callback invoked when user changes input.\n */\n onChange?: (value: string) => void\n /**\n * A callback invoked once the user enters edit mode.\n */\n onEdit?: () => void\n /**\n * A callback invoked when user confirms value with `enter` key or by blurring input.\n */\n onSubmit?: (value: string) => void\n}\n\nexport const useEditable = (props: UseEditableProps = {}) => {\n const {\n props: {\n id,\n defaultValue,\n disabled,\n placeholder,\n previewFocusable = true,\n readOnly,\n required,\n selectAllOnFocus = true,\n startWithEditView,\n submitOnBlur = true,\n value: valueProp,\n onCancel: onCancelProp,\n onChange: onChangeProp,\n onEdit: onEditProp,\n onSubmit: onSubmitProp,\n ...rest\n },\n ariaProps,\n dataProps,\n eventProps,\n } = useFieldProps(props)\n const onEditRef = useCallbackRef(onEditProp)\n const [editing, setEditing] = useState<boolean>(\n !!startWithEditView && !disabled,\n )\n const [value, setValue] = useControllableState({\n defaultValue: defaultValue || \"\",\n value: valueProp,\n onChange: onChangeProp,\n })\n const interactive = !editing && !disabled\n const emptyValue = value.length === 0\n const [prevValue, setPrevValue] = useState(value)\n const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)\n const previewRef = useRef<HTMLElement>(null)\n const editRef = useRef<HTMLButtonElement>(null)\n const cancelRef = useRef<HTMLButtonElement>(null)\n const submitRef = useRef<HTMLButtonElement>(null)\n\n const onChange = useCallback(\n (ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>\n setValue(ev.currentTarget.value),\n [setValue],\n )\n\n const onUpdatePrevValue = useCallback(() => setPrevValue(value), [value])\n\n const onEdit = useCallback(() => {\n if (interactive) setEditing(true)\n }, [interactive])\n\n const onCancel = useCallback(() => {\n setEditing(false)\n setValue(prevValue)\n onCancelProp?.(prevValue)\n }, [prevValue, onCancelProp, setValue])\n\n const onSubmit = useCallback(() => {\n setEditing(false)\n setPrevValue(value)\n onSubmitProp?.(value)\n }, [onSubmitProp, value])\n\n const onKeyDown = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\" && ev.key !== \"Enter\") return\n\n if (ev.key === \"Escape\") {\n ev.preventDefault()\n onCancel()\n } else {\n const { metaKey, shiftKey } = ev\n\n if (!shiftKey && !metaKey) {\n ev.preventDefault()\n onSubmit()\n }\n }\n },\n [onCancel, onSubmit],\n )\n\n const onKeyDownWithoutSubmit = useCallback(\n (ev: KeyboardEvent) => {\n if (ev.key !== \"Escape\") return\n\n ev.preventDefault()\n onCancel()\n },\n [onCancel],\n )\n\n const onBlur = useCallback(\n (ev: FocusEvent) => {\n if (!editing) return\n\n const rootNode = ev.currentTarget.getRootNode() as Document | ShadowRoot\n const relatedTarget = (\n isShadowRoot(rootNode)\n ? (rootNode.activeElement ?? ev.relatedTarget)\n : (ev.relatedTarget ?? rootNode.activeElement)\n ) as HTMLElement\n const targetIsCancel = contains(cancelRef.current, relatedTarget)\n const targetIsSubmit = contains(submitRef.current, relatedTarget)\n const validBlur = !targetIsCancel && !targetIsSubmit\n\n if (!validBlur) return\n\n if (submitOnBlur) onSubmit()\n else onCancel()\n },\n [editing, submitOnBlur, onSubmit, onCancel],\n )\n\n useFocusOnPointerDown({\n ref: inputRef,\n elements: [cancelRef, submitRef],\n enabled: editing,\n })\n\n useSafeLayoutEffect(() => {\n if (!editing) return\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n }, [])\n\n useUpdateEffect(() => {\n if (!editing) {\n editRef.current?.focus()\n\n return\n }\n\n inputRef.current?.focus()\n\n if (selectAllOnFocus) inputRef.current?.select()\n\n onEditRef()\n }, [editing, onEditRef, selectAllOnFocus])\n\n useEffect(() => {\n if (editing || !inputRef.current) return\n if (isActiveElement(inputRef.current, inputRef.current.getRootNode()))\n inputRef.current.blur()\n }, [editing])\n\n const getRootProps: PropGetter = useCallback(\n (props) => ({\n ...rest,\n ...dataProps,\n ...props,\n }),\n [rest, dataProps],\n )\n\n const getPreviewProps: PropGetter<\"span\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(previewRef, ref),\n children: emptyValue ? placeholder : value,\n hidden: editing,\n tabIndex: interactive && previewFocusable ? 0 : undefined,\n onFocus: handlerAll(props.onFocus, onEdit, onUpdatePrevValue),\n }),\n [\n dataProps,\n editing,\n interactive,\n previewFocusable,\n emptyValue,\n onEdit,\n onUpdatePrevValue,\n placeholder,\n value,\n ],\n )\n\n const getInputProps: PropGetter<\"input\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDown,\n ],\n )\n\n const getTextareaProps: PropGetter<\"textarea\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...ariaProps,\n ...props,\n id,\n ref: mergeRefs(inputRef, ref),\n disabled,\n hidden: !editing,\n placeholder,\n readOnly,\n required,\n value,\n onBlur: handlerAll(eventProps.onBlur, props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange),\n onFocus: handlerAll(eventProps.onFocus, props.onFocus, onUpdatePrevValue),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDownWithoutSubmit),\n }),\n [\n dataProps,\n ariaProps,\n id,\n disabled,\n editing,\n placeholder,\n readOnly,\n required,\n value,\n eventProps.onBlur,\n eventProps.onFocus,\n onBlur,\n onChange,\n onUpdatePrevValue,\n onKeyDownWithoutSubmit,\n ],\n )\n\n const getControlProps: PropGetter = useCallback(\n (props) => ({\n ...dataProps,\n role: \"group\",\n ...props,\n }),\n [dataProps],\n )\n\n const getEditProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(editRef, ref),\n disabled,\n hidden: editing,\n onClick: handlerAll(props.onClick, onEdit),\n }),\n [dataProps, disabled, editing, onEdit],\n )\n\n const getSubmitProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(submitRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onSubmit),\n }),\n [dataProps, disabled, editing, onSubmit],\n )\n\n const getCancelProps: PropGetter<\"button\"> = useCallback(\n ({ ref, ...props } = {}) => ({\n ...dataProps,\n ...props,\n ref: mergeRefs(cancelRef, ref),\n disabled,\n hidden: !editing,\n onClick: handlerAll(props.onClick, onCancel),\n }),\n [dataProps, disabled, editing, onCancel],\n )\n\n return {\n editing,\n value,\n getCancelProps,\n getControlProps,\n getEditProps,\n getInputProps,\n getPreviewProps,\n getRootProps,\n getSubmitProps,\n getTextareaProps,\n onCancel,\n onEdit,\n onSubmit,\n }\n}\n\nexport type UseEditableReturn = ReturnType<typeof useEditable>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"empty-state.cjs","names":["createSlotComponent","emptyState","useSplitChildren","styled"],"sources":["../../../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { EmptyState } from \"./empty-state.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useSplitChildren } from \"../../utils\"\nimport { emptyState } from \"./empty-state.style\"\n\nexport interface EmptyStateRootProps\n extends Omit<HTMLStyledProps, \"title\">, ThemeProps<EmptyState> {\n /**\n * The empty state description to use.\n */\n description?: ReactNode\n /**\n * The empty state indicator to use.\n */\n indicator?: ReactNode\n /**\n * The empty state title to use.\n */\n title?: ReactNode\n /**\n * The props for the empty state content component.\n */\n contentProps?: EmptyStateContentProps\n /**\n * The props for the empty state description component.\n */\n descriptionProps?: EmptyStateDescriptionProps\n /**\n * The props for the empty state indicator component.\n */\n indicatorProps?: EmptyStateIndicatorProps\n /**\n * The props for the empty state title component.\n */\n titleProps?: EmptyStateTitleProps\n}\n\nconst {\n PropsContext: EmptyStatePropsContext,\n usePropsContext: useEmptyStatePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<EmptyStateRootProps, EmptyState>(\n \"empty-state\",\n emptyState,\n)\n\nexport { EmptyStatePropsContext, useEmptyStatePropsContext }\n\n/**\n * `EmptyState` is used to display when a resource is empty or not available.\n *\n * @see https://yamada-ui.com/docs/components/empty-state\n */\nexport const EmptyStateRoot = withProvider<\"div\", EmptyStateRootProps>(\n ({\n children,\n description,\n indicator,\n title,\n contentProps,\n descriptionProps,\n indicatorProps,\n titleProps,\n ...rest\n }) => {\n const [\n omittedChildren,\n customIndicator,\n customContent,\n customTitle,\n customDescription,\n ] = useSplitChildren(\n children,\n EmptyStateIndicator,\n EmptyStateContent,\n EmptyStateTitle,\n EmptyStateDescription,\n )\n\n return (\n <styled.div {...rest}>\n {customIndicator ?? (\n <EmptyStateIndicator {...indicatorProps}>\n {indicator}\n </EmptyStateIndicator>\n )}\n\n {customContent ?? (\n <EmptyStateContent {...contentProps}>\n {customTitle ??\n (title ? (\n <EmptyStateTitle {...titleProps}>{title}</EmptyStateTitle>\n ) : null)}\n\n {customDescription ??\n (description ? (\n <EmptyStateDescription {...descriptionProps}>\n {description}\n </EmptyStateDescription>\n ) : null)}\n </EmptyStateContent>\n )}\n\n {omittedChildren}\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface EmptyStateIndicatorProps extends HTMLStyledProps {}\n\nexport const EmptyStateIndicator = withContext<\"div\", EmptyStateIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\nexport interface EmptyStateContentProps extends HTMLStyledProps {}\n\nexport const EmptyStateContent = withContext<\"div\", EmptyStateContentProps>(\n \"div\",\n \"content\",\n)()\n\nexport interface EmptyStateTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const EmptyStateTitle = withContext<\"h3\", EmptyStateTitleProps>(\n \"h3\",\n \"title\",\n)()\n\nexport interface EmptyStateDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const EmptyStateDescription = withContext<\n \"p\",\n EmptyStateDescriptionProps\n>(\"p\", \"description\")()\n"],"mappings":";;;;;;;AAyCA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACEA,yBAAAA,oBACF,eACAC,0BAAAA,UACF;;;;;;AASA,MAAa,iBAAiB,cAC3B,EACC,UACA,aACA,WACA,OACA,cACA,kBACA,gBACA,YACA,GAAG,WACC;CACJ,MAAM,CACJ,iBACA,iBACA,eACA,aACA,qBACEC,iBAAAA,iBACF,UACA,qBACA,mBACA,iBACA,qBACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EAAY,GAAI;
|
|
1
|
+
{"version":3,"file":"empty-state.cjs","names":["createSlotComponent","emptyState","useSplitChildren","styled"],"sources":["../../../../src/components/empty-state/empty-state.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { EmptyState } from \"./empty-state.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useSplitChildren } from \"../../utils\"\nimport { emptyState } from \"./empty-state.style\"\n\nexport interface EmptyStateRootProps\n extends Omit<HTMLStyledProps, \"title\">, ThemeProps<EmptyState> {\n /**\n * The empty state description to use.\n */\n description?: ReactNode\n /**\n * The empty state indicator to use.\n */\n indicator?: ReactNode\n /**\n * The empty state title to use.\n */\n title?: ReactNode\n /**\n * The props for the empty state content component.\n */\n contentProps?: EmptyStateContentProps\n /**\n * The props for the empty state description component.\n */\n descriptionProps?: EmptyStateDescriptionProps\n /**\n * The props for the empty state indicator component.\n */\n indicatorProps?: EmptyStateIndicatorProps\n /**\n * The props for the empty state title component.\n */\n titleProps?: EmptyStateTitleProps\n}\n\nconst {\n PropsContext: EmptyStatePropsContext,\n usePropsContext: useEmptyStatePropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<EmptyStateRootProps, EmptyState>(\n \"empty-state\",\n emptyState,\n)\n\nexport { EmptyStatePropsContext, useEmptyStatePropsContext }\n\n/**\n * `EmptyState` is used to display when a resource is empty or not available.\n *\n * @see https://yamada-ui.com/docs/components/empty-state\n */\nexport const EmptyStateRoot = withProvider<\"div\", EmptyStateRootProps>(\n ({\n children,\n description,\n indicator,\n title,\n contentProps,\n descriptionProps,\n indicatorProps,\n titleProps,\n ...rest\n }) => {\n const [\n omittedChildren,\n customIndicator,\n customContent,\n customTitle,\n customDescription,\n ] = useSplitChildren(\n children,\n EmptyStateIndicator,\n EmptyStateContent,\n EmptyStateTitle,\n EmptyStateDescription,\n )\n\n return (\n <styled.div {...rest}>\n {customIndicator ?? (\n <EmptyStateIndicator {...indicatorProps}>\n {indicator}\n </EmptyStateIndicator>\n )}\n\n {customContent ?? (\n <EmptyStateContent {...contentProps}>\n {customTitle ??\n (title ? (\n <EmptyStateTitle {...titleProps}>{title}</EmptyStateTitle>\n ) : null)}\n\n {customDescription ??\n (description ? (\n <EmptyStateDescription {...descriptionProps}>\n {description}\n </EmptyStateDescription>\n ) : null)}\n </EmptyStateContent>\n )}\n\n {omittedChildren}\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface EmptyStateIndicatorProps extends HTMLStyledProps {}\n\nexport const EmptyStateIndicator = withContext<\"div\", EmptyStateIndicatorProps>(\n \"div\",\n \"indicator\",\n)()\n\nexport interface EmptyStateContentProps extends HTMLStyledProps {}\n\nexport const EmptyStateContent = withContext<\"div\", EmptyStateContentProps>(\n \"div\",\n \"content\",\n)()\n\nexport interface EmptyStateTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const EmptyStateTitle = withContext<\"h3\", EmptyStateTitleProps>(\n \"h3\",\n \"title\",\n)()\n\nexport interface EmptyStateDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const EmptyStateDescription = withContext<\n \"p\",\n EmptyStateDescriptionProps\n>(\"p\", \"description\")()\n"],"mappings":";;;;;;;AAyCA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACEA,yBAAAA,oBACF,eACAC,0BAAAA,UACF;;;;;;AASA,MAAa,iBAAiB,cAC3B,EACC,UACA,aACA,WACA,OACA,cACA,kBACA,gBACA,YACA,GAAG,WACC;CACJ,MAAM,CACJ,iBACA,iBACA,eACA,aACA,qBACEC,iBAAAA,iBACF,UACA,qBACA,mBACA,iBACA,qBACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EAAY,GAAI;EAAhB,UAAA;GACG,mBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAD;IAAqB,GAAI;IACtB,UAAA;GACkB,CAAA;GAGtB,iBACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,mBAAD;IAAmB,GAAI;IAAvB,UAAA,CACG,gBACE,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;KAAiB,GAAI;KAAa,UAAA;IAAuB,CAAA,IACvD,OAEL,sBACE,cACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;KAAuB,GAAI;KACxB,UAAA;IACoB,CAAA,IACrB,KACW;;GAGpB;EACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,sBAAsB,YACjC,OACA,WACF,CAAC,CAAC;AAIF,MAAa,oBAAoB,YAC/B,OACA,SACF,CAAC,CAAC;AAIF,MAAa,kBAAkB,YAC7B,MACA,OACF,CAAC,CAAC;AAIF,MAAa,wBAAwB,YAGnC,KAAK,aAAa,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fade.cjs","names":["createTransition","createComponent","fadeStyle","AnimatePresence","motion"],"sources":["../../../../src/components/fade/fade.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n HTMLMotionProps,\n MotionTransitionVariants,\n WithTransitionProps,\n} from \"../motion\"\nimport type { FadeStyle } from \"./fade.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeStyle } from \"./fade.style\"\n\nexport const fadeVariants: Variants = {\n enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n opacity: 1,\n transition: createTransition.enter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n ...enter,\n }),\n exit: ({ delay, duration, exit, transition, transitionEnd } = {}) => ({\n opacity: 0,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n transitionEnd: transitionEnd?.exit,\n ...exit,\n }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeProps\n extends WithTransitionProps<HTMLMotionProps>, ThemeProps<FadeStyle> {}\n\nconst {\n PropsContext: FadePropsContext,\n usePropsContext: useFadePropsContext,\n withContext,\n} = createComponent<FadeProps, FadeStyle>(\"fade\", fadeStyle)\n\nexport { FadePropsContext, useFadePropsContext }\n\n/**\n * `Fade` is a component that gradually shows or hides an element.\n *\n * @see https://yamada-ui.com/docs/components/fade\n */\nexport const Fade = withContext<\"div\", FadeProps>(\n ({\n delay,\n duration,\n open: openProp,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n }) => {\n const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n const open = unmountOnExit ? openProp && unmountOnExit : true\n\n const custom = useMemo(\n () => ({\n delay,\n duration,\n transition,\n transitionEnd,\n }),\n [delay, duration, transition, transitionEnd],\n )\n\n return (\n <AnimatePresence custom={custom}>\n {open ? (\n <motion.div\n animate={animate}\n custom={custom}\n exit=\"exit\"\n initial=\"exit\"\n variants={fadeVariants}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,eAAyB;CACpC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,CAAC,OAAO;EACtE,SAAS;EACT,YAAYA,mBAAAA,iBAAiB,MAAM,YAAY,KAAK,CAAC,CAAC,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EAAE,OAAO,UAAU,MAAM,YAAY,kBAAkB,CAAC,OAAO;EACpE,SAAS;EACT,YAAYA,mBAAAA,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAKA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACEC,yBAAAA,gBAAsC,QAAQC,mBAAAA,SAAS;;;;;;AAS3D,MAAa,OAAO,aACjB,EACC,OACA,UACA,MAAM,UACN,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,UAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAY;CAAa,CAC7C;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD;EAAyB;
|
|
1
|
+
{"version":3,"file":"fade.cjs","names":["createTransition","createComponent","fadeStyle","AnimatePresence","motion"],"sources":["../../../../src/components/fade/fade.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n HTMLMotionProps,\n MotionTransitionVariants,\n WithTransitionProps,\n} from \"../motion\"\nimport type { FadeStyle } from \"./fade.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeStyle } from \"./fade.style\"\n\nexport const fadeVariants: Variants = {\n enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n opacity: 1,\n transition: createTransition.enter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n ...enter,\n }),\n exit: ({ delay, duration, exit, transition, transitionEnd } = {}) => ({\n opacity: 0,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n transitionEnd: transitionEnd?.exit,\n ...exit,\n }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeProps\n extends WithTransitionProps<HTMLMotionProps>, ThemeProps<FadeStyle> {}\n\nconst {\n PropsContext: FadePropsContext,\n usePropsContext: useFadePropsContext,\n withContext,\n} = createComponent<FadeProps, FadeStyle>(\"fade\", fadeStyle)\n\nexport { FadePropsContext, useFadePropsContext }\n\n/**\n * `Fade` is a component that gradually shows or hides an element.\n *\n * @see https://yamada-ui.com/docs/components/fade\n */\nexport const Fade = withContext<\"div\", FadeProps>(\n ({\n delay,\n duration,\n open: openProp,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n }) => {\n const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n const open = unmountOnExit ? openProp && unmountOnExit : true\n\n const custom = useMemo(\n () => ({\n delay,\n duration,\n transition,\n transitionEnd,\n }),\n [delay, duration, transition, transitionEnd],\n )\n\n return (\n <AnimatePresence custom={custom}>\n {open ? (\n <motion.div\n animate={animate}\n custom={custom}\n exit=\"exit\"\n initial=\"exit\"\n variants={fadeVariants}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,eAAyB;CACpC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,CAAC,OAAO;EACtE,SAAS;EACT,YAAYA,mBAAAA,iBAAiB,MAAM,YAAY,KAAK,CAAC,CAAC,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EAAE,OAAO,UAAU,MAAM,YAAY,kBAAkB,CAAC,OAAO;EACpE,SAAS;EACT,YAAYA,mBAAAA,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,eAAe,eAAe;EAC9B,GAAG;CACL;AACF;AAKA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,gBACEC,yBAAAA,gBAAsC,QAAQC,mBAAAA,SAAS;;;;;;AAS3D,MAAa,OAAO,aACjB,EACC,OACA,UACA,MAAM,UACN,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,UAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAY;CAAa,CAC7C;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD;EAAyB;EACtB,UAAA,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fade-scale.cjs","names":["createTransition","createComponent","fadeScaleStyle","AnimatePresence","motion"],"sources":["../../../../src/components/fade-scale/fade-scale.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n HTMLMotionProps,\n MotionTransitionVariants,\n WithTransitionProps,\n} from \"../motion\"\nimport type { FadeScaleStyle } from \"./fade-scale.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeScaleStyle } from \"./fade-scale.style\"\n\nexport const fadeScaleVariants: Variants = {\n enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n opacity: 1,\n scale: 1,\n transition: createTransition.enter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n ...enter,\n }),\n exit: ({\n delay,\n duration,\n exit,\n reverse,\n scale,\n transition,\n transitionEnd,\n } = {}) => ({\n opacity: 0,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n ...(reverse\n ? { scale, transitionEnd: transitionEnd?.exit }\n : { transitionEnd: { scale, ...transitionEnd?.exit } }),\n ...exit,\n }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeScaleProps\n extends WithTransitionProps<HTMLMotionProps>, ThemeProps<FadeScaleStyle> {\n /**\n * If `true`, the element will transition back to exit state.\n *\n * @default true\n */\n reverse?: boolean\n /**\n * The initial scale of the element.\n *\n * @default 0.95\n */\n scale?: number\n}\n\nconst {\n PropsContext: FadeScalePropsContext,\n usePropsContext: useFadeScalePropsContext,\n withContext,\n} = createComponent<FadeScaleProps, FadeScaleStyle>(\n \"fade-scale\",\n fadeScaleStyle,\n)\n\nexport { FadeScalePropsContext, useFadeScalePropsContext }\n\n/**\n * `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.\n *\n * @see https://yamada-ui.com/docs/components/fade-scale\n */\nexport const FadeScale = withContext<\"div\", FadeScaleProps>(\n ({\n delay,\n duration,\n open: openProp,\n reverse = true,\n scale = 0.95,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n }) => {\n const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n const open = unmountOnExit ? openProp && unmountOnExit : true\n\n const custom = useMemo(\n () => ({\n delay,\n duration,\n reverse,\n scale,\n transition,\n transitionEnd,\n }),\n [delay, duration, reverse, scale, transition, transitionEnd],\n )\n\n return (\n <AnimatePresence custom={custom}>\n {open ? (\n <motion.div\n animate={animate}\n custom={custom}\n exit=\"exit\"\n initial=\"exit\"\n variants={fadeScaleVariants}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,oBAA8B;CACzC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,CAAC,OAAO;EACtE,SAAS;EACT,OAAO;EACP,YAAYA,mBAAAA,iBAAiB,MAAM,YAAY,KAAK,CAAC,CAAC,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EACL,OACA,UACA,MACA,SACA,OACA,YACA,kBACE,CAAC,OAAO;EACV,SAAS;EACT,YAAYA,mBAAAA,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,GAAI,UACA;GAAE;GAAO,eAAe,eAAe;EAAK,IAC5C,EAAE,eAAe;GAAE;GAAO,GAAG,eAAe;EAAK,EAAE;EACvD,GAAG;CACL;AACF;AAkBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACEC,yBAAAA,gBACF,cACAC,yBAAAA,cACF;;;;;;AASA,MAAa,YAAY,aACtB,EACC,OACA,UACA,MAAM,UACN,UAAU,MACV,QAAQ,KACR,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,UAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAS;EAAO;EAAY;CAAa,CAC7D;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD;EAAyB;
|
|
1
|
+
{"version":3,"file":"fade-scale.cjs","names":["createTransition","createComponent","fadeScaleStyle","AnimatePresence","motion"],"sources":["../../../../src/components/fade-scale/fade-scale.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ThemeProps } from \"../../core\"\nimport type {\n HTMLMotionProps,\n MotionTransitionVariants,\n WithTransitionProps,\n} from \"../motion\"\nimport type { FadeScaleStyle } from \"./fade-scale.style\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createComponent } from \"../../core\"\nimport { createTransition, motion } from \"../motion\"\nimport { fadeScaleStyle } from \"./fade-scale.style\"\n\nexport const fadeScaleVariants: Variants = {\n enter: ({ delay, duration, enter, transition, transitionEnd } = {}) => ({\n opacity: 1,\n scale: 1,\n transition: createTransition.enter(transition?.enter)(delay, duration),\n transitionEnd: transitionEnd?.enter,\n ...enter,\n }),\n exit: ({\n delay,\n duration,\n exit,\n reverse,\n scale,\n transition,\n transitionEnd,\n } = {}) => ({\n opacity: 0,\n transition: createTransition.exit(transition?.exit)(delay, duration),\n ...(reverse\n ? { scale, transitionEnd: transitionEnd?.exit }\n : { transitionEnd: { scale, ...transitionEnd?.exit } }),\n ...exit,\n }),\n} satisfies MotionTransitionVariants\n\nexport interface FadeScaleProps\n extends WithTransitionProps<HTMLMotionProps>, ThemeProps<FadeScaleStyle> {\n /**\n * If `true`, the element will transition back to exit state.\n *\n * @default true\n */\n reverse?: boolean\n /**\n * The initial scale of the element.\n *\n * @default 0.95\n */\n scale?: number\n}\n\nconst {\n PropsContext: FadeScalePropsContext,\n usePropsContext: useFadeScalePropsContext,\n withContext,\n} = createComponent<FadeScaleProps, FadeScaleStyle>(\n \"fade-scale\",\n fadeScaleStyle,\n)\n\nexport { FadeScalePropsContext, useFadeScalePropsContext }\n\n/**\n * `FadeScale` is a component that gradually scales up to reveal or scales down to hide an element.\n *\n * @see https://yamada-ui.com/docs/components/fade-scale\n */\nexport const FadeScale = withContext<\"div\", FadeScaleProps>(\n ({\n delay,\n duration,\n open: openProp,\n reverse = true,\n scale = 0.95,\n transition,\n transitionEnd,\n unmountOnExit,\n ...rest\n }) => {\n const animate = openProp || unmountOnExit ? \"enter\" : \"exit\"\n const open = unmountOnExit ? openProp && unmountOnExit : true\n\n const custom = useMemo(\n () => ({\n delay,\n duration,\n reverse,\n scale,\n transition,\n transitionEnd,\n }),\n [delay, duration, reverse, scale, transition, transitionEnd],\n )\n\n return (\n <AnimatePresence custom={custom}>\n {open ? (\n <motion.div\n animate={animate}\n custom={custom}\n exit=\"exit\"\n initial=\"exit\"\n variants={fadeScaleVariants}\n {...rest}\n />\n ) : null}\n </AnimatePresence>\n )\n },\n)()\n"],"mappings":";;;;;;;;;AAgBA,MAAa,oBAA8B;CACzC,QAAQ,EAAE,OAAO,UAAU,OAAO,YAAY,kBAAkB,CAAC,OAAO;EACtE,SAAS;EACT,OAAO;EACP,YAAYA,mBAAAA,iBAAiB,MAAM,YAAY,KAAK,CAAC,CAAC,OAAO,QAAQ;EACrE,eAAe,eAAe;EAC9B,GAAG;CACL;CACA,OAAO,EACL,OACA,UACA,MACA,SACA,OACA,YACA,kBACE,CAAC,OAAO;EACV,SAAS;EACT,YAAYA,mBAAAA,iBAAiB,KAAK,YAAY,IAAI,CAAC,CAAC,OAAO,QAAQ;EACnE,GAAI,UACA;GAAE;GAAO,eAAe,eAAe;EAAK,IAC5C,EAAE,eAAe;GAAE;GAAO,GAAG,eAAe;EAAK,EAAE;EACvD,GAAG;CACL;AACF;AAkBA,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,gBACEC,yBAAAA,gBACF,cACAC,yBAAAA,cACF;;;;;;AASA,MAAa,YAAY,aACtB,EACC,OACA,UACA,MAAM,UACN,UAAU,MACV,QAAQ,KACR,YACA,eACA,eACA,GAAG,WACC;CACJ,MAAM,UAAU,YAAY,gBAAgB,UAAU;CACtD,MAAM,OAAO,gBAAgB,YAAY,gBAAgB;CAEzD,MAAM,UAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAO;EAAU;EAAS;EAAO;EAAY;CAAa,CAC7D;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,iBAAD;EAAyB;EACtB,UAAA,OACC,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,KAAR;GACW;GACD;GACR,MAAK;GACL,SAAQ;GACR,UAAU;GACV,GAAI;EACL,CAAA,IACC;CACW,CAAA;AAErB,CACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.cjs","names":["createContext","createSlotComponent","fieldStyle","useFormContext","useFieldsetContext","useSplitChildren","styled"],"sources":["../../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldStyle } from \"./field.style\"\nimport { isValidElement, useId, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n createContext,\n dataAttr,\n isObject,\n useSplitChildren,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFormContext } from \"../form\"\nimport { fieldStyle } from \"./field.style\"\n\nexport interface FieldContext\n extends FieldProps, Pick<FieldRootProps, \"replace\"> {\n errorMessageId: string\n focused: boolean\n helperMessageId: string\n id: string\n labelId: string\n onBlur: () => void\n onFocus: () => void\n}\n\nconst [FieldContext, useFieldContext] = createContext<FieldContext>({\n name: \"FieldContext\",\n strict: false,\n})\n\nexport { FieldContext, useFieldContext }\n\nexport interface FieldProps {\n /**\n * If `true`, the field will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, the field will be invalid.\n *\n * @default false\n */\n invalid?: boolean\n /**\n * If `true`, the field will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * If `true`, the field will be required.\n *\n * @default false\n */\n required?: boolean\n}\n\nexport interface FieldRootProps\n extends\n HTMLStyledProps,\n ThemeProps<FieldStyle>,\n Pick<FieldLabelProps, \"optionalIndicator\" | \"requiredIndicator\">,\n FieldProps {\n /**\n * The field error message to use.\n */\n errorMessage?: ReactNode\n /**\n * The field helper message to use.\n */\n helperMessage?: ReactNode\n /**\n * The field label to use.\n */\n label?: ReactNode\n /**\n * The name of the field.\n */\n name?: string\n /**\n * If `true`, switch between helper message and error message using invalid.\n *\n * @default true\n */\n replace?: boolean\n /**\n * Props the error message component.\n */\n errorMessageProps?: FieldErrorMessageProps\n /**\n * Props the helper message component.\n */\n helperMessageProps?: FieldHelperMessageProps\n /**\n * Props the label component.\n */\n labelProps?: FieldLabelProps\n}\n\nconst {\n PropsContext: FieldPropsContext,\n usePropsContext: useFieldPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FieldRootProps, FieldStyle>(\"field\", fieldStyle)\n\nexport { FieldPropsContext, useFieldPropsContext }\n\n/**\n * `Field` is a component used to group form elements with label, helper message, error message, etc.\n *\n * @see https://yamada-ui.com/docs/components/field\n */\nexport const FieldRoot = withProvider<\"div\", FieldRootProps>(\n ({\n id,\n name,\n children,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n label,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n errorMessageProps,\n helperMessageProps,\n labelProps,\n ...rest\n }) => {\n const uuid = useId()\n const labelId = useId()\n const helperMessageId = useId()\n const errorMessageId = useId()\n const formContext = useFormContext()\n const fieldsetContext = useFieldsetContext()\n const [focused, setFocused] = useState<boolean>(false)\n const [\n omittedChildren,\n customLabel,\n customHelperMessage,\n customErrorMessage,\n ] = useSplitChildren(\n children,\n FieldLabel,\n FieldHelperMessage,\n FieldErrorMessage,\n )\n\n id ??= uuid\n optionalIndicator ??= formContext?.optionalIndicator\n requiredIndicator ??= formContext?.requiredIndicator\n\n disabled ??= fieldsetContext?.disabled\n invalid ??= fieldsetContext?.invalid\n readOnly ??= fieldsetContext?.readOnly\n required ??= fieldsetContext?.required\n\n if (name) {\n disabled ??= isObject(formContext?.disabled)\n ? formContext.disabled[name]\n : formContext?.disabled\n invalid ??= isObject(formContext?.invalid)\n ? formContext.invalid[name]\n : formContext?.invalid\n readOnly ??= isObject(formContext?.readOnly)\n ? formContext.readOnly[name]\n : formContext?.readOnly\n required ??= isObject(formContext?.required)\n ? formContext.required[name]\n : formContext?.required\n replace ??= isObject(formContext?.replace)\n ? (formContext.replace[name] ?? true)\n : (formContext?.replace ?? true)\n errorMessage ??= formContext?.errorMessage?.[name]\n helperMessage ??= formContext?.helperMessage?.[name]\n }\n\n const context = useMemo(\n () => ({\n id,\n disabled,\n errorMessageId,\n focused,\n helperMessageId,\n invalid,\n labelId,\n readOnly,\n replace,\n required,\n onBlur: () => setFocused(false),\n onFocus: () => setFocused(true),\n }),\n [\n id,\n disabled,\n labelId,\n focused,\n invalid,\n helperMessageId,\n errorMessageId,\n readOnly,\n replace,\n required,\n ],\n )\n\n return (\n <FieldContext value={context}>\n <styled.div\n data-disabled={dataAttr(disabled)}\n data-focus={dataAttr(focused)}\n data-invalid={dataAttr(invalid)}\n data-readonly={dataAttr(readOnly)}\n role=\"group\"\n {...rest}\n >\n {customLabel ||\n (label ? (\n <FieldLabel\n optionalIndicator={optionalIndicator}\n requiredIndicator={requiredIndicator}\n {...labelProps}\n >\n {label}\n </FieldLabel>\n ) : null)}\n\n {omittedChildren}\n\n {customHelperMessage ||\n (helperMessage ? (\n <FieldHelperMessage {...helperMessageProps}>\n {helperMessage}\n </FieldHelperMessage>\n ) : null)}\n\n {customErrorMessage ||\n (errorMessage ? (\n <FieldErrorMessage {...errorMessageProps}>\n {errorMessage}\n </FieldErrorMessage>\n ) : null)}\n </styled.div>\n </FieldContext>\n )\n },\n \"root\",\n)()\n\nexport interface FieldLabelProps extends HTMLStyledProps<\"label\"> {\n /**\n * The optional indicator to use.\n */\n optionalIndicator?: ReactNode\n /**\n * If `true`, the field will be required.\n *\n * @default false\n */\n required?: boolean\n /**\n * The required indicator to use.\n */\n requiredIndicator?: ReactNode\n}\n\nexport const FieldLabel = withContext<\"label\", FieldLabelProps>(\n ({\n id,\n htmlFor,\n children,\n optionalIndicator = null,\n required,\n requiredIndicator = null,\n ...rest\n }) => {\n const fieldContext = useFieldContext()\n\n id ??= fieldContext?.labelId\n htmlFor ??= fieldContext?.id\n required ??= fieldContext?.required\n\n return (\n <styled.label\n id={id}\n htmlFor={htmlFor}\n data-disabled={dataAttr(fieldContext?.disabled)}\n data-focus={dataAttr(fieldContext?.focused)}\n data-invalid={dataAttr(fieldContext?.invalid)}\n data-readonly={dataAttr(fieldContext?.readOnly)}\n {...rest}\n >\n {children}\n\n {required ? (\n requiredIndicator ? (\n <FieldRequiredIndicator>{requiredIndicator}</FieldRequiredIndicator>\n ) : (\n <FieldRequiredIndicator />\n )\n ) : (\n optionalIndicator\n )}\n </styled.label>\n )\n },\n \"label\",\n)()\n\ninterface FieldRequiredIndicatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst FieldRequiredIndicator = withContext<\"span\", FieldRequiredIndicatorProps>(\n ({ children, ...rest }) => {\n if (!isValidElement(children))\n return (\n <styled.span aria-hidden role=\"presentation\" {...rest}>\n {children ?? <>*</>}\n </styled.span>\n )\n else return children\n },\n \"requiredIndicator\",\n)()\n\nexport interface FieldHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldHelperMessage = withContext<\"span\", FieldHelperMessageProps>(\n (props) => {\n const { helperMessageId, invalid, replace } = useFieldContext() ?? {}\n\n return (\n <styled.span\n id={helperMessageId}\n hidden={replace && invalid ? true : false}\n {...props}\n />\n )\n },\n \"helperMessage\",\n)()\n\nexport interface FieldErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldErrorMessage = withContext<\"span\", FieldErrorMessageProps>(\n (props) => {\n const { errorMessageId, invalid } = useFieldContext() ?? {}\n\n return (\n <styled.span\n id={errorMessageId}\n aria-live={invalid ? \"polite\" : undefined}\n hidden={!invalid}\n {...props}\n />\n )\n },\n \"errorMessage\",\n)()\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"field.cjs","names":["createContext","createSlotComponent","fieldStyle","useFormContext","useFieldsetContext","useSplitChildren","styled"],"sources":["../../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldStyle } from \"./field.style\"\nimport { isValidElement, useId, useMemo, useState } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n createContext,\n dataAttr,\n isObject,\n useSplitChildren,\n} from \"../../utils\"\nimport { useFieldsetContext } from \"../fieldset\"\nimport { useFormContext } from \"../form\"\nimport { fieldStyle } from \"./field.style\"\n\nexport interface FieldContext\n extends FieldProps, Pick<FieldRootProps, \"replace\"> {\n errorMessageId: string\n focused: boolean\n helperMessageId: string\n id: string\n labelId: string\n onBlur: () => void\n onFocus: () => void\n}\n\nconst [FieldContext, useFieldContext] = createContext<FieldContext>({\n name: \"FieldContext\",\n strict: false,\n})\n\nexport { FieldContext, useFieldContext }\n\nexport interface FieldProps {\n /**\n * If `true`, the field will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * If `true`, the field will be invalid.\n *\n * @default false\n */\n invalid?: boolean\n /**\n * If `true`, the field will be readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * If `true`, the field will be required.\n *\n * @default false\n */\n required?: boolean\n}\n\nexport interface FieldRootProps\n extends\n HTMLStyledProps,\n ThemeProps<FieldStyle>,\n Pick<FieldLabelProps, \"optionalIndicator\" | \"requiredIndicator\">,\n FieldProps {\n /**\n * The field error message to use.\n */\n errorMessage?: ReactNode\n /**\n * The field helper message to use.\n */\n helperMessage?: ReactNode\n /**\n * The field label to use.\n */\n label?: ReactNode\n /**\n * The name of the field.\n */\n name?: string\n /**\n * If `true`, switch between helper message and error message using invalid.\n *\n * @default true\n */\n replace?: boolean\n /**\n * Props the error message component.\n */\n errorMessageProps?: FieldErrorMessageProps\n /**\n * Props the helper message component.\n */\n helperMessageProps?: FieldHelperMessageProps\n /**\n * Props the label component.\n */\n labelProps?: FieldLabelProps\n}\n\nconst {\n PropsContext: FieldPropsContext,\n usePropsContext: useFieldPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FieldRootProps, FieldStyle>(\"field\", fieldStyle)\n\nexport { FieldPropsContext, useFieldPropsContext }\n\n/**\n * `Field` is a component used to group form elements with label, helper message, error message, etc.\n *\n * @see https://yamada-ui.com/docs/components/field\n */\nexport const FieldRoot = withProvider<\"div\", FieldRootProps>(\n ({\n id,\n name,\n children,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n label,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n errorMessageProps,\n helperMessageProps,\n labelProps,\n ...rest\n }) => {\n const uuid = useId()\n const labelId = useId()\n const helperMessageId = useId()\n const errorMessageId = useId()\n const formContext = useFormContext()\n const fieldsetContext = useFieldsetContext()\n const [focused, setFocused] = useState<boolean>(false)\n const [\n omittedChildren,\n customLabel,\n customHelperMessage,\n customErrorMessage,\n ] = useSplitChildren(\n children,\n FieldLabel,\n FieldHelperMessage,\n FieldErrorMessage,\n )\n\n id ??= uuid\n optionalIndicator ??= formContext?.optionalIndicator\n requiredIndicator ??= formContext?.requiredIndicator\n\n disabled ??= fieldsetContext?.disabled\n invalid ??= fieldsetContext?.invalid\n readOnly ??= fieldsetContext?.readOnly\n required ??= fieldsetContext?.required\n\n if (name) {\n disabled ??= isObject(formContext?.disabled)\n ? formContext.disabled[name]\n : formContext?.disabled\n invalid ??= isObject(formContext?.invalid)\n ? formContext.invalid[name]\n : formContext?.invalid\n readOnly ??= isObject(formContext?.readOnly)\n ? formContext.readOnly[name]\n : formContext?.readOnly\n required ??= isObject(formContext?.required)\n ? formContext.required[name]\n : formContext?.required\n replace ??= isObject(formContext?.replace)\n ? (formContext.replace[name] ?? true)\n : (formContext?.replace ?? true)\n errorMessage ??= formContext?.errorMessage?.[name]\n helperMessage ??= formContext?.helperMessage?.[name]\n }\n\n const context = useMemo(\n () => ({\n id,\n disabled,\n errorMessageId,\n focused,\n helperMessageId,\n invalid,\n labelId,\n readOnly,\n replace,\n required,\n onBlur: () => setFocused(false),\n onFocus: () => setFocused(true),\n }),\n [\n id,\n disabled,\n labelId,\n focused,\n invalid,\n helperMessageId,\n errorMessageId,\n readOnly,\n replace,\n required,\n ],\n )\n\n return (\n <FieldContext value={context}>\n <styled.div\n data-disabled={dataAttr(disabled)}\n data-focus={dataAttr(focused)}\n data-invalid={dataAttr(invalid)}\n data-readonly={dataAttr(readOnly)}\n role=\"group\"\n {...rest}\n >\n {customLabel ||\n (label ? (\n <FieldLabel\n optionalIndicator={optionalIndicator}\n requiredIndicator={requiredIndicator}\n {...labelProps}\n >\n {label}\n </FieldLabel>\n ) : null)}\n\n {omittedChildren}\n\n {customHelperMessage ||\n (helperMessage ? (\n <FieldHelperMessage {...helperMessageProps}>\n {helperMessage}\n </FieldHelperMessage>\n ) : null)}\n\n {customErrorMessage ||\n (errorMessage ? (\n <FieldErrorMessage {...errorMessageProps}>\n {errorMessage}\n </FieldErrorMessage>\n ) : null)}\n </styled.div>\n </FieldContext>\n )\n },\n \"root\",\n)()\n\nexport interface FieldLabelProps extends HTMLStyledProps<\"label\"> {\n /**\n * The optional indicator to use.\n */\n optionalIndicator?: ReactNode\n /**\n * If `true`, the field will be required.\n *\n * @default false\n */\n required?: boolean\n /**\n * The required indicator to use.\n */\n requiredIndicator?: ReactNode\n}\n\nexport const FieldLabel = withContext<\"label\", FieldLabelProps>(\n ({\n id,\n htmlFor,\n children,\n optionalIndicator = null,\n required,\n requiredIndicator = null,\n ...rest\n }) => {\n const fieldContext = useFieldContext()\n\n id ??= fieldContext?.labelId\n htmlFor ??= fieldContext?.id\n required ??= fieldContext?.required\n\n return (\n <styled.label\n id={id}\n htmlFor={htmlFor}\n data-disabled={dataAttr(fieldContext?.disabled)}\n data-focus={dataAttr(fieldContext?.focused)}\n data-invalid={dataAttr(fieldContext?.invalid)}\n data-readonly={dataAttr(fieldContext?.readOnly)}\n {...rest}\n >\n {children}\n\n {required ? (\n requiredIndicator ? (\n <FieldRequiredIndicator>{requiredIndicator}</FieldRequiredIndicator>\n ) : (\n <FieldRequiredIndicator />\n )\n ) : (\n optionalIndicator\n )}\n </styled.label>\n )\n },\n \"label\",\n)()\n\ninterface FieldRequiredIndicatorProps extends HTMLStyledProps<\"span\"> {}\n\nconst FieldRequiredIndicator = withContext<\"span\", FieldRequiredIndicatorProps>(\n ({ children, ...rest }) => {\n if (!isValidElement(children))\n return (\n <styled.span aria-hidden role=\"presentation\" {...rest}>\n {children ?? <>*</>}\n </styled.span>\n )\n else return children\n },\n \"requiredIndicator\",\n)()\n\nexport interface FieldHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldHelperMessage = withContext<\"span\", FieldHelperMessageProps>(\n (props) => {\n const { helperMessageId, invalid, replace } = useFieldContext() ?? {}\n\n return (\n <styled.span\n id={helperMessageId}\n hidden={replace && invalid ? true : false}\n {...props}\n />\n )\n },\n \"helperMessage\",\n)()\n\nexport interface FieldErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldErrorMessage = withContext<\"span\", FieldErrorMessageProps>(\n (props) => {\n const { errorMessageId, invalid } = useFieldContext() ?? {}\n\n return (\n <styled.span\n id={errorMessageId}\n aria-live={invalid ? \"polite\" : undefined}\n hidden={!invalid}\n {...props}\n />\n )\n },\n \"errorMessage\",\n)()\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fieldset.cjs","names":["createContext","createSlotComponent","fieldsetStyle","useSplitChildren","styled","useFormContext"],"sources":["../../../../src/components/fieldset/fieldset.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { FieldsetStyle } from \"./fieldset.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, dataAttr, useSplitChildren } from \"../../utils\"\nimport { useFormContext } from \"../form\"\nimport { fieldsetStyle } from \"./fieldset.style\"\n\ninterface FieldsetContext extends Pick<\n FieldsetRootProps,\n \"disabled\" | \"invalid\" | \"readOnly\" | \"required\"\n> {\n id?: string\n}\n\nconst [FieldsetContext, useFieldsetContext] = createContext<FieldsetContext>({\n name: \"FieldsetContext\",\n strict: false,\n})\n\nexport { FieldsetContext, useFieldsetContext }\n\nexport interface FieldsetRootProps\n extends HTMLStyledProps<\"fieldset\">, ThemeProps<FieldsetStyle>, FieldProps {\n /**\n * The fieldset error message to use.\n */\n errorMessage?: ReactNode\n /**\n * The fieldset helper message to use.\n */\n helperMessage?: ReactNode\n /**\n * The fieldset legend to use.\n */\n legend?: ReactNode\n /**\n * Props the content component.\n */\n contentProps?: FieldsetContentProps\n /**\n * Props the error message component.\n */\n errorMessageProps?: FieldsetErrorMessageProps\n /**\n * Props the header component.\n */\n headerProps?: FieldsetHeaderProps\n /**\n * Props the helper message component.\n */\n helperMessageProps?: FieldsetHelperMessageProps\n /**\n * Props the legend component.\n */\n legendProps?: FieldsetLegendProps\n}\n\nconst {\n PropsContext: FieldsetPropsContext,\n usePropsContext: useFieldsetPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FieldsetRootProps, FieldsetStyle, FieldsetContext>(\n \"fieldset\",\n fieldsetStyle,\n)\n\nexport { FieldsetPropsContext, useFieldsetPropsContext }\n\n/**\n * `Fieldset` is a component used to group multiple controls.\n *\n * @see https://yamada-ui.com/docs/components/fieldset\n */\nexport const FieldsetRoot = withProvider<\"fieldset\", FieldsetRootProps>(\n ({\n id,\n \"aria-labelledby\": ariaLabelledBy,\n children,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n legend,\n readOnly,\n required,\n contentProps,\n errorMessageProps,\n headerProps,\n helperMessageProps,\n legendProps,\n ...rest\n }) => {\n const uuid = useId()\n const [\n omittedChildren,\n customLegend,\n customHeader,\n customContent,\n customHelperMessage,\n customErrorMessage,\n ] = useSplitChildren(\n children,\n FieldsetLegend,\n FieldsetHeader,\n FieldsetContent,\n FieldsetHelperMessage,\n FieldsetErrorMessage,\n )\n\n id ??= uuid\n\n const context = useMemo(\n () => ({\n id,\n disabled,\n invalid,\n readOnly,\n required,\n }),\n [id, disabled, invalid, readOnly, required],\n )\n\n return (\n <FieldsetContext value={context}>\n <styled.fieldset aria-labelledby={cx(id, ariaLabelledBy)} {...rest}>\n {customHeader || (\n <FieldsetHeader {...headerProps}>\n {customLegend ||\n (legend ? (\n <FieldsetLegend {...legendProps}>{legend}</FieldsetLegend>\n ) : null)}\n\n {customHelperMessage ||\n (helperMessage ? (\n <FieldsetHelperMessage {...helperMessageProps}>\n {helperMessage}\n </FieldsetHelperMessage>\n ) : null)}\n </FieldsetHeader>\n )}\n\n {customContent || (\n <FieldsetContent {...contentProps}>\n {omittedChildren}\n </FieldsetContent>\n )}\n\n {customErrorMessage ||\n (errorMessage ? (\n <FieldsetErrorMessage {...errorMessageProps}>\n {errorMessage}\n </FieldsetErrorMessage>\n ) : null)}\n </styled.fieldset>\n </FieldsetContext>\n )\n },\n \"root\",\n)((props) => {\n const { size, variant } = useFormContext() ?? {}\n\n return { size, variant, ...props }\n})\n\nexport interface FieldsetLegendProps extends HTMLStyledProps<\"legend\"> {}\n\nexport const FieldsetLegend = withContext<\"legend\", FieldsetLegendProps>(\n \"legend\",\n \"legend\",\n)(undefined, (props) => {\n const { id, disabled, invalid } = useFieldsetContext() ?? {}\n\n return {\n id,\n \"data-disabled\": dataAttr(disabled),\n \"data-invalid\": dataAttr(invalid),\n ...props,\n }\n})\n\nexport interface FieldsetHeaderProps extends HTMLStyledProps {}\n\nexport const FieldsetHeader = withContext<\"div\", FieldsetHeaderProps>(\n \"div\",\n \"header\",\n)()\n\nexport interface FieldsetContentProps extends HTMLStyledProps {}\n\nexport const FieldsetContent = withContext<\"div\", FieldsetContentProps>(\n \"div\",\n \"content\",\n)()\n\nexport interface FieldsetHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetHelperMessage = withContext<\n \"span\",\n FieldsetHelperMessageProps\n>(\"span\", \"helperMessage\")(undefined, (props) => {\n const { id } = useFieldsetContext() ?? {}\n\n return { \"aria-describedby\": id, ...props }\n})\n\nexport interface FieldsetErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetErrorMessage = withContext<\n \"span\",\n FieldsetErrorMessageProps\n>((props) => {\n const { invalid } = useFieldsetContext() ?? {}\n\n return (\n <styled.span\n aria-live={invalid ? \"polite\" : undefined}\n hidden={!invalid}\n {...props}\n />\n )\n}, \"errorMessage\")()\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,CAAC,iBAAiB,sBAAsBA,gBAAAA,cAA+B;CAC3E,MAAM;CACN,QAAQ;AACV,CAAC;AAwCD,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACEC,yBAAAA,oBACF,YACAC,uBAAAA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EACC,IACA,mBAAmB,gBACnB,UACA,UACA,cACA,eACA,SACA,QACA,UACA,UACA,cACA,mBACA,aACA,oBACA,aACA,GAAG,WACC;CACJ,MAAM,QAAA,GAAA,MAAA,MAAA,CAAa;CACnB,MAAM,CACJ,iBACA,cACA,cACA,eACA,qBACA,sBACEC,iBAAAA,iBACF,UACA,gBACA,gBACA,iBACA,uBACA,oBACF;CAEA,OAAO;CAEP,MAAM,WAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAI;EAAU;EAAS;EAAU;CAAQ,CAC5C;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;EAAiB,OAAO;
|
|
1
|
+
{"version":3,"file":"fieldset.cjs","names":["createContext","createSlotComponent","fieldsetStyle","useSplitChildren","styled","useFormContext"],"sources":["../../../../src/components/fieldset/fieldset.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { FieldsetStyle } from \"./fieldset.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, dataAttr, useSplitChildren } from \"../../utils\"\nimport { useFormContext } from \"../form\"\nimport { fieldsetStyle } from \"./fieldset.style\"\n\ninterface FieldsetContext extends Pick<\n FieldsetRootProps,\n \"disabled\" | \"invalid\" | \"readOnly\" | \"required\"\n> {\n id?: string\n}\n\nconst [FieldsetContext, useFieldsetContext] = createContext<FieldsetContext>({\n name: \"FieldsetContext\",\n strict: false,\n})\n\nexport { FieldsetContext, useFieldsetContext }\n\nexport interface FieldsetRootProps\n extends HTMLStyledProps<\"fieldset\">, ThemeProps<FieldsetStyle>, FieldProps {\n /**\n * The fieldset error message to use.\n */\n errorMessage?: ReactNode\n /**\n * The fieldset helper message to use.\n */\n helperMessage?: ReactNode\n /**\n * The fieldset legend to use.\n */\n legend?: ReactNode\n /**\n * Props the content component.\n */\n contentProps?: FieldsetContentProps\n /**\n * Props the error message component.\n */\n errorMessageProps?: FieldsetErrorMessageProps\n /**\n * Props the header component.\n */\n headerProps?: FieldsetHeaderProps\n /**\n * Props the helper message component.\n */\n helperMessageProps?: FieldsetHelperMessageProps\n /**\n * Props the legend component.\n */\n legendProps?: FieldsetLegendProps\n}\n\nconst {\n PropsContext: FieldsetPropsContext,\n usePropsContext: useFieldsetPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FieldsetRootProps, FieldsetStyle, FieldsetContext>(\n \"fieldset\",\n fieldsetStyle,\n)\n\nexport { FieldsetPropsContext, useFieldsetPropsContext }\n\n/**\n * `Fieldset` is a component used to group multiple controls.\n *\n * @see https://yamada-ui.com/docs/components/fieldset\n */\nexport const FieldsetRoot = withProvider<\"fieldset\", FieldsetRootProps>(\n ({\n id,\n \"aria-labelledby\": ariaLabelledBy,\n children,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n legend,\n readOnly,\n required,\n contentProps,\n errorMessageProps,\n headerProps,\n helperMessageProps,\n legendProps,\n ...rest\n }) => {\n const uuid = useId()\n const [\n omittedChildren,\n customLegend,\n customHeader,\n customContent,\n customHelperMessage,\n customErrorMessage,\n ] = useSplitChildren(\n children,\n FieldsetLegend,\n FieldsetHeader,\n FieldsetContent,\n FieldsetHelperMessage,\n FieldsetErrorMessage,\n )\n\n id ??= uuid\n\n const context = useMemo(\n () => ({\n id,\n disabled,\n invalid,\n readOnly,\n required,\n }),\n [id, disabled, invalid, readOnly, required],\n )\n\n return (\n <FieldsetContext value={context}>\n <styled.fieldset aria-labelledby={cx(id, ariaLabelledBy)} {...rest}>\n {customHeader || (\n <FieldsetHeader {...headerProps}>\n {customLegend ||\n (legend ? (\n <FieldsetLegend {...legendProps}>{legend}</FieldsetLegend>\n ) : null)}\n\n {customHelperMessage ||\n (helperMessage ? (\n <FieldsetHelperMessage {...helperMessageProps}>\n {helperMessage}\n </FieldsetHelperMessage>\n ) : null)}\n </FieldsetHeader>\n )}\n\n {customContent || (\n <FieldsetContent {...contentProps}>\n {omittedChildren}\n </FieldsetContent>\n )}\n\n {customErrorMessage ||\n (errorMessage ? (\n <FieldsetErrorMessage {...errorMessageProps}>\n {errorMessage}\n </FieldsetErrorMessage>\n ) : null)}\n </styled.fieldset>\n </FieldsetContext>\n )\n },\n \"root\",\n)((props) => {\n const { size, variant } = useFormContext() ?? {}\n\n return { size, variant, ...props }\n})\n\nexport interface FieldsetLegendProps extends HTMLStyledProps<\"legend\"> {}\n\nexport const FieldsetLegend = withContext<\"legend\", FieldsetLegendProps>(\n \"legend\",\n \"legend\",\n)(undefined, (props) => {\n const { id, disabled, invalid } = useFieldsetContext() ?? {}\n\n return {\n id,\n \"data-disabled\": dataAttr(disabled),\n \"data-invalid\": dataAttr(invalid),\n ...props,\n }\n})\n\nexport interface FieldsetHeaderProps extends HTMLStyledProps {}\n\nexport const FieldsetHeader = withContext<\"div\", FieldsetHeaderProps>(\n \"div\",\n \"header\",\n)()\n\nexport interface FieldsetContentProps extends HTMLStyledProps {}\n\nexport const FieldsetContent = withContext<\"div\", FieldsetContentProps>(\n \"div\",\n \"content\",\n)()\n\nexport interface FieldsetHelperMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetHelperMessage = withContext<\n \"span\",\n FieldsetHelperMessageProps\n>(\"span\", \"helperMessage\")(undefined, (props) => {\n const { id } = useFieldsetContext() ?? {}\n\n return { \"aria-describedby\": id, ...props }\n})\n\nexport interface FieldsetErrorMessageProps extends HTMLStyledProps<\"span\"> {}\n\nexport const FieldsetErrorMessage = withContext<\n \"span\",\n FieldsetErrorMessageProps\n>((props) => {\n const { invalid } = useFieldsetContext() ?? {}\n\n return (\n <styled.span\n aria-live={invalid ? \"polite\" : undefined}\n hidden={!invalid}\n {...props}\n />\n )\n}, \"errorMessage\")()\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,CAAC,iBAAiB,sBAAsBA,gBAAAA,cAA+B;CAC3E,MAAM;CACN,QAAQ;AACV,CAAC;AAwCD,MAAM,EACJ,cAAc,sBACd,iBAAiB,yBACjB,aACA,iBACEC,yBAAAA,oBACF,YACAC,uBAAAA,aACF;;;;;;AASA,MAAa,eAAe,cACzB,EACC,IACA,mBAAmB,gBACnB,UACA,UACA,cACA,eACA,SACA,QACA,UACA,UACA,cACA,mBACA,aACA,oBACA,aACA,GAAG,WACC;CACJ,MAAM,QAAA,GAAA,MAAA,MAAA,CAAa;CACnB,MAAM,CACJ,iBACA,cACA,cACA,eACA,qBACA,sBACEC,iBAAAA,iBACF,UACA,gBACA,gBACA,iBACA,uBACA,oBACF;CAEA,OAAO;CAEP,MAAM,WAAA,GAAA,MAAA,QAAA,QACG;EACL;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAI;EAAU;EAAS;EAAU;CAAQ,CAC5C;CAEA,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;EAAiB,OAAO;EACtB,UAAA,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,UAAR;GAAiB,oBAAA,GAAA,oBAAA,cAAA,GAAA,CAAoB,IAAI,cAAc;GAAG,GAAI;GAA9D,UAAA;IACG,gBACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,gBAAD;KAAgB,GAAI;KAApB,UAAA,CACG,iBACE,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,gBAAD;MAAgB,GAAI;MAAc,UAAA;KAAuB,CAAA,IACvD,OAEL,wBACE,gBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;MAAuB,GAAI;MACxB,UAAA;KACoB,CAAA,IACrB,KACQ;;IAGjB,iBACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,iBAAD;KAAiB,GAAI;KAClB,UAAA;IACc,CAAA;IAGlB,uBACE,eACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,sBAAD;KAAsB,GAAI;KACvB,UAAA;IACmB,CAAA,IACpB;GACS;;CACF,CAAA;AAErB,GACA,MACF,CAAC,EAAE,UAAU;CACX,MAAM,EAAE,MAAM,YAAYC,aAAAA,eAAe,KAAK,CAAC;CAE/C,OAAO;EAAE;EAAM;EAAS,GAAG;CAAM;AACnC,CAAC;AAID,MAAa,iBAAiB,YAC5B,UACA,QACF,CAAC,CAAC,KAAA,IAAY,UAAU;CACtB,MAAM,EAAE,IAAI,UAAU,YAAY,mBAAmB,KAAK,CAAC;CAE3D,OAAO;EACL;EACA,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAA0B,QAAQ;EAClC,iBAAA,GAAA,oBAAA,cAAA,SAAA,CAAyB,OAAO;EAChC,GAAG;CACL;AACF,CAAC;AAID,MAAa,iBAAiB,YAC5B,OACA,QACF,CAAC,CAAC;AAIF,MAAa,kBAAkB,YAC7B,OACA,SACF,CAAC,CAAC;AAIF,MAAa,wBAAwB,YAGnC,QAAQ,eAAe,CAAC,CAAC,KAAA,IAAY,UAAU;CAC/C,MAAM,EAAE,OAAO,mBAAmB,KAAK,CAAC;CAExC,OAAO;EAAE,oBAAoB;EAAI,GAAG;CAAM;AAC5C,CAAC;AAID,MAAa,uBAAuB,aAGjC,UAAU;CACX,MAAM,EAAE,YAAY,mBAAmB,KAAK,CAAC;CAE7C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,gBAAAA,OAAO,MAAR;EACE,aAAW,UAAU,WAAW,KAAA;EAChC,QAAQ,CAAC;EACT,GAAI;CACL,CAAA;AAEL,GAAG,cAAc,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-input.cjs","names":["createSlotComponent","fileInputStyle","useInputBorder","useFileInput","styled","Portal","mergeProps","useInputPropsContext"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n extends\n Omit<\n HTMLStyledProps<\"input\">,\n \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<FileInputStyle>,\n UseInputBorderProps,\n FieldProps,\n Omit<UseFileInputProps, \"children\"> {\n /**\n * The string to separate uploaded files.\n *\n * @default ','\n */\n separator?: string\n /**\n * A callback that returns a React node.\n */\n children?: (files: File[] | undefined) => ReactNode\n /**\n * The component that displays uploaded files.\n */\n component?: (props: { index: number; value: File }) => ReactNode\n /**\n * A callback that formats the name of the uploaded file.\n */\n format?: (value: File, index: number) => string\n}\n\nconst {\n PropsContext: FileInputPropsContext,\n usePropsContext: useFileInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n \"file-input\",\n fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n ({\n children,\n component,\n errorBorderColor,\n focusBorderColor,\n format = defaultFormat,\n placeholder,\n separator = \",\",\n ...props\n }) => {\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n const cloneChildren = useMemo(() => {\n if (!values?.length)\n return (\n <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n {placeholder}\n </styled.span>\n )\n\n if (children) return children(values)\n\n return values.map((value, index) => {\n const last = values.length === index + 1\n\n if (component) {\n const node = component({ index, value })\n\n if (isValidElement(node)) return cloneElement(node, { key: index })\n else return node\n } else {\n return (\n <FileInputTag key={index}>\n {format(value, index)}\n {!last ? separator : null}\n </FileInputTag>\n )\n }\n })\n }, [children, format, placeholder, separator, component, values])\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <styled.div {...varProps} {...getFieldProps()}>\n {cloneChildren}\n </styled.div>\n </>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,yBAAAA,oBACF,cACAC,yBAAAA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EAAE,QAAQ,eAAe,kBAAkBC,uBAAAA,aAAa,KAAK;CAEnE,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAClC,IAAI,CAAC,QAAQ,QACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;GAAa,UAAS;GAAS,YAAW;
|
|
1
|
+
{"version":3,"file":"file-input.cjs","names":["createSlotComponent","fileInputStyle","useInputBorder","useFileInput","styled","Portal","mergeProps","useInputPropsContext"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n extends\n Omit<\n HTMLStyledProps<\"input\">,\n \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n >,\n ThemeProps<FileInputStyle>,\n UseInputBorderProps,\n FieldProps,\n Omit<UseFileInputProps, \"children\"> {\n /**\n * The string to separate uploaded files.\n *\n * @default ','\n */\n separator?: string\n /**\n * A callback that returns a React node.\n */\n children?: (files: File[] | undefined) => ReactNode\n /**\n * The component that displays uploaded files.\n */\n component?: (props: { index: number; value: File }) => ReactNode\n /**\n * A callback that formats the name of the uploaded file.\n */\n format?: (value: File, index: number) => string\n}\n\nconst {\n PropsContext: FileInputPropsContext,\n usePropsContext: useFileInputPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n \"file-input\",\n fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n ({\n children,\n component,\n errorBorderColor,\n focusBorderColor,\n format = defaultFormat,\n placeholder,\n separator = \",\",\n ...props\n }) => {\n const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n const cloneChildren = useMemo(() => {\n if (!values?.length)\n return (\n <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n {placeholder}\n </styled.span>\n )\n\n if (children) return children(values)\n\n return values.map((value, index) => {\n const last = values.length === index + 1\n\n if (component) {\n const node = component({ index, value })\n\n if (isValidElement(node)) return cloneElement(node, { key: index })\n else return node\n } else {\n return (\n <FileInputTag key={index}>\n {format(value, index)}\n {!last ? separator : null}\n </FileInputTag>\n )\n }\n })\n }, [children, format, placeholder, separator, component, values])\n\n return (\n <>\n <Portal>\n <styled.input {...getInputProps()} />\n </Portal>\n\n <styled.div {...varProps} {...getFieldProps()}>\n {cloneChildren}\n </styled.div>\n </>\n )\n },\n \"root\",\n)((props) => {\n const context = useInputPropsContext()\n\n return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEA,yBAAAA,oBACF,cACAC,yBAAAA,cACF;;;;;;AASA,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAWC,yBAAAA,eAAe;EAAE;EAAkB;CAAiB,CAAC;CACtE,MAAM,EAAE,QAAQ,eAAe,kBAAkBC,uBAAAA,aAAa,KAAK;CAEnE,MAAM,iBAAA,GAAA,MAAA,QAAA,OAA8B;EAClC,IAAI,CAAC,QAAQ,QACX,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;GAAa,UAAS;GAAS,YAAW;GACvC,UAAA;EACU,CAAA;EAGjB,IAAI,UAAU,OAAO,SAAS,MAAM;EAEpC,OAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;GAEvC,IAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;IAAM,CAAC;IAEvC,KAAA,GAAA,MAAA,eAAA,CAAmB,IAAI,GAAG,QAAA,GAAA,MAAA,aAAA,CAAoB,MAAM,EAAE,KAAK,MAAM,CAAC;SAC7D,OAAO;GACd,OACE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,cAAD,EAAA,UAAA,CACG,OAAO,OAAO,KAAK,GACnB,CAAC,OAAO,YAAY,IACT,EAAA,GAHK,KAGL;EAGpB,CAAC;CACH,GAAG;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;CAAM,CAAC;CAEhE,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACD,gBAAAA,OAAO,OAAR,EAAc,GAAI,cAAc,EAAI,CAAA,EAC9B,CAAA,GAER,iBAAA,GAAA,kBAAA,IAAA,CAACA,gBAAAA,OAAO,KAAR;EAAY,GAAI;EAAU,GAAI,cAAc;EACzC,UAAA;CACS,CAAA,CACZ,EAAA,CAAA;AAEN,GACA,MACF,CAAC,EAAE,UAAU;CAGX,OAAOE,cAAAA,WAFSC,cAAAA,qBAEQ,GAAG,KAAK,CAAC,CAAC;AACpC,CAAC;AAID,MAAM,eAAe,YAAuC,QAAQ,KAAK,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flip.cjs","names":["createSlotComponent","flipStyle","useControllableState","motion"],"sources":["../../../../src/components/flip/flip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, Orientation, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { FlipStyle } from \"./flip.style\"\nimport { useMemo, useRef, useState } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll, useSafeLayoutEffect } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { flipStyle } from \"./flip.style\"\n\nconst flipVariants: Variants = {\n enter: ({ ident, orientation, visible }) => ({\n [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n ident === \"from\" ? (visible ? 180 : 0) : visible ? 0 : 180,\n }),\n exit: ({ ident, orientation }) => ({\n [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n ident === \"from\" ? 0 : 180,\n }),\n}\n\ninterface Rect {\n height?: number\n width?: number\n}\n\nexport interface FlipProps\n extends Omit<HTMLMotionProps<\"button\">, \"onChange\">, ThemeProps<FlipStyle> {\n /**\n * Passing React elements to \"from\" is required.\n */\n from: ReactNode\n /**\n * Passing React elements to \"to\" is required.\n */\n to: ReactNode\n /**\n * You can set the initial state.\n *\n * @default 'from'\n */\n defaultValue?: KeyframeIdent\n /**\n * The animation delay.\n *\n * @default 0\n */\n delay?: number\n /**\n * If `true`, the component is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The animation duration.\n *\n * @default 0.4\n */\n duration?: number\n /**\n * The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * If `true`, the component is readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * Use this when you want to control the animation from outside the component.\n */\n value?: KeyframeIdent\n /**\n * This is a callback function that is called when the animation state changes.\n */\n onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n PropsContext: FlipPropsContext,\n usePropsContext: useFlipPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FlipProps, FlipStyle>(\"flip\", flipStyle)\n\nexport { FlipPropsContext, useFlipPropsContext }\n\n/**\n * `Flip` is an animation component that alternates between flipping two elements.\n *\n * @see https://yamada-ui.com/docs/components/flip\n */\nexport const Flip = withProvider(\n ({\n defaultValue = \"from\",\n delay = 0,\n disabled,\n duration = 0.4,\n from,\n orientation = \"horizontal\",\n readOnly,\n to,\n transition = {},\n value: valueProp,\n onChange,\n onClick: onClickProp,\n ...rest\n }) => {\n const [{ height, width }, setRect] = useState<Rect>({})\n const fromRef = useRef<HTMLDivElement | null>(null)\n const toRef = useRef<HTMLDivElement | null>(null)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange,\n })\n const visible = value === \"to\"\n\n const style = useMemo(\n () => ({\n height: height ? `${height}px` : \"auto\",\n width: width ? `${width}px` : \"auto\",\n }),\n [width, height],\n )\n\n const onClick = () => {\n if (readOnly) return\n\n setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n }\n\n useSafeLayoutEffect(() => {\n const from = fromRef.current\n const to = toRef.current\n\n if (!from || !to) return\n\n if (\n from.offsetWidth !== to.offsetWidth ||\n from.offsetHeight !== to.offsetHeight\n )\n console.warn(\n `Flip: \"from\" element (width: ${from.offsetWidth}px, height: ${from.offsetHeight}px) does not match \"to\" element (width: ${to.offsetWidth}px, height: ${to.offsetHeight}px). Please ensure both elements have the same dimensions.`,\n )\n\n setRect({ height: from.offsetHeight, width: from.offsetWidth })\n }, [fromRef, toRef])\n\n return (\n <motion.button\n type=\"button\"\n style={style}\n data-disabled={dataAttr(disabled)}\n data-orientation={orientation}\n data-readonly={dataAttr(readOnly)}\n data-value={value}\n disabled={disabled}\n onClick={handlerAll(onClickProp, onClick)}\n {...rest}\n >\n <FlipFrom\n ref={fromRef}\n custom={{ orientation, visible }}\n transition={{ delay, duration, ...transition }}\n >\n {from}\n </FlipFrom>\n\n <FlipTo\n ref={toRef}\n custom={{ orientation, visible }}\n transition={{ delay, duration, ...transition }}\n >\n {to}\n </FlipTo>\n </motion.button>\n )\n },\n \"root\",\n)()\n\ninterface FlipFromProps extends HTMLMotionProps<\"span\"> {}\n\nconst FlipFrom = withContext<\"span\", FlipFromProps>(\n ({ custom, ...rest }) => {\n return (\n <motion.span\n animate=\"enter\"\n custom={{ ident: \"from\", ...custom }}\n initial=\"exit\"\n variants={flipVariants}\n {...rest}\n />\n )\n },\n [\"item\", \"from\"],\n)()\n\ninterface FlipToProps extends HTMLMotionProps<\"span\"> {}\n\nconst FlipTo = withContext<\"span\", FlipToProps>(\n ({ custom, ...rest }) => {\n return (\n <motion.span\n animate=\"enter\"\n custom={{ ident: \"to\", ...custom }}\n initial=\"exit\"\n variants={flipVariants}\n {...rest}\n />\n )\n },\n [\"item\", \"to\"],\n)()\n"],"mappings":";;;;;;;;;;AAcA,MAAM,eAAyB;CAC7B,QAAQ,EAAE,OAAO,aAAa,eAAe,GAC1C,gBAAgB,eAAe,YAAY,YAC1C,UAAU,SAAU,UAAU,MAAM,IAAK,UAAU,IAAI,IAC3D;CACA,OAAO,EAAE,OAAO,mBAAmB,GAChC,gBAAgB,eAAe,YAAY,YAC1C,UAAU,SAAS,IAAI,IAC3B;AACF;AA+DA,MAAM,EACJ,cAAc,kBACd,iBAAiB,qBACjB,aACA,iBACEA,yBAAAA,oBAA0C,QAAQC,mBAAAA,SAAS;;;;;;AAS/D,MAAa,OAAO,cACjB,EACC,eAAe,QACf,QAAQ,GACR,UACA,WAAW,IACX,MACA,cAAc,cACd,UACA,IACA,aAAa,CAAC,GACd,OAAO,WACP,UACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,CAAC,EAAE,QAAQ,SAAS,YAAA,GAAA,MAAA,SAAA,CAA0B,CAAC,CAAC;CACtD,MAAM,WAAA,GAAA,MAAA,OAAA,CAAwC,IAAI;CAClD,MAAM,SAAA,GAAA,MAAA,OAAA,CAAsC,IAAI;CAChD,MAAM,CAAC,OAAO,YAAYC,2CAAAA,qBAAqB;EAC7C;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,UAAU,UAAU;CAE1B,MAAM,SAAA,GAAA,MAAA,QAAA,QACG;EACL,QAAQ,SAAS,GAAG,OAAO,MAAM;EACjC,OAAO,QAAQ,GAAG,MAAM,MAAM;CAChC,IACA,CAAC,OAAO,MAAM,CAChB;CAEA,MAAM,gBAAgB;EACpB,IAAI,UAAU;EAEd,UAAU,SAAU,SAAS,SAAS,OAAO,MAAO;CACtD;CAEA,eAAA,0BAA0B;EACxB,MAAM,OAAO,QAAQ;EACrB,MAAM,KAAK,MAAM;EAEjB,IAAI,CAAC,QAAQ,CAAC,IAAI;EAElB,IACE,KAAK,gBAAgB,GAAG,eACxB,KAAK,iBAAiB,GAAG,cAEzB,QAAQ,KACN,gCAAgC,KAAK,YAAY,cAAc,KAAK,aAAa,0CAA0C,GAAG,YAAY,cAAc,GAAG,aAAa,2DAC1K;EAEF,QAAQ;GAAE,QAAQ,KAAK;GAAc,OAAO,KAAK;EAAY,CAAC;CAChE,GAAG,CAAC,SAAS,KAAK,CAAC;CAEnB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,QAAR;EACE,MAAK;EACE;EACP,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAAwB,QAAQ;EAChC,oBAAkB;EAClB,kBAAA,GAAA,oBAAA,cAAA,SAAA,CAAwB,QAAQ;EAChC,cAAY;EACF;EACV,UAAA,GAAA,oBAAA,cAAA,WAAA,CAAoB,aAAa,OAAO;EACxC,GAAI;
|
|
1
|
+
{"version":3,"file":"flip.cjs","names":["createSlotComponent","flipStyle","useControllableState","motion"],"sources":["../../../../src/components/flip/flip.tsx"],"sourcesContent":["\"use client\"\n\nimport type { Variants } from \"motion/react\"\nimport type { ReactNode } from \"react\"\nimport type { KeyframeIdent, Orientation, ThemeProps } from \"../../core\"\nimport type { HTMLMotionProps } from \"../motion\"\nimport type { FlipStyle } from \"./flip.style\"\nimport { useMemo, useRef, useState } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useControllableState } from \"../../hooks/use-controllable-state\"\nimport { dataAttr, handlerAll, useSafeLayoutEffect } from \"../../utils\"\nimport { motion } from \"../motion\"\nimport { flipStyle } from \"./flip.style\"\n\nconst flipVariants: Variants = {\n enter: ({ ident, orientation, visible }) => ({\n [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n ident === \"from\" ? (visible ? 180 : 0) : visible ? 0 : 180,\n }),\n exit: ({ ident, orientation }) => ({\n [orientation === \"horizontal\" ? \"rotateY\" : \"rotateX\"]:\n ident === \"from\" ? 0 : 180,\n }),\n}\n\ninterface Rect {\n height?: number\n width?: number\n}\n\nexport interface FlipProps\n extends Omit<HTMLMotionProps<\"button\">, \"onChange\">, ThemeProps<FlipStyle> {\n /**\n * Passing React elements to \"from\" is required.\n */\n from: ReactNode\n /**\n * Passing React elements to \"to\" is required.\n */\n to: ReactNode\n /**\n * You can set the initial state.\n *\n * @default 'from'\n */\n defaultValue?: KeyframeIdent\n /**\n * The animation delay.\n *\n * @default 0\n */\n delay?: number\n /**\n * If `true`, the component is disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * The animation duration.\n *\n * @default 0.4\n */\n duration?: number\n /**\n * The orientation of the flip effect. Determines whether the flip occurs horizontally or vertically.\n *\n * @default 'horizontal'\n */\n orientation?: Orientation\n /**\n * If `true`, the component is readonly.\n *\n * @default false\n */\n readOnly?: boolean\n /**\n * Use this when you want to control the animation from outside the component.\n */\n value?: KeyframeIdent\n /**\n * This is a callback function that is called when the animation state changes.\n */\n onChange?: (value: KeyframeIdent) => void\n}\n\nconst {\n PropsContext: FlipPropsContext,\n usePropsContext: useFlipPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FlipProps, FlipStyle>(\"flip\", flipStyle)\n\nexport { FlipPropsContext, useFlipPropsContext }\n\n/**\n * `Flip` is an animation component that alternates between flipping two elements.\n *\n * @see https://yamada-ui.com/docs/components/flip\n */\nexport const Flip = withProvider(\n ({\n defaultValue = \"from\",\n delay = 0,\n disabled,\n duration = 0.4,\n from,\n orientation = \"horizontal\",\n readOnly,\n to,\n transition = {},\n value: valueProp,\n onChange,\n onClick: onClickProp,\n ...rest\n }) => {\n const [{ height, width }, setRect] = useState<Rect>({})\n const fromRef = useRef<HTMLDivElement | null>(null)\n const toRef = useRef<HTMLDivElement | null>(null)\n const [value, setValue] = useControllableState({\n defaultValue,\n value: valueProp,\n onChange,\n })\n const visible = value === \"to\"\n\n const style = useMemo(\n () => ({\n height: height ? `${height}px` : \"auto\",\n width: width ? `${width}px` : \"auto\",\n }),\n [width, height],\n )\n\n const onClick = () => {\n if (readOnly) return\n\n setValue((prev) => (prev === \"from\" ? \"to\" : \"from\"))\n }\n\n useSafeLayoutEffect(() => {\n const from = fromRef.current\n const to = toRef.current\n\n if (!from || !to) return\n\n if (\n from.offsetWidth !== to.offsetWidth ||\n from.offsetHeight !== to.offsetHeight\n )\n console.warn(\n `Flip: \"from\" element (width: ${from.offsetWidth}px, height: ${from.offsetHeight}px) does not match \"to\" element (width: ${to.offsetWidth}px, height: ${to.offsetHeight}px). Please ensure both elements have the same dimensions.`,\n )\n\n setRect({ height: from.offsetHeight, width: from.offsetWidth })\n }, [fromRef, toRef])\n\n return (\n <motion.button\n type=\"button\"\n style={style}\n data-disabled={dataAttr(disabled)}\n data-orientation={orientation}\n data-readonly={dataAttr(readOnly)}\n data-value={value}\n disabled={disabled}\n onClick={handlerAll(onClickProp, onClick)}\n {...rest}\n >\n <FlipFrom\n ref={fromRef}\n custom={{ orientation, visible }}\n transition={{ delay, duration, ...transition }}\n >\n {from}\n </FlipFrom>\n\n <FlipTo\n ref={toRef}\n custom={{ orientation, visible }}\n transition={{ delay, duration, ...transition }}\n >\n {to}\n </FlipTo>\n </motion.button>\n )\n },\n \"root\",\n)()\n\ninterface FlipFromProps extends HTMLMotionProps<\"span\"> {}\n\nconst FlipFrom = withContext<\"span\", FlipFromProps>(\n ({ custom, ...rest }) => {\n return (\n <motion.span\n animate=\"enter\"\n custom={{ ident: \"from\", ...custom }}\n initial=\"exit\"\n variants={flipVariants}\n {...rest}\n />\n )\n },\n [\"item\", \"from\"],\n)()\n\ninterface FlipToProps extends HTMLMotionProps<\"span\"> {}\n\nconst FlipTo = withContext<\"span\", FlipToProps>(\n ({ custom, ...rest }) => {\n return (\n <motion.span\n animate=\"enter\"\n custom={{ ident: \"to\", ...custom }}\n initial=\"exit\"\n variants={flipVariants}\n {...rest}\n />\n )\n },\n [\"item\", \"to\"],\n)()\n"],"mappings":"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"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
|
|
3
|
+
const require_context = require("../../utils/context.cjs");
|
|
3
4
|
const require_utils_index = require("../../utils/index.cjs");
|
|
4
5
|
let react = require("react");
|
|
5
6
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
7
|
let react_focus_lock = require("react-focus-lock");
|
|
7
8
|
react_focus_lock = require_runtime.__toESM(react_focus_lock, 1);
|
|
8
9
|
//#region src/components/focus-lock/focus-lock.tsx
|
|
10
|
+
const [FocusLockShardContext, useFocusLockShard] = require_context.createContext({
|
|
11
|
+
name: "FocusLockShardContext",
|
|
12
|
+
strict: false
|
|
13
|
+
});
|
|
9
14
|
const InternalFocusLock = (0, require_utils_index.utils_exports.interopDefault)(react_focus_lock.default);
|
|
10
15
|
/**
|
|
11
16
|
* `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.
|
|
@@ -13,7 +18,14 @@ const InternalFocusLock = (0, require_utils_index.utils_exports.interopDefault)(
|
|
|
13
18
|
* @see https://yamada-ui.com/docs/components/focus-lock
|
|
14
19
|
*/
|
|
15
20
|
const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, initialFocusRef, lockFocusAcrossFrames, persistentFocus, restoreFocus }) => {
|
|
21
|
+
const [shards, setShards] = (0, react.useState)([]);
|
|
16
22
|
const returnFocus = restoreFocus && !finalFocusRef;
|
|
23
|
+
const registerShard = (0, react.useCallback)((shard) => {
|
|
24
|
+
setShards((prev) => prev.includes(shard) ? prev : [...prev, shard]);
|
|
25
|
+
return () => {
|
|
26
|
+
setShards((prev) => prev.filter((item) => item !== shard));
|
|
27
|
+
};
|
|
28
|
+
}, []);
|
|
17
29
|
const onActivation = (0, react.useCallback)(() => {
|
|
18
30
|
if (initialFocusRef?.current) initialFocusRef.current.focus();
|
|
19
31
|
else if (contentRef?.current) {
|
|
@@ -25,18 +37,23 @@ const FocusLock = ({ autoFocus, children, contentRef, disabled, finalFocusRef, i
|
|
|
25
37
|
const onDeactivation = (0, react.useCallback)(() => {
|
|
26
38
|
finalFocusRef?.current?.focus();
|
|
27
39
|
}, [finalFocusRef]);
|
|
28
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
40
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusLockShardContext, {
|
|
41
|
+
value: registerShard,
|
|
42
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalFocusLock, {
|
|
43
|
+
autoFocus,
|
|
44
|
+
crossFrame: lockFocusAcrossFrames,
|
|
45
|
+
disabled,
|
|
46
|
+
persistentFocus,
|
|
47
|
+
returnFocus,
|
|
48
|
+
shards,
|
|
49
|
+
onActivation,
|
|
50
|
+
onDeactivation,
|
|
51
|
+
children
|
|
52
|
+
})
|
|
37
53
|
});
|
|
38
54
|
};
|
|
39
55
|
//#endregion
|
|
40
56
|
exports.FocusLock = FocusLock;
|
|
57
|
+
exports.useFocusLockShard = useFocusLockShard;
|
|
41
58
|
|
|
42
59
|
//# sourceMappingURL=focus-lock.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-lock.cjs","names":["ReactFocusLock"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport {
|
|
1
|
+
{"version":3,"file":"focus-lock.cjs","names":["createContext","ReactFocusLock"],"sources":["../../../../src/components/focus-lock/focus-lock.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, RefObject } from \"react\"\nimport { useCallback, useState } from \"react\"\nimport ReactFocusLock from \"react-focus-lock\"\nimport {\n createContext,\n getFocusableElements,\n interopDefault,\n} from \"../../utils\"\n\nconst [FocusLockShardContext, useFocusLockShard] = createContext<\n ((shard: HTMLElement) => () => void) | undefined\n>({ name: \"FocusLockShardContext\", strict: false })\n\nexport { useFocusLockShard }\n\nconst InternalFocusLock = interopDefault(ReactFocusLock)\n\nexport interface FocusLockProps extends PropsWithChildren {\n /**\n * If `true`, the first focusable element within the `children` will auto-focused once `FocusLock` mounts.\n *\n * @default false\n */\n autoFocus?: boolean\n /**\n * The `ref` of the wrapper for which the focus-lock wraps.\n */\n contentRef?: RefObject<HTMLElement | null>\n /**\n * If `true`, focus trapping will be disabled.\n *\n * @default false\n */\n disabled?: boolean\n /**\n * `ref` of the element to return focus to when `FocusLock` unmounts.\n */\n finalFocusRef?: RefObject<HTMLElement | null>\n /**\n * `ref` of the element to receive focus initially.\n */\n initialFocusRef?: RefObject<HTMLElement | null>\n /**\n * Enables aggressive focus capturing within iframes.\n * - If `true`: keep focus in the lock, no matter where lock is active.\n * - If `false`: allows focus to move outside of iframe.\n *\n * @default false\n */\n lockFocusAcrossFrames?: boolean\n /**\n * If `true`, disables text selections inside, and outside focus lock.\n *\n * @default false\n */\n persistentFocus?: boolean\n /**\n * If `true`, focus will be restored to the element that triggered the `FocusLock` once it unmounts.\n *\n * @default false\n */\n restoreFocus?: boolean\n}\n\n/**\n * `FocusLock` is a component that improves accessibility by restricting focus within elements such as modals and dialogs, and locking the focus within that range.\n *\n * @see https://yamada-ui.com/docs/components/focus-lock\n */\nexport const FocusLock: FC<FocusLockProps> = ({\n autoFocus,\n children,\n contentRef,\n disabled,\n finalFocusRef,\n initialFocusRef,\n lockFocusAcrossFrames,\n persistentFocus,\n restoreFocus,\n}) => {\n const [shards, setShards] = useState<HTMLElement[]>([])\n const returnFocus = restoreFocus && !finalFocusRef\n\n const registerShard = useCallback((shard: HTMLElement) => {\n setShards((prev) => (prev.includes(shard) ? prev : [...prev, shard]))\n\n return () => {\n setShards((prev) => prev.filter((item) => item !== shard))\n }\n }, [])\n\n const onActivation = useCallback(() => {\n if (initialFocusRef?.current) {\n initialFocusRef.current.focus()\n } else if (contentRef?.current) {\n const focusables = getFocusableElements(contentRef.current)\n\n if (focusables.length === 0)\n requestAnimationFrame(() => {\n contentRef.current?.focus()\n })\n }\n }, [initialFocusRef, contentRef])\n\n const onDeactivation = useCallback(() => {\n finalFocusRef?.current?.focus()\n }, [finalFocusRef])\n\n return (\n <FocusLockShardContext value={registerShard}>\n <InternalFocusLock\n autoFocus={autoFocus}\n crossFrame={lockFocusAcrossFrames}\n disabled={disabled}\n persistentFocus={persistentFocus}\n returnFocus={returnFocus}\n shards={shards}\n onActivation={onActivation}\n onDeactivation={onDeactivation}\n >\n {children}\n </InternalFocusLock>\n </FocusLockShardContext>\n )\n}\n"],"mappings":";;;;;;;;;AAWA,MAAM,CAAC,uBAAuB,qBAAqBA,gBAAAA,cAEjD;CAAE,MAAM;CAAyB,QAAQ;AAAM,CAAC;AAIlD,MAAM,qBAAA,GAAA,oBAAA,cAAA,eAAA,CAAmCC,iBAAAA,OAAc;;;;;;AAsDvD,MAAa,aAAiC,EAC5C,WACA,UACA,YACA,UACA,eACA,iBACA,uBACA,iBACA,mBACI;CACJ,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,SAAA,CAAqC,CAAC,CAAC;CACtD,MAAM,cAAc,gBAAgB,CAAC;CAErC,MAAM,iBAAA,GAAA,MAAA,YAAA,EAA6B,UAAuB;EACxD,WAAW,SAAU,KAAK,SAAS,KAAK,IAAI,OAAO,CAAC,GAAG,MAAM,KAAK,CAAE;EAEpE,aAAa;GACX,WAAW,SAAS,KAAK,QAAQ,SAAS,SAAS,KAAK,CAAC;EAC3D;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAA,GAAA,MAAA,YAAA,OAAiC;EACrC,IAAI,iBAAiB,SACnB,gBAAgB,QAAQ,MAAM;OACzB,IAAI,YAAY,SACmB;QAAA,GAAA,oBAAA,cAAA,qBAAA,CAAA,WAAW,OAEtC,CAAC,CAAC,WAAW,GACxB,4BAA4B;IAC1B,WAAW,SAAS,MAAM;GAC5B,CAAC;EAAA;CAEP,GAAG,CAAC,iBAAiB,UAAU,CAAC;CAEhC,MAAM,kBAAA,GAAA,MAAA,YAAA,OAAmC;EACvC,eAAe,SAAS,MAAM;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,uBAAD;EAAuB,OAAO;EAC5B,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,mBAAD;GACa;GACX,YAAY;GACF;GACO;GACJ;GACL;GACM;GACE;GAEf;EACgB,CAAA;CACE,CAAA;AAE3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.cjs","names":["createContext","createSlotComponent","formStyle","useSplitChildren","styled","Button"],"sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { FormStyle } from \"./form.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, useSplitChildren } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { formStyle } from \"./form.style\"\n\ninterface FormContext extends Pick<\n FormRootProps,\n | \"disabled\"\n | \"errorMessage\"\n | \"helperMessage\"\n | \"invalid\"\n | \"optionalIndicator\"\n | \"readOnly\"\n | \"replace\"\n | \"required\"\n | \"requiredIndicator\"\n | \"size\"\n | \"variant\"\n> {\n descriptionId: string\n id: string\n titleId: string\n}\n\nconst [FormContext, useFormContext] = createContext<FormContext>({\n name: \"FormContext\",\n strict: false,\n})\n\nexport { FormContext, useFormContext }\n\nexport interface FormRootProps\n extends Omit<HTMLStyledProps<\"form\">, \"title\">, ThemeProps<FormStyle> {\n /**\n * The form description to use.\n */\n description?: ReactNode\n /**\n * An object managing the disabled state of each field.\n */\n disabled?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the error message of each field.\n */\n errorMessage?: { [key: string]: ReactNode }\n /**\n * An object managing the helper message of each field.\n */\n helperMessage?: { [key: string]: ReactNode }\n /**\n * An object managing the invalid state of each field.\n */\n invalid?: boolean | { [key: string]: boolean | undefined }\n /**\n * The optional indicator to use for each field.\n */\n optionalIndicator?: ReactNode\n /**\n * An object managing the read only state of each field.\n */\n readOnly?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the replace state of each field.\n */\n replace?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the required state of each field.\n */\n required?: boolean | { [key: string]: boolean | undefined }\n /**\n * The required indicator to use for each field.\n */\n requiredIndicator?: ReactNode\n /**\n * The submit button to use.\n */\n submitButton?: ReactNode\n /**\n * The form title to use.\n */\n title?: ReactNode\n /**\n * Props the body component.\n */\n bodyProps?: FormBodyProps\n /**\n * Props the description component.\n */\n descriptionProps?: FormDescriptionProps\n /**\n * Props the footer component.\n */\n footerProps?: FormFooterProps\n /**\n * Props the header component.\n */\n headerProps?: FormHeaderProps\n /**\n * Props the submit button component.\n */\n submitButtonProps?: FormSubmitButtonProps\n /**\n * Props the title component.\n */\n titleProps?: FormTitleProps\n}\n\nconst {\n PropsContext: FormPropsContext,\n usePropsContext: useFormPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FormRootProps, FormStyle, FormContext>(\n \"form\",\n formStyle,\n)\n\nexport { FormPropsContext, useFormPropsContext }\n\n/**\n * `Form` is a component used to group multiple form elements.\n *\n * @see https://yamada-ui.com/docs/components/form\n */\nexport const FormRoot = withProvider<\"form\", FormRootProps, \"size\" | \"variant\">(\n ({\n id,\n size,\n variant,\n \"aria-labelledby\": ariaLabelledBy,\n children,\n description,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n noValidate = true,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n submitButton,\n title,\n bodyProps,\n descriptionProps,\n footerProps,\n headerProps,\n submitButtonProps,\n titleProps,\n ...rest\n }) => {\n const uuid = useId()\n const titleId = useId()\n const descriptionId = useId()\n const [\n omittedChildren,\n customHeader,\n customBody,\n customFooter,\n customTitle,\n customDescription,\n customSubmitButton,\n ] = useSplitChildren(\n children,\n FormHeader,\n FormBody,\n FormFooter,\n FormTitle,\n FormDescription,\n FormSubmitButton,\n )\n\n id ??= uuid\n\n const context = useMemo(\n () => ({\n id,\n size,\n variant,\n descriptionId,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n titleId,\n }),\n [\n id,\n titleId,\n descriptionId,\n disabled,\n size,\n variant,\n errorMessage,\n helperMessage,\n invalid,\n readOnly,\n replace,\n required,\n optionalIndicator,\n requiredIndicator,\n ],\n )\n\n return (\n <FormContext value={context}>\n <styled.form\n id={id}\n aria-labelledby={cx(titleId, descriptionId, ariaLabelledBy)}\n noValidate={noValidate}\n {...rest}\n >\n {customHeader ||\n (customTitle || title || customDescription || description ? (\n <FormHeader {...headerProps}>\n {customTitle ||\n (title ? (\n <FormTitle {...titleProps}>{title}</FormTitle>\n ) : null)}\n\n {customDescription ||\n (description ? (\n <FormDescription {...descriptionProps}>\n {description}\n </FormDescription>\n ) : null)}\n </FormHeader>\n ) : null)}\n\n {customBody || <FormBody {...bodyProps}>{omittedChildren}</FormBody>}\n\n {customFooter ||\n (customSubmitButton || submitButton ? (\n <FormFooter {...footerProps}>\n {customSubmitButton ||\n (submitButton ? (\n <FormSubmitButton {...submitButtonProps}>\n {submitButton}\n </FormSubmitButton>\n ) : null)}\n </FormFooter>\n ) : null)}\n </styled.form>\n </FormContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"variant\"] },\n)()\n\nexport interface FormHeaderProps extends HTMLStyledProps {}\n\nexport const FormHeader = withContext<\"div\", FormHeaderProps>(\"div\", \"header\")()\n\nexport interface FormTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const FormTitle = withContext<\"h3\", FormTitleProps>(\"h3\", \"title\")(\n undefined,\n (props) => {\n const { titleId } = useFormContext() ?? {}\n\n return { id: titleId, ...props }\n },\n)\n\nexport interface FormDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const FormDescription = withContext<\"p\", FormDescriptionProps>(\n \"p\",\n \"description\",\n)(undefined, (props) => {\n const { descriptionId, titleId } = useFormContext() ?? {}\n\n return { id: descriptionId, \"aria-describedby\": titleId, ...props }\n})\n\nexport interface FormBodyProps extends HTMLStyledProps {}\n\nexport const FormBody = withContext<\"div\", FormBodyProps>(\"div\", \"body\")()\n\nexport interface FormGroupProps extends HTMLStyledProps {}\n\nexport const FormGroup = withContext<\"div\", FormGroupProps>(\"div\", \"group\")()\n\nexport interface FormFooterProps extends HTMLStyledProps {}\n\nexport const FormFooter = withContext<\"div\", FormFooterProps>(\"div\", \"footer\")()\n\nexport interface FormSubmitButtonProps extends ButtonProps {}\n\nexport const FormSubmitButton = withContext<\"button\", FormSubmitButtonProps>(\n Button,\n \"submitButton\",\n)({ type: \"submit\" }, (props) => {\n const { id } = useFormContext() ?? {}\n\n return { form: id, ...props }\n})\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"form.cjs","names":["createContext","createSlotComponent","formStyle","useSplitChildren","styled","Button"],"sources":["../../../../src/components/form/form.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { FormStyle } from \"./form.style\"\nimport { useId, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { createContext, cx, useSplitChildren } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { formStyle } from \"./form.style\"\n\ninterface FormContext extends Pick<\n FormRootProps,\n | \"disabled\"\n | \"errorMessage\"\n | \"helperMessage\"\n | \"invalid\"\n | \"optionalIndicator\"\n | \"readOnly\"\n | \"replace\"\n | \"required\"\n | \"requiredIndicator\"\n | \"size\"\n | \"variant\"\n> {\n descriptionId: string\n id: string\n titleId: string\n}\n\nconst [FormContext, useFormContext] = createContext<FormContext>({\n name: \"FormContext\",\n strict: false,\n})\n\nexport { FormContext, useFormContext }\n\nexport interface FormRootProps\n extends Omit<HTMLStyledProps<\"form\">, \"title\">, ThemeProps<FormStyle> {\n /**\n * The form description to use.\n */\n description?: ReactNode\n /**\n * An object managing the disabled state of each field.\n */\n disabled?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the error message of each field.\n */\n errorMessage?: { [key: string]: ReactNode }\n /**\n * An object managing the helper message of each field.\n */\n helperMessage?: { [key: string]: ReactNode }\n /**\n * An object managing the invalid state of each field.\n */\n invalid?: boolean | { [key: string]: boolean | undefined }\n /**\n * The optional indicator to use for each field.\n */\n optionalIndicator?: ReactNode\n /**\n * An object managing the read only state of each field.\n */\n readOnly?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the replace state of each field.\n */\n replace?: boolean | { [key: string]: boolean | undefined }\n /**\n * An object managing the required state of each field.\n */\n required?: boolean | { [key: string]: boolean | undefined }\n /**\n * The required indicator to use for each field.\n */\n requiredIndicator?: ReactNode\n /**\n * The submit button to use.\n */\n submitButton?: ReactNode\n /**\n * The form title to use.\n */\n title?: ReactNode\n /**\n * Props the body component.\n */\n bodyProps?: FormBodyProps\n /**\n * Props the description component.\n */\n descriptionProps?: FormDescriptionProps\n /**\n * Props the footer component.\n */\n footerProps?: FormFooterProps\n /**\n * Props the header component.\n */\n headerProps?: FormHeaderProps\n /**\n * Props the submit button component.\n */\n submitButtonProps?: FormSubmitButtonProps\n /**\n * Props the title component.\n */\n titleProps?: FormTitleProps\n}\n\nconst {\n PropsContext: FormPropsContext,\n usePropsContext: useFormPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<FormRootProps, FormStyle, FormContext>(\n \"form\",\n formStyle,\n)\n\nexport { FormPropsContext, useFormPropsContext }\n\n/**\n * `Form` is a component used to group multiple form elements.\n *\n * @see https://yamada-ui.com/docs/components/form\n */\nexport const FormRoot = withProvider<\"form\", FormRootProps, \"size\" | \"variant\">(\n ({\n id,\n size,\n variant,\n \"aria-labelledby\": ariaLabelledBy,\n children,\n description,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n noValidate = true,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n submitButton,\n title,\n bodyProps,\n descriptionProps,\n footerProps,\n headerProps,\n submitButtonProps,\n titleProps,\n ...rest\n }) => {\n const uuid = useId()\n const titleId = useId()\n const descriptionId = useId()\n const [\n omittedChildren,\n customHeader,\n customBody,\n customFooter,\n customTitle,\n customDescription,\n customSubmitButton,\n ] = useSplitChildren(\n children,\n FormHeader,\n FormBody,\n FormFooter,\n FormTitle,\n FormDescription,\n FormSubmitButton,\n )\n\n id ??= uuid\n\n const context = useMemo(\n () => ({\n id,\n size,\n variant,\n descriptionId,\n disabled,\n errorMessage,\n helperMessage,\n invalid,\n optionalIndicator,\n readOnly,\n replace,\n required,\n requiredIndicator,\n titleId,\n }),\n [\n id,\n titleId,\n descriptionId,\n disabled,\n size,\n variant,\n errorMessage,\n helperMessage,\n invalid,\n readOnly,\n replace,\n required,\n optionalIndicator,\n requiredIndicator,\n ],\n )\n\n return (\n <FormContext value={context}>\n <styled.form\n id={id}\n aria-labelledby={cx(titleId, descriptionId, ariaLabelledBy)}\n noValidate={noValidate}\n {...rest}\n >\n {customHeader ||\n (customTitle || title || customDescription || description ? (\n <FormHeader {...headerProps}>\n {customTitle ||\n (title ? (\n <FormTitle {...titleProps}>{title}</FormTitle>\n ) : null)}\n\n {customDescription ||\n (description ? (\n <FormDescription {...descriptionProps}>\n {description}\n </FormDescription>\n ) : null)}\n </FormHeader>\n ) : null)}\n\n {customBody || <FormBody {...bodyProps}>{omittedChildren}</FormBody>}\n\n {customFooter ||\n (customSubmitButton || submitButton ? (\n <FormFooter {...footerProps}>\n {customSubmitButton ||\n (submitButton ? (\n <FormSubmitButton {...submitButtonProps}>\n {submitButton}\n </FormSubmitButton>\n ) : null)}\n </FormFooter>\n ) : null)}\n </styled.form>\n </FormContext>\n )\n },\n \"root\",\n { transferProps: [\"size\", \"variant\"] },\n)()\n\nexport interface FormHeaderProps extends HTMLStyledProps {}\n\nexport const FormHeader = withContext<\"div\", FormHeaderProps>(\"div\", \"header\")()\n\nexport interface FormTitleProps extends HTMLStyledProps<\"h3\"> {}\n\nexport const FormTitle = withContext<\"h3\", FormTitleProps>(\"h3\", \"title\")(\n undefined,\n (props) => {\n const { titleId } = useFormContext() ?? {}\n\n return { id: titleId, ...props }\n },\n)\n\nexport interface FormDescriptionProps extends HTMLStyledProps<\"p\"> {}\n\nexport const FormDescription = withContext<\"p\", FormDescriptionProps>(\n \"p\",\n \"description\",\n)(undefined, (props) => {\n const { descriptionId, titleId } = useFormContext() ?? {}\n\n return { id: descriptionId, \"aria-describedby\": titleId, ...props }\n})\n\nexport interface FormBodyProps extends HTMLStyledProps {}\n\nexport const FormBody = withContext<\"div\", FormBodyProps>(\"div\", \"body\")()\n\nexport interface FormGroupProps extends HTMLStyledProps {}\n\nexport const FormGroup = withContext<\"div\", FormGroupProps>(\"div\", \"group\")()\n\nexport interface FormFooterProps extends HTMLStyledProps {}\n\nexport const FormFooter = withContext<\"div\", FormFooterProps>(\"div\", \"footer\")()\n\nexport interface FormSubmitButtonProps extends ButtonProps {}\n\nexport const FormSubmitButton = withContext<\"button\", FormSubmitButtonProps>(\n Button,\n \"submitButton\",\n)({ type: \"submit\" }, (props) => {\n const { id } = useFormContext() ?? {}\n\n return { form: id, ...props }\n})\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"format-byte.cjs","names":["createComponent","formatByteStyle","useFormatByte","styled"],"sources":["../../../../src/components/format/format-byte.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FormatByteStyle } from \"./format-byte.style\"\nimport type { FormatBytesOptions } from \"./use-format-byte\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatByteStyle } from \"./format-byte.style\"\nimport { useFormatByte } from \"./use-format-byte\"\n\nexport interface FormatByteProps\n extends\n HTMLStyledProps<\"span\">,\n ThemeProps<FormatByteStyle>,\n FormatBytesOptions {\n /**\n * The byte size to format\n */\n value: number\n}\n\nconst {\n PropsContext: FormatBytePropsContext,\n usePropsContext: useFormatBytePropsContext,\n withContext,\n} = createComponent<FormatByteProps, FormatByteStyle>(\n \"format-byte\",\n formatByteStyle,\n)\n\nexport { FormatBytePropsContext, useFormatBytePropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\n */\nexport const FormatByte = withContext(\n ({ locale, unit, unitDisplay, value, ...rest }) => {\n const text = useFormatByte(value, { locale, unit, unitDisplay })\n\n return <styled.span {...rest}>{text}</styled.span>\n },\n)()\n"],"mappings":";;;;;;;AAoBA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACEA,yBAAAA,gBACF,eACAC,0BAAAA,eACF;;;;;;AASA,MAAa,aAAa,aACvB,EAAE,QAAQ,MAAM,aAAa,OAAO,GAAG,WAAW;CACjD,MAAM,OAAOC,wBAAAA,cAAc,OAAO;EAAE;EAAQ;EAAM;CAAY,CAAC;CAE/D,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;EAAa,GAAI;
|
|
1
|
+
{"version":3,"file":"format-byte.cjs","names":["createComponent","formatByteStyle","useFormatByte","styled"],"sources":["../../../../src/components/format/format-byte.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FormatByteStyle } from \"./format-byte.style\"\nimport type { FormatBytesOptions } from \"./use-format-byte\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatByteStyle } from \"./format-byte.style\"\nimport { useFormatByte } from \"./use-format-byte\"\n\nexport interface FormatByteProps\n extends\n HTMLStyledProps<\"span\">,\n ThemeProps<FormatByteStyle>,\n FormatBytesOptions {\n /**\n * The byte size to format\n */\n value: number\n}\n\nconst {\n PropsContext: FormatBytePropsContext,\n usePropsContext: useFormatBytePropsContext,\n withContext,\n} = createComponent<FormatByteProps, FormatByteStyle>(\n \"format-byte\",\n formatByteStyle,\n)\n\nexport { FormatBytePropsContext, useFormatBytePropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\n */\nexport const FormatByte = withContext(\n ({ locale, unit, unitDisplay, value, ...rest }) => {\n const text = useFormatByte(value, { locale, unit, unitDisplay })\n\n return <styled.span {...rest}>{text}</styled.span>\n },\n)()\n"],"mappings":";;;;;;;AAoBA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,gBACEA,yBAAAA,gBACF,eACAC,0BAAAA,eACF;;;;;;AASA,MAAa,aAAa,aACvB,EAAE,QAAQ,MAAM,aAAa,OAAO,GAAG,WAAW;CACjD,MAAM,OAAOC,wBAAAA,cAAc,OAAO;EAAE;EAAQ;EAAM;CAAY,CAAC;CAE/D,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;EAAa,GAAI;EAAO,UAAA;CAAkB,CAAA;AACnD,CACF,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"format-date-time.cjs","names":["createComponent","formatDateTimeStyle","useFormatDateTime","styled"],"sources":["../../../../src/components/format/format-date-time.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FormatDateTimeStyle } from \"./format-date-time.style\"\nimport type { FormatDateTimeOptions } from \"./use-format-date-time\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatDateTimeStyle } from \"./format-date-time.style\"\nimport { useFormatDateTime } from \"./use-format-date-time\"\n\nexport interface FormatDateTimeProps\n extends\n HTMLStyledProps<\"span\">,\n ThemeProps<FormatDateTimeStyle>,\n FormatDateTimeOptions {\n /**\n * The date time to format\n */\n value: Date\n}\n\nconst {\n PropsContext: FormatDateTimePropsContext,\n usePropsContext: useFormatDateTimePropsContext,\n withContext,\n} = createComponent<FormatDateTimeProps, FormatDateTimeStyle>(\n \"format-date-time\",\n formatDateTimeStyle,\n)\n\nexport { FormatDateTimePropsContext, useFormatDateTimePropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\n */\nexport const FormatDateTime = withContext(\n ({\n calendar,\n dateStyle,\n day,\n dayPeriod,\n era,\n formatMatcher,\n fractionalSecondDigits,\n hour,\n hour12,\n hourCycle,\n locale,\n localeMatcher,\n minute,\n month,\n numberingSystem,\n second,\n timeStyle,\n timeZone,\n timeZoneName,\n value,\n weekday,\n year,\n ...rest\n }) => {\n const text = useFormatDateTime(value, {\n calendar,\n dateStyle,\n day,\n dayPeriod,\n era,\n formatMatcher,\n fractionalSecondDigits,\n hour,\n hour12,\n hourCycle,\n locale,\n localeMatcher,\n minute,\n month,\n numberingSystem,\n second,\n timeStyle,\n timeZone,\n timeZoneName,\n weekday,\n year,\n })\n\n return <styled.span {...rest}>{text}</styled.span>\n },\n)()\n"],"mappings":";;;;;;;AAoBA,MAAM,EACJ,cAAc,4BACd,iBAAiB,+BACjB,gBACEA,yBAAAA,gBACF,oBACAC,+BAAAA,mBACF;;;;;;AASA,MAAa,iBAAiB,aAC3B,EACC,UACA,WACA,KACA,WACA,KACA,eACA,wBACA,MACA,QACA,WACA,QACA,eACA,QACA,OACA,iBACA,QACA,WACA,UACA,cACA,OACA,SACA,MACA,GAAG,WACC;CACJ,MAAM,OAAOC,6BAAAA,kBAAkB,OAAO;EACpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;EAAa,GAAI;
|
|
1
|
+
{"version":3,"file":"format-date-time.cjs","names":["createComponent","formatDateTimeStyle","useFormatDateTime","styled"],"sources":["../../../../src/components/format/format-date-time.tsx"],"sourcesContent":["\"use client\"\n\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FormatDateTimeStyle } from \"./format-date-time.style\"\nimport type { FormatDateTimeOptions } from \"./use-format-date-time\"\nimport { createComponent, styled } from \"../../core\"\nimport { formatDateTimeStyle } from \"./format-date-time.style\"\nimport { useFormatDateTime } from \"./use-format-date-time\"\n\nexport interface FormatDateTimeProps\n extends\n HTMLStyledProps<\"span\">,\n ThemeProps<FormatDateTimeStyle>,\n FormatDateTimeOptions {\n /**\n * The date time to format\n */\n value: Date\n}\n\nconst {\n PropsContext: FormatDateTimePropsContext,\n usePropsContext: useFormatDateTimePropsContext,\n withContext,\n} = createComponent<FormatDateTimeProps, FormatDateTimeStyle>(\n \"format-date-time\",\n formatDateTimeStyle,\n)\n\nexport { FormatDateTimePropsContext, useFormatDateTimePropsContext }\n\n/**\n * `Format` is used to format dates, numbers, and bytes according to a specific locale.\n *\n * @see https://yamada-ui.com/docs/components/format\n */\nexport const FormatDateTime = withContext(\n ({\n calendar,\n dateStyle,\n day,\n dayPeriod,\n era,\n formatMatcher,\n fractionalSecondDigits,\n hour,\n hour12,\n hourCycle,\n locale,\n localeMatcher,\n minute,\n month,\n numberingSystem,\n second,\n timeStyle,\n timeZone,\n timeZoneName,\n value,\n weekday,\n year,\n ...rest\n }) => {\n const text = useFormatDateTime(value, {\n calendar,\n dateStyle,\n day,\n dayPeriod,\n era,\n formatMatcher,\n fractionalSecondDigits,\n hour,\n hour12,\n hourCycle,\n locale,\n localeMatcher,\n minute,\n month,\n numberingSystem,\n second,\n timeStyle,\n timeZone,\n timeZoneName,\n weekday,\n year,\n })\n\n return <styled.span {...rest}>{text}</styled.span>\n },\n)()\n"],"mappings":";;;;;;;AAoBA,MAAM,EACJ,cAAc,4BACd,iBAAiB,+BACjB,gBACEA,yBAAAA,gBACF,oBACAC,+BAAAA,mBACF;;;;;;AASA,MAAa,iBAAiB,aAC3B,EACC,UACA,WACA,KACA,WACA,KACA,eACA,wBACA,MACA,QACA,WACA,QACA,eACA,QACA,OACA,iBACA,QACA,WACA,UACA,cACA,OACA,SACA,MACA,GAAG,WACC;CACJ,MAAM,OAAOC,6BAAAA,kBAAkB,OAAO;EACpC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,gBAAAA,OAAO,MAAR;EAAa,GAAI;EAAO,UAAA;CAAkB,CAAA;AACnD,CACF,CAAC,CAAC"}
|