@stackone/malachite 2.1.1 → 2.2.1

package/dist/index.d.ts

@@ -205,12 +205,13 @@ declare interface BaseFormComponentProps {
     hint?: string;
     tooltip?: string;
     required?: boolean;
+    requiredIndicator?: RequiredIndicator;
     name: FieldPath<FieldValues>;
     defaultValue?: string;
     loading?: boolean;
     formControl?: Control<FieldValues, unknown>;
     loadingComponent: default_2.ReactNode;
-    children?: default_2.ReactNode;
+    children?: FormItemChildren;
     /** Accessibility wiring, from `useFormFieldIds` — see `FormFieldIds`. */
     controlId?: string;
     labelId?: string;
@@ -568,6 +569,7 @@ export declare const CustomIcons: {
     NavbarExpandIcon: FC<IconProps>;
     NotFoundIcon: FC<IconProps>;
     OrganizationIcon: FC<IconProps>;
+    PinIcon: FC<IconProps>;
     PlusIcon: FC<IconProps>;
     PreviewIcon: FC<IconProps>;
     ProgrammaticWebhookIcon: FC<IconProps>;
@@ -639,25 +641,9 @@ export declare enum DividerVariant {
     Emphasis = "emphasis"
 }
 
-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 const Dropdown: ({ items, onItemSelected, defaultValue, value, disabled, error, label, hint, tooltip, name, required, requiredIndicator, loading, menuLoading, formControl, description, helperText, placeholder, search, showSubtitleInTrigger, subtitleLayout, clearable, size, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: DropdownProps) => JSX_2.Element;
 
-export declare interface DropdownItem {
-    id: string;
-    label: string;
-    icon?: default_2.ReactNode;
-    /** Alternate label shown in the closed trigger when selected (falls back to `label`). */
-    triggerLabel?: string;
-    /** Items sharing a `group` render under a section header, in first-seen order. */
-    group?: string;
-    /** Descriptive blurb rendered after the label in the open menu only —
-     *  the closed trigger never shows it. */
-    subtitle?: string;
-    rightSideText?: string;
-    rightSideTextVariant?: 'muted' | 'primary';
-    rightSideTextAlignment?: 'left' | 'right';
-}
-
-export declare interface DropdownProps {
+declare interface DropdownBaseProps {
     label?: string;
     hint?: string;
     tooltip?: string;
@@ -676,9 +662,10 @@ export declare interface DropdownProps {
     formControl?: Control<FieldValues, unknown>;
     description?: string;
     required?: boolean;
+    requiredIndicator?: RequiredIndicator;
     helperText?: default_2.ReactNode;
     placeholder?: string;
-    search?: boolean;
+    subtitleLayout?: SubtitleLayout;
     /** 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. */
@@ -689,12 +676,41 @@ export declare interface DropdownProps {
     'aria-labelledby'?: string;
 }
 
+export declare interface DropdownItem {
+    id: string;
+    label: string;
+    icon?: default_2.ReactNode;
+    /** Alternate label shown in the closed trigger when selected (falls back to `label`). */
+    triggerLabel?: string;
+    /** Items sharing a `group` render under a section header, in first-seen order. */
+    group?: string;
+    subtitle?: string;
+    rightSideText?: string;
+    rightSideTextVariant?: 'muted' | 'primary';
+    rightSideTextAlignment?: 'left' | 'right';
+}
+
+export declare type DropdownProps = DropdownBaseProps & DropdownTriggerModeProps;
+
 /**
  * Matches Button and the Figma component library: 28 / 32 / 42px. These names moved up a
  * tier in 0.71 — what was `xsmall`/`small`/`medium` is now `small`/`medium`/`large`.
  */
 export declare type DropdownSize = 'small' | 'medium' | 'large';
 
+/**
+ * The search trigger is a single-line text input with nowhere for a second line, so
+ * `showSubtitleInTrigger` is rejected alongside `search` rather than silently ignored.
+ */
+declare type DropdownTriggerModeProps = {
+    search?: false;
+    /** Promotes the selected item's `subtitle` into the closed trigger, beneath the value. */
+    showSubtitleInTrigger?: boolean;
+} | {
+    search: true;
+    showSubtitleInTrigger?: never;
+};
+
 declare interface EllipsisTextProps {
     children: default_2.ReactNode;
     tooltip?: default_2.ReactNode | string;
@@ -723,6 +739,54 @@ export declare interface EmptyLayoutProps {
     style?: default_2.CSSProperties;
 }
 
+/**
+ * Something a form has to show but does not ask for — a computed list, a generated value —
+ * wearing a field's anatomy: label, content, helper text, on a field's metrics.
+ */
+export declare const FieldBlock: default_2.FC<FieldBlockProps>;
+
+export declare interface FieldBlockProps {
+    label?: string;
+    /** Sits beside the label — a count, a status. */
+    badge?: default_2.ReactNode;
+    /** Sits at the far end of the label row — a copy button, a link. */
+    action?: default_2.ReactNode;
+    helperText?: default_2.ReactNode;
+    children: default_2.ReactNode;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
+export declare interface FieldErrorState {
+    error: boolean;
+    message?: string;
+    /**
+     * Reports an edit to the resolver only — the control keeps painting whatever value the
+     * consumer gives it — so a rejection clears as the field is fixed, not at the next submit.
+     */
+    onFieldChange?: (value: unknown) => void;
+    onFieldBlur?: () => void;
+    /** What this form means by "nothing chosen" — see `emptyValueOf`. */
+    emptyValue: unknown;
+    /** The value the form holds for the field, which is what a bound control must paint. */
+    value: unknown;
+}
+
+/**
+ * Fields that follow from an answer given above them — the credentials a chosen
+ * authentication type asks for, say — drawn as its children: indented, with a rule down the side.
+ */
+export declare const FieldGroup: default_2.FC<FieldGroupProps>;
+
+export declare type FieldGroupGap = 'small' | 'medium' | 'large';
+
+export declare interface FieldGroupProps {
+    children: default_2.ReactNode;
+    gap?: FieldGroupGap;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
 export declare const Flex: default_2.FC<FlexProps>;
 
 export declare enum FlexAlign {
@@ -800,10 +864,12 @@ export declare const Form: default_2.FC<FormProps>;
 
 export declare const FormItem: default_2.FC<FormItemProps>;
 
+export declare type FormItemChildren = default_2.ReactNode | ((state: FieldErrorState) => default_2.ReactNode);
+
 declare interface FormItemProps {
     control: Control<FieldValues, unknown>;
     name: FieldPath<FieldValues>;
-    children: default_2.ReactNode;
+    children: FormItemChildren;
 }
 
 declare interface FormProps {
@@ -814,6 +880,24 @@ declare interface FormProps {
     className?: string;
 }
 
+/**
+ * Names a group of fields in a form and rules off the space beside it. Quieter than
+ * `Typography.FormSectionTitle`, which titles a form rather than dividing one.
+ */
+export declare const FormSectionHeading: default_2.FC<FormSectionHeadingProps>;
+
+export declare type FormSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+
+export declare interface FormSectionHeadingProps {
+    children: default_2.ReactNode;
+    /** The rule that runs from the label to the edge of the section. */
+    rule?: boolean;
+    /** Where the section sits in the page's heading hierarchy. */
+    level?: FormSectionHeadingLevel;
+    className?: string;
+    style?: default_2.CSSProperties;
+}
+
 declare interface FormSectionTitleProps {
     children: default_2.ReactNode;
     className?: string;
@@ -857,6 +941,7 @@ declare interface InputProps {
     size?: InputSize;
     variant?: InputVariant;
     required?: boolean;
+    requiredIndicator?: RequiredIndicator;
     error?: boolean;
     loading?: boolean;
     defaultValue?: string;
@@ -869,6 +954,8 @@ declare interface InputProps {
     onCopyClick?: () => void;
     showCopyButton?: boolean;
     onChange?: (value: string) => void;
+    /** Controlled value, for a source of truth outside the form (URL, app state). */
+    value?: string;
     onBlur?: () => void;
     helperText?: string;
     showPasswordToggle?: boolean;
@@ -1382,6 +1469,7 @@ declare interface MultiSelectBaseProps {
     tooltip?: string;
     hint?: string;
     required?: boolean;
+    requiredIndicator?: RequiredIndicator;
     /** Show selected values as chips instead of "N selected" text */
     chips?: boolean;
     /** Show × button on each chip to remove it (only when chips=true) */
@@ -1695,6 +1783,8 @@ declare type RenderBreadcrumbLink = (props: {
     'aria-label'?: string;
 }) => default_2.ReactNode;
 
+export declare type RequiredIndicator = 'optional-suffix' | 'asterisk' | 'none';
+
 /**
  * Reset theme to default values
  */
@@ -2119,6 +2209,8 @@ export declare interface StepTabsProps {
     className?: string;
 }
 
+export declare type SubtitleLayout = 'inline' | 'stacked';
+
 export declare const Surface: SurfaceComponent;
 
 declare interface SurfaceComponent extends default_2.FC<SurfaceProps> {
@@ -2387,6 +2479,7 @@ declare interface TextAreaProps {
     description?: string;
     size?: TextAreaSize;
     required?: boolean;
+    requiredIndicator?: RequiredIndicator;
     error?: boolean;
     loading?: boolean;
     defaultValue?: string;
@@ -2400,6 +2493,7 @@ declare interface TextAreaProps {
     onChange?: (value: string) => void;
     value?: string;
     onBlur?: () => void;
+    helperText?: string;
     rows?: number;
     maxLength?: number;
     resize?: 'none' | 'vertical' | 'horizontal' | 'both';
@@ -2522,6 +2616,10 @@ declare interface TooltipProps {
      *  suppress the tooltip for this interaction. Lets wrappers defer expensive
      *  checks (e.g. truncation measurement) to interaction time instead of mount. */
     shouldShow?: () => boolean;
+    triggerAs?: 'div' | 'span';
+    /** Whether the tooltip acts as the trigger's accessible description. False where the
+     *  trigger already points at the same sentence on screen, so it is not announced twice. */
+    describesTrigger?: boolean;
 }
 
 /**

package/dist/index.js

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

package/package.json

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