@seeqdev/qomponents 0.0.214 → 0.0.216

package/dist/src/SvgIcon/SvgIcon.d.ts

@@ -1,5 +1,8 @@
-import React from 'react';
-import { SvgIconProps } from './SvgIcon.types';
+import { SvgIconProps } from "./SvgIcon.types.js";
+import React from "react";
+
+//#region src/SvgIcon/SvgIcon.d.ts
+
 /**
  * Renders an icon that has an SVG icon path (see {@link isSvgIcon() })
  *
@@ -16,4 +19,5 @@ import { SvgIconProps } from './SvgIcon.types';
  * @param tooltipProps - props to pass to the tooltip
  */
 declare const SvgIcon: React.FunctionComponent<SvgIconProps>;
-export default SvgIcon;
+//#endregion
+export { SvgIcon as default };

package/dist/src/SvgIcon/SvgIcon.types.d.ts

@@ -1,75 +1,79 @@
-import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
-export declare const svgIconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success", "default"];
-export type SvgIconType = (typeof svgIconTypes)[number];
+import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
+
+//#region src/SvgIcon/SvgIcon.types.d.ts
+declare const svgIconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success", "default"];
+type SvgIconType = (typeof svgIconTypes)[number];
 /**
  * Props for the SvgIcon component that renders SVG-based icons with various styling options.
  * Extends TooltipComponentProps to support tooltip functionality on the icon.
  * Similar to Icon component but specifically for SVG icons instead of font icons.
  */
-export interface SvgIconProps extends TooltipComponentProps {
-    /**
-     * SVG icon identifier or class name to display.
-     * This should correspond to an available SVG icon in your icon system.
-     * Examples: 'fc-zoom', 'fc-delete', 'custom-arrow'.
-     */
-    icon: string;
-    /**
-     * Visual style type that determines the icon's color and appearance:
-     * - `default`: Uses automatic dark/light text colors based on theme
-     * - `theme`: Uses primary theme colors
-     * - `white`: Pure white color
-     * - `text`: Uses standard text color
-     * - `dark-gray`: Dark gray color
-     * - `darkish-gray`: Medium-dark gray color
-     * - `gray`: Standard gray color
-     * - `color`: Uses custom color specified in `color` prop
-     * - `info`: Blue informational color
-     * - `warning`: Yellow/orange warning color
-     * - `danger`: Red error/danger color
-     * - `success`: Green success color
-     * - `theme-light`: Lighter version of theme color
-     * - `inherit`: Inherits color from parent element
-     * @default 'default'
-     */
-    type?: SvgIconType;
-    /**
-     * Custom color value for the icon when `type` is set to 'color'.
-     * Can be any valid CSS color (hex, rgb, color names, etc.).
-     * This property is required when type is 'color'.
-     */
-    color?: string;
-    /**
-     * Callback function triggered when the icon is clicked.
-     * Receives the mouse event as a parameter. Use this to make icons interactive
-     * for actions like opening menus, triggering functions, or navigation.
-     */
-    onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => any;
-    /**
-     * Additional CSS classes to apply to the SVG icon element.
-     * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.
-     */
-    extraClassNames?: string;
-    /**
-     * HTML ID attribute for the SVG icon element.
-     * Should be unique across the page for proper HTML semantics and accessibility.
-     */
-    id?: string;
-    /**
-     * Test ID attribute for the SVG icon element used in automated testing.
-     * Applied to the `data-testid` attribute for element selection in test suites.
-     */
-    testId?: string;
-    /**
-     * Custom identifier placed in the `data-customid` attribute on the icon element.
-     * Useful for identifying the specific icon in event handlers when multiple icons
-     * share the same click handler. Helps distinguish which icon was clicked.
-     */
-    customId?: string;
-    /**
-     * SVG viewBox attribute that defines the coordinate system and aspect ratio.
-     * Format: "min-x min-y width height" (e.g., "0 0 24 24").
-     * If not provided, uses the default viewBox from the SVG definition.
-     * Use this to crop or scale the icon's visible area.
-     */
-    viewBox?: string;
+interface SvgIconProps extends TooltipComponentProps {
+  /**
+   * SVG icon identifier or class name to display.
+   * This should correspond to an available SVG icon in your icon system.
+   * Examples: 'fc-zoom', 'fc-delete', 'custom-arrow'.
+   */
+  icon: string;
+  /**
+   * Visual style type that determines the icon's color and appearance:
+   * - `default`: Uses automatic dark/light text colors based on theme
+   * - `theme`: Uses primary theme colors
+   * - `white`: Pure white color
+   * - `text`: Uses standard text color
+   * - `dark-gray`: Dark gray color
+   * - `darkish-gray`: Medium-dark gray color
+   * - `gray`: Standard gray color
+   * - `color`: Uses custom color specified in `color` prop
+   * - `info`: Blue informational color
+   * - `warning`: Yellow/orange warning color
+   * - `danger`: Red error/danger color
+   * - `success`: Green success color
+   * - `theme-light`: Lighter version of theme color
+   * - `inherit`: Inherits color from parent element
+   * @default 'default'
+   */
+  type?: SvgIconType;
+  /**
+   * Custom color value for the icon when `type` is set to 'color'.
+   * Can be any valid CSS color (hex, rgb, color names, etc.).
+   * This property is required when type is 'color'.
+   */
+  color?: string;
+  /**
+   * Callback function triggered when the icon is clicked.
+   * Receives the mouse event as a parameter. Use this to make icons interactive
+   * for actions like opening menus, triggering functions, or navigation.
+   */
+  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => any;
+  /**
+   * Additional CSS classes to apply to the SVG icon element.
+   * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.
+   */
+  extraClassNames?: string;
+  /**
+   * HTML ID attribute for the SVG icon element.
+   * Should be unique across the page for proper HTML semantics and accessibility.
+   */
+  id?: string;
+  /**
+   * Test ID attribute for the SVG icon element used in automated testing.
+   * Applied to the `data-testid` attribute for element selection in test suites.
+   */
+  testId?: string;
+  /**
+   * Custom identifier placed in the `data-customid` attribute on the icon element.
+   * Useful for identifying the specific icon in event handlers when multiple icons
+   * share the same click handler. Helps distinguish which icon was clicked.
+   */
+  customId?: string;
+  /**
+   * SVG viewBox attribute that defines the coordinate system and aspect ratio.
+   * Format: "min-x min-y width height" (e.g., "0 0 24 24").
+   * If not provided, uses the default viewBox from the SVG definition.
+   * Use this to crop or scale the icon's visible area.
+   */
+  viewBox?: string;
 }
+//#endregion
+export { SvgIconProps, SvgIconType, svgIconTypes };

package/dist/src/SvgIcon/index.d.ts

@@ -1 +1,2 @@
-export { default } from './SvgIcon';
+import SvgIcon from "./SvgIcon.js";
+export { SvgIcon as default };

package/dist/src/Tabs/Tabs.d.ts

@@ -1,4 +1,7 @@
-import React from 'react';
-import { TabsProps } from './Tabs.types';
+import { TabsProps } from "./Tabs.types.js";
+import React from "react";
+
+//#region src/Tabs/Tabs.d.ts
 declare const Tabs: React.FunctionComponent<TabsProps>;
-export default Tabs;
+//#endregion
+export { Tabs as default };

package/dist/src/Tabs/Tabs.types.d.ts

@@ -1,100 +1,105 @@
-import React from 'react';
+import React from "react";
+
+//#region src/Tabs/Tabs.types.d.ts
+
 /**
  * Props for the Tabs component that creates a tabbed interface for organizing content.
  */
-export interface TabsProps {
+interface TabsProps {
+  /**
+   * Additional CSS classes to apply to the tabs container.
+   * Use this to customize the overall appearance and layout of the tab component.
+   */
+  extraClassNames?: string;
+  /**
+   * ID of the tab that should be active when the component first loads.
+   * Only used for uncontrolled tabs where the component manages its own active state.
+   * Should match the `id` of one of the tabs in the `tabs` array.
+   */
+  defaultActiveTab?: string;
+  /**
+   * ID of the currently active tab for controlled component behavior.
+   * When provided, the component becomes controlled and you must handle tab changes
+   * via the `onTabSelect` callback to update this value.
+   */
+  activeTab?: string;
+  /**
+   * When true, enables smooth transitions when switching between tabs.
+   * Provides visual animation effects during tab content changes.
+   */
+  transition?: boolean;
+  /**
+   * Callback function triggered when a user selects a different tab.
+   * Receives the ID of the newly selected tab. Use this to handle tab changes
+   * and update the `activeTab` prop in controlled mode.
+   */
+  onTabSelect?: (tabId: string) => void;
+  /**
+   * HTML ID attribute for the tabs container element.
+   * Should be unique across the page for proper HTML semantics and accessibility.
+   */
+  id?: string;
+  /**
+   * Test ID attribute for the tabs container used in automated testing.
+   * Applied to the main tabs component for test targeting and interaction.
+   */
+  testId?: string;
+  /**
+   * When true, makes the tab headers stretch to fill the full width of the container.
+   * Each tab header will take equal width. When false, tabs size based on their content.
+   */
+  stretchTabs?: boolean;
+  /**
+   * Array of tab configurations that define the available tabs and their content.
+   * Each tab represents a separate page or section within the tabbed interface.
+   */
+  tabs: {
     /**
-     * Additional CSS classes to apply to the tabs container.
-     * Use this to customize the overall appearance and layout of the tab component.
+     * Display text for the tab header.
+     * This is what users see and click on to switch tabs.
      */
-    extraClassNames?: string;
+    label: string;
     /**
-     * ID of the tab that should be active when the component first loads.
-     * Only used for uncontrolled tabs where the component manages its own active state.
-     * Should match the `id` of one of the tabs in the `tabs` array.
+     * Unique identifier for this tab.
+     * Used for tracking the active tab and in callbacks. Must be unique within the tabs array.
      */
-    defaultActiveTab?: string;
+    id: string;
     /**
-     * ID of the currently active tab for controlled component behavior.
-     * When provided, the component becomes controlled and you must handle tab changes
-     * via the `onTabSelect` callback to update this value.
+     * React content to display when this tab is selected.
+     * Can be any React element including complex layouts, forms, or other components.
      */
-    activeTab?: string;
+    content: React.JSX.Element;
     /**
-     * When true, enables smooth transitions when switching between tabs.
-     * Provides visual animation effects during tab content changes.
+     * Icon class name to display next to the tab label.
+     * Typically uses FontAwesome classes for visual enhancement of the tab header.
      */
-    transition?: boolean;
+    icon?: string;
     /**
-     * Callback function triggered when a user selects a different tab.
-     * Receives the ID of the newly selected tab. Use this to handle tab changes
-     * and update the `activeTab` prop in controlled mode.
+     * Test ID attribute for this specific tab header used in automated testing.
+     * Helps identify and interact with individual tabs in test suites.
      */
-    onTabSelect?: (tabId: string) => void;
+    testId?: string;
     /**
-     * HTML ID attribute for the tabs container element.
-     * Should be unique across the page for proper HTML semantics and accessibility.
+     * Additional CSS classes to apply to this tab's header element.
+     * Use this to customize individual tab appearance beyond global styling.
      */
-    id?: string;
+    tabExtraClassNames?: string;
     /**
-     * Test ID attribute for the tabs container used in automated testing.
-     * Applied to the main tabs component for test targeting and interaction.
+     * When true, disables this tab preventing user interaction.
+     * Disabled tabs appear visually dimmed and cannot be selected.
      */
-    testId?: string;
+    disabled?: boolean;
     /**
-     * When true, makes the tab headers stretch to fill the full width of the container.
-     * Each tab header will take equal width. When false, tabs size based on their content.
+     * Additional CSS classes to apply to this tab's content area.
+     * Use this to customize the styling of the content when this tab is active.
      */
-    stretchTabs?: boolean;
+    tabContentExtraClassNames?: string;
     /**
-     * Array of tab configurations that define the available tabs and their content.
-     * Each tab represents a separate page or section within the tabbed interface.
+     * Additional CSS classes to apply to this tab's label.
+     * Use this to customize the styling of the label.
      */
-    tabs: {
-        /**
-         * Display text for the tab header.
-         * This is what users see and click on to switch tabs.
-         */
-        label: string;
-        /**
-         * Unique identifier for this tab.
-         * Used for tracking the active tab and in callbacks. Must be unique within the tabs array.
-         */
-        id: string;
-        /**
-         * React content to display when this tab is selected.
-         * Can be any React element including complex layouts, forms, or other components.
-         */
-        content: React.JSX.Element;
-        /**
-         * Icon class name to display next to the tab label.
-         * Typically uses FontAwesome classes for visual enhancement of the tab header.
-         */
-        icon?: string;
-        /**
-         * Test ID attribute for this specific tab header used in automated testing.
-         * Helps identify and interact with individual tabs in test suites.
-         */
-        testId?: string;
-        /**
-         * Additional CSS classes to apply to this tab's header element.
-         * Use this to customize individual tab appearance beyond global styling.
-         */
-        tabExtraClassNames?: string;
-        /**
-         * When true, disables this tab preventing user interaction.
-         * Disabled tabs appear visually dimmed and cannot be selected.
-         */
-        disabled?: boolean;
-        /**
-         * Additional CSS classes to apply to this tab's content area.
-         * Use this to customize the styling of the content when this tab is active.
-         */
-        tabContentExtraClassNames?: string;
-        /**
-         * Additional CSS classes to apply to this tab's label.
-         * Use this to customize the styling of the label.
-         */
-        tabLabelExtraClassNames?: string;
-    }[];
+    tabLabelExtraClassNames?: string;
+  }[];
 }
+//#endregion
+export { TabsProps };

package/dist/src/Tabs/index.d.ts

@@ -1 +1,2 @@
-export { default } from './Tabs';
+import Tabs from "./Tabs.js";
+export { Tabs as default };

package/dist/src/TextArea/TextArea.d.ts

@@ -1,6 +1,11 @@
-import React from 'react';
-import { TextAreaProps } from './TextArea.types';
+import { TextAreaProps } from "./TextArea.types.js";
+import React from "react";
+
+//#region src/TextArea/TextArea.d.ts
+
 /**
  * TextArea.
  */
-export declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextArea: React.ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { TextArea };

package/dist/src/TextArea/TextArea.types.d.ts

@@ -1,115 +1,120 @@
-import { FormControlElement } from '../types';
+import { FormControlElement } from "../types.js";
+
+//#region src/TextArea/TextArea.types.d.ts
+
 /**
  * Props for the TextArea component that provides a multi-line text input control.
  */
-export interface TextAreaProps {
-    /**
-     * Additional CSS classes to apply to the textarea element.
-     * Use this to customize the appearance beyond the default styling.
-     */
-    extraClassNames?: string;
-    /**
-     * HTML ID attribute for the textarea element.
-     * Should be unique across the page for proper HTML semantics and accessibility.
-     */
-    id?: string;
-    /**
-     * Name attribute for the textarea used in form submission.
-     * Identifies the textarea's data when the form is submitted to a server.
-     */
-    name?: string;
-    /**
-     * Callback function triggered when the textarea value changes.
-     * Receives the change event containing the new value. Use this to update
-     * your component state in controlled input scenarios.
-     */
-    onChange?: React.ChangeEventHandler<FormControlElement>;
-    /**
-     * Callback function triggered when a key is released while the textarea has focus.
-     * Useful for implementing search-as-you-type functionality or debounced input handling.
-     */
-    onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
-    /**
-     * Callback function triggered when a key is pressed while the textarea has focus.
-     * Useful for implementing keyboard shortcuts, form submission shortcuts,
-     * or preventing certain characters from being entered.
-     */
-    onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
-    /**
-     * Callback function triggered when the textarea receives focus.
-     * Use this to handle focus-related logic such as showing hints,
-     * clearing placeholder text, or updating UI state.
-     */
-    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
-    /**
-     * Callback function triggered when the textarea loses focus.
-     * Commonly used for form validation, saving draft data, or
-     * updating UI state when users finish interacting with the field.
-     */
-    onBlur?: React.FocusEventHandler<FormControlElement>;
-    /**
-     * Callback function triggered when the text selection changes in the
-     * textarea. Useful for implementing features like mention autocomplete or
-     * context-sensitive tools that need to react to cursor position or text
-     * selection changes.
-     */
-    onSelectionChange?: (e: Event) => void;
-    /**
-     * Placeholder text displayed when the textarea is empty.
-     * Provides users with a hint about what type of content is expected.
-     * Should be descriptive but not replace proper labels.
-     */
-    placeholder?: string;
-    /**
-     * When true, makes the textarea read-only, preventing user input.
-     * The field will display its value but users cannot modify it. Unlike disabled fields,
-     * read-only fields can still receive focus and their values are included in form submissions.
-     */
-    readonly?: boolean;
-    /**
-     * When true, disables the textarea preventing any user interaction.
-     * Disabled fields appear visually dimmed, cannot receive focus, and their
-     * values are not included in form submissions.
-     */
-    disabled?: boolean;
-    /**
-     * Number of visible text lines in the textarea.
-     * Controls the initial height of the textarea. Users can typically resize
-     * the textarea if the browser allows it.
-     * @default 3
-     */
-    rows?: number;
-    /**
-     * Number of visible character columns in the textarea.
-     * Controls the initial width of the textarea based on average character width.
-     * Less commonly used than CSS width styling.
-     */
-    cols?: number;
-    /**
-     * When true, automatically focuses this textarea when the component mounts.
-     * Useful for modal dialogs or forms where immediate input is expected.
-     * Should be used sparingly to avoid accessibility issues.
-     */
-    autoFocus?: boolean;
-    /**
-     * Test ID attribute for the textarea element used in automated testing.
-     * Applied to the `data-testid` attribute for element selection in test suites.
-     */
-    testId?: string;
-    /**
-     * Current value of the textarea for controlled component behavior.
-     * Can be a string for text content, an array of strings for multi-value scenarios,
-     * or a number that will be converted to string. Use this for controlled input components.
-     */
-    value?: string | string[] | number;
-    /**
-     * When true, displays error styling on the textarea.
-     * Typically changes border color to red and may add error-related visual cues.
-     * Usually used in combination with error messages to provide validation feedback.
-     */
-    showError?: boolean;
-    /**
-     * Ref object to access the underlying textarea DOM element.
-     */
-    ref?: React.Ref<HTMLTextAreaElement>;
+interface TextAreaProps {
+  /**
+   * Additional CSS classes to apply to the textarea element.
+   * Use this to customize the appearance beyond the default styling.
+   */
+  extraClassNames?: string;
+  /**
+   * HTML ID attribute for the textarea element.
+   * Should be unique across the page for proper HTML semantics and accessibility.
+   */
+  id?: string;
+  /**
+   * Name attribute for the textarea used in form submission.
+   * Identifies the textarea's data when the form is submitted to a server.
+   */
+  name?: string;
+  /**
+   * Callback function triggered when the textarea value changes.
+   * Receives the change event containing the new value. Use this to update
+   * your component state in controlled input scenarios.
+   */
+  onChange?: React.ChangeEventHandler<FormControlElement>;
+  /**
+   * Callback function triggered when a key is released while the textarea has focus.
+   * Useful for implementing search-as-you-type functionality or debounced input handling.
+   */
+  onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
+  /**
+   * Callback function triggered when a key is pressed while the textarea has focus.
+   * Useful for implementing keyboard shortcuts, form submission shortcuts,
+   * or preventing certain characters from being entered.
+   */
+  onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
+  /**
+   * Callback function triggered when the textarea receives focus.
+   * Use this to handle focus-related logic such as showing hints,
+   * clearing placeholder text, or updating UI state.
+   */
+  onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+  /**
+   * Callback function triggered when the textarea loses focus.
+   * Commonly used for form validation, saving draft data, or
+   * updating UI state when users finish interacting with the field.
+   */
+  onBlur?: React.FocusEventHandler<FormControlElement>;
+  /**
+   * Callback function triggered when the text selection changes in the
+   * textarea. Useful for implementing features like mention autocomplete or
+   * context-sensitive tools that need to react to cursor position or text
+   * selection changes.
+   */
+  onSelectionChange?: (e: Event) => void;
+  /**
+   * Placeholder text displayed when the textarea is empty.
+   * Provides users with a hint about what type of content is expected.
+   * Should be descriptive but not replace proper labels.
+   */
+  placeholder?: string;
+  /**
+   * When true, makes the textarea read-only, preventing user input.
+   * The field will display its value but users cannot modify it. Unlike disabled fields,
+   * read-only fields can still receive focus and their values are included in form submissions.
+   */
+  readonly?: boolean;
+  /**
+   * When true, disables the textarea preventing any user interaction.
+   * Disabled fields appear visually dimmed, cannot receive focus, and their
+   * values are not included in form submissions.
+   */
+  disabled?: boolean;
+  /**
+   * Number of visible text lines in the textarea.
+   * Controls the initial height of the textarea. Users can typically resize
+   * the textarea if the browser allows it.
+   * @default 3
+   */
+  rows?: number;
+  /**
+   * Number of visible character columns in the textarea.
+   * Controls the initial width of the textarea based on average character width.
+   * Less commonly used than CSS width styling.
+   */
+  cols?: number;
+  /**
+   * When true, automatically focuses this textarea when the component mounts.
+   * Useful for modal dialogs or forms where immediate input is expected.
+   * Should be used sparingly to avoid accessibility issues.
+   */
+  autoFocus?: boolean;
+  /**
+   * Test ID attribute for the textarea element used in automated testing.
+   * Applied to the `data-testid` attribute for element selection in test suites.
+   */
+  testId?: string;
+  /**
+   * Current value of the textarea for controlled component behavior.
+   * Can be a string for text content, an array of strings for multi-value scenarios,
+   * or a number that will be converted to string. Use this for controlled input components.
+   */
+  value?: string | string[] | number;
+  /**
+   * When true, displays error styling on the textarea.
+   * Typically changes border color to red and may add error-related visual cues.
+   * Usually used in combination with error messages to provide validation feedback.
+   */
+  showError?: boolean;
+  /**
+   * Ref object to access the underlying textarea DOM element.
+   */
+  ref?: React.Ref<HTMLTextAreaElement>;
 }
+//#endregion
+export { TextAreaProps };

package/dist/src/TextArea/index.d.ts

@@ -1 +1,2 @@
-export { TextArea as default } from './TextArea';
+import { TextArea } from "./TextArea.js";
+export { TextArea as default };