@seeqdev/qomponents 0.0.209 → 0.0.215

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

@@ -1,122 +1,126 @@
-import React, { MouseEvent } from 'react';
-import { TooltipProps } from '../Tooltip/Tooltip.types';
-export declare const toolbarButtonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
-export type ToolbarButtonVariant = (typeof toolbarButtonVariants)[number];
+import { TooltipProps } from "../Tooltip/Tooltip.types.js";
+import React, { MouseEvent } from "react";
+
+//#region src/ToolbarButton/ToolbarButton.types.d.ts
+declare const toolbarButtonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
+type ToolbarButtonVariant = (typeof toolbarButtonVariants)[number];
 /**
  * Props for the ToolbarButton component that creates toolbar-style buttons with optional popovers.
  * Designed for use in toolbars, action bars, and similar UI contexts.
  */
-export interface ToolbarButtonProps {
-    /**
-     * Primary icon class name to display on the button.
-     * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
-     * This is the main visual identifier for the button's function.
-     */
-    icon: string;
-    /**
-     * Secondary icon class name to display alongside the primary icon.
-     * Useful for showing state indicators, badges, or additional context.
-     */
-    secondIcon?: string;
-    /**
-     * When true, forces the primary icon to render in a smaller size.
-     * Overrides automatic sizing based on button variant or layout.
-     */
-    forceSmallIcon?: boolean;
-    /**
-     * Text label for the toolbar button.
-     * Typically shown when the toolbar has sufficient width or in expanded states.
-     * Helps users understand the button's function when icons alone aren't clear.
-     */
-    label?: string;
-    /**
-     * React content to display in an attached popover when the button is clicked.
-     * Can be any React elements including forms, menus, or complex layouts.
-     * When provided, the button becomes a popover trigger.
-     */
-    popoverContent?: React.ReactNode;
-    /**
-     * When true, renders the button in a compact, icon-only mode.
-     * Hides the label even if provided and uses minimal padding for space-constrained layouts.
-     */
-    isSmall?: boolean;
-    /**
-     * HTML ID attribute for the toolbar button element.
-     * Should be unique across the page for proper HTML semantics and accessibility.
-     */
-    id?: string;
-    /**
-     * Additional CSS classes to apply to the toolbar button container.
-     * Use this to customize the button's appearance beyond the built-in variants.
-     */
-    extraClassNames?: string;
-    /**
-     * Test ID attribute for the toolbar button element used in automated testing.
-     * Applied to the button element for test targeting and interaction.
-     */
-    testId?: string;
-    /**
-     * Text to display in the button's tooltip when hovering.
-     * Provides additional context or instructions about the button's function.
-     */
-    tooltipText?: string;
-    /**
-     * When true, the tooltip text is rendered as HTML allowing for rich content.
-     * When false (default), the tooltip text is treated as plain text for security.
-     * Only set to true if you trust the tooltip content source.
-     */
-    isHtmlTooltip?: boolean;
-    /**
-     * Test ID attribute specifically for the tooltip element used in automated testing.
-     * Helps identify and interact with the tooltip separately from the button.
-     */
-    tooltipTestId?: string;
-    /**
-     * Configuration options for customizing tooltip behavior and appearance.
-     * Omits the 'text' property since that's handled by the `tooltipText` prop.
-     * Includes options like position, delay, and other tooltip-specific settings.
-     */
-    tooltipOptions?: Omit<TooltipProps, 'text'>;
-    /**
-     * When true, disables the toolbar button preventing user interaction.
-     * Disabled buttons appear visually dimmed and don't respond to clicks or show popovers.
-     */
-    disabled?: boolean;
-    /**
-     * Callback function triggered when the toolbar button is clicked.
-     * Primarily used for tracking, analytics, or additional click handling.
-     * Note: this doesn't prevent popover opening if popoverContent is provided.
-     */
-    onClick?: (e: MouseEvent) => void;
-    /**
-     * When true, displays the button in an "active" or "pressed" visual state.
-     * Useful for toggle buttons or indicating the current tool/mode in a toolbar.
-     */
-    isActive?: boolean;
-    /**
-     * Callback function triggered when an attached popover is hidden/closed.
-     * Use this for cleanup, state management, or other hide-related side effects.
-     */
-    onHide?: () => void;
-    /**
-     * When true, displays a visual arrow on the button indicating it has a dropdown/popover.
-     * Helps users understand that clicking will reveal additional options or content.
-     */
-    hasArrow?: boolean;
-    /**
-     * When true, treats the primary icon string as an SVG identifier instead of a font icon class.
-     * Changes how the icon is rendered and styled within the component.
-     */
-    isPrimaryAnSvg?: boolean;
-    /**
-     * Additional CSS classes to apply specifically to the primary icon element.
-     * Use this to customize the icon's appearance independently from the button container.
-     */
-    primaryIconExtraClassNames?: string;
-    /** height for the icon */
-    iconHeight?: number;
-    /** width for the icon */
-    iconWidth?: number;
-    /** viewbox for the icon */
-    primaryIconViewbox?: string;
+interface ToolbarButtonProps {
+  /**
+   * Primary icon class name to display on the button.
+   * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
+   * This is the main visual identifier for the button's function.
+   */
+  icon: string;
+  /**
+   * Secondary icon class name to display alongside the primary icon.
+   * Useful for showing state indicators, badges, or additional context.
+   */
+  secondIcon?: string;
+  /**
+   * When true, forces the primary icon to render in a smaller size.
+   * Overrides automatic sizing based on button variant or layout.
+   */
+  forceSmallIcon?: boolean;
+  /**
+   * Text label for the toolbar button.
+   * Typically shown when the toolbar has sufficient width or in expanded states.
+   * Helps users understand the button's function when icons alone aren't clear.
+   */
+  label?: string;
+  /**
+   * React content to display in an attached popover when the button is clicked.
+   * Can be any React elements including forms, menus, or complex layouts.
+   * When provided, the button becomes a popover trigger.
+   */
+  popoverContent?: React.ReactNode;
+  /**
+   * When true, renders the button in a compact, icon-only mode.
+   * Hides the label even if provided and uses minimal padding for space-constrained layouts.
+   */
+  isSmall?: boolean;
+  /**
+   * HTML ID attribute for the toolbar button element.
+   * Should be unique across the page for proper HTML semantics and accessibility.
+   */
+  id?: string;
+  /**
+   * Additional CSS classes to apply to the toolbar button container.
+   * Use this to customize the button's appearance beyond the built-in variants.
+   */
+  extraClassNames?: string;
+  /**
+   * Test ID attribute for the toolbar button element used in automated testing.
+   * Applied to the button element for test targeting and interaction.
+   */
+  testId?: string;
+  /**
+   * Text to display in the button's tooltip when hovering.
+   * Provides additional context or instructions about the button's function.
+   */
+  tooltipText?: string;
+  /**
+   * When true, the tooltip text is rendered as HTML allowing for rich content.
+   * When false (default), the tooltip text is treated as plain text for security.
+   * Only set to true if you trust the tooltip content source.
+   */
+  isHtmlTooltip?: boolean;
+  /**
+   * Test ID attribute specifically for the tooltip element used in automated testing.
+   * Helps identify and interact with the tooltip separately from the button.
+   */
+  tooltipTestId?: string;
+  /**
+   * Configuration options for customizing tooltip behavior and appearance.
+   * Omits the 'text' property since that's handled by the `tooltipText` prop.
+   * Includes options like position, delay, and other tooltip-specific settings.
+   */
+  tooltipOptions?: Omit<TooltipProps, 'text'>;
+  /**
+   * When true, disables the toolbar button preventing user interaction.
+   * Disabled buttons appear visually dimmed and don't respond to clicks or show popovers.
+   */
+  disabled?: boolean;
+  /**
+   * Callback function triggered when the toolbar button is clicked.
+   * Primarily used for tracking, analytics, or additional click handling.
+   * Note: this doesn't prevent popover opening if popoverContent is provided.
+   */
+  onClick?: (e: MouseEvent) => void;
+  /**
+   * When true, displays the button in an "active" or "pressed" visual state.
+   * Useful for toggle buttons or indicating the current tool/mode in a toolbar.
+   */
+  isActive?: boolean;
+  /**
+   * Callback function triggered when an attached popover is hidden/closed.
+   * Use this for cleanup, state management, or other hide-related side effects.
+   */
+  onHide?: () => void;
+  /**
+   * When true, displays a visual arrow on the button indicating it has a dropdown/popover.
+   * Helps users understand that clicking will reveal additional options or content.
+   */
+  hasArrow?: boolean;
+  /**
+   * When true, treats the primary icon string as an SVG identifier instead of a font icon class.
+   * Changes how the icon is rendered and styled within the component.
+   */
+  isPrimaryAnSvg?: boolean;
+  /**
+   * Additional CSS classes to apply specifically to the primary icon element.
+   * Use this to customize the icon's appearance independently from the button container.
+   */
+  primaryIconExtraClassNames?: string;
+  /** height for the icon */
+  iconHeight?: number;
+  /** width for the icon */
+  iconWidth?: number;
+  /** viewbox for the icon */
+  primaryIconViewbox?: string;
 }
+//#endregion
+export { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants };

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

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

package/dist/src/Tooltip/QTip.types.d.ts

@@ -1,13 +1,17 @@
-import { TooltipPosition } from './Tooltip.types';
-export interface QTipDataAttributes {
-    /** text displayed by the tooltip */
-    'data-qtip-text': string;
-    /** one of TooltipPosition */
-    'data-qtip-placement'?: TooltipPosition;
-    /** set to true to render the provided text as html */
-    'data-qtip-is-html'?: boolean;
-    /** number of milliseconds to wait before showing a tooltip on-hover */
-    'data-qtip-delay'?: number;
-    /** useful for testing; sets the provided string as the data-testid attribute of the tooltip */
-    'data-qtip-testid'?: string;
+import { TooltipPosition } from "./Tooltip.types.js";
+
+//#region src/Tooltip/QTip.types.d.ts
+interface QTipDataAttributes {
+  /** text displayed by the tooltip */
+  'data-qtip-text': string;
+  /** one of TooltipPosition */
+  'data-qtip-placement'?: TooltipPosition;
+  /** set to true to render the provided text as html */
+  'data-qtip-is-html'?: boolean;
+  /** number of milliseconds to wait before showing a tooltip on-hover */
+  'data-qtip-delay'?: number;
+  /** useful for testing; sets the provided string as the data-testid attribute of the tooltip */
+  'data-qtip-testid'?: string;
 }
+//#endregion
+export { QTipDataAttributes };

package/dist/src/Tooltip/Qtip.d.ts

@@ -1,4 +1,7 @@
-import React from 'react';
+import React from "react";
+
+//#region src/Tooltip/Qtip.d.ts
+
 /**
  * QTip
  *
@@ -23,4 +26,6 @@ import React from 'react';
  *
  * and enjoy beautiful & performant tooltips!
  */
-export declare const QTip: React.FunctionComponent<any>;
+declare const QTip: React.FunctionComponent<any>;
+//#endregion
+export { QTip };

package/dist/src/Tooltip/Tooltip.d.ts

@@ -1,5 +1,8 @@
-import React from 'react';
-import { TooltipProps } from './Tooltip.types';
+import { TooltipProps } from "./Tooltip.types.js";
+import React from "react";
+
+//#region src/Tooltip/Tooltip.d.ts
+
 /**
  * @deprecated
  * Note: Tooltip has been replaced by QTip - a singleton JS tooltip that behaves well even with overflow settings :)
@@ -9,4 +12,6 @@ import { TooltipProps } from './Tooltip.types';
  * correctly if a parent element has an overflow CSS property assigned. Please use QTip to ensure your tooltips
  * display correctly.
  */
-export declare const Tooltip: React.FunctionComponent<TooltipProps>;
+declare const Tooltip: React.FunctionComponent<TooltipProps>;
+//#endregion
+export { Tooltip };

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

@@ -1,22 +1,26 @@
-export declare const DEFAULT_TOOL_TIP_DELAY: number;
-export declare const tooltipPositions: readonly ["top", "left", "right", "bottom"];
-import React from 'react';
-export type TooltipPosition = (typeof tooltipPositions)[number];
-export interface TooltipProps {
-    position?: TooltipPosition;
-    children?: React.JSX.Element | string;
-    text: React.JSX.Element | string;
-    delay?: number;
+import React from "react";
+
+//#region src/Tooltip/Tooltip.types.d.ts
+declare const DEFAULT_TOOL_TIP_DELAY: number;
+declare const tooltipPositions: readonly ["top", "left", "right", "bottom"];
+type TooltipPosition = (typeof tooltipPositions)[number];
+interface TooltipProps {
+  position?: TooltipPosition;
+  children?: React.JSX.Element | string;
+  text: React.JSX.Element | string;
+  delay?: number;
 }
-export interface TooltipComponentProps {
-    /** text to display on tooltip */
-    tooltip?: string;
-    /** number of milliseconds to wait before showing a tooltip on-hover */
-    tooltipDelay?: number;
-    /** one of four possible tooltip positions */
-    tooltipPlacement?: TooltipPosition;
-    /** true if the provided tooltip text should be rendered as HTML */
-    isHtmlTooltip?: boolean;
-    /** optional testId applied to the tooltip - useful for testing */
-    tooltipTestId?: string;
+interface TooltipComponentProps {
+  /** text to display on tooltip */
+  tooltip?: string;
+  /** number of milliseconds to wait before showing a tooltip on-hover */
+  tooltipDelay?: number;
+  /** one of four possible tooltip positions */
+  tooltipPlacement?: TooltipPosition;
+  /** true if the provided tooltip text should be rendered as HTML */
+  isHtmlTooltip?: boolean;
+  /** optional testId applied to the tooltip - useful for testing */
+  tooltipTestId?: string;
 }
+//#endregion
+export { DEFAULT_TOOL_TIP_DELAY, TooltipComponentProps, TooltipPosition, TooltipProps, tooltipPositions };

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

@@ -1,2 +1,3 @@
-export { Tooltip } from './Tooltip';
-export { QTip } from './Qtip';
+import { Tooltip } from "./Tooltip.js";
+import { QTip } from "./Qtip.js";
+export { QTip, Tooltip };

package/dist/src/Tooltip/qTip.utilities.d.ts

@@ -1,3 +1,13 @@
-import { QTipDataAttributes } from './QTip.types';
-import { TooltipComponentProps } from './Tooltip.types';
-export declare const getQTipData: ({ tooltip, tooltipPlacement, isHtmlTooltip, tooltipTestId, tooltipDelay, }: TooltipComponentProps) => QTipDataAttributes | undefined;
+import { TooltipComponentProps } from "./Tooltip.types.js";
+import { QTipDataAttributes } from "./QTip.types.js";
+
+//#region src/Tooltip/qTip.utilities.d.ts
+declare const getQTipData: ({
+  tooltip,
+  tooltipPlacement,
+  isHtmlTooltip,
+  tooltipTestId,
+  tooltipDelay
+}: TooltipComponentProps) => QTipDataAttributes | undefined;
+//#endregion
+export { getQTipData };

package/dist/src/TriggerWithDropdown/TriggerWithDropdown.d.ts

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

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

@@ -1,5 +1,8 @@
-import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
-import { DropdownItems } from '..';
+import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
+import { DropdownItems } from "../ButtonWithDropdown/ButtonWithDropdown.types.js";
+
+//#region src/TriggerWithDropdown/TriggerWithDropdown.types.d.ts
+
 /**
  * Props for the TriggerWithDropdown component that creates a custom trigger with an attached dropdown menu.
  * Extends TooltipComponentProps to support tooltip functionality on the trigger element.
@@ -7,96 +10,98 @@ import { DropdownItems } from '..';
  * Use this component when you need full control over the trigger element's appearance.
  * If you want a standard Qomponents Button as the trigger, use ButtonWithDropdown instead.
  */
-export interface TriggerWithDropdownProps extends TooltipComponentProps {
-    /**
-     * Array of items to display in the dropdown menu.
-     * Each item can be interactive (with onClick) or decorative (labels/dividers).
-     * Items can also contain sub-menus for hierarchical organization.
-     */
-    dropdownItems: DropdownItems[];
-    /**
-     * React element to use as the clickable trigger.
-     * Can be any React element — icon, text, custom component, etc.
-     */
-    triggerIcon: React.ReactNode;
-    /**
-     * HTML ID attribute for the dropdown trigger element.
-     * Should be unique across the page for proper HTML semantics and accessibility.
-     */
-    id?: string;
-    /**
-     * Additional CSS classes to apply to the dropdown trigger.
-     * Use this to customize the trigger's appearance beyond default styling.
-     */
-    extraClassNames?: string;
-    /**
-     * Test ID attribute for the dropdown container element used in automated testing.
-     * Applied to the main container that wraps both trigger and dropdown content.
-     */
-    containerTestId?: string;
-    /**
-     * Additional CSS classes to apply to the dropdown content container.
-     * Use this to customize the dropdown menu's appearance, spacing, or styling.
-     */
-    contentExtraClassNames?: string;
-    /**
-     * When true, disables the dropdown trigger preventing user interaction.
-     * Disabled triggers appear visually dimmed and don't open the dropdown when clicked.
-     */
-    disabled?: boolean;
-    /**
-     * Horizontal alignment of the dropdown content relative to the trigger:
-     * - `start`: Aligns to the left edge of the trigger
-     * - `center`: Centers the dropdown on the trigger
-     * - `end`: Aligns to the right edge of the trigger
-     */
-    align?: 'start' | 'center' | 'end';
-    /**
-     * Numeric offset in pixels from the aligned position.
-     * Positive values move the dropdown further from the trigger in the align direction.
-     */
-    alignOffset?: number;
-    /**
-     * Position of the dropdown relative to the trigger element:
-     * - `top`: Dropdown appears above the trigger
-     * - `bottom`: Dropdown appears below the trigger
-     * - `left`: Dropdown appears to the left of the trigger
-     * - `right`: Dropdown appears to the right of the trigger
-     */
-    placement?: 'top' | 'bottom' | 'left' | 'right';
-    /**
-     * Numeric offset in pixels from the placement position.
-     * Positive values move the dropdown further away from the trigger.
-     */
-    placementOffset?: number;
-    /**
-     * When true, displays a visual arrow pointing from the dropdown to the trigger.
-     * Helps users understand the relationship between trigger and dropdown content.
-     */
-    hasArrow?: boolean;
-    /**
-     * Controls whether the dropdown is currently open and visible.
-     * Use this for controlled dropdown behavior where you manage open state externally.
-     */
-    isOpen?: boolean;
-    /**
-     * Callback function triggered when the dropdown open state changes.
-     * Receives the new open state as a boolean parameter. Use this to sync with external state.
-     */
-    onOpenChange?: (isOpen: boolean) => void;
-    /**
-     * When true, automatically focuses the trigger button when the dropdown closes.
-     * Improves keyboard navigation and accessibility by returning focus to the trigger.
-     */
-    setFocusOnTriggerOnClose?: boolean;
-    /**
-     * When true, traps keyboard focus within the dropdown when it's open.
-     * Prevents users from tabbing outside the dropdown, improving accessibility.
-     */
-    keepFocusInsideDropdown?: boolean;
-    /**
-     * Callback function triggered when the dropdown container is clicked.
-     * Receives the click event. Use this for handling container-level interactions.
-     */
-    onContainerClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+interface TriggerWithDropdownProps extends TooltipComponentProps {
+  /**
+   * Array of items to display in the dropdown menu.
+   * Each item can be interactive (with onClick) or decorative (labels/dividers).
+   * Items can also contain sub-menus for hierarchical organization.
+   */
+  dropdownItems: DropdownItems[];
+  /**
+   * React element to use as the clickable trigger.
+   * Can be any React element — icon, text, custom component, etc.
+   */
+  triggerIcon: React.ReactNode;
+  /**
+   * HTML ID attribute for the dropdown trigger element.
+   * Should be unique across the page for proper HTML semantics and accessibility.
+   */
+  id?: string;
+  /**
+   * Additional CSS classes to apply to the dropdown trigger.
+   * Use this to customize the trigger's appearance beyond default styling.
+   */
+  extraClassNames?: string;
+  /**
+   * Test ID attribute for the dropdown container element used in automated testing.
+   * Applied to the main container that wraps both trigger and dropdown content.
+   */
+  containerTestId?: string;
+  /**
+   * Additional CSS classes to apply to the dropdown content container.
+   * Use this to customize the dropdown menu's appearance, spacing, or styling.
+   */
+  contentExtraClassNames?: string;
+  /**
+   * When true, disables the dropdown trigger preventing user interaction.
+   * Disabled triggers appear visually dimmed and don't open the dropdown when clicked.
+   */
+  disabled?: boolean;
+  /**
+   * Horizontal alignment of the dropdown content relative to the trigger:
+   * - `start`: Aligns to the left edge of the trigger
+   * - `center`: Centers the dropdown on the trigger
+   * - `end`: Aligns to the right edge of the trigger
+   */
+  align?: 'start' | 'center' | 'end';
+  /**
+   * Numeric offset in pixels from the aligned position.
+   * Positive values move the dropdown further from the trigger in the align direction.
+   */
+  alignOffset?: number;
+  /**
+   * Position of the dropdown relative to the trigger element:
+   * - `top`: Dropdown appears above the trigger
+   * - `bottom`: Dropdown appears below the trigger
+   * - `left`: Dropdown appears to the left of the trigger
+   * - `right`: Dropdown appears to the right of the trigger
+   */
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /**
+   * Numeric offset in pixels from the placement position.
+   * Positive values move the dropdown further away from the trigger.
+   */
+  placementOffset?: number;
+  /**
+   * When true, displays a visual arrow pointing from the dropdown to the trigger.
+   * Helps users understand the relationship between trigger and dropdown content.
+   */
+  hasArrow?: boolean;
+  /**
+   * Controls whether the dropdown is currently open and visible.
+   * Use this for controlled dropdown behavior where you manage open state externally.
+   */
+  isOpen?: boolean;
+  /**
+   * Callback function triggered when the dropdown open state changes.
+   * Receives the new open state as a boolean parameter. Use this to sync with external state.
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * When true, automatically focuses the trigger button when the dropdown closes.
+   * Improves keyboard navigation and accessibility by returning focus to the trigger.
+   */
+  setFocusOnTriggerOnClose?: boolean;
+  /**
+   * When true, traps keyboard focus within the dropdown when it's open.
+   * Prevents users from tabbing outside the dropdown, improving accessibility.
+   */
+  keepFocusInsideDropdown?: boolean;
+  /**
+   * Callback function triggered when the dropdown container is clicked.
+   * Receives the click event. Use this for handling container-level interactions.
+   */
+  onContainerClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
+//#endregion
+export { TriggerWithDropdownProps };

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

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