@stackone/malachite 1.0.1 → 1.3.0

package/dist/index.d.ts

@@ -335,7 +335,6 @@ export declare const CardStrip: default_2.FC<CardStripProps> & {
     AddTile: default_2.FC<CardStripAddTileProps>;
 };
 
-/** How much weight the add tile's action carries. */
 export declare type CardStripAddTileEmphasis = 'primary' | 'secondary';
 
 export declare interface CardStripAddTileProps {
@@ -353,9 +352,11 @@ export declare interface CardStripAddTileProps {
 export declare interface CardStripProps {
     /** The selected card's value, matched against each radio child's `data-value`. */
     value: string;
+    /** Overrides the palette the strip reads off the selected card. See `CardStripTone`. */
+    tone?: CardStripTone;
     onChange: (value: string) => void;
-    /** Cards. Any element with `role="radio"` and a `data-value` joins the group; a
-     *  `CardStrip.AddTile` must be a direct child or it scrolls with the cards. */
+    /** Cards. Any element with `role="radio"` and a `data-value` joins the group; an
+     *  add tile must be a direct child or it scrolls with the cards. */
     children: default_2.ReactNode;
     /** Pinned, non-scrolling slot before the cards (the Library card in the profile picker). */
     leading?: default_2.ReactNode;
@@ -365,13 +366,11 @@ export declare interface CardStripProps {
     fadeEdges?: boolean;
     /** Snap cards to the leading edge as the strip scrolls. */
     snap?: boolean;
-    /** Stretch the strip past the page layout's horizontal padding so its bottom rule runs
-     *  the full width of the page card, while the cards stay aligned to the gutter. Only has
-     *  an effect inside a layout that publishes its inset (malachite's `PageLayout`). */
+    /** Run the bottom rule the full width of the page card while the cards stay on the gutter.
+     *  Only has an effect inside a layout that publishes its inset (`PageLayout`). */
     bleed?: boolean;
     /** Whether a selection change scrolls the selected card into view. Set `false` when the
-     *  value comes from a URL: `scrollIntoView` walks every scrollable ancestor, so a
-     *  deep-linked strip below the fold jumps the page on load. */
+     *  value comes from a URL, or a deep-linked strip below the fold jumps the page on load. */
     scrollSelectedIntoView?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
@@ -379,6 +378,9 @@ export declare interface CardStripProps {
     style?: default_2.CSSProperties;
 }
 
+/** Palette for the strip's rule. Pass the tone of whatever card is selected. */
+export declare type CardStripTone = 'profile' | 'library' | 'editing';
+
 export declare const Checkbox: default_2.FC<CheckboxProps>;
 
 export declare interface CheckboxProps {
@@ -580,6 +582,8 @@ export declare const CustomIcons: {
     SliderIcon: FC<IconProps>;
     SortIcon: FC<IconProps>;
     SourceIcon: FC<IconProps>;
+    StepCurrentIcon: FC<IconProps>;
+    StepUpcomingIcon: FC<IconProps>;
     SyntheticWebhookIcon: FC<IconProps>;
     TrashIcon: FC<IconProps>;
     TriangleDownIcon: FC<IconProps>;
@@ -607,9 +611,19 @@ declare interface DefinitionRowProps {
 
 export declare const Divider: default_2.FC<DividerProps>;
 
+/** Fixed lengths a rule between inline controls can take. Left unset it spans its container. */
+declare type DividerLength = 'small' | 'medium' | 'large';
+
 export declare type DividerLineStyle = 'solid' | 'dashed';
 
+declare type DividerOrientation = 'horizontal' | 'vertical';
+
 declare interface DividerProps {
+    /** `vertical` draws a 1px rule between inline controls, e.g. groups in a toolbar. */
+    orientation?: DividerOrientation;
+    /** Length along the rule's own axis — height when vertical, width when horizontal.
+     *  Unset spans the container. */
+    length?: DividerLength;
     margin?: SpacingSize;
     padding?: PaddingSize;
     className?: string;
@@ -624,7 +638,7 @@ export declare enum DividerVariant {
     Emphasis = "emphasis"
 }
 
-export declare const Dropdown: ({ items, onItemSelected, defaultValue, disabled, error, label, hint, tooltip, name, required, loading, menuLoading, formControl, description, helperText, placeholder, search, size, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: DropdownProps) => JSX_2.Element;
+export declare const Dropdown: ({ items, onItemSelected, defaultValue, value, disabled, error, label, hint, tooltip, name, required, loading, menuLoading, formControl, description, helperText, placeholder, search, clearable, size, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: DropdownProps) => JSX_2.Element;
 
 export declare interface DropdownItem {
     id: string;
@@ -652,6 +666,9 @@ export declare interface DropdownProps {
     items: DropdownItem[];
     onItemSelected?: (id?: string) => void;
     defaultValue?: string;
+    /** Controlled selection. When set, the trigger always reflects this id and the component
+     *  keeps no selection state of its own. Pass it with `onItemSelected`. */
+    value?: string;
     disabled?: boolean;
     error?: boolean;
     className?: string;
@@ -661,6 +678,8 @@ export declare interface DropdownProps {
     helperText?: default_2.ReactNode;
     placeholder?: string;
     search?: boolean;
+    /** Adds a clear control to the trigger, reported as `onItemSelected(undefined)`. */
+    clearable?: boolean;
     /** 'large' (42px) for form inputs; 'medium' (32px) for toolbar chips; 'small' (28px) beside a title. */
     size?: DropdownSize;
     /** Names the trigger from the light DOM, where `htmlFor` cannot reach into the shadow root. */
@@ -982,6 +1001,8 @@ export declare interface MalachiteTheme {
         lg: string;
         xl: string;
         default: string;
+        /** Optional so adding a shadow never breaks a consumer building a full theme literal. */
+        accent?: string;
         success: string;
         warning: string;
         error: string;
@@ -1036,6 +1057,15 @@ export declare interface MalachiteTheme {
             border: string;
             borderHover: string;
         };
+        /** Brand accent for interaction states — checked, selected, active. Green today,
+         *  but a rebrand repaints it; `success.*` stays status-only and does not follow.
+         *  Optional so adding a group never breaks a consumer building a full theme literal. */
+        accent?: {
+            background: string;
+            foreground: string;
+            border: string;
+            backgroundGlass: string;
+        };
         control: {
             borderHover: string;
         };
@@ -1112,6 +1142,8 @@ export declare interface MalachiteTheme {
         toggle: {
             track: string;
             trackChecked: string;
+            /** The checked track while the change it represents has not been saved yet. */
+            trackCheckedPending: string;
             knob: string;
         };
         segmentedControl: {
@@ -1125,7 +1157,6 @@ export declare interface MalachiteTheme {
         selectableCard: {
             background: string;
             border: string;
-            loadingBackground: string;
             selectedTint: string;
             selectedSurfaceEnd: string;
             selectedBorder: string;
@@ -1134,6 +1165,8 @@ export declare interface MalachiteTheme {
             librarySelectedTint: string;
             librarySelectedBorder: string;
             libraryIndicatorFill: string;
+            editingTint: string;
+            editingIndicatorFill: string;
             accent: string;
             mutedForeground: string;
             hoverBackground: string;
@@ -1144,12 +1177,18 @@ export declare interface MalachiteTheme {
             background: string;
             divider: string;
             fade: string;
-            bottomRule: string;
             arrowBackground: string;
             arrowBorder: string;
             addPrimaryBackground: string;
             addPrimaryForeground: string;
         };
+        selectionBar: {
+            background: string;
+            foreground: string;
+            mutedForeground: string;
+            divider: string;
+            shadow: string;
+        };
         dropdown: {
             border: string;
             borderActive: string;
@@ -1379,6 +1418,11 @@ export declare const NumberTag: default_2.FC<NumberTagProps>;
 export declare interface NumberTagProps {
     value: number | string;
     emphasis?: boolean;
+    /**
+     * Names the bare number for assistive tech — "3 schemas" rather than "3". Rendered as
+     * visually-hidden text, because `aria-label` on a plain span is not honoured.
+     */
+    'aria-label'?: string;
     className?: string;
 }
 
@@ -1430,6 +1474,16 @@ export declare interface PageAction {
     dividerBefore?: boolean;
 }
 
+/**
+ * The page's action buttons, collapsing into an overflow menu as the row narrows. Exported so
+ * a page that renders its own header block — e.g. one that scrolls the title away — keeps the
+ * same behaviour instead of hand-rolling `buttons.map(...)` and losing the collapse, the
+ * dividers and the href handling.
+ */
+export declare const PageActions: default_2.FC<{
+    buttons: PageAction[];
+}>;
+
 declare type PageContentGap = 'small' | 'medium' | 'large' | 'xlarge';
 
 export declare const PageLayout: {
@@ -1461,6 +1515,7 @@ export declare interface PartialMalachiteTheme {
         };
         tooltip?: Partial<MalachiteTheme['colors']['tooltip']>;
         primary?: Partial<MalachiteTheme['colors']['primary']>;
+        accent?: Partial<NonNullable<MalachiteTheme['colors']['accent']>>;
         control?: Partial<MalachiteTheme['colors']['control']>;
         outline?: Partial<MalachiteTheme['colors']['outline']>;
         secondary?: Partial<MalachiteTheme['colors']['secondary']>;
@@ -1474,6 +1529,7 @@ export declare interface PartialMalachiteTheme {
         segmentedControl?: Partial<MalachiteTheme['colors']['segmentedControl']>;
         selectableCard?: Partial<MalachiteTheme['colors']['selectableCard']>;
         cardStrip?: Partial<MalachiteTheme['colors']['cardStrip']>;
+        selectionBar?: Partial<MalachiteTheme['colors']['selectionBar']>;
         dropdown?: Partial<MalachiteTheme['colors']['dropdown']>;
         tag?: {
             [K in keyof MalachiteTheme['colors']['tag']]?: Partial<MalachiteTheme['colors']['tag'][K]>;
@@ -1695,8 +1751,6 @@ export declare interface SelectableCardProps {
     title: string;
     /** Leading glyph on the title line, e.g. a library/book icon. */
     titleIcon?: default_2.ReactNode;
-    /** `display` is the larger, lighter treatment the design gives the browse card; profile… */
-    titleSize?: 'default' | 'display';
     /** Palette only — gradient, borders, indicator and eyebrow; position is settled by the strip. */
     variant?: SelectableCardVariant;
     /** Small label above the title ("Profile", "Explore"). */
@@ -1714,7 +1768,7 @@ export declare interface SelectableCardProps {
     selectedLabel?: string;
     /** Wording shown in the same slot on hover, inviting the click. */
     hoverLabel?: string;
-    /** Replaces the card's content with a centred in-progress message and an amber rule, for a… */
+    /** Replaces the card's content with a centred in-progress message. */
     loading?: boolean;
     loadingLabel?: string;
     loadingHint?: string;
@@ -1737,8 +1791,71 @@ export declare interface SelectableCardStatus {
     type?: TagType;
 }
 
-/** The card's palette: `profile` is the green treatment, `library` the neutral one. */
-export declare type SelectableCardVariant = 'profile' | 'library';
+/** The card's palette: `profile` is green, `library` neutral, `editing` amber for a
+ *  profile with unsaved changes. */
+export declare type SelectableCardVariant = 'profile' | 'library' | 'editing';
+
+/**
+ * A bar reporting a pending, not-yet-written selection and the actions that resolve it. Every
+ * action destroys the button just pressed, so an `onClick` that ends the pending state must
+ * also move focus.
+ */
+export declare const SelectionBar: default_2.FC<SelectionBarProps>;
+
+export declare interface SelectionBarAction {
+    label: string;
+    onClick: () => void;
+    /** 'primary' commits the pending change; 'quiet' reads as a link. */
+    emphasis?: SelectionBarEmphasis;
+    icon?: default_2.ReactNode;
+    iconPosition?: 'start' | 'end';
+    disabled?: boolean;
+    /** Renders a vertical rule before this action. */
+    dividerBefore?: boolean;
+}
+
+/** A `value + label` pair, e.g. `{ value: 3, label: 'Added' }`. */
+export declare interface SelectionBarCount {
+    /** Not `ReactNode`: the live region reads this as text, so a node announces as
+     *  "[object Object]". */
+    value: string | number;
+    label: string;
+}
+
+export declare type SelectionBarEmphasis = 'primary' | 'secondary' | 'quiet';
+
+export declare interface SelectionBarProps {
+    /** Drives the mount: the bar animates in on true and animates out on false. */
+    open: boolean;
+    counts: SelectionBarCount[];
+    actions: SelectionBarAction[];
+    /** 'sticky' keeps the bar in view while its container scrolls; render it as the last child
+     *  of that content, with no `overflow: hidden` on any ancestor. */
+    placement?: 'sticky' | 'inline';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+}
+
+export declare const SettingRow: default_2.FC<SettingRowProps>;
+
+/** The ids a control needs to name and describe itself from the row's own text. */
+export declare interface SettingRowControlIds {
+    labelId: string;
+    descriptionId?: string;
+}
+
+export declare interface SettingRowProps {
+    label: string;
+    /** Small badge after the label, e.g. a `Tag`. */
+    badge?: default_2.ReactNode;
+    /** Explanation rendered under the row, outside its border. */
+    description?: default_2.ReactNode;
+    /** The control on the trailing edge. Passed the row's ids: a control `<label htmlFor>`
+     *  cannot reach must name itself with `aria-labelledby`. */
+    control: default_2.ReactNode | ((ids: SettingRowControlIds) => default_2.ReactNode);
+    className?: string;
+}
 
 /**
  * ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.
@@ -1944,6 +2061,31 @@ export declare interface StepperProps {
     'aria-labelledby'?: string;
 }
 
+export declare interface StepTabItem {
+    key: string;
+    label: string;
+    /** Position marker shown at the trailing edge. Defaults to `Step ${index + 1}`. */
+    hint?: string;
+    disabled?: boolean;
+}
+
+/**
+ * A horizontal step navigator whose steps are destinations, unlike the read-only `Stepper`.
+ * Each step is a button with `aria-current="step"`, not a tab.
+ */
+export declare const StepTabs: default_2.FC<StepTabsProps>;
+
+export declare interface StepTabsProps {
+    items: StepTabItem[];
+    activeKey: string;
+    /** Steps already satisfied. They render a check and stay reachable, so a user can go back. */
+    completedKeys?: string[];
+    onChange: (key: string) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+}
+
 export declare const Surface: SurfaceComponent;
 
 declare interface SurfaceComponent extends default_2.FC<SurfaceProps> {
@@ -2283,6 +2425,7 @@ declare interface ToggleProps {
     onChange: (checked: boolean) => void;
     disabled?: boolean;
     size?: ToggleSize;
+    tone?: ToggleTone;
     /** Visible text shown before the switch (e.g. a filter label). */
     label?: string;
     /**
@@ -2295,6 +2438,7 @@ declare interface ToggleProps {
     bordered?: boolean;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-describedby'?: string;
     className?: string;
     id?: string;
 }
@@ -2306,27 +2450,25 @@ export declare type ToggleSize = 'small' | 'medium';
  */
 export declare function toggleTheme(): 'light' | 'dark';
 
+/** What the checked state means. 'pending' paints the track amber, for a switch whose change
+ *  has not been written yet. The unchecked track is unaffected. */
+export declare type ToggleTone = 'default' | 'pending';
+
 /**
  * Which family of toolbar controls the chrome should match. `pill` matches the
  * filter-bar inputs (`Search`, `MultiSelect`); `button` matches the buttons.
  */
 export declare type ToggleVariant = 'pill' | 'button';
 
-/**
- * A flat, opaque horizontal bar — e.g. a toolbar/sub-header holding a Search or
- * filters. Owns its chrome (opaque `card-background` so scrolling content doesn't
- * bleed through when it's pinned, plus an optional bottom `divider`), so consumers
- * don't hand-roll `--malachite-*` backgrounds/borders. Positioning (incl.
- * `position: sticky`) is left to the consumer via `className`/`style`.
- */
 export declare const Toolbar: default_2.FC<ToolbarProps>;
 
 export declare interface ToolbarProps {
     children?: default_2.ReactNode;
     /** Draw a bottom divider — for a bar that sits above scrolling/list content. */
     divider?: boolean;
-    /** Padding preset (applies to both axes). */
-    padding?: 'compact' | 'default';
+    /** Padding preset (applies to both axes). `none` for a bar that must sit flush with
+     *  the content it pins over — the consumer then owns the gutter. */
+    padding?: 'none' | 'compact' | 'default';
     className?: string;
     style?: default_2.CSSProperties;
 }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as s, c as t, d as o, e as r, f as i, g as n, B as l, h as p, i as d, j as c, k as m, l as T, m as S, n as u, o as g, p as h, q as C, r as y, s as B, D as w, t as x, u as F, v as A, F as L, w as b, x as f, y as v, z as P, E as k, G as D, H as z, I as M, J as R, K as I, L as N, M as V, N as j, O as q, P as E, Q as G, R as H, S as J, T as K, U as O, V as W, W as Q, X as U, Y as X, Z as Y, $ as Z, a0 as $, a1 as _, a2 as aa, a3 as ea, a4 as sa, a5 as ta, a6 as oa, a7 as ra, a8 as ia, a9 as na, aa as la, ab as pa, ac as da, ad as ca, ae as ma, af as Ta, ag as Sa, ah as ua, ai as ga, aj as ha, ak as Ca, al as ya, am as Ba, an as wa, ao as xa, ap as Fa, aq as Aa, ar as La, as as ba, at as fa, au as va, av as Pa, aw as ka, ax as Da, ay as za, az as Ma, aA as Ra, aB as Ia, aC as Na, aD as Va } from "./index-6sd_d7t_.js";
+import { A as s, c as t, d as o, e as r, f as i, g as n, B as l, h as p, i as d, j as c, k as S, l as T, m, n as u, o as g, p as h, q as C, r as y, s as B, D as w, t as F, u as x, v as A, F as b, w as L, x as P, y as f, z as v, E as k, G as D, H as z, I as R, J as M, K as I, L as N, M as V, N as E, O as G, P as H, Q as j, R as q, S as J, T as K, U as O, V as W, W as Q, X as U, Y as X, Z as Y, $ as Z, a0 as $, a1 as _, a2 as aa, a3 as ea, a4 as sa, a5 as ta, a6 as oa, a7 as ra, a8 as ia, a9 as na, aa as la, ab as pa, ac as da, ad as ca, ae as Sa, af as Ta, ag as ma, ah as ua, ai as ga, aj as ha, ak as Ca, al as ya, am as Ba, an as wa, ao as Fa, ap as xa, aq as Aa, ar as ba, as as La, at as Pa, au as fa, av as va, aw as ka, ax as Da, ay as za, az as Ra, aA as Ma, aB as Ia, aC as Na, aD as Va, aE as Ea, aF as Ga, aG as Ha, aH as ja } from "./index-9iikfmDP.js";
 export {
   s as Accordion,
   t as ActionBar,
@@ -10,9 +10,9 @@ export {
   p as Breadcrumbs,
   d as Button,
   c as ButtonList,
-  m as Card,
+  S as Card,
   T as CardStrip,
-  S as Checkbox,
+  m as Checkbox,
   u as ClampText,
   g as CodeBlock,
   h as CollapsibleSection,
@@ -20,75 +20,79 @@ export {
   y as ConnectionHeader,
   B as CustomIcons,
   w as DefinitionRow,
-  x as Divider,
-  F as DividerVariant,
+  F as Divider,
+  x as DividerVariant,
   A as Dropdown,
-  L as Flex,
-  b as FlexAlign,
-  f as FlexDirection,
-  v as FlexGapSize,
-  P as FlexJustify,
+  b as Flex,
+  L as FlexAlign,
+  P as FlexDirection,
+  f as FlexGapSize,
+  v as FlexJustify,
   k as FooterLinks,
   D as FooterNav,
   z as Form,
-  M as FormItem,
-  R as Input,
+  R as FormItem,
+  M as Input,
   I as KeyValueList,
   N as Link,
   V as LoadingBar,
-  j as MalachiteContext,
-  q as MultiSelect,
-  E as NumberTag,
-  G as OverflowRow,
-  H as Padded,
+  E as MalachiteContext,
+  G as MultiSelect,
+  H as NumberTag,
+  j as OverflowRow,
+  q as Padded,
   J as PaddingSize,
-  K as PageLayout,
-  O as PillButton,
-  W as PreviewTree,
-  Q as PreviewTreeRow,
-  U as Progress,
-  X as Radio,
-  Y as Search,
-  Z as SegmentedControl,
-  $ as SelectableCard,
-  _ as ShadowEscape,
-  aa as SidePanel,
-  ea as SidePanelNavFooter,
-  sa as Skeleton,
-  ta as Spacer,
-  oa as SpacingSize,
-  ra as Spinner,
-  ia as SplitScreenLayout,
-  na as StatBadge,
-  la as Statistic,
-  pa as StatusBadge,
-  da as Stepper,
-  ca as Surface,
-  ma as SurfaceRow,
-  Ta as Swatch,
-  Sa as Table,
-  ua as Tabs,
-  ga as Tag,
-  ha as TextArea,
-  Ca as ThemeScope,
-  ya as Toggle,
-  Ba as Toolbar,
-  wa as Tooltip,
-  xa as TruncatedTooltip,
-  Fa as Typography,
-  Aa as WizardLayout,
-  La as applyCustomTheme,
-  ba as applyDarkTheme,
-  fa as applyLightTheme,
-  va as applyTheme,
-  Pa as applyThemeVars,
-  ka as buildActionBarMenuItems,
-  Da as darkTheme,
-  za as defaultTheme,
-  Ma as getCurrentTheme,
-  Ra as getCurrentThemeMode,
-  Ia as initializeTheme,
-  Na as resetTheme,
-  Va as toggleTheme
+  K as PageActions,
+  O as PageLayout,
+  W as PillButton,
+  Q as PreviewTree,
+  U as PreviewTreeRow,
+  X as Progress,
+  Y as Radio,
+  Z as Search,
+  $ as SegmentedControl,
+  _ as SelectableCard,
+  aa as SelectionBar,
+  ea as SettingRow,
+  sa as ShadowEscape,
+  ta as SidePanel,
+  oa as SidePanelNavFooter,
+  ra as Skeleton,
+  ia as Spacer,
+  na as SpacingSize,
+  la as Spinner,
+  pa as SplitScreenLayout,
+  da as StatBadge,
+  ca as Statistic,
+  Sa as StatusBadge,
+  Ta as StepTabs,
+  ma as Stepper,
+  ua as Surface,
+  ga as SurfaceRow,
+  ha as Swatch,
+  Ca as Table,
+  ya as Tabs,
+  Ba as Tag,
+  wa as TextArea,
+  Fa as ThemeScope,
+  xa as Toggle,
+  Aa as Toolbar,
+  ba as Tooltip,
+  La as TruncatedTooltip,
+  Pa as Typography,
+  fa as WizardLayout,
+  va as applyCustomTheme,
+  ka as applyDarkTheme,
+  Da as applyLightTheme,
+  za as applyTheme,
+  Ra as applyThemeVars,
+  Ma as buildActionBarMenuItems,
+  Ia as darkTheme,
+  Na as defaultTheme,
+  Va as getCurrentTheme,
+  Ea as getCurrentThemeMode,
+  Ga as initializeTheme,
+  Ha as resetTheme,
+  ja as toggleTheme
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackone/malachite",
-  "version": "1.0.1",
+  "version": "1.3.0",
   "description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
   "license": "MIT",
   "author": "StackOne",