@thewhatmatters/wmds 0.4.43 → 0.4.45
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/CHANGELOG.md +40 -0
- package/dist/components/atoms/Button/ButtonSpinner.js +1 -1
- package/dist/components/atoms/Button/ButtonStatusButton.d.ts.map +1 -1
- package/dist/components/atoms/Button/ButtonStatusButton.js +57 -38
- package/dist/components/atoms/Button/ButtonStatusContent.d.ts.map +1 -1
- package/dist/components/atoms/Button/ButtonStatusContent.js +10 -10
- package/dist/components/atoms/Button/buttonStatusMotion.d.ts.map +1 -1
- package/dist/components/atoms/Button/buttonStatusMotion.js +2 -2
- package/dist/components/atoms/Button/buttonStatusStyles.d.ts +4 -0
- package/dist/components/atoms/Button/buttonStatusStyles.d.ts.map +1 -1
- package/dist/components/atoms/Button/buttonStatusStyles.js +4 -4
- package/dist/components/atoms/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/atoms/Checkbox/Checkbox.js +41 -40
- package/dist/components/atoms/IconButton/IconButton.d.ts.map +1 -1
- package/dist/components/atoms/IconButton/IconButton.js +75 -74
- package/dist/components/atoms/Input/Input.d.ts +2 -0
- package/dist/components/atoms/Input/Input.d.ts.map +1 -1
- package/dist/components/atoms/Input/Input.js +87 -81
- package/dist/components/atoms/Status/Status.js +1 -1
- package/dist/components/atoms/Status/statusRingStyles.d.ts +1 -1
- package/dist/components/atoms/Status/statusRingStyles.d.ts.map +1 -1
- package/dist/components/atoms/Status/statusRingStyles.js +1 -1
- package/dist/components/atoms/Switch/Switch.d.ts.map +1 -1
- package/dist/components/atoms/Switch/Switch.js +53 -52
- package/dist/components/atoms/TextArea/TextArea.d.ts +2 -0
- package/dist/components/atoms/TextArea/TextArea.d.ts.map +1 -1
- package/dist/components/atoms/TextArea/TextArea.js +59 -49
- package/dist/components/atoms/inputShared/InputTrailingAffordance.d.ts.map +1 -1
- package/dist/components/atoms/inputShared/InputTrailingAffordance.js +16 -14
- package/dist/components/molecules/CalEmbed/CalEmbed.d.ts.map +1 -1
- package/dist/components/molecules/CalEmbed/CalEmbed.js +17 -23
- package/dist/components/molecules/EmptyState/EmptyState.d.ts +41 -0
- package/dist/components/molecules/EmptyState/EmptyState.d.ts.map +1 -0
- package/dist/components/molecules/EmptyState/EmptyState.js +46 -0
- package/dist/components/molecules/EmptyState/emptyStateStyles.d.ts +10 -0
- package/dist/components/molecules/EmptyState/emptyStateStyles.d.ts.map +1 -0
- package/dist/components/molecules/EmptyState/emptyStateStyles.js +11 -0
- package/dist/components/molecules/IndexList/IndexList.d.ts +6 -1
- package/dist/components/molecules/IndexList/IndexList.d.ts.map +1 -1
- package/dist/components/molecules/IndexList/IndexList.js +67 -58
- package/dist/components/molecules/LinkTile/LinkTile.d.ts +4 -2
- package/dist/components/molecules/LinkTile/LinkTile.d.ts.map +1 -1
- package/dist/components/molecules/LinkTile/LinkTile.js +89 -81
- package/dist/components/molecules/LogView/LogView.d.ts.map +1 -1
- package/dist/components/molecules/LogView/LogView.js +68 -63
- package/dist/components/molecules/Progress/Progress.d.ts +38 -0
- package/dist/components/molecules/Progress/Progress.d.ts.map +1 -0
- package/dist/components/molecules/Progress/Progress.js +96 -0
- package/dist/components/molecules/Progress/progressStyles.d.ts +17 -0
- package/dist/components/molecules/Progress/progressStyles.d.ts.map +1 -0
- package/dist/components/molecules/Progress/progressStyles.js +9 -0
- package/dist/components/molecules/Stat/Stat.d.ts.map +1 -1
- package/dist/components/molecules/Stat/Stat.js +65 -61
- package/dist/components/molecules/TaskRows/TaskRowsTable.d.ts.map +1 -1
- package/dist/components/molecules/TaskRows/TaskRowsTable.js +77 -76
- package/dist/components/molecules/TileGrid/TileGrid.d.ts +6 -1
- package/dist/components/molecules/TileGrid/TileGrid.d.ts.map +1 -1
- package/dist/components/molecules/TileGrid/TileGrid.js +52 -47
- package/dist/components/organisms/Chart/ChartSegmentedRing.d.ts +10 -4
- package/dist/components/organisms/Chart/ChartSegmentedRing.d.ts.map +1 -1
- package/dist/components/organisms/Chart/ChartSegmentedRing.js +7 -2
- package/dist/components/organisms/Chart/chartStyles.d.ts +4 -0
- package/dist/components/organisms/Chart/chartStyles.d.ts.map +1 -1
- package/dist/components/organisms/Chart/chartStyles.js +4 -2
- package/dist/components/organisms/SiteNav/SiteNav.d.ts +8 -1
- package/dist/components/organisms/SiteNav/SiteNav.d.ts.map +1 -1
- package/dist/components/organisms/SiteNav/SiteNav.js +73 -69
- package/dist/components/organisms/SiteNav/siteNavStyles.d.ts +6 -0
- package/dist/components/organisms/SiteNav/siteNavStyles.d.ts.map +1 -1
- package/dist/components/organisms/SiteNav/siteNavStyles.js +6 -6
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +158 -153
- package/dist/lib/useDelayedLoading.d.ts +13 -0
- package/dist/lib/useDelayedLoading.d.ts.map +1 -0
- package/dist/lib/useDelayedLoading.js +27 -0
- package/dist/motion.css +10 -0
- package/dist/styles.css +1 -1
- package/docs/components.md +1 -1
- package/docs/exports.json +26 -1
- package/docs/patterns/components-accordion--flush.tsx +1 -1
- package/docs/patterns/components-appshell--portal-dashboard-pattern.tsx +1 -1
- package/docs/patterns/components-avatar--dropdown-row.tsx +1 -1
- package/docs/patterns/components-badge--outline-tags.tsx +1 -1
- package/docs/patterns/components-badge--status-pill.tsx +1 -1
- package/docs/patterns/components-badge--with-avatar.tsx +1 -1
- package/docs/patterns/components-band--page-in-bands.tsx +1 -1
- package/docs/patterns/components-breadcrumb--editorial.tsx +1 -1
- package/docs/patterns/components-breadcrumb--long-path.tsx +1 -1
- package/docs/patterns/components-breadcrumb--path.tsx +1 -1
- package/docs/patterns/components-breadcrumb--router-links.tsx +1 -1
- package/docs/patterns/components-button-button--copy-button.tsx +1 -1
- package/docs/patterns/components-button-button--destructive-action.tsx +1 -1
- package/docs/patterns/components-button-button--external-link.tsx +1 -1
- package/docs/patterns/components-button-button--ghost-action.tsx +1 -1
- package/docs/patterns/components-button-button--inverse-action.tsx +1 -1
- package/docs/patterns/components-button-button--link-render.tsx +1 -1
- package/docs/patterns/components-button-button--multi-state-badge.tsx +2 -2
- package/docs/patterns/components-button-button--outline-mono.tsx +1 -1
- package/docs/patterns/components-button-button--primary-action.tsx +1 -1
- package/docs/patterns/components-button-button--row-hug.tsx +1 -1
- package/docs/patterns/components-button-button--row-layout.tsx +1 -1
- package/docs/patterns/components-button-button--secondary-action.tsx +1 -1
- package/docs/patterns/components-button-button--suggestion-pills.tsx +1 -1
- package/docs/patterns/components-button-button--with-count.tsx +1 -1
- package/docs/patterns/components-button-button--with-icon.tsx +1 -1
- package/docs/patterns/components-button-floatingactionbutton--vertical-actions.tsx +1 -1
- package/docs/patterns/components-calembed--pattern-skip-above.tsx +1 -1
- package/docs/patterns/components-card-card--body-slot-occupancy-history.tsx +1 -1
- package/docs/patterns/components-card-card--headerless-media.tsx +1 -1
- package/docs/patterns/components-card-card--outlined-layout.tsx +1 -1
- package/docs/patterns/components-card-card--pinned-height.tsx +1 -1
- package/docs/patterns/components-card-card--terminal-frame.tsx +1 -1
- package/docs/patterns/components-card-selectablecard--selectable-cards-pattern.tsx +1 -1
- package/docs/patterns/components-carousel--image-carousel.tsx +1 -1
- package/docs/patterns/components-chart--audience-activity-heatmap.tsx +1 -1
- package/docs/patterns/components-chart--cartesian-no-data-gaps.tsx +1 -1
- package/docs/patterns/components-chart--occupancy-history-in-card.tsx +1 -1
- package/docs/patterns/components-chart--occupancy-in-card.tsx +1 -1
- package/docs/patterns/components-chart--post-reach-distribution.tsx +1 -1
- package/docs/patterns/components-chart--ranked-audience-breakdown.tsx +1 -1
- package/docs/patterns/components-chart--revenue-by-line.tsx +1 -1
- package/docs/patterns/components-chart--segmented-ring-pattern.tsx +1 -1
- package/docs/patterns/components-chart--unit-grid-composition.tsx +1 -1
- package/docs/patterns/components-chatdock--pattern-chat-dock.tsx +1 -1
- package/docs/patterns/components-chatdock--pattern-start-project-gate.tsx +1 -1
- package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx +1 -1
- package/docs/patterns/components-checkbox-checkbox--default.tsx +1 -1
- package/docs/patterns/components-checkbox-checkbox--with-count.tsx +1 -1
- package/docs/patterns/components-checkbox-checkbox--with-description.tsx +1 -1
- package/docs/patterns/components-checkbox-checkboxgroup--default.tsx +1 -1
- package/docs/patterns/components-checkbox-checkboxgroup--option-counts.tsx +1 -1
- package/docs/patterns/components-copyfield--clipboard-blocked.tsx +1 -1
- package/docs/patterns/components-copyfield--copied.tsx +1 -1
- package/docs/patterns/components-copyfield--copy-key.tsx +1 -1
- package/docs/patterns/components-copyfield--on-navy.tsx +1 -1
- package/docs/patterns/components-descriptionlist--details.tsx +1 -1
- package/docs/patterns/components-descriptionlist--post-metadata.tsx +1 -1
- package/docs/patterns/components-dialog--alert-dialog-destructive.tsx +1 -1
- package/docs/patterns/components-dialog--alert-dialog-typed-confirmation.tsx +1 -1
- package/docs/patterns/components-dialog--default-dialog.tsx +1 -1
- package/docs/patterns/components-dialog--form-dialog.tsx +1 -1
- package/docs/patterns/components-displaycontrols--page-utilities.tsx +1 -1
- package/docs/patterns/components-displaycontrols--theme-switch.tsx +1 -1
- package/docs/patterns/components-errorsummary--contact-form.tsx +1 -1
- package/docs/patterns/components-field--horizontal-input.tsx +1 -1
- package/docs/patterns/components-field--horizontal-text-area.tsx +1 -1
- package/docs/patterns/components-field--multi-control.tsx +1 -1
- package/docs/patterns/components-filterpanel--panel.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-ruled-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-hero-with-gallery-intro.tsx +1 -1
- package/docs/patterns/components-footerreveal--marketing-page-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--ruled-grid-footer-pattern.tsx +1 -1
- package/docs/patterns/components-footerreveal--sequenced-marketing-hero.tsx +1 -1
- package/docs/patterns/components-herointro--two-line-intro.tsx +1 -1
- package/docs/patterns/components-herointro--with-actions.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-pattern.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-text-sequence.tsx +1 -1
- package/docs/patterns/components-herotilestack--marketing-hero-with-gallery-intro.tsx +1 -1
- package/docs/patterns/components-indexlist--post-index.tsx +1 -1
- package/docs/patterns/components-intakeconfirmation--booked-pattern.tsx +1 -1
- package/docs/patterns/components-intakeconfirmation--emailed-pattern.tsx +1 -1
- package/docs/patterns/components-intakeform--about-you-pattern.tsx +1 -1
- package/docs/patterns/components-intakeform--short-form-pattern.tsx +1 -1
- package/docs/patterns/components-intakemodal--intake-modal-pattern.tsx +1 -1
- package/docs/patterns/components-kbd--command-row.tsx +1 -1
- package/docs/patterns/components-kbd--numbered-choices.tsx +1 -1
- package/docs/patterns/components-kbd--shortcut.tsx +1 -1
- package/docs/patterns/components-linktile--resource-tile.tsx +1 -1
- package/docs/patterns/components-linktile--router-link.tsx +1 -1
- package/docs/patterns/components-logview--detail-pane.tsx +1 -1
- package/docs/patterns/components-logview--log-viewer.tsx +1 -1
- package/docs/patterns/components-moremenu--action-menu.tsx +1 -1
- package/docs/patterns/components-moremenu--in-card-header.tsx +1 -1
- package/docs/patterns/components-navlist--app-sidebar.tsx +1 -1
- package/docs/patterns/components-navlist--side-nav-settings.tsx +1 -1
- package/docs/patterns/components-notice--account-not-connected.tsx +1 -1
- package/docs/patterns/components-notice--holiday-closure.tsx +1 -1
- package/docs/patterns/components-notice--private-buyout.tsx +1 -1
- package/docs/patterns/components-notice--sync-failed.tsx +1 -1
- package/docs/patterns/components-pageheader--app-header-pattern.tsx +1 -1
- package/docs/patterns/components-pageheader--page-section-header.tsx +1 -1
- package/docs/patterns/components-pageheader--toolbar-header.tsx +1 -1
- package/docs/patterns/components-panel--end-detail-rail.tsx +1 -1
- package/docs/patterns/components-pillgroup--pill-group-pattern.tsx +1 -1
- package/docs/patterns/components-progress--upload-pattern.tsx +9 -0
- package/docs/patterns/components-promptbar--pattern-prompt-bar.tsx +1 -1
- package/docs/patterns/components-prose--article-body.tsx +1 -1
- package/docs/patterns/components-radio-radiogroup--default.tsx +1 -1
- package/docs/patterns/components-scrollhorizontal--project-gallery-pattern.tsx +1 -1
- package/docs/patterns/components-scrollhorizontal--with-intro.tsx +1 -1
- package/docs/patterns/components-sectioncaption--column-caption.tsx +1 -1
- package/docs/patterns/components-sectioncaption--with-action.tsx +1 -1
- package/docs/patterns/components-sheet--bottom-sheet.tsx +1 -1
- package/docs/patterns/components-sheet--end-sheet.tsx +1 -1
- package/docs/patterns/components-sheet--side-sheet-header-actions.tsx +1 -1
- package/docs/patterns/components-sheet--side-sheet-url-deep-link.tsx +1 -1
- package/docs/patterns/components-sheet--side-sheet.tsx +1 -1
- package/docs/patterns/components-sitenav--brand-and-cta.tsx +1 -1
- package/docs/patterns/components-sitenav--centered-links.tsx +1 -1
- package/docs/patterns/components-sitenav--compact.tsx +1 -1
- package/docs/patterns/components-sitenav--marketing-header.tsx +1 -1
- package/docs/patterns/components-sitenav--mega-menu.tsx +1 -1
- package/docs/patterns/components-stat--hero-stat.tsx +1 -1
- package/docs/patterns/components-stat--insights-row.tsx +1 -1
- package/docs/patterns/components-stepprogress--step-progress-pattern.tsx +1 -1
- package/docs/patterns/components-switch--default.tsx +1 -1
- package/docs/patterns/components-switch--settings-row.tsx +1 -1
- package/docs/patterns/components-tab--settings-pages.tsx +1 -1
- package/docs/patterns/components-table--approvals-with-sheet.tsx +1 -1
- package/docs/patterns/components-table--approvals.tsx +1 -1
- package/docs/patterns/components-table--basic.tsx +1 -1
- package/docs/patterns/components-taskrows--action-details.tsx +1 -1
- package/docs/patterns/components-taskrows--capsules.tsx +1 -1
- package/docs/patterns/components-taskrows--card-with-status-rows.tsx +1 -1
- package/docs/patterns/components-taskrows--controlled-expand.tsx +1 -1
- package/docs/patterns/components-taskrows--custom-slots.tsx +1 -1
- package/docs/patterns/components-taskrows--needs-you-table.tsx +1 -1
- package/docs/patterns/components-taskrows--status-list.tsx +1 -1
- package/docs/patterns/components-taskrows--tag-chips.tsx +1 -1
- package/docs/patterns/components-textarea--save-status.tsx +1 -1
- package/docs/patterns/components-textlink--external-destination.tsx +1 -1
- package/docs/patterns/components-textlink--inline-prose.tsx +1 -1
- package/docs/patterns/components-textlink--quiet-title.tsx +1 -1
- package/docs/patterns/components-textlink--supporting-copy.tsx +1 -1
- package/docs/patterns/components-textsequence--default.tsx +1 -1
- package/docs/patterns/components-textsequence--reduced-motion.tsx +1 -1
- package/docs/patterns/components-textsequence--shapes.tsx +1 -1
- package/docs/patterns/components-tilegrid--masonry.tsx +1 -1
- package/docs/patterns/components-toast--stacked-notifications.tsx +1 -1
- package/docs/patterns/components-tooltip--controlled.tsx +1 -1
- package/docs/patterns/components-tooltip--disabled-control.tsx +1 -1
- package/docs/patterns/components-tooltip--icon-action.tsx +1 -1
- package/docs/patterns/components-tooltip--keyboard-shortcut.tsx +1 -1
- package/docs/patterns/components-tooltip--placement.tsx +1 -1
- package/docs/patterns/foundations-scroll-fade--horizontal-rail.tsx +1 -1
- package/docs/patterns/foundations-scroll-fade--overflowing-list.tsx +1 -1
- package/docs/patterns/guides-chart-explorations--comparison-gallery.tsx +1 -1
- package/docs/patterns/guides-filter-panel--filtered-grid.tsx +1 -1
- package/docs/patterns/guides-filter-panel--filtered-index.tsx +1 -1
- package/docs/patterns/guides-overlay-flows--notification-preferences.tsx +1 -1
- package/docs/patterns/guides-post-page--post-page.tsx +1 -1
- package/docs/patterns/guides-profile-typography--editorial-profile.tsx +1 -1
- package/docs/patterns/guides-resource-detail--detail.tsx +1 -1
- package/docs/patterns/index.json +9 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,46 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
|
|
|
7
7
|
- **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
|
|
8
8
|
- **How to add an entry** (contributors): don't edit this file on a feature branch. Add a release note as `changes/<topic>.md` (format in `changes/README.md`). The release step, `npm run release:prepare` on its own **Release 0.x.y** branch, folds every note into one new entry here and bumps the version once. `npm run check:changelog` checks this file and the notes.
|
|
9
9
|
|
|
10
|
+
## 0.4.45
|
|
11
|
+
|
|
12
|
+
**Chart.SegmentedRing: a screen-sized gauge that steps through figures.**
|
|
13
|
+
|
|
14
|
+
- **Chart.SegmentedRing** `size="fluid"`: fills its container's width (square), with the centre figure in the display face at 18% of the ring's width, for a ring that carries a whole screen (Stats — Pinned Counter).
|
|
15
|
+
- **Chart.SegmentedRing** `animate="always"`: sweeps from the current fill to each new value, so one gauge steps through several figures instead of jumping or emptying.
|
|
16
|
+
|
|
17
|
+
**SiteNav `overMedia`: a transparent nav over a full-bleed photo or video.**
|
|
18
|
+
|
|
19
|
+
- **SiteNav** `overMedia` (new): while expanded, the bar lays over the top of the next section instead of taking room above it, with no fill and the dark theme's light ink, so the footage shows through (Hero — Stage with a backdrop; Randy, 2026-11-01). Scrolled, the compact pill is the usual one. Story **SiteNav → State — over media**, with a test (out of flow, transparent, light ink).
|
|
20
|
+
|
|
21
|
+
### Consumer actions
|
|
22
|
+
|
|
23
|
+
- None. Existing sizes and `animate` values behave as before.
|
|
24
|
+
- None. For a page that opens on a full-bleed picture or video, pass `overMedia` to the page's `SiteNav`.
|
|
25
|
+
|
|
26
|
+
## 0.4.44
|
|
27
|
+
|
|
28
|
+
**Empty states (Rule 22).**
|
|
29
|
+
- **EmptyState** (new, Z7–Z9): what takes a list’s place when it’s empty. `kind="first-use"` (what shows up here + the main action), `"no-results"` (names the words or filters; Clear filters via `onClearFilters`, required), `"done"` (a short positive line, no action). Optional 24px icon, no illustrations; at most a quiet "Learn more". Warns on a `no-results` without `onClearFilters` and a `done` with an action. Docs give a sentence template for each kind.
|
|
30
|
+
- **Every `empty` slot uses it** (Z7): a plain string in TileGrid, IndexList, TaskRows (table) or LogView `empty` renders an EmptyState (TaskRows’ "Nothing waiting" is a `done`). CalEmbed’s empty state is an EmptyState with the email route as its action.
|
|
31
|
+
- **`resultsLabel`** on TileGrid and IndexList (new, Z6): the result count in a status line, read out when it changes ("0 projects match").
|
|
32
|
+
- Story **Components/EmptyState → Pattern — filter to zero** (interaction test: the heading and filters stay, the empty state names the filters, the count is announced, Clear filters brings everything back).
|
|
33
|
+
|
|
34
|
+
**Loading states (Rule 21).**
|
|
35
|
+
- **`useDelayedLoading(loading, { delay, minDuration })`** (new, Y7): show an indicator only after 400ms, and keep it at least 400ms once shown. Input and TextArea use it for their spinner.
|
|
36
|
+
- **Input / TextArea `loading`** (Y4): the field carries `aria-busy`, and a status line says what's happening (new `loadingLabel`, default "Checking…").
|
|
37
|
+
- **Reduced motion** (Y6): every spinner holds still (Button, Input, TextArea, Checkbox, Switch, Status ring); the words carry the state.
|
|
38
|
+
- **400ms timing everywhere WMDS loads** (Y7): Checkbox, Switch and IconButton spinners, and the LinkTile, Stat and LogView skeletons wait 400ms (room kept at once) and stay at least 400ms. Busy state and blocking start immediately.
|
|
39
|
+
- **LinkTile `loading`** (Y4): busy with words for screen readers (new `loadingLabel`, default "Loading…"), no longer hidden.
|
|
40
|
+
- **Button loading look** (Y8): keeps the role's own fill (a primary stays primary) with the spinner; the grey fill read as disabled. Default labels are a send ("Sending…", "Sent", "Try again"), and Button warns when `status="loading"` has no `statusLabels.loading`.
|
|
41
|
+
- **Button `status`** (Y8): one width through idle, loading, success and error (no resize), so a "Sending…" label never moves the layout. Still `aria-live`, focusable, and repeat presses are ignored while loading. Docs: in forms, success hands over to the confirmation.
|
|
42
|
+
|
|
43
|
+
- **Progress** (new, Y9): a progress bar for waits over 10 seconds, uploads and exports. Label, "3 of 12 files" or a percentage, time left, Cancel (required unless `cancellable={false}`), `status="error"` with `message` and Retry (`onRetry`). `role="progressbar"` with values and `aria-valuetext`; screen readers hear every 10% and "… complete", not every tick. Indeterminate only without a total; still under reduced motion. Stories: upload with a count, export percentage, no total, failed with retry, complete.
|
|
44
|
+
|
|
45
|
+
### Consumer actions
|
|
46
|
+
|
|
47
|
+
None required. Replace hand-built empty messages with **EmptyState**, pick the kind, and pass `resultsLabel` on filtered lists.
|
|
48
|
+
Button `status` defaults changed from "Processing / Success / Error" to "Sending… / Sent / Try again", and loading keeps the button's own fill: pass your own `statusLabels` (Button now warns when the loading label is missing). Wrap your own loading indicators in `useDelayedLoading`. Give send buttons real `statusLabels` ("Sending…").
|
|
49
|
+
|
|
10
50
|
## 0.4.43
|
|
11
51
|
|
|
12
52
|
**AppShell `asideMode="inset"` and a `toolbar` slot.** From `lg`, an inset aside is a raised card floating inside the page surface, under the title bar and the toolbar, 12px from the end and bottom edges (radius-surface-md, border, shadow-lg). The page narrows beside it and is never covered. Its header is the title bar's 56px band, with the title and description centred. The new `toolbar` prop / **AppShell.Toolbar** slot is a full-width band under the title bar; with an inset aside it spans above both. Below `lg` the aside is the overlay **Panel**, as in the other modes. New `asideFooter`: actions pinned under the aside's scrolling body (Copy, Reset), in every mode (the **Panel** `footer` in overlay). Fixed for docked and inset asides that start open: the server and the first paint no longer render the overlay **Panel** before the desktop query runs (it caused a hydration mismatch and a flash of the overlay). Story **Components/AppShell → State — aside inset, with a toolbar** (interaction test: inside the surface, under the toolbar, 12px gap, 56px header, page not covered, footer pinned).
|
|
@@ -5,7 +5,7 @@ import { jsx as n } from "react/jsx-runtime";
|
|
|
5
5
|
//#region src/components/atoms/Button/ButtonSpinner.tsx
|
|
6
6
|
function r({ size: r }) {
|
|
7
7
|
return /* @__PURE__ */ n("span", {
|
|
8
|
-
className: e("animate-spin shrink-0 rounded-full border-2 border-current border-r-transparent", t[r]),
|
|
8
|
+
className: e("animate-spin motion-reduce:animate-none shrink-0 rounded-full border-2 border-current border-r-transparent", t[r]),
|
|
9
9
|
"aria-hidden": !0
|
|
10
10
|
});
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonStatusButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/ButtonStatusButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ButtonStatusButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/ButtonStatusButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,oBAAoB,EAEzB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAUf,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAGL,KAAK,UAAU,EACf,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,MAAM,WAAW,uBACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAC3C;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,kEAAkE;IAClE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB;AAID,eAAO,MAAM,kBAAkB,uHA0G7B,CAAC"}
|
|
@@ -1,51 +1,70 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn as e } from "../../../lib/cn.js";
|
|
3
|
-
import { buttonBaseClasses as t,
|
|
4
|
-
import { getStatusPaint as
|
|
5
|
-
import { ButtonStatusIcon as
|
|
6
|
-
import { buttonStatusIconGapClasses as
|
|
7
|
-
import { forwardRef as
|
|
8
|
-
import { jsx as
|
|
9
|
-
import { motion as
|
|
3
|
+
import { buttonBaseClasses as t, buttonIconSizeClasses as n, buttonPillClass as r } from "./buttonStyles.js";
|
|
4
|
+
import { getStatusPaint as i, getStatusShellClass as a, statusMorphTransition as o } from "./buttonStatusMotion.js";
|
|
5
|
+
import { ButtonStatusIcon as s, ButtonStatusLabel as c } from "./ButtonStatusContent.js";
|
|
6
|
+
import { buttonStatusIconGapClasses as l, buttonStatusSizeClasses as u, resolveStatusLabels as d } from "./buttonStatusStyles.js";
|
|
7
|
+
import { forwardRef as f } from "react";
|
|
8
|
+
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
9
|
+
import { motion as h } from "motion/react";
|
|
10
10
|
//#region src/components/atoms/Button/ButtonStatusButton.tsx
|
|
11
|
-
var
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
var g = [
|
|
12
|
+
"idle",
|
|
13
|
+
"loading",
|
|
14
|
+
"success",
|
|
15
|
+
"error"
|
|
16
|
+
], _ = f(function({ status: f, role: _ = "primary", size: v = "md", statusLabels: y, icon: b, disableOnError: x = !1, disabled: S, className: C, children: w, type: T = "button", onClick: E, "aria-label": D, "aria-pressed": O, "aria-keyshortcuts": k, id: A, name: j, form: M, ...N }, P) {
|
|
17
|
+
let F = d(w, y);
|
|
18
|
+
f === "loading" && y?.loading == null && console.warn("[WMDS Button] `status=\"loading\"` without `statusLabels.loading`: say what is happening (\"Saving…\").");
|
|
19
|
+
let I = F[f], L = !S && (f === "loading" || f === "error" && x), R = S || L, z = i(f, _);
|
|
20
|
+
return /* @__PURE__ */ p(h.button, {
|
|
21
|
+
...N,
|
|
22
|
+
ref: P,
|
|
23
|
+
type: T,
|
|
24
|
+
disabled: S,
|
|
25
|
+
"aria-disabled": L || void 0,
|
|
26
|
+
"aria-busy": f === "loading" || void 0,
|
|
21
27
|
"aria-live": "polite",
|
|
22
|
-
"aria-label":
|
|
23
|
-
"aria-pressed":
|
|
24
|
-
"aria-keyshortcuts":
|
|
25
|
-
"data-role":
|
|
26
|
-
"data-size":
|
|
27
|
-
"data-status":
|
|
28
|
-
animate:
|
|
28
|
+
"aria-label": D,
|
|
29
|
+
"aria-pressed": O,
|
|
30
|
+
"aria-keyshortcuts": k,
|
|
31
|
+
"data-role": _,
|
|
32
|
+
"data-size": v,
|
|
33
|
+
"data-status": f,
|
|
34
|
+
animate: z,
|
|
29
35
|
initial: !1,
|
|
30
|
-
className: e(t, "justify-center",
|
|
31
|
-
whileTap:
|
|
32
|
-
transition:
|
|
36
|
+
className: e(t, "justify-center", u[v], r, a(f, _), "overflow-hidden", L && "aria-disabled:!opacity-100", C),
|
|
37
|
+
whileTap: R ? void 0 : { scale: .98 },
|
|
38
|
+
transition: o,
|
|
33
39
|
onClick: (e) => {
|
|
34
|
-
if (
|
|
40
|
+
if (L) {
|
|
35
41
|
e.preventDefault();
|
|
36
42
|
return;
|
|
37
43
|
}
|
|
38
|
-
|
|
44
|
+
E?.(e);
|
|
39
45
|
},
|
|
40
|
-
id:
|
|
41
|
-
name:
|
|
42
|
-
form:
|
|
43
|
-
children:
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
id: A,
|
|
47
|
+
name: j,
|
|
48
|
+
form: M,
|
|
49
|
+
children: /* @__PURE__ */ m("span", {
|
|
50
|
+
className: "inline-grid items-center justify-items-center",
|
|
51
|
+
children: [g.map((t) => /* @__PURE__ */ m("span", {
|
|
52
|
+
"aria-hidden": !0,
|
|
53
|
+
className: e("invisible col-start-1 row-start-1 inline-flex items-center whitespace-nowrap", (t !== "idle" || b != null) && l[v]),
|
|
54
|
+
children: [t !== "idle" || b != null ? /* @__PURE__ */ p("span", { className: e("shrink-0", n[v]) }) : null, /* @__PURE__ */ p("span", {
|
|
55
|
+
"data-label": F[t],
|
|
56
|
+
className: "before:content-[attr(data-label)]"
|
|
57
|
+
})]
|
|
58
|
+
}, t)), /* @__PURE__ */ m("span", {
|
|
59
|
+
className: e("col-start-1 row-start-1 inline-flex items-center", (f !== "idle" || b != null) && l[v]),
|
|
60
|
+
children: [/* @__PURE__ */ p(s, {
|
|
61
|
+
status: f,
|
|
62
|
+
size: v,
|
|
63
|
+
icon: b
|
|
64
|
+
}), /* @__PURE__ */ p(c, { label: I })]
|
|
65
|
+
})]
|
|
66
|
+
})
|
|
48
67
|
});
|
|
49
68
|
});
|
|
50
69
|
//#endregion
|
|
51
|
-
export {
|
|
70
|
+
export { _ as ButtonStatusButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonStatusContent.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/ButtonStatusContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"ButtonStatusContent.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/ButtonStatusContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AA0CzD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,IAAI,EACJ,IAAI,GACL,EAAE;IACD,MAAM,EAAE,YAAY,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB,sCAiCA;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,+BAkB7D"}
|
|
@@ -4,13 +4,13 @@ import { buttonIconSizeClasses as t } from "./buttonStyles.js";
|
|
|
4
4
|
import { statusIconSpring as n, statusLabelSpring as r } from "./buttonStatusMotion.js";
|
|
5
5
|
import { Check as i, Loader2 as a, X as o } from "lucide-react";
|
|
6
6
|
import { jsx as s } from "react/jsx-runtime";
|
|
7
|
-
import { AnimatePresence as c, motion as l,
|
|
7
|
+
import { AnimatePresence as c, motion as l, useReducedMotion as u, useTime as d, useTransform as f } from "motion/react";
|
|
8
8
|
//#region src/components/atoms/Button/ButtonStatusContent.tsx
|
|
9
|
-
function
|
|
10
|
-
let r =
|
|
9
|
+
function p({ size: n }) {
|
|
10
|
+
let r = d(), i = f(r, [0, 1e3], [0, 360], { clamp: !1 }), o = u();
|
|
11
11
|
return /* @__PURE__ */ s(l.span, {
|
|
12
12
|
className: "inline-flex shrink-0",
|
|
13
|
-
style: { rotate: i },
|
|
13
|
+
style: o ? void 0 : { rotate: i },
|
|
14
14
|
"aria-hidden": !0,
|
|
15
15
|
children: /* @__PURE__ */ s(a, {
|
|
16
16
|
className: e("stroke-current", t[n]),
|
|
@@ -18,15 +18,15 @@ function f({ size: n }) {
|
|
|
18
18
|
})
|
|
19
19
|
});
|
|
20
20
|
}
|
|
21
|
-
function
|
|
21
|
+
function m({ status: n, size: r }) {
|
|
22
22
|
let a = e("shrink-0 stroke-current", t[r]);
|
|
23
|
-
return n === "loading" ? /* @__PURE__ */ s(
|
|
23
|
+
return n === "loading" ? /* @__PURE__ */ s(p, { size: r }) : s(n === "success" ? i : o, {
|
|
24
24
|
className: a,
|
|
25
25
|
strokeWidth: 2.5,
|
|
26
26
|
"aria-hidden": !0
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
-
function
|
|
29
|
+
function h({ status: r, size: i, icon: a }) {
|
|
30
30
|
return r === "idle" && a == null ? null : /* @__PURE__ */ s(c, {
|
|
31
31
|
mode: "popLayout",
|
|
32
32
|
initial: !1,
|
|
@@ -54,14 +54,14 @@ function m({ status: r, size: i, icon: a }) {
|
|
|
54
54
|
children: r === "idle" ? /* @__PURE__ */ s("span", {
|
|
55
55
|
className: e("inline-flex shrink-0 [&>svg]:size-full [&>svg]:shrink-0 [&>svg]:stroke-current", t[i]),
|
|
56
56
|
children: a
|
|
57
|
-
}) : /* @__PURE__ */ s(
|
|
57
|
+
}) : /* @__PURE__ */ s(m, {
|
|
58
58
|
status: r,
|
|
59
59
|
size: i
|
|
60
60
|
})
|
|
61
61
|
}, r)
|
|
62
62
|
});
|
|
63
63
|
}
|
|
64
|
-
function
|
|
64
|
+
function g({ label: e }) {
|
|
65
65
|
return /* @__PURE__ */ s("span", {
|
|
66
66
|
className: "relative inline-flex items-center justify-center overflow-hidden",
|
|
67
67
|
children: /* @__PURE__ */ s(c, {
|
|
@@ -92,4 +92,4 @@ function h({ label: e }) {
|
|
|
92
92
|
});
|
|
93
93
|
}
|
|
94
94
|
//#endregion
|
|
95
|
-
export {
|
|
95
|
+
export { h as ButtonStatusIcon, g as ButtonStatusLabel };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonStatusMotion.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStatusMotion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,oFAAoF;AACpF,MAAM,MAAM,WAAW,GAAG;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAgDF,gEAAgE;AAChE,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK3D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAQ3D,CAAC;AAEF,wBAAgB,cAAc,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,GAAG,WAAW,
|
|
1
|
+
{"version":3,"file":"buttonStatusMotion.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStatusMotion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,oFAAoF;AACpF,MAAM,MAAM,WAAW,GAAG;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAgDF,gEAAgE;AAChE,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK3D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAQ3D,CAAC;AAEF,wBAAgB,cAAc,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,GAAG,WAAW,CAKlF;AAED,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,GAAG,MAAM,CAElF;AAED,qFAAqF;AACrF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAIjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;CAK5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC"}
|
|
@@ -44,7 +44,7 @@ var e = {
|
|
|
44
44
|
}
|
|
45
45
|
}, n = {
|
|
46
46
|
idle: "",
|
|
47
|
-
loading: "
|
|
47
|
+
loading: "",
|
|
48
48
|
success: "shadow-inset-highlight",
|
|
49
49
|
error: ""
|
|
50
50
|
}, r = {
|
|
@@ -57,7 +57,7 @@ var e = {
|
|
|
57
57
|
"inverse-outline": ""
|
|
58
58
|
};
|
|
59
59
|
function i(n, r) {
|
|
60
|
-
return n === "idle" ? e[r] : t[n];
|
|
60
|
+
return n === "loading" || n === "idle" ? e[r] : t[n];
|
|
61
61
|
}
|
|
62
62
|
function a(e, t) {
|
|
63
63
|
return e === "idle" ? r[t] : n[e];
|
|
@@ -7,6 +7,10 @@ export declare const buttonStatusCycle: ButtonStatus[];
|
|
|
7
7
|
* the button returns to `idle`, in milliseconds.
|
|
8
8
|
*/
|
|
9
9
|
export declare const buttonStatusHoldMs = 2000;
|
|
10
|
+
/**
|
|
11
|
+
* Fallbacks for a send, the common use (Loading states Y8). Pass `statusLabels` in your own words
|
|
12
|
+
* ("Saving…", "Saved"): Button warns in development when `status` has no loading label of yours.
|
|
13
|
+
*/
|
|
10
14
|
export declare const defaultStatusLabels: Record<ButtonStatus, string>;
|
|
11
15
|
export declare function getNextButtonStatus(current: ButtonStatus): ButtonStatus;
|
|
12
16
|
export declare function resolveStatusLabels(children: ReactNode, overrides?: Partial<Record<ButtonStatus, string>>): Record<ButtonStatus, string>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonStatusStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStatusStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,4HAA4H;AAC5H,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,eAAO,MAAM,iBAAiB,EAAE,YAAY,EAA4C,CAAC;AAEzF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK5D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,YAAY,GAAG,YAAY,CAGvE;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,SAAS,EACnB,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,GAChD,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAW9B;AAED,+EAA+E;AAC/E,eAAO,MAAM,uBAAuB;;;;;CAKW,CAAC;AAEhD,eAAO,MAAM,0BAA0B;;;;;CAKQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"buttonStatusStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStatusStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,4HAA4H;AAC5H,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpE,eAAO,MAAM,iBAAiB,EAAE,YAAY,EAA4C,CAAC;AAEzF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,OAAO,CAAC;AAEvC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAK5D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,YAAY,GAAG,YAAY,CAGvE;AAED,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,SAAS,EACnB,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,GAChD,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAW9B;AAED,+EAA+E;AAC/E,eAAO,MAAM,uBAAuB;;;;;CAKW,CAAC;AAEhD,eAAO,MAAM,0BAA0B;;;;;CAKQ,CAAC"}
|
|
@@ -8,10 +8,10 @@ var n = [
|
|
|
8
8
|
"success",
|
|
9
9
|
"error"
|
|
10
10
|
], r = 2e3, i = {
|
|
11
|
-
idle: "
|
|
12
|
-
loading: "
|
|
13
|
-
success: "
|
|
14
|
-
error: "
|
|
11
|
+
idle: "Send",
|
|
12
|
+
loading: "Sending…",
|
|
13
|
+
success: "Sent",
|
|
14
|
+
error: "Try again"
|
|
15
15
|
};
|
|
16
16
|
function a(e) {
|
|
17
17
|
return n[(n.indexOf(e) + 1) % n.length];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,OAAO,CAAC;AAIf,OAAO,EAoBL,KAAK,YAAY,EAClB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,KAAK,EAAa,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,KAAK,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAE5E,qDAAqD;AACrD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wFAAwF;IACxF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iEAAiE;IACjE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAcD;;;GAGG;AACH,eAAO,MAAM,QAAQ,4GAmNnB,CAAC"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn as e } from "../../../lib/cn.js";
|
|
3
|
+
import { useDelayedLoading as t } from "../../../lib/useDelayedLoading.js";
|
|
3
4
|
import "../Input/inputShellStyles.js";
|
|
4
|
-
import { InputStatusBanner as
|
|
5
|
-
import { checkboxBoxClassesFor as
|
|
6
|
-
import { forwardRef as
|
|
7
|
-
import { Check as
|
|
5
|
+
import { InputStatusBanner as n, warnStatusWithoutMessage as r } from "../inputShared/InputStatusBanner.js";
|
|
6
|
+
import { checkboxBoxClassesFor as i, checkboxCheckIconSizeClasses as a, checkboxCountClasses as ee, checkboxCountTitleLineClasses as o, checkboxDescriptionClasses as s, checkboxDescriptionRowClasses as te, checkboxHiddenInputClasses as ne, checkboxHitTargetDescriptionAlignClasses as re, checkboxHitTargetSizeClasses as ie, checkboxIndeterminateBarSizeClasses as ae, checkboxLabelClassesFor as c, checkboxMarkClasses as l, checkboxRowBaseClasses as u, checkboxRowSizeClasses as d, checkboxSizes as f, checkboxStatusBannerClassesFor as oe, checkboxTextColumnClasses as se } from "./checkboxStyles.js";
|
|
7
|
+
import { forwardRef as p, useCallback as ce, useId as le, useState as ue } from "react";
|
|
8
|
+
import { Check as de, Loader2 as fe } from "lucide-react";
|
|
8
9
|
import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
|
|
9
10
|
//#region src/components/atoms/Checkbox/Checkbox.tsx
|
|
10
11
|
var _ = {
|
|
@@ -14,37 +15,37 @@ var _ = {
|
|
|
14
15
|
function v(e) {
|
|
15
16
|
e.message != null && e.status == null && console.warn("[WMDS Checkbox] `message` requires `status`.");
|
|
16
17
|
}
|
|
17
|
-
var y =
|
|
18
|
-
|
|
19
|
-
let F =
|
|
18
|
+
var y = p(function({ size: f = "md", label: p, labelHidden: y = !1, description: b, count: x, countLabel: pe, indeterminate: S = !1, status: C, message: w, loading: T = !1, className: E, disabled: D, readOnly: O, checked: k, defaultChecked: A, id: j, onChange: M, ...N }, P) {
|
|
19
|
+
r("Checkbox", C, w);
|
|
20
|
+
let F = le(), I = j ?? F;
|
|
20
21
|
v({
|
|
21
22
|
status: C,
|
|
22
23
|
message: w
|
|
23
24
|
});
|
|
24
|
-
let L = k !== void 0, [R, z] =
|
|
25
|
+
let L = k !== void 0, [R, z] = ue(A ?? !1), B = L ? !!k : R, V = D || T, H = T && !D, me = t(T), U = w != null && w.length > 0 && C != null, W = U ? `${I}-message` : void 0, G = b != null && !y ? `${I}-description` : void 0, K = [
|
|
25
26
|
N["aria-describedby"],
|
|
26
27
|
G,
|
|
27
28
|
W
|
|
28
|
-
].filter(Boolean).join(" ") || void 0,
|
|
29
|
+
].filter(Boolean).join(" ") || void 0, he = ce((e) => {
|
|
29
30
|
e && (e.indeterminate = S), typeof P == "function" ? P(e) : P != null && (P.current = e);
|
|
30
|
-
}, [S, P]),
|
|
31
|
+
}, [S, P]), ge = (e) => {
|
|
31
32
|
if (O || H) {
|
|
32
33
|
e.preventDefault();
|
|
33
34
|
return;
|
|
34
35
|
}
|
|
35
36
|
L || z(e.target.checked), M?.(e);
|
|
36
|
-
},
|
|
37
|
+
}, _e = i(f, B, S, V, U ? void 0 : C), q = b != null && !y, J = x != null, Y = x?.toLocaleString("en-US"), X = J ? /* @__PURE__ */ h("span", {
|
|
37
38
|
className: "sr-only",
|
|
38
|
-
children: ` (${
|
|
39
|
+
children: ` (${pe ?? Y})`
|
|
39
40
|
}) : null, Z = J ? /* @__PURE__ */ h("span", {
|
|
40
|
-
className:
|
|
41
|
+
className: ee,
|
|
41
42
|
"aria-hidden": !0,
|
|
42
43
|
children: Y
|
|
43
44
|
}) : null, Q = (t) => /* @__PURE__ */ g("span", {
|
|
44
|
-
className: e("relative flex shrink-0 items-center justify-center",
|
|
45
|
+
className: e("relative flex shrink-0 items-center justify-center", ie[f], t),
|
|
45
46
|
children: [/* @__PURE__ */ h("input", {
|
|
46
47
|
...N,
|
|
47
|
-
ref:
|
|
48
|
+
ref: he,
|
|
48
49
|
id: I,
|
|
49
50
|
type: "checkbox",
|
|
50
51
|
checked: L ? k : void 0,
|
|
@@ -53,68 +54,68 @@ var y = f(function({ size: l = "md", label: f, labelHidden: y = !1, description:
|
|
|
53
54
|
"aria-disabled": H || void 0,
|
|
54
55
|
readOnly: O,
|
|
55
56
|
"aria-invalid": C === "error" || void 0,
|
|
56
|
-
"aria-describedby":
|
|
57
|
+
"aria-describedby": K,
|
|
57
58
|
"aria-checked": S ? "mixed" : void 0,
|
|
58
59
|
"aria-busy": T || void 0,
|
|
59
|
-
onChange:
|
|
60
|
-
className:
|
|
60
|
+
onChange: ge,
|
|
61
|
+
className: ne
|
|
61
62
|
}), /* @__PURE__ */ h("span", {
|
|
62
|
-
className:
|
|
63
|
+
className: _e,
|
|
63
64
|
"aria-hidden": !0,
|
|
64
|
-
children:
|
|
65
|
-
className: e(
|
|
65
|
+
children: me ? /* @__PURE__ */ h(fe, {
|
|
66
|
+
className: e(a[f], l, "animate-spin motion-reduce:animate-none"),
|
|
66
67
|
strokeWidth: 2
|
|
67
|
-
}) : S ? /* @__PURE__ */ h("span", { className: e(
|
|
68
|
-
className: e(
|
|
68
|
+
}) : S ? /* @__PURE__ */ h("span", { className: e(ae[f], l, "rounded-full bg-current") }) : B ? /* @__PURE__ */ h(de, {
|
|
69
|
+
className: e(a[f], l),
|
|
69
70
|
strokeWidth: 3,
|
|
70
71
|
"aria-hidden": !0
|
|
71
72
|
}) : null
|
|
72
73
|
})]
|
|
73
74
|
}), $ = /* @__PURE__ */ h("label", {
|
|
74
75
|
htmlFor: I,
|
|
75
|
-
className: e(
|
|
76
|
+
className: e(u, !q && "items-center", !q && d[f], V && "cursor-not-allowed", E),
|
|
76
77
|
children: y ? /* @__PURE__ */ g(m, { children: [Q(), /* @__PURE__ */ g("span", {
|
|
77
78
|
className: "sr-only",
|
|
78
|
-
children: [
|
|
79
|
+
children: [p, X]
|
|
79
80
|
})] }) : q ? /* @__PURE__ */ g("span", {
|
|
80
|
-
className: e(
|
|
81
|
-
children: [Q(
|
|
82
|
-
className: e(
|
|
81
|
+
className: e(te[f], J && "flex-1"),
|
|
82
|
+
children: [Q(re[f]), /* @__PURE__ */ g("span", {
|
|
83
|
+
className: e(se, J && "flex-1"),
|
|
83
84
|
children: [J ? /* @__PURE__ */ g("span", {
|
|
84
|
-
className:
|
|
85
|
+
className: o,
|
|
85
86
|
children: [/* @__PURE__ */ g("span", {
|
|
86
|
-
className:
|
|
87
|
-
children: [
|
|
87
|
+
className: c(V, !0),
|
|
88
|
+
children: [p, X]
|
|
88
89
|
}), Z]
|
|
89
90
|
}) : /* @__PURE__ */ h("span", {
|
|
90
|
-
className:
|
|
91
|
-
children:
|
|
91
|
+
className: c(V, !0),
|
|
92
|
+
children: p
|
|
92
93
|
}), /* @__PURE__ */ h("span", {
|
|
93
94
|
id: G,
|
|
94
|
-
className:
|
|
95
|
+
className: s,
|
|
95
96
|
children: b
|
|
96
97
|
})]
|
|
97
98
|
})]
|
|
98
99
|
}) : /* @__PURE__ */ g(m, { children: [
|
|
99
100
|
Q(),
|
|
100
101
|
/* @__PURE__ */ g("span", {
|
|
101
|
-
className:
|
|
102
|
-
children: [
|
|
102
|
+
className: c(V),
|
|
103
|
+
children: [p, X]
|
|
103
104
|
}),
|
|
104
105
|
Z
|
|
105
106
|
] })
|
|
106
107
|
});
|
|
107
108
|
return !U || C == null || W == null ? $ : /* @__PURE__ */ g("div", {
|
|
108
109
|
className: "flex w-full flex-col gap-1.5",
|
|
109
|
-
children: [$, /* @__PURE__ */ h(
|
|
110
|
+
children: [$, /* @__PURE__ */ h(n, {
|
|
110
111
|
status: C,
|
|
111
112
|
message: w,
|
|
112
113
|
messageId: W,
|
|
113
|
-
size: _[
|
|
114
|
+
size: _[f],
|
|
114
115
|
messagePosition: "bottom",
|
|
115
|
-
bannerClassName:
|
|
116
|
+
bannerClassName: oe(C)
|
|
116
117
|
})]
|
|
117
118
|
});
|
|
118
119
|
});
|
|
119
120
|
//#endregion
|
|
120
|
-
export { y as Checkbox,
|
|
121
|
+
export { y as Checkbox, f as checkboxSizes };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/IconButton/IconButton.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/IconButton/IconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,oBAAoB,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAIjF,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,cAAc,EACpB,MAAM,wBAAwB,CAAC;AAWhC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,sEAAsE;AACtE,MAAM,MAAM,yBAAyB,GAAG,MAAM,CAAC;AAE/C,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,YAAY,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACpE;IACD,wDAAwD;IACxD,IAAI,EAAE,YAAY,CAAC;IACnB,uFAAuF;IACvF,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qFAAqF;IACrF,IAAI,CAAC,EAAE,cAAc,GAAG,mBAAmB,CAAC;IAC5C,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACtD,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAgBD;;;GAGG;AACH,eAAO,MAAM,UAAU,+GAwIrB,CAAC"}
|