@stackone/malachite 2.8.0 → 2.10.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-DUF_j12X.js → CodeBlockHighlighter-D2UohsxL.js} +2 -2
- package/dist/{CodeBlockHighlighter-DUF_j12X.js.map → CodeBlockHighlighter-D2UohsxL.js.map} +1 -1
- package/dist/{index-Cs1OOumK.js → index-B6NoJxaz.js} +4263 -4137
- package/dist/index-B6NoJxaz.js.map +1 -0
- package/dist/index.d.ts +17 -3
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/index-Cs1OOumK.js.map +0 -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. _Key props:_ `divider`, `disabled`, `onClick`, `href`, `selected`, `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. _Key props:_ `divider`, `disabled`, `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`.
|
|
@@ -92,7 +92,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
|
|
|
92
92
|
|
|
93
93
|
## Data display
|
|
94
94
|
|
|
95
|
-
- **`Table`** — Data table with columns, sizing, pagination and row selection. `column.align` places a column's header as well as its cells. What lands on the aligned edge is the last thing in the header row rather than the title: the sort caret on a sortable column, the info icon on one carrying `info` without a sorter. `headerVariant` picks the header layout, and only `inline` lines header and body up exactly, because both are cells of one `<table>`. `detached` builds them from flex rows, where a sortable header cell is 32px narrower than a non-sortable one — its padding sits on the inner button rather than on the flex item — so its header cells sit 15–17px off their column at any alignment; reach for `inline` where exact alignment matters. _Key props:_ `TableColumns` (incl. `align`), `TableSize`, `TableType`, `TableRowSelection`, `TablePaginationPosition`, `headerVariant`.
|
|
95
|
+
- **`Table`** — Data table with columns, sizing, pagination and row selection. `column.align` places a column's header as well as its cells. What lands on the aligned edge is the last thing in the header row rather than the title: the sort caret on a sortable column, the info icon on one carrying `info` without a sorter. `headerVariant` picks the header layout, and only `inline` lines header and body up exactly, because both are cells of one `<table>`. `detached` builds them from flex rows, where a sortable header cell is 32px narrower than a non-sortable one — its padding sits on the inner button rather than on the flex item — so its header cells sit 15–17px off their column at any alignment; reach for `inline` where exact alignment matters. Sorting is internal, so the array passed as `data` is not the order rendered once a column is sorted: `onVisibleOrderChange` reports the rows in render order — the whole of `data`, compared by `rowKey` so an equal order never re-fires — for a consumer stepping a master-detail view the way the user sees it. _Key props:_ `TableColumns` (incl. `align`), `TableSize`, `TableType`, `TableRowSelection`, `TablePaginationPosition`, `headerVariant`, `onVisibleOrderChange`.
|
|
96
96
|
- **`Statistic`** — Displays a statistic value with a label; primary/secondary sizes. _Key props:_ `StatisticValueSize`.
|
|
97
97
|
- **`Avatar`** — Logo/initial avatar. Renders the image when available, otherwise a coloured tile with the first letter of `name`. Encapsulates the fallback colour. _Key props:_ `src`, `name`, `size`, `shape="square" | "circle"`.
|
|
98
98
|
- **`AppLogo`** — A connector's mark, optionally with its name and version tag. Builds on `Avatar`, so a missing or broken logo falls back to a coloured initial. The gap tightens below 18px so the mark and label still read as one unit. _Key props:_ `src`, `name`, `showName`, `size`, `nameSize`, `nameWeight`, `version`, `truncate`, `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-B6NoJxaz.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-D2UohsxL.js.map
|