@cimpress-ui/react 0.0.0-20250203144600
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/LICENSE +201 -0
- package/README.md +21 -0
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.d.ts +19 -0
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.d.ts.map +1 -0
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.js +32 -0
- package/dist/commonjs/components/breadcrumbs/breadcrumbs.js.map +1 -0
- package/dist/commonjs/components/button/button.d.ts +11 -0
- package/dist/commonjs/components/button/button.d.ts.map +1 -0
- package/dist/commonjs/components/button/button.js +31 -0
- package/dist/commonjs/components/button/button.js.map +1 -0
- package/dist/commonjs/components/button/constants.d.ts +3 -0
- package/dist/commonjs/components/button/constants.d.ts.map +1 -0
- package/dist/commonjs/components/button/constants.js +9 -0
- package/dist/commonjs/components/button/constants.js.map +1 -0
- package/dist/commonjs/components/button/icon-button.d.ts +11 -0
- package/dist/commonjs/components/button/icon-button.d.ts.map +1 -0
- package/dist/commonjs/components/button/icon-button.js +31 -0
- package/dist/commonjs/components/button/icon-button.js.map +1 -0
- package/dist/commonjs/components/button/icon-link-button.d.ts +13 -0
- package/dist/commonjs/components/button/icon-link-button.d.ts.map +1 -0
- package/dist/commonjs/components/button/icon-link-button.js +23 -0
- package/dist/commonjs/components/button/icon-link-button.js.map +1 -0
- package/dist/commonjs/components/button/link-button.d.ts +13 -0
- package/dist/commonjs/components/button/link-button.d.ts.map +1 -0
- package/dist/commonjs/components/button/link-button.js +23 -0
- package/dist/commonjs/components/button/link-button.js.map +1 -0
- package/dist/commonjs/components/button/types.d.ts +68 -0
- package/dist/commonjs/components/button/types.d.ts.map +1 -0
- package/dist/commonjs/components/button/types.js +3 -0
- package/dist/commonjs/components/button/types.js.map +1 -0
- package/dist/commonjs/components/card/card-context.d.ts +4 -0
- package/dist/commonjs/components/card/card-context.d.ts.map +1 -0
- package/dist/commonjs/components/card/card-context.js +6 -0
- package/dist/commonjs/components/card/card-context.js.map +1 -0
- package/dist/commonjs/components/card/card.d.ts +15 -0
- package/dist/commonjs/components/card/card.d.ts.map +1 -0
- package/dist/commonjs/components/card/card.js +24 -0
- package/dist/commonjs/components/card/card.js.map +1 -0
- package/dist/commonjs/components/checkbox/checkbox-group.d.ts +21 -0
- package/dist/commonjs/components/checkbox/checkbox-group.d.ts.map +1 -0
- package/dist/commonjs/components/checkbox/checkbox-group.js +37 -0
- package/dist/commonjs/components/checkbox/checkbox-group.js.map +1 -0
- package/dist/commonjs/components/checkbox/checkbox.d.ts +14 -0
- package/dist/commonjs/components/checkbox/checkbox.d.ts.map +1 -0
- package/dist/commonjs/components/checkbox/checkbox.js +32 -0
- package/dist/commonjs/components/checkbox/checkbox.js.map +1 -0
- package/dist/commonjs/components/combo-box/combo-box.d.ts +38 -0
- package/dist/commonjs/components/combo-box/combo-box.d.ts.map +1 -0
- package/dist/commonjs/components/combo-box/combo-box.js +60 -0
- package/dist/commonjs/components/combo-box/combo-box.js.map +1 -0
- package/dist/commonjs/components/disclosure/disclosure-group.d.ts +10 -0
- package/dist/commonjs/components/disclosure/disclosure-group.d.ts.map +1 -0
- package/dist/commonjs/components/disclosure/disclosure-group.js +18 -0
- package/dist/commonjs/components/disclosure/disclosure-group.js.map +1 -0
- package/dist/commonjs/components/disclosure/disclosure.d.ts +14 -0
- package/dist/commonjs/components/disclosure/disclosure.d.ts.map +1 -0
- package/dist/commonjs/components/disclosure/disclosure.js +20 -0
- package/dist/commonjs/components/disclosure/disclosure.js.map +1 -0
- package/dist/commonjs/components/form/form.d.ts +12 -0
- package/dist/commonjs/components/form/form.d.ts.map +1 -0
- package/dist/commonjs/components/form/form.js +23 -0
- package/dist/commonjs/components/form/form.js.map +1 -0
- package/dist/commonjs/components/internal/collapsible-list/collapsible-list.d.ts +2 -0
- package/dist/commonjs/components/internal/collapsible-list/collapsible-list.d.ts.map +1 -0
- package/dist/commonjs/components/internal/collapsible-list/collapsible-list.js +15 -0
- package/dist/commonjs/components/internal/collapsible-list/collapsible-list.js.map +1 -0
- package/dist/commonjs/components/internal/form-field/form-field.d.ts +2 -0
- package/dist/commonjs/components/internal/form-field/form-field.d.ts.map +1 -0
- package/dist/commonjs/components/internal/form-field/form-field.js +66 -0
- package/dist/commonjs/components/internal/form-field/form-field.js.map +1 -0
- package/dist/commonjs/components/internal/spinner/spinner.d.ts +2 -0
- package/dist/commonjs/components/internal/spinner/spinner.d.ts.map +1 -0
- package/dist/commonjs/components/internal/spinner/spinner.js +19 -0
- package/dist/commonjs/components/internal/spinner/spinner.js.map +1 -0
- package/dist/commonjs/components/menu/menu.d.ts +49 -0
- package/dist/commonjs/components/menu/menu.d.ts.map +1 -0
- package/dist/commonjs/components/menu/menu.js +66 -0
- package/dist/commonjs/components/menu/menu.js.map +1 -0
- package/dist/commonjs/components/modal/modal.d.ts +19 -0
- package/dist/commonjs/components/modal/modal.d.ts.map +1 -0
- package/dist/commonjs/components/modal/modal.js +25 -0
- package/dist/commonjs/components/modal/modal.js.map +1 -0
- package/dist/commonjs/components/nav-tabs/nav-tabs.d.ts +23 -0
- package/dist/commonjs/components/nav-tabs/nav-tabs.d.ts.map +1 -0
- package/dist/commonjs/components/nav-tabs/nav-tabs.js +27 -0
- package/dist/commonjs/components/nav-tabs/nav-tabs.js.map +1 -0
- package/dist/commonjs/components/number-field/number-field.d.ts +10 -0
- package/dist/commonjs/components/number-field/number-field.d.ts.map +1 -0
- package/dist/commonjs/components/number-field/number-field.js +32 -0
- package/dist/commonjs/components/number-field/number-field.js.map +1 -0
- package/dist/commonjs/components/pagination/pagination.d.ts +14 -0
- package/dist/commonjs/components/pagination/pagination.d.ts.map +1 -0
- package/dist/commonjs/components/pagination/pagination.js +69 -0
- package/dist/commonjs/components/pagination/pagination.js.map +1 -0
- package/dist/commonjs/components/radio/radio-group.d.ts +21 -0
- package/dist/commonjs/components/radio/radio-group.d.ts.map +1 -0
- package/dist/commonjs/components/radio/radio-group.js +37 -0
- package/dist/commonjs/components/radio/radio-group.js.map +1 -0
- package/dist/commonjs/components/radio/radio.d.ts +14 -0
- package/dist/commonjs/components/radio/radio.d.ts.map +1 -0
- package/dist/commonjs/components/radio/radio.js +31 -0
- package/dist/commonjs/components/radio/radio.js.map +1 -0
- package/dist/commonjs/components/select/select.d.ts +31 -0
- package/dist/commonjs/components/select/select.d.ts.map +1 -0
- package/dist/commonjs/components/select/select.js +53 -0
- package/dist/commonjs/components/select/select.js.map +1 -0
- package/dist/commonjs/components/spacing/box/box.d.ts +10 -0
- package/dist/commonjs/components/spacing/box/box.d.ts.map +1 -0
- package/dist/commonjs/components/spacing/box/box.js +14 -0
- package/dist/commonjs/components/spacing/box/box.js.map +1 -0
- package/dist/commonjs/components/spacing/stack/stack.d.ts +35 -0
- package/dist/commonjs/components/spacing/stack/stack.d.ts.map +1 -0
- package/dist/commonjs/components/spacing/stack/stack.js +31 -0
- package/dist/commonjs/components/spacing/stack/stack.js.map +1 -0
- package/dist/commonjs/components/spacing/types.d.ts +32 -0
- package/dist/commonjs/components/spacing/types.d.ts.map +1 -0
- package/dist/commonjs/components/spacing/types.js +46 -0
- package/dist/commonjs/components/spacing/types.js.map +1 -0
- package/dist/commonjs/components/spinner/spinner.d.ts +16 -0
- package/dist/commonjs/components/spinner/spinner.d.ts.map +1 -0
- package/dist/commonjs/components/spinner/spinner.js +38 -0
- package/dist/commonjs/components/spinner/spinner.js.map +1 -0
- package/dist/commonjs/components/table/contexts/focus.d.ts +11 -0
- package/dist/commonjs/components/table/contexts/focus.d.ts.map +1 -0
- package/dist/commonjs/components/table/contexts/focus.js +42 -0
- package/dist/commonjs/components/table/contexts/focus.js.map +1 -0
- package/dist/commonjs/components/table/contexts/row-state.d.ts +10 -0
- package/dist/commonjs/components/table/contexts/row-state.d.ts.map +1 -0
- package/dist/commonjs/components/table/contexts/row-state.js +22 -0
- package/dist/commonjs/components/table/contexts/row-state.js.map +1 -0
- package/dist/commonjs/components/table/hooks/use-table-cell.d.ts +7 -0
- package/dist/commonjs/components/table/hooks/use-table-cell.d.ts.map +1 -0
- package/dist/commonjs/components/table/hooks/use-table-cell.js +27 -0
- package/dist/commonjs/components/table/hooks/use-table-cell.js.map +1 -0
- package/dist/commonjs/components/table/hooks/use-table.d.ts +7 -0
- package/dist/commonjs/components/table/hooks/use-table.d.ts.map +1 -0
- package/dist/commonjs/components/table/hooks/use-table.js +114 -0
- package/dist/commonjs/components/table/hooks/use-table.js.map +1 -0
- package/dist/commonjs/components/table/table-body-cell.d.ts +26 -0
- package/dist/commonjs/components/table/table-body-cell.d.ts.map +1 -0
- package/dist/commonjs/components/table/table-body-cell.js +17 -0
- package/dist/commonjs/components/table/table-body-cell.js.map +1 -0
- package/dist/commonjs/components/table/table-body.d.ts +8 -0
- package/dist/commonjs/components/table/table-body.d.ts.map +1 -0
- package/dist/commonjs/components/table/table-body.js +11 -0
- package/dist/commonjs/components/table/table-body.js.map +1 -0
- package/dist/commonjs/components/table/table-container.d.ts +8 -0
- package/dist/commonjs/components/table/table-container.d.ts.map +1 -0
- package/dist/commonjs/components/table/table-container.js +16 -0
- package/dist/commonjs/components/table/table-container.js.map +1 -0
- package/dist/commonjs/components/table/table-header-cell.d.ts +26 -0
- package/dist/commonjs/components/table/table-header-cell.d.ts.map +1 -0
- package/dist/commonjs/components/table/table-header-cell.js +17 -0
- package/dist/commonjs/components/table/table-header-cell.js.map +1 -0
- package/dist/commonjs/components/table/table-header.d.ts +8 -0
- package/dist/commonjs/components/table/table-header.d.ts.map +1 -0
- package/dist/commonjs/components/table/table-header.js +11 -0
- package/dist/commonjs/components/table/table-header.js.map +1 -0
- package/dist/commonjs/components/table/table-row.d.ts +21 -0
- package/dist/commonjs/components/table/table-row.d.ts.map +1 -0
- package/dist/commonjs/components/table/table-row.js +14 -0
- package/dist/commonjs/components/table/table-row.js.map +1 -0
- package/dist/commonjs/components/table/table.d.ts +26 -0
- package/dist/commonjs/components/table/table.d.ts.map +1 -0
- package/dist/commonjs/components/table/table.js +27 -0
- package/dist/commonjs/components/table/table.js.map +1 -0
- package/dist/commonjs/components/tag/tag-group.d.ts +16 -0
- package/dist/commonjs/components/tag/tag-group.d.ts.map +1 -0
- package/dist/commonjs/components/tag/tag-group.js +27 -0
- package/dist/commonjs/components/tag/tag-group.js.map +1 -0
- package/dist/commonjs/components/tag/tag.d.ts +13 -0
- package/dist/commonjs/components/tag/tag.d.ts.map +1 -0
- package/dist/commonjs/components/tag/tag.js +21 -0
- package/dist/commonjs/components/tag/tag.js.map +1 -0
- package/dist/commonjs/components/text-inputs/text-area.d.ts +8 -0
- package/dist/commonjs/components/text-inputs/text-area.d.ts.map +1 -0
- package/dist/commonjs/components/text-inputs/text-area.js +29 -0
- package/dist/commonjs/components/text-inputs/text-area.js.map +1 -0
- package/dist/commonjs/components/text-inputs/text-field.d.ts +12 -0
- package/dist/commonjs/components/text-inputs/text-field.d.ts.map +1 -0
- package/dist/commonjs/components/text-inputs/text-field.js +32 -0
- package/dist/commonjs/components/text-inputs/text-field.js.map +1 -0
- package/dist/commonjs/components/tooltip/tooltip.d.ts +9 -0
- package/dist/commonjs/components/tooltip/tooltip.d.ts.map +1 -0
- package/dist/commonjs/components/tooltip/tooltip.js +15 -0
- package/dist/commonjs/components/tooltip/tooltip.js.map +1 -0
- package/dist/commonjs/components/types.d.ts +156 -0
- package/dist/commonjs/components/types.d.ts.map +1 -0
- package/dist/commonjs/components/types.js +3 -0
- package/dist/commonjs/components/types.js.map +1 -0
- package/dist/commonjs/components/typography/link.d.ts +18 -0
- package/dist/commonjs/components/typography/link.d.ts.map +1 -0
- package/dist/commonjs/components/typography/link.js +26 -0
- package/dist/commonjs/components/typography/link.js.map +1 -0
- package/dist/commonjs/components/typography/text.d.ts +15 -0
- package/dist/commonjs/components/typography/text.d.ts.map +1 -0
- package/dist/commonjs/components/typography/text.js +28 -0
- package/dist/commonjs/components/typography/text.js.map +1 -0
- package/dist/commonjs/components/typography/types.d.ts +23 -0
- package/dist/commonjs/components/typography/types.d.ts.map +1 -0
- package/dist/commonjs/components/typography/types.js +3 -0
- package/dist/commonjs/components/typography/types.js.map +1 -0
- package/dist/commonjs/components/typography/utils.d.ts +4 -0
- package/dist/commonjs/components/typography/utils.d.ts.map +1 -0
- package/dist/commonjs/components/typography/utils.js +18 -0
- package/dist/commonjs/components/typography/utils.js.map +1 -0
- package/dist/commonjs/components/visually-hidden/visually-hidden.d.ts +17 -0
- package/dist/commonjs/components/visually-hidden/visually-hidden.d.ts.map +1 -0
- package/dist/commonjs/components/visually-hidden/visually-hidden.js +20 -0
- package/dist/commonjs/components/visually-hidden/visually-hidden.js.map +1 -0
- package/dist/commonjs/forward-ref.d.ts +3 -0
- package/dist/commonjs/forward-ref.d.ts.map +1 -0
- package/dist/commonjs/forward-ref.js +21 -0
- package/dist/commonjs/forward-ref.js.map +1 -0
- package/dist/commonjs/icons/accounting-document.d.ts +8 -0
- package/dist/commonjs/icons/accounting-document.d.ts.map +1 -0
- package/dist/commonjs/icons/accounting-document.js +24 -0
- package/dist/commonjs/icons/accounting-document.js.map +1 -0
- package/dist/commonjs/icons/add-circle-fill.d.ts +8 -0
- package/dist/commonjs/icons/add-circle-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/add-circle-fill.js +24 -0
- package/dist/commonjs/icons/add-circle-fill.js.map +1 -0
- package/dist/commonjs/icons/add-circle.d.ts +8 -0
- package/dist/commonjs/icons/add-circle.d.ts.map +1 -0
- package/dist/commonjs/icons/add-circle.js +24 -0
- package/dist/commonjs/icons/add-circle.js.map +1 -0
- package/dist/commonjs/icons/add.d.ts +8 -0
- package/dist/commonjs/icons/add.d.ts.map +1 -0
- package/dist/commonjs/icons/add.js +24 -0
- package/dist/commonjs/icons/add.js.map +1 -0
- package/dist/commonjs/icons/alert-triangle.d.ts +8 -0
- package/dist/commonjs/icons/alert-triangle.d.ts.map +1 -0
- package/dist/commonjs/icons/alert-triangle.js +24 -0
- package/dist/commonjs/icons/alert-triangle.js.map +1 -0
- package/dist/commonjs/icons/calculator-alt.d.ts +8 -0
- package/dist/commonjs/icons/calculator-alt.d.ts.map +1 -0
- package/dist/commonjs/icons/calculator-alt.js +24 -0
- package/dist/commonjs/icons/calculator-alt.js.map +1 -0
- package/dist/commonjs/icons/calculator.d.ts +8 -0
- package/dist/commonjs/icons/calculator.d.ts.map +1 -0
- package/dist/commonjs/icons/calculator.js +24 -0
- package/dist/commonjs/icons/calculator.js.map +1 -0
- package/dist/commonjs/icons/checkmark-circle-fill.d.ts +8 -0
- package/dist/commonjs/icons/checkmark-circle-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/checkmark-circle-fill.js +24 -0
- package/dist/commonjs/icons/checkmark-circle-fill.js.map +1 -0
- package/dist/commonjs/icons/checkmark-circle.d.ts +8 -0
- package/dist/commonjs/icons/checkmark-circle.d.ts.map +1 -0
- package/dist/commonjs/icons/checkmark-circle.js +24 -0
- package/dist/commonjs/icons/checkmark-circle.js.map +1 -0
- package/dist/commonjs/icons/checkmark-small.d.ts +8 -0
- package/dist/commonjs/icons/checkmark-small.d.ts.map +1 -0
- package/dist/commonjs/icons/checkmark-small.js +24 -0
- package/dist/commonjs/icons/checkmark-small.js.map +1 -0
- package/dist/commonjs/icons/checkmark.d.ts +8 -0
- package/dist/commonjs/icons/checkmark.d.ts.map +1 -0
- package/dist/commonjs/icons/checkmark.js +24 -0
- package/dist/commonjs/icons/checkmark.js.map +1 -0
- package/dist/commonjs/icons/chevron-down-fill.d.ts +8 -0
- package/dist/commonjs/icons/chevron-down-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/chevron-down-fill.js +24 -0
- package/dist/commonjs/icons/chevron-down-fill.js.map +1 -0
- package/dist/commonjs/icons/error-circle-fill.d.ts +8 -0
- package/dist/commonjs/icons/error-circle-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/error-circle-fill.js +24 -0
- package/dist/commonjs/icons/error-circle-fill.js.map +1 -0
- package/dist/commonjs/icons/index.d.ts +24 -0
- package/dist/commonjs/icons/index.d.ts.map +1 -0
- package/dist/commonjs/icons/index.js +51 -0
- package/dist/commonjs/icons/index.js.map +1 -0
- package/dist/commonjs/icons/info-circle-fill.d.ts +8 -0
- package/dist/commonjs/icons/info-circle-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/info-circle-fill.js +24 -0
- package/dist/commonjs/icons/info-circle-fill.js.map +1 -0
- package/dist/commonjs/icons/minus-small.d.ts +8 -0
- package/dist/commonjs/icons/minus-small.d.ts.map +1 -0
- package/dist/commonjs/icons/minus-small.js +24 -0
- package/dist/commonjs/icons/minus-small.js.map +1 -0
- package/dist/commonjs/icons/minus.d.ts +8 -0
- package/dist/commonjs/icons/minus.d.ts.map +1 -0
- package/dist/commonjs/icons/minus.js +24 -0
- package/dist/commonjs/icons/minus.js.map +1 -0
- package/dist/commonjs/icons/unstable-chevron-left-fill.d.ts +8 -0
- package/dist/commonjs/icons/unstable-chevron-left-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/unstable-chevron-left-fill.js +24 -0
- package/dist/commonjs/icons/unstable-chevron-left-fill.js.map +1 -0
- package/dist/commonjs/icons/unstable-chevron-right-fill.d.ts +8 -0
- package/dist/commonjs/icons/unstable-chevron-right-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/unstable-chevron-right-fill.js +24 -0
- package/dist/commonjs/icons/unstable-chevron-right-fill.js.map +1 -0
- package/dist/commonjs/icons/unstable-close.d.ts +8 -0
- package/dist/commonjs/icons/unstable-close.d.ts.map +1 -0
- package/dist/commonjs/icons/unstable-close.js +24 -0
- package/dist/commonjs/icons/unstable-close.js.map +1 -0
- package/dist/commonjs/icons/unstable-info-circle.d.ts +8 -0
- package/dist/commonjs/icons/unstable-info-circle.d.ts.map +1 -0
- package/dist/commonjs/icons/unstable-info-circle.js +24 -0
- package/dist/commonjs/icons/unstable-info-circle.js.map +1 -0
- package/dist/commonjs/icons/unstable-placeholder.d.ts +8 -0
- package/dist/commonjs/icons/unstable-placeholder.d.ts.map +1 -0
- package/dist/commonjs/icons/unstable-placeholder.js +24 -0
- package/dist/commonjs/icons/unstable-placeholder.js.map +1 -0
- package/dist/commonjs/icons/warning-circle-fill.d.ts +8 -0
- package/dist/commonjs/icons/warning-circle-fill.d.ts.map +1 -0
- package/dist/commonjs/icons/warning-circle-fill.js +24 -0
- package/dist/commonjs/icons/warning-circle-fill.js.map +1 -0
- package/dist/commonjs/index.d.ts +45 -0
- package/dist/commonjs/index.d.ts.map +1 -0
- package/dist/commonjs/index.js +58 -0
- package/dist/commonjs/index.js.map +1 -0
- package/dist/commonjs/package.json +3 -0
- package/dist/commonjs/providers/router/router-provider.d.ts +20 -0
- package/dist/commonjs/providers/router/router-provider.d.ts.map +1 -0
- package/dist/commonjs/providers/router/router-provider.js +15 -0
- package/dist/commonjs/providers/router/router-provider.js.map +1 -0
- package/dist/commonjs/providers/ssr/ssr-provider.d.ts +17 -0
- package/dist/commonjs/providers/ssr/ssr-provider.d.ts.map +1 -0
- package/dist/commonjs/providers/ssr/ssr-provider.js +20 -0
- package/dist/commonjs/providers/ssr/ssr-provider.js.map +1 -0
- package/dist/commonjs/utils/style/tone.d.ts +3 -0
- package/dist/commonjs/utils/style/tone.d.ts.map +1 -0
- package/dist/commonjs/utils/style/tone.js +7 -0
- package/dist/commonjs/utils/style/tone.js.map +1 -0
- package/dist/commonjs/utils/style/types.d.ts +2 -0
- package/dist/commonjs/utils/style/types.d.ts.map +1 -0
- package/dist/commonjs/utils/style/types.js +3 -0
- package/dist/commonjs/utils/style/types.js.map +1 -0
- package/dist/commonjs/with-style-props.d.ts +21 -0
- package/dist/commonjs/with-style-props.d.ts.map +1 -0
- package/dist/commonjs/with-style-props.js +29 -0
- package/dist/commonjs/with-style-props.js.map +1 -0
- package/dist/esm/components/breadcrumbs/breadcrumbs.d.ts +19 -0
- package/dist/esm/components/breadcrumbs/breadcrumbs.d.ts.map +1 -0
- package/dist/esm/components/breadcrumbs/breadcrumbs.js +25 -0
- package/dist/esm/components/breadcrumbs/breadcrumbs.js.map +1 -0
- package/dist/esm/components/button/button.d.ts +11 -0
- package/dist/esm/components/button/button.d.ts.map +1 -0
- package/dist/esm/components/button/button.js +25 -0
- package/dist/esm/components/button/button.js.map +1 -0
- package/dist/esm/components/button/constants.d.ts +3 -0
- package/dist/esm/components/button/constants.d.ts.map +1 -0
- package/dist/esm/components/button/constants.js +6 -0
- package/dist/esm/components/button/constants.js.map +1 -0
- package/dist/esm/components/button/icon-button.d.ts +11 -0
- package/dist/esm/components/button/icon-button.d.ts.map +1 -0
- package/dist/esm/components/button/icon-button.js +25 -0
- package/dist/esm/components/button/icon-button.js.map +1 -0
- package/dist/esm/components/button/icon-link-button.d.ts +13 -0
- package/dist/esm/components/button/icon-link-button.d.ts.map +1 -0
- package/dist/esm/components/button/icon-link-button.js +17 -0
- package/dist/esm/components/button/icon-link-button.js.map +1 -0
- package/dist/esm/components/button/link-button.d.ts +13 -0
- package/dist/esm/components/button/link-button.d.ts.map +1 -0
- package/dist/esm/components/button/link-button.js +17 -0
- package/dist/esm/components/button/link-button.js.map +1 -0
- package/dist/esm/components/button/types.d.ts +68 -0
- package/dist/esm/components/button/types.d.ts.map +1 -0
- package/dist/esm/components/button/types.js +2 -0
- package/dist/esm/components/button/types.js.map +1 -0
- package/dist/esm/components/card/card-context.d.ts +4 -0
- package/dist/esm/components/card/card-context.d.ts.map +1 -0
- package/dist/esm/components/card/card-context.js +3 -0
- package/dist/esm/components/card/card-context.js.map +1 -0
- package/dist/esm/components/card/card.d.ts +15 -0
- package/dist/esm/components/card/card.d.ts.map +1 -0
- package/dist/esm/components/card/card.js +17 -0
- package/dist/esm/components/card/card.js.map +1 -0
- package/dist/esm/components/checkbox/checkbox-group.d.ts +21 -0
- package/dist/esm/components/checkbox/checkbox-group.d.ts.map +1 -0
- package/dist/esm/components/checkbox/checkbox-group.js +31 -0
- package/dist/esm/components/checkbox/checkbox-group.js.map +1 -0
- package/dist/esm/components/checkbox/checkbox.d.ts +14 -0
- package/dist/esm/components/checkbox/checkbox.d.ts.map +1 -0
- package/dist/esm/components/checkbox/checkbox.js +26 -0
- package/dist/esm/components/checkbox/checkbox.js.map +1 -0
- package/dist/esm/components/combo-box/combo-box.d.ts +38 -0
- package/dist/esm/components/combo-box/combo-box.d.ts.map +1 -0
- package/dist/esm/components/combo-box/combo-box.js +52 -0
- package/dist/esm/components/combo-box/combo-box.js.map +1 -0
- package/dist/esm/components/disclosure/disclosure-group.d.ts +10 -0
- package/dist/esm/components/disclosure/disclosure-group.d.ts.map +1 -0
- package/dist/esm/components/disclosure/disclosure-group.js +12 -0
- package/dist/esm/components/disclosure/disclosure-group.js.map +1 -0
- package/dist/esm/components/disclosure/disclosure.d.ts +14 -0
- package/dist/esm/components/disclosure/disclosure.d.ts.map +1 -0
- package/dist/esm/components/disclosure/disclosure.js +14 -0
- package/dist/esm/components/disclosure/disclosure.js.map +1 -0
- package/dist/esm/components/form/form.d.ts +12 -0
- package/dist/esm/components/form/form.d.ts.map +1 -0
- package/dist/esm/components/form/form.js +17 -0
- package/dist/esm/components/form/form.js.map +1 -0
- package/dist/esm/components/internal/collapsible-list/collapsible-list.d.ts +2 -0
- package/dist/esm/components/internal/collapsible-list/collapsible-list.d.ts.map +1 -0
- package/dist/esm/components/internal/collapsible-list/collapsible-list.js +12 -0
- package/dist/esm/components/internal/collapsible-list/collapsible-list.js.map +1 -0
- package/dist/esm/components/internal/form-field/form-field.d.ts +2 -0
- package/dist/esm/components/internal/form-field/form-field.d.ts.map +1 -0
- package/dist/esm/components/internal/form-field/form-field.js +57 -0
- package/dist/esm/components/internal/form-field/form-field.js.map +1 -0
- package/dist/esm/components/internal/spinner/spinner.d.ts +2 -0
- package/dist/esm/components/internal/spinner/spinner.d.ts.map +1 -0
- package/dist/esm/components/internal/spinner/spinner.js +14 -0
- package/dist/esm/components/internal/spinner/spinner.js.map +1 -0
- package/dist/esm/components/menu/menu.d.ts +49 -0
- package/dist/esm/components/menu/menu.d.ts.map +1 -0
- package/dist/esm/components/menu/menu.js +57 -0
- package/dist/esm/components/menu/menu.js.map +1 -0
- package/dist/esm/components/modal/modal.d.ts +19 -0
- package/dist/esm/components/modal/modal.d.ts.map +1 -0
- package/dist/esm/components/modal/modal.js +18 -0
- package/dist/esm/components/modal/modal.js.map +1 -0
- package/dist/esm/components/nav-tabs/nav-tabs.d.ts +23 -0
- package/dist/esm/components/nav-tabs/nav-tabs.d.ts.map +1 -0
- package/dist/esm/components/nav-tabs/nav-tabs.js +20 -0
- package/dist/esm/components/nav-tabs/nav-tabs.js.map +1 -0
- package/dist/esm/components/number-field/number-field.d.ts +10 -0
- package/dist/esm/components/number-field/number-field.d.ts.map +1 -0
- package/dist/esm/components/number-field/number-field.js +26 -0
- package/dist/esm/components/number-field/number-field.js.map +1 -0
- package/dist/esm/components/pagination/pagination.d.ts +14 -0
- package/dist/esm/components/pagination/pagination.d.ts.map +1 -0
- package/dist/esm/components/pagination/pagination.js +66 -0
- package/dist/esm/components/pagination/pagination.js.map +1 -0
- package/dist/esm/components/radio/radio-group.d.ts +21 -0
- package/dist/esm/components/radio/radio-group.d.ts.map +1 -0
- package/dist/esm/components/radio/radio-group.js +31 -0
- package/dist/esm/components/radio/radio-group.js.map +1 -0
- package/dist/esm/components/radio/radio.d.ts +14 -0
- package/dist/esm/components/radio/radio.d.ts.map +1 -0
- package/dist/esm/components/radio/radio.js +25 -0
- package/dist/esm/components/radio/radio.js.map +1 -0
- package/dist/esm/components/select/select.d.ts +31 -0
- package/dist/esm/components/select/select.d.ts.map +1 -0
- package/dist/esm/components/select/select.js +45 -0
- package/dist/esm/components/select/select.js.map +1 -0
- package/dist/esm/components/spacing/box/box.d.ts +10 -0
- package/dist/esm/components/spacing/box/box.d.ts.map +1 -0
- package/dist/esm/components/spacing/box/box.js +11 -0
- package/dist/esm/components/spacing/box/box.js.map +1 -0
- package/dist/esm/components/spacing/stack/stack.d.ts +35 -0
- package/dist/esm/components/spacing/stack/stack.d.ts.map +1 -0
- package/dist/esm/components/spacing/stack/stack.js +25 -0
- package/dist/esm/components/spacing/stack/stack.js.map +1 -0
- package/dist/esm/components/spacing/types.d.ts +32 -0
- package/dist/esm/components/spacing/types.d.ts.map +1 -0
- package/dist/esm/components/spacing/types.js +43 -0
- package/dist/esm/components/spacing/types.js.map +1 -0
- package/dist/esm/components/spinner/spinner.d.ts +16 -0
- package/dist/esm/components/spinner/spinner.d.ts.map +1 -0
- package/dist/esm/components/spinner/spinner.js +35 -0
- package/dist/esm/components/spinner/spinner.js.map +1 -0
- package/dist/esm/components/table/contexts/focus.d.ts +11 -0
- package/dist/esm/components/table/contexts/focus.d.ts.map +1 -0
- package/dist/esm/components/table/contexts/focus.js +38 -0
- package/dist/esm/components/table/contexts/focus.js.map +1 -0
- package/dist/esm/components/table/contexts/row-state.d.ts +10 -0
- package/dist/esm/components/table/contexts/row-state.d.ts.map +1 -0
- package/dist/esm/components/table/contexts/row-state.js +18 -0
- package/dist/esm/components/table/contexts/row-state.js.map +1 -0
- package/dist/esm/components/table/hooks/use-table-cell.d.ts +7 -0
- package/dist/esm/components/table/hooks/use-table-cell.d.ts.map +1 -0
- package/dist/esm/components/table/hooks/use-table-cell.js +24 -0
- package/dist/esm/components/table/hooks/use-table-cell.js.map +1 -0
- package/dist/esm/components/table/hooks/use-table.d.ts +7 -0
- package/dist/esm/components/table/hooks/use-table.d.ts.map +1 -0
- package/dist/esm/components/table/hooks/use-table.js +111 -0
- package/dist/esm/components/table/hooks/use-table.js.map +1 -0
- package/dist/esm/components/table/table-body-cell.d.ts +26 -0
- package/dist/esm/components/table/table-body-cell.d.ts.map +1 -0
- package/dist/esm/components/table/table-body-cell.js +14 -0
- package/dist/esm/components/table/table-body-cell.js.map +1 -0
- package/dist/esm/components/table/table-body.d.ts +8 -0
- package/dist/esm/components/table/table-body.d.ts.map +1 -0
- package/dist/esm/components/table/table-body.js +8 -0
- package/dist/esm/components/table/table-body.js.map +1 -0
- package/dist/esm/components/table/table-container.d.ts +8 -0
- package/dist/esm/components/table/table-container.d.ts.map +1 -0
- package/dist/esm/components/table/table-container.js +10 -0
- package/dist/esm/components/table/table-container.js.map +1 -0
- package/dist/esm/components/table/table-header-cell.d.ts +26 -0
- package/dist/esm/components/table/table-header-cell.d.ts.map +1 -0
- package/dist/esm/components/table/table-header-cell.js +14 -0
- package/dist/esm/components/table/table-header-cell.js.map +1 -0
- package/dist/esm/components/table/table-header.d.ts +8 -0
- package/dist/esm/components/table/table-header.d.ts.map +1 -0
- package/dist/esm/components/table/table-header.js +8 -0
- package/dist/esm/components/table/table-header.js.map +1 -0
- package/dist/esm/components/table/table-row.d.ts +21 -0
- package/dist/esm/components/table/table-row.d.ts.map +1 -0
- package/dist/esm/components/table/table-row.js +11 -0
- package/dist/esm/components/table/table-row.js.map +1 -0
- package/dist/esm/components/table/table.d.ts +26 -0
- package/dist/esm/components/table/table.d.ts.map +1 -0
- package/dist/esm/components/table/table.js +24 -0
- package/dist/esm/components/table/table.js.map +1 -0
- package/dist/esm/components/tag/tag-group.d.ts +16 -0
- package/dist/esm/components/tag/tag-group.d.ts.map +1 -0
- package/dist/esm/components/tag/tag-group.js +21 -0
- package/dist/esm/components/tag/tag-group.js.map +1 -0
- package/dist/esm/components/tag/tag.d.ts +13 -0
- package/dist/esm/components/tag/tag.d.ts.map +1 -0
- package/dist/esm/components/tag/tag.js +15 -0
- package/dist/esm/components/tag/tag.js.map +1 -0
- package/dist/esm/components/text-inputs/text-area.d.ts +8 -0
- package/dist/esm/components/text-inputs/text-area.d.ts.map +1 -0
- package/dist/esm/components/text-inputs/text-area.js +23 -0
- package/dist/esm/components/text-inputs/text-area.js.map +1 -0
- package/dist/esm/components/text-inputs/text-field.d.ts +12 -0
- package/dist/esm/components/text-inputs/text-field.d.ts.map +1 -0
- package/dist/esm/components/text-inputs/text-field.js +26 -0
- package/dist/esm/components/text-inputs/text-field.js.map +1 -0
- package/dist/esm/components/tooltip/tooltip.d.ts +9 -0
- package/dist/esm/components/tooltip/tooltip.d.ts.map +1 -0
- package/dist/esm/components/tooltip/tooltip.js +9 -0
- package/dist/esm/components/tooltip/tooltip.js.map +1 -0
- package/dist/esm/components/types.d.ts +156 -0
- package/dist/esm/components/types.d.ts.map +1 -0
- package/dist/esm/components/types.js +2 -0
- package/dist/esm/components/types.js.map +1 -0
- package/dist/esm/components/typography/link.d.ts +18 -0
- package/dist/esm/components/typography/link.d.ts.map +1 -0
- package/dist/esm/components/typography/link.js +20 -0
- package/dist/esm/components/typography/link.js.map +1 -0
- package/dist/esm/components/typography/text.d.ts +15 -0
- package/dist/esm/components/typography/text.d.ts.map +1 -0
- package/dist/esm/components/typography/text.js +22 -0
- package/dist/esm/components/typography/text.js.map +1 -0
- package/dist/esm/components/typography/types.d.ts +23 -0
- package/dist/esm/components/typography/types.d.ts.map +1 -0
- package/dist/esm/components/typography/types.js +2 -0
- package/dist/esm/components/typography/types.js.map +1 -0
- package/dist/esm/components/typography/utils.d.ts +4 -0
- package/dist/esm/components/typography/utils.d.ts.map +1 -0
- package/dist/esm/components/typography/utils.js +12 -0
- package/dist/esm/components/typography/utils.js.map +1 -0
- package/dist/esm/components/visually-hidden/visually-hidden.d.ts +17 -0
- package/dist/esm/components/visually-hidden/visually-hidden.d.ts.map +1 -0
- package/dist/esm/components/visually-hidden/visually-hidden.js +14 -0
- package/dist/esm/components/visually-hidden/visually-hidden.js.map +1 -0
- package/dist/esm/forward-ref.d.ts +3 -0
- package/dist/esm/forward-ref.d.ts.map +1 -0
- package/dist/esm/forward-ref.js +20 -0
- package/dist/esm/forward-ref.js.map +1 -0
- package/dist/esm/icons/accounting-document.d.ts +8 -0
- package/dist/esm/icons/accounting-document.d.ts.map +1 -0
- package/dist/esm/icons/accounting-document.js +19 -0
- package/dist/esm/icons/accounting-document.js.map +1 -0
- package/dist/esm/icons/add-circle-fill.d.ts +8 -0
- package/dist/esm/icons/add-circle-fill.d.ts.map +1 -0
- package/dist/esm/icons/add-circle-fill.js +19 -0
- package/dist/esm/icons/add-circle-fill.js.map +1 -0
- package/dist/esm/icons/add-circle.d.ts +8 -0
- package/dist/esm/icons/add-circle.d.ts.map +1 -0
- package/dist/esm/icons/add-circle.js +19 -0
- package/dist/esm/icons/add-circle.js.map +1 -0
- package/dist/esm/icons/add.d.ts +8 -0
- package/dist/esm/icons/add.d.ts.map +1 -0
- package/dist/esm/icons/add.js +19 -0
- package/dist/esm/icons/add.js.map +1 -0
- package/dist/esm/icons/alert-triangle.d.ts +8 -0
- package/dist/esm/icons/alert-triangle.d.ts.map +1 -0
- package/dist/esm/icons/alert-triangle.js +19 -0
- package/dist/esm/icons/alert-triangle.js.map +1 -0
- package/dist/esm/icons/calculator-alt.d.ts +8 -0
- package/dist/esm/icons/calculator-alt.d.ts.map +1 -0
- package/dist/esm/icons/calculator-alt.js +19 -0
- package/dist/esm/icons/calculator-alt.js.map +1 -0
- package/dist/esm/icons/calculator.d.ts +8 -0
- package/dist/esm/icons/calculator.d.ts.map +1 -0
- package/dist/esm/icons/calculator.js +19 -0
- package/dist/esm/icons/calculator.js.map +1 -0
- package/dist/esm/icons/checkmark-circle-fill.d.ts +8 -0
- package/dist/esm/icons/checkmark-circle-fill.d.ts.map +1 -0
- package/dist/esm/icons/checkmark-circle-fill.js +19 -0
- package/dist/esm/icons/checkmark-circle-fill.js.map +1 -0
- package/dist/esm/icons/checkmark-circle.d.ts +8 -0
- package/dist/esm/icons/checkmark-circle.d.ts.map +1 -0
- package/dist/esm/icons/checkmark-circle.js +19 -0
- package/dist/esm/icons/checkmark-circle.js.map +1 -0
- package/dist/esm/icons/checkmark-small.d.ts +8 -0
- package/dist/esm/icons/checkmark-small.d.ts.map +1 -0
- package/dist/esm/icons/checkmark-small.js +19 -0
- package/dist/esm/icons/checkmark-small.js.map +1 -0
- package/dist/esm/icons/checkmark.d.ts +8 -0
- package/dist/esm/icons/checkmark.d.ts.map +1 -0
- package/dist/esm/icons/checkmark.js +19 -0
- package/dist/esm/icons/checkmark.js.map +1 -0
- package/dist/esm/icons/chevron-down-fill.d.ts +8 -0
- package/dist/esm/icons/chevron-down-fill.d.ts.map +1 -0
- package/dist/esm/icons/chevron-down-fill.js +19 -0
- package/dist/esm/icons/chevron-down-fill.js.map +1 -0
- package/dist/esm/icons/error-circle-fill.d.ts +8 -0
- package/dist/esm/icons/error-circle-fill.d.ts.map +1 -0
- package/dist/esm/icons/error-circle-fill.js +19 -0
- package/dist/esm/icons/error-circle-fill.js.map +1 -0
- package/dist/esm/icons/index.d.ts +24 -0
- package/dist/esm/icons/index.d.ts.map +1 -0
- package/dist/esm/icons/index.js +23 -0
- package/dist/esm/icons/index.js.map +1 -0
- package/dist/esm/icons/info-circle-fill.d.ts +8 -0
- package/dist/esm/icons/info-circle-fill.d.ts.map +1 -0
- package/dist/esm/icons/info-circle-fill.js +19 -0
- package/dist/esm/icons/info-circle-fill.js.map +1 -0
- package/dist/esm/icons/minus-small.d.ts +8 -0
- package/dist/esm/icons/minus-small.d.ts.map +1 -0
- package/dist/esm/icons/minus-small.js +19 -0
- package/dist/esm/icons/minus-small.js.map +1 -0
- package/dist/esm/icons/minus.d.ts +8 -0
- package/dist/esm/icons/minus.d.ts.map +1 -0
- package/dist/esm/icons/minus.js +19 -0
- package/dist/esm/icons/minus.js.map +1 -0
- package/dist/esm/icons/unstable-chevron-left-fill.d.ts +8 -0
- package/dist/esm/icons/unstable-chevron-left-fill.d.ts.map +1 -0
- package/dist/esm/icons/unstable-chevron-left-fill.js +19 -0
- package/dist/esm/icons/unstable-chevron-left-fill.js.map +1 -0
- package/dist/esm/icons/unstable-chevron-right-fill.d.ts +8 -0
- package/dist/esm/icons/unstable-chevron-right-fill.d.ts.map +1 -0
- package/dist/esm/icons/unstable-chevron-right-fill.js +19 -0
- package/dist/esm/icons/unstable-chevron-right-fill.js.map +1 -0
- package/dist/esm/icons/unstable-close.d.ts +8 -0
- package/dist/esm/icons/unstable-close.d.ts.map +1 -0
- package/dist/esm/icons/unstable-close.js +19 -0
- package/dist/esm/icons/unstable-close.js.map +1 -0
- package/dist/esm/icons/unstable-info-circle.d.ts +8 -0
- package/dist/esm/icons/unstable-info-circle.d.ts.map +1 -0
- package/dist/esm/icons/unstable-info-circle.js +19 -0
- package/dist/esm/icons/unstable-info-circle.js.map +1 -0
- package/dist/esm/icons/unstable-placeholder.d.ts +8 -0
- package/dist/esm/icons/unstable-placeholder.d.ts.map +1 -0
- package/dist/esm/icons/unstable-placeholder.js +19 -0
- package/dist/esm/icons/unstable-placeholder.js.map +1 -0
- package/dist/esm/icons/warning-circle-fill.d.ts +8 -0
- package/dist/esm/icons/warning-circle-fill.d.ts.map +1 -0
- package/dist/esm/icons/warning-circle-fill.js +19 -0
- package/dist/esm/icons/warning-circle-fill.js.map +1 -0
- package/dist/esm/index.d.ts +45 -0
- package/dist/esm/index.d.ts.map +1 -0
- package/dist/esm/index.js +42 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/package.json +3 -0
- package/dist/esm/providers/router/router-provider.d.ts +20 -0
- package/dist/esm/providers/router/router-provider.d.ts.map +1 -0
- package/dist/esm/providers/router/router-provider.js +12 -0
- package/dist/esm/providers/router/router-provider.js.map +1 -0
- package/dist/esm/providers/ssr/ssr-provider.d.ts +17 -0
- package/dist/esm/providers/ssr/ssr-provider.d.ts.map +1 -0
- package/dist/esm/providers/ssr/ssr-provider.js +17 -0
- package/dist/esm/providers/ssr/ssr-provider.js.map +1 -0
- package/dist/esm/utils/style/tone.d.ts +3 -0
- package/dist/esm/utils/style/tone.d.ts.map +1 -0
- package/dist/esm/utils/style/tone.js +4 -0
- package/dist/esm/utils/style/tone.js.map +1 -0
- package/dist/esm/utils/style/types.d.ts +2 -0
- package/dist/esm/utils/style/types.d.ts.map +1 -0
- package/dist/esm/utils/style/types.js +2 -0
- package/dist/esm/utils/style/types.js.map +1 -0
- package/dist/esm/with-style-props.d.ts +21 -0
- package/dist/esm/with-style-props.d.ts.map +1 -0
- package/dist/esm/with-style-props.js +23 -0
- package/dist/esm/with-style-props.js.map +1 -0
- package/dist-styles/styles.css +2 -0
- package/package.json +152 -0
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.FormFieldLabel = FormFieldLabel;
|
|
7
|
+
exports.FormFieldDescription = FormFieldDescription;
|
|
8
|
+
exports.FormFieldError = FormFieldError;
|
|
9
|
+
exports.FormFieldErrorText = FormFieldErrorText;
|
|
10
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
11
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
12
|
+
const react_aria_components_1 = require("react-aria-components");
|
|
13
|
+
const index_js_1 = require("../../../icons/index.js");
|
|
14
|
+
const text_js_1 = require("../../typography/text.js");
|
|
15
|
+
const utils_js_1 = require("../../typography/utils.js");
|
|
16
|
+
/**
|
|
17
|
+
* Renders a label for a form field.
|
|
18
|
+
* @internal
|
|
19
|
+
*/
|
|
20
|
+
function FormFieldLabel({ children, isRequired, isDisabled, }) {
|
|
21
|
+
if (!children) {
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.Label, { className: (0, clsx_1.default)('cim-form-field-label', (0, utils_js_1.textStyle)({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' })), children: [children, isRequired && ((0, jsx_runtime_1.jsx)(text_js_1.Text, { tone: "critical", as: "span", "aria-hidden": true, children: "*" }))] }));
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Renders a description for a form field.
|
|
28
|
+
* @internal
|
|
29
|
+
*/
|
|
30
|
+
function FormFieldDescription({ children }) {
|
|
31
|
+
if (!children) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "description", className: (0, clsx_1.default)('cim-form-field-description', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'subtle' })), children: children }));
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Renders an error message for a form field.
|
|
38
|
+
*
|
|
39
|
+
* Must be rendered unconditionally, as it can be populated with browser validation errors
|
|
40
|
+
* even if an explicit error message isn't provided.
|
|
41
|
+
*
|
|
42
|
+
* @internal
|
|
43
|
+
*/
|
|
44
|
+
function FormFieldError({ children }) {
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.FieldError, { className: (0, clsx_1.default)('cim-form-field-error', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'critical' })), children: (validation) => renderFieldError(children, validation) }));
|
|
46
|
+
}
|
|
47
|
+
function renderFieldError(fieldError, validation) {
|
|
48
|
+
const errors = typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);
|
|
49
|
+
if (!errors || !errors.length) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
return typeof errors === 'object' ? (errors.map((error) => (0, jsx_runtime_1.jsx)(ErrorMessage, { message: error }, error))) : ((0, jsx_runtime_1.jsx)(ErrorMessage, { message: errors }));
|
|
53
|
+
}
|
|
54
|
+
function ErrorMessage({ message }) {
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "cim-form-field-error-message", children: [(0, jsx_runtime_1.jsx)("div", { className: "cim-form-field-error-icon-wrapper", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(index_js_1.IconAlertTriangle, {}) }), message] }));
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Renders an error message for `errorMessage` slot.
|
|
59
|
+
* Used by `TagGroup` to show error messages, since `FieldError` is not supported as it is not a form field.
|
|
60
|
+
*
|
|
61
|
+
* @internal
|
|
62
|
+
*/
|
|
63
|
+
function FormFieldErrorText({ children }) {
|
|
64
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "errorMessage", className: (0, clsx_1.default)('cim-form-field-error', (0, utils_js_1.textStyle)({ variant: 'small', tone: 'critical' })), children: children }));
|
|
65
|
+
}
|
|
66
|
+
//# sourceMappingURL=form-field.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../../../src/components/internal/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n Label as RACLabel,\n Text as RACText,\n FieldError as RACFieldError,\n type ValidationResult as RACValidationResult,\n} from 'react-aria-components';\nimport { IconAlertTriangle } from '../../../icons/index.js';\nimport type { FieldError } from '../../types.js';\nimport { Text } from '../../typography/text.js';\nimport { textStyle } from '../../typography/utils.js';\n\n/**\n * Renders a label for a form field.\n * @internal\n */\nexport function FormFieldLabel({\n children,\n isRequired,\n isDisabled,\n}: {\n children: string | undefined;\n isRequired: boolean | undefined;\n isDisabled?: boolean | undefined;\n}) {\n if (!children) {\n return null;\n }\n\n return (\n <RACLabel\n className={clsx('cim-form-field-label', textStyle({ variant: 'medium', tone: isDisabled ? 'muted' : 'base' }))}\n >\n {children}\n {isRequired && (\n <Text tone=\"critical\" as=\"span\" aria-hidden>\n *\n </Text>\n )}\n </RACLabel>\n );\n}\n\n/**\n * Renders a description for a form field.\n * @internal\n */\nexport function FormFieldDescription({ children }: { children: string | undefined }) {\n if (!children) {\n return null;\n }\n\n return (\n <RACText\n slot=\"description\"\n className={clsx('cim-form-field-description', textStyle({ variant: 'small', tone: 'subtle' }))}\n >\n {children}\n </RACText>\n );\n}\n\n/**\n * Renders an error message for a form field.\n *\n * Must be rendered unconditionally, as it can be populated with browser validation errors\n * even if an explicit error message isn't provided.\n *\n * @internal\n */\nexport function FormFieldError({ children }: { children: FieldError }) {\n return (\n <RACFieldError className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}>\n {(validation) => renderFieldError(children, validation)}\n </RACFieldError>\n );\n}\n\nfunction renderFieldError(fieldError: FieldError, validation: RACValidationResult): string | ReactNode | undefined {\n const errors =\n typeof fieldError === 'function' ? fieldError(validation) : (fieldError ?? validation.validationErrors);\n\n if (!errors || !errors.length) {\n return null;\n }\n\n return typeof errors === 'object' ? (\n errors.map((error) => <ErrorMessage key={error} message={error} />)\n ) : (\n <ErrorMessage message={errors} />\n );\n}\n\nfunction ErrorMessage({ message }: { message: string }) {\n return (\n <div className=\"cim-form-field-error-message\">\n <div className=\"cim-form-field-error-icon-wrapper\" aria-hidden>\n <IconAlertTriangle />\n </div>\n {message}\n </div>\n );\n}\n\n/**\n * Renders an error message for `errorMessage` slot.\n * Used by `TagGroup` to show error messages, since `FieldError` is not supported as it is not a form field.\n *\n * @internal\n */\nexport function FormFieldErrorText({ children }: { children: string }) {\n return (\n <RACText\n slot=\"errorMessage\"\n className={clsx('cim-form-field-error', textStyle({ variant: 'small', tone: 'critical' }))}\n >\n {children}\n </RACText>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/internal/spinner/spinner.tsx"],"names":[],"mappings":"AA2CA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.InternalSpinner = Spinner;
|
|
7
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
9
|
+
const react_aria_components_1 = require("react-aria-components");
|
|
10
|
+
/**
|
|
11
|
+
* Displays a variable-size loading indicator to represent an ongoing operation.
|
|
12
|
+
*
|
|
13
|
+
* @internal
|
|
14
|
+
*/
|
|
15
|
+
function Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }) {
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.ProgressBar, { ...props, isIndeterminate: true, ref: spinnerRef, className: (0, clsx_1.default)('cim-spinner', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 80 80", width: size, height: size, preserveAspectRatio: "xMidYMid", "aria-hidden": true, children: [(0, jsx_runtime_1.jsx)("circle", { className: "cim-spinner-ring-bg", cx: "40", cy: "40", r: "35" }), (0, jsx_runtime_1.jsx)("circle", { className: "cim-spinner-ring-fg", cx: "40", cy: "40", r: "35" })] }), children] }));
|
|
17
|
+
}
|
|
18
|
+
Spinner.displayName = 'Spinner';
|
|
19
|
+
//# sourceMappingURL=spinner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../../../src/components/internal/spinner/spinner.tsx"],"names":[],"mappings":";;;;;AA2CoB,kCAAe;;AA3CnC,gDAAwB;AAExB,iEAAsE;AAStE;;;;GAIG;AACH,SAAS,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB;IACrG,OAAO,CACL,wBAAC,mCAAc,OACT,KAAK,EACT,eAAe,QACf,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAA,cAAI,EAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,aAEnB,iCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,mBAAmB,EAAC,UAAU,kCAG9B,mCAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjE,mCAAQ,SAAS,EAAC,qBAAqB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IAC7D,EACL,QAAQ,IACM,CAClB,CAAC;AACJ,CAAC;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import clsx from 'clsx';\nimport type { ReactNode, Ref } from 'react';\nimport { ProgressBar as RACProgressBar } from 'react-aria-components';\nimport type { CommonProps, LabellableProps } from '../../types.js';\n\ninterface SpinnerProps extends CommonProps, Omit<LabellableProps, 'label'> {\n children?: ReactNode;\n spinnerRef?: Ref<HTMLDivElement>;\n size: string;\n}\n\n/**\n * Displays a variable-size loading indicator to represent an ongoing operation.\n *\n * @internal\n */\nfunction Spinner({ children, spinnerRef, size, UNSAFE_className, UNSAFE_style, ...props }: SpinnerProps) {\n return (\n <RACProgressBar\n {...props}\n isIndeterminate\n ref={spinnerRef}\n className={clsx('cim-spinner', UNSAFE_className)}\n style={UNSAFE_style}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 80 80\"\n width={size}\n height={size}\n preserveAspectRatio=\"xMidYMid\"\n aria-hidden\n >\n <circle className=\"cim-spinner-ring-bg\" cx=\"40\" cy=\"40\" r=\"35\" />\n <circle className=\"cim-spinner-ring-fg\" cx=\"40\" cy=\"40\" r=\"35\" />\n </svg>\n {children}\n </RACProgressBar>\n );\n}\n\nSpinner.displayName = 'Spinner';\n\nexport { Spinner as InternalSpinner };\n"]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
import { type MenuProps as RACMenuProps, type MenuItemProps as RACMenuItemProps, type MenuTriggerProps as RACMenuTriggerProps } from 'react-aria-components';
|
|
3
|
+
import type { ActionButtonProps } from '../button/types.js';
|
|
4
|
+
import type { CommonProps, Key, LabellableProps, NavigationProps, CollectionProps, CollectionItem, StringLikeChildren } from '../types.js';
|
|
5
|
+
export interface MenuProps<T extends CollectionItem = CollectionItem> extends CommonProps, CollectionProps<T>, LabellableProps, Pick<RACMenuTriggerProps, 'onOpenChange'>, Pick<RACMenuProps<T>, 'onScroll'>, Pick<ActionButtonProps, 'onHoverStart' | 'onHoverEnd'> {
|
|
6
|
+
/** Whether the menu trigger is disabled. */
|
|
7
|
+
isDisabled?: boolean;
|
|
8
|
+
/** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */
|
|
9
|
+
onAction?: (key: Key) => void;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Displays a collapsible list of options and actions that users can choose from.
|
|
13
|
+
*
|
|
14
|
+
* See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
|
|
15
|
+
*/
|
|
16
|
+
declare const _Menu: <T extends CollectionItem>(props: MenuProps<T> & import("react").RefAttributes<HTMLButtonElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
|
|
17
|
+
export { _Menu as Menu };
|
|
18
|
+
export interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {
|
|
19
|
+
/** The ID of the section. Has to be unique across all sections and items. */
|
|
20
|
+
id?: Key;
|
|
21
|
+
/** The content to display as the section title. */
|
|
22
|
+
title: string;
|
|
23
|
+
}
|
|
24
|
+
/** Groups list items within `Menu` into a section. */
|
|
25
|
+
export declare function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare namespace MenuSection {
|
|
27
|
+
var displayName: string;
|
|
28
|
+
}
|
|
29
|
+
export interface MenuItemProps extends NavigationProps, Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {
|
|
30
|
+
/** The ID of the item. Has to be unique across all sections and items. */
|
|
31
|
+
id?: Key;
|
|
32
|
+
/** The content to display as the label. */
|
|
33
|
+
children: StringLikeChildren;
|
|
34
|
+
/** Additional description for the menu item. */
|
|
35
|
+
description?: string;
|
|
36
|
+
/** An icon representing the menu item. */
|
|
37
|
+
icon?: ReactNode;
|
|
38
|
+
}
|
|
39
|
+
/** Renders a single list item within `Menu`. */
|
|
40
|
+
export declare function MenuItem({ children, description, icon, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
|
|
41
|
+
export declare namespace MenuItem {
|
|
42
|
+
var displayName: string;
|
|
43
|
+
}
|
|
44
|
+
/** Renders a horizontal divider between list items within `Menu`. */
|
|
45
|
+
export declare function MenuDivider(): import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export declare namespace MenuDivider {
|
|
47
|
+
var displayName: string;
|
|
48
|
+
}
|
|
49
|
+
//# sourceMappingURL=menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAA0C,MAAM,OAAO,CAAC;AAC/E,OAAO,EAGL,KAAK,SAAS,IAAI,YAAY,EAE9B,KAAK,aAAa,IAAI,gBAAgB,EAEtC,KAAK,gBAAgB,IAAI,mBAAmB,EAK7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EACV,WAAW,EACX,GAAG,EACH,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,kBAAkB,EACnB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAClE,SAAQ,WAAW,EACjB,eAAe,CAAC,CAAC,CAAC,EAClB,eAAe,EACf,IAAI,CAAC,mBAAmB,EAAE,cAAc,CAAC,EACzC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EACjC,IAAI,CAAC,iBAAiB,EAAE,cAAc,GAAG,YAAY,CAAC;IACxD,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wHAAwH;IACxH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/B;AAkCD;;;;GAIG;AACH,QAAA,MAAM,KAAK,GArCG,CAAC,SAAS,cAAc,gKAqCgB,CAAC;AAEvD,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAsCzB,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,CAAE,SAAQ,eAAe,CAAC,CAAC,CAAC;IACrG,6EAA6E;IAC7E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,sDAAsD;AACtD,wBAAgB,WAAW,CAAC,CAAC,SAAS,cAAc,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,2CAa9G;yBAbe,WAAW;;;AAiB3B,MAAM,WAAW,aACf,SAAQ,eAAe,EACrB,IAAI,CAAC,gBAAgB,EAAE,YAAY,GAAG,UAAU,GAAG,cAAc,GAAG,YAAY,CAAC;IACnF,0EAA0E;IAC1E,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,2CAA2C;IAC3C,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CA4BhF;yBA5Be,QAAQ;;;AAgCxB,qEAAqE;AACrE,wBAAgB,WAAW,4CAE1B;yBAFe,WAAW"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.Menu = void 0;
|
|
8
|
+
exports.MenuSection = MenuSection;
|
|
9
|
+
exports.MenuItem = MenuItem;
|
|
10
|
+
exports.MenuDivider = MenuDivider;
|
|
11
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
12
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
13
|
+
const react_1 = require("react");
|
|
14
|
+
const react_aria_components_1 = require("react-aria-components");
|
|
15
|
+
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
16
|
+
const index_js_1 = require("../../icons/index.js");
|
|
17
|
+
const with_style_props_js_1 = require("../../with-style-props.js");
|
|
18
|
+
const button_js_1 = require("../button/button.js");
|
|
19
|
+
const icon_button_js_1 = require("../button/icon-button.js");
|
|
20
|
+
const collapsible_list_js_1 = require("../internal/collapsible-list/collapsible-list.js");
|
|
21
|
+
const utils_js_1 = require("../typography/utils.js");
|
|
22
|
+
function Menu({ children, isDisabled, onAction, items, onOpenChange, onScroll, ...props }, ref) {
|
|
23
|
+
const { label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
|
|
24
|
+
(0, react_1.useEffect)(() => {
|
|
25
|
+
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
26
|
+
console.warn('`Menu` requires one of `label` / `aria-label` / `aria-labelledby` for accessibility');
|
|
27
|
+
}
|
|
28
|
+
}, [label, ariaLabel, ariaLabelledBy]);
|
|
29
|
+
if (items != null && typeof children !== 'function') {
|
|
30
|
+
console.warn('`Menu` requires `children` to be a function when using `items` prop');
|
|
31
|
+
}
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.MenuTrigger, { onOpenChange: onOpenChange, children: [(0, jsx_runtime_1.jsx)(MenuTrigger, { ...props, triggerRef: ref, isDisabled: isDisabled }), (0, jsx_runtime_1.jsx)(collapsible_list_js_1.CollapsibleList, { placement: "bottom start", offset: 5, maxHeight: 315, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Menu, { className: "cim-menu", onAction: onAction, onScroll: onScroll, items: items, children: children }) })] }));
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Displays a collapsible list of options and actions that users can choose from.
|
|
36
|
+
*
|
|
37
|
+
* See [menu usage guidelines](https://ui.cimpress.io/components/menu/).
|
|
38
|
+
*/
|
|
39
|
+
const _Menu = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(Menu), 'Menu');
|
|
40
|
+
exports.Menu = _Menu;
|
|
41
|
+
function MenuTrigger({ label, triggerRef, ...props }) {
|
|
42
|
+
if (label) {
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)(button_js_1.Button, { ...props, variant: "secondary", size: "medium", ref: triggerRef, iconEnd: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDownFill, { UNSAFE_className: "cim-menu-trigger-icon" }), children: label }));
|
|
44
|
+
}
|
|
45
|
+
return ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...props, "aria-label": props['aria-label'] ?? '', variant: "secondary", size: "medium", ref: triggerRef, icon: (0, jsx_runtime_1.jsx)(index_js_1.IconChevronDownFill, { UNSAFE_className: "cim-menu-trigger-icon" }) }));
|
|
46
|
+
}
|
|
47
|
+
/** Groups list items within `Menu` into a section. */
|
|
48
|
+
function MenuSection({ title, children, items, ...props }) {
|
|
49
|
+
if (items != null && typeof children !== 'function') {
|
|
50
|
+
console.warn('`MenuSection` requires `children` to be a function when using `items` prop');
|
|
51
|
+
}
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.MenuSection, { ...props, className: "cim-menu-section", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Header, { className: (0, clsx_1.default)('cim-menu-section-header', (0, utils_js_1.textStyle)({ variant: 'small-semibold', tone: 'subtle' })), children: title }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Collection, { items: items, children: children })] }));
|
|
53
|
+
}
|
|
54
|
+
MenuSection.displayName = 'MenuSection';
|
|
55
|
+
/** Renders a single list item within `Menu`. */
|
|
56
|
+
function MenuItem({ children, description, icon, ...props }) {
|
|
57
|
+
const textValue = typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');
|
|
58
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.MenuItem, { ...props, className: "cim-menu-item", textValue: textValue, children: ({ isDisabled }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsxs)("div", { className: "cim-menu-item-text", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "label", className: (0, utils_js_1.textStyle)({ variant: 'body', tone: isDisabled ? 'muted' : 'base' }), children: children }), description && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Text, { slot: "description", className: (0, utils_js_1.textStyle)({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' }), children: description }))] })] })) }));
|
|
59
|
+
}
|
|
60
|
+
MenuItem.displayName = 'MenuItem';
|
|
61
|
+
/** Renders a horizontal divider between list items within `Menu`. */
|
|
62
|
+
function MenuDivider() {
|
|
63
|
+
return (0, jsx_runtime_1.jsx)(react_aria_components_1.Separator, { className: "cim-menu-divider" });
|
|
64
|
+
}
|
|
65
|
+
MenuDivider.displayName = 'MenuDivider';
|
|
66
|
+
//# sourceMappingURL=menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu.js","sourceRoot":"","sources":["../../../../src/components/menu/menu.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ReactNode, type ForwardedRef, useEffect, type Ref } from 'react';\nimport {\n Header as RACHeader,\n Menu as RACMenu,\n type MenuProps as RACMenuProps,\n MenuItem as RACMenuItem,\n type MenuItemProps as RACMenuItemProps,\n MenuTrigger as RACMenuTrigger,\n type MenuTriggerProps as RACMenuTriggerProps,\n MenuSection as RACMenuSection,\n Separator as RACSeparator,\n Collection as RACCollection,\n Text as RACText,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconChevronDownFill } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { ActionButtonProps } from '../button/types.js';\nimport { CollapsibleList } from '../internal/collapsible-list/collapsible-list.js';\nimport type {\n CommonProps,\n Key,\n LabellableProps,\n NavigationProps,\n CollectionProps,\n CollectionItem,\n StringLikeChildren,\n} from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface MenuProps<T extends CollectionItem = CollectionItem>\n extends CommonProps,\n CollectionProps<T>,\n LabellableProps,\n Pick<RACMenuTriggerProps, 'onOpenChange'>,\n Pick<RACMenuProps<T>, 'onScroll'>,\n Pick<ActionButtonProps, 'onHoverStart' | 'onHoverEnd'> {\n /** Whether the menu trigger is disabled. */\n isDisabled?: boolean;\n /** Handler that is called when an item is selected. When using `onAction`, all items must have an `id` prop defined. */\n onAction?: (key: Key) => void;\n}\n\nfunction Menu<T extends CollectionItem>(\n { children, isDisabled, onAction, items, onOpenChange, onScroll, ...props }: MenuProps<T>,\n ref: ForwardedRef<HTMLButtonElement>,\n) {\n const { label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useEffect(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('`Menu` requires one of `label` / `aria-label` / `aria-labelledby` for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n if (items != null && typeof children !== 'function') {\n console.warn('`Menu` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACMenuTrigger onOpenChange={onOpenChange}>\n <MenuTrigger {...props} triggerRef={ref} isDisabled={isDisabled} />\n <CollapsibleList\n placement=\"bottom start\"\n offset={5} // 1px border + 4px actual offset\n maxHeight={315}\n >\n <RACMenu className=\"cim-menu\" onAction={onAction} onScroll={onScroll} items={items}>\n {children}\n </RACMenu>\n </CollapsibleList>\n </RACMenuTrigger>\n );\n}\n\n/**\n * Displays a collapsible list of options and actions that users can choose from.\n *\n * See [menu usage guidelines](https://ui.cimpress.io/components/menu/).\n */\nconst _Menu = withStyleProps(forwardRef(Menu), 'Menu');\n\nexport { _Menu as Menu };\n\ninterface MenuTriggerProps\n extends CommonProps,\n LabellableProps,\n Pick<ActionButtonProps, 'onHoverStart' | 'onHoverEnd'> {\n triggerRef: Ref<HTMLButtonElement>;\n isDisabled?: boolean;\n}\n\nfunction MenuTrigger({ label, triggerRef, ...props }: MenuTriggerProps) {\n if (label) {\n return (\n <Button\n {...props}\n variant=\"secondary\"\n size=\"medium\"\n ref={triggerRef}\n iconEnd={<IconChevronDownFill UNSAFE_className=\"cim-menu-trigger-icon\" />}\n >\n {label}\n </Button>\n );\n }\n\n return (\n <IconButton\n {...props}\n // The warning for missing aria-label would have been already emitted in the <Menu> component, so this is fine\n aria-label={props['aria-label'] ?? ''}\n variant=\"secondary\"\n size=\"medium\"\n ref={triggerRef}\n icon={<IconChevronDownFill UNSAFE_className=\"cim-menu-trigger-icon\" />}\n />\n );\n}\n\nexport interface MenuSectionProps<T extends CollectionItem = CollectionItem> extends CollectionProps<T> {\n /** The ID of the section. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the section title. */\n title: string;\n}\n\n/** Groups list items within `Menu` into a section. */\nexport function MenuSection<T extends CollectionItem>({ title, children, items, ...props }: MenuSectionProps<T>) {\n if (items != null && typeof children !== 'function') {\n console.warn('`MenuSection` requires `children` to be a function when using `items` prop');\n }\n\n return (\n <RACMenuSection {...props} className=\"cim-menu-section\">\n <RACHeader className={clsx('cim-menu-section-header', textStyle({ variant: 'small-semibold', tone: 'subtle' }))}>\n {title}\n </RACHeader>\n <RACCollection items={items}>{children}</RACCollection>\n </RACMenuSection>\n );\n}\n\nMenuSection.displayName = 'MenuSection';\n\nexport interface MenuItemProps\n extends NavigationProps,\n Pick<RACMenuItemProps, 'isDisabled' | 'onAction' | 'onHoverStart' | 'onHoverEnd'> {\n /** The ID of the item. Has to be unique across all sections and items. */\n id?: Key;\n /** The content to display as the label. */\n children: StringLikeChildren;\n /** Additional description for the menu item. */\n description?: string;\n /** An icon representing the menu item. */\n icon?: ReactNode;\n}\n\n/** Renders a single list item within `Menu`. */\nexport function MenuItem({ children, description, icon, ...props }: MenuItemProps) {\n const textValue =\n typeof children === 'string' ? children : typeof children === 'number' ? String(children) : children.join('');\n\n return (\n <RACMenuItem {...props} className=\"cim-menu-item\" textValue={textValue}>\n {({ isDisabled }) => (\n <>\n {icon}\n\n <div className=\"cim-menu-item-text\">\n <RACText slot=\"label\" className={textStyle({ variant: 'body', tone: isDisabled ? 'muted' : 'base' })}>\n {children}\n </RACText>\n\n {description && (\n <RACText\n slot=\"description\"\n className={textStyle({ variant: 'small', tone: isDisabled ? 'muted' : 'subtle' })}\n >\n {description}\n </RACText>\n )}\n </div>\n </>\n )}\n </RACMenuItem>\n );\n}\n\nMenuItem.displayName = 'MenuItem';\n\n/** Renders a horizontal divider between list items within `Menu`. */\nexport function MenuDivider() {\n return <RACSeparator className=\"cim-menu-divider\" />;\n}\n\nMenuDivider.displayName = 'MenuDivider';\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type ModalOverlayProps as RACModalOverlayProps } from 'react-aria-components';
|
|
3
|
+
import type { CommonProps } from '../types.js';
|
|
4
|
+
export interface UNSTABLE_ModalProps extends CommonProps, Pick<RACModalOverlayProps, 'isDismissable'> {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
title?: string;
|
|
7
|
+
size?: 'small' | 'medium' | 'large';
|
|
8
|
+
/** Whether the modal is open (controlled). */
|
|
9
|
+
isOpen?: boolean;
|
|
10
|
+
/** Whether the modal is open by default (uncontrolled). */
|
|
11
|
+
defaultOpen?: boolean;
|
|
12
|
+
/** Handler that is called when the modal's open state changes. */
|
|
13
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
14
|
+
}
|
|
15
|
+
export declare function UNSTABLE_DialogTrigger({ children }: {
|
|
16
|
+
children: ReactNode;
|
|
17
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare function UNSTABLE_Modal({ children, title, size, UNSAFE_className, UNSAFE_style, isDismissable, isOpen, defaultOpen, onOpenChange, ...props }: UNSTABLE_ModalProps): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
//# sourceMappingURL=modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAML,KAAK,iBAAiB,IAAI,oBAAoB,EAC/C,MAAM,uBAAuB,CAAC;AAG/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,mBAAoB,SAAQ,WAAW,EAAE,IAAI,CAAC,oBAAoB,EAAE,eAAe,CAAC;IACnG,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAE3E;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,IAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAoB,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAsCrB"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.UNSTABLE_DialogTrigger = UNSTABLE_DialogTrigger;
|
|
8
|
+
exports.UNSTABLE_Modal = UNSTABLE_Modal;
|
|
9
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
10
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
11
|
+
const react_aria_components_1 = require("react-aria-components");
|
|
12
|
+
const index_js_1 = require("../../icons/index.js");
|
|
13
|
+
const icon_button_js_1 = require("../button/icon-button.js");
|
|
14
|
+
const utils_js_1 = require("../typography/utils.js");
|
|
15
|
+
function UNSTABLE_DialogTrigger({ children }) {
|
|
16
|
+
return (0, jsx_runtime_1.jsx)(react_aria_components_1.DialogTrigger, { children: children });
|
|
17
|
+
}
|
|
18
|
+
function UNSTABLE_Modal({ children, title, size = 'medium', UNSAFE_className, UNSAFE_style, isDismissable = true, isOpen, defaultOpen, onOpenChange, ...props }) {
|
|
19
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.ModalOverlay, { className: "cim-modal-overlay", isDismissable: isDismissable, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Modal, { className: (0, clsx_1.default)('cim-modal', UNSAFE_className, {
|
|
20
|
+
'cim-modal-small': size === 'small',
|
|
21
|
+
'cim-modal-medium': size === 'medium',
|
|
22
|
+
'cim-modal-large': size === 'large',
|
|
23
|
+
}), children: (0, jsx_runtime_1.jsxs)(react_aria_components_1.Dialog, { ...props, className: (0, clsx_1.default)('cim-modal-dialog'), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsxs)("div", { className: "cim-modal-header", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-modal-title', (0, utils_js_1.textStyle)({ variant: 'title-3' })), children: title })), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "close", icon: (0, jsx_runtime_1.jsx)(index_js_1.UNSTABLE_IconClose, {}), variant: "tertiary", size: "small", "aria-label": "Close modal", UNSAFE_className: "cim-modal-close-button" })] }), (0, jsx_runtime_1.jsx)("div", { className: "cim-modal-content", children: children })] }) }) }));
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../../src/components/modal/modal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AA6Bb,wDAEC;AAED,wCAiDC;;AAhFD,gDAAwB;AAExB,iEAO+B;AAC/B,mDAA0D;AAC1D,6DAAsD;AAEtD,qDAAmD;AAcnD,SAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAA2B;IAC1E,OAAO,uBAAC,qCAAgB,cAAE,QAAQ,GAAoB,CAAC;AACzD,CAAC;AAED,SAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,gBAAgB,EAChB,YAAY,EACZ,aAAa,GAAG,IAAI,EACpB,MAAM,EACN,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACY;IACpB,OAAO,CACL,uBAAC,oCAAe,IACd,SAAS,EAAC,mBAAmB,EAC7B,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,yCAG1B,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,WAAW,EAAE,gBAAgB,EAAE;gBAC7C,iBAAiB,EAAE,IAAI,KAAK,OAAO;gBACnC,kBAAkB,EAAE,IAAI,KAAK,QAAQ;gBACrC,iBAAiB,EAAE,IAAI,KAAK,OAAO;aACpC,CAAC,YAEF,wBAAC,8BAAS,OAAK,KAAK,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC5E,iCAAK,SAAS,EAAC,kBAAkB,aAC9B,KAAK,IAAI,CACR,uBAAC,+BAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAA,cAAI,EAAC,iBAAiB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC3F,KAAK,GACK,CACd,EACD,uBAAC,2BAAU,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,uBAAC,6BAAkB,KAAG,EAC5B,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,gBACD,aAAa,EACxB,gBAAgB,EAAC,wBAAwB,GACzC,IACE,EACN,gCAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,IACzC,GACH,GACK,CACnB,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\nimport {\n Heading as RACHeading,\n Dialog as RACDialog,\n DialogTrigger as RACDialogTrigger,\n Modal as RACModal,\n ModalOverlay as RACModalOverlay,\n type ModalOverlayProps as RACModalOverlayProps,\n} from 'react-aria-components';\nimport { UNSTABLE_IconClose } from '../../icons/index.js';\nimport { IconButton } from '../button/icon-button.js';\nimport type { CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface UNSTABLE_ModalProps extends CommonProps, Pick<RACModalOverlayProps, 'isDismissable'> {\n children: ReactNode;\n title?: string;\n size?: 'small' | 'medium' | 'large';\n /** Whether the modal is open (controlled). */\n isOpen?: boolean;\n /** Whether the modal is open by default (uncontrolled). */\n defaultOpen?: boolean;\n /** Handler that is called when the modal's open state changes. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\nexport function UNSTABLE_DialogTrigger({ children }: { children: ReactNode }) {\n return <RACDialogTrigger>{children}</RACDialogTrigger>;\n}\n\nexport function UNSTABLE_Modal({\n children,\n title,\n size = 'medium',\n UNSAFE_className,\n UNSAFE_style,\n isDismissable = true,\n isOpen,\n defaultOpen,\n onOpenChange,\n ...props\n}: UNSTABLE_ModalProps) {\n return (\n <RACModalOverlay\n className=\"cim-modal-overlay\"\n isDismissable={isDismissable}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n data-cim-style-root\n >\n <RACModal\n className={clsx('cim-modal', UNSAFE_className, {\n 'cim-modal-small': size === 'small',\n 'cim-modal-medium': size === 'medium',\n 'cim-modal-large': size === 'large',\n })}\n >\n <RACDialog {...props} className={clsx('cim-modal-dialog')} style={UNSAFE_style}>\n <div className=\"cim-modal-header\">\n {title && (\n <RACHeading slot=\"title\" className={clsx('cim-modal-title', textStyle({ variant: 'title-3' }))}>\n {title}\n </RACHeading>\n )}\n <IconButton\n slot=\"close\"\n icon={<UNSTABLE_IconClose />}\n variant=\"tertiary\"\n size=\"small\"\n aria-label=\"Close modal\"\n UNSAFE_className=\"cim-modal-close-button\"\n />\n </div>\n <div className=\"cim-modal-content\">{children}</div>\n </RACDialog>\n </RACModal>\n </RACModalOverlay>\n );\n}\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type LinkProps as RACLinkProps } from 'react-aria-components';
|
|
3
|
+
import type { CommonProps, LabellableProps, NavigationProps, StringLikeChildren, WithRequired } from '../types.js';
|
|
4
|
+
export interface UNSTABLE_NavTabsProps extends CommonProps, Omit<LabellableProps, 'label'> {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* Whether to display the navigation tabs horizontally or vertically.
|
|
8
|
+
* @default 'horizontal'
|
|
9
|
+
*/
|
|
10
|
+
orientation?: 'horizontal' | 'vertical';
|
|
11
|
+
}
|
|
12
|
+
export interface UNSTABLE_NavTabItemProps extends Omit<CommonProps, 'id'>, WithRequired<NavigationProps, 'href'>, Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {
|
|
13
|
+
children: StringLikeChildren;
|
|
14
|
+
isCurrent?: boolean;
|
|
15
|
+
}
|
|
16
|
+
/** Renders a single navigation tab within `NavTabs`. */
|
|
17
|
+
export declare function UNSTABLE_NavTabItem({ children, isCurrent, UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_NavTabItemProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
/**
|
|
19
|
+
* Displays a list of navigation tabs to help users navigate through a website.
|
|
20
|
+
*/
|
|
21
|
+
declare const _UNSTABLE_NavTabs: (props: UNSTABLE_NavTabsProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
|
|
22
|
+
export { _UNSTABLE_NavTabs as UNSTABLE_NavTabs };
|
|
23
|
+
//# sourceMappingURL=nav-tabs.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nav-tabs.d.ts","sourceRoot":"","sources":["../../../../src/components/nav-tabs/nav-tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAgB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAmB,KAAK,SAAS,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGxF,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,eAAe,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAInH,MAAM,WAAW,qBAAsB,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC;IACxF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAmBD,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,EAC7B,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,EACrC,IAAI,CAAC,YAAY,EAAE,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/E,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wDAAwD;AACxD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAW1B;AAED;;GAEG;AACH,QAAA,MAAM,iBAAiB,uKAA0D,CAAC;AAElF,OAAO,EAAE,iBAAiB,IAAI,gBAAgB,EAAE,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.UNSTABLE_NavTabs = void 0;
|
|
8
|
+
exports.UNSTABLE_NavTabItem = UNSTABLE_NavTabItem;
|
|
9
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
10
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
11
|
+
const react_aria_components_1 = require("react-aria-components");
|
|
12
|
+
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
13
|
+
const with_style_props_js_1 = require("../../with-style-props.js");
|
|
14
|
+
const utils_js_1 = require("../typography/utils.js");
|
|
15
|
+
function UNSTABLE_NavTabs({ children, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
16
|
+
return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, className: (0, clsx_1.default)('cim-nav-tabs', UNSAFE_className), style: UNSAFE_style, "data-orientation": orientation, children: children }));
|
|
17
|
+
}
|
|
18
|
+
/** Renders a single navigation tab within `NavTabs`. */
|
|
19
|
+
function UNSTABLE_NavTabItem({ children, isCurrent = false, UNSAFE_className, UNSAFE_style, ...props }) {
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Link, { ...props, className: (0, clsx_1.default)('cim-nav-tab-item', (0, utils_js_1.textStyle)({ variant: 'body' }), UNSAFE_className), style: UNSAFE_style, "aria-current": isCurrent ? 'page' : undefined, children: children }));
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Displays a list of navigation tabs to help users navigate through a website.
|
|
24
|
+
*/
|
|
25
|
+
const _UNSTABLE_NavTabs = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_NavTabs), 'NavTabs');
|
|
26
|
+
exports.UNSTABLE_NavTabs = _UNSTABLE_NavTabs;
|
|
27
|
+
//# sourceMappingURL=nav-tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"nav-tabs.js","sourceRoot":"","sources":["../../../../src/components/nav-tabs/nav-tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AA8Cb,kDAiBC;;AA7DD,gDAAwB;AAExB,iEAAwF;AACxF,yDAAkD;AAClD,mEAA2D;AAE3D,qDAAmD;AAYnD,SAAS,gBAAgB,CACvB,EAAE,QAAQ,EAAE,WAAW,GAAG,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,KAAK,EAAyB,EACzG,GAAiC;IAEjC,OAAO,CACL,mCACM,KAAK,EACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,cAAc,EAAE,gBAAgB,CAAC,EACjD,KAAK,EAAE,YAAY,sBACD,WAAW,YAE5B,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAUD,wDAAwD;AACxD,SAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACiB;IACzB,OAAO,CACL,uBAAC,4BAAO,OACF,KAAK,EACT,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,gBAAgB,CAAC,EACrF,KAAK,EAAE,YAAY,kBACL,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAE3C,QAAQ,GACD,CACX,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,iBAAiB,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC,CAAC;AAEpD,6CAAgB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport type { ReactNode, ForwardedRef } from 'react';\nimport { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport type { CommonProps, LabellableProps, NavigationProps, StringLikeChildren, WithRequired } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\n// TODO: maybe add a `currentHref` prop that would be used to decide which NavTabItem is marked as current\nexport interface UNSTABLE_NavTabsProps extends CommonProps, Omit<LabellableProps, 'label'> {\n children: ReactNode;\n /**\n * Whether to display the navigation tabs horizontally or vertically.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical';\n}\n\nfunction UNSTABLE_NavTabs(\n { children, orientation = 'horizontal', UNSAFE_className, UNSAFE_style, ...props }: UNSTABLE_NavTabsProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n return (\n <div\n {...props}\n ref={ref}\n className={clsx('cim-nav-tabs', UNSAFE_className)}\n style={UNSAFE_style}\n data-orientation={orientation}\n >\n {children}\n </div>\n );\n}\n\nexport interface UNSTABLE_NavTabItemProps\n extends Omit<CommonProps, 'id'>,\n WithRequired<NavigationProps, 'href'>,\n Pick<RACLinkProps, 'children' | 'isDisabled' | 'onHoverStart' | 'onHoverEnd'> {\n children: StringLikeChildren;\n isCurrent?: boolean;\n}\n\n/** Renders a single navigation tab within `NavTabs`. */\nexport function UNSTABLE_NavTabItem({\n children,\n isCurrent = false,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n}: UNSTABLE_NavTabItemProps) {\n return (\n <RACLink\n {...props}\n className={clsx('cim-nav-tab-item', textStyle({ variant: 'body' }), UNSAFE_className)}\n style={UNSAFE_style}\n aria-current={isCurrent ? 'page' : undefined}\n >\n {children}\n </RACLink>\n );\n}\n\n/**\n * Displays a list of navigation tabs to help users navigate through a website.\n */\nconst _UNSTABLE_NavTabs = withStyleProps(forwardRef(UNSTABLE_NavTabs), 'NavTabs');\n\nexport { _UNSTABLE_NavTabs as UNSTABLE_NavTabs };\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type NumberFieldProps as RACNumberFieldProps } from 'react-aria-components';
|
|
2
|
+
import type { CommonProps, FieldWithPlaceholderProps } from '../types.js';
|
|
3
|
+
export interface UNSTABLE_NumberFieldProps extends CommonProps, FieldWithPlaceholderProps<number>, Pick<RACNumberFieldProps, 'value' | 'defaultValue' | 'onChange' | 'isDisabled' | 'isRequired' | 'isInvalid' | 'isReadOnly' | 'name' | 'autoFocus' | 'minValue' | 'maxValue' | 'step' | 'formatOptions' | 'onFocus' | 'onBlur'> {
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Allows users to enter a number with a keyboard or increment/decrement buttons.
|
|
7
|
+
*/
|
|
8
|
+
declare const _NumberField: (props: UNSTABLE_NumberFieldProps & import("react").RefAttributes<HTMLDivElement> & import("../../with-style-props.js").StyleProps) => import("react").JSX.Element | null;
|
|
9
|
+
export { _NumberField as UNSTABLE_NumberField };
|
|
10
|
+
//# sourceMappingURL=number-field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-field.d.ts","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAIA,OAAO,EAGL,KAAK,gBAAgB,IAAI,mBAAmB,EAE7C,MAAM,uBAAuB,CAAC;AAM/B,OAAO,KAAK,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG1E,MAAM,WAAW,yBACf,SAAQ,WAAW,EACjB,yBAAyB,CAAC,MAAM,CAAC,EACjC,IAAI,CACF,mBAAmB,EACjB,OAAO,GACP,cAAc,GACd,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,MAAM,GACN,WAAW,GACX,UAAU,GACV,UAAU,GACV,MAAM,GACN,eAAe,GACf,SAAS,GACT,QAAQ,CACX;CAAG;AA8CR;;GAEG;AACH,QAAA,MAAM,YAAY,2KAAkE,CAAC;AAErF,OAAO,EAAE,YAAY,IAAI,oBAAoB,EAAE,CAAC"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.UNSTABLE_NumberField = void 0;
|
|
8
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
+
const clsx_1 = __importDefault(require("clsx"));
|
|
10
|
+
const react_1 = require("react");
|
|
11
|
+
const react_aria_components_1 = require("react-aria-components");
|
|
12
|
+
const forward_ref_js_1 = require("../../forward-ref.js");
|
|
13
|
+
const index_js_1 = require("../../icons/index.js");
|
|
14
|
+
const with_style_props_js_1 = require("../../with-style-props.js");
|
|
15
|
+
const icon_button_js_1 = require("../button/icon-button.js");
|
|
16
|
+
const form_field_js_1 = require("../internal/form-field/form-field.js");
|
|
17
|
+
const utils_js_1 = require("../typography/utils.js");
|
|
18
|
+
function UNSTABLE_NumberField({ label, description, error: errorMessage, placeholder, UNSAFE_className, UNSAFE_style, ...props }, ref) {
|
|
19
|
+
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;
|
|
20
|
+
(0, react_1.useEffect)(() => {
|
|
21
|
+
if (!label && !ariaLabel && !ariaLabelledBy) {
|
|
22
|
+
console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');
|
|
23
|
+
}
|
|
24
|
+
}, [label, ariaLabel, ariaLabelledBy]);
|
|
25
|
+
return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.NumberField, { ...props, ref: ref, className: (0, clsx_1.default)('cim-number-field', UNSAFE_className), style: UNSAFE_style, children: [(0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldLabel, { isRequired: props.isRequired, isDisabled: props.isDisabled, children: label }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Group, { className: "cim-number-field-input-group", children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.Input, { className: (0, clsx_1.default)('cim-number-field-input', (0, utils_js_1.textStyle)({ variant: 'medium' })), placeholder: placeholder }), (0, jsx_runtime_1.jsxs)("div", { className: "cim-number-field-spinner", children: [(0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "decrement", icon: (0, jsx_runtime_1.jsx)(index_js_1.IconMinus, {}), "aria-label": "Decrement", variant: "tertiary" }), (0, jsx_runtime_1.jsx)("div", { className: "cim-number-field-spinner-separator" }), (0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { slot: "increment", icon: (0, jsx_runtime_1.jsx)(index_js_1.IconAdd, {}), "aria-label": "Increment", variant: "tertiary" })] })] }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldError, { children: errorMessage }), (0, jsx_runtime_1.jsx)(form_field_js_1.FormFieldDescription, { children: description })] }));
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Allows users to enter a number with a keyboard or increment/decrement buttons.
|
|
29
|
+
*/
|
|
30
|
+
const _NumberField = (0, with_style_props_js_1.withStyleProps)((0, forward_ref_js_1.forwardRef)(UNSTABLE_NumberField), 'NumberField');
|
|
31
|
+
exports.UNSTABLE_NumberField = _NumberField;
|
|
32
|
+
//# sourceMappingURL=number-field.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-field.js","sourceRoot":"","sources":["../../../../src/components/number-field/number-field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;AAEb,gDAAwB;AACxB,iCAAqD;AACrD,iEAK+B;AAC/B,yDAAkD;AAClD,mDAA0D;AAC1D,mEAA2D;AAC3D,6DAAsD;AACtD,wEAA4G;AAE5G,qDAAmD;AAwBnD,SAAS,oBAAoB,CAC3B,EACE,KAAK,EACL,WAAW,EACX,KAAK,EAAE,YAAY,EACnB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,GAAG,KAAK,EACkB,EAC5B,GAAiC;IAEjC,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,oFAAoF,CAAC,CAAC;QACrG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,OAAO,CACL,wBAAC,mCAAc,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAA,cAAI,EAAC,kBAAkB,EAAE,gBAAgB,CAAC,EAAE,KAAK,EAAE,YAAY,aAC7G,uBAAC,8BAAc,IAAC,UAAU,EAAE,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,YACvE,KAAK,GACS,EACjB,wBAAC,6BAAQ,IAAC,SAAS,EAAC,8BAA8B,aAChD,uBAAC,6BAAQ,IACP,SAAS,EAAE,IAAA,cAAI,EAAC,wBAAwB,EAAE,IAAA,oBAAS,EAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,EAC3E,WAAW,EAAE,WAAW,GACxB,EACF,iCAAK,SAAS,EAAC,0BAA0B,aAEvC,uBAAC,2BAAU,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,uBAAC,oBAAS,KAAG,gBAAa,WAAW,EAAC,OAAO,EAAC,UAAU,GAAG,EAC9F,gCAAK,SAAS,EAAC,oCAAoC,GAAG,EAEtD,uBAAC,2BAAU,IAAC,IAAI,EAAC,WAAW,EAAC,IAAI,EAAE,uBAAC,kBAAO,KAAG,gBAAa,WAAW,EAAC,OAAO,EAAC,UAAU,GAAG,IACxF,IACG,EACX,uBAAC,8BAAc,cAAE,YAAY,GAAkB,EAC/C,uBAAC,oCAAoB,cAAE,WAAW,GAAwB,IAC3C,CAClB,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,YAAY,GAAG,IAAA,oCAAc,EAAC,IAAA,2BAAU,EAAC,oBAAoB,CAAC,EAAE,aAAa,CAAC,CAAC;AAE5D,4CAAoB","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useEffect, type ForwardedRef } from 'react';\nimport {\n Input as RACInput,\n NumberField as RACNumberField,\n type NumberFieldProps as RACNumberFieldProps,\n Group as RACGroup,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { IconAdd, IconMinus } from '../../icons/index.js';\nimport { withStyleProps } from '../../with-style-props.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { FormFieldDescription, FormFieldError, FormFieldLabel } from '../internal/form-field/form-field.js';\nimport type { CommonProps, FieldWithPlaceholderProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface UNSTABLE_NumberFieldProps\n extends CommonProps,\n FieldWithPlaceholderProps<number>,\n Pick<\n RACNumberFieldProps,\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'isDisabled'\n | 'isRequired'\n | 'isInvalid'\n | 'isReadOnly'\n | 'name'\n | 'autoFocus'\n | 'minValue'\n | 'maxValue'\n | 'step'\n | 'formatOptions'\n | 'onFocus'\n | 'onBlur'\n > {}\n\nfunction UNSTABLE_NumberField(\n {\n label,\n description,\n error: errorMessage,\n placeholder,\n UNSAFE_className,\n UNSAFE_style,\n ...props\n }: UNSTABLE_NumberFieldProps,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useEffect(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn('NumberField requires one of label / aria-label / aria-labelledby for accessibility');\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n return (\n <RACNumberField {...props} ref={ref} className={clsx('cim-number-field', UNSAFE_className)} style={UNSAFE_style}>\n <FormFieldLabel isRequired={props.isRequired} isDisabled={props.isDisabled}>\n {label}\n </FormFieldLabel>\n <RACGroup className=\"cim-number-field-input-group\">\n <RACInput\n className={clsx('cim-number-field-input', textStyle({ variant: 'medium' }))}\n placeholder={placeholder}\n />\n <div className=\"cim-number-field-spinner\">\n {/* TODO: i18n */}\n <IconButton slot=\"decrement\" icon={<IconMinus />} aria-label=\"Decrement\" variant=\"tertiary\" />\n <div className=\"cim-number-field-spinner-separator\" />\n {/* TODO: i18n */}\n <IconButton slot=\"increment\" icon={<IconAdd />} aria-label=\"Increment\" variant=\"tertiary\" />\n </div>\n </RACGroup>\n <FormFieldError>{errorMessage}</FormFieldError>\n <FormFieldDescription>{description}</FormFieldDescription>\n </RACNumberField>\n );\n}\n\n/**\n * Allows users to enter a number with a keyboard or increment/decrement buttons.\n */\nconst _NumberField = withStyleProps(forwardRef(UNSTABLE_NumberField), 'NumberField');\n\nexport { _NumberField as UNSTABLE_NumberField };\n"]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface PaginationProps {
|
|
2
|
+
/** The current page number. */
|
|
3
|
+
value: number;
|
|
4
|
+
/** The total number of pages. */
|
|
5
|
+
count: number;
|
|
6
|
+
/** The accessibility label for the pagination navigation, must be unique to the page. */
|
|
7
|
+
'aria-label': string;
|
|
8
|
+
/** A callback function that is called when the page number changes. */
|
|
9
|
+
onPageChange?: (page: number) => void;
|
|
10
|
+
/** A function that returns a URL for a given page number. */
|
|
11
|
+
href?: (page: number) => string;
|
|
12
|
+
}
|
|
13
|
+
export declare function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }: PaginationProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
//# sourceMappingURL=pagination.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,yFAAyF;IACzF,YAAY,EAAE,MAAM,CAAC;IACrB,uEAAuE;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6DAA6D;IAC7D,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,eAAe,2CA+DjH"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.UNSTABLE_Pagination = UNSTABLE_Pagination;
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const index_js_1 = require("../../icons/index.js");
|
|
6
|
+
const button_js_1 = require("../button/button.js");
|
|
7
|
+
const icon_button_js_1 = require("../button/icon-button.js");
|
|
8
|
+
const icon_link_button_js_1 = require("../button/icon-link-button.js");
|
|
9
|
+
const link_button_js_1 = require("../button/link-button.js");
|
|
10
|
+
function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }) {
|
|
11
|
+
const visiblePages = getVisiblePages(value, count);
|
|
12
|
+
const previousButtonProps = {
|
|
13
|
+
// TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181
|
|
14
|
+
icon: (0, jsx_runtime_1.jsx)(index_js_1.UNSTABLE_IconChevronLeftFill, {}),
|
|
15
|
+
isDisabled: value === 1,
|
|
16
|
+
// TODO: internationalization
|
|
17
|
+
'aria-label': 'Previous',
|
|
18
|
+
};
|
|
19
|
+
const nextButtonProps = {
|
|
20
|
+
// TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181
|
|
21
|
+
icon: (0, jsx_runtime_1.jsx)(index_js_1.UNSTABLE_IconChevronRightFill, {}),
|
|
22
|
+
isDisabled: value === count,
|
|
23
|
+
// TODO: internationalization
|
|
24
|
+
'aria-label': 'Next',
|
|
25
|
+
};
|
|
26
|
+
return ((0, jsx_runtime_1.jsx)("nav", { className: "cim-pagination", "aria-label": ariaLabel, children: (0, jsx_runtime_1.jsxs)("ul", { className: "cim-pagination-list", children: [(0, jsx_runtime_1.jsx)("li", { children: href ? ((0, jsx_runtime_1.jsx)(icon_link_button_js_1.IconLinkButton, { ...previousButtonProps, href: href?.(value - 1) })) : ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...previousButtonProps, onPress: () => onPageChange?.(value - 1) })) }), visiblePages.map((page) => {
|
|
27
|
+
const isCurrentPage = typeof page === 'number' && page === value;
|
|
28
|
+
const pageNumber = typeof page === 'number' ? page : page.page;
|
|
29
|
+
const pageButtonProps = {
|
|
30
|
+
// TODO: internationalization
|
|
31
|
+
// TODO: review if "Current page" is needed once we put `aria-current` on the `button`/`link`
|
|
32
|
+
'aria-label': isCurrentPage ? `Current page, page ${pageNumber}` : `Go to page ${pageNumber}`,
|
|
33
|
+
children: typeof page === 'number' ? page : '…',
|
|
34
|
+
};
|
|
35
|
+
return (
|
|
36
|
+
// TODO: Put `aria-current` on the `button`/`link` instead of the `li` for better accessibility/screen reader support
|
|
37
|
+
// RAC Button doesn't support `aria-current` as of now
|
|
38
|
+
(0, jsx_runtime_1.jsx)("li", { "aria-current": isCurrentPage && href != null ? 'page' : isCurrentPage, children: href ? ((0, jsx_runtime_1.jsx)(link_button_js_1.LinkButton, { href: href?.(pageNumber), ...pageButtonProps })) : ((0, jsx_runtime_1.jsx)(button_js_1.Button, { onPress: () => onPageChange?.(pageNumber), ...pageButtonProps })) }, pageNumber));
|
|
39
|
+
}), (0, jsx_runtime_1.jsx)("li", { children: href ? ((0, jsx_runtime_1.jsx)(icon_link_button_js_1.IconLinkButton, { ...nextButtonProps, href: href?.(value + 1) })) : ((0, jsx_runtime_1.jsx)(icon_button_js_1.IconButton, { ...nextButtonProps, onPress: () => onPageChange?.(value + 1) })) })] }) }));
|
|
40
|
+
}
|
|
41
|
+
function getVisiblePages(currentPage, totalPages) {
|
|
42
|
+
if (totalPages <= 7) {
|
|
43
|
+
return Array.from({ length: totalPages }, (_, index) => index + 1);
|
|
44
|
+
}
|
|
45
|
+
if (currentPage <= 4) {
|
|
46
|
+
return [1, 2, 3, 4, { type: 'ellipsis', page: 5 }, totalPages - 1, totalPages];
|
|
47
|
+
}
|
|
48
|
+
if (currentPage >= totalPages - 3) {
|
|
49
|
+
return [
|
|
50
|
+
1,
|
|
51
|
+
2,
|
|
52
|
+
{ type: 'ellipsis', page: totalPages - 4 },
|
|
53
|
+
totalPages - 3,
|
|
54
|
+
totalPages - 2,
|
|
55
|
+
totalPages - 1,
|
|
56
|
+
totalPages,
|
|
57
|
+
];
|
|
58
|
+
}
|
|
59
|
+
return [
|
|
60
|
+
1,
|
|
61
|
+
{ type: 'ellipsis', page: currentPage - 2 },
|
|
62
|
+
currentPage - 1,
|
|
63
|
+
currentPage,
|
|
64
|
+
currentPage + 1,
|
|
65
|
+
{ type: 'ellipsis', page: currentPage + 2 },
|
|
66
|
+
totalPages,
|
|
67
|
+
];
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=pagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../../src/components/pagination/pagination.tsx"],"names":[],"mappings":"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","sourcesContent":["import { UNSTABLE_IconChevronLeftFill, UNSTABLE_IconChevronRightFill } from '../../icons/index.js';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../button/icon-button.js';\nimport { IconLinkButton } from '../button/icon-link-button.js';\nimport { LinkButton } from '../button/link-button.js';\n\nexport interface PaginationProps {\n /** The current page number. */\n value: number;\n /** The total number of pages. */\n count: number;\n /** The accessibility label for the pagination navigation, must be unique to the page. */\n 'aria-label': string;\n /** A callback function that is called when the page number changes. */\n onPageChange?: (page: number) => void;\n /** A function that returns a URL for a given page number. */\n href?: (page: number) => string;\n}\n\nexport function UNSTABLE_Pagination({ value, count, onPageChange, href, 'aria-label': ariaLabel }: PaginationProps) {\n const visiblePages = getVisiblePages(value, count);\n\n const previousButtonProps = {\n // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181\n icon: <UNSTABLE_IconChevronLeftFill />,\n isDisabled: value === 1,\n // TODO: internationalization\n 'aria-label': 'Previous',\n };\n\n const nextButtonProps = {\n // TODO: icon doesn't look optically centered, see: https://www.figma.com/design/JVWmaCjDeOlrYAkLlJD5gr?node-id=10376-1487#1082340181\n icon: <UNSTABLE_IconChevronRightFill />,\n isDisabled: value === count,\n // TODO: internationalization\n 'aria-label': 'Next',\n };\n\n return (\n <nav className=\"cim-pagination\" aria-label={ariaLabel}>\n <ul className=\"cim-pagination-list\">\n <li>\n {href ? (\n <IconLinkButton {...previousButtonProps} href={href?.(value - 1)} />\n ) : (\n <IconButton {...previousButtonProps} onPress={() => onPageChange?.(value - 1)} />\n )}\n </li>\n\n {visiblePages.map((page) => {\n const isCurrentPage = typeof page === 'number' && page === value;\n const pageNumber = typeof page === 'number' ? page : page.page;\n const pageButtonProps = {\n // TODO: internationalization\n // TODO: review if \"Current page\" is needed once we put `aria-current` on the `button`/`link`\n 'aria-label': isCurrentPage ? `Current page, page ${pageNumber}` : `Go to page ${pageNumber}`,\n children: typeof page === 'number' ? page : '…',\n };\n\n return (\n // TODO: Put `aria-current` on the `button`/`link` instead of the `li` for better accessibility/screen reader support\n // RAC Button doesn't support `aria-current` as of now\n <li key={pageNumber} aria-current={isCurrentPage && href != null ? 'page' : isCurrentPage}>\n {href ? (\n <LinkButton href={href?.(pageNumber)} {...pageButtonProps} />\n ) : (\n <Button onPress={() => onPageChange?.(pageNumber)} {...pageButtonProps} />\n )}\n </li>\n );\n })}\n\n <li>\n {href ? (\n <IconLinkButton {...nextButtonProps} href={href?.(value + 1)} />\n ) : (\n <IconButton {...nextButtonProps} onPress={() => onPageChange?.(value + 1)} />\n )}\n </li>\n </ul>\n </nav>\n );\n}\n\nfunction getVisiblePages(currentPage: number, totalPages: number): (number | { type: 'ellipsis'; page: number })[] {\n if (totalPages <= 7) {\n return Array.from({ length: totalPages }, (_, index) => index + 1);\n }\n\n if (currentPage <= 4) {\n return [1, 2, 3, 4, { type: 'ellipsis', page: 5 }, totalPages - 1, totalPages];\n }\n\n if (currentPage >= totalPages - 3) {\n return [\n 1,\n 2,\n { type: 'ellipsis', page: totalPages - 4 },\n totalPages - 3,\n totalPages - 2,\n totalPages - 1,\n totalPages,\n ];\n }\n\n return [\n 1,\n { type: 'ellipsis', page: currentPage - 2 },\n currentPage - 1,\n currentPage,\n currentPage + 1,\n { type: 'ellipsis', page: currentPage + 2 },\n totalPages,\n ];\n}\n"]}
|