@longline/aqua-ui 1.0.302 → 1.0.303

package/controls/LinearChart/index.js

@@ -1 +1 @@
-export * from './LinearChart';
+export { LinearChart } from './LinearChart';

package/controls/ListView/Column.d.ts

@@ -36,7 +36,7 @@ interface IColumnProps {
     reverse?: boolean;
     /**
      * Cell content alignment. Defaults to `left`.
-     * @default let
+     * @default left
      */
     align?: 'left' | 'right';
     /**
@@ -65,12 +65,49 @@ interface IColumnProps {
     paddingRight?: number;
 }
 /**
- * TableColumn species a column name, and how to render content for that
- * column.
- * TableColumn itself doesn't render anything.
+ * Column definition for `ListView`. Specifies header, sorting, and cell rendering.
+ *
+ * This component doesn't render anything itself—it defines column configuration
+ * that `ListView` reads from its children.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <ListView data={users}>
+ *   {/* Basic column *}
+ *   <ListView.Column name="Name" sort="name">
+ *     {(item) => item.name}
+ *   </ListView.Column>
+ *
+ *   {/* Fixed-width, right-aligned *}
+ *   <ListView.Column name="Amount" width="100px" align="right" sort="amount">
+ *     {(item) => `$${item.amount.toFixed(2)}`}
+ *   </ListView.Column>
+ *
+ *   {/* Custom sort value *}
+ *   <ListView.Column name="Date" sort="date" sortValue={(item) => new Date(item.date)}>
+ *     {(item) => formatDate(item.date)}
+ *   </ListView.Column>
+ * </ListView>
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `name` | Column header text |
+ * | `label` | Optional custom header (overrides `name`) |
+ * | `width` | Flex weight (number) or fixed width (string) |
+ * | `sort` | Sort key—omit to disable sorting |
+ * | `sortValue` | Function to extract sortable value from item |
+ * | `defaultSort` | Set this column as the initial sort |
+ * | `reverse` | Default to descending sort |
+ * | `align` | Cell alignment: "left" or "right" |
+ * | `fixed` | Prevent column from being hidden |
  */
 declare const Column: {
     (_: IColumnProps): null;
     displayName: string;
 };
-export { Column, IColumnProps };
+export { Column };
+export type { IColumnProps };

package/controls/ListView/Column.js

@@ -1,7 +1,43 @@
 /**
- * TableColumn species a column name, and how to render content for that
- * column.
- * TableColumn itself doesn't render anything.
+ * Column definition for `ListView`. Specifies header, sorting, and cell rendering.
+ *
+ * This component doesn't render anything itself—it defines column configuration
+ * that `ListView` reads from its children.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <ListView data={users}>
+ *   {/* Basic column *}
+ *   <ListView.Column name="Name" sort="name">
+ *     {(item) => item.name}
+ *   </ListView.Column>
+ *
+ *   {/* Fixed-width, right-aligned *}
+ *   <ListView.Column name="Amount" width="100px" align="right" sort="amount">
+ *     {(item) => `$${item.amount.toFixed(2)}`}
+ *   </ListView.Column>
+ *
+ *   {/* Custom sort value *}
+ *   <ListView.Column name="Date" sort="date" sortValue={(item) => new Date(item.date)}>
+ *     {(item) => formatDate(item.date)}
+ *   </ListView.Column>
+ * </ListView>
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `name` | Column header text |
+ * | `label` | Optional custom header (overrides `name`) |
+ * | `width` | Flex weight (number) or fixed width (string) |
+ * | `sort` | Sort key—omit to disable sorting |
+ * | `sortValue` | Function to extract sortable value from item |
+ * | `defaultSort` | Set this column as the initial sort |
+ * | `reverse` | Default to descending sort |
+ * | `align` | Cell alignment: "left" or "right" |
+ * | `fixed` | Prevent column from being hidden |
  */
 var Column = function (_) { return null; };
 Column.displayName = "ListView.Column";

package/controls/ListView/IListViewProps.d.ts

@@ -109,7 +109,7 @@ interface IListViewProps {
     expansion?: React.ReactNode;
     /**
      * If set, when an item is activated it scrolls into view.
-     * @fefault false
+     * @default false
      */
     focusActive?: boolean;
     /**
@@ -145,4 +145,4 @@ interface IListViewProps {
      */
     onCheck?: (data: any[], item: any | boolean) => void;
 }
-export { IListViewProps };
+export type { IListViewProps };

package/controls/ListView/ListView.d.ts

@@ -11,7 +11,62 @@ interface IProps extends IListViewProps {
     children?: React.ReactElement<IColumnProps> | React.ReactElement<IColumnProps>[];
 }
 /**
- * Customizable `ListView` component.
+ * A data table with sorting, column management, virtualization, and row selection.
+ *
+ * Displays tabular data with customizable columns defined as children. Supports
+ * sorting, hover effects, striped rows, row expansion, and optional virtualization
+ * for large datasets.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic table
+ * <ListView data={users}>
+ *   <ListView.Column name="Name" sort="name">
+ *     {(item) => item.name}
+ *   </ListView.Column>
+ *   <ListView.Column name="Email" sort="email">
+ *     {(item) => item.email}
+ *   </ListView.Column>
+ * </ListView>
+ *
+ * // With selection and hover
+ * <ListView data={items} hover active={selectedItem} onClick={setSelectedItem}>
+ *   <ListView.Column name="Title" sort="title" defaultSort>
+ *     {(item) => item.title}
+ *   </ListView.Column>
+ * </ListView>
+ *
+ * // Virtualized for large datasets
+ * <ListView data={bigData} virtual overscan={20}>
+ *   <ListView.Column name="ID">{(item) => item.id}</ListView.Column>
+ * </ListView>
+ * ```
+ *
+ * ## Features
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `hover` | Highlight rows on mouse hover |
+ * | `striped` | Alternate row background colors |
+ * | `grid` | Show cell borders |
+ * | `dark` | Dark theme variant |
+ * | `virtual` | Virtualize rendering for large lists |
+ * | `columnsEditable` | Allow users to show/hide columns |
+ * | `expanded` | Show expansion content below active row |
+ *
+ * ## Column Definition
+ *
+ * Columns are defined using `ListView.Column` children:
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `name` | Column header text |
+ * | `sort` | Key for sorting (omit to disable sorting) |
+ * | `defaultSort` | Make this the initial sort column |
+ * | `width` | Number (flex weight) or string (e.g., "100px") |
+ * | `align` | Cell alignment: "left" (default) or "right" |
+ * | `children` | Render function: `(item) => ReactNode` |
  */
 declare const ListView: {
     ({ data, dark, noheader, hover, striped, grid, total, singular, plural, shadow, ghost, rowHeight, columnsEditable, expanded, focusActive, virtual, overscan, ...props }: IProps): React.JSX.Element;
@@ -21,4 +76,5 @@ declare const ListView: {
         displayName: string;
     };
 };
-export { ListView, IListViewProps };
+export { ListView };
+export type { IListViewProps };

package/controls/ListView/ListView.js

@@ -75,7 +75,7 @@ var ListViewBase = function (props) {
         if (!Array.isArray(props.data))
             return;
         // Find column corresponding to sort key. Abort if column now found.
-        var sortColumn = columns.find(function (c) { return c.sort == sort; });
+        var sortColumn = columns.find(function (c) { return c.sort === sort; });
         if (!sortColumn)
             return;
         setData(sortItems(props.data, sort, reverse, sortColumn.sortValue));
@@ -123,7 +123,62 @@ var ListViewBase = function (props) {
     return (React.createElement(Table, __assign({}, otherProps, { data: data, columns: columns, sort: sort, reverse: reverse, onSortClick: handleSort, columnsMode: columnsMode, onOpenColumns: handleColumns, onCheck: props.onCheck ? handleCheck : null, onChangeColumns: handleChangeColumns, onCloseColumns: function () { return setColumnsMode(false); }, onResetColumns: handleResetColumns })));
 };
 /**
- * Customizable `ListView` component.
+ * A data table with sorting, column management, virtualization, and row selection.
+ *
+ * Displays tabular data with customizable columns defined as children. Supports
+ * sorting, hover effects, striped rows, row expansion, and optional virtualization
+ * for large datasets.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic table
+ * <ListView data={users}>
+ *   <ListView.Column name="Name" sort="name">
+ *     {(item) => item.name}
+ *   </ListView.Column>
+ *   <ListView.Column name="Email" sort="email">
+ *     {(item) => item.email}
+ *   </ListView.Column>
+ * </ListView>
+ *
+ * // With selection and hover
+ * <ListView data={items} hover active={selectedItem} onClick={setSelectedItem}>
+ *   <ListView.Column name="Title" sort="title" defaultSort>
+ *     {(item) => item.title}
+ *   </ListView.Column>
+ * </ListView>
+ *
+ * // Virtualized for large datasets
+ * <ListView data={bigData} virtual overscan={20}>
+ *   <ListView.Column name="ID">{(item) => item.id}</ListView.Column>
+ * </ListView>
+ * ```
+ *
+ * ## Features
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `hover` | Highlight rows on mouse hover |
+ * | `striped` | Alternate row background colors |
+ * | `grid` | Show cell borders |
+ * | `dark` | Dark theme variant |
+ * | `virtual` | Virtualize rendering for large lists |
+ * | `columnsEditable` | Allow users to show/hide columns |
+ * | `expanded` | Show expansion content below active row |
+ *
+ * ## Column Definition
+ *
+ * Columns are defined using `ListView.Column` children:
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `name` | Column header text |
+ * | `sort` | Key for sorting (omit to disable sorting) |
+ * | `defaultSort` | Make this the initial sort column |
+ * | `width` | Number (flex weight) or string (e.g., "100px") |
+ * | `align` | Cell alignment: "left" (default) or "right" |
+ * | `children` | Render function: `(item) => ReactNode` |
  */
 var ListView = function (_a) {
     var _b = _a.data, data = _b === void 0 ? null : _b, _c = _a.dark, dark = _c === void 0 ? false : _c, _d = _a.noheader, noheader = _d === void 0 ? false : _d, _e = _a.hover, hover = _e === void 0 ? false : _e, _f = _a.striped, striped = _f === void 0 ? false : _f, _g = _a.grid, grid = _g === void 0 ? false : _g, _h = _a.total, total = _h === void 0 ? false : _h, _j = _a.singular, singular = _j === void 0 ? "record" : _j, _k = _a.plural, plural = _k === void 0 ? "records" : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, _q = _a.expanded, expanded = _q === void 0 ? false : _q, _r = _a.focusActive, focusActive = _r === void 0 ? false : _r, _s = _a.virtual, virtual = _s === void 0 ? false : _s, _t = _a.overscan, overscan = _t === void 0 ? 10 : _t, props = __rest(_a, ["data", "dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded", "focusActive", "virtual", "overscan"]);

package/controls/ListView/index.d.ts

@@ -1 +1,2 @@
 export { ListView } from './ListView';
+export type { IListViewProps } from './IListViewProps';

package/controls/Mouse/Mouse.d.ts

@@ -31,16 +31,41 @@ interface IMouseProps {
     size?: number;
 }
 /**
- * `Mouse` Renders an SVG mouse shape with optional highlighting of the
- * left, right, and wheel buttons.
+ * An SVG mouse icon with interactive button highlighting.
  *
- * - `left`, `right`, `wheel`: Whether each button appears "pressed"
- * - `color`: Main mouse fill color (defaults to theme neutral color)
- * - `accent`: Fill color of the wheel (defaults to primary theme color)
- * - `size`: Scales the mouse height in pixels
+ * Renders a mouse shape that can visually indicate which buttons are pressed.
+ * Useful for tutorials, documentation, or UI hints showing mouse interactions.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Default mouse
+ * <Mouse />
+ *
+ * // Left click indicator
+ * <Mouse left />
+ *
+ * // Right click with scroll
+ * <Mouse right wheel />
+ *
+ * // Custom colors and size
+ * <Mouse left color="white" accent="orange" size={48} />
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `left` | Highlight left button as pressed |
+ * | `right` | Highlight right button as pressed |
+ * | `wheel` | Highlight scroll wheel |
+ * | `color` | Mouse body fill color (default: theme neutral) |
+ * | `accent` | Wheel highlight color (default: theme primary) |
+ * | `size` | Height in pixels (max 100px) |
  */
 declare const Mouse: {
     ({ left, right, wheel, ...props }: IMouseProps): React.JSX.Element;
     displayName: string;
 };
-export { Mouse, IMouseProps };
+export { Mouse };
+export type { IMouseProps };

package/controls/Mouse/Mouse.js

@@ -36,23 +36,71 @@ var MouseBase = function (props) {
 };
 var MouseStyled = styled(MouseBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"], ["\n  ", "\n  max-height: 100px;\n  fill: ", ";\n  .left  { fill: ", "; }\n  .right { fill: ", "; }\n  .wheel { fill: ", "; }\n"
     /**
-     * `Mouse` Renders an SVG mouse shape with optional highlighting of the
-     * left, right, and wheel buttons.
+     * An SVG mouse icon with interactive button highlighting.
      *
-     * - `left`, `right`, `wheel`: Whether each button appears "pressed"
-     * - `color`: Main mouse fill color (defaults to theme neutral color)
-     * - `accent`: Fill color of the wheel (defaults to primary theme color)
-     * - `size`: Scales the mouse height in pixels
+     * Renders a mouse shape that can visually indicate which buttons are pressed.
+     * Useful for tutorials, documentation, or UI hints showing mouse interactions.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * // Default mouse
+     * <Mouse />
+     *
+     * // Left click indicator
+     * <Mouse left />
+     *
+     * // Right click with scroll
+     * <Mouse right wheel />
+     *
+     * // Custom colors and size
+     * <Mouse left color="white" accent="orange" size={48} />
+     * ```
+     *
+     * ## Props
+     *
+     * | Prop | Description |
+     * |------|-------------|
+     * | `left` | Highlight left button as pressed |
+     * | `right` | Highlight right button as pressed |
+     * | `wheel` | Highlight scroll wheel |
+     * | `color` | Mouse body fill color (default: theme neutral) |
+     * | `accent` | Wheel highlight color (default: theme primary) |
+     * | `size` | Height in pixels (max 100px) |
      */
 ])), function (p) { return p.size && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    height: ", "px;\n  "], ["\n    height: ", "px;\n  "])), p.size); }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.neutral[100]; }, function (p) { var _a; return (_a = p.accent) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
 /**
- * `Mouse` Renders an SVG mouse shape with optional highlighting of the
- * left, right, and wheel buttons.
+ * An SVG mouse icon with interactive button highlighting.
+ *
+ * Renders a mouse shape that can visually indicate which buttons are pressed.
+ * Useful for tutorials, documentation, or UI hints showing mouse interactions.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Default mouse
+ * <Mouse />
+ *
+ * // Left click indicator
+ * <Mouse left />
+ *
+ * // Right click with scroll
+ * <Mouse right wheel />
+ *
+ * // Custom colors and size
+ * <Mouse left color="white" accent="orange" size={48} />
+ * ```
+ *
+ * ## Props
  *
- * - `left`, `right`, `wheel`: Whether each button appears "pressed"
- * - `color`: Main mouse fill color (defaults to theme neutral color)
- * - `accent`: Fill color of the wheel (defaults to primary theme color)
- * - `size`: Scales the mouse height in pixels
+ * | Prop | Description |
+ * |------|-------------|
+ * | `left` | Highlight left button as pressed |
+ * | `right` | Highlight right button as pressed |
+ * | `wheel` | Highlight scroll wheel |
+ * | `color` | Mouse body fill color (default: theme neutral) |
+ * | `accent` | Wheel highlight color (default: theme primary) |
+ * | `size` | Height in pixels (max 100px) |
  */
 var Mouse = function (_a) {
     var _b = _a.left, left = _b === void 0 ? false : _b, _c = _a.right, right = _c === void 0 ? false : _c, _d = _a.wheel, wheel = _d === void 0 ? false : _d, props = __rest(_a, ["left", "right", "wheel"]);

package/controls/Mouse/index.d.ts

@@ -1 +1,2 @@
-export * from './Mouse';
+export { Mouse } from './Mouse';
+export type { IMouseProps } from './Mouse';

package/controls/Mouse/index.js

@@ -1 +1 @@
-export * from './Mouse';
+export { Mouse } from './Mouse';

package/controls/PrimaryButton/PrimaryButton.d.ts

@@ -45,19 +45,47 @@ interface IPrimaryButtonProps {
     onClick: (e?: React.MouseEvent) => void;
 }
 /**
- * Primary buttons denote the primary action. They may have icons or not and
- * have three colors: `positive`, `negative`, and themed (the default).
- * It renders as a `<button>` element.
+ * A prominent call-to-action button for primary actions.
  *
- * The `icon` name is passed in as a property. However, the other children of
- * the button can be any React component.
+ * Renders a styled `<button>` with support for semantic colors, icons, and
+ * disabled state. Use for the main action in a form or dialog.
  *
- * The color of the button defaults to a primary theme color, unless overridden
- * with `positive`, `negative` or `color`. The button can be in a `disabled`
- * state where it cannot be clicked.
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic button
+ * <PrimaryButton onClick={handleSave}>Save</PrimaryButton>
+ *
+ * // Positive action (green)
+ * <PrimaryButton positive onClick={handleConfirm}>Confirm</PrimaryButton>
+ *
+ * // Negative action (red)
+ * <PrimaryButton negative onClick={handleDelete}>Delete</PrimaryButton>
+ *
+ * // With icon
+ * <PrimaryButton icon={SVG.Icons.Check} onClick={handleSubmit}>Submit</PrimaryButton>
+ *
+ * // Custom color
+ * <PrimaryButton color="purple" onClick={handleAction}>Custom</PrimaryButton>
+ *
+ * // Disabled state
+ * <PrimaryButton disabled onClick={handleSave}>Save</PrimaryButton>
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `positive` | Green color for confirmations/success actions |
+ * | `negative` | Red color for deletions/destructive actions |
+ * | `color` | Custom background color (CSS value) |
+ * | `icon` | SVG path or `IIconProps` for leading icon |
+ * | `disabled` | Prevents interaction |
+ * | `title` | Browser tooltip on hover |
  */
 declare const PrimaryButton: {
     ({ disabled, positive, negative, ...props }: IPrimaryButtonProps): React.JSX.Element;
     displayName: string;
 };
-export { PrimaryButton, IPrimaryButtonProps };
+export { PrimaryButton };
+export type { IPrimaryButtonProps };

package/controls/PrimaryButton/PrimaryButton.js

@@ -56,29 +56,83 @@ var PrimaryButtonStyled = styled(PrimaryButtonBase).attrs(function (p) {
     };
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n  // Size:\n  height: 46px; // was 56\n  padding-left: 12px; // was 16\n  padding-right: 12px; // was 16\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 6px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"], [" \n  // Size:\n  height: 46px; // was 56\n  padding-left: 12px; // was 16\n  padding-right: 12px; // was 16\n  min-width: 90px;\n  \n  // Font:\n  font: ", ";\n  color: ", ";\n\n  // Presentation:\n  background-color: ", ";\n  transition: \n    background-color ease-in-out ", "ms, \n    box-shadow ease-in-out ", "ms;\n  border-radius: ", "px;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n\n  // Content:\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  flex-wrap: nowrap;  \n  justify-content: center;  \n  gap: 6px;\n\n  box-shadow: ", ";\n  &:hover {\n    background-color: ", ";\n    box-shadow: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    box-shadow: none;\n  }\n  &:focus {\n    outline: solid 2px ", ";\n  }\n  \n  svg {\n    width: 24px;\n    height: 24px;    \n  }\n\n  ", "\n"
     /**
-     * Primary buttons denote the primary action. They may have icons or not and
-     * have three colors: `positive`, `negative`, and themed (the default).
-     * It renders as a `<button>` element.
+     * A prominent call-to-action button for primary actions.
      *
-     * The `icon` name is passed in as a property. However, the other children of
-     * the button can be any React component.
+     * Renders a styled `<button>` with support for semantic colors, icons, and
+     * disabled state. Use for the main action in a form or dialog.
      *
-     * The color of the button defaults to a primary theme color, unless overridden
-     * with `positive`, `negative` or `color`. The button can be in a `disabled`
-     * state where it cannot be clicked.
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic button
+     * <PrimaryButton onClick={handleSave}>Save</PrimaryButton>
+     *
+     * // Positive action (green)
+     * <PrimaryButton positive onClick={handleConfirm}>Confirm</PrimaryButton>
+     *
+     * // Negative action (red)
+     * <PrimaryButton negative onClick={handleDelete}>Delete</PrimaryButton>
+     *
+     * // With icon
+     * <PrimaryButton icon={SVG.Icons.Check} onClick={handleSubmit}>Submit</PrimaryButton>
+     *
+     * // Custom color
+     * <PrimaryButton color="purple" onClick={handleAction}>Custom</PrimaryButton>
+     *
+     * // Disabled state
+     * <PrimaryButton disabled onClick={handleSave}>Save</PrimaryButton>
+     * ```
+     *
+     * ## Props
+     *
+     * | Prop | Description |
+     * |------|-------------|
+     * | `positive` | Green color for confirmations/success actions |
+     * | `negative` | Red color for deletions/destructive actions |
+     * | `color` | Custom background color (CSS value) |
+     * | `icon` | SVG path or `IIconProps` for leading icon |
+     * | `disabled` | Prevents interaction |
+     * | `title` | Browser tooltip on hover |
      */
 ])), function (p) { return p.theme.font.labelLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.backgroundColor; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.radius.strong; }, function (p) { return p.theme.shadows.medium; }, function (p) { return darken(0.025, p.backgroundColor); }, function (p) { return p.theme.shadows.large; }, function (p) { return p.backgroundColor; }, function (p) { return p.outlineColor; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    color: ", ";\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.primary[3]); });
 /**
- * Primary buttons denote the primary action. They may have icons or not and
- * have three colors: `positive`, `negative`, and themed (the default).
- * It renders as a `<button>` element.
+ * A prominent call-to-action button for primary actions.
+ *
+ * Renders a styled `<button>` with support for semantic colors, icons, and
+ * disabled state. Use for the main action in a form or dialog.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic button
+ * <PrimaryButton onClick={handleSave}>Save</PrimaryButton>
+ *
+ * // Positive action (green)
+ * <PrimaryButton positive onClick={handleConfirm}>Confirm</PrimaryButton>
+ *
+ * // Negative action (red)
+ * <PrimaryButton negative onClick={handleDelete}>Delete</PrimaryButton>
+ *
+ * // With icon
+ * <PrimaryButton icon={SVG.Icons.Check} onClick={handleSubmit}>Submit</PrimaryButton>
+ *
+ * // Custom color
+ * <PrimaryButton color="purple" onClick={handleAction}>Custom</PrimaryButton>
+ *
+ * // Disabled state
+ * <PrimaryButton disabled onClick={handleSave}>Save</PrimaryButton>
+ * ```
  *
- * The `icon` name is passed in as a property. However, the other children of
- * the button can be any React component.
+ * ## Props
  *
- * The color of the button defaults to a primary theme color, unless overridden
- * with `positive`, `negative` or `color`. The button can be in a `disabled`
- * state where it cannot be clicked.
+ * | Prop | Description |
+ * |------|-------------|
+ * | `positive` | Green color for confirmations/success actions |
+ * | `negative` | Red color for deletions/destructive actions |
+ * | `color` | Custom background color (CSS value) |
+ * | `icon` | SVG path or `IIconProps` for leading icon |
+ * | `disabled` | Prevents interaction |
+ * | `title` | Browser tooltip on hover |
  */
 var PrimaryButton = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.positive, positive = _c === void 0 ? false : _c, _d = _a.negative, negative = _d === void 0 ? false : _d, props = __rest(_a, ["disabled", "positive", "negative"]);

package/controls/PrimaryButton/index.d.ts

@@ -1 +1,2 @@
-export * from './PrimaryButton';
+export { PrimaryButton } from './PrimaryButton';
+export type { IPrimaryButtonProps } from './PrimaryButton';

package/controls/PrimaryButton/index.js

@@ -1 +1 @@
-export * from './PrimaryButton';
+export { PrimaryButton } from './PrimaryButton';

package/controls/Progress/Progress.d.ts

@@ -36,23 +36,45 @@ interface IProgressProps {
     width?: string;
 }
 /**
- * A visual progress bar component that shows completion of a task, range, or
- * metric.
+ * A horizontal progress bar showing completion percentage.
  *
- * - Automatically clamps `value` between `0` and `100`.
- * - Fully responsive and stretches to available width.
- * - Animated bar fill when `value` changes.
- * - Optionally displays percentage value text.
+ * Displays an animated fill representing a value from 0-100. Values outside
+ * this range are automatically clamped. Stretches to fill available width.
  *
- * The bar always stretches to fill all horizontal space available to it.
+ * ## Usage
  *
- * @example
  * ```tsx
- * <Progress value={45} numbered color="#00c2a8" thickness={8} />
+ * // Basic progress
+ * <Progress value={45} />
+ *
+ * // With percentage label
+ * <Progress value={75} numbered />
+ *
+ * // Custom color and thickness
+ * <Progress value={60} color="#00c2a8" thickness={8} />
+ *
+ * // Fixed width with padding
+ * <Progress value={30} width="200px" padded />
  * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `value` | Percentage complete (0-100, clamped) |
+ * | `numbered` | Show percentage text centered on bar |
+ * | `thickness` | Bar height in pixels (default: 5) |
+ * | `color` | Custom fill color (default: theme primary) |
+ * | `width` | Fixed width (CSS value); otherwise fills container |
+ * | `padded` | Add 10px margin around bar |
+ *
+ * ## Accessibility
+ *
+ * Includes `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
  */
 declare const Progress: {
     ({ thickness, numbered, padded, ...props }: IProgressProps): React.JSX.Element;
     displayName: string;
 };
-export { Progress, IProgressProps };
+export { Progress };
+export type { IProgressProps };