gridsmith-ui 0.17.2 → 0.17.3

package/dist/index.d.ts

@@ -294,8 +294,13 @@ interface SliderRangeProps {
      * accent fill is hidden so the custom track stays fully visible.
      */
     trackStyle?: CSSProperties;
+    /**
+     * The value in words, for a slider whose number alone means nothing ("Weekly" for 2): each thumb's aria-valuetext and
+     * the value shown beside the label (Sprint 25.9, A7; APG slider pattern). Leave it out and the number is shown and read.
+     */
+    formatValue?: (value: number) => string;
 }
-declare function SliderRange({ value, onChange, min, max, step, disabled, showValue, className, ref, error, label, "aria-label": ariaLabel, "aria-describedby": describedByProp, trackStyle }: SliderRangeProps): react_jsx_runtime.JSX.Element;
+declare function SliderRange({ value, onChange, min, max, step, disabled, showValue, className, ref, error, label, "aria-label": ariaLabel, "aria-describedby": describedByProp, trackStyle, formatValue }: SliderRangeProps): react_jsx_runtime.JSX.Element;
 
 interface TimePickerProps {
     value: string;
@@ -422,6 +427,9 @@ interface FieldProps {
  * (aria-describedby), that the control is marked invalid, and that the error
  * sits directly below the field (forms-002/006/009/010). Use one Field per
  * control; do not add a separate <Label> or a label prop on the child.
+ *
+ * In a SettingsLayout panel a Field keeps the narrow page's reading width however wide the page is (the panel's
+ * --ds-form-max, Sprint 25.9); a `max-w-*` class of your own wins.
  */
 declare function Field({ label, children, hint, error, required, labelAction, id: idProp, className }: FieldProps): react_jsx_runtime.JSX.Element;
 
@@ -469,6 +477,10 @@ interface FormWrapperProps {
      * A function renders your own from the list.
      */
     errorSummary?: boolean | ((errors: FormFieldError[]) => ReactNode);
+    /**
+     * Classes for the form. In a SettingsLayout panel the form keeps the narrow page's reading width however wide the
+     * page is (the panel's --ds-form-max, Sprint 25.9); a `max-w-*` class here wins.
+     */
     className?: string;
     ref?: React.Ref<HTMLFormElement>;
 }
@@ -588,7 +600,12 @@ interface DescriptionListProps {
     columns?: 1 | 2 | 3 | 4;
     size?: DescriptionListSize;
     dividers?: boolean;
-    /** Below this breakpoint a multi-column list becomes one column. Default "sm" when columns > 1 (a phone never shows two columns of pairs); "none" keeps the columns at every width. */
+    /**
+     * A multi-column list re-flows by its own width (Sprint 25.9, A5): a column never gets narrower than a pair needs
+     * (20rem beside, 8rem stacked), so in a drawer, a pane or a settings panel it shows fewer columns, and one when a
+     * second will not fit. `stackBelow` adds a viewport rule on top: below this breakpoint the list is one column.
+     * Default "sm" when columns > 1 (a phone never shows two columns of pairs); "none" keeps the columns at every width.
+     */
     stackBelow?: "sm" | "md" | "lg" | "none";
     className?: string;
 }
@@ -661,9 +678,20 @@ interface TableProps {
     onRowClick?: (row: Record<string, string | number | ReactNode>, index: number) => void;
     /** Breakpoint at which the table switches to card layout. Defaults to "md" (768px). */
     mobileBreakpoint?: BreakpointKey;
+    /**
+     * The table's title inside its frame (Sprint 25.9, A1): a heading in CardTitle's style at CardHeader's inset, in a band
+     * above the scroll area that never scrolls sideways, and the `<table>`'s name. Title a table this way or with a
+     * SectionHeading above it — the same way as the blocks beside it (page_composition#45). In card mode, and while it
+     * loads or is empty there, the same heading sits above the cards. Without a title the table renders as before.
+     */
+    title?: string;
+    /** A line under the title, which also describes the `<table>` (aria-describedby). Needs `title`. */
+    description?: string;
+    /** The table's buttons, at the end of the title band as in a CardHeader. Needs `title`. */
+    actions?: ReactNode;
     ref?: Ref<HTMLDivElement>;
 }
-declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, ref, }: TableProps): react_jsx_runtime.JSX.Element;
+declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint: mobileBreakpointProp, title, description, actions, ref, }: TableProps): react_jsx_runtime.JSX.Element;
 
 interface CalendarEvent {
     id: string;
@@ -1931,8 +1959,10 @@ interface SettingsLayoutProps {
     /** Width of the rail in px (sidebar layout). */
     railWidth?: number;
     /**
-     * Below this width of the layout itself (not the viewport) the rail becomes a Dropdown. Default: the rail plus a
-     * usable panel (railWidth + 480). Measured on the layout, so a narrow PageContainer or a sidebar shell counts.
+     * Below this width of the layout itself (not the viewport) the rail becomes a Dropdown. Default: the rail, the gap
+     * beside it and a usable panel (railWidth + gap + 560). Measured on the layout, so a narrow PageContainer or a
+     * sidebar shell counts. A narrow page holding the rail is wider by the rail and its gap, so the panel keeps the narrow
+     * width (roots.css, Sprint 25.9).
      */
     collapseBelow?: number;
     /** Accessible name of the section navigation. */
@@ -1953,7 +1983,7 @@ interface SettingsLayoutProps {
  * The rail is a Tabs (vertical) styled by the theme's in-page vertical style;
  * the page assembles the sections' contents and nothing else.
  */
-declare function SettingsLayout({ sections, value, onChange, layout: layoutProp, railWidth, collapseBelow, "aria-label": ariaLabel, children, className, }: SettingsLayoutProps): react_jsx_runtime.JSX.Element;
+declare function SettingsLayout({ sections, value, onChange, layout: layoutProp, railWidth, collapseBelow: collapseBelowProp, "aria-label": ariaLabel, children, className, }: SettingsLayoutProps): react_jsx_runtime.JSX.Element;
 
 interface BreadcrumbItem$1 {
     label: string;
@@ -3016,7 +3046,10 @@ type PageContainerWidth = "constrained" | "full" | "narrow";
 type Padding = "none" | "default" | "wide";
 type VerticalPadding = "none" | "default" | "spacious";
 interface PageContainerProps {
-    /** Semantic width — maps to maxWidth internally. Takes precedence over maxWidth when both are set. */
+    /**
+     * Semantic width — maps to maxWidth internally. Takes precedence over maxWidth when both are set. A narrow page that
+     * holds a SettingsLayout rail is wider by the rail and its gap, so the panel keeps the narrow width (Sprint 25.9).
+     */
     width?: PageContainerWidth;
     /** Lower-level max-width escape hatch. Use `width` for standard cases. */
     maxWidth?: MaxWidth;
@@ -3062,6 +3095,7 @@ declare function useContentWidth(width: PageContainerWidth): void;
 declare const PageContainer: react.ForwardRefExoticComponent<PageContainerProps & react.RefAttributes<HTMLDivElement>>;
 
 interface SectionHeadingProps {
+    /** Wraps onto more lines rather than being cut (an insight above a chart); a pane's title keeps one line. */
     title: string;
     description?: string;
     /** The section's buttons. Below sm they sit under the title, like PageHeader's actions. */