@stackone/malachite 0.67.2 → 0.69.0

package/dist/index.d.ts

@@ -59,6 +59,30 @@ export declare type AccordionProps = AccordionBaseProps & ({
     header: default_2.ReactNode;
 });
 
+export declare const ActionBar: default_2.FC<ActionBarProps>;
+
+export declare interface ActionBarItem {
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: default_2.ReactNode;
+    tooltip?: string;
+    variant?: BaseButtonProps['variant'];
+    size?: BaseButtonProps['size'];
+    radius?: BaseButtonProps['radius'];
+    /** Renders a vertical rule before this button (and a menu divider when collapsed). */
+    dividerBefore?: boolean;
+}
+
+export declare interface ActionBarProps {
+    buttons: ActionBarItem[];
+    /** Container width, in px, below which the row collapses into a single menu. */
+    collapseBelow?: number;
+    /** Accessible name for the collapsed menu trigger. */
+    menuLabel?: string;
+    className?: string;
+}
+
 /**
  * ActionMenu is a kebab-style overflow action menu. The trigger is a square
  * icon-only outline Button (three-dot icon by default); on click, a popover
@@ -103,7 +127,28 @@ declare interface AlertProps {
     onToggle?: (expanded: boolean) => void;
 }
 
-declare type AlertType = 'info' | 'success' | 'error' | 'warning';
+export declare type AlertType = 'info' | 'success' | 'error' | 'warning';
+
+export declare const AppLogo: default_2.FC<AppLogoProps>;
+
+export declare interface AppLogoProps {
+    /** Connector logo URL. Falls back to a coloured initial tile when missing or broken. */
+    src?: string;
+    /** Connector name — the accessible label, the fallback initial, and the visible text. */
+    name: string;
+    /** Renders the name beside the mark. Omit for a bare logo (e.g. inside a dense row). */
+    showName?: boolean;
+    /** Pixel size of the square mark. */
+    size?: number;
+    nameSize?: FontSize;
+    /** Defaults to `normal`. Raise it when the logo doubles as a page title. */
+    nameWeight?: FontWeight;
+    /** Rendered as a tag after the name, e.g. `v1.2.0` or `Legacy`. */
+    version?: string;
+    /** Truncates a long name with an ellipsis and reveals the full value on hover. */
+    truncate?: boolean;
+    className?: string;
+}
 
 /**
  * Apply a custom theme while preserving the current theme mode (light/dark)
@@ -150,6 +195,8 @@ export declare interface AvatarProps {
 
 export declare type AvatarShape = 'square' | 'circle';
 
+declare type BaseButtonProps = default_2.ComponentProps<typeof Button>;
+
 export declare const BaseFormComponent: default_2.FC<BaseFormComponentProps>;
 
 declare interface BaseFormComponentProps {
@@ -176,7 +223,25 @@ declare interface BaseSkeletonProps {
     className?: string;
 }
 
-export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+export declare interface BreadcrumbLink {
+    name: default_2.ReactNode;
+    url?: string;
+    isRoot?: boolean;
+}
+
+export declare const Breadcrumbs: default_2.FC<BreadcrumbsProps>;
+
+export declare interface BreadcrumbsProps {
+    links: BreadcrumbLink[];
+    actions?: PageAction[];
+    renderLink?: RenderBreadcrumbLink;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare const buildActionBarMenuItems: (buttons: ActionBarItem[]) => ActionMenuItem[];
+
+export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
 
 declare interface ButtonDefinition {
     label: string;
@@ -227,14 +292,18 @@ declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonE
     tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
     iconOnly?: boolean;
     children?: default_2.ReactNode;
-    onClick?: default_2.MouseEventHandler<HTMLButtonElement>;
+    onClick?: default_2.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement>;
+    /** Renders the button as a real anchor, so a link action is never an <a> nested in a <button>. */
+    href?: string;
+    target?: default_2.HTMLAttributeAnchorTarget;
+    rel?: string;
 }
 
-declare type ButtonRadius = 'md' | 'lg' | 'xl';
+export declare type ButtonRadius = 'md' | 'lg' | 'xl';
 
-declare type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';
+export declare type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';
 
-declare type ButtonVariant = 'filled' | 'outline' | 'destructive' | 'success' | 'warning' | 'error' | 'ghost' | 'no-style';
+export declare type ButtonVariant = 'filled' | 'outline' | 'destructive' | 'success' | 'warning' | 'error' | 'ghost' | 'no-style';
 
 export declare const Card: default_2.FC<CardProps>;
 
@@ -439,6 +508,7 @@ export declare const CustomIcons: {
     CaretLeftIcon: FC<IconProps>;
     CaretRightIcon: FC<IconProps>;
     CaretUpIcon: FC<IconProps>;
+    CodeIcon: FC<IconProps>;
     ChangePasswordIcon: FC<IconProps>;
     CheckCircleFilled: FC<IconProps>;
     CheckIcon: FC<IconProps>;
@@ -587,7 +657,7 @@ export declare interface DropdownProps {
     helperText?: default_2.ReactNode;
     placeholder?: string;
     search?: boolean;
-    /** 'medium' (42px) for form inputs; 'small' (32px) for toolbar chips. */
+    /** 'medium' (42px) for form inputs; 'small' (32px) for toolbar chips; 'xsmall' (28px) beside a title. */
     size?: DropdownSize;
     /** Names the trigger from the light DOM, where `htmlFor` cannot reach into the shadow root. */
     id?: string;
@@ -595,17 +665,36 @@ export declare interface DropdownProps {
     'aria-labelledby'?: string;
 }
 
-export declare type DropdownSize = 'small' | 'medium';
+export declare type DropdownSize = 'xsmall' | 'small' | 'medium';
 
 declare interface EllipsisTextProps {
     children: default_2.ReactNode;
     tooltip?: default_2.ReactNode | string;
+    /**
+     * Defaults to filling the container. Pass a fixed width only when the text should
+     * truncate before its container runs out of room (e.g. a column with a hard cap).
+     */
     maxWidth?: string;
     color?: TextColor;
     className?: string;
     style?: default_2.CSSProperties;
 }
 
+export declare interface EmptyLayoutProps {
+    title?: string;
+    children: default_2.ReactNode;
+    centered?: boolean;
+    uniformPadding?: boolean;
+    headerActions?: default_2.ReactNode;
+    background?: default_2.ReactNode;
+    /** Demotes the default `main` landmark — pass e.g. `region` when the app owns its own. */
+    role?: default_2.AriaRole;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
 export declare const Flex: default_2.FC<FlexProps>;
 
 export declare enum FlexAlign {
@@ -653,7 +742,7 @@ declare interface FlexProps {
 }
 
 /** Which of the three theme typefaces to render in. Defaults to the sans body face. */
-declare type FontFamily = 'sans' | 'heading' | 'body';
+declare type FontFamily = 'sans' | 'heading' | 'body' | 'mono';
 
 export declare type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
 
@@ -1303,6 +1392,28 @@ declare type PaddingSize_2 = 'xsmall' | 'small' | 'medium' | 'large' | 'none';
 
 declare type PaddingSize_3 = 'default' | 'compact';
 
+export declare interface PageAction {
+    label: string;
+    /** Ignored when `href` is set. */
+    onClick?: () => void;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    icon?: default_2.ReactNode;
+    href?: string;
+    /** Defaults to `_blank`. */
+    target?: '_self' | '_blank';
+    tooltip?: string;
+    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+    dividerBefore?: boolean;
+}
+
+declare type PageContentGap = 'small' | 'medium' | 'large' | 'xlarge';
+
+export declare const PageLayout: {
+    Regular: FC<RegularLayoutProps>;
+    Empty: FC<EmptyLayoutProps>;
+};
+
 declare interface PageTitleProps {
     children: default_2.ReactNode;
     margin?: string;
@@ -1425,6 +1536,48 @@ export declare interface RadioProps {
     id?: string;
 }
 
+export declare interface RegularLayoutProps {
+    breadcrumbLinks?: BreadcrumbLink[];
+    breadcrumbActions?: PageAction[];
+    renderLink?: RenderBreadcrumbLink;
+    title?: default_2.ReactNode;
+    titleSuffix?: default_2.ReactNode;
+    subtitle?: string;
+    description?: default_2.ReactNode;
+    buttons?: PageAction[];
+    /**
+     * Hides the buttons and skeletons the title. `subtitle` and `description` are only
+     * skeletoned when those props are also passed.
+     */
+    loading?: boolean;
+    children: default_2.ReactNode;
+    centered?: boolean;
+    noPadding?: boolean;
+    contentGap?: PageContentGap;
+    alert?: {
+        message: string;
+        type?: AlertType;
+    };
+    /** Demotes the default `main` landmark — pass e.g. `region` when the app owns its own. */
+    role?: default_2.AriaRole;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+/**
+ * Renders a crumb or the back button through the app's own link component, spreading every
+ * field onto it. A client-side-routed consumer MUST pass this, or navigation breaks.
+ */
+declare type RenderBreadcrumbLink = (props: {
+    href: string;
+    children: default_2.ReactNode;
+    className?: string;
+    'aria-current'?: 'page';
+    'aria-label'?: string;
+}) => default_2.ReactNode;
+
 /**
  * Reset theme to default values
  */
@@ -1980,8 +2133,12 @@ export declare interface TabsProps {
 
 export declare const Tag: default_2.FC<TagProps>;
 
+declare type TagFontSize = 'xsmall' | 'small' | 'medium';
+
 export declare interface TagProps {
     value: string | number | default_2.ReactNode;
+    /** Defaults to 12px. Use `xsmall` for a secondary badge beside a primary one. */
+    fontSize?: TagFontSize;
     type?: TagType;
     bordered?: boolean;
     shadow?: boolean;

package/dist/index.js

@@ -1,89 +1,94 @@
-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-BBZpz36P.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 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-CG9LBZIb.js";
 export {
   s as Accordion,
-  t as ActionMenu,
-  o as Alert,
-  r as Avatar,
-  i as BaseFormComponent,
-  l as Button,
-  n as ButtonList,
-  p as Card,
-  d as CardStrip,
-  T as Checkbox,
-  S as ClampText,
-  m as CodeBlock,
-  c as CollapsibleSection,
-  h as Confetti,
-  u as ConnectionHeader,
-  g as CustomIcons,
-  C as DefinitionRow,
-  y as Divider,
-  w as DividerVariant,
-  x as Dropdown,
-  F as Flex,
-  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,
+  t as ActionBar,
+  o as ActionMenu,
+  r as Alert,
+  i as AppLogo,
+  n as Avatar,
+  l as BaseFormComponent,
+  p as Breadcrumbs,
+  d as Button,
+  c as ButtonList,
+  m as Card,
+  T as CardStrip,
+  S as Checkbox,
+  u as ClampText,
+  g as CodeBlock,
+  h as CollapsibleSection,
+  C as Confetti,
+  y as ConnectionHeader,
+  B as CustomIcons,
+  w as DefinitionRow,
+  x as Divider,
+  F as DividerVariant,
+  A as Dropdown,
+  L as Flex,
+  b as FlexAlign,
+  f as FlexDirection,
+  v as FlexGapSize,
+  P as FlexJustify,
+  k as FooterLinks,
+  D as FooterNav,
+  z as Form,
+  M as FormItem,
+  R 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,
+  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,
-  ka as applyThemeVars,
-  Ba as darkTheme,
-  La as defaultTheme,
-  Pa as getCurrentTheme,
-  ba as getCurrentThemeMode,
-  Aa as initializeTheme,
-  Da as resetTheme,
-  za as toggleTheme
+  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
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackone/malachite",
-  "version": "0.67.2",
+  "version": "0.69.0",
   "description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
   "license": "MIT",
   "author": "StackOne",
@@ -39,18 +39,6 @@
       "default": "./dist/index.js"
     }
   },
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "lint": "biome lint",
-    "lint:fix": "biome lint --fix",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "typecheck": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.demo.json --noEmit",
-    "docs:components": "node scripts/generate-components-doc.mjs",
-    "docs:check": "node scripts/generate-components-doc.mjs --check",
-    "publish-release": "npm publish --access=public"
-  },
   "peerDependencies": {
     "react": "^18.3.1 || ^19.0.0",
     "react-dom": "^18.3.1 || ^19.0.0",
@@ -88,5 +76,17 @@
     "@uiw/react-json-view": "^2.0.0-alpha.35",
     "marked-react": "^3.0.0",
     "react-syntax-highlighter": "^16.1.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "biome lint",
+    "lint:fix": "biome lint --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc -p tsconfig.app.json --noEmit && tsc -p tsconfig.demo.json --noEmit",
+    "docs:components": "node scripts/generate-components-doc.mjs",
+    "docs:check": "node scripts/generate-components-doc.mjs --check",
+    "publish-release": "pnpm publish --access=public --no-git-checks"
   }
-}
+}