@stackone/malachite 0.69.2 → 0.70.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/COMPONENTS.md +2 -2
- package/dist/{CodeBlockHighlighter-ClLQ4XDr.js → CodeBlockHighlighter-DQorhp_7.js} +2 -2
- package/dist/{CodeBlockHighlighter-ClLQ4XDr.js.map → CodeBlockHighlighter-DQorhp_7.js.map} +1 -1
- package/dist/{index-C1NtW6zp.js → index-y7sxrSD4.js} +3664 -3530
- package/dist/index-y7sxrSD4.js.map +1 -0
- package/dist/index.d.ts +29 -4
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/index-C1NtW6zp.js.map +0 -1
package/COMPONENTS.md
CHANGED
|
@@ -9,8 +9,8 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
|
|
|
9
9
|
- **`Surface`** — Rounded, bordered card container with the standard elevation shadow. Use `overflow="clip"` to keep the rounded clipping while letting a `position: sticky` descendant still pin (`hidden` would trap it); `visible` disables clipping. _Key props:_ `children`, `padding`, `overflow`, `className`, `style`.
|
|
10
10
|
- **`SurfaceRow`** — A full-bleed row inside a Surface (used as `Surface.Row`). Owns hover highlight, colour transition and an optional bottom divider. Pass `onClick`/`href` to make the whole row clickable (renders as a real button/anchor, so keyboard nav works). For a selectable row use `role="radio"` + `selected` and put a presentational `<Radio>` inside as the indicator. _Key props:_ `divider`, `disabled`, `onClick`, `href`, `selected`, `role`, `className`, `style`.
|
|
11
11
|
- **`Card`** — Generic content card.
|
|
12
|
-
- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a footer action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. `footerActions` renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `eyebrow`, `status` (`label`, `type`), `description`, `countLabel`, `footerActions`, `selected`, `selectedLabel`, `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
|
|
13
|
-
- **`CardStrip`** — Horizontally scrolling radio group of cards, with edge arrows that appear only when the content overflows, an edge fade, scroll-snap and arrow-key navigation matching `SegmentedControl`. Owns interaction only: it finds its options by looking for `role="radio"` descendants carrying `data-value`, so any such child works (`SelectableCard` emits both). Pass a non-selectable terminal tile as `CardStrip.AddTile` — it sits inside the group but outside the radio set. Use `leading` to pin a card that should not scroll away. _Key props:_ `value`, `onChange`, `children`, `leading`, `arrows`, `fadeEdges`, `snap`, `scrollSelectedIntoView`, `aria-label`, `aria-labelledby`, `className`, `style`. `CardStrip.AddTile`: `label`, `icon`, `onClick`, `disabled`, `className`.
|
|
12
|
+
- **`SelectableCard`** — A card that is one option in a radio group — eyebrow, optional status tag, title, description, a count label and a footer action slot. Use inside a `CardStrip`. Selection is controlled by the consumer: pass `selected`, which drives both the visual treatment and `aria-checked`. `variant` is the palette and nothing else — `profile` (green, the default) or `library` (neutral grey/black); ask for `library` explicitly, it is never inferred from `titleSize`. Position is not a prop: the card takes its dividing left rule from the `CardStrip` slot it is rendered into, so the pinned `leading` card drops it and a scrolling card keeps it, whichever palette either wears. `footerActions` renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `titleSize` (`default` | `display`), `variant` (`profile` | `library`), `eyebrow`, `status` (`label`, `type`), `description`, `countLabel`, `footerActions`, `selected`, `selectedLabel`, `hoverLabel`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
|
|
13
|
+
- **`CardStrip`** — Horizontally scrolling radio group of cards, with edge arrows that appear only when the content overflows, an edge fade, scroll-snap and arrow-key navigation matching `SegmentedControl`. Owns interaction only: it finds its options by looking for `role="radio"` descendants carrying `data-value`, so any such child works (`SelectableCard` emits both). Pass a non-selectable terminal tile as `CardStrip.AddTile` — it sits inside the group but outside the radio set, and must be a direct child or it scrolls with the cards. Use `leading` to pin a card that should not scroll away; the strip tells the cards which slot they are in, so a pinned `SelectableCard` drops the left rule the scrolling ones draw. Set `bleed` when the strip sits in a `PageLayout`: the strip stretches past the horizontal padding of the layout so its bottom rule runs the full width of the page card, while the cards stay aligned to the gutter. With no cards at all the strip degenerates to its pinned slots alone — no trough, no scroller and no arrows — with the add tile standing beside `leading` and taking `primary` emphasis automatically, since adding the first card is the only thing on offer. _Key props:_ `value`, `onChange`, `children`, `leading`, `arrows`, `fadeEdges`, `snap`, `bleed`, `scrollSelectedIntoView`, `aria-label`, `aria-labelledby`, `className`, `style`. `CardStrip.AddTile`: `label`, `icon`, `onClick`, `disabled`, `emphasis` (`primary` | `secondary` — left to the strip unless set: `primary` while there are no cards, `secondary` once there are), `className`.
|
|
14
14
|
- **`SplitScreenLayout`** — Two-pane full-screen layout (content + preview/aside) with an optional dismiss button.
|
|
15
15
|
- **`PageLayout`** — Standard page chrome: a bordered card holding a breadcrumb bar, an optional alert strip, and a header block (subtitle, title + suffix, description) above the page body. Used as `PageLayout.Regular`; `PageLayout.Empty` is the chrome-only variant for pre-auth and error screens, with `headerActions` and `background` slots. Actions are declared as data (`buttons`) rather than children, and any that do not fit collapse into an overflow `ActionMenu` via `OverflowRow`. A client-side-routed app must pass `renderLink` so crumbs and the back button go through its router instead of reloading the document. Both layouts render a `main` landmark, demoted via `role` when the app owns its own. Deliberately not a `Surface` — the page card is 16px and carries no shadow. _Key props:_ `PageLayout.Regular`: `breadcrumbLinks`, `breadcrumbActions`, `renderLink`, `title`, `titleSuffix`, `subtitle`, `description`, `buttons`, `loading`, `centered`, `noPadding`, `contentGap` (`small` | `medium` | `large` | `xlarge`, default `small`), `alert`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`. `PageLayout.Empty`: `title`, `centered`, `uniformPadding`, `headerActions`, `background`, `role`, `aria-label`, `aria-labelledby`, `className`, `style`.
|
|
16
16
|
- **`WizardLayout`** — Full-screen wizard scaffold: top bar (back button, right-aligned stepper, trailing slot), pinned `header` slot, centered scrolling content column, and a pinned footer (above sticky body content). `footerGlass` gives the footer a frosted translucent + backdrop-blur treatment. _Key props:_ `showBack`, `onBack`, `stepper`, `trailing`, `header`, `footer`, `footerGlass`, `center`, `contentWidth`, `minWidth`.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as On } from "react/jsx-runtime";
|
|
2
|
-
import { _ as ce, a as ue, C as rn, b as se } from "./index-
|
|
2
|
+
import { _ as ce, a as ue, C as rn, b as se } from "./index-y7sxrSD4.js";
|
|
3
3
|
import H from "react";
|
|
4
4
|
function fe(n, e) {
|
|
5
5
|
if (n == null) return {};
|
|
@@ -2751,4 +2751,4 @@ const pt = {
|
|
|
2751
2751
|
export {
|
|
2752
2752
|
vt as default
|
|
2753
2753
|
};
|
|
2754
|
-
//# sourceMappingURL=CodeBlockHighlighter-
|
|
2754
|
+
//# sourceMappingURL=CodeBlockHighlighter-DQorhp_7.js.map
|