@longline/aqua-ui 1.0.302 → 1.0.304

package/controls/Histogram/Histogram.js

@@ -30,27 +30,15 @@ import { HistogramNoData } from './HistogramNoData';
 import { HistogramBar } from './HistogramBar';
 import { HistogramTick } from './HistogramTick';
 import { DefaultHistogramAppearance } from './HistogramAppearance';
-/**
- * @example
- * <Histogram
- *   tickStyle='tick'
- *   hoverValues
- *   onClick={(idx: number) => console.log(`Bin ${idx} clicked.`)}
- *   bins: {[
- *     { count: 50, binEnd: 1000 },
- *     { count: 70, binEnd: 2000 },
- *   ]}/>
- * @todo Consider using children for bins.
- */
 var HistogramBase = function (p) {
     // Abort if there are no bins.
-    if (p.bins.length == 0)
+    if (p.bins.length === 0)
         return React.createElement(HistogramNoData, null, p.nodata);
     // Find tallest bar. This is used to calculate the percentage height
     // of each bar.
     var maxHeight = Math.max.apply(Math, p.bins.map(function (b) { return b.count; }));
     // Abort if bins are all empty.
-    if (maxHeight == 0)
+    if (maxHeight === 0)
         return React.createElement(HistogramNoData, null, p.nodata);
     return (React.createElement("div", { className: p.className },
         React.createElement(ChartArea, null,
@@ -58,7 +46,7 @@ var HistogramBase = function (p) {
                 React.createElement(BarArea, null, p.bins.map(function (bin, idx) {
                     return React.createElement(HistogramBar, { key: idx, values: p.values, value: bin.count, label: bin.name, height: 100 * bin.count / maxHeight, onClick: p.onClick ? function () { return p.onClick(idx); } : null, loading: p.loading, appearance: p.appearance });
                 })))),
-        p.tickStyle != 'none' && React.createElement(AxisArea, null,
+        p.tickStyle !== 'none' && React.createElement(AxisArea, null,
             React.createElement(Indent, null,
                 p.bins.map(function (bin, idx) {
                     return React.createElement(HistogramTick, { key: idx, showValue: p.tickStyle === 'value', left: 100 * idx / p.bins.length, value: bin.binStart });
@@ -74,19 +62,94 @@ var BarArea = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateO
 var Indent = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject([""], [""])));
 var HistogramStyled = styled(HistogramBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  // Chart elements are stacked vertically:\n  display:     flex;\n  flex-direction: column;\n  // Histogram fills available space:\n  width:       100%;\n  height:      100%;\n  box-sizing:  border-box;\n\n  ", " {\n    position:  relative;\n    flex:      1;\n  }\n  ", " {\n    position:  relative;\n    flex:      0;\n    height:    22px;\n    min-height: 22px;\n    box-sizing: border-box;\n  }\n  ", " {\n    flex:      0;\n    height:    20px;\n    min-height: 20px;\n    font-size: 10px;\n    color:     #fff;\n    user-select: none;    \n    display: flex;\n    flex-direction: column;\n    justify-content: end;\n    align-items: center;\n  }\n  ", " {\n    // BarArea takes up an absolute position:\n    position:  absolute;\n    width:     100%;\n    height:    100%;\n    // Bars are placed using flexbox:\n    display:   flex;\n    flex-direction: row;  \n    justify-content: center;\n    align-items: flex-end;\n    overflow-y: hidden;\n    overflow-x: hidden;\n  }\n  ", " {\n    position:  absolute;\n    top:       0;\n    bottom:    0;\n    left:      5%;\n    right:     5%;\n  }\n"], ["\n  // Chart elements are stacked vertically:\n  display:     flex;\n  flex-direction: column;\n  // Histogram fills available space:\n  width:       100%;\n  height:      100%;\n  box-sizing:  border-box;\n\n  ", " {\n    position:  relative;\n    flex:      1;\n  }\n  ", " {\n    position:  relative;\n    flex:      0;\n    height:    22px;\n    min-height: 22px;\n    box-sizing: border-box;\n  }\n  ", " {\n    flex:      0;\n    height:    20px;\n    min-height: 20px;\n    font-size: 10px;\n    color:     #fff;\n    user-select: none;    \n    display: flex;\n    flex-direction: column;\n    justify-content: end;\n    align-items: center;\n  }\n  ", " {\n    // BarArea takes up an absolute position:\n    position:  absolute;\n    width:     100%;\n    height:    100%;\n    // Bars are placed using flexbox:\n    display:   flex;\n    flex-direction: row;  \n    justify-content: center;\n    align-items: flex-end;\n    overflow-y: hidden;\n    overflow-x: hidden;\n  }\n  ", " {\n    position:  absolute;\n    top:       0;\n    bottom:    0;\n    left:      5%;\n    right:     5%;\n  }\n"
     /**
-     * A `Histogram` visualizes a number of bins, each of which has a `name`,
-     * a `count` (number of items in the bin), and a `binStart` and `binEnd` for
-     * the values interval contained within the bin.
+     * A bar chart visualization for displaying binned data distributions.
+     *
+     * Renders vertical bars representing the count/frequency of items in each bin.
+     * Supports interactive features like hover values, click handlers, and axis ticks.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * const bins = [
+     *   { name: '0-100', count: 50, binStart: 0, binEnd: 100 },
+     *   { name: '100-200', count: 70, binStart: 100, binEnd: 200 },
+     *   { name: '200-300', count: 30, binStart: 200, binEnd: 300 },
+     * ];
+     *
+     * // Basic histogram
+     * <Histogram bins={bins} />
+     *
+     * // With axis ticks and values
+     * <Histogram bins={bins} tickStyle="value" values="hover" />
+     *
+     * // With click handler
+     * <Histogram
+     *   bins={bins}
+     *   onClick={(idx) => console.log(`Bin ${idx} clicked`)}
+     * />
+     * ```
+     *
+     * ## Display Options
+     *
+     * | Prop | Values | Description |
+     * |------|--------|-------------|
+     * | `tickStyle` | `none`, `tick`, `value` | Axis tick display mode |
+     * | `values` | `hide`, `show`, `hover` | Bar value label visibility |
+     * | `loading` | `boolean` | Shows gray placeholder bars |
+     *
+     * ## Customization
+     *
+     * Use the `appearance` prop with `IHistogramAppearance` to customize colors,
+     * gaps, opacity, and border radius. `DefaultHistogramAppearance` and
+     * `BlueHistogramAppearance` presets are available.
      */
 ])), ChartArea, AxisArea, UnitArea, BarArea, Indent);
 /**
- * A `Histogram` visualizes a number of bins, each of which has a `name`,
- * a `count` (number of items in the bin), and a `binStart` and `binEnd` for
- * the values interval contained within the bin.
+ * A bar chart visualization for displaying binned data distributions.
+ *
+ * Renders vertical bars representing the count/frequency of items in each bin.
+ * Supports interactive features like hover values, click handlers, and axis ticks.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * const bins = [
+ *   { name: '0-100', count: 50, binStart: 0, binEnd: 100 },
+ *   { name: '100-200', count: 70, binStart: 100, binEnd: 200 },
+ *   { name: '200-300', count: 30, binStart: 200, binEnd: 300 },
+ * ];
+ *
+ * // Basic histogram
+ * <Histogram bins={bins} />
+ *
+ * // With axis ticks and values
+ * <Histogram bins={bins} tickStyle="value" values="hover" />
+ *
+ * // With click handler
+ * <Histogram
+ *   bins={bins}
+ *   onClick={(idx) => console.log(`Bin ${idx} clicked`)}
+ * />
+ * ```
+ *
+ * ## Display Options
+ *
+ * | Prop | Values | Description |
+ * |------|--------|-------------|
+ * | `tickStyle` | `none`, `tick`, `value` | Axis tick display mode |
+ * | `values` | `hide`, `show`, `hover` | Bar value label visibility |
+ * | `loading` | `boolean` | Shows gray placeholder bars |
+ *
+ * ## Customization
+ *
+ * Use the `appearance` prop with `IHistogramAppearance` to customize colors,
+ * gaps, opacity, and border radius. `DefaultHistogramAppearance` and
+ * `BlueHistogramAppearance` presets are available.
  */
 var Histogram = function (_a) {
     var _b = _a.appearance, appearance = _b === void 0 ? DefaultHistogramAppearance : _b, _c = _a.values, values = _c === void 0 ? 'show' : _c, _d = _a.tickStyle, tickStyle = _d === void 0 ? 'none' : _d, props = __rest(_a, ["appearance", "values", "tickStyle"]);
     return React.createElement(HistogramStyled, __assign({ appearance: appearance, values: values, tickStyle: tickStyle }, props));
 };
+Histogram.displayName = "Histogram";
 export { Histogram };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/controls/Histogram/HistogramAppearance.d.ts

@@ -19,4 +19,5 @@ interface IHistogramAppearance {
 }
 declare const DefaultHistogramAppearance: IHistogramAppearance;
 declare const BlueHistogramAppearance: IHistogramAppearance;
-export { IHistogramAppearance, DefaultHistogramAppearance, BlueHistogramAppearance };
+export { DefaultHistogramAppearance, BlueHistogramAppearance };
+export type { IHistogramAppearance };

package/controls/Histogram/IHistogramBin.d.ts

@@ -18,4 +18,4 @@ interface IHistogramBin {
      */
     binEnd?: number;
 }
-export { IHistogramBin };
+export type { IHistogramBin };

package/controls/Histogram/index.d.ts

@@ -1,3 +1,5 @@
-export * from './Histogram';
-export * from './IHistogramBin';
-export * from './HistogramAppearance';
+export { Histogram } from './Histogram';
+export type { IHistogramProps, TValueStyle, TTickStyle } from './Histogram';
+export type { IHistogramBin } from './IHistogramBin';
+export { DefaultHistogramAppearance, BlueHistogramAppearance } from './HistogramAppearance';
+export type { IHistogramAppearance } from './HistogramAppearance';

package/controls/Histogram/index.js

@@ -1,3 +1,2 @@
-export * from './Histogram';
-export * from './IHistogramBin';
-export * from './HistogramAppearance';
+export { Histogram } from './Histogram';
+export { DefaultHistogramAppearance, BlueHistogramAppearance } from './HistogramAppearance';

package/controls/Icon/Icon.d.ts

@@ -72,30 +72,58 @@ interface IStyledProps {
 }
 declare const IconStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<IIconProps, IIconProps>, IIconProps & Partial<IStyledProps>>, IIconProps>> & string & Omit<(props: IIconProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 /**
- * Displays an icon. An `Icon` is an SVG symbol taken from a sprite sheet,
- * with an URL of the form `spritesheet.svg#my-icon`.
+ * An SVG icon from a sprite sheet with support for sizing, colors, and transformations.
  *
- * An icon defaults to a white color unless overridden using `color`.
+ * Icons reference symbols from a sprite sheet using URLs like `spritesheet.svg#icon-name`.
+ * The `SVG` enumeration provides preset paths for all available icons.
  *
- * #### Size
- * The icon size defaults to `medium`, which corresponds to `1em`. Other
- * preset sizes cause the icon to shrink or grow by a growth factor of 1.2
- * (_minor third_).
+ * ## Usage
  *
- * * `mini`: 0.578
- * * `tiny`: 0.694
- * * `small`: 0.833
- * * `medium`: 1
- * * `large`:  1.2
- * * `big`: 1.44
- * * `huge`: 1.728
- * * `massive`: 2.0736
+ * ```tsx
+ * import { Icon, SVG } from '@longline/aqua-ui';
  *
- * For exact sizing, `size` also accepts a size in pixels. An icon is always
- * square.
+ * // Basic icon
+ * <Icon url={SVG.Icons.Search} />
+ *
+ * // Colored and sized
+ * <Icon url={SVG.Icons.Check} color="green" size="large" />
+ *
+ * // With transformations
+ * <Icon url={SVG.Icons.Arrow} rotated={90} mirrored />
+ *
+ * // Clickable icon
+ * <Icon url={SVG.Icons.Close} onClick={handleClose} />
+ *
+ * // Loading spinner
+ * <Icon url={SVG.Icons.Spinner} animated />
+ * ```
+ *
+ * ## Preset Sizes
+ *
+ * Sizes scale by a _minor third_ (1.2x) from the base `medium` size of `1em`:
+ *
+ * | Size | Scale |
+ * |------|-------|
+ * | `mini` | 0.578em |
+ * | `tiny` | 0.694em |
+ * | `small` | 0.833em |
+ * | `medium` | 1em (default) |
+ * | `large` | 1.2em |
+ * | `big` | 1.44em |
+ * | `huge` | 1.728em |
+ * | `massive` | 2.074em |
+ *
+ * For exact sizing, pass a number for pixel-based dimensions.
+ *
+ * ## Transformations
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `mirrored` | Flip horizontally |
+ * | `flipped` | Flip vertically |
+ * | `rotated` | Rotate by degrees (0-360) |
+ * | `animated` | Continuous rotation animation |
  */
-declare const Icon: {
-    ({ size, disabled, flipped, mirrored, animated, padded, circle, color, ...props }: IIconProps): React.JSX.Element;
-    displayName: string;
-};
-export { IconBase, Icon, IconStyled, IIconProps };
+declare const Icon: ({ size, disabled, flipped, mirrored, animated, padded, circle, color, ...props }: IIconProps) => React.JSX.Element;
+export { IconBase, Icon, IconStyled };
+export type { IIconProps };

package/controls/Icon/Icon.js

@@ -49,32 +49,61 @@ var IconStyled = styled(IconBase).attrs(function (p) {
     });
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  transform: ", " ", " ", ";\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"], ["\n  position: relative;\n  shape-rendering: geometricPrecision;\n  box-sizing: border-box;\n\n  // Circle:\n  ", "\n  \n  // Spacing around icon:\n  ", "\n\n  // Clickable icons have a cursor hint:\n  ", "\n\n  // Disabled:\n  ", "\n\n  // Sizes:\n  width: ", ";  \n  height: ", ";\n  // Don't be squished when in a flex:\n  min-width: ", ";  \n  min-height: ", ";\n\n  // Transformations:\n  transform-origin: center;\n  transform: ", " ", " ", ";\n\n  // Icon colors:\n  fill: ", ";\n  ", "\n\n  // Animated:\n  ", "\n"])), function (p) { return p.circle && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "], ["\n    border-radius: 50%;\n    border: solid 1px ", ";\n  "])), p.color); }, function (p) { return p.padded && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["margin: 2px;"], ["margin: 2px;"]))); }, function (p) { return p.onClick && !p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["cursor: pointer;"], ["cursor: pointer;"]))); }, function (p) { return p.disabled && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    pointer-events: none;\n    opacity: 0.6;\n  "], ["\n    pointer-events: none;\n    opacity: 0.6;\n  "]))); }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.$realSize; }, function (p) { return p.flipped ? 'scaleY(-1)' : ''; }, function (p) { return p.mirrored ? 'scaleX(-1)' : ''; }, function (p) { return p.rotated ? "rotate(".concat(p.rotated, "deg)") : ''; }, function (p) { return p.color; }, function (p) { return p.onClick && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "], ["\n    transition: \n      fill ", "ms ease, \n      border-color ", "ms ease,\n      outline-color ", "ms ease;\n    &:hover {\n      fill: ", ";\n      border-color:  ", ";\n    }\n  "])), function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, lighten(0.3, p.color), lighten(0.3, p.color)); }, function (p) { return p.animated && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    animation: ", " 2s linear infinite;\n  "], ["\n    animation: ", " 2s linear infinite;\n  "])), rotate); });
 /**
- * Displays an icon. An `Icon` is an SVG symbol taken from a sprite sheet,
- * with an URL of the form `spritesheet.svg#my-icon`.
+ * An SVG icon from a sprite sheet with support for sizing, colors, and transformations.
  *
- * An icon defaults to a white color unless overridden using `color`.
+ * Icons reference symbols from a sprite sheet using URLs like `spritesheet.svg#icon-name`.
+ * The `SVG` enumeration provides preset paths for all available icons.
  *
- * #### Size
- * The icon size defaults to `medium`, which corresponds to `1em`. Other
- * preset sizes cause the icon to shrink or grow by a growth factor of 1.2
- * (_minor third_).
+ * ## Usage
  *
- * * `mini`: 0.578
- * * `tiny`: 0.694
- * * `small`: 0.833
- * * `medium`: 1
- * * `large`:  1.2
- * * `big`: 1.44
- * * `huge`: 1.728
- * * `massive`: 2.0736
+ * ```tsx
+ * import { Icon, SVG } from '@longline/aqua-ui';
  *
- * For exact sizing, `size` also accepts a size in pixels. An icon is always
- * square.
+ * // Basic icon
+ * <Icon url={SVG.Icons.Search} />
+ *
+ * // Colored and sized
+ * <Icon url={SVG.Icons.Check} color="green" size="large" />
+ *
+ * // With transformations
+ * <Icon url={SVG.Icons.Arrow} rotated={90} mirrored />
+ *
+ * // Clickable icon
+ * <Icon url={SVG.Icons.Close} onClick={handleClose} />
+ *
+ * // Loading spinner
+ * <Icon url={SVG.Icons.Spinner} animated />
+ * ```
+ *
+ * ## Preset Sizes
+ *
+ * Sizes scale by a _minor third_ (1.2x) from the base `medium` size of `1em`:
+ *
+ * | Size | Scale |
+ * |------|-------|
+ * | `mini` | 0.578em |
+ * | `tiny` | 0.694em |
+ * | `small` | 0.833em |
+ * | `medium` | 1em (default) |
+ * | `large` | 1.2em |
+ * | `big` | 1.44em |
+ * | `huge` | 1.728em |
+ * | `massive` | 2.074em |
+ *
+ * For exact sizing, pass a number for pixel-based dimensions.
+ *
+ * ## Transformations
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `mirrored` | Flip horizontally |
+ * | `flipped` | Flip vertically |
+ * | `rotated` | Rotate by degrees (0-360) |
+ * | `animated` | Continuous rotation animation |
  */
 var Icon = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.flipped, flipped = _d === void 0 ? false : _d, _e = _a.mirrored, mirrored = _e === void 0 ? false : _e, _f = _a.animated, animated = _f === void 0 ? false : _f, _g = _a.padded, padded = _g === void 0 ? false : _g, _h = _a.circle, circle = _h === void 0 ? false : _h, _j = _a.color, color = _j === void 0 ? "white" : _j, props = __rest(_a, ["size", "disabled", "flipped", "mirrored", "animated", "padded", "circle", "color"]);
     return React.createElement(IconStyled, __assign({ size: size, disabled: disabled, flipped: flipped, mirrored: mirrored, animated: animated, padded: padded, circle: circle, color: color }, props));
 };
-Icon.displayName = "Icon";
 export { IconBase, Icon, IconStyled };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/controls/Icon/index.d.ts

@@ -1 +1,2 @@
-export * from './Icon';
+export { IconBase, Icon, IconStyled } from './Icon';
+export type { IIconProps } from './Icon';

package/controls/Icon/index.js

@@ -1 +1 @@
-export * from './Icon';
+export { IconBase, Icon, IconStyled } from './Icon';

package/controls/Key/Key.d.ts

@@ -13,13 +13,47 @@ interface IKeyProps {
     _fakeMac?: boolean;
 }
 /**
- * A `Key` displays a keyboard key. The value is the key description,
- * e.g. `Ctrl` or `Alt`. A key is 16x16px square, unless the key description
- * is longer than 1 character, in which case the width becomes 36px.
- * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
+ * A visual representation of a keyboard key for displaying shortcuts or instructions.
+ *
+ * Renders a styled key cap that matches the look of physical keyboard keys. Useful
+ * for documenting keyboard shortcuts, tooltips, or interactive tutorials.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Single key
+ * <Key value="Esc" />
+ *
+ * // Keyboard shortcut combination
+ * <span>
+ *   <Key value="Ctrl" /> + <Key value="S" /> to save
+ * </span>
+ *
+ * // Arrow keys
+ * <Key value="ArrowUp" />
+ * <Key value="ArrowDown" />
+ * ```
+ *
+ * ## Special Keys
+ *
+ * Certain key values are automatically converted to icons:
+ *
+ * | Value | Display |
+ * |-------|---------|
+ * | `Ctrl` | ⌘ (Mac) or "Ctrl" (other) |
+ * | `ArrowUp` | ↑ icon |
+ * | `ArrowDown` | ↓ icon |
+ * | `ArrowLeft` | ← icon |
+ * | `ArrowRight` | → icon |
+ *
+ * ## Sizing
+ *
+ * - Single character keys: 16×16px square
+ * - Multi-character keys: 36px minimum width
  */
 declare const Key: {
     (props: IKeyProps): React.JSX.Element;
     displayName: string;
 };
-export { Key, IKeyProps };
+export { Key };
+export type { IKeyProps };

package/controls/Key/Key.js

@@ -57,17 +57,83 @@ var KeyBase = function (props) {
 var Inner = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 100%;\n"])));
 var KeyStyled = styled(KeyBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display:       inline-block;\n  color:         ", ";\n  fill:          ", ";\n  border:        solid 1px ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  padding:       0 4px;\n  height:        16px;\n  box-sizing:    border-box;\n  min-width:     16px;\n  font:          ", ";\n"], ["\n  display:       inline-block;\n  color:         ", ";\n  fill:          ", ";\n  border:        solid 1px ", ";\n  background-color: ", ";\n  border-radius: 4px;\n  padding:       0 4px;\n  height:        16px;\n  box-sizing:    border-box;\n  min-width:     16px;\n  font:          ", ";\n"
     /**
-     * A `Key` displays a keyboard key. The value is the key description,
-     * e.g. `Ctrl` or `Alt`. A key is 16x16px square, unless the key description
-     * is longer than 1 character, in which case the width becomes 36px.
-     * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
+     * A visual representation of a keyboard key for displaying shortcuts or instructions.
+     *
+     * Renders a styled key cap that matches the look of physical keyboard keys. Useful
+     * for documenting keyboard shortcuts, tooltips, or interactive tutorials.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * // Single key
+     * <Key value="Esc" />
+     *
+     * // Keyboard shortcut combination
+     * <span>
+     *   <Key value="Ctrl" /> + <Key value="S" /> to save
+     * </span>
+     *
+     * // Arrow keys
+     * <Key value="ArrowUp" />
+     * <Key value="ArrowDown" />
+     * ```
+     *
+     * ## Special Keys
+     *
+     * Certain key values are automatically converted to icons:
+     *
+     * | Value | Display |
+     * |-------|---------|
+     * | `Ctrl` | ⌘ (Mac) or "Ctrl" (other) |
+     * | `ArrowUp` | ↑ icon |
+     * | `ArrowDown` | ↓ icon |
+     * | `ArrowLeft` | ← icon |
+     * | `ArrowRight` | → icon |
+     *
+     * ## Sizing
+     *
+     * - Single character keys: 16×16px square
+     * - Multi-character keys: 36px minimum width
      */
 ])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.font.labelSmall; });
 /**
- * A `Key` displays a keyboard key. The value is the key description,
- * e.g. `Ctrl` or `Alt`. A key is 16x16px square, unless the key description
- * is longer than 1 character, in which case the width becomes 36px.
- * Certain keys (Ctrl on a Mac, arrows) are replaced with icons.
+ * A visual representation of a keyboard key for displaying shortcuts or instructions.
+ *
+ * Renders a styled key cap that matches the look of physical keyboard keys. Useful
+ * for documenting keyboard shortcuts, tooltips, or interactive tutorials.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Single key
+ * <Key value="Esc" />
+ *
+ * // Keyboard shortcut combination
+ * <span>
+ *   <Key value="Ctrl" /> + <Key value="S" /> to save
+ * </span>
+ *
+ * // Arrow keys
+ * <Key value="ArrowUp" />
+ * <Key value="ArrowDown" />
+ * ```
+ *
+ * ## Special Keys
+ *
+ * Certain key values are automatically converted to icons:
+ *
+ * | Value | Display |
+ * |-------|---------|
+ * | `Ctrl` | ⌘ (Mac) or "Ctrl" (other) |
+ * | `ArrowUp` | ↑ icon |
+ * | `ArrowDown` | ↓ icon |
+ * | `ArrowLeft` | ← icon |
+ * | `ArrowRight` | → icon |
+ *
+ * ## Sizing
+ *
+ * - Single character keys: 16×16px square
+ * - Multi-character keys: 36px minimum width
  */
 var Key = function (props) { return React.createElement(KeyStyled, __assign({}, props)); };
 Key.displayName = "Key";

package/controls/Key/index.d.ts

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

package/controls/Key/index.js

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

package/controls/LinearChart/LinearChart.d.ts

@@ -21,19 +21,50 @@ interface ILinearChartProps {
      */
     color?: string;
     /**
-     * If set, `LinearChart` is in ghost mode. If a ghosted `label is desired,
+     * If set, `LinearChart` is in ghost mode. If a ghosted label is desired,
      * `label` must have a value.
+     * @default false
      */
     ghost?: boolean;
 }
 /**
- * Data visualization element.
+ * A horizontal progress bar for visualizing percentage values.
+ *
+ * Displays a filled bar representing a value from 0-100. Optionally shows
+ * a text label and/or numeric percentage. Fills all available horizontal space.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic bar
+ * <LinearChart value={75} />
+ *
+ * // With label and percentage
+ * <LinearChart value={85} label="Progress" numbered />
+ *
+ * // Custom color
+ * <LinearChart value={50} color="orange" label="Warning" />
+ *
+ * // Loading state
+ * <LinearChart value={0} ghost label="Loading..." />
+ * ```
+ *
+ * ## Display Options
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `label` | Text or JSX shown before the bar (120px fixed width, ellipsized) |
+ * | `numbered` | Shows percentage value between label and bar |
+ * | `color` | Custom bar fill color (default: theme primary) |
+ * | `ghost` | Skeleton loading state |
+ *
+ * ## Accessibility
  *
- * The `LinearChart` will fill all horizontal space available to it.
- * A percentage value and a text label are optional.
+ * Includes `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
  */
 declare const LinearChart: {
     ({ numbered, ...props }: ILinearChartProps): React.JSX.Element;
     displayName: string;
 };
-export { LinearChart, ILinearChartProps };
+export { LinearChart };
+export type { ILinearChartProps };

package/controls/LinearChart/LinearChart.js

@@ -44,17 +44,75 @@ var Bar = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObjec
 var GhostWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  height: 18px;\n  flex: 1;\n"], ["\n  position: relative;\n  height: 18px;\n  flex: 1;\n"])));
 var LinearChartStyled = styled(LinearChartBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: space-between;\n  height: 18px;\n  gap: 8px;\n  min-width: 200px;\n  user-select: none;\n\n  font: ", ";\n  color: ", ";\n  line-height: 0;\n  text-transform: uppercase;\n\n  ", " {\n    &:before {\n      width: ", "%;\n      background-color: ", ";\n    }\n  }\n"
     /**
-     * Data visualization element.
+     * A horizontal progress bar for visualizing percentage values.
      *
-     * The `LinearChart` will fill all horizontal space available to it.
-     * A percentage value and a text label are optional.
+     * Displays a filled bar representing a value from 0-100. Optionally shows
+     * a text label and/or numeric percentage. Fills all available horizontal space.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic bar
+     * <LinearChart value={75} />
+     *
+     * // With label and percentage
+     * <LinearChart value={85} label="Progress" numbered />
+     *
+     * // Custom color
+     * <LinearChart value={50} color="orange" label="Warning" />
+     *
+     * // Loading state
+     * <LinearChart value={0} ghost label="Loading..." />
+     * ```
+     *
+     * ## Display Options
+     *
+     * | Prop | Description |
+     * |------|-------------|
+     * | `label` | Text or JSX shown before the bar (120px fixed width, ellipsized) |
+     * | `numbered` | Shows percentage value between label and bar |
+     * | `color` | Custom bar fill color (default: theme primary) |
+     * | `ghost` | Skeleton loading state |
+     *
+     * ## Accessibility
+     *
+     * Includes `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
      */
 ])), function (p) { return p.theme.font.dataLarge; }, function (p) { return p.theme.colors.font; }, Bar, function (p) { return Math.max(0, Math.min(100, p.value)); }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
 /**
- * Data visualization element.
+ * A horizontal progress bar for visualizing percentage values.
+ *
+ * Displays a filled bar representing a value from 0-100. Optionally shows
+ * a text label and/or numeric percentage. Fills all available horizontal space.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic bar
+ * <LinearChart value={75} />
+ *
+ * // With label and percentage
+ * <LinearChart value={85} label="Progress" numbered />
+ *
+ * // Custom color
+ * <LinearChart value={50} color="orange" label="Warning" />
+ *
+ * // Loading state
+ * <LinearChart value={0} ghost label="Loading..." />
+ * ```
+ *
+ * ## Display Options
+ *
+ * | Prop | Description |
+ * |------|-------------|
+ * | `label` | Text or JSX shown before the bar (120px fixed width, ellipsized) |
+ * | `numbered` | Shows percentage value between label and bar |
+ * | `color` | Custom bar fill color (default: theme primary) |
+ * | `ghost` | Skeleton loading state |
+ *
+ * ## Accessibility
  *
- * The `LinearChart` will fill all horizontal space available to it.
- * A percentage value and a text label are optional.
+ * Includes `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
  */
 var LinearChart = function (_a) {
     var _b = _a.numbered, numbered = _b === void 0 ? false : _b, props = __rest(_a, ["numbered"]);

package/controls/LinearChart/index.d.ts

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