@yamada-ui/react 2.2.0 → 2.2.1-dev-20260412131725
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/pagination/pagination.cjs +5 -8
- package/dist/cjs/components/pagination/pagination.cjs.map +1 -1
- package/dist/esm/components/pagination/pagination.js +5 -8
- package/dist/esm/components/pagination/pagination.js.map +1 -1
- package/dist/types/components/accordion/accordion.d.ts +2 -2
- package/dist/types/components/accordion/accordion.style.d.ts +1 -1
- package/dist/types/components/accordion/use-accordion.d.ts +11 -11
- package/dist/types/components/action-bar/action-bar.d.ts +2 -2
- package/dist/types/components/airy/airy.d.ts +2 -2
- package/dist/types/components/alert/alert.d.ts +2 -2
- package/dist/types/components/alpha-slider/alpha-slider.d.ts +2 -2
- package/dist/types/components/aspect-ratio/aspect-ratio.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.d.ts +2 -2
- package/dist/types/components/autocomplete/autocomplete.style.d.ts +1 -1
- package/dist/types/components/autocomplete/use-autocomplete.d.ts +5 -5
- package/dist/types/components/avatar/avatar.d.ts +5 -5
- package/dist/types/components/avatar/avatar.style.d.ts +1 -1
- package/dist/types/components/avatar/use-avatar-group.d.ts +2 -2
- package/dist/types/components/badge/badge.d.ts +2 -2
- package/dist/types/components/bleed/bleed.d.ts +2 -2
- package/dist/types/components/blockquote/blockquote.d.ts +2 -2
- package/dist/types/components/breadcrumb/breadcrumb.d.ts +2 -2
- package/dist/types/components/breadcrumb/breadcrumb.style.d.ts +1 -1
- package/dist/types/components/breadcrumb/use-breadcrumb.d.ts +2 -2
- package/dist/types/components/button/button.d.ts +2 -2
- package/dist/types/components/button/icon-button.d.ts +2 -2
- package/dist/types/components/calendar/calendar.d.ts +2 -2
- package/dist/types/components/calendar/calendar.style.d.ts +2 -2
- package/dist/types/components/calendar/use-calendar.d.ts +8 -8
- package/dist/types/components/card/card.d.ts +2 -2
- package/dist/types/components/carousel/carousel.d.ts +2 -2
- package/dist/types/components/carousel/carousel.style.d.ts +2 -2
- package/dist/types/components/carousel/use-carousel.d.ts +3 -3
- package/dist/types/components/center/center.d.ts +2 -2
- package/dist/types/components/chart/chart.d.ts +2 -2
- package/dist/types/components/chart/composed-chart.d.ts +2 -2
- package/dist/types/components/chart/donut-chart.d.ts +2 -2
- package/dist/types/components/chart/pie-chart.d.ts +2 -2
- package/dist/types/components/chart/radial-chart.d.ts +2 -2
- package/dist/types/components/chart/use-chart.d.ts +2 -2
- package/dist/types/components/checkbox/checkbox.d.ts +5 -5
- package/dist/types/components/checkbox/checkbox.style.d.ts +1 -1
- package/dist/types/components/checkbox/use-checkbox-group.d.ts +2 -2
- package/dist/types/components/checkbox-card/checkbox-card.d.ts +5 -5
- package/dist/types/components/checkbox-card/checkbox-card.style.d.ts +1 -1
- package/dist/types/components/circle-progress/circle-progress.d.ts +2 -2
- package/dist/types/components/close-button/close-button.d.ts +2 -2
- package/dist/types/components/code/code.d.ts +2 -2
- package/dist/types/components/collapse/collapse.d.ts +2 -2
- package/dist/types/components/color-picker/color-picker.d.ts +2 -2
- package/dist/types/components/color-picker/color-picker.style.d.ts +1 -1
- package/dist/types/components/color-picker/use-color-picker.d.ts +2 -2
- package/dist/types/components/color-selector/color-selector.d.ts +2 -2
- package/dist/types/components/color-selector/color-selector.style.d.ts +2 -2
- package/dist/types/components/color-selector/use-color-selector.d.ts +3 -3
- package/dist/types/components/color-swatch/color-swatch.d.ts +2 -2
- package/dist/types/components/container/container.d.ts +2 -2
- package/dist/types/components/data-list/data-list.d.ts +2 -2
- package/dist/types/components/data-list/data-list.style.d.ts +1 -1
- package/dist/types/components/date-picker/date-picker.d.ts +2 -2
- package/dist/types/components/date-picker/date-picker.style.d.ts +1 -1
- package/dist/types/components/date-picker/use-date-picker.d.ts +4 -4
- package/dist/types/components/drawer/drawer.d.ts +2 -2
- package/dist/types/components/drawer/drawer.style.d.ts +2 -2
- package/dist/types/components/dropzone/dropzone.d.ts +4 -4
- package/dist/types/components/editable/editable.d.ts +4 -4
- package/dist/types/components/editable/use-editable.d.ts +2 -2
- package/dist/types/components/em/em.d.ts +2 -2
- package/dist/types/components/empty-state/empty-state.d.ts +2 -2
- package/dist/types/components/empty-state/empty-state.style.d.ts +2 -2
- package/dist/types/components/fade/fade.d.ts +2 -2
- package/dist/types/components/field/field.d.ts +3 -3
- package/dist/types/components/field/use-field-props.d.ts +4 -4
- package/dist/types/components/fieldset/fieldset.d.ts +3 -3
- package/dist/types/components/file-button/file-button.d.ts +2 -2
- package/dist/types/components/file-button/use-file-button.d.ts +18 -18
- package/dist/types/components/file-input/file-input.d.ts +2 -2
- package/dist/types/components/file-input/file-input.style.d.ts +1 -1
- package/dist/types/components/file-input/use-file-input.d.ts +17 -17
- package/dist/types/components/flex/flex.d.ts +2 -2
- package/dist/types/components/flip/flip.d.ts +4 -4
- package/dist/types/components/flip/flip.style.d.ts +1 -1
- package/dist/types/components/float/float.d.ts +2 -2
- package/dist/types/components/form/form.d.ts +3 -3
- package/dist/types/components/format/format-byte.d.ts +4 -4
- package/dist/types/components/format/format-date-time.d.ts +4 -4
- package/dist/types/components/format/format-number.d.ts +2 -2
- package/dist/types/components/grid/grid-item.d.ts +2 -2
- package/dist/types/components/grid/grid.d.ts +2 -2
- package/dist/types/components/group/group.d.ts +2 -2
- package/dist/types/components/group/use-group.d.ts +2 -2
- package/dist/types/components/heading/heading.d.ts +2 -2
- package/dist/types/components/hue-slider/hue-slider.d.ts +3 -3
- package/dist/types/components/icon/icon.d.ts +5 -5
- package/dist/types/components/image/image.d.ts +2 -2
- package/dist/types/components/indicator/indicator.d.ts +2 -2
- package/dist/types/components/infinite-scroll-area/infinite-scroll-area.d.ts +2 -2
- package/dist/types/components/input/input-addon.d.ts +2 -2
- package/dist/types/components/input/input-element.d.ts +2 -2
- package/dist/types/components/input/input.d.ts +2 -2
- package/dist/types/components/kbd/kbd.d.ts +2 -2
- package/dist/types/components/link/link.d.ts +2 -2
- package/dist/types/components/link-box/link-box.d.ts +2 -2
- package/dist/types/components/list/list.d.ts +2 -2
- package/dist/types/components/list/list.style.d.ts +2 -2
- package/dist/types/components/loading/loading-provider.d.ts +2 -2
- package/dist/types/components/loading/loading.d.ts +3 -3
- package/dist/types/components/mark/mark.d.ts +2 -2
- package/dist/types/components/menu/menu.d.ts +2 -2
- package/dist/types/components/menu/menu.style.d.ts +2 -2
- package/dist/types/components/menu/use-menu.d.ts +11 -11
- package/dist/types/components/modal/modal.d.ts +2 -2
- package/dist/types/components/modal/modal.style.d.ts +2 -2
- package/dist/types/components/native-accordion/native-accordion.d.ts +2 -2
- package/dist/types/components/native-accordion/native-accordion.style.d.ts +2 -2
- package/dist/types/components/native-accordion/use-native-accordion.d.ts +2 -2
- package/dist/types/components/native-popover/native-popover.d.ts +2 -2
- package/dist/types/components/native-select/native-select.d.ts +2 -2
- package/dist/types/components/native-table/native-table.d.ts +4 -4
- package/dist/types/components/notice/notice.style.d.ts +1 -1
- package/dist/types/components/number-input/number-input.d.ts +2 -2
- package/dist/types/components/pagination/pagination.d.ts +2 -2
- package/dist/types/components/pagination/pagination.style.d.ts +1 -1
- package/dist/types/components/pagination/use-pagination.d.ts +2 -2
- package/dist/types/components/password-input/password-input.d.ts +2 -2
- package/dist/types/components/password-input/strength-meter.d.ts +2 -2
- package/dist/types/components/password-input/strength-meter.style.d.ts +1 -1
- package/dist/types/components/password-input/use-password-input.d.ts +2 -2
- package/dist/types/components/pin-input/pin-input.d.ts +2 -2
- package/dist/types/components/pin-input/use-pin-input.d.ts +7 -7
- package/dist/types/components/popover/popover.d.ts +2 -2
- package/dist/types/components/progress/progress.d.ts +4 -4
- package/dist/types/components/progress/use-progress.d.ts +706 -706
- package/dist/types/components/qr-code/qr-code.d.ts +2 -2
- package/dist/types/components/radio/radio.d.ts +5 -5
- package/dist/types/components/radio/radio.style.d.ts +1 -1
- package/dist/types/components/radio/use-radio-group.d.ts +2 -2
- package/dist/types/components/radio-card/radio-card.d.ts +5 -5
- package/dist/types/components/radio-card/radio-card.style.d.ts +1 -1
- package/dist/types/components/rating/rating.style.d.ts +2 -2
- package/dist/types/components/rating/use-rating.d.ts +7 -7
- package/dist/types/components/reorder/reorder.d.ts +2 -2
- package/dist/types/components/reorder/reorder.style.d.ts +1 -1
- package/dist/types/components/reorder/use-reorder.d.ts +3 -3
- package/dist/types/components/resizable/resizable.d.ts +2 -2
- package/dist/types/components/resizable/resizable.style.d.ts +2 -2
- package/dist/types/components/resizable/use-resizable.d.ts +2 -2
- package/dist/types/components/ripple/ripple.d.ts +2 -2
- package/dist/types/components/ripple/use-ripple.d.ts +2 -2
- package/dist/types/components/rotate/rotate.d.ts +2 -2
- package/dist/types/components/saturation-slider/saturation-slider.d.ts +2 -2
- package/dist/types/components/saturation-slider/use-saturation-slider.d.ts +2 -2
- package/dist/types/components/scroll-area/scroll-area.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.d.ts +2 -2
- package/dist/types/components/segmented-control/segmented-control.style.d.ts +2 -2
- package/dist/types/components/segmented-control/use-segmented-control.d.ts +9 -9
- package/dist/types/components/select/select.d.ts +2 -2
- package/dist/types/components/select/select.style.d.ts +1 -1
- package/dist/types/components/select/use-select.d.ts +4 -4
- package/dist/types/components/separator/separator.d.ts +2 -2
- package/dist/types/components/sidebar/sidebar.d.ts +2 -2
- package/dist/types/components/sidebar/use-sidebar.d.ts +9 -9
- package/dist/types/components/simple-grid/simple-grid.d.ts +2 -2
- package/dist/types/components/skeleton/skeleton.d.ts +2 -2
- package/dist/types/components/slide/slide.d.ts +2 -2
- package/dist/types/components/slide-fade/slide-fade.d.ts +2 -2
- package/dist/types/components/slider/slider.d.ts +2 -2
- package/dist/types/components/slider/use-slider.d.ts +2 -2
- package/dist/types/components/stack/h-stack.d.ts +2 -2
- package/dist/types/components/stack/stack.d.ts +2 -2
- package/dist/types/components/stack/v-stack.d.ts +2 -2
- package/dist/types/components/stack/z-stack.d.ts +2 -2
- package/dist/types/components/stat/stat.d.ts +2 -2
- package/dist/types/components/status/status.d.ts +2 -2
- package/dist/types/components/status/status.style.d.ts +2 -2
- package/dist/types/components/steps/steps.d.ts +2 -2
- package/dist/types/components/steps/steps.style.d.ts +1 -1
- package/dist/types/components/steps/use-steps.d.ts +10 -10
- package/dist/types/components/switch/switch.d.ts +2 -2
- package/dist/types/components/table/table.d.ts +2 -2
- package/dist/types/components/tabs/tabs.d.ts +2 -2
- package/dist/types/components/tabs/tabs.style.d.ts +1 -1
- package/dist/types/components/tabs/use-tabs.d.ts +16 -16
- package/dist/types/components/tag/tag.d.ts +2 -2
- package/dist/types/components/tag/tag.style.d.ts +1 -1
- package/dist/types/components/text/text.d.ts +2 -2
- package/dist/types/components/textarea/textarea.d.ts +2 -2
- package/dist/types/components/textarea/use-autosize.d.ts +2 -2
- package/dist/types/components/timeline/timeline.d.ts +5 -5
- package/dist/types/components/timeline/timeline.style.d.ts +1 -1
- package/dist/types/components/toggle/toggle.d.ts +5 -5
- package/dist/types/components/toggle/use-toggle-group.d.ts +2 -2
- package/dist/types/components/toggle/use-toggle.d.ts +2 -2
- package/dist/types/components/tooltip/tooltip.d.ts +2 -2
- package/dist/types/components/tree/tree.d.ts +2 -2
- package/dist/types/components/tree/tree.style.d.ts +1 -1
- package/dist/types/components/tree/use-tree.d.ts +183 -183
- package/dist/types/components/visually-hidden/visually-hidden.d.ts +2 -2
- package/dist/types/components/wrap/wrap.d.ts +2 -2
- package/dist/types/core/components/create-component.d.ts +7 -7
- package/dist/types/core/system/color-mode-provider.d.ts +2 -2
- package/dist/types/core/system/storage-script.d.ts +3 -3
- package/dist/types/core/system/styled.d.ts +2 -2
- package/dist/types/core/system/system-provider.d.ts +2 -2
- package/dist/types/hooks/use-breakpoint/use-breakpoint-state.d.ts +2 -2
- package/dist/types/hooks/use-clickable/index.d.ts +9 -9
- package/dist/types/hooks/use-clipboard/index.d.ts +2 -2
- package/dist/types/hooks/use-combobox/index.d.ts +12 -12
- package/dist/types/hooks/use-counter/index.d.ts +2 -2
- package/dist/types/hooks/use-descendants/index.d.ts +2 -2
- package/dist/types/hooks/use-field-sizing/index.d.ts +2 -2
- package/dist/types/hooks/use-hover/index.d.ts +2 -2
- package/dist/types/hooks/use-popper/index.d.ts +2 -2
- package/dist/types/hooks/use-resize-observer/index.d.ts +3 -3
- package/dist/types/providers/i18n-provider/i18n-provider.d.ts +3 -3
- package/dist/types/providers/ui-provider/ui-provider.d.ts +2 -2
- package/dist/types/utils/children.d.ts +2 -2
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
|
|
4
4
|
const require_utils_index = require('../../utils/index.cjs');
|
|
5
5
|
const require_factory = require('../../core/system/factory.cjs');
|
|
6
|
+
const require_props = require('../../core/components/props.cjs');
|
|
6
7
|
const require_create_component = require('../../core/components/create-component.cjs');
|
|
7
8
|
require('../../core/index.cjs');
|
|
8
9
|
const require_chevron_left_icon = require('../icon/icons/chevron-left-icon.cjs');
|
|
@@ -67,13 +68,11 @@ const PaginationRoot = withProvider(({ size, variant, children, withControls = t
|
|
|
67
68
|
const children$1 = [];
|
|
68
69
|
if (withEdges) children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationStartTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
|
|
69
70
|
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevrons_left_icon.ChevronsLeftIcon, {}),
|
|
70
|
-
...edgeProps,
|
|
71
|
-
...edgeStartProps
|
|
71
|
+
...require_props.mergeProps(edgeProps, edgeStartProps)()
|
|
72
72
|
}) }));
|
|
73
73
|
if (withControls) children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationPrevTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
|
|
74
74
|
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_left_icon.ChevronLeftIcon, {}),
|
|
75
|
-
...controlProps,
|
|
76
|
-
...controlPrevProps
|
|
75
|
+
...require_props.mergeProps(controlProps, controlPrevProps)()
|
|
77
76
|
}) }));
|
|
78
77
|
children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItems, { render: (page) => (0, require_utils_index.utils_exports.isNumber)(page) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
|
|
79
78
|
...itemProps,
|
|
@@ -88,13 +87,11 @@ const PaginationRoot = withProvider(({ size, variant, children, withControls = t
|
|
|
88
87
|
}) }));
|
|
89
88
|
if (withControls) children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationNextTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
|
|
90
89
|
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_right_icon.ChevronRightIcon, {}),
|
|
91
|
-
...controlProps,
|
|
92
|
-
...controlNextProps
|
|
90
|
+
...require_props.mergeProps(controlProps, controlNextProps)()
|
|
93
91
|
}) }));
|
|
94
92
|
if (withEdges) children$1.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationEndTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationItem, {
|
|
95
93
|
icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevrons_right_icon.ChevronsRightIcon, {}),
|
|
96
|
-
...edgeProps,
|
|
97
|
-
...edgeEndProps
|
|
94
|
+
...require_props.mergeProps(edgeProps, edgeEndProps)()
|
|
98
95
|
}) }));
|
|
99
96
|
return children$1;
|
|
100
97
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.cjs","names":["createSlotComponent","paginationStyle","usePagination","children: ReactNode[]","ChevronsLeftIcon","ChevronLeftIcon","styled","EllipsisIcon","ChevronRightIcon","ChevronsRightIcon","children","PaginationContext","PaginationItems: FC<PaginationItemsProps>","usePaginationContext","useI18n"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: boolean\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: boolean\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: PaginationItemProps\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: PaginationItemProps\n /**\n * Props for control button element.\n */\n controlProps?: PaginationItemProps\n /**\n * Props for end of the edge button element.\n */\n edgeEndProps?: PaginationItemProps\n /**\n * Props for edge button element.\n */\n edgeProps?: PaginationItemProps\n /**\n * Props for start of the edge button element.\n */\n edgeStartProps?: PaginationItemProps\n /**\n * Props for ellipsis of the element.\n */\n ellipsisProps?: PaginationItemProps\n /**\n * Props for item of the button element.\n */\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" | \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...edgeProps}\n {...edgeStartProps}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...controlProps}\n {...controlPrevProps}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...controlProps}\n {...controlNextProps}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...edgeProps}\n {...edgeEndProps}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n children?: (page: Page) => ReactNode\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component)) {\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n } else {\n return component\n }\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /**\n * The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n */\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /**\n * The format of the text.\n *\n * @default 'compact'\n */\n format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) {\n return runIfFn(children, { page: currentPage, total })\n } else if (format === \"short\") {\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n } else {\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACEA,6CACF,cACAC,yCACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACEC,qCAAc,KAAK;CACvB,MAAM,oCACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,4CAAiC;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMC,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,2CAAC,oCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,8CAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,2CAAC,mBACC,SAAS,yDACE,KAAK,GACZ,2CAAC;IAAe,GAAI;cAClB,2CAACC,uBAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,2CAAC;IACC,IAAG;IACH,MAAM,2CAACC,uCAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,2CAAC,kCACC,2CAAC;IACC,MAAM,2CAACC,kDAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,2CAACC;EAAkB,OAAO;YACxB;GACE,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiBC,6CAAsB;AAEtD,iCAEI,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,gCAAwC,UAAU,CAChD,gCAAoB,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,4CAE5B,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAUA,6CAAsB;CACrD,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CACnC,MAAM,4CAAiC;AACrC,MAAI,SACF,uDAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyBD,6CAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuBA,6CAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
|
|
1
|
+
{"version":3,"file":"pagination.cjs","names":["createSlotComponent","paginationStyle","usePagination","children: ReactNode[]","ChevronsLeftIcon","mergeProps","ChevronLeftIcon","styled","EllipsisIcon","ChevronRightIcon","ChevronsRightIcon","children","PaginationContext","PaginationItems: FC<PaginationItemsProps>","usePaginationContext","useI18n"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: boolean\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: boolean\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: PaginationItemProps\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: PaginationItemProps\n /**\n * Props for control button element.\n */\n controlProps?: PaginationItemProps\n /**\n * Props for end of the edge button element.\n */\n edgeEndProps?: PaginationItemProps\n /**\n * Props for edge button element.\n */\n edgeProps?: PaginationItemProps\n /**\n * Props for start of the edge button element.\n */\n edgeStartProps?: PaginationItemProps\n /**\n * Props for ellipsis of the element.\n */\n ellipsisProps?: PaginationItemProps\n /**\n * Props for item of the button element.\n */\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" | \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...mergeProps(edgeProps, edgeStartProps)()}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...mergeProps(controlProps, controlPrevProps)()}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...mergeProps(controlProps, controlNextProps)()}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...mergeProps(edgeProps, edgeEndProps)()}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n children?: (page: Page) => ReactNode\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component)) {\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n } else {\n return component\n }\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /**\n * The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n */\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /**\n * The format of the text.\n *\n * @default 'compact'\n */\n format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) {\n return runIfFn(children, { page: currentPage, total })\n } else if (format === \"short\") {\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n } else {\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACEA,6CACF,cACAC,yCACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACEC,qCAAc,KAAK;CACvB,MAAM,oCACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,4CAAiC;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMC,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,2CAAC,oCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAIC,yBAAW,WAAW,eAAe,EAAE;KAC3C,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,8CAAkB;IACzB,GAAID,yBAAW,cAAc,iBAAiB,EAAE;KAChD,GACoB,CACzB;AAEH,cAAS,KACP,2CAAC,mBACC,SAAS,yDACE,KAAK,GACZ,2CAAC;IAAe,GAAI;cAClB,2CAACE,uBAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,2CAAC;IACC,IAAG;IACH,MAAM,2CAACC,uCAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,2CAAC,mCACC,2CAAC;IACC,MAAM,2CAACC,gDAAmB;IAC1B,GAAIJ,yBAAW,cAAc,iBAAiB,EAAE;KAChD,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,2CAAC,kCACC,2CAAC;IACC,MAAM,2CAACK,kDAAoB;IAC3B,GAAIL,yBAAW,WAAW,aAAa,EAAE;KACzC,GACmB,CACxB;AAEH,UAAOM;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,2CAACC;EAAkB,OAAO;YACxB;GACE,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiBC,6CAAsB;AAEtD,iCAEI,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,gCAAwC,UAAU,CAChD,gCAAoB,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,4CAE5B,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAUA,6CAAsB;CACrD,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CACnC,MAAM,4CAAiC;AACrC,MAAI,SACF,uDAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyBD,6CAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuBA,6CAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwBA,6CAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { utils_exports } from "../../utils/index.js";
|
|
4
4
|
import { styled } from "../../core/system/factory.js";
|
|
5
|
+
import { mergeProps } from "../../core/components/props.js";
|
|
5
6
|
import { createSlotComponent } from "../../core/components/create-component.js";
|
|
6
7
|
import "../../core/index.js";
|
|
7
8
|
import { ChevronLeftIcon } from "../icon/icons/chevron-left-icon.js";
|
|
@@ -66,13 +67,11 @@ const PaginationRoot = withProvider(({ size, variant, children, withControls = t
|
|
|
66
67
|
const children$1 = [];
|
|
67
68
|
if (withEdges) children$1.push(/* @__PURE__ */ jsx(PaginationStartTrigger, { children: /* @__PURE__ */ jsx(PaginationItem, {
|
|
68
69
|
icon: /* @__PURE__ */ jsx(ChevronsLeftIcon, {}),
|
|
69
|
-
...edgeProps,
|
|
70
|
-
...edgeStartProps
|
|
70
|
+
...mergeProps(edgeProps, edgeStartProps)()
|
|
71
71
|
}) }));
|
|
72
72
|
if (withControls) children$1.push(/* @__PURE__ */ jsx(PaginationPrevTrigger, { children: /* @__PURE__ */ jsx(PaginationItem, {
|
|
73
73
|
icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
|
|
74
|
-
...controlProps,
|
|
75
|
-
...controlPrevProps
|
|
74
|
+
...mergeProps(controlProps, controlPrevProps)()
|
|
76
75
|
}) }));
|
|
77
76
|
children$1.push(/* @__PURE__ */ jsx(PaginationItems, { render: (page) => (0, utils_exports.isNumber)(page) ? /* @__PURE__ */ jsx(PaginationItem, {
|
|
78
77
|
...itemProps,
|
|
@@ -87,13 +86,11 @@ const PaginationRoot = withProvider(({ size, variant, children, withControls = t
|
|
|
87
86
|
}) }));
|
|
88
87
|
if (withControls) children$1.push(/* @__PURE__ */ jsx(PaginationNextTrigger, { children: /* @__PURE__ */ jsx(PaginationItem, {
|
|
89
88
|
icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
|
|
90
|
-
...controlProps,
|
|
91
|
-
...controlNextProps
|
|
89
|
+
...mergeProps(controlProps, controlNextProps)()
|
|
92
90
|
}) }));
|
|
93
91
|
if (withEdges) children$1.push(/* @__PURE__ */ jsx(PaginationEndTrigger, { children: /* @__PURE__ */ jsx(PaginationItem, {
|
|
94
92
|
icon: /* @__PURE__ */ jsx(ChevronsRightIcon, {}),
|
|
95
|
-
...edgeProps,
|
|
96
|
-
...edgeEndProps
|
|
93
|
+
...mergeProps(edgeProps, edgeEndProps)()
|
|
97
94
|
}) }));
|
|
98
95
|
return children$1;
|
|
99
96
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.js","names":["children: ReactNode[]","children","ButtonGroup.Root","PaginationItems: FC<PaginationItemsProps>","ButtonGroup.IconItem"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: boolean\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: boolean\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: PaginationItemProps\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: PaginationItemProps\n /**\n * Props for control button element.\n */\n controlProps?: PaginationItemProps\n /**\n * Props for end of the edge button element.\n */\n edgeEndProps?: PaginationItemProps\n /**\n * Props for edge button element.\n */\n edgeProps?: PaginationItemProps\n /**\n * Props for start of the edge button element.\n */\n edgeStartProps?: PaginationItemProps\n /**\n * Props for ellipsis of the element.\n */\n ellipsisProps?: PaginationItemProps\n /**\n * Props for item of the button element.\n */\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" | \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...edgeProps}\n {...edgeStartProps}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...controlProps}\n {...controlPrevProps}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...controlProps}\n {...controlNextProps}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...edgeProps}\n {...edgeEndProps}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n children?: (page: Page) => ReactNode\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component)) {\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n } else {\n return component\n }\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /**\n * The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n */\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /**\n * The format of the text.\n *\n * @default 'compact'\n */\n format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) {\n return runIfFn(children, { page: currentPage, total })\n } else if (format === \"short\") {\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n } else {\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACE,oBACF,cACA,gBACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACE,cAAc,KAAK;CACvB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMA,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,oBAAC,oCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,oBAAkB;IACzB,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AAEH,cAAS,KACP,oBAAC,mBACC,SAAS,qCACE,KAAK,GACZ,oBAAC;IAAe,GAAI;cAClB,oBAAC,OAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,oBAAC;IACC,IAAG;IACH,MAAM,oBAAC,iBAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI;IACJ,GAAI;KACJ,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,oBAAC,kCACC,oBAAC;IACC,MAAM,oBAAC,sBAAoB;IAC3B,GAAI;IACJ,GAAI;KACJ,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAkB,OAAO;YACxB,oBAACC;GACC,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;AAEtD,QAAO,cAEH,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,MAAI,eAAoC,UAAU,CAChD,QAAO,aAAa,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,YAC5BC,YACA,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAU,sBAAsB;CACrD,MAAM,EAAE,MAAM,QAAQ,aAAa;CACnC,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,mCAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,sBAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuB,sBAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
|
|
1
|
+
{"version":3,"file":"pagination.js","names":["children: ReactNode[]","children","ButtonGroup.Root","PaginationItems: FC<PaginationItemsProps>","ButtonGroup.IconItem"],"sources":["../../../../src/components/pagination/pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, ReactNode } from \"react\"\nimport type {\n HTMLProps,\n HTMLStyledProps,\n ThemeProps,\n WithoutThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { PaginationStyle } from \"./pagination.style\"\nimport type { Page, UsePaginationProps } from \"./use-pagination\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { isNumber, runIfFn } from \"../../utils\"\nimport { ButtonGroup } from \"../button\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronsLeftIcon,\n ChevronsRightIcon,\n EllipsisIcon,\n} from \"../icon\"\nimport { paginationStyle } from \"./pagination.style\"\nimport {\n PaginationContext,\n usePagination,\n usePaginationContext,\n} from \"./use-pagination\"\n\nexport interface PaginationRootProps\n extends\n WithoutThemeProps<\n Omit<ButtonGroup.RootProps, \"onChange\" | \"page\">,\n PaginationStyle\n >,\n ThemeProps<PaginationStyle>,\n Omit<UsePaginationProps, \"boundaries\" | \"siblings\"> {\n /**\n * Number of elements visible on the left/right edges.\n *\n * @default 1\n */\n boundaries?: number\n /** Number of siblings displayed on the left/right side of selected page.\n *\n * @default 1\n */\n siblings?: number\n /**\n * If `true`, display the control buttons.\n *\n * @default true\n */\n withControls?: boolean\n /**\n * If `true`, display the edge buttons.\n *\n * @default false\n */\n withEdges?: boolean\n /**\n * Props for next of the control button element.\n */\n controlNextProps?: PaginationItemProps\n /**\n * Props for previous of the control button element.\n */\n controlPrevProps?: PaginationItemProps\n /**\n * Props for control button element.\n */\n controlProps?: PaginationItemProps\n /**\n * Props for end of the edge button element.\n */\n edgeEndProps?: PaginationItemProps\n /**\n * Props for edge button element.\n */\n edgeProps?: PaginationItemProps\n /**\n * Props for start of the edge button element.\n */\n edgeStartProps?: PaginationItemProps\n /**\n * Props for ellipsis of the element.\n */\n ellipsisProps?: PaginationItemProps\n /**\n * Props for item of the button element.\n */\n itemProps?: PaginationItemProps\n}\n\nconst {\n PropsContext: PaginationPropsContext,\n usePropsContext: usePaginationPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<PaginationRootProps, PaginationStyle>(\n \"pagination\",\n paginationStyle,\n)\n\nexport { PaginationPropsContext, usePaginationPropsContext }\n\n/**\n * `Pagination` is a component for managing the pagination and navigation of content.\n *\n * @see https://yamada-ui.com/docs/components/pagination\n */\nexport const PaginationRoot = withProvider<\n \"nav\",\n PaginationRootProps,\n \"size\" | \"variant\"\n>(\n ({\n size,\n variant,\n children,\n withControls = true,\n withEdges = false,\n controlNextProps,\n controlPrevProps,\n controlProps,\n edgeEndProps,\n edgeProps,\n edgeStartProps,\n ellipsisProps,\n itemProps,\n ...rest\n }) => {\n const {\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getRootProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n } = usePagination(rest)\n const context = useMemo(\n () => ({\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n }),\n [\n currentPage,\n disabled,\n range,\n total,\n getEndTriggerProps,\n getItemProps,\n getNextTriggerProps,\n getPrevTriggerProps,\n getStartTriggerProps,\n onChange,\n onChangeEnd,\n onChangeNext,\n onChangePrev,\n onChangeStart,\n ],\n )\n const computedChildren = useMemo(() => {\n if (children) {\n return children\n } else {\n const children: ReactNode[] = []\n\n if (withEdges)\n children.push(\n <PaginationStartTrigger>\n <PaginationItem\n icon={<ChevronsLeftIcon />}\n {...mergeProps(edgeProps, edgeStartProps)()}\n />\n </PaginationStartTrigger>,\n )\n if (withControls)\n children.push(\n <PaginationPrevTrigger>\n <PaginationItem\n icon={<ChevronLeftIcon />}\n {...mergeProps(controlProps, controlPrevProps)()}\n />\n </PaginationPrevTrigger>,\n )\n\n children.push(\n <PaginationItems\n render={(page) =>\n isNumber(page) ? (\n <PaginationItem {...itemProps}>\n <styled.span role=\"presentation\">{page}</styled.span>\n </PaginationItem>\n ) : (\n <PaginationItem\n as=\"span\"\n icon={<EllipsisIcon />}\n {...ellipsisProps}\n />\n )\n }\n />,\n )\n\n if (withControls)\n children.push(\n <PaginationNextTrigger>\n <PaginationItem\n icon={<ChevronRightIcon />}\n {...mergeProps(controlProps, controlNextProps)()}\n />\n </PaginationNextTrigger>,\n )\n if (withEdges)\n children.push(\n <PaginationEndTrigger>\n <PaginationItem\n icon={<ChevronsRightIcon />}\n {...mergeProps(edgeProps, edgeEndProps)()}\n />\n </PaginationEndTrigger>,\n )\n\n return children\n }\n }, [\n children,\n withEdges,\n withControls,\n itemProps,\n ellipsisProps,\n edgeProps,\n edgeStartProps,\n edgeEndProps,\n controlProps,\n controlPrevProps,\n controlNextProps,\n ])\n\n return (\n <PaginationContext value={context}>\n <ButtonGroup.Root\n as=\"nav\"\n size={size}\n variant={variant}\n {...getRootProps()}\n >\n {computedChildren}\n </ButtonGroup.Root>\n </PaginationContext>\n )\n },\n \"root\",\n { transferProps: [\"variant\", \"size\"] },\n)()\n\nexport interface PaginationItemsProps {\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n children?: (page: Page) => ReactNode\n /**\n * The function used to generate children.\n * it will be called with page number or `\"ellipsis\"`.\n */\n render?: (page: Page) => ReactNode\n}\n\nexport const PaginationItems: FC<PaginationItemsProps> = ({\n children,\n render,\n}) => {\n const { range, getItemProps } = usePaginationContext()\n\n return useMemo(\n () =>\n range.map((page, index) => {\n const component = children?.(page) ?? render?.(page)\n\n if (isValidElement<HTMLProps<\"button\">>(component)) {\n return cloneElement(component, {\n ...getItemProps({ key: index, page, ...component.props }),\n })\n } else {\n return component\n }\n }),\n [children, getItemProps, range, render],\n )\n}\n\nexport interface PaginationItemProps extends ButtonGroup.IconItemProps {}\n\nexport const PaginationItem = withContext<\"button\", PaginationItemProps>(\n ButtonGroup.IconItem,\n \"item\",\n)()\n\nexport interface PaginationTextProps extends Omit<\n HTMLStyledProps<\"span\">,\n \"children\"\n> {\n /**\n * The children of the text.\n * if function, it will be called with `{ page: number; total: number }`.\n */\n children?: ReactNodeOrFunction<{ page: number; total: number }>\n /**\n * The format of the text.\n *\n * @default 'compact'\n */\n format?: \"compact\" | \"short\"\n}\n\nexport const PaginationText = withContext<\"span\", PaginationTextProps>(\n \"span\",\n \"text\",\n)(undefined, ({ children, format = \"compact\", ...rest }) => {\n const { currentPage, total } = usePaginationContext()\n const { t } = useI18n(\"pagination\")\n const computedChildren = useMemo(() => {\n if (children) {\n return runIfFn(children, { page: currentPage, total })\n } else if (format === \"short\") {\n return t(\"{value} / {total}\", {\n total,\n value: currentPage,\n })\n } else {\n return t(\"{value} of {total}\", {\n total,\n value: currentPage,\n })\n }\n }, [children, currentPage, format, total, t])\n\n return {\n ...rest,\n children: computedChildren,\n }\n})\n\nexport interface PaginationStartTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationStartTrigger = withContext<\n \"button\",\n PaginationStartTriggerProps\n>(\"button\", { name: \"StartTrigger\", slot: [\"trigger\", \"start\"] })(\n undefined,\n (props) => {\n const { getStartTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getStartTriggerProps(props) }\n },\n)\n\nexport interface PaginationEndTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationEndTrigger = withContext<\n \"button\",\n PaginationEndTriggerProps\n>(\"button\", { name: \"EndTrigger\", slot: [\"trigger\", \"end\"] })(\n undefined,\n (props) => {\n const { getEndTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getEndTriggerProps(props) }\n },\n)\n\nexport interface PaginationPrevTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationPrevTrigger = withContext<\n \"button\",\n PaginationPrevTriggerProps\n>(\"button\", { name: \"PrevTrigger\", slot: [\"trigger\", \"prev\"] })(\n undefined,\n (props) => {\n const { getPrevTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getPrevTriggerProps(props) }\n },\n)\n\nexport interface PaginationNextTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PaginationNextTrigger = withContext<\n \"button\",\n PaginationNextTriggerProps\n>(\"button\", { name: \"NextTrigger\", slot: [\"trigger\", \"next\"] })(\n undefined,\n (props) => {\n const { getNextTriggerProps } = usePaginationContext()\n\n return { asChild: true, ...getNextTriggerProps(props) }\n },\n)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAM,EACJ,cAAc,wBACd,iBAAiB,2BACjB,aACA,iBACE,oBACF,cACA,gBACD;;;;;;AASD,MAAa,iBAAiB,cAK3B,EACC,MACA,SACA,UACA,eAAe,MACf,YAAY,OACZ,kBACA,kBACA,cACA,cACA,WACA,gBACA,eACA,WACA,GAAG,WACC;CACJ,MAAM,EACJ,aACA,UACA,OACA,OACA,oBACA,cACA,qBACA,qBACA,cACA,sBACA,UACA,aACA,cACA,cACA,kBACE,cAAc,KAAK;CACvB,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,QAAO;OACF;GACL,MAAMA,aAAwB,EAAE;AAEhC,OAAI,UACF,YAAS,KACP,oBAAC,oCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI,WAAW,WAAW,eAAe,EAAE;KAC3C,GACqB,CAC1B;AACH,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,oBAAkB;IACzB,GAAI,WAAW,cAAc,iBAAiB,EAAE;KAChD,GACoB,CACzB;AAEH,cAAS,KACP,oBAAC,mBACC,SAAS,qCACE,KAAK,GACZ,oBAAC;IAAe,GAAI;cAClB,oBAAC,OAAO;KAAK,MAAK;eAAgB;MAAmB;KACtC,GAEjB,oBAAC;IACC,IAAG;IACH,MAAM,oBAAC,iBAAe;IACtB,GAAI;KACJ,GAGN,CACH;AAED,OAAI,aACF,YAAS,KACP,oBAAC,mCACC,oBAAC;IACC,MAAM,oBAAC,qBAAmB;IAC1B,GAAI,WAAW,cAAc,iBAAiB,EAAE;KAChD,GACoB,CACzB;AACH,OAAI,UACF,YAAS,KACP,oBAAC,kCACC,oBAAC;IACC,MAAM,oBAAC,sBAAoB;IAC3B,GAAI,WAAW,WAAW,aAAa,EAAE;KACzC,GACmB,CACxB;AAEH,UAAOC;;IAER;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC;EAAkB,OAAO;YACxB,oBAACC;GACC,IAAG;GACG;GACG;GACT,GAAI,cAAc;aAEjB;IACgB;GACD;GAGxB,QACA,EAAE,eAAe,CAAC,WAAW,OAAO,EAAE,CACvC,EAAE;AAeH,MAAaC,mBAA6C,EACxD,UACA,aACI;CACJ,MAAM,EAAE,OAAO,iBAAiB,sBAAsB;AAEtD,QAAO,cAEH,MAAM,KAAK,MAAM,UAAU;EACzB,MAAM,YAAY,WAAW,KAAK,IAAI,SAAS,KAAK;AAEpD,MAAI,eAAoC,UAAU,CAChD,QAAO,aAAa,WAAW,EAC7B,GAAG,aAAa;GAAE,KAAK;GAAO;GAAM,GAAG,UAAU;GAAO,CAAC,EAC1D,CAAC;MAEF,QAAO;GAET,EACJ;EAAC;EAAU;EAAc;EAAO;EAAO,CACxC;;AAKH,MAAa,iBAAiB,YAC5BC,YACA,OACD,EAAE;AAmBH,MAAa,iBAAiB,YAC5B,QACA,OACD,CAAC,SAAY,EAAE,UAAU,SAAS,WAAW,GAAG,WAAW;CAC1D,MAAM,EAAE,aAAa,UAAU,sBAAsB;CACrD,MAAM,EAAE,MAAM,QAAQ,aAAa;CACnC,MAAM,mBAAmB,cAAc;AACrC,MAAI,SACF,mCAAe,UAAU;GAAE,MAAM;GAAa;GAAO,CAAC;WAC7C,WAAW,QACpB,QAAO,EAAE,qBAAqB;GAC5B;GACA,OAAO;GACR,CAAC;MAEF,QAAO,EAAE,sBAAsB;GAC7B;GACA,OAAO;GACR,CAAC;IAEH;EAAC;EAAU;EAAa;EAAQ;EAAO;EAAE,CAAC;AAE7C,QAAO;EACL,GAAG;EACH,UAAU;EACX;EACD;AAIF,MAAa,yBAAyB,YAGpC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,SACC,UAAU;CACT,MAAM,EAAE,yBAAyB,sBAAsB;AAEvD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EAE3D;AAID,MAAa,uBAAuB,YAGlC,UAAU;CAAE,MAAM;CAAc,MAAM,CAAC,WAAW,MAAM;CAAE,CAAC,CAC3D,SACC,UAAU;CACT,MAAM,EAAE,uBAAuB,sBAAsB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,mBAAmB,MAAM;EAAE;EAEzD;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D;AAID,MAAa,wBAAwB,YAGnC,UAAU;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CAAC,CAC7D,SACC,UAAU;CACT,MAAM,EAAE,wBAAwB,sBAAsB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EAE1D"}
|
|
@@ -9,7 +9,7 @@ import "../collapse/index.js";
|
|
|
9
9
|
import "../../index.js";
|
|
10
10
|
import { AccordionStyle } from "./accordion.style.js";
|
|
11
11
|
import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
|
|
12
|
-
import * as
|
|
12
|
+
import * as react1197 from "react";
|
|
13
13
|
|
|
14
14
|
//#region src/components/accordion/accordion.d.ts
|
|
15
15
|
interface AccordionCallBackProps {
|
|
@@ -33,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
|
|
|
33
33
|
*/
|
|
34
34
|
items?: AccordionItem[];
|
|
35
35
|
}
|
|
36
|
-
declare const AccordionPropsContext:
|
|
36
|
+
declare const AccordionPropsContext: react1197.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
|
|
37
37
|
/**
|
|
38
38
|
* `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
|
|
39
39
|
*
|
|
@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
|
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/accordion/accordion.style.d.ts
|
|
6
|
-
declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "
|
|
6
|
+
declare const accordionStyle: ComponentSlotStyle<"button" | "panel" | "icon" | "item" | "root", CSSPropObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, CSSModifierObject<CSSSlotObject<"button" | "panel" | "icon" | "item" | "root">>, {
|
|
7
7
|
panel: {
|
|
8
8
|
button: {
|
|
9
9
|
rounded: "l2";
|
|
@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
|
|
|
2
2
|
import "../../core/index.js";
|
|
3
3
|
import { Descendant } from "../../hooks/use-descendants/index.js";
|
|
4
4
|
import "../../index.js";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react1185 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/accordion/use-accordion.d.ts
|
|
8
|
-
declare const AccordionDescendantsContext:
|
|
8
|
+
declare const AccordionDescendantsContext: react1185.Context<{
|
|
9
9
|
active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
|
|
10
10
|
count: (props?: Partial<{}> | undefined) => number;
|
|
11
11
|
destroy: () => void;
|
|
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react1147.Context<{
|
|
|
24
24
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
25
25
|
register: (props?: {
|
|
26
26
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
27
|
-
} | undefined) =>
|
|
27
|
+
} | undefined) => react1185.RefCallback<HTMLButtonElement>;
|
|
28
28
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
29
29
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
30
30
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react1147.Context<{
|
|
|
50
50
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
51
51
|
register: (props?: {
|
|
52
52
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
53
|
-
} | undefined) =>
|
|
53
|
+
} | undefined) => react1185.RefCallback<HTMLButtonElement>;
|
|
54
54
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
55
55
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
56
56
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
57
57
|
};
|
|
58
|
-
register:
|
|
58
|
+
register: react1185.RefCallback<HTMLButtonElement>;
|
|
59
59
|
}, useAccordionDescendants: () => {
|
|
60
60
|
active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
|
|
61
61
|
count: (props?: Partial<{}> | undefined) => number;
|
|
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react1147.Context<{
|
|
|
75
75
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
76
76
|
register: (props?: {
|
|
77
77
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
78
|
-
} | undefined) =>
|
|
78
|
+
} | undefined) => react1185.RefCallback<HTMLButtonElement>;
|
|
79
79
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
80
80
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
81
81
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
82
82
|
};
|
|
83
83
|
interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
|
|
84
|
-
declare const AccordionContext:
|
|
84
|
+
declare const AccordionContext: react1185.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
|
|
85
85
|
interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
|
|
86
|
-
declare const AccordionItemContext:
|
|
86
|
+
declare const AccordionItemContext: react1185.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
|
|
87
87
|
interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
|
|
88
88
|
/**
|
|
89
89
|
* The initial index(es) of the accordion item to expand.
|
|
@@ -137,7 +137,7 @@ declare const useAccordion: ({
|
|
|
137
137
|
prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
138
138
|
register: (props?: {
|
|
139
139
|
disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
|
|
140
|
-
} | undefined) =>
|
|
140
|
+
} | undefined) => react1185.RefCallback<HTMLButtonElement>;
|
|
141
141
|
unregister: (node?: HTMLButtonElement | null | undefined) => void;
|
|
142
142
|
value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
|
|
143
143
|
values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
|
|
@@ -145,8 +145,8 @@ declare const useAccordion: ({
|
|
|
145
145
|
focusedIndex: number;
|
|
146
146
|
index: number | number[];
|
|
147
147
|
multiple: boolean | undefined;
|
|
148
|
-
setFocusedIndex:
|
|
149
|
-
setIndex:
|
|
148
|
+
setFocusedIndex: react1185.Dispatch<react1185.SetStateAction<number>>;
|
|
149
|
+
setIndex: react1185.Dispatch<react1185.SetStateAction<number | number[]>>;
|
|
150
150
|
toggle: boolean | undefined;
|
|
151
151
|
getRootProps: PropGetter<"div", undefined, undefined>;
|
|
152
152
|
};
|
|
@@ -7,7 +7,7 @@ import { UsePopupAnimationProps } from "../popover/popover.js";
|
|
|
7
7
|
import "../popover/index.js";
|
|
8
8
|
import { UseActionBarProps } from "./use-action-bar.js";
|
|
9
9
|
import "../../index.js";
|
|
10
|
-
import * as
|
|
10
|
+
import * as react1181 from "react";
|
|
11
11
|
import { PropsWithChildren, ReactNode } from "react";
|
|
12
12
|
|
|
13
13
|
//#region src/components/action-bar/action-bar.d.ts
|
|
@@ -29,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
|
|
|
29
29
|
*/
|
|
30
30
|
onCloseComplete?: () => void;
|
|
31
31
|
}
|
|
32
|
-
declare const ActionBarPropsContext:
|
|
32
|
+
declare const ActionBarPropsContext: react1181.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
|
|
33
33
|
/**
|
|
34
34
|
* `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
|
|
35
35
|
*
|
|
@@ -5,7 +5,7 @@ import { HTMLMotionProps } from "../motion/index.types.js";
|
|
|
5
5
|
import "../motion/index.js";
|
|
6
6
|
import { AiryStyle } from "./airy.style.js";
|
|
7
7
|
import "../../index.js";
|
|
8
|
-
import * as
|
|
8
|
+
import * as react1180 from "react";
|
|
9
9
|
import { ReactNode } from "react";
|
|
10
10
|
|
|
11
11
|
//#region src/components/airy/airy.d.ts
|
|
@@ -57,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
|
|
|
57
57
|
*/
|
|
58
58
|
onChange?: (value: KeyframeIdent) => void;
|
|
59
59
|
}
|
|
60
|
-
declare const AiryPropsContext:
|
|
60
|
+
declare const AiryPropsContext: react1180.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
|
|
61
61
|
/**
|
|
62
62
|
* `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
|
|
63
63
|
*
|
|
@@ -9,7 +9,7 @@ import "../loading/index.js";
|
|
|
9
9
|
import { StatusScheme } from "../status/status.js";
|
|
10
10
|
import "../status/index.js";
|
|
11
11
|
import "../../index.js";
|
|
12
|
-
import * as
|
|
12
|
+
import * as react1179 from "react";
|
|
13
13
|
|
|
14
14
|
//#region src/components/alert/alert.d.ts
|
|
15
15
|
interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
|
|
@@ -20,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
|
|
|
20
20
|
*/
|
|
21
21
|
status?: StatusScheme;
|
|
22
22
|
}
|
|
23
|
-
declare const AlertPropsContext:
|
|
23
|
+
declare const AlertPropsContext: react1179.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
|
|
24
24
|
/**
|
|
25
25
|
* `Alert` is a component that conveys information to the user.
|
|
26
26
|
*
|
|
@@ -5,7 +5,7 @@ import { AlphaSliderStyle } from "./alpha-slider.style.js";
|
|
|
5
5
|
import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
|
|
6
6
|
import "../hue-slider/index.js";
|
|
7
7
|
import "../../index.js";
|
|
8
|
-
import * as
|
|
8
|
+
import * as react241 from "react";
|
|
9
9
|
|
|
10
10
|
//#region src/components/alpha-slider/alpha-slider.d.ts
|
|
11
11
|
interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
|
|
@@ -38,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
|
|
|
38
38
|
*/
|
|
39
39
|
trackProps?: AlphaSliderTrackProps;
|
|
40
40
|
}
|
|
41
|
-
declare const AlphaSliderPropsContext:
|
|
41
|
+
declare const AlphaSliderPropsContext: react241.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
|
|
42
42
|
/**
|
|
43
43
|
* `AlphaSlider` is a component used to allow the user to select color transparency.
|
|
44
44
|
*
|
|
@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
|
|
|
2
2
|
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import "../../index.js";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react1178 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/aspect-ratio/aspect-ratio.d.ts
|
|
8
8
|
interface AspectRatioProps extends HTMLStyledProps {
|
|
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
|
|
|
13
13
|
*/
|
|
14
14
|
ratio?: StyleValue<number>;
|
|
15
15
|
}
|
|
16
|
-
declare const AspectRatioPropsContext:
|
|
16
|
+
declare const AspectRatioPropsContext: react1178.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
|
|
17
17
|
/**
|
|
18
18
|
* `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
|
|
19
19
|
*
|
|
@@ -12,7 +12,7 @@ import { InputGroupRootProps } from "../input/input-group.js";
|
|
|
12
12
|
import "../input/index.js";
|
|
13
13
|
import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
|
|
14
14
|
import "../../index.js";
|
|
15
|
-
import * as
|
|
15
|
+
import * as react985 from "react";
|
|
16
16
|
import { ReactElement, ReactNode } from "react";
|
|
17
17
|
|
|
18
18
|
//#region src/components/autocomplete/autocomplete.d.ts
|
|
@@ -68,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
|
|
|
68
68
|
*/
|
|
69
69
|
rootProps?: InputGroupRootProps;
|
|
70
70
|
}
|
|
71
|
-
declare const AutocompletePropsContext:
|
|
71
|
+
declare const AutocompletePropsContext: react985.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
|
|
72
72
|
/**
|
|
73
73
|
* `Autocomplete` is a component used to display suggestions in response to user text input.
|
|
74
74
|
*
|
|
@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
|
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
|
|
5
5
|
//#region src/components/autocomplete/autocomplete.style.d.ts
|
|
6
|
-
declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "
|
|
6
|
+
declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "indicator" | "root" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "indicator" | "root" | "field" | "valueText" | "empty">>, {
|
|
7
7
|
xs: {
|
|
8
8
|
empty: {
|
|
9
9
|
gap: "1.5";
|
|
@@ -8,7 +8,7 @@ import "../field/index.js";
|
|
|
8
8
|
import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
|
|
9
9
|
import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
|
|
10
10
|
import "../../index.js";
|
|
11
|
-
import * as
|
|
11
|
+
import * as react986 from "react";
|
|
12
12
|
import { ChangeEvent, ReactNode } from "react";
|
|
13
13
|
|
|
14
14
|
//#region src/components/autocomplete/use-autocomplete.d.ts
|
|
@@ -28,7 +28,7 @@ interface AutocompleteFilter {
|
|
|
28
28
|
}
|
|
29
29
|
type AutocompleteMatcher = typeof index_d_exports.match;
|
|
30
30
|
interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
|
|
31
|
-
declare const AutocompleteContext:
|
|
31
|
+
declare const AutocompleteContext: react986.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
|
|
32
32
|
interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
|
|
33
33
|
/**
|
|
34
34
|
* If `true`, the autocomplete will allow custom value.
|
|
@@ -156,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
|
|
|
156
156
|
lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
157
157
|
nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
158
158
|
prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
159
|
-
register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) =>
|
|
159
|
+
register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react986.RefCallback<HTMLDivElement>;
|
|
160
160
|
unregister: (node?: HTMLDivElement | null | undefined) => void;
|
|
161
161
|
value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
|
|
162
162
|
values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
|
|
@@ -166,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
|
|
|
166
166
|
items: ComboboxItem[];
|
|
167
167
|
max: number | undefined;
|
|
168
168
|
open: boolean;
|
|
169
|
-
setInputValue:
|
|
170
|
-
setValue:
|
|
169
|
+
setInputValue: react986.Dispatch<react986.SetStateAction<string>>;
|
|
170
|
+
setValue: react986.Dispatch<react986.SetStateAction<Multiple extends true ? string[] : string>>;
|
|
171
171
|
value: Multiple extends true ? string[] : string;
|
|
172
172
|
valueMap: {
|
|
173
173
|
[key: string]: ComboboxItemWithValue;
|
|
@@ -6,9 +6,9 @@ import "../../core/index.js";
|
|
|
6
6
|
import { AvatarStyle } from "./avatar.style.js";
|
|
7
7
|
import { UseAvatarProps } from "./use-avatar.js";
|
|
8
8
|
import "../../index.js";
|
|
9
|
-
import * as
|
|
9
|
+
import * as react1173 from "react";
|
|
10
10
|
import { ReactElement } from "react";
|
|
11
|
-
import * as
|
|
11
|
+
import * as _yamada_ui_utils18 from "@yamada-ui/utils";
|
|
12
12
|
|
|
13
13
|
//#region src/components/avatar/avatar.d.ts
|
|
14
14
|
interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
|
|
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
|
|
|
25
25
|
*/
|
|
26
26
|
imageProps?: AvatarImageProps;
|
|
27
27
|
}
|
|
28
|
-
declare const component: <H extends "fragment" | As = "div", R extends
|
|
28
|
+
declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils18.Dict = _yamada_ui_utils18.Dict<any>>(el: H | react1173.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
|
|
29
29
|
shape: {
|
|
30
30
|
circle: {
|
|
31
31
|
root: {
|
|
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
|
|
|
148
148
|
name,
|
|
149
149
|
className,
|
|
150
150
|
...options
|
|
151
|
-
}?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ?
|
|
151
|
+
}?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react1173.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1173.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils18.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
|
|
152
152
|
shape: {
|
|
153
153
|
circle: {
|
|
154
154
|
root: {
|
|
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
|
|
|
271
271
|
className,
|
|
272
272
|
withContext,
|
|
273
273
|
transferProps
|
|
274
|
-
}?: UseComponentPropsOptions<R>) => [CSSSlotObject,
|
|
274
|
+
}?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils18.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
|
|
275
275
|
shape: {
|
|
276
276
|
circle: {
|
|
277
277
|
root: {
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
|
|
|
2
2
|
import "../../index.js";
|
|
3
3
|
|
|
4
4
|
//#region src/components/avatar/avatar.style.d.ts
|
|
5
|
-
declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "
|
|
5
|
+
declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
|
|
6
6
|
/**
|
|
7
7
|
* The shape of the component
|
|
8
8
|
*
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
|
|
2
2
|
import "../../core/index.js";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react1176 from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/components/avatar/use-avatar-group.d.ts
|
|
6
6
|
interface UseAvatarGroupProps extends HTMLProps {
|
|
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
|
|
|
19
19
|
reverse,
|
|
20
20
|
...rest
|
|
21
21
|
}?: UseAvatarGroupProps) => {
|
|
22
|
-
children:
|
|
22
|
+
children: react1176.ReactElement<any, string | react1176.JSXElementConstructor<any>>[];
|
|
23
23
|
excess: number;
|
|
24
24
|
getRootProps: PropGetter<"div", undefined, undefined>;
|
|
25
25
|
};
|
|
@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
|
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import { BadgeStyle } from "./badge.style.js";
|
|
5
5
|
import "../../index.js";
|
|
6
|
-
import * as
|
|
6
|
+
import * as react1172 from "react";
|
|
7
7
|
|
|
8
8
|
//#region src/components/badge/badge.d.ts
|
|
9
9
|
interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
|
|
10
|
-
declare const BadgePropsContext:
|
|
10
|
+
declare const BadgePropsContext: react1172.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
|
|
11
11
|
/**
|
|
12
12
|
* `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
|
|
13
13
|
*
|
|
@@ -2,7 +2,7 @@ import { CSSProps } from "../../core/css/index.types.js";
|
|
|
2
2
|
import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
|
|
3
3
|
import "../../core/index.js";
|
|
4
4
|
import "../../index.js";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react1171 from "react";
|
|
6
6
|
|
|
7
7
|
//#region src/components/bleed/bleed.d.ts
|
|
8
8
|
interface BleedProps extends HTMLStyledProps {
|
|
@@ -31,7 +31,7 @@ interface BleedProps extends HTMLStyledProps {
|
|
|
31
31
|
*/
|
|
32
32
|
inlineStart?: "full" | CSSProps["marginInlineStart"];
|
|
33
33
|
}
|
|
34
|
-
declare const BleedPropsContext:
|
|
34
|
+
declare const BleedPropsContext: react1171.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
|
|
35
35
|
/**
|
|
36
36
|
* `Bleed` is a component used to break an element from the boundaries of its container.
|
|
37
37
|
*
|