@longline/aqua-ui 1.0.302 → 1.0.304

package/controls/Progress/Progress.js

@@ -48,37 +48,79 @@ var FillInner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplat
 var Value = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 8px;\n  line-height: 0;\n  color: ", ";\n  text-shadow: 0px 0px 4px #000;  \n"], ["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  font-size: 8px;\n  line-height: 0;\n  color: ", ";\n  text-shadow: 0px 0px 4px #000;  \n"])), function (p) { return p.theme.colors.neutral[100]; });
 var ProgressStyled = styled(ProgressBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject([" \n  position: relative; \n  box-sizing: border-box;\n  height: ", "px;\n  min-width: 100px;\n  ", "\n  margin: 4px 0 4px 0;\n\n  ", "\n  background-color: ", ";\n  border-radius: ", "px;\n\n  ", " {\n    background-color: ", ";\n  }\n"], [" \n  position: relative; \n  box-sizing: border-box;\n  height: ", "px;\n  min-width: 100px;\n  ", "\n  margin: 4px 0 4px 0;\n\n  ", "\n  background-color: ", ";\n  border-radius: ", "px;\n\n  ", " {\n    background-color: ", ";\n  }\n"
     /**
-     * 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`.
      */
 ])), function (p) { return p.thickness; }, function (p) { return p.width && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), p.width); }, function (p) { return p.padded && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["margin: 10px;"], ["margin: 10px;"]))); }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.thickness / 2; }, FillInner, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
 /**
- * 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`.
  */
 var Progress = function (_a) {
     var _b = _a.thickness, thickness = _b === void 0 ? 5 : _b, _c = _a.numbered, numbered = _c === void 0 ? false : _c, _d = _a.padded, padded = _d === void 0 ? false : _d, props = __rest(_a, ["thickness", "numbered", "padded"]);

package/controls/Progress/index.d.ts

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

package/controls/Progress/index.js

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

package/controls/SecondaryButton/SecondaryButton.d.ts

@@ -44,18 +44,44 @@ interface ISecondaryButtonProps {
     onClick: (e?: React.MouseEvent) => void;
 }
 /**
- * The `SecondaryButton` is a small button that holds only an icon. It has no
- * other content. It renders as a `<button>` element. Although the button
- * shows only an icon, its `title` attribute is mandatory, and used as
- * a `aria-label`, so screenreaders can understand the button's purpose.
+ * A compact icon-only button for secondary actions.
  *
- * The color of the button defaults to a neutral theme color, unless overridden
- * with `positive`, `negative` or `color`.
+ * Renders a 32×32px `<button>` containing only an icon. The `title` prop is
+ * required and used as `aria-label` for screen reader accessibility.
  *
- * A `disabled` button cannot be clicked at all.
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic icon button
+ * <SecondaryButton icon={SVG.Icons.Close} title="Close" onClick={handleClose} />
+ *
+ * // Positive action (green)
+ * <SecondaryButton positive icon={SVG.Icons.Check} title="Approve" onClick={handleApprove} />
+ *
+ * // Negative action (red)
+ * <SecondaryButton negative icon={SVG.Icons.Trash} title="Delete" onClick={handleDelete} />
+ *
+ * // Custom color
+ * <SecondaryButton color="purple" icon={SVG.Icons.Star} title="Favorite" onClick={handleFavorite} />
+ *
+ * // Disabled state
+ * <SecondaryButton disabled icon={SVG.Icons.Edit} title="Edit" onClick={handleEdit} />
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `icon` | SVG path or `IIconProps` (required) |
+ * | `title` | Tooltip and aria-label (required) |
+ * | `positive` | Green color for confirmations |
+ * | `negative` | Red color for destructive actions |
+ * | `color` | Custom background color (CSS value) |
+ * | `disabled` | Prevents interaction |
  */
 declare const SecondaryButton: {
     ({ disabled, positive, negative, ...props }: ISecondaryButtonProps): React.JSX.Element;
     displayName: string;
 };
-export { SecondaryButton, ISecondaryButtonProps };
+export { SecondaryButton };
+export type { ISecondaryButtonProps };

package/controls/SecondaryButton/SecondaryButton.js

@@ -53,27 +53,77 @@ var SecondaryButtonStyled = styled(SecondaryButtonBase).attrs(function (p) {
     };
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\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  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & removes dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"], [" \n  // Size:\n  height: 32px;\n  width: 32px;\n\n  // Presentation:\n  background-color: ", ";\n  // (Note that there is no hover state.)\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  box-shadow: ", ";\n\n  // Content alignment:\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  white-space: nowrap;\n\n  &:hover {\n    box-shadow: ", ";\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // Button changes background & removes dropshadow when pressed:\n  &:active {\n    // Button background stays the same in case of color buttons:\n    ", "\n    box-shadow: none;\n  }\n\n  svg {\n    width: 13px;\n    height: 13px;\n  }  \n\n  ", "\n"
     /**
-     * The `SecondaryButton` is a small button that holds only an icon. It has no
-     * other content. It renders as a `<button>` element. Although the button
-     * shows only an icon, its `title` attribute is mandatory, and used as
-     * a `aria-label`, so screenreaders can understand the button's purpose.
+     * A compact icon-only button for secondary actions.
      *
-     * The color of the button defaults to a neutral theme color, unless overridden
-     * with `positive`, `negative` or `color`.
+     * Renders a 32×32px `<button>` containing only an icon. The `title` prop is
+     * required and used as `aria-label` for screen reader accessibility.
      *
-     * A `disabled` button cannot be clicked at all.
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic icon button
+     * <SecondaryButton icon={SVG.Icons.Close} title="Close" onClick={handleClose} />
+     *
+     * // Positive action (green)
+     * <SecondaryButton positive icon={SVG.Icons.Check} title="Approve" onClick={handleApprove} />
+     *
+     * // Negative action (red)
+     * <SecondaryButton negative icon={SVG.Icons.Trash} title="Delete" onClick={handleDelete} />
+     *
+     * // Custom color
+     * <SecondaryButton color="purple" icon={SVG.Icons.Star} title="Favorite" onClick={handleFavorite} />
+     *
+     * // Disabled state
+     * <SecondaryButton disabled icon={SVG.Icons.Edit} title="Edit" onClick={handleEdit} />
+     * ```
+     *
+     * ## Props
+     *
+     * | Prop | Description |
+     * |------|-------------|
+     * | `icon` | SVG path or `IIconProps` (required) |
+     * | `title` | Tooltip and aria-label (required) |
+     * | `positive` | Green color for confirmations |
+     * | `negative` | Red color for destructive actions |
+     * | `color` | Custom background color (CSS value) |
+     * | `disabled` | Prevents interaction |
      */
 ])), 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.normal; }, function (p) { return p.theme.shadows.small; }, function (p) { return p.theme.shadows.medium; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return !p.positive && !p.negative && !p.color && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["background-color: ", ";"], ["background-color: ", ";"])), p.theme.colors.neutral[10]); }, function (p) { return p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "], ["\n    cursor: auto;\n    pointer-events: none;\n    box-shadow: none;\n    svg {\n      fill: ", ";\n    }\n  "])), p.theme.colors.primary[3]); });
 /**
- * The `SecondaryButton` is a small button that holds only an icon. It has no
- * other content. It renders as a `<button>` element. Although the button
- * shows only an icon, its `title` attribute is mandatory, and used as
- * a `aria-label`, so screenreaders can understand the button's purpose.
+ * A compact icon-only button for secondary actions.
+ *
+ * Renders a 32×32px `<button>` containing only an icon. The `title` prop is
+ * required and used as `aria-label` for screen reader accessibility.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic icon button
+ * <SecondaryButton icon={SVG.Icons.Close} title="Close" onClick={handleClose} />
+ *
+ * // Positive action (green)
+ * <SecondaryButton positive icon={SVG.Icons.Check} title="Approve" onClick={handleApprove} />
+ *
+ * // Negative action (red)
+ * <SecondaryButton negative icon={SVG.Icons.Trash} title="Delete" onClick={handleDelete} />
+ *
+ * // Custom color
+ * <SecondaryButton color="purple" icon={SVG.Icons.Star} title="Favorite" onClick={handleFavorite} />
+ *
+ * // Disabled state
+ * <SecondaryButton disabled icon={SVG.Icons.Edit} title="Edit" onClick={handleEdit} />
+ * ```
  *
- * The color of the button defaults to a neutral theme color, unless overridden
- * with `positive`, `negative` or `color`.
+ * ## Props
  *
- * A `disabled` button cannot be clicked at all.
+ * | Prop | Description |
+ * |------|-------------|
+ * | `icon` | SVG path or `IIconProps` (required) |
+ * | `title` | Tooltip and aria-label (required) |
+ * | `positive` | Green color for confirmations |
+ * | `negative` | Red color for destructive actions |
+ * | `color` | Custom background color (CSS value) |
+ * | `disabled` | Prevents interaction |
  */
 var SecondaryButton = 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/SecondaryButton/index.d.ts

@@ -1 +1,2 @@
 export { SecondaryButton } from './SecondaryButton';
+export type { ISecondaryButtonProps } from './SecondaryButton';

package/controls/SpeechRecognizer/SpeechRecognizer.d.ts

@@ -1,3 +1,33 @@
 import * as React from 'react';
-declare const SpeechRecognizer: () => React.JSX.Element;
+/**
+ * A floating action button that enables speech-to-text input.
+ *
+ * Uses the browser's Web Speech API to transcribe spoken words into the
+ * currently focused input, textarea, or contentEditable element. Automatically
+ * hides if the browser doesn't support speech recognition.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Add anywhere in your app - it tracks focused inputs automatically
+ * <SpeechRecognizer />
+ * ```
+ *
+ * ## Behavior
+ *
+ * - Click to start/stop listening
+ * - Transcribed text inserts at cursor position in focused input
+ * - Works with `<input>`, `<textarea>`, and TipTap editors
+ * - Shows "Listening" state while active
+ * - Returns `null` if browser doesn't support Speech Recognition API
+ *
+ * ## Browser Support
+ *
+ * Requires `SpeechRecognition` or `webkitSpeechRecognition` API.
+ * Supported in Chrome, Edge, and Safari. Not supported in Firefox.
+ */
+declare const SpeechRecognizer: {
+    (): React.JSX.Element;
+    displayName: string;
+};
 export { SpeechRecognizer };

package/controls/SpeechRecognizer/SpeechRecognizer.js

@@ -3,6 +3,33 @@ import { Fab } from '../Fab';
 import { SVG } from '../../svg';
 import { EditorRegistry } from './EditorRegistry';
 var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+/**
+ * A floating action button that enables speech-to-text input.
+ *
+ * Uses the browser's Web Speech API to transcribe spoken words into the
+ * currently focused input, textarea, or contentEditable element. Automatically
+ * hides if the browser doesn't support speech recognition.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Add anywhere in your app - it tracks focused inputs automatically
+ * <SpeechRecognizer />
+ * ```
+ *
+ * ## Behavior
+ *
+ * - Click to start/stop listening
+ * - Transcribed text inserts at cursor position in focused input
+ * - Works with `<input>`, `<textarea>`, and TipTap editors
+ * - Shows "Listening" state while active
+ * - Returns `null` if browser doesn't support Speech Recognition API
+ *
+ * ## Browser Support
+ *
+ * Requires `SpeechRecognition` or `webkitSpeechRecognition` API.
+ * Supported in Chrome, Edge, and Safari. Not supported in Firefox.
+ */
 var SpeechRecognizer = function () {
     var _a = React.useState(false), listening = _a[0], setListening = _a[1];
     var recognitionRef = React.useRef(null);
@@ -24,7 +51,7 @@ var SpeechRecognizer = function () {
             .filter(function (r) { return !r.isFinal && r.length > 0; })
             .reduce(function (acc, r) { return acc + r[0].transcript; }, "");
         if (focusedElementRef.current instanceof HTMLDivElement) {
-            if (initialRef.current == false) {
+            if (initialRef.current === false) {
                 EditorRegistry.getEditor(focusedElementRef.current).commands.undo();
             }
             EditorRegistry.getEditor(focusedElementRef.current).commands.insertContent(final + interim);
@@ -115,4 +142,5 @@ var SpeechRecognizer = function () {
     }
     return (React.createElement(Fab, { icon: SVG.Icons.Microphone, active: listening, nofocus: true, onClick: handleClick }, listening ? 'Listening' : 'Listen'));
 };
+SpeechRecognizer.displayName = "SpeechRecognizer";
 export { SpeechRecognizer };

package/controls/SpeechRecognizer/index.d.ts

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

package/controls/SpeechRecognizer/index.js

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

package/controls/TabBar/Tab.d.ts

@@ -17,6 +17,7 @@ interface ITabProps {
      */
     onClick?: () => void;
     /**
+     * @ignore
      * If true, applies ghost state to `Tab`.
      * @default false
      */
@@ -36,5 +37,34 @@ interface ITabProps {
      */
     size?: 'small' | 'large';
 }
+/**
+ * An individual tab within a `TabBar`.
+ *
+ * Tabs display text content and optionally a badge. The parent `TabBar`
+ * manages the active state and click handling automatically.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <TabBar active={0} onChange={setActive}>
+ *   <TabBar.Tab>First Tab</TabBar.Tab>
+ *   <TabBar.Tab badge={5}>With Badge</TabBar.Tab>
+ *   <TabBar.Tab onClick={() => console.log('clicked')}>With Handler</TabBar.Tab>
+ * </TabBar>
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `children` | Tab label content |
+ * | `badge` | Optional badge (e.g., notification count) |
+ * | `onClick` | Additional click handler (called with `TabBar.onChange`) |
+ * | `tabWidth` | Fixed width in pixels (usually set on parent) |
+ * | `size` | Font size: "small" or "large" (inherited from parent) |
+ * | `ghost` | Skeleton loading state (inherited from parent) |
+ * | `disabled` | Prevent interaction (inherited from parent) |
+ */
 declare const Tab: React.ForwardRefExoticComponent<ITabProps & React.RefAttributes<HTMLDivElement>>;
-export { Tab, ITabProps };
+export { Tab };
+export type { ITabProps };

package/controls/TabBar/Tab.js

@@ -40,7 +40,64 @@ var TabBase = React.forwardRef(function (props, ref) {
 });
 var TabStyled = styled(TabBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: ", "px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n\n  // Ghost and disabled cannot be clicked:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Ghost state:\n  ", "  \n"], ["\n  position: relative;\n  padding: 0 20px;\n\n  font: ", ";\n  box-sizing: border-box;\n  ", "\n  height: ", "px;\n  z-index: 1;\n  cursor: pointer;\n  color: ", ";\n  transition: color ", "ms ease-in-out;\n\n  /* User cannot select header text.\n   * This prevents accidental selection when clicking the tab.\n   */\n  user-select: none;  \n\n  ", "  \n  &:hover {\n    color: ", ";\n  }\n\n  // Ghost and disabled cannot be clicked:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Ghost state:\n  ", "  \n"])), function (p) { return p.size === 'small' ? p.theme.font.labelSmall : p.theme.font.labelLarge; }, function (p) { return p.tabWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["min-width: ", "px;"], ["min-width: ", "px;"])), p.tabWidth); }, function (p) { return p.size === 'small' ? 30 : 40; }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return (p.ghost || p.disabled) && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    pointer-events: none;\n  "], ["\n    pointer-events: none;\n  "]))); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "], ["\n    color: ", ";\n    &:hover {\n      color: ", ";\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.neutral[50]; }); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    & > *:not(:first-child) {\n      visibility: hidden;\n    }  \n  "], ["\n    & > *:not(:first-child) {\n      visibility: hidden;\n    }  \n  "]))); });
 var Content = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n  white-space: nowrap;\n  height: 100%;\n"])));
-var Badge = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: ", "px;\n  padding: 0 6px;\n  font: ", ";\n"], ["\n  background: ", ";\n  border-radius: ", "px;\n  padding: 0 6px;\n  font: ", ";\n"])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.labelSmall; });
+var Badge = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: ", "px;\n  padding: 0 6px;\n  font: ", ";\n"], ["\n  background: ", ";\n  border-radius: ", "px;\n  padding: 0 6px;\n  font: ", ";\n"
+    /**
+     * An individual tab within a `TabBar`.
+     *
+     * Tabs display text content and optionally a badge. The parent `TabBar`
+     * manages the active state and click handling automatically.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * <TabBar active={0} onChange={setActive}>
+     *   <TabBar.Tab>First Tab</TabBar.Tab>
+     *   <TabBar.Tab badge={5}>With Badge</TabBar.Tab>
+     *   <TabBar.Tab onClick={() => console.log('clicked')}>With Handler</TabBar.Tab>
+     * </TabBar>
+     * ```
+     *
+     * ## Props
+     *
+     * | Prop | Description |
+     * |------|-------------|
+     * | `children` | Tab label content |
+     * | `badge` | Optional badge (e.g., notification count) |
+     * | `onClick` | Additional click handler (called with `TabBar.onChange`) |
+     * | `tabWidth` | Fixed width in pixels (usually set on parent) |
+     * | `size` | Font size: "small" or "large" (inherited from parent) |
+     * | `ghost` | Skeleton loading state (inherited from parent) |
+     * | `disabled` | Prevent interaction (inherited from parent) |
+     */
+])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.labelSmall; });
+/**
+ * An individual tab within a `TabBar`.
+ *
+ * Tabs display text content and optionally a badge. The parent `TabBar`
+ * manages the active state and click handling automatically.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * <TabBar active={0} onChange={setActive}>
+ *   <TabBar.Tab>First Tab</TabBar.Tab>
+ *   <TabBar.Tab badge={5}>With Badge</TabBar.Tab>
+ *   <TabBar.Tab onClick={() => console.log('clicked')}>With Handler</TabBar.Tab>
+ * </TabBar>
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `children` | Tab label content |
+ * | `badge` | Optional badge (e.g., notification count) |
+ * | `onClick` | Additional click handler (called with `TabBar.onChange`) |
+ * | `tabWidth` | Fixed width in pixels (usually set on parent) |
+ * | `size` | Font size: "small" or "large" (inherited from parent) |
+ * | `ghost` | Skeleton loading state (inherited from parent) |
+ * | `disabled` | Prevent interaction (inherited from parent) |
+ */
 var Tab = React.forwardRef(function (_a, ref) {
     var _b = _a.ghost, ghost = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? 'large' : _d, props = __rest(_a, ["ghost", "disabled", "size"]);
     return React.createElement(TabStyled, __assign({ ref: ref, ghost: ghost, disabled: disabled, size: size }, props));

package/controls/TabBar/TabBar.d.ts

@@ -55,15 +55,53 @@ interface ITabBarProps {
     line?: boolean;
 }
 /**
- * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
- * with an underliner under the active child. The `onClick(idx)` event is fired
- * when a tab is clicked.
+ * A horizontal tab navigation bar with animated underline indicator.
  *
- * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
+ * Displays `TabBar.Tab` children with a sliding underline beneath the active tab.
+ * Supports drag-scrolling when tabs overflow the container width.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic tab bar
+ * <TabBar active={activeTab} onChange={setActiveTab}>
+ *   <TabBar.Tab>Overview</TabBar.Tab>
+ *   <TabBar.Tab>Details</TabBar.Tab>
+ *   <TabBar.Tab>Settings</TabBar.Tab>
+ * </TabBar>
+ *
+ * // With badges and fixed width
+ * <TabBar active={0} tabWidth={120}>
+ *   <TabBar.Tab badge={5}>Inbox</TabBar.Tab>
+ *   <TabBar.Tab>Sent</TabBar.Tab>
+ * </TabBar>
+ *
+ * // Small size, centered
+ * <TabBar size="small" align="center">
+ *   <TabBar.Tab>Tab 1</TabBar.Tab>
+ *   <TabBar.Tab>Tab 2</TabBar.Tab>
+ * </TabBar>
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `active` | Zero-based index of active tab (default: 0) |
+ * | `onChange` | Callback when tab changes: `(index) => void` |
+ * | `tabWidth` | Fixed tab width in pixels (default: fluid) |
+ * | `align` | Tab alignment: "left", "center", "right" |
+ * | `size` | Font size: "small" or "large" (default) |
+ * | `ghost` | Skeleton loading state |
+ * | `disabled` | Prevent tab interactions |
+ * | `line` | Show bottom border |
+ *
+ * For tab content panels, use the `Tabs` container instead.
  */
 declare const TabBar: {
     ({ active, ghost, disabled, align, size, ...props }: ITabBarProps): React.JSX.Element;
     Tab: React.ForwardRefExoticComponent<import("./Tab").ITabProps & React.RefAttributes<HTMLDivElement>>;
     displayName: string;
 };
-export { TabBar, ITabBarProps };
+export { TabBar };
+export type { ITabBarProps };

package/controls/TabBar/TabBar.js

@@ -213,19 +213,93 @@ var TabBarBase = function (props) {
 var Slider = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Position & size:\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: auto !important;\n  min-width: 100%;\n\n  // Content:\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  flex-wrap: nowrap;\n  align-items: center;\n"], ["\n  // Position & size:\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: auto !important;\n  min-width: 100%;\n\n  // Content:\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: start;\n  flex-wrap: nowrap;\n  align-items: center;\n"])));
 var TabBarStyled = styled(TabBarBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: block;\n  height: ", "px;\n  min-height: ", "px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  ", " {\n    border-color: ", ";\n    ", "\n    ", "\n    height: ", "px;\n    border-bottom: solid 1px ", ";    \n  }\n"], ["\n  position: relative;\n  display: block;\n  height: ", "px;\n  min-height: ", "px;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  ", " {\n    border-color: ", ";\n    ", "\n    ", "\n    height: ", "px;\n    border-bottom: solid 1px ", ";    \n  }\n"
     /**
-     * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
-     * with an underliner under the active child. The `onClick(idx)` event is fired
-     * when a tab is clicked.
+     * A horizontal tab navigation bar with animated underline indicator.
      *
-     * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
+     * Displays `TabBar.Tab` children with a sliding underline beneath the active tab.
+     * Supports drag-scrolling when tabs overflow the container width.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic tab bar
+     * <TabBar active={activeTab} onChange={setActiveTab}>
+     *   <TabBar.Tab>Overview</TabBar.Tab>
+     *   <TabBar.Tab>Details</TabBar.Tab>
+     *   <TabBar.Tab>Settings</TabBar.Tab>
+     * </TabBar>
+     *
+     * // With badges and fixed width
+     * <TabBar active={0} tabWidth={120}>
+     *   <TabBar.Tab badge={5}>Inbox</TabBar.Tab>
+     *   <TabBar.Tab>Sent</TabBar.Tab>
+     * </TabBar>
+     *
+     * // Small size, centered
+     * <TabBar size="small" align="center">
+     *   <TabBar.Tab>Tab 1</TabBar.Tab>
+     *   <TabBar.Tab>Tab 2</TabBar.Tab>
+     * </TabBar>
+     * ```
+     *
+     * ## Props
+     *
+     * | Prop | Description |
+     * |------|-------------|
+     * | `active` | Zero-based index of active tab (default: 0) |
+     * | `onChange` | Callback when tab changes: `(index) => void` |
+     * | `tabWidth` | Fixed tab width in pixels (default: fluid) |
+     * | `align` | Tab alignment: "left", "center", "right" |
+     * | `size` | Font size: "small" or "large" (default) |
+     * | `ghost` | Skeleton loading state |
+     * | `disabled` | Prevent tab interactions |
+     * | `line` | Show bottom border |
+     *
+     * For tab content panels, use the `Tabs` container instead.
      */
 ])), function (p) { return p.size === 'small' ? 30 : 40; }, function (p) { return p.size === 'small' ? 30 : 40; }, Slider, function (p) { return (p.disabled || p.ghost) ? p.theme.colors.neutral[50] : p.theme.colors.neutral[80]; }, function (p) { return p.align === 'right' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["justify-content: end;"], ["justify-content: end;"]))); }, function (p) { return p.align === 'center' && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["justify-content: center;"], ["justify-content: center;"]))); }, function (p) { return p.size === 'small' ? 30 : 40; }, function (p) { return p.line ? p.theme.colors.neutral[80] : "transparent"; });
 /**
- * A `TabBar` presents an array of `TabBar.Tab` children in a horizontal bar,
- * with an underliner under the active child. The `onClick(idx)` event is fired
- * when a tab is clicked.
+ * A horizontal tab navigation bar with animated underline indicator.
+ *
+ * Displays `TabBar.Tab` children with a sliding underline beneath the active tab.
+ * Supports drag-scrolling when tabs overflow the container width.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic tab bar
+ * <TabBar active={activeTab} onChange={setActiveTab}>
+ *   <TabBar.Tab>Overview</TabBar.Tab>
+ *   <TabBar.Tab>Details</TabBar.Tab>
+ *   <TabBar.Tab>Settings</TabBar.Tab>
+ * </TabBar>
+ *
+ * // With badges and fixed width
+ * <TabBar active={0} tabWidth={120}>
+ *   <TabBar.Tab badge={5}>Inbox</TabBar.Tab>
+ *   <TabBar.Tab>Sent</TabBar.Tab>
+ * </TabBar>
+ *
+ * // Small size, centered
+ * <TabBar size="small" align="center">
+ *   <TabBar.Tab>Tab 1</TabBar.Tab>
+ *   <TabBar.Tab>Tab 2</TabBar.Tab>
+ * </TabBar>
+ * ```
+ *
+ * ## Props
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `active` | Zero-based index of active tab (default: 0) |
+ * | `onChange` | Callback when tab changes: `(index) => void` |
+ * | `tabWidth` | Fixed tab width in pixels (default: fluid) |
+ * | `align` | Tab alignment: "left", "center", "right" |
+ * | `size` | Font size: "small" or "large" (default) |
+ * | `ghost` | Skeleton loading state |
+ * | `disabled` | Prevent tab interactions |
+ * | `line` | Show bottom border |
  *
- * This is just a `TabBar`; if you need tabs and panes, use the `Tab` container.
+ * For tab content panels, use the `Tabs` container instead.
  */
 var TabBar = function (_a) {
     var _b = _a.active, active = _b === void 0 ? 0 : _b, _c = _a.ghost, ghost = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'left' : _e, _f = _a.size, size = _f === void 0 ? 'large' : _f, props = __rest(_a, ["active", "ghost", "disabled", "align", "size"]);

package/controls/TabBar/index.d.ts

@@ -1 +1,3 @@
-export * from './TabBar';
+export { TabBar } from './TabBar';
+export type { ITabBarProps } from './TabBar';
+export type { ITabProps } from './Tab';

package/controls/TabBar/index.js

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