@nanisoft/prism-ui 0.10.1 → 0.13.0
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 +21 -21
- package/dist/.tsbuildinfo +1 -1
- package/dist/blocks/app-shell-01/app-shell.js +4 -4
- package/dist/blocks/app-shell-01/index.d.ts +2 -2
- package/dist/blocks/app-shell-01/index.js +1 -1
- package/dist/blocks/auth-form-01/auth-form.d.ts +11 -1
- package/dist/blocks/auth-form-01/auth-form.d.ts.map +1 -1
- package/dist/blocks/auth-form-01/auth-form.js +11 -8
- package/dist/blocks/auth-form-01/index.d.ts +2 -2
- package/dist/blocks/auth-form-01/index.js +1 -1
- package/dist/blocks/cta-01/cta.d.ts +26 -21
- package/dist/blocks/cta-01/cta.d.ts.map +1 -1
- package/dist/blocks/cta-01/cta.js +2 -2
- package/dist/blocks/cta-01/index.d.ts +2 -2
- package/dist/blocks/cta-01/index.js +1 -1
- package/dist/blocks/data-table-01/data-table.js +7 -7
- package/dist/blocks/data-table-01/index.d.ts +2 -2
- package/dist/blocks/data-table-01/index.js +1 -1
- package/dist/blocks/empty-state-01/empty-state.d.ts +143 -0
- package/dist/blocks/empty-state-01/empty-state.d.ts.map +1 -0
- package/dist/blocks/empty-state-01/empty-state.js +104 -0
- package/dist/blocks/empty-state-01/index.d.ts +3 -0
- package/dist/blocks/empty-state-01/index.d.ts.map +1 -0
- package/dist/blocks/empty-state-01/index.js +1 -0
- package/dist/blocks/feature-grid-01/feature-grid.d.ts +28 -1
- package/dist/blocks/feature-grid-01/feature-grid.d.ts.map +1 -1
- package/dist/blocks/feature-grid-01/feature-grid.js +34 -3
- package/dist/blocks/feature-grid-01/index.d.ts +2 -2
- package/dist/blocks/feature-grid-01/index.js +1 -1
- package/dist/blocks/hero-01/hero.d.ts +49 -17
- package/dist/blocks/hero-01/hero.d.ts.map +1 -1
- package/dist/blocks/hero-01/hero.js +14 -9
- package/dist/blocks/hero-01/index.d.ts +2 -1
- package/dist/blocks/hero-01/index.d.ts.map +1 -1
- package/dist/blocks/hero-01/index.js +1 -1
- package/dist/blocks/index.d.ts +20 -20
- package/dist/blocks/index.js +19 -19
- package/dist/blocks/instrument-panel-01/index.d.ts +2 -2
- package/dist/blocks/instrument-panel-01/index.js +1 -1
- package/dist/blocks/instrument-panel-01/instrument-panel.js +1 -1
- package/dist/blocks/logo-strip-01/index.d.ts +2 -2
- package/dist/blocks/logo-strip-01/index.js +1 -1
- package/dist/blocks/logo-strip-01/logo-strip.d.ts +1 -1
- package/dist/blocks/logo-strip-01/logo-strip.js +2 -2
- package/dist/blocks/note-grid-01/index.d.ts +2 -2
- package/dist/blocks/note-grid-01/index.js +1 -1
- package/dist/blocks/note-grid-01/note-grid.d.ts +1 -1
- package/dist/blocks/note-grid-01/note-grid.js +1 -1
- package/dist/blocks/page-header-01/index.d.ts +2 -2
- package/dist/blocks/page-header-01/index.js +1 -1
- package/dist/blocks/page-header-01/page-header.d.ts +1 -1
- package/dist/blocks/page-header-01/page-header.js +4 -4
- package/dist/blocks/pricing-01/index.d.ts +1 -1
- package/dist/blocks/pricing-01/index.js +1 -1
- package/dist/blocks/pricing-01/pricing.d.ts +8 -1
- package/dist/blocks/pricing-01/pricing.d.ts.map +1 -1
- package/dist/blocks/pricing-01/pricing.js +15 -5
- package/dist/blocks/process-flow-01/index.d.ts +3 -0
- package/dist/blocks/process-flow-01/index.d.ts.map +1 -0
- package/dist/blocks/process-flow-01/index.js +1 -0
- package/dist/blocks/process-flow-01/process-flow.d.ts +118 -0
- package/dist/blocks/process-flow-01/process-flow.d.ts.map +1 -0
- package/dist/blocks/process-flow-01/process-flow.js +71 -0
- package/dist/blocks/process-rail-01/index.d.ts +2 -2
- package/dist/blocks/process-rail-01/index.js +1 -1
- package/dist/blocks/process-rail-01/process-rail.d.ts +1 -1
- package/dist/blocks/process-rail-01/process-rail.js +2 -2
- package/dist/blocks/product-grid-01/index.d.ts +2 -2
- package/dist/blocks/product-grid-01/index.js +1 -1
- package/dist/blocks/product-grid-01/product-grid.d.ts +37 -5
- package/dist/blocks/product-grid-01/product-grid.d.ts.map +1 -1
- package/dist/blocks/product-grid-01/product-grid.js +20 -6
- package/dist/blocks/run-console-01/index.d.ts +3 -0
- package/dist/blocks/run-console-01/index.d.ts.map +1 -0
- package/dist/blocks/run-console-01/index.js +1 -0
- package/dist/blocks/run-console-01/run-console.d.ts +111 -0
- package/dist/blocks/run-console-01/run-console.d.ts.map +1 -0
- package/dist/blocks/run-console-01/run-console.js +48 -0
- package/dist/blocks/settings-panel-01/index.d.ts +2 -2
- package/dist/blocks/settings-panel-01/index.js +1 -1
- package/dist/blocks/settings-panel-01/settings-panel.d.ts +11 -1
- package/dist/blocks/settings-panel-01/settings-panel.d.ts.map +1 -1
- package/dist/blocks/settings-panel-01/settings-panel.js +15 -10
- package/dist/blocks/site-footer/index.d.ts +2 -2
- package/dist/blocks/site-footer/index.js +1 -1
- package/dist/blocks/site-footer/site-footer.d.ts +1 -1
- package/dist/blocks/site-footer/site-footer.js +2 -2
- package/dist/blocks/site-header/index.d.ts +2 -2
- package/dist/blocks/site-header/index.js +1 -1
- package/dist/blocks/site-header/site-header.d.ts +2 -2
- package/dist/blocks/site-header/site-header.js +3 -3
- package/dist/blocks/site-navbar/index.d.ts +3 -0
- package/dist/blocks/site-navbar/index.d.ts.map +1 -0
- package/dist/blocks/site-navbar/index.js +1 -0
- package/dist/blocks/site-navbar/mobile-nav.d.ts +48 -0
- package/dist/blocks/site-navbar/mobile-nav.d.ts.map +1 -0
- package/dist/blocks/site-navbar/mobile-nav.js +35 -0
- package/dist/blocks/site-navbar/mode-toggle.d.ts +39 -0
- package/dist/blocks/site-navbar/mode-toggle.d.ts.map +1 -0
- package/dist/blocks/site-navbar/mode-toggle.js +39 -0
- package/dist/blocks/site-navbar/navbar-controls.d.ts +79 -0
- package/dist/blocks/site-navbar/navbar-controls.d.ts.map +1 -0
- package/dist/blocks/site-navbar/navbar-controls.js +40 -0
- package/dist/blocks/site-navbar/search-entry.d.ts +29 -0
- package/dist/blocks/site-navbar/search-entry.d.ts.map +1 -0
- package/dist/blocks/site-navbar/search-entry.js +52 -0
- package/dist/blocks/site-navbar/site-navbar.d.ts +212 -0
- package/dist/blocks/site-navbar/site-navbar.d.ts.map +1 -0
- package/dist/blocks/site-navbar/site-navbar.js +61 -0
- package/dist/blocks/site-navbar/sites-menu.d.ts +40 -0
- package/dist/blocks/site-navbar/sites-menu.d.ts.map +1 -0
- package/dist/blocks/site-navbar/sites-menu.js +48 -0
- package/dist/blocks/site-navbar/theme-menu.d.ts +47 -0
- package/dist/blocks/site-navbar/theme-menu.d.ts.map +1 -0
- package/dist/blocks/site-navbar/theme-menu.js +55 -0
- package/dist/blocks/stack-grid-01/index.d.ts +2 -2
- package/dist/blocks/stack-grid-01/index.js +1 -1
- package/dist/blocks/stack-grid-01/stack-grid.d.ts +42 -11
- package/dist/blocks/stack-grid-01/stack-grid.d.ts.map +1 -1
- package/dist/blocks/stack-grid-01/stack-grid.js +15 -7
- package/dist/blocks/stats-01/index.d.ts +9 -1
- package/dist/blocks/stats-01/index.d.ts.map +1 -1
- package/dist/blocks/stats-01/index.js +8 -1
- package/dist/blocks/stats-01/stats.d.ts +1 -1
- package/dist/blocks/stats-01/stats.js +2 -2
- package/dist/blocks/status-ledger-01/index.d.ts +2 -2
- package/dist/blocks/status-ledger-01/index.js +1 -1
- package/dist/blocks/status-ledger-01/status-ledger.d.ts +1 -1
- package/dist/blocks/status-ledger-01/status-ledger.js +2 -2
- package/dist/catalog.d.ts +1 -1
- package/dist/catalog.d.ts.map +1 -1
- package/dist/catalog.js +473 -1
- package/dist/components/index.d.ts +104 -66
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +74 -40
- package/dist/components/ui/accordion.js +1 -1
- package/dist/components/ui/alert-dialog.d.ts +119 -0
- package/dist/components/ui/alert-dialog.d.ts.map +1 -0
- package/dist/components/ui/alert-dialog.js +82 -0
- package/dist/components/ui/alert.js +1 -1
- package/dist/components/ui/aspect-ratio.d.ts +60 -0
- package/dist/components/ui/aspect-ratio.d.ts.map +1 -0
- package/dist/components/ui/aspect-ratio.js +61 -0
- package/dist/components/ui/avatar.js +1 -1
- package/dist/components/ui/badge.js +1 -1
- package/dist/components/ui/breadcrumb.js +1 -1
- package/dist/components/ui/button-group.d.ts +68 -0
- package/dist/components/ui/button-group.d.ts.map +1 -0
- package/dist/components/ui/button-group.js +54 -0
- package/dist/components/ui/button.js +1 -1
- package/dist/components/ui/calendar.d.ts +158 -0
- package/dist/components/ui/calendar.d.ts.map +1 -0
- package/dist/components/ui/calendar.js +216 -0
- package/dist/components/ui/card.d.ts +18 -6
- package/dist/components/ui/card.d.ts.map +1 -1
- package/dist/components/ui/card.js +23 -8
- package/dist/components/ui/carousel.d.ts +118 -0
- package/dist/components/ui/carousel.d.ts.map +1 -0
- package/dist/components/ui/carousel.js +152 -0
- package/dist/components/ui/chart-frame.d.ts +216 -0
- package/dist/components/ui/chart-frame.d.ts.map +1 -0
- package/dist/components/ui/chart-frame.js +286 -0
- package/dist/components/ui/checkbox.js +1 -1
- package/dist/components/ui/collapsible.d.ts +97 -0
- package/dist/components/ui/collapsible.d.ts.map +1 -0
- package/dist/components/ui/collapsible.js +54 -0
- package/dist/components/ui/combobox.d.ts +141 -0
- package/dist/components/ui/combobox.d.ts.map +1 -0
- package/dist/components/ui/combobox.js +243 -0
- package/dist/components/ui/command-palette.d.ts +106 -0
- package/dist/components/ui/command-palette.d.ts.map +1 -0
- package/dist/components/ui/command-palette.js +176 -0
- package/dist/components/ui/command.d.ts +82 -0
- package/dist/components/ui/command.d.ts.map +1 -0
- package/dist/components/ui/command.js +37 -0
- package/dist/components/ui/context-menu.d.ts +151 -0
- package/dist/components/ui/context-menu.d.ts.map +1 -0
- package/dist/components/ui/context-menu.js +97 -0
- package/dist/components/ui/cta-link.js +1 -1
- package/dist/components/ui/date-picker.d.ts +111 -0
- package/dist/components/ui/date-picker.d.ts.map +1 -0
- package/dist/components/ui/date-picker.js +74 -0
- package/dist/components/ui/diagram.d.ts +84 -15
- package/dist/components/ui/diagram.d.ts.map +1 -1
- package/dist/components/ui/diagram.js +77 -7
- package/dist/components/ui/dialog.js +1 -1
- package/dist/components/ui/diff.d.ts +105 -0
- package/dist/components/ui/diff.d.ts.map +1 -0
- package/dist/components/ui/diff.js +113 -0
- package/dist/components/ui/dropdown-menu.d.ts +18 -0
- package/dist/components/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/components/ui/dropdown-menu.js +1 -1
- package/dist/components/ui/fact-list.js +1 -1
- package/dist/components/ui/field.js +1 -1
- package/dist/components/ui/form.d.ts +151 -0
- package/dist/components/ui/form.d.ts.map +1 -0
- package/dist/components/ui/form.js +73 -0
- package/dist/components/ui/hover-card.d.ts +105 -0
- package/dist/components/ui/hover-card.d.ts.map +1 -0
- package/dist/components/ui/hover-card.js +49 -0
- package/dist/components/ui/input-group.d.ts +99 -0
- package/dist/components/ui/input-group.d.ts.map +1 -0
- package/dist/components/ui/input-group.js +83 -0
- package/dist/components/ui/input.js +1 -1
- package/dist/components/ui/item.d.ts +113 -0
- package/dist/components/ui/item.d.ts.map +1 -0
- package/dist/components/ui/item.js +61 -0
- package/dist/components/ui/kbd.js +1 -1
- package/dist/components/ui/label.d.ts +58 -0
- package/dist/components/ui/label.d.ts.map +1 -0
- package/dist/components/ui/label.js +29 -0
- package/dist/components/ui/live-region.d.ts +9 -0
- package/dist/components/ui/live-region.d.ts.map +1 -1
- package/dist/components/ui/live-region.js +10 -2
- package/dist/components/ui/mark.js +1 -1
- package/dist/components/ui/menubar.d.ts +197 -0
- package/dist/components/ui/menubar.d.ts.map +1 -0
- package/dist/components/ui/menubar.js +109 -0
- package/dist/components/ui/meter.d.ts +121 -0
- package/dist/components/ui/meter.d.ts.map +1 -0
- package/dist/components/ui/meter.js +82 -0
- package/dist/components/ui/native-select.d.ts +72 -0
- package/dist/components/ui/native-select.d.ts.map +1 -0
- package/dist/components/ui/native-select.js +55 -0
- package/dist/components/ui/navigation-menu.d.ts +186 -0
- package/dist/components/ui/navigation-menu.d.ts.map +1 -0
- package/dist/components/ui/navigation-menu.js +94 -0
- package/dist/components/ui/number-field.d.ts +111 -0
- package/dist/components/ui/number-field.d.ts.map +1 -0
- package/dist/components/ui/number-field.js +84 -0
- package/dist/components/ui/one-time-code.d.ts +127 -0
- package/dist/components/ui/one-time-code.d.ts.map +1 -0
- package/dist/components/ui/one-time-code.js +57 -0
- package/dist/components/ui/pagination.js +1 -1
- package/dist/components/ui/popover.js +1 -1
- package/dist/components/ui/product-mark.d.ts +1 -1
- package/dist/components/ui/product-mark.js +1 -1
- package/dist/components/ui/product-switcher.d.ts +1 -1
- package/dist/components/ui/product-switcher.js +2 -2
- package/dist/components/ui/progress.js +1 -1
- package/dist/components/ui/prose.js +1 -1
- package/dist/components/ui/pulse-graph.js +1 -1
- package/dist/components/ui/pulse-series.js +1 -1
- package/dist/components/ui/radio-group.js +1 -1
- package/dist/components/ui/resizable.d.ts +129 -0
- package/dist/components/ui/resizable.d.ts.map +1 -0
- package/dist/components/ui/resizable.js +205 -0
- package/dist/components/ui/scroll-area.d.ts +97 -0
- package/dist/components/ui/scroll-area.d.ts.map +1 -0
- package/dist/components/ui/scroll-area.js +68 -0
- package/dist/components/ui/search-dialog.d.ts +139 -0
- package/dist/components/ui/search-dialog.d.ts.map +1 -0
- package/dist/components/ui/search-dialog.js +178 -0
- package/dist/components/ui/section.d.ts +26 -0
- package/dist/components/ui/section.d.ts.map +1 -1
- package/dist/components/ui/section.js +32 -1
- package/dist/components/ui/select.js +1 -1
- package/dist/components/ui/separator.js +1 -1
- package/dist/components/ui/sheet.d.ts +103 -0
- package/dist/components/ui/sheet.d.ts.map +1 -0
- package/dist/components/ui/sheet.js +58 -0
- package/dist/components/ui/sidebar.d.ts +228 -0
- package/dist/components/ui/sidebar.d.ts.map +1 -0
- package/dist/components/ui/sidebar.js +172 -0
- package/dist/components/ui/signal-field.js +1 -1
- package/dist/components/ui/skeleton.js +1 -1
- package/dist/components/ui/slider.js +1 -1
- package/dist/components/ui/spinner.d.ts +79 -0
- package/dist/components/ui/spinner.d.ts.map +1 -0
- package/dist/components/ui/spinner.js +79 -0
- package/dist/components/ui/switch.js +1 -1
- package/dist/components/ui/table-sort.d.ts +97 -0
- package/dist/components/ui/table-sort.d.ts.map +1 -0
- package/dist/components/ui/table-sort.js +102 -0
- package/dist/components/ui/table.js +1 -1
- package/dist/components/ui/tabs.js +1 -1
- package/dist/components/ui/textarea.js +1 -1
- package/dist/components/ui/timeline.d.ts +106 -0
- package/dist/components/ui/timeline.d.ts.map +1 -0
- package/dist/components/ui/timeline.js +111 -0
- package/dist/components/ui/toast.d.ts +219 -0
- package/dist/components/ui/toast.d.ts.map +1 -0
- package/dist/components/ui/toast.js +270 -0
- package/dist/components/ui/toggle-group.d.ts +118 -0
- package/dist/components/ui/toggle-group.d.ts.map +1 -0
- package/dist/components/ui/toggle-group.js +194 -0
- package/dist/components/ui/toggle.d.ts +73 -0
- package/dist/components/ui/toggle.d.ts.map +1 -0
- package/dist/components/ui/toggle.js +44 -0
- package/dist/components/ui/tooltip.js +1 -1
- package/dist/components/ui/tree.js +1 -1
- package/dist/components/ui/typography.js +1 -1
- package/dist/fonts/Inter-OFL.txt +93 -93
- package/dist/index.d.ts +72 -70
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +61 -60
- package/dist/lib/rank.d.ts +69 -0
- package/dist/lib/rank.d.ts.map +1 -0
- package/dist/lib/rank.js +77 -0
- package/dist/live/index.d.ts +22 -0
- package/dist/live/index.d.ts.map +1 -0
- package/dist/live/index.js +20 -0
- package/dist/live/run-stream-01/index.d.ts +3 -0
- package/dist/live/run-stream-01/index.d.ts.map +1 -0
- package/dist/live/run-stream-01/index.js +1 -0
- package/dist/live/run-stream-01/run-stream.d.ts +125 -0
- package/dist/live/run-stream-01/run-stream.d.ts.map +1 -0
- package/dist/live/run-stream-01/run-stream.js +111 -0
- package/dist/pages/auth-page/index.d.ts +15 -2
- package/dist/pages/auth-page/index.d.ts.map +1 -1
- package/dist/pages/auth-page/index.js +8 -4
- package/dist/pages/blog-post-page/index.js +5 -5
- package/dist/pages/dashboard-page/index.d.ts +4 -4
- package/dist/pages/dashboard-page/index.js +4 -4
- package/dist/pages/docs-shell/docs-shell.d.ts +37 -4
- package/dist/pages/docs-shell/docs-shell.d.ts.map +1 -1
- package/dist/pages/docs-shell/docs-shell.js +107 -16
- package/dist/pages/docs-shell/index.d.ts +2 -2
- package/dist/pages/docs-shell/index.js +1 -1
- package/dist/pages/index.d.ts +14 -14
- package/dist/pages/index.js +7 -7
- package/dist/pages/marketing-page/index.d.ts +6 -6
- package/dist/pages/marketing-page/index.js +5 -5
- package/dist/pages/not-found-page/index.js +4 -4
- package/dist/pages/settings-page/index.d.ts +3 -3
- package/dist/pages/settings-page/index.js +4 -4
- package/dist/provider/index.d.ts +4 -4
- package/dist/provider/index.js +2 -2
- package/dist/provider/provider.d.ts +1 -1
- package/dist/provider/provider.js +1 -1
- package/dist/provider/theme-script.d.ts +1 -1
- package/dist/provider/theme-script.js +1 -1
- package/dist/styles.css +689 -0
- package/package.json +9 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
/** The props the AspectRatio accepts. */
|
|
3
|
+
export interface AspectRatioProps extends ComponentProps<'div'> {
|
|
4
|
+
/**
|
|
5
|
+
* The ratio to hold, as CSS's `aspect-ratio` value: width over height.
|
|
6
|
+
*
|
|
7
|
+
* A number rather than a pair, and not a keyword. `16 / 9` is the shape the
|
|
8
|
+
* CSS property takes and the shape a designer writes, and the keyword set
|
|
9
|
+
* (`square`, `video`) is closed and short of every ratio a caller actually has.
|
|
10
|
+
*/
|
|
11
|
+
ratio?: number;
|
|
12
|
+
/** Layout only. */
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* A box whose height follows its width at a stated ratio.
|
|
17
|
+
*
|
|
18
|
+
* **Why this is a Component and not a class.** The instinct is `className="aspect-video"`
|
|
19
|
+
* and a caller who has run out of keywords writes `className="aspect-[4/3]"`. Neither
|
|
20
|
+
* reaches a consumer's browser. Prism's stylesheet scans Prism's own source and
|
|
21
|
+
* nothing else, because Tailwind is an internal build dependency of this package
|
|
22
|
+
* and never the consumer's, so a utility that appears in no Prism source file is
|
|
23
|
+
* a utility no consumer's stylesheet contains. An arbitrary value typed by a
|
|
24
|
+
* consumer is therefore not a layout decision, it is a silently missing rule and
|
|
25
|
+
* a box at whatever ratio its content happens to have. `ratio` is a prop so the
|
|
26
|
+
* ratio is a number this package reads and applies, not a name this package
|
|
27
|
+
* cannot see.
|
|
28
|
+
*
|
|
29
|
+
* **It is not the Diagram's canvas, and the two do not overlap.** The Diagram
|
|
30
|
+
* draws nodes and the relations between them into a fixed 640 by 400 coordinate
|
|
31
|
+
* space, fitting whatever coordinates a caller gives it into that space with their
|
|
32
|
+
* aspect ratio kept, and its own ratio is a consequence of the canvas it draws
|
|
33
|
+
* into rather than a thing the caller chooses. It is also `role="img"`: the whole
|
|
34
|
+
* subtree is presentational, and the caller's sentence is what a screen reader
|
|
35
|
+
* gets. This Component holds arbitrary content at a caller's ratio and keeps that
|
|
36
|
+
* content in the accessibility tree, so a video, a screenshot, a map or a
|
|
37
|
+
* placeholder that has not loaded can sit in one without being turned into a
|
|
38
|
+
* picture of itself. A Diagram cannot be used for any of those, and this cannot
|
|
39
|
+
* draw a relation.
|
|
40
|
+
*
|
|
41
|
+
* **The content is clipped.** A ratio that is only a ratio leaves the content free
|
|
42
|
+
* to overflow it, and a box whose height is fixed by its width with content
|
|
43
|
+
* spilling out of the bottom is a box that has failed at the one job it has. A
|
|
44
|
+
* caller whose content should escape passes `overflow-visible` through
|
|
45
|
+
* `className`, which is the only override the Component has and which is a
|
|
46
|
+
* decision a caller makes about their own content rather than about the ratio.
|
|
47
|
+
*
|
|
48
|
+
* **A ratio that cannot be drawn falls back rather than collapsing.** A caller
|
|
49
|
+
* computing a ratio from data that has not arrived passes `NaN` or `0`, and
|
|
50
|
+
* `aspect-ratio: 0` is a box with no height at all, which looks like a failed
|
|
51
|
+
* image rather than a missing number. The default ratio is drawn instead and the
|
|
52
|
+
* value the caller passed is carried on the element as `data-ratio`, so the
|
|
53
|
+
* substitution is visible in the markup rather than only in the screenshot.
|
|
54
|
+
*
|
|
55
|
+
* It is a server Component. It holds no state and reads nothing, so a hundred
|
|
56
|
+
* media placeholders cost no JavaScript.
|
|
57
|
+
*/
|
|
58
|
+
declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;
|
|
59
|
+
export { AspectRatio };
|
|
60
|
+
//# sourceMappingURL=aspect-ratio.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/ui/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAgB3C,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7D;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAsB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAc5F;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '../../lib/utils.js';
|
|
3
|
+
/**
|
|
4
|
+
* The ratio Prism falls back to when a caller passes one that cannot be drawn.
|
|
5
|
+
*
|
|
6
|
+
* A number that is not finite, or is zero or negative, is not a ratio: it is the
|
|
7
|
+
* result of a division that has not happened yet, and it is a state a caller
|
|
8
|
+
* reaches by computing a ratio from data that has not loaded. Handing it to CSS
|
|
9
|
+
* collapses the box to nothing, which reads as "the image failed" rather than as
|
|
10
|
+
* "the ratio was not known", so the default is drawn instead and the value the
|
|
11
|
+
* caller passed is reported on the element for a caller to debug.
|
|
12
|
+
*/
|
|
13
|
+
const FALLBACK_RATIO = 16 / 9;
|
|
14
|
+
/**
|
|
15
|
+
* A box whose height follows its width at a stated ratio.
|
|
16
|
+
*
|
|
17
|
+
* **Why this is a Component and not a class.** The instinct is `className="aspect-video"`
|
|
18
|
+
* and a caller who has run out of keywords writes `className="aspect-[4/3]"`. Neither
|
|
19
|
+
* reaches a consumer's browser. Prism's stylesheet scans Prism's own source and
|
|
20
|
+
* nothing else, because Tailwind is an internal build dependency of this package
|
|
21
|
+
* and never the consumer's, so a utility that appears in no Prism source file is
|
|
22
|
+
* a utility no consumer's stylesheet contains. An arbitrary value typed by a
|
|
23
|
+
* consumer is therefore not a layout decision, it is a silently missing rule and
|
|
24
|
+
* a box at whatever ratio its content happens to have. `ratio` is a prop so the
|
|
25
|
+
* ratio is a number this package reads and applies, not a name this package
|
|
26
|
+
* cannot see.
|
|
27
|
+
*
|
|
28
|
+
* **It is not the Diagram's canvas, and the two do not overlap.** The Diagram
|
|
29
|
+
* draws nodes and the relations between them into a fixed 640 by 400 coordinate
|
|
30
|
+
* space, fitting whatever coordinates a caller gives it into that space with their
|
|
31
|
+
* aspect ratio kept, and its own ratio is a consequence of the canvas it draws
|
|
32
|
+
* into rather than a thing the caller chooses. It is also `role="img"`: the whole
|
|
33
|
+
* subtree is presentational, and the caller's sentence is what a screen reader
|
|
34
|
+
* gets. This Component holds arbitrary content at a caller's ratio and keeps that
|
|
35
|
+
* content in the accessibility tree, so a video, a screenshot, a map or a
|
|
36
|
+
* placeholder that has not loaded can sit in one without being turned into a
|
|
37
|
+
* picture of itself. A Diagram cannot be used for any of those, and this cannot
|
|
38
|
+
* draw a relation.
|
|
39
|
+
*
|
|
40
|
+
* **The content is clipped.** A ratio that is only a ratio leaves the content free
|
|
41
|
+
* to overflow it, and a box whose height is fixed by its width with content
|
|
42
|
+
* spilling out of the bottom is a box that has failed at the one job it has. A
|
|
43
|
+
* caller whose content should escape passes `overflow-visible` through
|
|
44
|
+
* `className`, which is the only override the Component has and which is a
|
|
45
|
+
* decision a caller makes about their own content rather than about the ratio.
|
|
46
|
+
*
|
|
47
|
+
* **A ratio that cannot be drawn falls back rather than collapsing.** A caller
|
|
48
|
+
* computing a ratio from data that has not arrived passes `NaN` or `0`, and
|
|
49
|
+
* `aspect-ratio: 0` is a box with no height at all, which looks like a failed
|
|
50
|
+
* image rather than a missing number. The default ratio is drawn instead and the
|
|
51
|
+
* value the caller passed is carried on the element as `data-ratio`, so the
|
|
52
|
+
* substitution is visible in the markup rather than only in the screenshot.
|
|
53
|
+
*
|
|
54
|
+
* It is a server Component. It holds no state and reads nothing, so a hundred
|
|
55
|
+
* media placeholders cost no JavaScript.
|
|
56
|
+
*/
|
|
57
|
+
function AspectRatio({ ratio = FALLBACK_RATIO, className, style, ...props }) {
|
|
58
|
+
const drawable = typeof ratio === 'number' && Number.isFinite(ratio) && ratio > 0;
|
|
59
|
+
return (_jsx("div", { "data-slot": "aspect-ratio", "data-ratio": drawable ? ratio : String(ratio), style: { aspectRatio: drawable ? ratio : FALLBACK_RATIO, ...style }, className: cn('relative w-full overflow-hidden', className), ...props }));
|
|
60
|
+
}
|
|
61
|
+
export { AspectRatio };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
|
|
4
|
-
import { cn } from '../../lib/utils';
|
|
4
|
+
import { cn } from '../../lib/utils.js';
|
|
5
5
|
/**
|
|
6
6
|
* A person or entity's image, with initials as the fallback.
|
|
7
7
|
*
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cva } from 'class-variance-authority';
|
|
3
|
-
import { cn } from '../../lib/utils';
|
|
3
|
+
import { cn } from '../../lib/utils.js';
|
|
4
4
|
const badgeVariants = cva('inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors', {
|
|
5
5
|
variants: {
|
|
6
6
|
variant: {
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import type { ComponentProps, ReactNode } from 'react';
|
|
2
|
+
/** The props the ButtonGroup accepts. */
|
|
3
|
+
export interface ButtonGroupProps extends Omit<ComponentProps<'div'>, 'children'> {
|
|
4
|
+
/**
|
|
5
|
+
* The buttons, or the controls, in the order a reader meets them.
|
|
6
|
+
*
|
|
7
|
+
* Children rather than an array of entries, because a ButtonGroup's whole claim
|
|
8
|
+
* is that it arranges whatever the caller composed. It does not decide what a
|
|
9
|
+
* button says, which variant it wears, or what it does; it draws the frame
|
|
10
|
+
* around them and removes the frames they would otherwise each draw.
|
|
11
|
+
*/
|
|
12
|
+
children?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* The accessible name of the group.
|
|
15
|
+
*
|
|
16
|
+
* Required rather than defaulted, and it is the one prop a caller cannot skip.
|
|
17
|
+
* A row of three buttons is announced as three buttons and nothing else, so a
|
|
18
|
+
* reader who tabs into a toolbar of alignment controls cannot tell which of the
|
|
19
|
+
* four toolbars on the page they are in. Prism does not know what the caller's
|
|
20
|
+
* buttons are for, so the name is the caller's word.
|
|
21
|
+
*/
|
|
22
|
+
label: string;
|
|
23
|
+
/** The direction the group runs in. @defaultValue 'horizontal' */
|
|
24
|
+
orientation?: 'horizontal' | 'vertical';
|
|
25
|
+
/** Layout only. */
|
|
26
|
+
className?: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Related controls joined as one, with the focus ring drawn once around them.
|
|
30
|
+
*
|
|
31
|
+
* **The ring is the reason this is a Component and not a flex row.** Three
|
|
32
|
+
* buttons side by side each draw their own focus ring, so a reader tabbing along
|
|
33
|
+
* the row sees three separate rings marching across a control that reads as one
|
|
34
|
+
* thing, and the reader has to work out each time whether the thing they are in
|
|
35
|
+
* has changed. Here the group takes the ring: the buttons suppress their own, and
|
|
36
|
+
* the group draws a single ring around its whole bounds when focus is inside it.
|
|
37
|
+
* The reader sees one indicator around one control, and it moves as a unit.
|
|
38
|
+
*
|
|
39
|
+
* The cost is stated rather than hidden: a ring drawn around a group is on the
|
|
40
|
+
* group, so it is visible whether the focus arrived from the keyboard or from a
|
|
41
|
+
* click. That is a real trade, and it is the right one here, because a group of
|
|
42
|
+
* mutually exclusive or sequential actions is nearly always operated from the
|
|
43
|
+
* keyboard and the ambiguity of a ring on a click is much cheaper than three rings
|
|
44
|
+
* marching. A caller who needs the per-button indicator back puts the buttons in a
|
|
45
|
+
* `Toolbar` instead, which is a different Component with a different claim.
|
|
46
|
+
*
|
|
47
|
+
* **The frame is drawn by the group and the inner frames are removed.** A
|
|
48
|
+
* ButtonGroup carries the border and the radius; each button inside drops its own
|
|
49
|
+
* border and its own corner radius, and the first and last keep the outer corners.
|
|
50
|
+
* The alternative, letting each button keep its own border, gives a row with a
|
|
51
|
+
* double rule between every pair and a gap at both ends, which is the reason
|
|
52
|
+
* grouped toolbars so often look like a row of separate buttons that happen to be
|
|
53
|
+
* near each other.
|
|
54
|
+
*
|
|
55
|
+
* **It is a `group` with a name, not a `toolbar`.** A toolbar is a set of controls
|
|
56
|
+
* that operates on a document, with its own arrow-key model, and a ButtonGroup is
|
|
57
|
+
* usually a set of related actions rather than an editing surface. The `group`
|
|
58
|
+
* role says "these belong together" and stops there, which is the claim being
|
|
59
|
+
* made. A caller whose buttons operate on a document and want the arrow keys
|
|
60
|
+
* composes Prism's `Toolbar` and does not use this.
|
|
61
|
+
*
|
|
62
|
+
* It is a server Component. It holds no state, reads no context and attaches no
|
|
63
|
+
* handler, so a row of controls in a static page costs no JavaScript, and the
|
|
64
|
+
* focus behaviour is two descendant variants of the group's own class string.
|
|
65
|
+
*/
|
|
66
|
+
declare function ButtonGroup({ className, children, label, orientation, ...props }: ButtonGroupProps): import("react").JSX.Element;
|
|
67
|
+
export { ButtonGroup };
|
|
68
|
+
//# sourceMappingURL=button-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/E;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,gBAAgB,+BA8ClB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from '../../lib/utils.js';
|
|
3
|
+
/**
|
|
4
|
+
* Related controls joined as one, with the focus ring drawn once around them.
|
|
5
|
+
*
|
|
6
|
+
* **The ring is the reason this is a Component and not a flex row.** Three
|
|
7
|
+
* buttons side by side each draw their own focus ring, so a reader tabbing along
|
|
8
|
+
* the row sees three separate rings marching across a control that reads as one
|
|
9
|
+
* thing, and the reader has to work out each time whether the thing they are in
|
|
10
|
+
* has changed. Here the group takes the ring: the buttons suppress their own, and
|
|
11
|
+
* the group draws a single ring around its whole bounds when focus is inside it.
|
|
12
|
+
* The reader sees one indicator around one control, and it moves as a unit.
|
|
13
|
+
*
|
|
14
|
+
* The cost is stated rather than hidden: a ring drawn around a group is on the
|
|
15
|
+
* group, so it is visible whether the focus arrived from the keyboard or from a
|
|
16
|
+
* click. That is a real trade, and it is the right one here, because a group of
|
|
17
|
+
* mutually exclusive or sequential actions is nearly always operated from the
|
|
18
|
+
* keyboard and the ambiguity of a ring on a click is much cheaper than three rings
|
|
19
|
+
* marching. A caller who needs the per-button indicator back puts the buttons in a
|
|
20
|
+
* `Toolbar` instead, which is a different Component with a different claim.
|
|
21
|
+
*
|
|
22
|
+
* **The frame is drawn by the group and the inner frames are removed.** A
|
|
23
|
+
* ButtonGroup carries the border and the radius; each button inside drops its own
|
|
24
|
+
* border and its own corner radius, and the first and last keep the outer corners.
|
|
25
|
+
* The alternative, letting each button keep its own border, gives a row with a
|
|
26
|
+
* double rule between every pair and a gap at both ends, which is the reason
|
|
27
|
+
* grouped toolbars so often look like a row of separate buttons that happen to be
|
|
28
|
+
* near each other.
|
|
29
|
+
*
|
|
30
|
+
* **It is a `group` with a name, not a `toolbar`.** A toolbar is a set of controls
|
|
31
|
+
* that operates on a document, with its own arrow-key model, and a ButtonGroup is
|
|
32
|
+
* usually a set of related actions rather than an editing surface. The `group`
|
|
33
|
+
* role says "these belong together" and stops there, which is the claim being
|
|
34
|
+
* made. A caller whose buttons operate on a document and want the arrow keys
|
|
35
|
+
* composes Prism's `Toolbar` and does not use this.
|
|
36
|
+
*
|
|
37
|
+
* It is a server Component. It holds no state, reads no context and attaches no
|
|
38
|
+
* handler, so a row of controls in a static page costs no JavaScript, and the
|
|
39
|
+
* focus behaviour is two descendant variants of the group's own class string.
|
|
40
|
+
*/
|
|
41
|
+
function ButtonGroup({ className, children, label, orientation = 'horizontal', ...props }) {
|
|
42
|
+
return (_jsx("div", { "data-slot": "button-group", "data-orientation": orientation, role: "group", "aria-label": label, className: cn('inline-flex items-center', orientation === 'vertical' ? 'flex-col' : 'flex-row',
|
|
43
|
+
// The ring belongs to the group, at full strength, and it is drawn when
|
|
44
|
+
// focus is anywhere inside it. This is the whole Component: without this
|
|
45
|
+
// the buttons beside it draw their own and the reader sees three rings
|
|
46
|
+
// crossing one control.
|
|
47
|
+
'focus-within:ring-ring focus-within:ring-[3px]', 'rounded-md', className), ...props, children: _jsx("div", { "data-slot": "button-group-inner", className: cn('flex items-stretch', orientation === 'vertical' ? 'flex-col' : 'flex-row', '[&>*]:rounded-none', orientation === 'vertical'
|
|
48
|
+
? '[&>*+*]:-mt-px [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md'
|
|
49
|
+
: '[&>*+*]:-ms-px [&>*:first-child]:rounded-s-md [&>*:last-child]:rounded-e-md',
|
|
50
|
+
// The ring is the group's, and only the group's. A button that drew its
|
|
51
|
+
// own as well would put a second indicator on the same control.
|
|
52
|
+
'[&>*]:focus-visible:outline-none'), children: children }) }));
|
|
53
|
+
}
|
|
54
|
+
export { ButtonGroup };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cva } from 'class-variance-authority';
|
|
3
|
-
import { cn } from '../../lib/utils';
|
|
3
|
+
import { cn } from '../../lib/utils.js';
|
|
4
4
|
const buttonVariants = cva(
|
|
5
5
|
// The focus ring is `ring-ring` at full strength, not shadcn's stock
|
|
6
6
|
// `focus-visible:ring-ring/50`. The token build pins `--ring` to a step that
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The seven weekday headings, in the order the reader's week begins.
|
|
3
|
+
*
|
|
4
|
+
* A tuple rather than an array of strings, so the compiler refuses a caller who
|
|
5
|
+
* passed six. A grid whose header is one column short is a grid whose first and
|
|
6
|
+
* last rows are shifted by a day, and nothing on the screen shows it.
|
|
7
|
+
*/
|
|
8
|
+
export type CalendarWeekdays = readonly [
|
|
9
|
+
string,
|
|
10
|
+
string,
|
|
11
|
+
string,
|
|
12
|
+
string,
|
|
13
|
+
string,
|
|
14
|
+
string,
|
|
15
|
+
string
|
|
16
|
+
];
|
|
17
|
+
/** The props the Calendar accepts. */
|
|
18
|
+
export interface CalendarProps {
|
|
19
|
+
/**
|
|
20
|
+
* The accessible name of the grid.
|
|
21
|
+
*
|
|
22
|
+
* Required. A grid with no name is a table of numbers, and a reader who cannot
|
|
23
|
+
* tell a delivery date from a return date is being asked to guess.
|
|
24
|
+
*/
|
|
25
|
+
label: string;
|
|
26
|
+
/**
|
|
27
|
+
* The caption over the grid, for the month on show.
|
|
28
|
+
*
|
|
29
|
+
* A prop, and the reason it is a prop is the reason every word in this
|
|
30
|
+
* Component is one: a month name is reader-facing text in the reader's language
|
|
31
|
+
* and the reader's calendar convention, and a Component that carried a table of
|
|
32
|
+
* them would ship English and a Western year into every consumer's product.
|
|
33
|
+
* Format it with the same `Intl` call the rest of the product uses.
|
|
34
|
+
*/
|
|
35
|
+
monthLabel: string;
|
|
36
|
+
/** The seven weekday headings, starting from `firstWeekday`. */
|
|
37
|
+
weekdayLabels: CalendarWeekdays;
|
|
38
|
+
/**
|
|
39
|
+
* Which day the reader's week starts on, as `Date.prototype.getDay()` numbers
|
|
40
|
+
* it, so `0` is Sunday.
|
|
41
|
+
*
|
|
42
|
+
* Defaults to Sunday because that is what `getDay` returns and a default a
|
|
43
|
+
* caller may override is the honest one. Pass it for a Monday-first locale, and
|
|
44
|
+
* order `weekdayLabels` to match: the two are the same fact and the Component
|
|
45
|
+
* cannot infer either half of it.
|
|
46
|
+
*/
|
|
47
|
+
firstWeekday?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
48
|
+
/** The accessible name of the control that steps back one month. */
|
|
49
|
+
previousLabel: string;
|
|
50
|
+
/** The accessible name of the control that steps forward one month. */
|
|
51
|
+
nextLabel: string;
|
|
52
|
+
/**
|
|
53
|
+
* The month on show.
|
|
54
|
+
*
|
|
55
|
+
* Controlled, and required to be, because the first month a calendar may open
|
|
56
|
+
* on is a rule about the reader's situation rather than about the calendar: a
|
|
57
|
+
* booking form opens on next month, an archive opens on the month the record is
|
|
58
|
+
* in. A calendar that kept that state would have to be told the rule twice.
|
|
59
|
+
*/
|
|
60
|
+
month: Date;
|
|
61
|
+
/** Called with the first day of the month when the reader moves between months. */
|
|
62
|
+
onMonthChange: (month: Date) => void;
|
|
63
|
+
/**
|
|
64
|
+
* The chosen date, or `null` for nothing chosen.
|
|
65
|
+
*
|
|
66
|
+
* The grid marks the chosen date with `aria-selected`, so this is also what the
|
|
67
|
+
* month opens on when the reader has already answered.
|
|
68
|
+
*/
|
|
69
|
+
value?: Date | null;
|
|
70
|
+
/** Called with the date the reader chooses. Never called with a disabled date. */
|
|
71
|
+
onValueChange?: (date: Date) => void;
|
|
72
|
+
/**
|
|
73
|
+
* Whether a date cannot be chosen.
|
|
74
|
+
*
|
|
75
|
+
* A disabled date stays in the grid and stays reachable by the arrow keys,
|
|
76
|
+
* announced as unavailable and refusing to be chosen. A date that is simply
|
|
77
|
+
* absent is indistinguishable from a grid that failed to draw that week, and a
|
|
78
|
+
* reader who cannot land on it cannot tell a sold-out day from a bug. Say why
|
|
79
|
+
* it is unavailable in text beside the field.
|
|
80
|
+
*/
|
|
81
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
82
|
+
/**
|
|
83
|
+
* The full accessible name of a day cell.
|
|
84
|
+
*
|
|
85
|
+
* A date is a phrase in the reader's language and their date convention, so it
|
|
86
|
+
* is the caller's. Without it the cell is named by its day number and its column
|
|
87
|
+
* heading, which is what grid navigation already conveys.
|
|
88
|
+
*/
|
|
89
|
+
dayLabel?: (date: Date) => string;
|
|
90
|
+
/**
|
|
91
|
+
* The date to mark as today, when the reader's clock is not the renderer's.
|
|
92
|
+
*
|
|
93
|
+
* The mark is drawn and announced by `aria-current="date"`, which is a machine
|
|
94
|
+
* value, so no word is spent on it.
|
|
95
|
+
*/
|
|
96
|
+
today?: Date;
|
|
97
|
+
/** Whether the reader may not change the month or choose a date. */
|
|
98
|
+
disabled?: boolean;
|
|
99
|
+
/**
|
|
100
|
+
* The form field name. The chosen date is submitted as `YYYY-MM-DD`.
|
|
101
|
+
*
|
|
102
|
+
* The field is a plain hidden input rather than a date input, so the value is
|
|
103
|
+
* one format the caller can parse without reading the reader's display
|
|
104
|
+
* convention out of the string.
|
|
105
|
+
*/
|
|
106
|
+
name?: string;
|
|
107
|
+
/** Identifies the form that owns the hidden input. */
|
|
108
|
+
form?: string;
|
|
109
|
+
/** Layout only. */
|
|
110
|
+
className?: string;
|
|
111
|
+
}
|
|
112
|
+
/**
|
|
113
|
+
* A month grid for picking one date.
|
|
114
|
+
*
|
|
115
|
+
* **It is built here because Base UI does not ship one.** The package at 1.8.0
|
|
116
|
+
* has a combobox, a number field, an OTP field and a field, and no calendar, so
|
|
117
|
+
* there is nothing to compose and everything here is the Component's own. That is
|
|
118
|
+
* stated rather than implied because "the docs show one" is not evidence, and a
|
|
119
|
+
* wrapper around a module that is not in the installed package is the failure this
|
|
120
|
+
* Component could have shipped.
|
|
121
|
+
*
|
|
122
|
+
* **The grid is always six weeks tall.** A month that needs five rows and a month
|
|
123
|
+
* that needs six would otherwise resize as the reader pages through, which moves
|
|
124
|
+
* the dates under the pointer and under the highlight: a reader who aims at the
|
|
125
|
+
* 24th after reading its position in a five-row month clicks the 31st in a
|
|
126
|
+
* six-row one. The empty cells at the edges are marked `aria-hidden` rather than
|
|
127
|
+
* filled with the neighbouring month's dates, because a date from another month in
|
|
128
|
+
* this grid is a date the reader did not come for.
|
|
129
|
+
*
|
|
130
|
+
* **Every date, weekday name and month name is the caller's.** The caption, the
|
|
131
|
+
* seven column headings and the month the reader moves to are all reader-facing
|
|
132
|
+
* text in the reader's language, and the Component has no business carrying a
|
|
133
|
+
* table of them. What it does carry is the geometry: which column a date falls in
|
|
134
|
+
* and which day it sits on.
|
|
135
|
+
*
|
|
136
|
+
* **One cell is in the tab order, and the arrows move it.** The roving tab stop
|
|
137
|
+
* sits on the chosen date, or on today, or on the first of the month, so a reader
|
|
138
|
+
* who tabs in lands on the date they care about rather than on the 1st. The arrows
|
|
139
|
+
* step a day and a week, Home and End step to the ends of the week, and PageUp and
|
|
140
|
+
* PageDown step a month, with Shift for a year. Moving past the end of a month
|
|
141
|
+
* changes the month on show and carries the focus with it, so paging never leaves
|
|
142
|
+
* the highlight on a cell that is no longer drawn.
|
|
143
|
+
*
|
|
144
|
+
* **A disabled date is drawn, reachable and refused.** It stays in the grid and
|
|
145
|
+
* stays in the arrow path, because a date that is simply missing is
|
|
146
|
+
* indistinguishable from a grid that failed to render that week, and a reader who
|
|
147
|
+
* cannot reach it cannot tell a fully booked day from a bug. Enter, Space and a
|
|
148
|
+
* click on it do nothing, and it announces as unavailable. Explain the reason in
|
|
149
|
+
* text beside the field; a greyed cell on its own says only that it is not
|
|
150
|
+
* available.
|
|
151
|
+
*
|
|
152
|
+
* **The caption is a live region.** Paging a month changes the month with no other
|
|
153
|
+
* visible change for a reader who is on the grid, so the caption announces itself
|
|
154
|
+
* when it changes.
|
|
155
|
+
*/
|
|
156
|
+
declare function Calendar({ label, monthLabel, weekdayLabels, firstWeekday, previousLabel, nextLabel, month, onMonthChange, value, onValueChange, isDateDisabled, dayLabel, today, disabled, name, form, className, }: CalendarProps): import("react").JSX.Element;
|
|
157
|
+
export { Calendar };
|
|
158
|
+
//# sourceMappingURL=calendar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/calendar.tsx"],"names":[],"mappings":"AAOA;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS;IACtC,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;IACN,MAAM;CACP,CAAA;AAED,sCAAsC;AACtC,MAAM,WAAW,aAAa;IAC5B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;;OAQG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB,gEAAgE;IAChE,aAAa,EAAE,gBAAgB,CAAA;IAC/B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAA;IACrB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;;OAOG;IACH,KAAK,EAAE,IAAI,CAAA;IACX,mFAAmF;IACnF,aAAa,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IACpC;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACxC;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IACjC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,IAAI,CAAA;IACZ,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,QAAQ,CAAC,EAChB,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAgB,EAChB,aAAa,EACb,SAAS,EACT,KAAK,EACL,aAAa,EACb,KAAY,EACZ,aAAa,EACb,cAAc,EACd,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,SAAS,GACV,EAAE,aAAa,+BA2Pf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|