@thewhatmatters/wmds 0.4.5 → 0.4.7
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 +30 -0
- package/CONSUMING.md +1 -0
- package/README.md +2 -2
- package/dist/components/atoms/TextArea/TextArea.d.ts.map +1 -1
- package/dist/components/atoms/TextArea/TextArea.js +72 -72
- package/dist/components/atoms/TextArea/textareaShellStyles.d.ts +5 -0
- package/dist/components/atoms/TextArea/textareaShellStyles.d.ts.map +1 -1
- package/dist/components/atoms/TextArea/textareaShellStyles.js +2 -2
- package/dist/components/organisms/Carousel/Carousel.d.ts +58 -0
- package/dist/components/organisms/Carousel/Carousel.d.ts.map +1 -0
- package/dist/components/organisms/Carousel/Carousel.js +310 -0
- package/dist/components/organisms/Carousel/carouselMath.d.ts +39 -0
- package/dist/components/organisms/Carousel/carouselMath.d.ts.map +1 -0
- package/dist/components/organisms/Carousel/carouselMath.js +47 -0
- package/dist/components/organisms/Carousel/carouselStyles.d.ts +49 -0
- package/dist/components/organisms/Carousel/carouselStyles.d.ts.map +1 -0
- package/dist/components/organisms/Carousel/carouselStyles.js +25 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +45 -43
- package/dist/styles.css +1 -1
- package/docs/components.md +2 -1
- package/docs/exports.json +14 -2
- package/docs/patterns/components-accordion--flush.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--with-avatar.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 +1 -1
- 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-in-footer.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-selectablecard--selectable-cards-pattern.tsx +1 -1
- package/docs/patterns/components-carousel--image-carousel.tsx +30 -0
- 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--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-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--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-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-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-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-moremenu--action-menu.tsx +1 -1
- package/docs/patterns/components-moremenu--in-card-header.tsx +1 -1
- package/docs/patterns/components-navlist--side-nav-settings.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-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-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--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-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--status-list.tsx +1 -1
- package/docs/patterns/components-taskrows--tag-chips.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-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-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/index.json +9 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,36 @@ 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): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
|
|
9
9
|
|
|
10
|
+
## 0.4.7
|
|
11
|
+
|
|
12
|
+
**Carousel: a row of items with a progress scrubber.** New component, built on the open `motion` package. The WhatMatters About page is the first use. See **ADR-0043**.
|
|
13
|
+
|
|
14
|
+
- **Carousel** (new) with **Carousel.Item** — a horizontal row the visitor drags, scrolls (touch, trackpad, shift-wheel), or steps through with the keyboard. A mouse drag glides on and stops softly at each end; the row does not loop. Name it with `aria-label` or `aria-labelledby` (one is required).
|
|
15
|
+
- `itemWidth` — a percentage of the row, one number or `{ base, sm, md, lg }`. Default `{ base: 80, sm: 55, lg: 40 }`, so the next item always shows. The gap is the grid gutter.
|
|
16
|
+
- `snap` (default on) rests the row on an item's leading edge. `bleed` runs it to the page edges while items start on the grid. `fade` (default on) fades clipped items the way `scroll-fade-x` does.
|
|
17
|
+
- `progress` — the scrubber under the row: `center` (default) or `start` for a shorter track (full width on phones), `full`, or `none`. The filled part's place is the row's progress and its width the share of the row in view. Drag it, or press the track. It hides itself, keeping its space, while every item fits.
|
|
18
|
+
- **Decisions taken** (the request left them open): one component with the scrubber as a prop, not a separate part; the scrubber is hidden from assistive tech and is not a tab stop — the row takes Left, Right, Home, and End, and each item says its place ("2 of 4"); no previous and next buttons in this version.
|
|
19
|
+
- **Also:** a drag never clicks a link inside an item, and images are not picked up by the browser's own drag. Reduced motion moves the row at once, with no glide. Right-to-left flips the direction and the arrow keys. On the server and the first paint the row is at its start with the scrubber at zero; it measures again on resize and when an image loads.
|
|
20
|
+
- New **Components/Carousel → Pattern — image carousel**: rounded outlined **Card** tiles with an image in the body.
|
|
21
|
+
|
|
22
|
+
### Consumer actions
|
|
23
|
+
|
|
24
|
+
1. **WhatMatters site, About page: replace the hand-built image strip.** Copy **Components/Carousel → Pattern — image carousel** (`node_modules/@thewhatmatters/wmds/docs/patterns/components-carousel--image-carousel.tsx`) into `components/image-carousel.tsx`, keep its header comment, and render `<ImageCarousel label="Selected work" images={…} />` where the strip is. Delete the scroll-snap list and its classes (`scroll-fade-x`, `snap-x`, `overflow-x-auto`, the per-image **Card** markup) — the pattern has the cards.
|
|
25
|
+
2. **Name the row once.** If a heading already sits over the strip, give the heading an `id` and pass `aria-labelledby` in place of `aria-label` (change the pattern's one prop). Do not also put that `aria-labelledby` on a `section` around it: two landmarks with one name fail the accessibility check.
|
|
26
|
+
3. **`next/image` is fine.** To use it, swap the pattern's `<img>` for `<Image>` with the same `className`, a `width` and `height` (or `fill` inside a sized box), and `sizes="(min-width: 1024px) 40vw, (min-width: 640px) 55vw, 80vw"` to match the default `itemWidth`. Change `sizes` if you change `itemWidth`.
|
|
27
|
+
4. **Page layout.** Place it on the grid like any other block: `className="col-span-full"` inside a `band`. Add `bleed` if the row should run to the page edges. The scrubber's hit area is 44px tall, so drop any margin the old strip had under it.
|
|
28
|
+
5. Other apps: none. Everything here is new.
|
|
29
|
+
|
|
30
|
+
## 0.4.6
|
|
31
|
+
|
|
32
|
+
**TextArea shows one focus ring.** A focused **TextArea** drew two: the ring on its shell, and the browser's own outline on the field inside it.
|
|
33
|
+
|
|
34
|
+
- **TextArea** — the field inside the shell drops its outline, so the shell's ring is the only focus indicator. This was visible on every **TextArea** without a status message, including Project details in **IntakeForm** and the Start a project gate. **PromptBar** and a **TextArea** with a `message` were already correct.
|
|
35
|
+
|
|
36
|
+
### Consumer actions
|
|
37
|
+
|
|
38
|
+
None. If an app added its own outline reset for this, remove it.
|
|
39
|
+
|
|
10
40
|
## 0.4.5
|
|
11
41
|
|
|
12
42
|
**The Start a project form is shorter and set into the conversation.** **IntakeForm** can leave out its optional fields, **Pattern — start a project gate** uses the short form, and **ChatDock.Gate** reads as embedded in the chat. See the amendments to **ADR-0038** and **ADR-0039**.
|
package/CONSUMING.md
CHANGED
|
@@ -269,6 +269,7 @@ import {
|
|
|
269
269
|
| `Card` | `variant`, `shape`, `padding` | Components/Card/Card — `Card.Header` (`start` | `end`), **`Card.Body` slot** (no default fill), `Card.Footer` |
|
|
270
270
|
| `Accordion` | `variant`, `flush` (plain), `Accordion.Item` `leading` / `label` / `trailing` / `open` | Components/Accordion — FAQ, settings sections; **Pattern — flush** for filter groups. Closed panels leave the tab order |
|
|
271
271
|
| `Breadcrumb` | `items` (`{ label, href }`, current page last), `maxItems`, `separator` (`chevron` \| `slash`), `variant` (`sans` \| `mono`), `renderLink`, `labels` | Components/Breadcrumb — **Pattern — path**, **long path**, **router links**, **editorial** |
|
|
272
|
+
| `Carousel` | `aria-label` or `aria-labelledby` (required), `itemWidth` (percentage of the row: a number or `{ base, sm, md, lg }`), `snap`, `bleed`, `fade`, `progress` (`center` \| `start` \| `full` \| `none`), `labels`, `Carousel.Item` | Components/Carousel — **Pattern — image carousel**. Drag, scroll, keys, or the scrubber; no loop. Not a scroll-driven gallery (**ScrollHorizontal**) |
|
|
272
273
|
| `DescriptionList` | `layout` (`inline` \| `stacked`), `rule` (`solid` \| `dotted` \| `none`), `variant` (`sans` \| `mono`), `DescriptionList.Item` `name` / `layout` | Components/DescriptionList — **Pattern — post metadata**, **Pattern — details** |
|
|
273
274
|
| `SectionCaption` | `children`, `as`, `id`, `end`, `marker`, `rule` | Components/SectionCaption — **Pattern — column caption**, **Pattern — caption with an action** |
|
|
274
275
|
| `Prose` | `size` (`lg` \| `md`), `measure` (`reading` \| `none`), `as` | Components/Prose — **Pattern — article body**. Full page: **Guides/Post page → Pattern — post page** |
|
package/README.md
CHANGED
|
@@ -47,8 +47,8 @@ npm run validate:composition # molecules/organisms must compose atoms (CI)
|
|
|
47
47
|
|------|------------|
|
|
48
48
|
| Atoms | `Avatar`, `Badge`, `Button`, `Checkbox`, `IconButton`, `Input`, `Kbd`, `Radio`, `RiveHand`, `Skeleton`, `Status`, `Switch`, `TextArea`, `TextLink`, `Tooltip` |
|
|
49
49
|
| Molecules | `Accordion`, `CalEmbed`, `Card`, `ChatQa`, `CheckboxGroup`, `Chip`, `DisplayControls`, `Dropdown`, `Field`, `FloatingActionButton`, `HeroIntro`, `IntakeForm`, `NavList`, `PageHeader`, `PillGroup`, `PromptBar`, `RadioGroup`, `Search`, `Select`, `SelectableCard`, `SegmentedControl`, `Stat`, `StepProgress`, `TaskRows`, `TextSequence` |
|
|
50
|
-
| Organisms | `Chart`, `Confetti`, `Dialog`, `FooterReveal`, `HeroTileStack`, `IntakeConfirmation`, `IntakeModal`, `MoreMenu`, `Panel`, `ScrollHorizontal`, `Sheet`, `SiteNav`, `Tab`, `Toast` |
|
|
51
|
-
| Planned, not built | `
|
|
50
|
+
| Organisms | `Carousel`, `Chart`, `Confetti`, `Dialog`, `FooterReveal`, `HeroTileStack`, `IntakeConfirmation`, `IntakeModal`, `MoreMenu`, `Panel`, `ScrollHorizontal`, `Sheet`, `SiteNav`, `Tab`, `Toast` |
|
|
51
|
+
| Planned, not built | `Pagination`, `Table` |
|
|
52
52
|
|
|
53
53
|
The list is `src/package.manifest.ts`. `npm run build` fails when it and `src/index.ts` disagree.
|
|
54
54
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,
|
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAKvE,OAAO,EAqBL,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC1G,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE1G,sEAAsE;AACtE,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACjE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oFAAoF;IACpF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAqBD;;;GAGG;AACH,eAAO,MAAM,QAAQ,+GAuJnB,CAAC"}
|
|
@@ -4,112 +4,112 @@ import { typographyClass as t } from "../../../lib/typography.js";
|
|
|
4
4
|
import { inputAttachedFieldClasses as n, inputCompoundShellClassesFor as r, inputControlStackClasses as i, inputDisabledClasses as a, inputFieldStackClasses as o, inputStatusGapClasses as s } from "../Input/inputShellStyles.js";
|
|
5
5
|
import { InputStatusBanner as c } from "../inputShared/InputStatusBanner.js";
|
|
6
6
|
import { InputTrailingAffordance as l } from "../inputShared/InputTrailingAffordance.js";
|
|
7
|
-
import { textareaBaseClasses as u, textareaCompoundFieldPaddingClasses as
|
|
8
|
-
import { forwardRef as
|
|
9
|
-
import { Fragment as
|
|
7
|
+
import { textareaBaseClasses as u, textareaCompoundFieldPaddingClasses as ee, textareaCompoundInnerFieldClassesFor as d, textareaFixedPaddingClasses as f, textareaInlineClasses as p, textareaMinHeightClasses as m, textareaResizeClasses as h, textareaResizes as g, textareaShellFieldClasses as _, textareaSoloShellClassesFor as v, textareaStatusBannerClassesFor as y, textareaTrailingInsetClasses as b, textareaTrailingInsetPositionClasses as x } from "./textareaShellStyles.js";
|
|
8
|
+
import { forwardRef as S, useId as C } from "react";
|
|
9
|
+
import { Fragment as w, jsx as T, jsxs as E } from "react/jsx-runtime";
|
|
10
10
|
//#region src/components/atoms/TextArea/TextArea.tsx
|
|
11
|
-
function
|
|
11
|
+
function D(e) {
|
|
12
12
|
e.label == null && e["aria-label"] == null && e["aria-labelledby"] == null && console.warn("[WMDS TextArea] Provide `label`, `aria-label`, or `aria-labelledby`.");
|
|
13
13
|
}
|
|
14
|
-
function
|
|
14
|
+
function O(e) {
|
|
15
15
|
e.message != null && e.status == null && console.warn("[WMDS TextArea] `message` requires `status`."), e.inline && (e.label != null || e.description != null || e.status != null || e.message != null) && console.warn("[WMDS TextArea] `inline` is for PromptBar only — omit label, description, and validation.");
|
|
16
16
|
}
|
|
17
|
-
var
|
|
18
|
-
let
|
|
19
|
-
|
|
17
|
+
var k = S(function({ size: c = "md", label: g, description: y, status: S, message: k, messagePosition: A = "bottom", loading: j = !1, rows: M = 4, resize: N = "vertical", inline: P = !1, className: F, disabled: I, id: L, "aria-describedby": R, ...z }, B) {
|
|
18
|
+
let V = C(), H = L ?? V;
|
|
19
|
+
D({
|
|
20
20
|
label: g,
|
|
21
|
-
"aria-label":
|
|
22
|
-
"aria-labelledby":
|
|
23
|
-
}),
|
|
24
|
-
status:
|
|
25
|
-
message:
|
|
26
|
-
inline:
|
|
21
|
+
"aria-label": z["aria-label"],
|
|
22
|
+
"aria-labelledby": z["aria-labelledby"]
|
|
23
|
+
}), O({
|
|
24
|
+
status: S,
|
|
25
|
+
message: k,
|
|
26
|
+
inline: P,
|
|
27
27
|
label: g,
|
|
28
|
-
description:
|
|
28
|
+
description: y
|
|
29
29
|
});
|
|
30
|
-
let
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
let U = k != null && k.length > 0 && S != null, W = !U && (j || S != null), G = y != null && !U ? `${H}-description` : void 0, K = U ? `${H}-message` : void 0, q = [
|
|
31
|
+
R,
|
|
32
|
+
G,
|
|
33
|
+
K
|
|
34
34
|
].filter(Boolean).join(" ") || void 0;
|
|
35
|
-
if (
|
|
36
|
-
...
|
|
37
|
-
ref:
|
|
38
|
-
id:
|
|
39
|
-
rows:
|
|
40
|
-
disabled:
|
|
41
|
-
"aria-invalid":
|
|
42
|
-
"aria-describedby":
|
|
43
|
-
className: e(a, p,
|
|
35
|
+
if (P) return /* @__PURE__ */ T("textarea", {
|
|
36
|
+
...z,
|
|
37
|
+
ref: B,
|
|
38
|
+
id: H,
|
|
39
|
+
rows: M,
|
|
40
|
+
disabled: I,
|
|
41
|
+
"aria-invalid": S === "error" || void 0,
|
|
42
|
+
"aria-describedby": q,
|
|
43
|
+
className: e(a, p, F)
|
|
44
44
|
});
|
|
45
|
-
let
|
|
46
|
-
...
|
|
47
|
-
ref:
|
|
48
|
-
id:
|
|
49
|
-
rows:
|
|
50
|
-
disabled:
|
|
51
|
-
"aria-invalid":
|
|
52
|
-
"aria-describedby":
|
|
53
|
-
className: e(a, h[
|
|
54
|
-
}),
|
|
55
|
-
className: e(
|
|
56
|
-
children: /* @__PURE__ */
|
|
45
|
+
let J = /* @__PURE__ */ T("textarea", {
|
|
46
|
+
...z,
|
|
47
|
+
ref: B,
|
|
48
|
+
id: H,
|
|
49
|
+
rows: M,
|
|
50
|
+
disabled: I,
|
|
51
|
+
"aria-invalid": S === "error" || void 0,
|
|
52
|
+
"aria-describedby": q,
|
|
53
|
+
className: e(a, h[N], u, f[c], m[c], _, W && s[c], U && e(n, "rounded-none border-0 shadow-none focus-visible:outline-none focus-visible:ring-0", "rounded-none"))
|
|
54
|
+
}), Y = W ? /* @__PURE__ */ T("span", {
|
|
55
|
+
className: e(b, x[c]),
|
|
56
|
+
children: /* @__PURE__ */ T(l, {
|
|
57
57
|
size: c,
|
|
58
|
-
status:
|
|
59
|
-
loading:
|
|
58
|
+
status: j ? void 0 : S,
|
|
59
|
+
loading: j
|
|
60
60
|
})
|
|
61
|
-
}) : null,
|
|
62
|
-
className: e(
|
|
63
|
-
children:
|
|
64
|
-
}),
|
|
65
|
-
className: e("relative w-full",
|
|
66
|
-
children:
|
|
67
|
-
}), Q =
|
|
68
|
-
status:
|
|
69
|
-
message:
|
|
70
|
-
messageId:
|
|
61
|
+
}) : null, X = /* @__PURE__ */ E(w, { children: [J, Y] }), Z = /* @__PURE__ */ T("div", {
|
|
62
|
+
className: e(v(c, S, N), F),
|
|
63
|
+
children: X
|
|
64
|
+
}), ne = /* @__PURE__ */ T("div", {
|
|
65
|
+
className: e("relative w-full", ee(N, c)),
|
|
66
|
+
children: X
|
|
67
|
+
}), Q = U && S != null && K != null ? /* @__PURE__ */ T(te, {
|
|
68
|
+
status: S,
|
|
69
|
+
message: k,
|
|
70
|
+
messageId: K,
|
|
71
71
|
size: c,
|
|
72
|
-
messagePosition:
|
|
73
|
-
}) : null, $ =
|
|
74
|
-
className: r(c,
|
|
72
|
+
messagePosition: A
|
|
73
|
+
}) : null, $ = U && S != null ? /* @__PURE__ */ E("div", {
|
|
74
|
+
className: r(c, S),
|
|
75
75
|
children: [
|
|
76
|
-
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
className:
|
|
79
|
-
children:
|
|
76
|
+
A === "top" ? Q : null,
|
|
77
|
+
/* @__PURE__ */ T("div", {
|
|
78
|
+
className: d(c, S, A),
|
|
79
|
+
children: ne
|
|
80
80
|
}),
|
|
81
|
-
|
|
81
|
+
A === "bottom" ? Q : null
|
|
82
82
|
]
|
|
83
|
-
}) : /* @__PURE__ */
|
|
83
|
+
}) : /* @__PURE__ */ T("div", {
|
|
84
84
|
className: i,
|
|
85
|
-
children:
|
|
85
|
+
children: Z
|
|
86
86
|
});
|
|
87
|
-
return g == null &&
|
|
87
|
+
return g == null && y == null ? $ : /* @__PURE__ */ E("div", {
|
|
88
88
|
className: o,
|
|
89
89
|
children: [
|
|
90
|
-
g == null ? null : /* @__PURE__ */
|
|
91
|
-
htmlFor:
|
|
92
|
-
className: e(t("ui-label"),
|
|
90
|
+
g == null ? null : /* @__PURE__ */ T("label", {
|
|
91
|
+
htmlFor: H,
|
|
92
|
+
className: e(t("ui-label"), I && "opacity-50"),
|
|
93
93
|
children: g
|
|
94
94
|
}),
|
|
95
95
|
$,
|
|
96
|
-
|
|
97
|
-
id:
|
|
96
|
+
G == null ? null : /* @__PURE__ */ T("p", {
|
|
97
|
+
id: G,
|
|
98
98
|
className: t("caption"),
|
|
99
|
-
children:
|
|
99
|
+
children: y
|
|
100
100
|
})
|
|
101
101
|
]
|
|
102
102
|
});
|
|
103
103
|
});
|
|
104
104
|
function te({ status: e, message: t, messageId: n, size: r, messagePosition: i }) {
|
|
105
|
-
return /* @__PURE__ */
|
|
105
|
+
return /* @__PURE__ */ T(c, {
|
|
106
106
|
status: e,
|
|
107
107
|
message: t,
|
|
108
108
|
messageId: n,
|
|
109
109
|
size: r,
|
|
110
110
|
messagePosition: i,
|
|
111
|
-
bannerClassName:
|
|
111
|
+
bannerClassName: y(e, r, i)
|
|
112
112
|
});
|
|
113
113
|
}
|
|
114
114
|
//#endregion
|
|
115
|
-
export {
|
|
115
|
+
export { k as TextArea, g as textareaResizes };
|
|
@@ -32,6 +32,11 @@ export declare const textareaTrailingInsetClasses = "pointer-events-none absolut
|
|
|
32
32
|
export declare function textareaCompoundInnerFieldClassesFor(size: InputSize, status: InputStatus, messagePosition: InputMessagePosition): string;
|
|
33
33
|
export declare function textareaStatusBannerClassesFor(status: InputStatus, size: InputSize, messagePosition: InputMessagePosition): string;
|
|
34
34
|
export declare const textareaBaseClasses: string;
|
|
35
|
+
/**
|
|
36
|
+
* Field inside the bordered shell — the shell owns border, fill, and the
|
|
37
|
+
* `focus-within` ring, so the field drops its own outline and ring.
|
|
38
|
+
*/
|
|
39
|
+
export declare const textareaShellFieldClasses = "w-full border-0 bg-transparent shadow-none focus-visible:outline-none focus-visible:ring-0";
|
|
35
40
|
/**
|
|
36
41
|
* Inside **PromptBar** — the parent pill owns border, radius, and focus ring.
|
|
37
42
|
* No element shell, no min-height, no resize grip.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textareaShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/textareaShellStyles.ts"],"names":[],"mappings":"AACA,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EAEzB,4BAA4B,EAE5B,wBAAwB,EACxB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EAItB,6BAA6B,EAC7B,8BAA8B,EAE9B,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE7F,eAAO,MAAM,eAAe,uCAAwC,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,qFAAqF;AACrF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI/D,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIhE,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI9D,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIjE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIvE,CAAC;AAEF,eAAO,MAAM,iCAAiC,2GAC4D,CAAC;AAE3G,eAAO,MAAM,kCAAkC;;;;;CAKrC,CAAC;AAEX,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,WAAW,GAAG,SAAS,EAC/B,MAAM,EAAE,cAAc,GACrB,MAAM,CAgBR;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,cAAc,EACtB,IAAI,EAAE,SAAS,GACd,MAAM,GAAG,SAAS,CAEpB;AAED,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI1D,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI5E,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI1E,CAAC;AAEF,eAAO,MAAM,4BAA4B,2DACiB,CAAC;AAE3D,wBAAgB,oCAAoC,CAClD,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,oBAAoB,GACpC,MAAM,CASR;AAED,wBAAgB,8BAA8B,CAC5C,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,SAAS,EACf,eAAe,EAAE,oBAAoB,GACpC,MAAM,CAgBR;AAED,eAAO,MAAM,mBAAmB,QAA+C,CAAC;AAEhF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAE2C,CAAC;AAE9E,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EACzB,4BAA4B,EAC5B,wBAAwB,EACxB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EACtB,6BAA6B,EAC7B,8BAA8B,EAC9B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC"}
|
|
1
|
+
{"version":3,"file":"textareaShellStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/TextArea/textareaShellStyles.ts"],"names":[],"mappings":"AACA,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EAEzB,4BAA4B,EAE5B,wBAAwB,EACxB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EAItB,6BAA6B,EAC7B,8BAA8B,EAE9B,qBAAqB,EACrB,uBAAuB,EACvB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,2BAA2B,CAAC;AAEnC,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE7F,eAAO,MAAM,eAAe,uCAAwC,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE9D,qFAAqF;AACrF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI/D,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIhE,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI9D,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIjE,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iCAAiC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIvE,CAAC;AAEF,eAAO,MAAM,iCAAiC,2GAC4D,CAAC;AAE3G,eAAO,MAAM,kCAAkC;;;;;CAKrC,CAAC;AAEX,wBAAgB,2BAA2B,CACzC,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,WAAW,GAAG,SAAS,EAC/B,MAAM,EAAE,cAAc,GACrB,MAAM,CAgBR;AAED,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,cAAc,EACtB,IAAI,EAAE,SAAS,GACd,MAAM,GAAG,SAAS,CAEpB;AAED,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI1D,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,0CAA0C,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIhF,CAAC;AAEF,eAAO,MAAM,sCAAsC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI5E,CAAC;AAEF,eAAO,MAAM,oCAAoC,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAI1E,CAAC;AAEF,eAAO,MAAM,4BAA4B,2DACiB,CAAC;AAE3D,wBAAgB,oCAAoC,CAClD,IAAI,EAAE,SAAS,EACf,MAAM,EAAE,WAAW,EACnB,eAAe,EAAE,oBAAoB,GACpC,MAAM,CASR;AAED,wBAAgB,8BAA8B,CAC5C,MAAM,EAAE,WAAW,EACnB,IAAI,EAAE,SAAS,EACf,eAAe,EAAE,oBAAoB,GACpC,MAAM,CAgBR;AAED,eAAO,MAAM,mBAAmB,QAA+C,CAAC;AAEhF;;;GAGG;AACH,eAAO,MAAM,yBAAyB,+FACwD,CAAC;AAE/F;;;GAGG;AACH,eAAO,MAAM,qBAAqB,QAE2C,CAAC;AAE9E,OAAO,EACL,yBAAyB,EACzB,yBAAyB,EACzB,4BAA4B,EAC5B,wBAAwB,EACxB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,EACtB,6BAA6B,EAC7B,8BAA8B,EAC9B,qBAAqB,EACrB,uBAAuB,GACxB,CAAC"}
|
|
@@ -66,6 +66,6 @@ function M(t, n, r) {
|
|
|
66
66
|
function N(t, n, r) {
|
|
67
67
|
return r === "bottom" ? e("relative z-0 flex w-full items-center gap-2 px-3 pb-3 leading-snug", D[n], "rounded-b-[1.375rem]", p[t]) : e("relative z-0 flex w-full items-center gap-2 px-3 pt-2.5 leading-snug", O[n], "rounded-t-[1.375rem]", p[t]);
|
|
68
68
|
}
|
|
69
|
-
var P = e(r, "block leading-normal"), F = "block w-full min-w-0 resize-none rounded-none border-0 bg-transparent font-sans font-normal tracking-normal text-fg shadow-none placeholder:text-disabled focus-visible:outline-none focus-visible:ring-0";
|
|
69
|
+
var P = e(r, "block leading-normal"), F = "w-full border-0 bg-transparent shadow-none focus-visible:outline-none focus-visible:ring-0", I = "block w-full min-w-0 resize-none rounded-none border-0 bg-transparent font-sans font-normal tracking-normal text-fg shadow-none placeholder:text-disabled focus-visible:outline-none focus-visible:ring-0";
|
|
70
70
|
//#endregion
|
|
71
|
-
export { t as inputAttachedFieldClasses, n as inputAttachedInputClasses, i as inputCompoundShellClassesFor, o as inputControlStackClasses, s as inputDisabledClasses, c as inputDisabledLabelClasses, l as inputFieldStackClasses, m as inputStatusGapClasses, h as inputStatusShellClasses, P as textareaBaseClasses, D as textareaCompoundBannerOverlapBottomClasses, O as textareaCompoundBannerOverlapTopPadClasses, k as textareaCompoundFieldOverlapTopClasses, T as textareaCompoundFieldPaddingClasses, M as textareaCompoundInnerFieldClassesFor, b as textareaFixedPaddingClasses,
|
|
71
|
+
export { t as inputAttachedFieldClasses, n as inputAttachedInputClasses, i as inputCompoundShellClassesFor, o as inputControlStackClasses, s as inputDisabledClasses, c as inputDisabledLabelClasses, l as inputFieldStackClasses, m as inputStatusGapClasses, h as inputStatusShellClasses, P as textareaBaseClasses, D as textareaCompoundBannerOverlapBottomClasses, O as textareaCompoundBannerOverlapTopPadClasses, k as textareaCompoundFieldOverlapTopClasses, T as textareaCompoundFieldPaddingClasses, M as textareaCompoundInnerFieldClassesFor, b as textareaFixedPaddingClasses, I as textareaInlineClasses, y as textareaMinHeightClasses, v as textareaResizeClasses, g as textareaResizes, E as textareaShellClasses, F as textareaShellFieldClasses, S as textareaShellFocusRingBaseClasses, C as textareaShellFocusRingColorClasses, x as textareaShellResizePaddingClasses, _ as textareaSoloRadiusClasses, w as textareaSoloShellClassesFor, N as textareaStatusBannerClassesFor, j as textareaTrailingInsetClasses, A as textareaTrailingInsetPositionClasses };
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
import { type CarouselItemWidth, type CarouselProgressPlacement } from "./carouselStyles";
|
|
3
|
+
export { carouselBreakpoints, carouselDefaultItemWidth, carouselProgressPlacements, type CarouselBreakpoint, type CarouselItemWidth, type CarouselProgressPlacement, } from "./carouselStyles";
|
|
4
|
+
/** Layout-only — width, margin, or grid placement. */
|
|
5
|
+
export type CarouselLayoutClassName = string;
|
|
6
|
+
export interface CarouselLabels {
|
|
7
|
+
/** Names each item by its place. Default: "2 of 4". */
|
|
8
|
+
item: (position: number, count: number) => string;
|
|
9
|
+
}
|
|
10
|
+
/** The row is a labelled region: name it, or point at the heading that does. */
|
|
11
|
+
type CarouselName = {
|
|
12
|
+
"aria-label": string;
|
|
13
|
+
"aria-labelledby"?: never;
|
|
14
|
+
} | {
|
|
15
|
+
"aria-labelledby": string;
|
|
16
|
+
"aria-label"?: never;
|
|
17
|
+
};
|
|
18
|
+
interface CarouselBaseProps {
|
|
19
|
+
/**
|
|
20
|
+
* Item width as a percentage of the row — one number, or one per breakpoint
|
|
21
|
+
* (`{ base, sm, md, lg }`; a breakpoint left out keeps the one below it). Keep it under 100 so
|
|
22
|
+
* the next item shows. Default: `{ base: 80, sm: 55, lg: 40 }`.
|
|
23
|
+
*/
|
|
24
|
+
itemWidth?: CarouselItemWidth;
|
|
25
|
+
/** Rest on an item's leading edge when a drag, a scrub, or a scroll settles. Default: `true`. */
|
|
26
|
+
snap?: boolean;
|
|
27
|
+
/** Let the row run to the page edges; items still start on the grid. Default: `false`. */
|
|
28
|
+
bleed?: boolean;
|
|
29
|
+
/** Fade items where the row clips them. Default: `true`. */
|
|
30
|
+
fade?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* The scrubber under the row: a shorter track at the `center` (default) or the `start`, the
|
|
33
|
+
* `full` row width, or `none`. It hides itself while every item fits.
|
|
34
|
+
*/
|
|
35
|
+
progress?: CarouselProgressPlacement;
|
|
36
|
+
labels?: Partial<CarouselLabels>;
|
|
37
|
+
/** **Carousel.Item** children, one per item. */
|
|
38
|
+
children?: ReactNode;
|
|
39
|
+
className?: CarouselLayoutClassName;
|
|
40
|
+
}
|
|
41
|
+
export type CarouselProps = CarouselBaseProps & CarouselName;
|
|
42
|
+
export interface CarouselItemProps {
|
|
43
|
+
/** Anything — an image tile, a card, a quote. */
|
|
44
|
+
children?: ReactNode;
|
|
45
|
+
className?: CarouselLayoutClassName;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* A horizontal row of items the visitor drags, scrolls, or steps through with the keyboard, with
|
|
49
|
+
* a progress scrubber under it. The row is a native scroller, so touch, trackpad, and
|
|
50
|
+
* shift-wheel scrolling come from the browser; the pointer drag, the glide, and the scrubber are
|
|
51
|
+
* built on it.
|
|
52
|
+
*/
|
|
53
|
+
declare function CarouselRoot({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, itemWidth, snap, bleed, fade, progress, labels, children, className, }: CarouselProps): import("react").JSX.Element;
|
|
54
|
+
declare function CarouselItem({ children, className }: CarouselItemProps): import("react").JSX.Element;
|
|
55
|
+
export declare const Carousel: typeof CarouselRoot & {
|
|
56
|
+
Item: typeof CarouselItem;
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=Carousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAeL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAwBf,OAAO,EAeL,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,EAC/B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,yBAAyB,GAC/B,MAAM,kBAAkB,CAAC;AAE1B,sDAAsD;AACtD,MAAM,MAAM,uBAAuB,GAAG,MAAM,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,uDAAuD;IACvD,IAAI,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnD;AAED,gFAAgF;AAChF,KAAK,YAAY,GACb;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,KAAK,CAAA;CAAE,GACnD;IAAE,iBAAiB,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAExD,UAAU,iBAAiB;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,iGAAiG;IACjG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0FAA0F;IAC1F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IACjC,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAED,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAAG,YAAY,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,uBAAuB,CAAC;CACrC;AAkED;;;;;GAKG;AACH,iBAAS,YAAY,CAAC,EACpB,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAoC,EACpC,IAAW,EACX,KAAa,EACb,IAAW,EACX,QAAmB,EACnB,MAAM,EACN,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,+BA0Yf;AAOD,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAO/D;AAED,eAAO,MAAM,QAAQ;;CAEnB,CAAC"}
|