@stackone/malachite 2.10.0 → 2.11.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 +1 -1
- package/dist/{CodeBlockHighlighter-D2UohsxL.js → CodeBlockHighlighter-B04HshyY.js} +2 -2
- package/dist/{CodeBlockHighlighter-D2UohsxL.js.map → CodeBlockHighlighter-B04HshyY.js.map} +1 -1
- package/dist/{index-B6NoJxaz.js → index-CUPTnbPi.js} +301 -284
- package/dist/{index-B6NoJxaz.js.map → index-CUPTnbPi.js.map} +1 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/COMPONENTS.md
CHANGED
|
@@ -7,7 +7,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
|
|
|
7
7
|
## Layout & containers
|
|
8
8
|
|
|
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
|
-
- **`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; `selected` paints the same treatment `Table` gives `selectedRowKey`. Use `trailing` for a control that must stay interactive — it renders outside the row button, which a nested control could not be. _Key props:_ `divider`, `disabled`, `onClick`, `href`, `selected`, `trailing`, `role`, `className`, `style`.
|
|
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; `selected` paints the same treatment `Table` gives `selectedRowKey`. Use `trailing` for a control that must stay interactive — it renders outside the row button, which a nested control could not be. `tone="muted"` tints a row whose subject is inactive, which `disabled` does not: a muted row stays clickable. _Key props:_ `divider`, `disabled`, `tone` (`default` | `muted`), `onClick`, `href`, `selected`, `trailing`, `role`, `className`, `style`.
|
|
11
11
|
- **`Card`** — Generic content card.
|
|
12
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`. A selected card meets the sheet below the way a browser tab meets its toolbar — its bottom corners flare outward onto the strip’s rule — so its outline is one SVG path rather than borders, which would split into two lines at the tangent. `variant` picks the palette: `profile` (green), `library` (neutral) or `editing` (amber, for a profile with unsaved changes). `footerActions` renders outside the control so a menu or icon button inside it stays clickable and keeps its own tab stop. `isDefault` marks the card as the account default with a pin beside the title, named for assistive tech and tooltipped for everyone else — it belongs with the name it qualifies rather than among the footer’s controls, which read as things to press. For a row-shaped selectable use `Surface.Row` instead. _Key props:_ `value`, `title`, `titleIcon`, `isDefault`, `variant` (`profile` | `library` | `editing`), `eyebrow`, `status` (`label`, `type`), `description`, `countLabel`, `footerActions`, `selected`, `selectedLabel`, `hoverLabel`, `loading` (`loadingLabel`, `loadingHint`), `disabled`, `dimmed`, `onSelect`, `tabIndex`, `aria-label`, `className`, `style`.
|
|
13
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`, `tone` (`profile` | `library` | `editing` — read off the selected card unless set), `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`.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as Oe } from "react/jsx-runtime";
|
|
2
|
-
import { _ as un, a as sn, C as re, b as fn } from "./index-
|
|
2
|
+
import { _ as un, a as sn, C as re, b as fn } from "./index-CUPTnbPi.js";
|
|
3
3
|
import H from "react";
|
|
4
4
|
function dn(e, n) {
|
|
5
5
|
if (e == null) return {};
|
|
@@ -2781,4 +2781,4 @@ const ht = {
|
|
|
2781
2781
|
export {
|
|
2782
2782
|
bt as default
|
|
2783
2783
|
};
|
|
2784
|
-
//# sourceMappingURL=CodeBlockHighlighter-
|
|
2784
|
+
//# sourceMappingURL=CodeBlockHighlighter-B04HshyY.js.map
|