@seeqdev/qomponents 0.0.209 → 0.0.215

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

@@ -1,91 +1,94 @@
-import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
+
+//#region src/Checkbox/Checkbox.types.d.ts
 type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-export interface CheckboxProps extends TooltipComponentProps {
-    /**
-     * Additional CSS classes to apply to the checkbox container.
-     * These classes are combined with the component's built-in styling.
-     * Use this to customize the overall appearance of the checkbox wrapper.
-     */
-    extraClassNames?: string;
-    /**
-     * Additional CSS classes to apply specifically to the label element.
-     * Use this to customize the styling of the text label that appears next to the checkbox.
-     * Does not affect the input element itself.
-     */
-    extraLabelClassNames?: string;
-    /**
-     * Determines the type of input control to render:
-     * - `checkbox`: Standard checkbox that can be checked/unchecked independently
-     * - `radio`: Radio button that is typically part of a group where only one can be selected
-     * @default 'checkbox'
-     */
-    type?: 'radio' | 'checkbox';
-    /**
-     * HTML ID attribute for the input element.
-     * Should be unique across the entire page for proper HTML semantics and accessibility.
-     * If not provided, a random ID will be generated automatically.
-     * Used for associating the label with the input for accessibility.
-     */
-    id?: string;
-    /**
-     * Name attribute for the input element, used for form submission and grouping.
-     * For radio buttons, all options in the same group should share the same name.
-     * For checkboxes, this identifies the field when the form is submitted.
-     */
-    name?: string;
-    /**
-     * Controls whether the checkbox/radio button is currently checked.
-     * Use this for controlled components where you manage the state externally.
-     * When provided, the component becomes controlled and you must handle state changes via `onChange`.
-     */
-    checked?: boolean;
-    /**
-     * Sets the initial checked state for uncontrolled components.
-     * Only used when `checked` is not provided (uncontrolled mode).
-     * The component will manage its own state after the initial render.
-     */
-    defaultChecked?: boolean;
-    /**
-     * The value associated with this checkbox/radio button.
-     * This is the value that will be submitted with the form when the input is checked.
-     * For radio buttons, each option in a group should have a unique value.
-     */
-    value?: string | number;
-    /**
-     * The text or content to display as the label next to the checkbox/radio button.
-     * Can be a simple string or any React element for more complex label content.
-     * Clicking on this label will toggle the input due to proper accessibility association.
-     */
-    label?: string | React.ReactNode;
-    /**
-     * Callback function triggered when the checkbox/radio button state changes.
-     * Receives the change event which contains the new checked state and value.
-     * Use this to update your component state when in controlled mode.
-     */
-    onChange?: React.ChangeEventHandler<FormControlElement>;
-    /**
-     * Callback function triggered when a key is pressed while the input has focus.
-     * Useful for implementing custom keyboard navigation or shortcuts.
-     * Receives the keyboard event with details about the pressed key.
-     */
-    onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
-    /**
-     * Callback function triggered when the input element is clicked.
-     * This fires before the onChange event and can be used for additional click handling.
-     * Note that clicking the associated label will also trigger this event.
-     */
-    onClick?: React.MouseEventHandler<FormControlElement>;
-    /**
-     * When true, disables the checkbox/radio button preventing user interaction.
-     * Disabled inputs appear visually dimmed and do not respond to user actions.
-     * The input will not be included in form submissions when disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Test ID attribute for the input element used in automated testing.
-     * Applied to the `data-testid` attribute for element selection in test suites.
-     * Helps identify this specific checkbox/radio button in tests.
-     */
-    testId?: string;
+interface CheckboxProps extends TooltipComponentProps {
+  /**
+   * Additional CSS classes to apply to the checkbox container.
+   * These classes are combined with the component's built-in styling.
+   * Use this to customize the overall appearance of the checkbox wrapper.
+   */
+  extraClassNames?: string;
+  /**
+   * Additional CSS classes to apply specifically to the label element.
+   * Use this to customize the styling of the text label that appears next to the checkbox.
+   * Does not affect the input element itself.
+   */
+  extraLabelClassNames?: string;
+  /**
+   * Determines the type of input control to render:
+   * - `checkbox`: Standard checkbox that can be checked/unchecked independently
+   * - `radio`: Radio button that is typically part of a group where only one can be selected
+   * @default 'checkbox'
+   */
+  type?: 'radio' | 'checkbox';
+  /**
+   * HTML ID attribute for the input element.
+   * Should be unique across the entire page for proper HTML semantics and accessibility.
+   * If not provided, a random ID will be generated automatically.
+   * Used for associating the label with the input for accessibility.
+   */
+  id?: string;
+  /**
+   * Name attribute for the input element, used for form submission and grouping.
+   * For radio buttons, all options in the same group should share the same name.
+   * For checkboxes, this identifies the field when the form is submitted.
+   */
+  name?: string;
+  /**
+   * Controls whether the checkbox/radio button is currently checked.
+   * Use this for controlled components where you manage the state externally.
+   * When provided, the component becomes controlled and you must handle state changes via `onChange`.
+   */
+  checked?: boolean;
+  /**
+   * Sets the initial checked state for uncontrolled components.
+   * Only used when `checked` is not provided (uncontrolled mode).
+   * The component will manage its own state after the initial render.
+   */
+  defaultChecked?: boolean;
+  /**
+   * The value associated with this checkbox/radio button.
+   * This is the value that will be submitted with the form when the input is checked.
+   * For radio buttons, each option in a group should have a unique value.
+   */
+  value?: string | number;
+  /**
+   * The text or content to display as the label next to the checkbox/radio button.
+   * Can be a simple string or any React element for more complex label content.
+   * Clicking on this label will toggle the input due to proper accessibility association.
+   */
+  label?: string | React.ReactNode;
+  /**
+   * Callback function triggered when the checkbox/radio button state changes.
+   * Receives the change event which contains the new checked state and value.
+   * Use this to update your component state when in controlled mode.
+   */
+  onChange?: React.ChangeEventHandler<FormControlElement>;
+  /**
+   * Callback function triggered when a key is pressed while the input has focus.
+   * Useful for implementing custom keyboard navigation or shortcuts.
+   * Receives the keyboard event with details about the pressed key.
+   */
+  onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
+  /**
+   * Callback function triggered when the input element is clicked.
+   * This fires before the onChange event and can be used for additional click handling.
+   * Note that clicking the associated label will also trigger this event.
+   */
+  onClick?: React.MouseEventHandler<FormControlElement>;
+  /**
+   * When true, disables the checkbox/radio button preventing user interaction.
+   * Disabled inputs appear visually dimmed and do not respond to user actions.
+   * The input will not be included in form submissions when disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Test ID attribute for the input element used in automated testing.
+   * Applied to the `data-testid` attribute for element selection in test suites.
+   * Helps identify this specific checkbox/radio button in tests.
+   */
+  testId?: string;
 }
-export {};
+//#endregion
+export { CheckboxProps };

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

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

package/dist/src/Collapse/Collapse.d.ts

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

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

@@ -1,18 +1,21 @@
+//#region src/Collapse/Collapse.types.d.ts
 /**
  * Props for the Collapse component that creates smooth expand/collapse animations.
  */
-export interface CollapseProps {
-    /**
-     * Controls whether the collapse content is visible and expanded.
-     * When true, the content smoothly expands to full height.
-     * When false, the content smoothly collapses to zero height.
-     * Use this to control the collapse state from parent components.
-     */
-    isVisible: boolean;
-    /**
-     * Content to display inside the collapsible area.
-     * Can be any React elements that you want to show/hide with animation.
-     * The content will be measured and animated when expanding or collapsing.
-     */
-    children: React.ReactNode;
+interface CollapseProps {
+  /**
+   * Controls whether the collapse content is visible and expanded.
+   * When true, the content smoothly expands to full height.
+   * When false, the content smoothly collapses to zero height.
+   * Use this to control the collapse state from parent components.
+   */
+  isVisible: boolean;
+  /**
+   * Content to display inside the collapsible area.
+   * Can be any React elements that you want to show/hide with animation.
+   * The content will be measured and animated when expanding or collapsing.
+   */
+  children: React.ReactNode;
 }
+//#endregion
+export { CollapseProps };

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

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

package/dist/src/Icon/Icon.d.ts

@@ -1,9 +1,13 @@
-import React from 'react';
-import { IconProps } from './Icon.types';
+import { IconProps } from "./Icon.types.js";
+import React from "react";
+
+//#region src/Icon/Icon.d.ts
+
 /**
  * Icon:
  *  - access to Seeq custom icons by providing the desired icon
  *  - leverage "type" to style your icon
  */
 declare const Icon: React.FunctionComponent<IconProps>;
-export default Icon;
+//#endregion
+export { Icon as default };

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

@@ -1,90 +1,94 @@
-import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
-export declare const iconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success"];
-export type IconType = (typeof iconTypes)[number];
-export type IconSize = '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
+import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
+
+//#region src/Icon/Icon.types.d.ts
+declare const iconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success"];
+type IconType = (typeof iconTypes)[number];
+type IconSize = '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
 /**
  * Props for the Icon component that renders customizable icons with various styling options.
  * Extends TooltipComponentProps to support tooltip functionality on the icon.
  */
-export interface IconProps extends TooltipComponentProps {
-    /**
-     * Icon class name to display, typically from FontAwesome.
-     * Examples: 'fc-zoom', 'fc-delete', 'fc-save'. This determines which icon is rendered.
-     */
-    icon: string;
-    /**
-     * Custom prefix for the icon class when not using standard FontAwesome icons.
-     * By default, icons are prefixed with 'fa-sharp fa-regular', but some icons
-     * from different icon sets require specific prefixes. Use this to override the default.
-     */
-    iconPrefix?: string;
-    /**
-     * Visual style type that determines the icon's color and appearance:
-     * - `theme`: Uses primary theme colors (default)
-     * - `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 'theme'
-     */
-    type?: IconType;
-    /**
-     * Icon size, mapped to FontAwesome sizing classes so it works for both FA and FontCustom icons.
-     * Examples: 'sm', 'lg', 'xl', '2xl', '1x'...'10x', 'xs', '2xs'.
-     */
-    size?: IconSize;
-    /**
-     * 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 icon element.
-     * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.
-     */
-    extraClassNames?: string;
-    /**
-     * HTML ID attribute for the icon element.
-     * Should be unique across the page for proper HTML semantics and accessibility.
-     */
-    id?: string;
-    /**
-     * @deprecated Use `size="lg"` instead.
-     */
-    large?: boolean;
-    /**
-     * @deprecated Use `size="sm"` instead.
-     */
-    small?: boolean;
-    /**
-     * Test ID attribute for the 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;
-    /**
-     * Numeric value associated with the icon, purpose depends on specific use case.
-     * Can be used for ordering, counting, or any numeric data related to the icon.
-     */
-    number?: number;
+interface IconProps extends TooltipComponentProps {
+  /**
+   * Icon class name to display, typically from FontAwesome.
+   * Examples: 'fc-zoom', 'fc-delete', 'fc-save'. This determines which icon is rendered.
+   */
+  icon: string;
+  /**
+   * Custom prefix for the icon class when not using standard FontAwesome icons.
+   * By default, icons are prefixed with 'fa-sharp fa-regular', but some icons
+   * from different icon sets require specific prefixes. Use this to override the default.
+   */
+  iconPrefix?: string;
+  /**
+   * Visual style type that determines the icon's color and appearance:
+   * - `theme`: Uses primary theme colors (default)
+   * - `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 'theme'
+   */
+  type?: IconType;
+  /**
+   * Icon size, mapped to FontAwesome sizing classes so it works for both FA and FontCustom icons.
+   * Examples: 'sm', 'lg', 'xl', '2xl', '1x'...'10x', 'xs', '2xs'.
+   */
+  size?: IconSize;
+  /**
+   * 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 icon element.
+   * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.
+   */
+  extraClassNames?: string;
+  /**
+   * HTML ID attribute for the icon element.
+   * Should be unique across the page for proper HTML semantics and accessibility.
+   */
+  id?: string;
+  /**
+   * @deprecated Use `size="lg"` instead.
+   */
+  large?: boolean;
+  /**
+   * @deprecated Use `size="sm"` instead.
+   */
+  small?: boolean;
+  /**
+   * Test ID attribute for the 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;
+  /**
+   * Numeric value associated with the icon, purpose depends on specific use case.
+   * Can be used for ordering, counting, or any numeric data related to the icon.
+   */
+  number?: number;
 }
+//#endregion
+export { IconProps, IconSize, IconType, iconTypes };

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

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

package/dist/src/InputGroup/InputGroup.d.ts

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

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

@@ -1,61 +1,65 @@
-import { ButtonProps } from '../Button/Button.types';
-import { InputLengthStyleProps, TextFieldProps } from '../TextField/TextField.types';
-import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
+import { ButtonProps } from "../Button/Button.types.js";
+import { InputLengthStyleProps, TextFieldProps } from "../TextField/TextField.types.js";
+
+//#region src/InputGroup/InputGroup.types.d.ts
+
 /**
  * Interface for button elements that can be appended to an InputGroup.
  * Used when you want to add interactive buttons alongside the input field.
  */
 interface AppendedButtonProps {
-    /**
-     * Specifies that this appended item is an interactive button.
-     * Button items can trigger actions and provide additional functionality to the input.
-     */
-    variant: 'button';
-    /**
-     * Configuration properties for the button component.
-     * Uses all standard Button props including click handlers, styling, icons, and tooltips.
-     */
-    buttonProps: ButtonProps;
+  /**
+   * Specifies that this appended item is an interactive button.
+   * Button items can trigger actions and provide additional functionality to the input.
+   */
+  variant: 'button';
+  /**
+   * Configuration properties for the button component.
+   * Uses all standard Button props including click handlers, styling, icons, and tooltips.
+   */
+  buttonProps: ButtonProps;
 }
 /**
  * Interface for custom React elements that can be appended to an InputGroup.
  * Used when you need to add non-button content like icons, labels, or decorative elements.
  */
 interface ElementProps {
-    /**
-     * Specifies that this appended item is a custom React element.
-     * Element items are typically decorative or informational and don't have built-in interactivity.
-     */
-    variant: 'element';
-    /**
-     * The React content to render alongside the input field.
-     * Can be any valid React node including text, icons, indicators, or complex components.
-     */
-    element: React.ReactNode;
+  /**
+   * Specifies that this appended item is a custom React element.
+   * Element items are typically decorative or informational and don't have built-in interactivity.
+   */
+  variant: 'element';
+  /**
+   * The React content to render alongside the input field.
+   * Can be any valid React node including text, icons, indicators, or complex components.
+   */
+  element: React.ReactNode;
 }
-export type AppendedProps = AppendedButtonProps | ElementProps | undefined;
+type AppendedProps = AppendedButtonProps | ElementProps | undefined;
 /**
  * Base interface for InputGroup component properties.
  * Extends TextFieldProps to inherit all text input functionality while adding group-specific features.
  */
 interface BaseInputGroupProps extends TextFieldProps {
-    /**
-     * Array of elements to append to the right side of the input field.
-     * Each item can be either a button (for interactive functionality) or an element (for decoration).
-     * Items are displayed in the order they appear in the array, creating a cohesive input group.
-     */
-    append: AppendedProps[];
-    /**
-     * Custom input field component to render instead of the default TextField.
-     * Use this when you need specialized input behavior while maintaining the group styling.
-     * The field will be integrated seamlessly with the appended elements.
-     */
-    field?: React.ReactNode;
+  /**
+   * Array of elements to append to the right side of the input field.
+   * Each item can be either a button (for interactive functionality) or an element (for decoration).
+   * Items are displayed in the order they appear in the array, creating a cohesive input group.
+   */
+  append: AppendedProps[];
+  /**
+   * Custom input field component to render instead of the default TextField.
+   * Use this when you need specialized input behavior while maintaining the group styling.
+   * The field will be integrated seamlessly with the appended elements.
+   */
+  field?: React.ReactNode;
 }
 /**
  * Complete props interface for the InputGroup component.
  * Combines base input group functionality with tooltip support and text length constraints.
  * Creates a cohesive input control with attached buttons or decorative elements.
  */
-export type InputGroupProps = BaseInputGroupProps & TooltipComponentProps & InputLengthStyleProps;
-export {};
+type InputGroupProps = BaseInputGroupProps & TooltipComponentProps & InputLengthStyleProps;
+//#endregion
+export { AppendedProps, InputGroupProps };

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

@@ -1,2 +1,3 @@
-export { InputGroup as default } from './InputGroup';
-export type { AppendedProps } from './InputGroup.types';
+import { AppendedProps } from "./InputGroup.types.js";
+import { InputGroup } from "./InputGroup.js";
+export { type AppendedProps, InputGroup as default };

package/dist/src/Modal/Modal.d.ts

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