@longline/aqua-ui 1.0.302 → 1.0.304

package/controls/Chip/Chip.d.ts

@@ -18,21 +18,49 @@ interface IChipProps {
     onClick: (e?: React.MouseEvent | React.KeyboardEvent) => void;
 }
 /**
- * A set of `Chip` instances show consecutive user inputs and are individually
- * deselected. The "X" on a `Chip` is clickable. A `Chip` can have keyboard focus:
- * when `Delete` is pressed, `onClick` is triggered.
- *
- * A `Chip` has a slight left margin to offset it from the preceding `Chip` in a
- * set. This margin is only applied between `Chip` siblings.
- *
- * Chips have a minimum width and maximum width. Content that exceeds the
- * maximum width is ellipsized. If `verticalAlign` is specified, then the contents
- * of the `Chip` are aligned with flexbox. This is necessary when the chip label
- * is not a string but JSX. If `verticalAlign` is enabled, the Chip
- * content is no longer ellipsized.
+ * A compact element representing a user input, selection, or filter that can be removed.
+ *
+ * Chips are commonly used to display tags, selected options, or filter criteria. Each chip
+ * has a remove button (X) that triggers `onClick` when activated. Chips can also be removed
+ * via keyboard when focused.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * const [tags, setTags] = useState(['React', 'TypeScript', 'Node']);
+ *
+ * {tags.map(tag => (
+ *   <Chip key={tag} onClick={() => removeTag(tag)}>
+ *     {tag}
+ *   </Chip>
+ * ))}
+ * ```
+ *
+ * ## Keyboard Support
+ *
+ * | Key | Action |
+ * |-----|--------|
+ * | `Tab` | Move focus to/from the chip |
+ * | `Delete` | Remove the chip (triggers `onClick`) |
+ * | `Backspace` | Remove the chip (triggers `onClick`) |
+ *
+ * ## Sizing
+ *
+ * Chips have constrained dimensions:
+ * - **Min width**: 80px
+ * - **Max width**: 150px
+ * - **Height**: 24px
+ *
+ * Content exceeding the max width is automatically ellipsized.
+ *
+ * ## Spacing
+ *
+ * Adjacent `Chip` siblings are automatically spaced with a small gap.
+ * No additional margin styling is needed when placing chips side by side.
  */
 declare const Chip: {
     ({ disabled, ...props }: IChipProps): React.JSX.Element;
     displayName: string;
 };
-export { Chip, IChipProps };
+export { Chip };
+export type { IChipProps };

package/controls/Chip/Chip.js

@@ -33,7 +33,7 @@ var ChipBase = function (props) {
         if (props.disabled)
             return;
         // Pressing Delete or Backspace fires the onClick event.
-        if (e.key == 'Delete' || e.key == 'Backspace') {
+        if (e.key === 'Delete' || e.key === 'Backspace') {
             e.stopPropagation();
             props.onClick(e);
         }
@@ -44,35 +44,89 @@ var ChipBase = function (props) {
             React.createElement("svg", null,
                 React.createElement("use", { xlinkHref: SVG.Icons.Cross })))));
 };
-var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: none;\n    margin: none;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: none;\n    margin: none;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
+var ChipStyled = styled(ChipBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"], ["\n  // Dimensions:\n  min-width: 80px;\n  max-width: 150px;\n  width: auto;\n  height: 24px;\n  padding: 0 3px 0 12px;\n\n  // Appearance:\n  background-color: ", ";\n  border: none;\n  color: ", ";\n  border-radius: 12px;\n  user-select: none;\n  outline: none;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 4px; // Gap between content and \"X\".\n  margin-right: 2px; \n\n  // Spacing from previous Chip.\n  & + & {\n    margin-left: 2px;\n  }\n\n  font: ", ";\n\n  span.inner {\n    flex: 1;\n    overflow-x: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n  }\n\n  & > button {\n    border: none;\n    background: transparent;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  & > button {\n    svg {\n      transition: fill ", "ms ease-in-out,\n                  background-color ", "ms ease-in-out;\n      fill: ", ";\n      box-sizing: border-box;\n      width: 18px;\n      height: 18px;\n      padding: 2px;\n      border-radius: 50%;\n      cursor: pointer;\n    }\n  }\n\n  &:focus {\n    outline: solid 2px ", ";\n  }\n\n  // When Chip is hovered, svg is colored.\n  &:hover {\n    & button > svg {\n      background-color: ", ";\n      fill: ", ";\n    }\n  }\n\n  & > button svg:active {\n    background-color: ", ";\n    fill: ", ";\n  }\n\n  ", "\n"
     /**
-     * A set of `Chip` instances show consecutive user inputs and are individually
-     * deselected. The "X" on a `Chip` is clickable. A `Chip` can have keyboard focus:
-     * when `Delete` is pressed, `onClick` is triggered.
+     * A compact element representing a user input, selection, or filter that can be removed.
      *
-     * A `Chip` has a slight left margin to offset it from the preceding `Chip` in a
-     * set. This margin is only applied between `Chip` siblings.
+     * Chips are commonly used to display tags, selected options, or filter criteria. Each chip
+     * has a remove button (X) that triggers `onClick` when activated. Chips can also be removed
+     * via keyboard when focused.
      *
-     * Chips have a minimum width and maximum width. Content that exceeds the
-     * maximum width is ellipsized. If `verticalAlign` is specified, then the contents
-     * of the `Chip` are aligned with flexbox. This is necessary when the chip label
-     * is not a string but JSX. If `verticalAlign` is enabled, the Chip
-     * content is no longer ellipsized.
+     * ## Usage
+     *
+     * ```tsx
+     * const [tags, setTags] = useState(['React', 'TypeScript', 'Node']);
+     *
+     * {tags.map(tag => (
+     *   <Chip key={tag} onClick={() => removeTag(tag)}>
+     *     {tag}
+     *   </Chip>
+     * ))}
+     * ```
+     *
+     * ## Keyboard Support
+     *
+     * | Key | Action |
+     * |-----|--------|
+     * | `Tab` | Move focus to/from the chip |
+     * | `Delete` | Remove the chip (triggers `onClick`) |
+     * | `Backspace` | Remove the chip (triggers `onClick`) |
+     *
+     * ## Sizing
+     *
+     * Chips have constrained dimensions:
+     * - **Min width**: 80px
+     * - **Max width**: 150px
+     * - **Height**: 24px
+     *
+     * Content exceeding the max width is automatically ellipsized.
+     *
+     * ## Spacing
+     *
+     * Adjacent `Chip` siblings are automatically spaced with a small gap.
+     * No additional margin styling is needed when placing chips side by side.
      */
 ])), function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    pointer-events: none;\n    cursor: auto;\n    background-color: ", ";\n    color: ", ";\n    & > button svg {\n      fill: ", ";\n    }\n  "], ["\n    pointer-events: none;\n    cursor: auto;\n    background-color: ", ";\n    color: ", ";\n    & > button svg {\n      fill: ", ";\n    }\n  "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }); });
 /**
- * A set of `Chip` instances show consecutive user inputs and are individually
- * deselected. The "X" on a `Chip` is clickable. A `Chip` can have keyboard focus:
- * when `Delete` is pressed, `onClick` is triggered.
+ * A compact element representing a user input, selection, or filter that can be removed.
+ *
+ * Chips are commonly used to display tags, selected options, or filter criteria. Each chip
+ * has a remove button (X) that triggers `onClick` when activated. Chips can also be removed
+ * via keyboard when focused.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * const [tags, setTags] = useState(['React', 'TypeScript', 'Node']);
+ *
+ * {tags.map(tag => (
+ *   <Chip key={tag} onClick={() => removeTag(tag)}>
+ *     {tag}
+ *   </Chip>
+ * ))}
+ * ```
+ *
+ * ## Keyboard Support
+ *
+ * | Key | Action |
+ * |-----|--------|
+ * | `Tab` | Move focus to/from the chip |
+ * | `Delete` | Remove the chip (triggers `onClick`) |
+ * | `Backspace` | Remove the chip (triggers `onClick`) |
+ *
+ * ## Sizing
+ *
+ * Chips have constrained dimensions:
+ * - **Min width**: 80px
+ * - **Max width**: 150px
+ * - **Height**: 24px
+ *
+ * Content exceeding the max width is automatically ellipsized.
  *
- * A `Chip` has a slight left margin to offset it from the preceding `Chip` in a
- * set. This margin is only applied between `Chip` siblings.
+ * ## Spacing
  *
- * Chips have a minimum width and maximum width. Content that exceeds the
- * maximum width is ellipsized. If `verticalAlign` is specified, then the contents
- * of the `Chip` are aligned with flexbox. This is necessary when the chip label
- * is not a string but JSX. If `verticalAlign` is enabled, the Chip
- * content is no longer ellipsized.
+ * Adjacent `Chip` siblings are automatically spaced with a small gap.
+ * No additional margin styling is needed when placing chips side by side.
  */
 var Chip = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);

package/controls/Chip/index.d.ts

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

package/controls/Chip/index.js

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

package/controls/CircularProgress/CircularProgress.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 interface ICircularProgressProps {
     /** @ignore */
     className?: string;
@@ -9,7 +9,6 @@ interface ICircularProgressProps {
     value: number;
     /**
      * Color of the progress arc.
-     * @default primary 1
      */
     color?: string;
     /**
@@ -24,10 +23,43 @@ interface ICircularProgressProps {
     strokeWidth?: number;
 }
 /**
- * A reusable circular progress indicator component.
+ * A circular progress indicator that displays a percentage value as an arc.
  *
- * @example
- * <CircularProgress value={65} />
+ * Renders an SVG-based circular gauge with a progress arc and centered percentage label.
+ * The progress value is automatically clamped between 0 and 100.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic usage
+ * <CircularProgress value={75} />
+ *
+ * // Custom size and stroke
+ * <CircularProgress value={50} size={60} strokeWidth={4} />
+ *
+ * // Custom color
+ * <CircularProgress value={100} color="seagreen" />
+ * ```
+ *
+ * ## Accessibility
+ *
+ * The component includes proper ARIA attributes:
+ * - `role="progressbar"`
+ * - `aria-valuenow` (current value)
+ * - `aria-valuemin` (0)
+ * - `aria-valuemax` (100)
+ *
+ * ## Customization
+ *
+ * | Prop | Default | Description |
+ * |------|---------|-------------|
+ * | `size` | `100` | Diameter in pixels |
+ * | `strokeWidth` | `2` | Arc thickness in pixels |
+ * | `color` | theme primary | Arc color (CSS color value) |
  */
-declare const CircularProgress: ({ size, strokeWidth, ...props }: ICircularProgressProps) => React.JSX.Element;
+declare const CircularProgress: {
+    ({ size, strokeWidth, ...props }: ICircularProgressProps): React.JSX.Element;
+    displayName: string;
+};
 export { CircularProgress };
+export type { ICircularProgressProps };

package/controls/CircularProgress/CircularProgress.js

@@ -24,7 +24,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import * as React from 'react';
 import styled from 'styled-components';
 var CircularProgressBase = function (props) {
     // Clamp progress value between 0 and 100:
@@ -40,33 +40,83 @@ var CircularProgressBase = function (props) {
             "%")));
 };
 /** Text label displayed at the center of the circle. */
-var Text = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  font: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  font: ", ";\n"
-    /**
-     * Styled version of CircularProgressBase.
-     * Handles sizing, positioning, and theming.
-     */
-])), function (p) { return p.theme.font.labelSmall; });
-/**
- * Styled version of CircularProgressBase.
- * Handles sizing, positioning, and theming.
- */
+var Text = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  font: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  font: ", ";\n"])), function (p) { return p.theme.font.labelSmall; });
 var CircularProgressStyled = styled(CircularProgressBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    position: absolute;\n    inset: 0;\n    stroke: ", ";\n    stroke-width: ", ";\n  }\n"], ["\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  svg {\n    position: absolute;\n    inset: 0;\n    stroke: ", ";\n    stroke-width: ", ";\n  }\n"
     /**
-     * A reusable circular progress indicator component.
+     * A circular progress indicator that displays a percentage value as an arc.
+     *
+     * Renders an SVG-based circular gauge with a progress arc and centered percentage label.
+     * The progress value is automatically clamped between 0 and 100.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * // Basic usage
+     * <CircularProgress value={75} />
+     *
+     * // Custom size and stroke
+     * <CircularProgress value={50} size={60} strokeWidth={4} />
+     *
+     * // Custom color
+     * <CircularProgress value={100} color="seagreen" />
+     * ```
+     *
+     * ## Accessibility
      *
-     * @example
-     * <CircularProgress value={65} />
+     * The component includes proper ARIA attributes:
+     * - `role="progressbar"`
+     * - `aria-valuenow` (current value)
+     * - `aria-valuemin` (0)
+     * - `aria-valuemax` (100)
+     *
+     * ## Customization
+     *
+     * | Prop | Default | Description |
+     * |------|---------|-------------|
+     * | `size` | `100` | Diameter in pixels |
+     * | `strokeWidth` | `2` | Arc thickness in pixels |
+     * | `color` | theme primary | Arc color (CSS color value) |
      */
 ])), function (p) { return p.size; }, function (p) { return p.size; }, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; }, function (p) { return p.strokeWidth; });
 /**
- * A reusable circular progress indicator component.
+ * A circular progress indicator that displays a percentage value as an arc.
+ *
+ * Renders an SVG-based circular gauge with a progress arc and centered percentage label.
+ * The progress value is automatically clamped between 0 and 100.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * // Basic usage
+ * <CircularProgress value={75} />
+ *
+ * // Custom size and stroke
+ * <CircularProgress value={50} size={60} strokeWidth={4} />
+ *
+ * // Custom color
+ * <CircularProgress value={100} color="seagreen" />
+ * ```
+ *
+ * ## Accessibility
+ *
+ * The component includes proper ARIA attributes:
+ * - `role="progressbar"`
+ * - `aria-valuenow` (current value)
+ * - `aria-valuemin` (0)
+ * - `aria-valuemax` (100)
+ *
+ * ## Customization
  *
- * @example
- * <CircularProgress value={65} />
+ * | Prop | Default | Description |
+ * |------|---------|-------------|
+ * | `size` | `100` | Diameter in pixels |
+ * | `strokeWidth` | `2` | Arc thickness in pixels |
+ * | `color` | theme primary | Arc color (CSS color value) |
  */
 var CircularProgress = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 100 : _b, _c = _a.strokeWidth, strokeWidth = _c === void 0 ? 2 : _c, props = __rest(_a, ["size", "strokeWidth"]);
     return React.createElement(CircularProgressStyled, __assign({ size: size, strokeWidth: strokeWidth }, props));
 };
+CircularProgress.displayName = "CircularProgress";
 export { CircularProgress };
 var templateObject_1, templateObject_2;

package/controls/CircularProgress/index.d.ts

@@ -1 +1,2 @@
 export { CircularProgress } from './CircularProgress';
+export type { ICircularProgressProps } from './CircularProgress';

package/controls/Dropzone/Dropzone.d.ts

@@ -18,22 +18,54 @@ interface IDropzoneProps {
     message?: React.ReactNode;
     /**
      * A `Dropzone` can be disabled and will not accept files.
+     * @default false
      */
     disabled?: boolean;
 }
 /**
- * A `Dropzone` accepts files, either by dragging them into the zone or by
- * clicking the dropzone and selecting files from a dialog box.  Multiple
- * files may be dragged or selected at the same time. When files are selected,
- * Dropzone fires `onAddFiles` with a `Files[]` argument.
- *
- * @example
- * <Dropzone
- *   onAddFiles={(files: File[]) => console.log("Files dropped", files)}
- * />
+ * A file upload area that accepts files via drag-and-drop or click-to-select.
+ *
+ * The Dropzone renders as a clickable area with a dashed border and upload icon.
+ * Users can either drag files onto it or click to open the native file picker.
+ * Multiple files can be selected at once.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * const handleFiles = (files: File[]) => {
+ *   files.forEach(file => console.log(file.name, file.size));
+ * };
+ *
+ * <Dropzone onAddFiles={handleFiles} />
+ *
+ * // With file type filter
+ * <Dropzone onAddFiles={handleFiles} accept=".pdf,.doc,.docx" />
+ * ```
+ *
+ * ## Interaction Methods
+ *
+ * | Method | Description |
+ * |--------|-------------|
+ * | Drag & Drop | Drag files from the file system onto the dropzone |
+ * | Click | Click to open the native file picker dialog |
+ * | Keyboard | Press `Enter` or `Space` when focused to open file picker |
+ *
+ * ## File Filtering
+ *
+ * The `accept` prop sets a file type filter in the file picker dialog, but does
+ * **not** prevent users from dropping unacceptable file types. Always validate
+ * files in your `onAddFiles` handler.
+ *
+ * ## Accessibility
+ *
+ * - Focusable via keyboard (`Tab`)
+ * - Activatable via `Enter` or `Space` keys
+ * - Includes `aria-label` for screen readers
+ * - Decorative SVG is hidden from assistive technology
  */
 declare const Dropzone: {
     ({ disabled, ...props }: IDropzoneProps): React.JSX.Element;
     displayName: string;
 };
-export { Dropzone, IDropzoneProps };
+export { Dropzone };
+export type { IDropzoneProps };

package/controls/Dropzone/Dropzone.js

@@ -66,27 +66,87 @@ var DropzoneBase = function (props) {
 };
 var DropzoneStyled = styled(DropzoneBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  border: dashed 2px ", ";\n  border-radius: ", "px;\n  cursor: ", ";\n  width: 100%;\n  text-align: center;\n  background-color: transparent;\n  transition: \n    border-color ease-in-out 75ms, \n    background-color ease-in-out 75ms;\n\n  & > div.message {\n    margin-top: 8px;\n    font-weight: 500;\n    color: ", ";\n    transition: color ease-in-out 75ms;\n  }\n\n  & > svg {\n    display: block;\n    margin: 8px;\n    width: 100%;\n    height: 150px;\n    fill: ", ";\n\n    transition: fill ease-in-out 75ms, transform ease-in-out 500ms;\n  }\n\n  ", "\n\n  & > input {\n    display: none;\n  }\n"], ["\n  position: relative;\n  border: dashed 2px ", ";\n  border-radius: ", "px;\n  cursor: ", ";\n  width: 100%;\n  text-align: center;\n  background-color: transparent;\n  transition: \n    border-color ease-in-out 75ms, \n    background-color ease-in-out 75ms;\n\n  & > div.message {\n    margin-top: 8px;\n    font-weight: 500;\n    color: ", ";\n    transition: color ease-in-out 75ms;\n  }\n\n  & > svg {\n    display: block;\n    margin: 8px;\n    width: 100%;\n    height: 150px;\n    fill: ", ";\n\n    transition: fill ease-in-out 75ms, transform ease-in-out 500ms;\n  }\n\n  ", "\n\n  & > input {\n    display: none;\n  }\n"
     /**
-     * A `Dropzone` accepts files, either by dragging them into the zone or by
-     * clicking the dropzone and selecting files from a dialog box.  Multiple
-     * files may be dragged or selected at the same time. When files are selected,
-     * Dropzone fires `onAddFiles` with a `Files[]` argument.
+     * A file upload area that accepts files via drag-and-drop or click-to-select.
      *
-     * @example
-     * <Dropzone
-     *   onAddFiles={(files: File[]) => console.log("Files dropped", files)}
-     * />
+     * The Dropzone renders as a clickable area with a dashed border and upload icon.
+     * Users can either drag files onto it or click to open the native file picker.
+     * Multiple files can be selected at once.
+     *
+     * ## Usage
+     *
+     * ```tsx
+     * const handleFiles = (files: File[]) => {
+     *   files.forEach(file => console.log(file.name, file.size));
+     * };
+     *
+     * <Dropzone onAddFiles={handleFiles} />
+     *
+     * // With file type filter
+     * <Dropzone onAddFiles={handleFiles} accept=".pdf,.doc,.docx" />
+     * ```
+     *
+     * ## Interaction Methods
+     *
+     * | Method | Description |
+     * |--------|-------------|
+     * | Drag & Drop | Drag files from the file system onto the dropzone |
+     * | Click | Click to open the native file picker dialog |
+     * | Keyboard | Press `Enter` or `Space` when focused to open file picker |
+     *
+     * ## File Filtering
+     *
+     * The `accept` prop sets a file type filter in the file picker dialog, but does
+     * **not** prevent users from dropping unacceptable file types. Always validate
+     * files in your `onAddFiles` handler.
+     *
+     * ## Accessibility
+     *
+     * - Focusable via keyboard (`Tab`)
+     * - Activatable via `Enter` or `Space` keys
+     * - Includes `aria-label` for screen readers
+     * - Decorative SVG is hidden from assistive technology
      */
 ])), function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.disabled ? 'auto' : 'pointer'; }, function (p) { return p.theme.colors.neutral[80]; }, function (p) { return p.disabled ? p.theme.colors.neutral[50] : p.theme.colors.primary[2]; }, function (p) { return !p.disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    &.hover, &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      & > div.message {\n        color: ", ";\n      }\n      & > svg {\n        fill: ", ";\n        transform: translateY(-8px);\n      }\n    }\n  "], ["\n    &.hover, &:hover {\n      background-color: ", ";\n      border-color: ", ";\n      & > div.message {\n        color: ", ";\n      }\n      & > svg {\n        fill: ", ";\n        transform: translateY(-8px);\n      }\n    }\n  "])), p.theme.colors.primary[3], p.theme.colors.neutral[100], p.theme.colors.neutral[100], p.theme.colors.primary[1]); });
 /**
- * A `Dropzone` accepts files, either by dragging them into the zone or by
- * clicking the dropzone and selecting files from a dialog box.  Multiple
- * files may be dragged or selected at the same time. When files are selected,
- * Dropzone fires `onAddFiles` with a `Files[]` argument.
+ * A file upload area that accepts files via drag-and-drop or click-to-select.
+ *
+ * The Dropzone renders as a clickable area with a dashed border and upload icon.
+ * Users can either drag files onto it or click to open the native file picker.
+ * Multiple files can be selected at once.
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * const handleFiles = (files: File[]) => {
+ *   files.forEach(file => console.log(file.name, file.size));
+ * };
+ *
+ * <Dropzone onAddFiles={handleFiles} />
+ *
+ * // With file type filter
+ * <Dropzone onAddFiles={handleFiles} accept=".pdf,.doc,.docx" />
+ * ```
+ *
+ * ## Interaction Methods
+ *
+ * | Method | Description |
+ * |--------|-------------|
+ * | Drag & Drop | Drag files from the file system onto the dropzone |
+ * | Click | Click to open the native file picker dialog |
+ * | Keyboard | Press `Enter` or `Space` when focused to open file picker |
+ *
+ * ## File Filtering
+ *
+ * The `accept` prop sets a file type filter in the file picker dialog, but does
+ * **not** prevent users from dropping unacceptable file types. Always validate
+ * files in your `onAddFiles` handler.
+ *
+ * ## Accessibility
  *
- * @example
- * <Dropzone
- *   onAddFiles={(files: File[]) => console.log("Files dropped", files)}
- * />
+ * - Focusable via keyboard (`Tab`)
+ * - Activatable via `Enter` or `Space` keys
+ * - Includes `aria-label` for screen readers
+ * - Decorative SVG is hidden from assistive technology
  */
 var Dropzone = function (_a) {
     var _b = _a.disabled, disabled = _b === void 0 ? false : _b, props = __rest(_a, ["disabled"]);

package/controls/Dropzone/index.d.ts

@@ -1 +1,2 @@
 export { Dropzone } from './Dropzone';
+export type { IDropzoneProps } from './Dropzone';

package/controls/Fab/Fab.d.ts

@@ -58,26 +58,51 @@ interface IFabProps {
     onClick: (e?: React.MouseEvent<HTMLButtonElement>) => void;
 }
 /**
- * Floating action buttons (FABs) help people take primary actions and are used
- * to represent the most important action on a screen. A FAB renders as a
- * `<button>` element.
+ * A floating action button (FAB) for primary or prominent actions.
  *
- * FABs always have an icon, but other button content is optional. The optional
- * button content is usually a string, but may be any React component.
- * The icon symbol path is passed in as a property.
+ * FABs are elevated buttons that stand out from the UI and typically represent
+ * the most important action on a screen. They always include an icon and optionally
+ * display text content.
  *
- * #### Colors
- * The FAB surface and text always have the same color, but the icon has
- * four options: `positive` (theme-dependent, usually a shade of green),
- * `negative` (theme-dependent, usually a shade of red), custom, and themed
- * (the default).
+ * ## Usage
  *
- * #### States
- * * The FAB can be in a `disabled` state where it cannot be clicked.
- * * The FAB can be in an `active` state where it appears depressed.
+ * ```tsx
+ * import { SVG } from '@longline/aqua-ui';
+ *
+ * // Icon only
+ * <Fab icon={SVG.Icons.Add} onClick={handleAdd} />
+ *
+ * // Icon with label
+ * <Fab icon={SVG.Icons.Save} onClick={handleSave}>
+ *   Save Changes
+ * </Fab>
+ *
+ * // Positive action (green icon)
+ * <Fab icon={SVG.Icons.Check} positive onClick={handleConfirm}>
+ *   Confirm
+ * </Fab>
+ * ```
+ *
+ * ## Icon Colors
+ *
+ * | Prop | Color | Use Case |
+ * |------|-------|----------|
+ * | (default) | Theme primary | Standard actions |
+ * | `positive` | Green | Confirmations, saves, approvals |
+ * | `negative` | Red | Deletions, cancellations, warnings |
+ * | `color` | Custom CSS | Brand colors, special emphasis |
+ *
+ * ## States
+ *
+ * | State | Description |
+ * |-------|-------------|
+ * | `disabled` | Cannot be interacted with, muted appearance |
+ * | `active` | Appears depressed with inverted colors |
+ * | `nofocus` | Returns focus to previous element after click |
  */
 declare const Fab: {
     ({ disabled, positive, negative, active, nofocus, ...props }: IFabProps): React.JSX.Element;
     displayName: string;
 };
-export { Fab, IFabProps };
+export { Fab };
+export type { IFabProps };