@human-kit/svelte-components 1.0.0-alpha.1 → 1.0.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/FOCUS_STATE_CONTRACT.md +63 -0
- package/dist/FOCUS_STATE_REVIEW_TEMPLATE.md +70 -0
- package/dist/button/README.md +48 -0
- package/dist/button/TODO.md +13 -0
- package/dist/button/index.d.ts +5 -0
- package/dist/button/index.js +4 -0
- package/dist/button/index.parts.d.ts +1 -0
- package/dist/button/index.parts.js +1 -0
- package/dist/button/root/README.md +43 -0
- package/dist/button/root/button-root.svelte +362 -0
- package/dist/button/root/button-root.svelte.d.ts +21 -0
- package/dist/button/root/button-test.svelte +76 -0
- package/dist/button/root/button-test.svelte.d.ts +11 -0
- package/dist/calendar/README.md +66 -0
- package/dist/calendar/TODO.md +23 -0
- package/dist/calendar/body-cell/README.md +15 -0
- package/dist/calendar/body-cell/calendar-body-cell.svelte +230 -0
- package/dist/calendar/body-cell/calendar-body-cell.svelte.d.ts +9 -0
- package/dist/calendar/grid/README.md +13 -0
- package/dist/calendar/grid/calendar-grid-month-scope.svelte +16 -0
- package/dist/calendar/grid/calendar-grid-month-scope.svelte.d.ts +8 -0
- package/dist/calendar/grid/calendar-grid.svelte +45 -0
- package/dist/calendar/grid/calendar-grid.svelte.d.ts +8 -0
- package/dist/calendar/grid/month-scope.d.ts +2 -0
- package/dist/calendar/grid/month-scope.js +8 -0
- package/dist/calendar/grid-body/README.md +13 -0
- package/dist/calendar/grid-body/calendar-grid-body-custom-test.svelte +13 -0
- package/dist/calendar/grid-body/calendar-grid-body-custom-test.svelte.d.ts +18 -0
- package/dist/calendar/grid-body/calendar-grid-body.svelte +36 -0
- package/dist/calendar/grid-body/calendar-grid-body.svelte.d.ts +8 -0
- package/dist/calendar/grid-header/README.md +13 -0
- package/dist/calendar/grid-header/calendar-grid-header-custom-test.svelte +13 -0
- package/dist/calendar/grid-header/calendar-grid-header-custom-test.svelte.d.ts +18 -0
- package/dist/calendar/grid-header/calendar-grid-header.svelte +31 -0
- package/dist/calendar/grid-header/calendar-grid-header.svelte.d.ts +8 -0
- package/dist/calendar/header-cell/README.md +14 -0
- package/dist/calendar/header-cell/calendar-header-cell-test.svelte +11 -0
- package/dist/calendar/header-cell/calendar-header-cell-test.svelte.d.ts +18 -0
- package/dist/calendar/header-cell/calendar-header-cell.svelte +16 -0
- package/dist/calendar/header-cell/calendar-header-cell.svelte.d.ts +8 -0
- package/dist/calendar/heading/README.md +13 -0
- package/dist/calendar/heading/calendar-heading.svelte +17 -0
- package/dist/calendar/heading/calendar-heading.svelte.d.ts +5 -0
- package/dist/calendar/index.d.ts +13 -0
- package/dist/calendar/index.js +13 -0
- package/dist/calendar/index.parts.d.ts +9 -0
- package/dist/calendar/index.parts.js +9 -0
- package/dist/calendar/root/README.md +24 -0
- package/dist/calendar/root/calendar-root-bind-value-test.svelte +14 -0
- package/dist/calendar/root/calendar-root-bind-value-test.svelte.d.ts +3 -0
- package/dist/calendar/root/calendar-root-controlled-clear-test.svelte +20 -0
- package/dist/calendar/root/calendar-root-controlled-clear-test.svelte.d.ts +3 -0
- package/dist/calendar/root/calendar-root-test.svelte +71 -0
- package/dist/calendar/root/calendar-root-test.svelte.d.ts +13 -0
- package/dist/calendar/root/calendar-root.svelte +143 -0
- package/dist/calendar/root/calendar-root.svelte.d.ts +31 -0
- package/dist/calendar/root/context.d.ts +66 -0
- package/dist/calendar/root/context.js +727 -0
- package/dist/calendar/root/date-utils.d.ts +17 -0
- package/dist/calendar/root/date-utils.js +94 -0
- package/dist/calendar/trigger-next/README.md +14 -0
- package/dist/calendar/trigger-next/calendar-trigger-next.svelte +43 -0
- package/dist/calendar/trigger-next/calendar-trigger-next.svelte.d.ts +9 -0
- package/dist/calendar/trigger-previous/README.md +14 -0
- package/dist/calendar/trigger-previous/calendar-trigger-previous.svelte +43 -0
- package/dist/calendar/trigger-previous/calendar-trigger-previous.svelte.d.ts +9 -0
- package/dist/checkbox/README.md +53 -0
- package/dist/checkbox/TODO.md +16 -0
- package/dist/checkbox/index.d.ts +6 -0
- package/dist/checkbox/index.js +6 -0
- package/dist/checkbox/index.parts.d.ts +2 -0
- package/dist/checkbox/index.parts.js +2 -0
- package/dist/checkbox/indicator/README.md +23 -0
- package/dist/checkbox/indicator/checkbox-indicator.svelte +43 -0
- package/dist/checkbox/indicator/checkbox-indicator.svelte.d.ts +10 -0
- package/dist/checkbox/root/README.md +47 -0
- package/dist/checkbox/root/checkbox-label-test.svelte +10 -0
- package/dist/checkbox/root/checkbox-label-test.svelte.d.ts +18 -0
- package/dist/checkbox/root/checkbox-root.svelte +361 -0
- package/dist/checkbox/root/checkbox-root.svelte.d.ts +23 -0
- package/dist/checkbox/root/checkbox-test.svelte +59 -0
- package/dist/checkbox/root/checkbox-test.svelte.d.ts +18 -0
- package/dist/checkbox/root/context.d.ts +21 -0
- package/dist/checkbox/root/context.js +15 -0
- package/dist/clock/README.md +75 -0
- package/dist/clock/axis/README.md +24 -0
- package/dist/clock/axis/clock-axis.svelte +37 -0
- package/dist/clock/axis/clock-axis.svelte.d.ts +8 -0
- package/dist/clock/hooks/use-wheel-scroll.svelte.d.ts +16 -0
- package/dist/clock/hooks/use-wheel-scroll.svelte.js +336 -0
- package/dist/clock/index.d.ts +10 -0
- package/dist/clock/index.js +10 -0
- package/dist/clock/index.parts.d.ts +4 -0
- package/dist/clock/index.parts.js +4 -0
- package/dist/clock/root/README.md +38 -0
- package/dist/clock/root/clock-root-test.svelte +62 -0
- package/dist/clock/root/clock-root-test.svelte.d.ts +14 -0
- package/dist/clock/root/clock-root.svelte +329 -0
- package/dist/clock/root/clock-root.svelte.d.ts +25 -0
- package/dist/clock/root/context.d.ts +22 -0
- package/dist/clock/root/context.js +15 -0
- package/dist/clock/root/resolve-visible-columns.d.ts +7 -0
- package/dist/clock/root/resolve-visible-columns.js +16 -0
- package/dist/clock/root/time-utils.d.ts +48 -0
- package/dist/clock/root/time-utils.js +314 -0
- package/dist/clock/root/wheel-options.d.ts +17 -0
- package/dist/clock/root/wheel-options.js +63 -0
- package/dist/clock/wheel-column/README.md +25 -0
- package/dist/clock/wheel-column/clock-wheel-column-bindable-test.svelte +16 -0
- package/dist/clock/wheel-column/clock-wheel-column-bindable-test.svelte.d.ts +3 -0
- package/dist/clock/wheel-column/clock-wheel-column-custom-snippet-test.svelte +29 -0
- package/dist/clock/wheel-column/clock-wheel-column-custom-snippet-test.svelte.d.ts +6 -0
- package/dist/clock/wheel-column/clock-wheel-column-default-height-test.svelte +11 -0
- package/dist/clock/wheel-column/clock-wheel-column-default-height-test.svelte.d.ts +3 -0
- package/dist/clock/wheel-column/clock-wheel-column-test.svelte +38 -0
- package/dist/clock/wheel-column/clock-wheel-column-test.svelte.d.ts +12 -0
- package/dist/clock/wheel-column/clock-wheel-column-tp-test.svelte +38 -0
- package/dist/clock/wheel-column/clock-wheel-column-tp-test.svelte.d.ts +12 -0
- package/dist/clock/wheel-column/clock-wheel-column-untagged-snippet-test.svelte +29 -0
- package/dist/clock/wheel-column/clock-wheel-column-untagged-snippet-test.svelte.d.ts +6 -0
- package/dist/clock/wheel-column/clock-wheel-column.svelte +499 -0
- package/dist/clock/wheel-column/clock-wheel-column.svelte.d.ts +17 -0
- package/dist/clock/wheel-item/README.md +17 -0
- package/dist/clock/wheel-item/clock-wheel-item.svelte +49 -0
- package/dist/clock/wheel-item/clock-wheel-item.svelte.d.ts +17 -0
- package/dist/combobox/README.md +46 -0
- package/dist/combobox/TODO.md +28 -175
- package/dist/combobox/button/README.md +20 -0
- package/dist/combobox/button/combobox-button-test.svelte +27 -0
- package/dist/combobox/button/combobox-button-test.svelte.d.ts +6 -0
- package/dist/combobox/button/combobox-button.svelte +10 -11
- package/dist/combobox/clear/README.md +21 -0
- package/dist/combobox/clear/combobox-clear-test.svelte +34 -0
- package/dist/combobox/clear/combobox-clear-test.svelte.d.ts +3 -0
- package/dist/combobox/clear/combobox-clear.svelte +61 -0
- package/dist/combobox/clear/combobox-clear.svelte.d.ts +9 -0
- package/dist/combobox/index.d.ts +5 -3
- package/dist/combobox/index.js +5 -3
- package/dist/combobox/index.parts.d.ts +2 -0
- package/dist/combobox/index.parts.js +2 -0
- package/dist/combobox/input/README.md +16 -0
- package/dist/combobox/input/combobox-input.svelte +43 -12
- package/dist/combobox/item/README.md +27 -0
- package/dist/combobox/item/combobox-item-implicit-text-test.svelte +1 -1
- package/dist/combobox/item/combobox-listboxitem.svelte +3 -9
- package/dist/combobox/item-indicator/README.md +15 -0
- package/dist/combobox/item-indicator/combobox-item-indicator.svelte +4 -15
- package/dist/combobox/list/README.md +27 -0
- package/dist/combobox/list/combobox-listbox.svelte.d.ts +1 -1
- package/dist/combobox/popover/README.md +27 -0
- package/dist/combobox/popover/combobox-popover-props-test.svelte +38 -0
- package/dist/combobox/popover/combobox-popover-props-test.svelte.d.ts +11 -0
- package/dist/combobox/popover/combobox-popover.svelte +166 -23
- package/dist/combobox/popover/combobox-popover.svelte.d.ts +3 -3
- package/dist/combobox/popover/combobox-scrollable-list-test.svelte +23 -0
- package/dist/combobox/popover/combobox-scrollable-list-test.svelte.d.ts +18 -0
- package/dist/combobox/root/README.md +45 -0
- package/dist/combobox/root/combobox-multiselect-test.svelte +1 -1
- package/dist/combobox/root/combobox-numeric-string-id-test.svelte +1 -1
- package/dist/combobox/root/combobox-test.svelte +16 -3
- package/dist/combobox/root/combobox-test.svelte.d.ts +1 -0
- package/dist/combobox/root/combobox.svelte +100 -4
- package/dist/combobox/root/combobox.svelte.d.ts +1 -0
- package/dist/combobox/root/context.d.ts +19 -1
- package/dist/combobox/tag/README.md +37 -0
- package/dist/combobox/tag-remove/README.md +14 -0
- package/dist/combobox/tag-remove/combobox-tag-remove.svelte +3 -2
- package/dist/combobox/tags/README.md +23 -0
- package/dist/combobox/trigger/README.md +21 -0
- package/dist/combobox/trigger/combobox-trigger.svelte +56 -0
- package/dist/combobox/trigger/combobox-trigger.svelte.d.ts +9 -0
- package/dist/datepicker/README.md +100 -0
- package/dist/datepicker/TODO.md +28 -0
- package/dist/datepicker/calendar/README.md +19 -0
- package/dist/datepicker/calendar/date-picker-calendar-unsafe-props-test.svelte +60 -0
- package/dist/datepicker/calendar/date-picker-calendar-unsafe-props-test.svelte.d.ts +3 -0
- package/dist/datepicker/calendar/date-picker-calendar.svelte +65 -0
- package/dist/datepicker/calendar/date-picker-calendar.svelte.d.ts +10 -0
- package/dist/datepicker/index.d.ts +18 -0
- package/dist/datepicker/index.js +18 -0
- package/dist/datepicker/index.parts.d.ts +14 -0
- package/dist/datepicker/index.parts.js +14 -0
- package/dist/datepicker/input/README.md +15 -0
- package/dist/datepicker/input/date-picker-input.svelte +108 -0
- package/dist/datepicker/input/date-picker-input.svelte.d.ts +11 -0
- package/dist/datepicker/internal/strict-props.d.ts +2 -0
- package/dist/datepicker/internal/strict-props.js +28 -0
- package/dist/datepicker/popover/README.md +20 -0
- package/dist/datepicker/popover/date-picker-popover-handler-test.svelte +57 -0
- package/dist/datepicker/popover/date-picker-popover-handler-test.svelte.d.ts +3 -0
- package/dist/datepicker/popover/date-picker-popover-unsafe-props-test.svelte +45 -0
- package/dist/datepicker/popover/date-picker-popover-unsafe-props-test.svelte.d.ts +18 -0
- package/dist/datepicker/popover/date-picker-popover.svelte +87 -0
- package/dist/datepicker/popover/date-picker-popover.svelte.d.ts +7 -0
- package/dist/datepicker/root/README.md +38 -0
- package/dist/datepicker/root/context.d.ts +43 -0
- package/dist/datepicker/root/context.js +15 -0
- package/dist/datepicker/root/date-picker-bindable-empty-test.svelte +24 -0
- package/dist/datepicker/root/date-picker-bindable-empty-test.svelte.d.ts +3 -0
- package/dist/datepicker/root/date-picker-bindable-test.svelte +41 -0
- package/dist/datepicker/root/date-picker-bindable-test.svelte.d.ts +3 -0
- package/dist/datepicker/root/date-picker-empty-test.svelte +47 -0
- package/dist/datepicker/root/date-picker-empty-test.svelte.d.ts +3 -0
- package/dist/datepicker/root/date-picker-locale-typing-test.svelte +47 -0
- package/dist/datepicker/root/date-picker-locale-typing-test.svelte.d.ts +3 -0
- package/dist/datepicker/root/date-picker-open-cancel-test.svelte +54 -0
- package/dist/datepicker/root/date-picker-open-cancel-test.svelte.d.ts +8 -0
- package/dist/datepicker/root/date-picker-root.svelte +495 -0
- package/dist/datepicker/root/date-picker-root.svelte.d.ts +24 -0
- package/dist/datepicker/root/date-picker-test.svelte +86 -0
- package/dist/datepicker/root/date-picker-test.svelte.d.ts +13 -0
- package/dist/datepicker/root/date-utils.d.ts +17 -0
- package/dist/datepicker/root/date-utils.js +138 -0
- package/dist/datepicker/root/draft-evaluation.d.ts +13 -0
- package/dist/datepicker/root/draft-evaluation.js +56 -0
- package/dist/datepicker/root/focus-controller.d.ts +3 -0
- package/dist/datepicker/root/focus-controller.js +15 -0
- package/dist/datepicker/root/open-change.d.ts +5 -0
- package/dist/datepicker/root/open-change.js +13 -0
- package/dist/datepicker/root/open-controller.d.ts +7 -0
- package/dist/datepicker/root/open-controller.js +15 -0
- package/dist/datepicker/root/segment-controller.d.ts +8 -0
- package/dist/datepicker/root/segment-controller.js +53 -0
- package/dist/datepicker/root/segment-state.d.ts +18 -0
- package/dist/datepicker/root/segment-state.js +134 -0
- package/dist/datepicker/root/value-commit.d.ts +4 -0
- package/dist/datepicker/root/value-commit.js +8 -0
- package/dist/datepicker/segment/README.md +14 -0
- package/dist/datepicker/segment/date-picker-segment.svelte +319 -0
- package/dist/datepicker/segment/date-picker-segment.svelte.d.ts +9 -0
- package/dist/datepicker/trigger/README.md +14 -0
- package/dist/datepicker/trigger/date-picker-trigger.svelte +110 -0
- package/dist/datepicker/trigger/date-picker-trigger.svelte.d.ts +9 -0
- package/dist/dialog/README.md +35 -0
- package/dist/dialog/content/README.md +16 -0
- package/dist/dialog/content/dialog-content.svelte +6 -6
- package/dist/dialog/index.d.ts +3 -3
- package/dist/dialog/index.js +2 -2
- package/dist/dialog/overlay/README.md +13 -0
- package/dist/dialog/portal/README.md +12 -0
- package/dist/dialog/root/README.md +53 -0
- package/dist/dialog/root/context.d.ts +2 -1
- package/dist/dialog/root/dialog-root.svelte +9 -2
- package/dist/dialog/trigger/README.md +12 -0
- package/dist/dialog/trigger/dialog-trigger-multi-button-test.svelte +19 -0
- package/dist/dialog/trigger/dialog-trigger-multi-button-test.svelte.d.ts +18 -0
- package/dist/dialog/trigger/dialog-trigger.svelte +18 -6
- package/dist/index.d.ts +31 -13
- package/dist/index.js +31 -13
- package/dist/input/README.md +38 -0
- package/dist/input/TODO.md +12 -0
- package/dist/input/input-test.svelte +43 -0
- package/dist/input/input-test.svelte.d.ts +12 -0
- package/dist/input/input.svelte +151 -7
- package/dist/input/input.svelte.d.ts +8 -2
- package/dist/listbox/README.md +26 -0
- package/dist/listbox/index.d.ts +3 -3
- package/dist/listbox/index.js +3 -3
- package/dist/listbox/item/README.md +25 -0
- package/dist/listbox/item/listbox-item.svelte +158 -2
- package/dist/listbox/item/listbox-item.svelte.d.ts +4 -0
- package/dist/listbox/root/README.md +40 -0
- package/dist/listbox/root/listbox-test.svelte +14 -2
- package/dist/listbox/root/listbox-test.svelte.d.ts +1 -0
- package/dist/listbox/root/listbox.svelte +44 -0
- package/dist/listbox/root/listbox.svelte.d.ts +2 -2
- package/dist/locale-provider/context.d.ts +8 -0
- package/dist/locale-provider/context.js +18 -0
- package/dist/locale-provider/index.d.ts +4 -0
- package/dist/locale-provider/index.js +4 -0
- package/dist/locale-provider/locale-provider-initial-value-test.svelte +15 -0
- package/dist/locale-provider/locale-provider-initial-value-test.svelte.d.ts +7 -0
- package/dist/locale-provider/locale-provider-test.svelte +20 -0
- package/dist/locale-provider/locale-provider-test.svelte.d.ts +6 -0
- package/dist/locale-provider/locale-provider-value-probe.svelte +22 -0
- package/dist/locale-provider/locale-provider-value-probe.svelte.d.ts +6 -0
- package/dist/locale-provider/locale-provider.svelte +23 -0
- package/dist/locale-provider/locale-provider.svelte.d.ts +8 -0
- package/dist/popover/README.md +42 -0
- package/dist/popover/content/README.md +36 -0
- package/dist/popover/content/popover-content-standalone-test.svelte +28 -0
- package/dist/popover/content/popover-content-standalone-test.svelte.d.ts +6 -0
- package/dist/popover/content/popover-content-test.svelte +32 -2
- package/dist/popover/content/popover-content-test.svelte.d.ts +3 -1
- package/dist/popover/content/popover-content.svelte +277 -24
- package/dist/popover/content/popover-content.svelte.d.ts +5 -1
- package/dist/popover/index.d.ts +3 -3
- package/dist/popover/index.js +3 -5
- package/dist/popover/root/README.md +25 -0
- package/dist/popover/root/context.d.ts +16 -7
- package/dist/popover/root/context.js +0 -2
- package/dist/popover/root/focus-state.d.ts +4 -0
- package/dist/popover/root/focus-state.js +33 -0
- package/dist/popover/root/popover-root.svelte +90 -17
- package/dist/popover/root/popover-root.svelte.d.ts +2 -1
- package/dist/popover/root/popover-test.svelte +2 -1
- package/dist/popover/root/popover-test.svelte.d.ts +2 -1
- package/dist/popover/trigger/README.md +23 -0
- package/dist/popover/trigger/popover-trigger-button.svelte +14 -10
- package/dist/popover/trigger/popover-trigger-button.svelte.d.ts +2 -3
- package/dist/popover/trigger/popover-trigger-multi-button-test.svelte +16 -0
- package/dist/popover/trigger/popover-trigger-multi-button-test.svelte.d.ts +18 -0
- package/dist/popover/trigger/popover-trigger.svelte +19 -7
- package/dist/portal/portal.svelte +3 -1
- package/dist/primitives/click-outside.d.ts +1 -1
- package/dist/primitives/click-outside.js +1 -1
- package/dist/primitives/floating.js +12 -4
- package/dist/primitives/focus-trap.d.ts +7 -2
- package/dist/primitives/focus-trap.js +50 -17
- package/dist/primitives/index.d.ts +1 -0
- package/dist/primitives/index.js +1 -0
- package/dist/primitives/input-modality.d.ts +7 -0
- package/dist/primitives/input-modality.js +125 -0
- package/dist/table/IMPLEMENTATION_NOTES.md +8 -0
- package/dist/table/PLAN-HIDDEN-COLUMNS.md +152 -0
- package/dist/table/PLAN.md +924 -0
- package/dist/table/README.md +116 -0
- package/dist/table/SELECTION_CHECKBOX_PLAN.md +234 -0
- package/dist/table/TODO.md +100 -0
- package/dist/table/body/README.md +24 -0
- package/dist/table/body/table-body.svelte +25 -0
- package/dist/table/body/table-body.svelte.d.ts +9 -0
- package/dist/table/cell/README.md +25 -0
- package/dist/table/cell/table-cell.svelte +247 -0
- package/dist/table/cell/table-cell.svelte.d.ts +9 -0
- package/dist/table/checkbox/README.md +38 -0
- package/dist/table/checkbox/table-checkbox-test.svelte +121 -0
- package/dist/table/checkbox/table-checkbox-test.svelte.d.ts +16 -0
- package/dist/table/checkbox/table-checkbox.svelte +274 -0
- package/dist/table/checkbox/table-checkbox.svelte.d.ts +13 -0
- package/dist/table/checkbox-indicator/README.md +29 -0
- package/dist/table/checkbox-indicator/table-checkbox-indicator.svelte +22 -0
- package/dist/table/checkbox-indicator/table-checkbox-indicator.svelte.d.ts +10 -0
- package/dist/table/column/README.md +32 -0
- package/dist/table/column/table-column.svelte +108 -0
- package/dist/table/column/table-column.svelte.d.ts +18 -0
- package/dist/table/column-header-cell/README.md +28 -0
- package/dist/table/column-header-cell/table-column-header-cell.svelte +281 -0
- package/dist/table/column-header-cell/table-column-header-cell.svelte.d.ts +9 -0
- package/dist/table/column-resizer/README.md +32 -0
- package/dist/table/column-resizer/table-column-resizer-freeze-layout-test.svelte +51 -0
- package/dist/table/column-resizer/table-column-resizer-freeze-layout-test.svelte.d.ts +3 -0
- package/dist/table/column-resizer/table-column-resizer-selection-column-test.svelte +83 -0
- package/dist/table/column-resizer/table-column-resizer-selection-column-test.svelte.d.ts +3 -0
- package/dist/table/column-resizer/table-column-resizer-test.svelte +75 -0
- package/dist/table/column-resizer/table-column-resizer-test.svelte.d.ts +3 -0
- package/dist/table/column-resizer/table-column-resizer.svelte +616 -0
- package/dist/table/column-resizer/table-column-resizer.svelte.d.ts +11 -0
- package/dist/table/empty-state/README.md +25 -0
- package/dist/table/empty-state/table-empty-state.svelte +38 -0
- package/dist/table/empty-state/table-empty-state.svelte.d.ts +8 -0
- package/dist/table/footer/README.md +24 -0
- package/dist/table/footer/table-footer.svelte +19 -0
- package/dist/table/footer/table-footer.svelte.d.ts +9 -0
- package/dist/table/header/README.md +24 -0
- package/dist/table/header/table-header.svelte +19 -0
- package/dist/table/header/table-header.svelte.d.ts +9 -0
- package/dist/table/index.d.ts +16 -0
- package/dist/table/index.js +16 -0
- package/dist/table/index.parts.d.ts +12 -0
- package/dist/table/index.parts.js +12 -0
- package/dist/table/root/README.md +56 -0
- package/dist/table/root/context.d.ts +198 -0
- package/dist/table/root/context.js +1426 -0
- package/dist/table/root/table-reorder-test.svelte +64 -0
- package/dist/table/root/table-reorder-test.svelte.d.ts +3 -0
- package/dist/table/root/table-root.svelte +410 -0
- package/dist/table/root/table-root.svelte.d.ts +29 -0
- package/dist/table/root/table-test.svelte +165 -0
- package/dist/table/root/table-test.svelte.d.ts +25 -0
- package/dist/table/row/README.md +27 -0
- package/dist/table/row/table-row.svelte +321 -0
- package/dist/table/row/table-row.svelte.d.ts +13 -0
- package/dist/test-utils/focus-contract.d.ts +3 -0
- package/dist/test-utils/focus-contract.js +26 -0
- package/dist/timepicker/IMPLEMENTATION_PLAN.md +254 -0
- package/dist/timepicker/README.md +97 -0
- package/dist/timepicker/TODO.md +86 -0
- package/dist/timepicker/clock/README.md +14 -0
- package/dist/timepicker/clock/time-picker-clock-test.svelte +45 -0
- package/dist/timepicker/clock/time-picker-clock-test.svelte.d.ts +11 -0
- package/dist/timepicker/clock/time-picker-clock.svelte +65 -0
- package/dist/timepicker/clock/time-picker-clock.svelte.d.ts +10 -0
- package/dist/timepicker/index.d.ts +14 -0
- package/dist/timepicker/index.js +14 -0
- package/dist/timepicker/index.parts.d.ts +8 -0
- package/dist/timepicker/index.parts.js +8 -0
- package/dist/timepicker/input/README.md +15 -0
- package/dist/timepicker/input/time-picker-input-forwarding-test.svelte +40 -0
- package/dist/timepicker/input/time-picker-input-forwarding-test.svelte.d.ts +3 -0
- package/dist/timepicker/input/time-picker-input.svelte +109 -0
- package/dist/timepicker/input/time-picker-input.svelte.d.ts +11 -0
- package/dist/timepicker/internal/strict-props.d.ts +4 -0
- package/dist/timepicker/internal/strict-props.js +51 -0
- package/dist/timepicker/popover/README.md +20 -0
- package/dist/timepicker/popover/time-picker-popover-unsafe-props-test.svelte +22 -0
- package/dist/timepicker/popover/time-picker-popover-unsafe-props-test.svelte.d.ts +3 -0
- package/dist/timepicker/popover/time-picker-popover.svelte +89 -0
- package/dist/timepicker/popover/time-picker-popover.svelte.d.ts +7 -0
- package/dist/timepicker/root/README.md +42 -0
- package/dist/timepicker/root/context.d.ts +51 -0
- package/dist/timepicker/root/context.js +15 -0
- package/dist/timepicker/root/time-picker-12h-test.svelte +22 -0
- package/dist/timepicker/root/time-picker-12h-test.svelte.d.ts +3 -0
- package/dist/timepicker/root/time-picker-bindable-test.svelte +25 -0
- package/dist/timepicker/root/time-picker-bindable-test.svelte.d.ts +3 -0
- package/dist/timepicker/root/time-picker-empty-test.svelte +20 -0
- package/dist/timepicker/root/time-picker-empty-test.svelte.d.ts +3 -0
- package/dist/timepicker/root/time-picker-root.svelte +625 -0
- package/dist/timepicker/root/time-picker-root.svelte.d.ts +28 -0
- package/dist/timepicker/root/time-picker-test.svelte +72 -0
- package/dist/timepicker/root/time-picker-test.svelte.d.ts +15 -0
- package/dist/timepicker/root/time-utils.d.ts +1 -0
- package/dist/timepicker/root/time-utils.js +3 -0
- package/dist/timepicker/segment/README.md +14 -0
- package/dist/timepicker/segment/time-picker-segment.svelte +365 -0
- package/dist/timepicker/segment/time-picker-segment.svelte.d.ts +9 -0
- package/dist/timepicker/trigger/README.md +14 -0
- package/dist/timepicker/trigger/time-picker-trigger-forwarding-test.svelte +35 -0
- package/dist/timepicker/trigger/time-picker-trigger-forwarding-test.svelte.d.ts +3 -0
- package/dist/timepicker/trigger/time-picker-trigger.svelte +122 -0
- package/dist/timepicker/trigger/time-picker-trigger.svelte.d.ts +9 -0
- package/dist/utils/date-only.d.ts +11 -0
- package/dist/utils/date-only.js +53 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +1 -0
- package/package.json +41 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const CalendarGridHeaderCustomTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type CalendarGridHeaderCustomTest = InstanceType<typeof CalendarGridHeaderCustomTest>;
|
|
18
|
+
export default CalendarGridHeaderCustomTest;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import { useCalendarContext } from '../root/context';
|
|
4
|
+
import CalendarHeaderCell from '../header-cell/calendar-header-cell.svelte';
|
|
5
|
+
|
|
6
|
+
type CalendarGridHeaderProps = {
|
|
7
|
+
children?: Snippet<[string]>;
|
|
8
|
+
class?: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
let { children, class: className = '' }: CalendarGridHeaderProps = $props();
|
|
12
|
+
|
|
13
|
+
const calendar = useCalendarContext();
|
|
14
|
+
const layoutVersion = calendar.layoutVersion;
|
|
15
|
+
const weekdays = $derived.by(() => {
|
|
16
|
+
void $layoutVersion;
|
|
17
|
+
return calendar.weekdayLabels;
|
|
18
|
+
});
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<thead class={className}>
|
|
22
|
+
<tr>
|
|
23
|
+
{#each weekdays as day (day)}
|
|
24
|
+
{#if children}
|
|
25
|
+
{@render children(day)}
|
|
26
|
+
{:else}
|
|
27
|
+
<CalendarHeaderCell>{day}</CalendarHeaderCell>
|
|
28
|
+
{/if}
|
|
29
|
+
{/each}
|
|
30
|
+
</tr>
|
|
31
|
+
</thead>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
type CalendarGridHeaderProps = {
|
|
3
|
+
children?: Snippet<[string]>;
|
|
4
|
+
class?: string;
|
|
5
|
+
};
|
|
6
|
+
declare const CalendarGridHeader: import("svelte").Component<CalendarGridHeaderProps, {}, "">;
|
|
7
|
+
type CalendarGridHeader = ReturnType<typeof CalendarGridHeader>;
|
|
8
|
+
export default CalendarGridHeader;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# Calendar HeaderCell
|
|
2
|
+
|
|
3
|
+
## API reference
|
|
4
|
+
|
|
5
|
+
### Calendar.HeaderCell
|
|
6
|
+
|
|
7
|
+
Name: `Calendar.HeaderCell`
|
|
8
|
+
Description: Weekday heading cell part used inside `Calendar.GridHeader`.
|
|
9
|
+
|
|
10
|
+
| Prop | Type | Default | Description |
|
|
11
|
+
| -------------- | -------------------------------------- | ----------- | -------------------------------------------------- |
|
|
12
|
+
| `children` | `Snippet` | `undefined` | Optional custom header cell content. |
|
|
13
|
+
| `class` | `string` | `''` | CSS class names for the header cell element. |
|
|
14
|
+
| `...restProps` | `HTMLAttributes<HTMLTableCellElement>` | `-` | Additional attributes forwarded to the table cell. |
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const CalendarHeaderCellTest: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type CalendarHeaderCellTest = InstanceType<typeof CalendarHeaderCellTest>;
|
|
18
|
+
export default CalendarHeaderCellTest;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
type CalendarHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
let { children, class: className = '', ...restProps }: CalendarHeaderCellProps = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<th role="columnheader" class={className} {...restProps}>
|
|
13
|
+
{#if children}
|
|
14
|
+
{@render children()}
|
|
15
|
+
{/if}
|
|
16
|
+
</th>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
type CalendarHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
|
|
4
|
+
children?: Snippet;
|
|
5
|
+
};
|
|
6
|
+
declare const CalendarHeaderCell: import("svelte").Component<CalendarHeaderCellProps, {}, "">;
|
|
7
|
+
type CalendarHeaderCell = ReturnType<typeof CalendarHeaderCell>;
|
|
8
|
+
export default CalendarHeaderCell;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Calendar Heading
|
|
2
|
+
|
|
3
|
+
## API reference
|
|
4
|
+
|
|
5
|
+
### Calendar.Heading
|
|
6
|
+
|
|
7
|
+
Name: `Calendar.Heading`
|
|
8
|
+
Description: Label part that displays the currently visible calendar period.
|
|
9
|
+
|
|
10
|
+
| Prop | Type | Default | Description |
|
|
11
|
+
| -------------- | ------------------------------------ | ------- | ------------------------------------------------------- |
|
|
12
|
+
| `class` | `string` | `''` | CSS class names for the heading element (`h2`). |
|
|
13
|
+
| `...restProps` | `HTMLAttributes<HTMLHeadingElement>` | `-` | Additional attributes forwarded to the heading element. |
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import { useCalendarContext } from '../root/context';
|
|
4
|
+
|
|
5
|
+
type CalendarHeadingProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
|
|
6
|
+
|
|
7
|
+
let { class: className = '', ...restProps }: CalendarHeadingProps = $props();
|
|
8
|
+
|
|
9
|
+
const calendar = useCalendarContext();
|
|
10
|
+
const layoutVersion = calendar.layoutVersion;
|
|
11
|
+
const heading = $derived.by(() => {
|
|
12
|
+
void $layoutVersion;
|
|
13
|
+
return calendar.headingLabel;
|
|
14
|
+
});
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<h2 class={className} aria-live="polite" {...restProps}>{heading}</h2>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
type CalendarHeadingProps = Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
|
|
3
|
+
declare const CalendarHeading: import("svelte").Component<CalendarHeadingProps, {}, "">;
|
|
4
|
+
type CalendarHeading = ReturnType<typeof CalendarHeading>;
|
|
5
|
+
export default CalendarHeading;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export * as Calendar from './index.parts.js';
|
|
2
|
+
export { default as CalendarRoot } from './root/calendar-root.svelte';
|
|
3
|
+
export { default as CalendarTriggerPrevious } from './trigger-previous/calendar-trigger-previous.svelte';
|
|
4
|
+
export { default as CalendarHeading } from './heading/calendar-heading.svelte';
|
|
5
|
+
export { default as CalendarTriggerNext } from './trigger-next/calendar-trigger-next.svelte';
|
|
6
|
+
export { default as CalendarGrid } from './grid/calendar-grid.svelte';
|
|
7
|
+
export { default as CalendarGridHeader } from './grid-header/calendar-grid-header.svelte';
|
|
8
|
+
export { default as CalendarHeaderCell } from './header-cell/calendar-header-cell.svelte';
|
|
9
|
+
export { default as CalendarGridBody } from './grid-body/calendar-grid-body.svelte';
|
|
10
|
+
export { default as CalendarBodyCell } from './body-cell/calendar-body-cell.svelte';
|
|
11
|
+
export { getCalendarContext, setCalendarContext, useCalendarContext, createCalendarContext, type CalendarContext, type CalendarMonth, type CalendarSelectionMode, type CalendarRangeValue, type CalendarValueBySelectionMode, type CalendarValue, type CreateCalendarContextOptions } from './root/context.js';
|
|
12
|
+
import * as CalendarParts from './index.parts.js';
|
|
13
|
+
export default CalendarParts;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export * as Calendar from './index.parts.js';
|
|
2
|
+
export { default as CalendarRoot } from './root/calendar-root.svelte';
|
|
3
|
+
export { default as CalendarTriggerPrevious } from './trigger-previous/calendar-trigger-previous.svelte';
|
|
4
|
+
export { default as CalendarHeading } from './heading/calendar-heading.svelte';
|
|
5
|
+
export { default as CalendarTriggerNext } from './trigger-next/calendar-trigger-next.svelte';
|
|
6
|
+
export { default as CalendarGrid } from './grid/calendar-grid.svelte';
|
|
7
|
+
export { default as CalendarGridHeader } from './grid-header/calendar-grid-header.svelte';
|
|
8
|
+
export { default as CalendarHeaderCell } from './header-cell/calendar-header-cell.svelte';
|
|
9
|
+
export { default as CalendarGridBody } from './grid-body/calendar-grid-body.svelte';
|
|
10
|
+
export { default as CalendarBodyCell } from './body-cell/calendar-body-cell.svelte';
|
|
11
|
+
export { getCalendarContext, setCalendarContext, useCalendarContext, createCalendarContext } from './root/context.js';
|
|
12
|
+
import * as CalendarParts from './index.parts.js';
|
|
13
|
+
export default CalendarParts;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { default as Root } from './root/calendar-root.svelte';
|
|
2
|
+
export { default as TriggerPrevious } from './trigger-previous/calendar-trigger-previous.svelte';
|
|
3
|
+
export { default as Heading } from './heading/calendar-heading.svelte';
|
|
4
|
+
export { default as TriggerNext } from './trigger-next/calendar-trigger-next.svelte';
|
|
5
|
+
export { default as Grid } from './grid/calendar-grid.svelte';
|
|
6
|
+
export { default as GridHeader } from './grid-header/calendar-grid-header.svelte';
|
|
7
|
+
export { default as HeaderCell } from './header-cell/calendar-header-cell.svelte';
|
|
8
|
+
export { default as GridBody } from './grid-body/calendar-grid-body.svelte';
|
|
9
|
+
export { default as BodyCell } from './body-cell/calendar-body-cell.svelte';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export { default as Root } from './root/calendar-root.svelte';
|
|
2
|
+
export { default as TriggerPrevious } from './trigger-previous/calendar-trigger-previous.svelte';
|
|
3
|
+
export { default as Heading } from './heading/calendar-heading.svelte';
|
|
4
|
+
export { default as TriggerNext } from './trigger-next/calendar-trigger-next.svelte';
|
|
5
|
+
export { default as Grid } from './grid/calendar-grid.svelte';
|
|
6
|
+
export { default as GridHeader } from './grid-header/calendar-grid-header.svelte';
|
|
7
|
+
export { default as HeaderCell } from './header-cell/calendar-header-cell.svelte';
|
|
8
|
+
export { default as GridBody } from './grid-body/calendar-grid-body.svelte';
|
|
9
|
+
export { default as BodyCell } from './body-cell/calendar-body-cell.svelte';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# Calendar Root
|
|
2
|
+
|
|
3
|
+
## API reference
|
|
4
|
+
|
|
5
|
+
### Calendar.Root
|
|
6
|
+
|
|
7
|
+
Name: `Calendar.Root`
|
|
8
|
+
Description: Root state container for date grid rendering, navigation, selection, and locale-aware formatting.
|
|
9
|
+
|
|
10
|
+
| Prop | Type | Default | Description |
|
|
11
|
+
| ------------------- | ---------------------------------------------------------- | ----------- | ------------------------------------------------------------------- |
|
|
12
|
+
| `selectionMode` | `'single' \| 'range'` | `'single'` | Selection behavior and value shape. |
|
|
13
|
+
| `value` | `CalendarDateValue \| CalendarRangeValue \| undefined` | `bindable` | Controlled selected value (single date or `{ start, end }`). |
|
|
14
|
+
| `defaultValue` | `CalendarDateValue \| CalendarRangeValue \| undefined` | `undefined` | Initial value for uncontrolled mode. |
|
|
15
|
+
| `onChange` | `(value: CalendarDateValue \| CalendarRangeValue) => void` | `undefined` | Called when selection changes. |
|
|
16
|
+
| `visibleMonths` | `number` | `1` | Number of month grids rendered simultaneously. |
|
|
17
|
+
| `showOutsideDays` | `boolean` | `false` | Whether days outside the visible month remain rendered/interactive. |
|
|
18
|
+
| `isDateUnavailable` | `(date: string) => boolean` | `undefined` | Marks specific dates as unavailable. |
|
|
19
|
+
| `isDisabled` | `boolean` | `false` | Disables interaction and navigation. |
|
|
20
|
+
| `isReadOnly` | `boolean` | `false` | Keeps navigation while preventing selection updates. |
|
|
21
|
+
| `children` | `Snippet` | `undefined` | Composed `Calendar` parts. |
|
|
22
|
+
| `class` | `string` | `''` | CSS class names for the root wrapper. |
|
|
23
|
+
| `id` | `string` | `undefined` | Optional root id. |
|
|
24
|
+
| `aria-label` | `string` | `undefined` | Accessible label for the root wrapper. |
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Calendar from '../index';
|
|
3
|
+
|
|
4
|
+
let value = $state('');
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<Calendar.Root bind:value defaultValue="2026-02-10" aria-label="Bind value test calendar">
|
|
8
|
+
<Calendar.Grid>
|
|
9
|
+
<Calendar.GridHeader />
|
|
10
|
+
<Calendar.GridBody />
|
|
11
|
+
</Calendar.Grid>
|
|
12
|
+
</Calendar.Root>
|
|
13
|
+
|
|
14
|
+
<div data-testid="calendar-value">{value}</div>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Calendar from '../index';
|
|
3
|
+
|
|
4
|
+
let value = $state('2026-02-10');
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<Calendar.Root
|
|
8
|
+
selectionMode="single"
|
|
9
|
+
{value}
|
|
10
|
+
onChange={(nextValue: string) => (value = nextValue)}
|
|
11
|
+
aria-label="Controlled clear test calendar"
|
|
12
|
+
>
|
|
13
|
+
<Calendar.Grid>
|
|
14
|
+
<Calendar.GridHeader />
|
|
15
|
+
<Calendar.GridBody />
|
|
16
|
+
</Calendar.Grid>
|
|
17
|
+
</Calendar.Root>
|
|
18
|
+
|
|
19
|
+
<button type="button" data-testid="clear-value" onclick={() => (value = '')}>Clear value</button>
|
|
20
|
+
<div data-testid="calendar-value">{value}</div>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Calendar from '../index';
|
|
3
|
+
import type { CalendarRangeValue, CalendarSelectionMode, CalendarValue } from './context';
|
|
4
|
+
|
|
5
|
+
type Props = {
|
|
6
|
+
selectionMode?: CalendarSelectionMode;
|
|
7
|
+
visibleMonths?: number;
|
|
8
|
+
showOutsideDays?: boolean;
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
isReadOnly?: boolean;
|
|
11
|
+
defaultValue?: CalendarValue;
|
|
12
|
+
isDateUnavailable?: (date: string) => boolean;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
let {
|
|
16
|
+
selectionMode = 'single',
|
|
17
|
+
visibleMonths = 1,
|
|
18
|
+
showOutsideDays = false,
|
|
19
|
+
isDisabled = false,
|
|
20
|
+
isReadOnly = false,
|
|
21
|
+
defaultValue,
|
|
22
|
+
isDateUnavailable
|
|
23
|
+
}: Props = $props();
|
|
24
|
+
|
|
25
|
+
const singleDefaultValue = $derived.by(() =>
|
|
26
|
+
typeof defaultValue === 'string' ? defaultValue : undefined
|
|
27
|
+
);
|
|
28
|
+
const rangeDefaultValue = $derived.by(() =>
|
|
29
|
+
typeof defaultValue === 'string' ? undefined : (defaultValue as CalendarRangeValue | undefined)
|
|
30
|
+
);
|
|
31
|
+
</script>
|
|
32
|
+
|
|
33
|
+
{#if selectionMode === 'range'}
|
|
34
|
+
<Calendar.Root
|
|
35
|
+
selectionMode="range"
|
|
36
|
+
{visibleMonths}
|
|
37
|
+
{showOutsideDays}
|
|
38
|
+
{isDisabled}
|
|
39
|
+
{isReadOnly}
|
|
40
|
+
defaultValue={rangeDefaultValue}
|
|
41
|
+
{isDateUnavailable}
|
|
42
|
+
aria-label="Test calendar"
|
|
43
|
+
>
|
|
44
|
+
<Calendar.TriggerPrevious>Previous</Calendar.TriggerPrevious>
|
|
45
|
+
<Calendar.Heading />
|
|
46
|
+
<Calendar.TriggerNext>Next</Calendar.TriggerNext>
|
|
47
|
+
<Calendar.Grid>
|
|
48
|
+
<Calendar.GridHeader />
|
|
49
|
+
<Calendar.GridBody />
|
|
50
|
+
</Calendar.Grid>
|
|
51
|
+
</Calendar.Root>
|
|
52
|
+
{:else}
|
|
53
|
+
<Calendar.Root
|
|
54
|
+
selectionMode="single"
|
|
55
|
+
{visibleMonths}
|
|
56
|
+
{showOutsideDays}
|
|
57
|
+
{isDisabled}
|
|
58
|
+
{isReadOnly}
|
|
59
|
+
defaultValue={singleDefaultValue}
|
|
60
|
+
{isDateUnavailable}
|
|
61
|
+
aria-label="Test calendar"
|
|
62
|
+
>
|
|
63
|
+
<Calendar.TriggerPrevious>Previous</Calendar.TriggerPrevious>
|
|
64
|
+
<Calendar.Heading />
|
|
65
|
+
<Calendar.TriggerNext>Next</Calendar.TriggerNext>
|
|
66
|
+
<Calendar.Grid>
|
|
67
|
+
<Calendar.GridHeader />
|
|
68
|
+
<Calendar.GridBody />
|
|
69
|
+
</Calendar.Grid>
|
|
70
|
+
</Calendar.Root>
|
|
71
|
+
{/if}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { CalendarSelectionMode, CalendarValue } from './context';
|
|
2
|
+
type Props = {
|
|
3
|
+
selectionMode?: CalendarSelectionMode;
|
|
4
|
+
visibleMonths?: number;
|
|
5
|
+
showOutsideDays?: boolean;
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
isReadOnly?: boolean;
|
|
8
|
+
defaultValue?: CalendarValue;
|
|
9
|
+
isDateUnavailable?: (date: string) => boolean;
|
|
10
|
+
};
|
|
11
|
+
declare const CalendarRootTest: import("svelte").Component<Props, {}, "">;
|
|
12
|
+
type CalendarRootTest = ReturnType<typeof CalendarRootTest>;
|
|
13
|
+
export default CalendarRootTest;
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import {
|
|
4
|
+
createCalendarContext,
|
|
5
|
+
setCalendarContext,
|
|
6
|
+
type CalendarRangeValue,
|
|
7
|
+
type CalendarSelectionMode,
|
|
8
|
+
type CalendarValue
|
|
9
|
+
} from './context';
|
|
10
|
+
import { useLocaleContextOptional } from '../../locale-provider/context';
|
|
11
|
+
import { isValidCalendarDateValue, type CalendarDateValue } from './date-utils';
|
|
12
|
+
|
|
13
|
+
function isRangeValue(
|
|
14
|
+
valueToCheck: CalendarValue | undefined
|
|
15
|
+
): valueToCheck is CalendarRangeValue {
|
|
16
|
+
if (!valueToCheck || typeof valueToCheck === 'string') return false;
|
|
17
|
+
return true;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function normalizeRangeValue(
|
|
21
|
+
valueToCheck: CalendarRangeValue | undefined
|
|
22
|
+
): CalendarRangeValue | undefined {
|
|
23
|
+
if (!valueToCheck) return undefined;
|
|
24
|
+
const start =
|
|
25
|
+
valueToCheck.start && isValidCalendarDateValue(valueToCheck.start)
|
|
26
|
+
? valueToCheck.start
|
|
27
|
+
: undefined;
|
|
28
|
+
const end =
|
|
29
|
+
valueToCheck.end && isValidCalendarDateValue(valueToCheck.end) ? valueToCheck.end : undefined;
|
|
30
|
+
if (!start && !end) return undefined;
|
|
31
|
+
return { start, end };
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
type CalendarRootProps = {
|
|
35
|
+
selectionMode?: CalendarSelectionMode;
|
|
36
|
+
visibleMonths?: number;
|
|
37
|
+
showOutsideDays?: boolean;
|
|
38
|
+
isDateUnavailable?: (date: string) => boolean;
|
|
39
|
+
isDisabled?: boolean;
|
|
40
|
+
isReadOnly?: boolean;
|
|
41
|
+
children?: Snippet;
|
|
42
|
+
class?: string;
|
|
43
|
+
id?: string;
|
|
44
|
+
'aria-label'?: string;
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
type CalendarRootSingleProps = CalendarRootProps & {
|
|
48
|
+
selectionMode?: 'single';
|
|
49
|
+
value?: CalendarDateValue;
|
|
50
|
+
defaultValue?: CalendarDateValue;
|
|
51
|
+
onChange?: (value: CalendarDateValue) => void;
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
type CalendarRootRangeProps = CalendarRootProps & {
|
|
55
|
+
selectionMode: 'range';
|
|
56
|
+
value?: CalendarRangeValue;
|
|
57
|
+
defaultValue?: CalendarRangeValue;
|
|
58
|
+
onChange?: (value: CalendarRangeValue) => void;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
type CalendarRootTypedProps = CalendarRootSingleProps | CalendarRootRangeProps;
|
|
62
|
+
|
|
63
|
+
let {
|
|
64
|
+
selectionMode = 'single',
|
|
65
|
+
visibleMonths = 1,
|
|
66
|
+
showOutsideDays = false,
|
|
67
|
+
isDateUnavailable,
|
|
68
|
+
isDisabled = false,
|
|
69
|
+
isReadOnly = false,
|
|
70
|
+
value = $bindable(),
|
|
71
|
+
defaultValue,
|
|
72
|
+
onChange,
|
|
73
|
+
children,
|
|
74
|
+
class: className = '',
|
|
75
|
+
id,
|
|
76
|
+
'aria-label': ariaLabel
|
|
77
|
+
}: CalendarRootTypedProps = $props();
|
|
78
|
+
|
|
79
|
+
function isCalendarRangeValue(valueToCheck: CalendarValue): valueToCheck is CalendarRangeValue {
|
|
80
|
+
if (!valueToCheck || typeof valueToCheck === 'string') return false;
|
|
81
|
+
return true;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
const localeContext = useLocaleContextOptional();
|
|
85
|
+
const localeStore = localeContext?.locale;
|
|
86
|
+
const localeFromContext = $derived.by(() => {
|
|
87
|
+
if (!localeStore) return undefined;
|
|
88
|
+
return $localeStore;
|
|
89
|
+
});
|
|
90
|
+
const resolvedLocale = $derived(
|
|
91
|
+
localeFromContext ?? Intl.DateTimeFormat().resolvedOptions().locale
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
function getSyncOptions() {
|
|
95
|
+
const normalizedDefaultValue =
|
|
96
|
+
selectionMode === 'range'
|
|
97
|
+
? normalizeRangeValue(isRangeValue(defaultValue) ? defaultValue : undefined)
|
|
98
|
+
: typeof defaultValue === 'string' && isValidCalendarDateValue(defaultValue)
|
|
99
|
+
? defaultValue
|
|
100
|
+
: undefined;
|
|
101
|
+
|
|
102
|
+
return {
|
|
103
|
+
selectionMode,
|
|
104
|
+
visibleMonths,
|
|
105
|
+
showOutsideDays,
|
|
106
|
+
locale: resolvedLocale,
|
|
107
|
+
isDateUnavailable,
|
|
108
|
+
isDisabled,
|
|
109
|
+
isReadOnly,
|
|
110
|
+
value,
|
|
111
|
+
defaultValue: normalizedDefaultValue,
|
|
112
|
+
onChange: (nextValue: CalendarValue) => {
|
|
113
|
+
if (selectionMode === 'range' && isCalendarRangeValue(nextValue)) {
|
|
114
|
+
(onChange as ((value: CalendarRangeValue) => void) | undefined)?.(nextValue);
|
|
115
|
+
} else if (selectionMode !== 'range' && typeof nextValue === 'string') {
|
|
116
|
+
(onChange as ((value: CalendarDateValue) => void) | undefined)?.(nextValue);
|
|
117
|
+
}
|
|
118
|
+
value = nextValue;
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
const context = createCalendarContext(getSyncOptions());
|
|
124
|
+
|
|
125
|
+
setCalendarContext(context);
|
|
126
|
+
|
|
127
|
+
$effect(() => {
|
|
128
|
+
context.sync(getSyncOptions());
|
|
129
|
+
});
|
|
130
|
+
</script>
|
|
131
|
+
|
|
132
|
+
<div
|
|
133
|
+
{id}
|
|
134
|
+
class={className}
|
|
135
|
+
data-disabled={isDisabled || undefined}
|
|
136
|
+
data-readonly={isReadOnly || undefined}
|
|
137
|
+
inert={isDisabled || undefined}
|
|
138
|
+
aria-label={ariaLabel}
|
|
139
|
+
>
|
|
140
|
+
{#if children}
|
|
141
|
+
{@render children()}
|
|
142
|
+
{/if}
|
|
143
|
+
</div>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import { type CalendarRangeValue, type CalendarSelectionMode } from './context';
|
|
3
|
+
import { type CalendarDateValue } from './date-utils';
|
|
4
|
+
type CalendarRootProps = {
|
|
5
|
+
selectionMode?: CalendarSelectionMode;
|
|
6
|
+
visibleMonths?: number;
|
|
7
|
+
showOutsideDays?: boolean;
|
|
8
|
+
isDateUnavailable?: (date: string) => boolean;
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
isReadOnly?: boolean;
|
|
11
|
+
children?: Snippet;
|
|
12
|
+
class?: string;
|
|
13
|
+
id?: string;
|
|
14
|
+
'aria-label'?: string;
|
|
15
|
+
};
|
|
16
|
+
type CalendarRootSingleProps = CalendarRootProps & {
|
|
17
|
+
selectionMode?: 'single';
|
|
18
|
+
value?: CalendarDateValue;
|
|
19
|
+
defaultValue?: CalendarDateValue;
|
|
20
|
+
onChange?: (value: CalendarDateValue) => void;
|
|
21
|
+
};
|
|
22
|
+
type CalendarRootRangeProps = CalendarRootProps & {
|
|
23
|
+
selectionMode: 'range';
|
|
24
|
+
value?: CalendarRangeValue;
|
|
25
|
+
defaultValue?: CalendarRangeValue;
|
|
26
|
+
onChange?: (value: CalendarRangeValue) => void;
|
|
27
|
+
};
|
|
28
|
+
type CalendarRootTypedProps = CalendarRootSingleProps | CalendarRootRangeProps;
|
|
29
|
+
declare const CalendarRoot: import("svelte").Component<CalendarRootTypedProps, {}, "value">;
|
|
30
|
+
type CalendarRoot = ReturnType<typeof CalendarRoot>;
|
|
31
|
+
export default CalendarRoot;
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { type Readable } from 'svelte/store';
|
|
2
|
+
import { type CalendarDateValue, type CalendarDayCell } from './date-utils';
|
|
3
|
+
export type CalendarSelectionMode = 'single' | 'range';
|
|
4
|
+
export type CalendarRangeValue = {
|
|
5
|
+
start?: CalendarDateValue;
|
|
6
|
+
end?: CalendarDateValue;
|
|
7
|
+
};
|
|
8
|
+
export type CalendarValue = CalendarDateValue | CalendarRangeValue;
|
|
9
|
+
export type CalendarValueBySelectionMode<TSelectionMode extends CalendarSelectionMode> = TSelectionMode extends 'range' ? CalendarRangeValue : CalendarDateValue;
|
|
10
|
+
export type CalendarMonth = {
|
|
11
|
+
monthIndex: number;
|
|
12
|
+
monthStart: Date;
|
|
13
|
+
heading: string;
|
|
14
|
+
weeks: CalendarDayCell[][];
|
|
15
|
+
};
|
|
16
|
+
export type CreateCalendarContextOptions<TSelectionMode extends CalendarSelectionMode = CalendarSelectionMode> = {
|
|
17
|
+
selectionMode?: TSelectionMode;
|
|
18
|
+
visibleMonths?: number;
|
|
19
|
+
showOutsideDays?: boolean;
|
|
20
|
+
locale?: string;
|
|
21
|
+
isDisabled?: boolean;
|
|
22
|
+
isReadOnly?: boolean;
|
|
23
|
+
value?: CalendarValueBySelectionMode<TSelectionMode>;
|
|
24
|
+
defaultValue?: CalendarValueBySelectionMode<TSelectionMode>;
|
|
25
|
+
isDateUnavailable?: (date: CalendarDateValue) => boolean;
|
|
26
|
+
onChange?: (value: CalendarValueBySelectionMode<TSelectionMode>) => void;
|
|
27
|
+
};
|
|
28
|
+
export type CalendarContext = {
|
|
29
|
+
layoutVersion: Readable<number>;
|
|
30
|
+
selectionVersion: Readable<number>;
|
|
31
|
+
locale: string;
|
|
32
|
+
selectionMode: CalendarSelectionMode;
|
|
33
|
+
firstDayOfWeek: number;
|
|
34
|
+
visibleMonths: number;
|
|
35
|
+
showOutsideDays: boolean;
|
|
36
|
+
isDisabled: boolean;
|
|
37
|
+
isReadOnly: boolean;
|
|
38
|
+
months: CalendarMonth[];
|
|
39
|
+
selectedValue: CalendarDateValue | undefined;
|
|
40
|
+
rangeValue: CalendarRangeValue | undefined;
|
|
41
|
+
focusedValue: CalendarDateValue;
|
|
42
|
+
focusVisible: boolean;
|
|
43
|
+
weekdayLabels: string[];
|
|
44
|
+
headingLabel: string;
|
|
45
|
+
isSelected: (date: CalendarDateValue) => boolean;
|
|
46
|
+
isRangeStart: (date: CalendarDateValue) => boolean;
|
|
47
|
+
isRangeEnd: (date: CalendarDateValue) => boolean;
|
|
48
|
+
isInRange: (date: CalendarDateValue) => boolean;
|
|
49
|
+
isDateUnavailable: (date: CalendarDateValue) => boolean;
|
|
50
|
+
isDateDisabled: (date: CalendarDateValue) => boolean;
|
|
51
|
+
isOutsideVisibleRange: (date: CalendarDateValue, monthIndex: number) => boolean;
|
|
52
|
+
setFocusedValue: (date: CalendarDateValue) => void;
|
|
53
|
+
setFocusVisible: (visible: boolean) => void;
|
|
54
|
+
setHoveredValue: (date: CalendarDateValue | undefined) => void;
|
|
55
|
+
selectDate: (date: CalendarDateValue) => void;
|
|
56
|
+
goToNextPage: () => void;
|
|
57
|
+
goToPreviousPage: () => void;
|
|
58
|
+
handleCellKeydown: (event: KeyboardEvent, date: CalendarDateValue) => void;
|
|
59
|
+
sync: (next: CreateCalendarContextOptions) => void;
|
|
60
|
+
};
|
|
61
|
+
export declare function createCalendarContext(options: CreateCalendarContextOptions<'single'>): CalendarContext;
|
|
62
|
+
export declare function createCalendarContext(options: CreateCalendarContextOptions<'range'>): CalendarContext;
|
|
63
|
+
export declare function createCalendarContext(options: CreateCalendarContextOptions): CalendarContext;
|
|
64
|
+
export declare function setCalendarContext(context: CalendarContext): void;
|
|
65
|
+
export declare function getCalendarContext(): CalendarContext;
|
|
66
|
+
export declare function useCalendarContext(): CalendarContext;
|