@stackone/malachite 0.65.1 → 0.67.0

package/dist/index.d.ts

@@ -164,6 +164,11 @@ declare interface BaseFormComponentProps {
     formControl?: Control<FieldValues, unknown>;
     loadingComponent: default_2.ReactNode;
     children?: default_2.ReactNode;
+    /** Accessibility wiring, from `useFormFieldIds` — see `FormFieldIds`. */
+    controlId?: string;
+    labelId?: string;
+    descriptionId?: string;
+    hintId?: string;
 }
 
 declare interface BaseSkeletonProps {
@@ -256,6 +261,46 @@ declare interface CardProps {
     };
 }
 
+/** A horizontally scrolling radiogroup of cards — the "pick one of these" strip. */
+export declare const CardStrip: default_2.FC<CardStripProps> & {
+    AddTile: default_2.FC<CardStripAddTileProps>;
+};
+
+export declare interface CardStripAddTileProps {
+    /** Visible label, e.g. "Add Profile". Also names the button for assistive tech. */
+    label: string;
+    /** Defaults to a plus. */
+    icon?: default_2.ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+
+export declare interface CardStripProps {
+    /** The selected card's value, matched against each radio child's `data-value`. */
+    value: string;
+    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. */
+    children: default_2.ReactNode;
+    /** Pinned, non-scrolling slot before the cards (the Library card in the profile picker). */
+    leading?: default_2.ReactNode;
+    /** Circular scroll affordances, shown only on an edge that can actually scroll. */
+    arrows?: boolean;
+    /** Fade the cards out at any edge they scroll past. */
+    fadeEdges?: boolean;
+    /** Snap cards to the leading edge as the strip scrolls. */
+    snap?: 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. */
+    scrollSelectedIntoView?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
 export declare const Checkbox: default_2.FC<CheckboxProps>;
 
 export declare interface CheckboxProps {
@@ -429,6 +474,7 @@ export declare const CustomIcons: {
     InfoCircleFilled: FC<IconProps>;
     IntegrationsIcon: FC<IconProps>;
     KeyIcon: FC<IconProps>;
+    LibraryIcon: FC<IconProps>;
     LogsIcon: FC<IconProps>;
     MagicWandIcon: FC<IconProps>;
     ManageTeamIcon: FC<IconProps>;
@@ -504,7 +550,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, }: DropdownProps) => JSX_2.Element;
+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 interface DropdownItem {
     id: string;
@@ -543,6 +589,10 @@ export declare interface DropdownProps {
     search?: boolean;
     /** 'medium' (42px) for form inputs; 'small' (32px) for toolbar chips. */
     size?: DropdownSize;
+    /** Names the trigger from the light DOM, where `htmlFor` cannot reach into the shadow root. */
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 export declare type DropdownSize = 'small' | 'medium';
@@ -602,7 +652,10 @@ declare interface FlexProps {
     className?: string;
 }
 
-export declare type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/** Which of the three theme typefaces to render in. Defaults to the sans body face. */
+declare type FontFamily = 'sans' | 'heading' | 'body';
+
+export declare type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
 
 export declare type FontWeight = 'normal' | 'semi-bold' | 'bold';
 
@@ -702,6 +755,9 @@ declare interface InputProps {
     onBlur?: () => void;
     helperText?: string;
     showPasswordToggle?: boolean;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 declare type InputSize = 'small' | 'medium' | 'large';
@@ -803,6 +859,7 @@ export declare interface MalachiteTheme {
         medium: string;
         large: string;
         xlarge: string;
+        xxlarge: string;
     };
     iconSizes: {
         xsmall: string;
@@ -815,6 +872,8 @@ export declare interface MalachiteTheme {
         md: string;
         lg: string;
         xl: string;
+        xxl: string;
+        xxxl: string;
     };
     shadows: {
         sm: string;
@@ -962,6 +1021,23 @@ export declare interface MalachiteTheme {
             selectedForeground: string;
             selectedShadow: string;
         };
+        selectableCard: {
+            selectedBackground: string;
+            selectedShadow: string;
+            accent: string;
+            mutedForeground: string;
+            hoverBackground: string;
+            hoverRule: string;
+            pendingForeground: string;
+        };
+        cardStrip: {
+            background: string;
+            divider: string;
+            fade: string;
+            bottomRule: string;
+            arrowBackground: string;
+            arrowBorder: string;
+        };
         dropdown: {
             border: string;
             borderActive: string;
@@ -1150,6 +1226,10 @@ declare interface MultiSelectBaseProps {
     inlineSearch?: boolean;
     className?: string;
     style?: default_2.CSSProperties;
+    /** Names the trigger from the light DOM, where `htmlFor` cannot reach into the shadow root. */
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 export declare interface MultiSelectOption {
@@ -1252,6 +1332,8 @@ export declare interface PartialMalachiteTheme {
         pillButton?: Partial<MalachiteTheme['colors']['pillButton']>;
         toggle?: Partial<MalachiteTheme['colors']['toggle']>;
         segmentedControl?: Partial<MalachiteTheme['colors']['segmentedControl']>;
+        selectableCard?: Partial<MalachiteTheme['colors']['selectableCard']>;
+        cardStrip?: Partial<MalachiteTheme['colors']['cardStrip']>;
         dropdown?: Partial<MalachiteTheme['colors']['dropdown']>;
         tag?: Partial<MalachiteTheme['colors']['tag']>;
         numberTag?: Partial<MalachiteTheme['colors']['numberTag']>;
@@ -1418,6 +1500,55 @@ export declare interface SegmentedControlProps<T extends string = string> {
 
 export declare type SegmentedControlSize = 'small' | 'medium';
 
+/** A fixed-size card that behaves as one option in a radio group: a card-shaped `Surface.Row`. */
+export declare const SelectableCard: default_2.FC<SelectableCardProps>;
+
+export declare interface SelectableCardProps {
+    /** Identifies the card inside its group; handed back to `onSelect`. */
+    value: string;
+    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';
+    /** Small label above the title ("Profile", "Explore"). */
+    eyebrow?: string;
+    /** Status pill rendered next to the eyebrow — or in its place when there is no eyebrow. */
+    status?: SelectableCardStatus;
+    /** Supporting copy under the title, clamped to two lines. */
+    description?: string;
+    /** Bottom-left summary ("16 Actions", "10 Selected"). */
+    countLabel?: string;
+    /** Bottom-right cluster (markers, an ActionMenu…). */
+    footerActions?: default_2.ReactNode;
+    selected?: boolean;
+    /** Wording shown beside the radio when selected. */
+    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… */
+    loading?: boolean;
+    loadingLabel?: string;
+    loadingHint?: string;
+    /** Dims the card and blocks selection. */
+    disabled?: boolean;
+    /** Dims the card without blocking selection. */
+    dimmed?: boolean;
+    onSelect?: (value: string) => void;
+    /** Tab stop for the card. */
+    tabIndex?: number;
+    /** Replaces the generated accessible name (eyebrow + title + status). */
+    'aria-label'?: string;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface SelectableCardStatus {
+    label: string;
+    /** Maps to Tag's palette — `default` (grey) for "Disabled", `warning` (amber) for "Draft". */
+    type?: TagType;
+}
+
 /**
  * ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.
  * This is used internally by form components to escape Shadow DOM boundaries.
@@ -1619,6 +1750,7 @@ export declare interface StepperProps {
     onChange?: (index: number) => void;
     className?: string;
     'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 export declare const Surface: SurfaceComponent;
@@ -1907,6 +2039,9 @@ declare interface TextAreaProps {
      * content like URLs. Defaults to true.
      */
     wrap?: boolean;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
 }
 
 declare type TextAreaSize = 'small' | 'medium' | 'large';
@@ -1916,6 +2051,11 @@ export declare type TextColor = 'primary' | 'secondary' | 'dimmed' | 'placeholde
 export declare interface TextProps {
     color?: TextColor;
     size?: FontSize;
+    /**
+     * Typeface. Defaults to `sans` (Inter), the library's body face. `heading` is Stack Sans
+     * Text and `body` is Geist — both are loaded on mount and declared in the theme.
+     */
+    font?: FontFamily;
     underline?: boolean;
     fontWeight?: FontWeight;
     children: default_2.ReactNode;

package/dist/index.js

@@ -1,87 +1,89 @@
-import { A as s, c as t, d as o, e as i, B as r, f as n, g as l, h as p, i as T, j as d, k as m, l as S, m as c, n as h, o as u, D as g, p as C, q as w, r as y, F, s as x, t as f, u as v, v as k, w as B, x as L, y as P, z as b, I as A, K as D, L as z, E as R, M, G as I, N, O as V, P as j, H as q, J 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 ia, a8 as ra, a9 as na, aa as la, ab as pa, ac as Ta, ad as da, ae as ma, af as Sa, ag as ca, ah as ha, ai as ua, aj as ga, ak as Ca, al as wa, am as ya, an as Fa, ao as xa, ap as fa, aq as va, ar as ka, as as Ba, at as La, au as Pa, av as ba, aw as Aa } from "./index-C7oEKZwO.js";
+import { A as s, c as t, d as o, e as r, B as i, f as l, g as n, h as p, i as d, j as T, k as S, l as m, m as c, n as h, o as u, p as g, D as C, q as y, r as w, s as x, F, t as f, u as v, v as k, w as B, x as L, y as P, z as b, E as A, I as D, K as z, L as R, G as M, M as I, H as N, N as V, O as j, P as q, J 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 la, aa as na, ab as pa, ac as da, ad as Ta, ae as Sa, af as ma, ag as ca, ah as ha, ai as ua, aj as ga, ak as Ca, al as ya, am as wa, an as xa, ao as Fa, ap as fa, aq as va, ar as ka, as as Ba, at as La, au as Pa, av as ba, aw as Aa, ax as Da, ay as za } from "./index-DP5h64uw.js";
 export {
   s as Accordion,
   t as ActionMenu,
   o as Alert,
-  i as Avatar,
-  r as BaseFormComponent,
-  n as Button,
-  l as ButtonList,
+  r as Avatar,
+  i as BaseFormComponent,
+  l as Button,
+  n as ButtonList,
   p as Card,
+  d as CardStrip,
   T as Checkbox,
-  d as ClampText,
+  S as ClampText,
   m as CodeBlock,
-  S as CollapsibleSection,
-  c as Confetti,
-  h as ConnectionHeader,
-  u as CustomIcons,
-  g as DefinitionRow,
-  C as Divider,
+  c as CollapsibleSection,
+  h as Confetti,
+  u as ConnectionHeader,
+  g as CustomIcons,
+  C as DefinitionRow,
+  y as Divider,
   w as DividerVariant,
-  y as Dropdown,
+  x as Dropdown,
   F as Flex,
-  x as FlexAlign,
-  f as FlexDirection,
-  v as FlexGapSize,
-  k as FlexJustify,
-  B as FooterLinks,
-  L as FooterNav,
-  P as Form,
-  b as FormItem,
-  A as Input,
-  D as KeyValueList,
-  z as Link,
-  R as LoadingBar,
-  M as MalachiteContext,
-  I as MultiSelect,
-  N as NumberTag,
-  V as OverflowRow,
-  j as Padded,
-  q as PaddingSize,
-  E as PillButton,
-  G as PreviewTree,
-  H as PreviewTreeRow,
-  J as Progress,
-  K as Radio,
-  O as Search,
-  W as SegmentedControl,
-  Q as ShadowEscape,
-  U as SidePanel,
-  X as SidePanelNavFooter,
-  Y as Skeleton,
-  Z as Spacer,
-  $ as SpacingSize,
-  _ as Spinner,
-  aa as SplitScreenLayout,
-  ea as StatBadge,
-  sa as Statistic,
-  ta as StatusBadge,
-  oa as Stepper,
-  ia as Surface,
-  ra as SurfaceRow,
-  na as Swatch,
-  la as Table,
-  pa as Tabs,
-  Ta as Tag,
-  da as TextArea,
-  ma as ThemeScope,
-  Sa as Toggle,
-  ca as Toolbar,
-  ha as Tooltip,
-  ua as TruncatedTooltip,
-  ga as Typography,
-  Ca as WizardLayout,
-  wa as applyCustomTheme,
-  ya as applyDarkTheme,
-  Fa as applyLightTheme,
-  xa as applyTheme,
-  fa as applyThemeVars,
-  va as darkTheme,
-  ka as defaultTheme,
-  Ba as getCurrentTheme,
-  La as getCurrentThemeMode,
-  Pa as initializeTheme,
-  ba as resetTheme,
-  Aa as toggleTheme
+  f as FlexAlign,
+  v as FlexDirection,
+  k as FlexGapSize,
+  B as FlexJustify,
+  L as FooterLinks,
+  P as FooterNav,
+  b as Form,
+  A as FormItem,
+  D as Input,
+  z as KeyValueList,
+  R as Link,
+  M as LoadingBar,
+  I as MalachiteContext,
+  N as MultiSelect,
+  V as NumberTag,
+  j as OverflowRow,
+  q as Padded,
+  E as PaddingSize,
+  G as PillButton,
+  H as PreviewTree,
+  J as PreviewTreeRow,
+  K as Progress,
+  O as Radio,
+  W as Search,
+  Q as SegmentedControl,
+  U as SelectableCard,
+  X as ShadowEscape,
+  Y as SidePanel,
+  Z as SidePanelNavFooter,
+  $ as Skeleton,
+  _ as Spacer,
+  aa as SpacingSize,
+  ea as Spinner,
+  sa as SplitScreenLayout,
+  ta as StatBadge,
+  oa as Statistic,
+  ra as StatusBadge,
+  ia as Stepper,
+  la as Surface,
+  na as SurfaceRow,
+  pa as Swatch,
+  da as Table,
+  Ta as Tabs,
+  Sa as Tag,
+  ma as TextArea,
+  ca as ThemeScope,
+  ha as Toggle,
+  ua as Toolbar,
+  ga as Tooltip,
+  Ca as TruncatedTooltip,
+  ya as Typography,
+  wa as WizardLayout,
+  xa as applyCustomTheme,
+  Fa as applyDarkTheme,
+  fa as applyLightTheme,
+  va as applyTheme,
+  ka as applyThemeVars,
+  Ba as darkTheme,
+  La as defaultTheme,
+  Pa as getCurrentTheme,
+  ba as getCurrentThemeMode,
+  Aa as initializeTheme,
+  Da as resetTheme,
+  za as toggleTheme
 };
 //# sourceMappingURL=index.js.map

package/package.json

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