@seeqdev/qomponents 0.0.209 → 0.0.215

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

@@ -1,148 +1,152 @@
-import { TooltipProps } from '../Tooltip/Tooltip.types';
-import { IconType } from '../Icon/Icon.types';
-import React from 'react';
-export declare const buttonTypes: readonly ["button", "reset", "submit", "link"];
-export declare const buttonSizes: readonly ["xs", "sm", "lg"];
-export declare const buttonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
-export declare const iconPositions: string[];
-export type ButtonType = (typeof buttonTypes)[number];
-export type ButtonSize = (typeof buttonSizes)[number];
-export type ButtonVariant = (typeof buttonVariants)[number];
-export type IconPosition = (typeof iconPositions)[number];
-export interface ButtonProps {
-    /**
-     * Callback function triggered when the button is clicked.
-     * Receives the mouse event as a parameter for additional event handling.
-     * Use this to define the primary action the button should perform.
-     */
-    onClick?: (e: React.MouseEvent) => void;
-    /**
-     * The text, element, or content to display inside the button.
-     * Can be a string for simple text, a translation key, or any React element/node
-     * for more complex content like formatted text or inline elements.
-     */
-    label?: string | React.JSX.Element | React.ReactNode;
-    /**
-     * Visual style variant that determines the button's appearance and color scheme:
-     * - `outline`: White background with border, suitable for secondary actions
-     * - `theme`: Primary theme colors, typically for main call-to-action buttons
-     * - `theme-light`: Lighter version of theme colors for subtle primary actions
-     * - `warning`: Yellow/orange styling for caution-related actions
-     * - `danger`: Red styling for destructive or critical actions
-     * - `no-border`: Borderless styling for minimal, text-like buttons
-     * @default 'outline'
-     */
-    variant?: ButtonVariant;
-    /**
-     * HTML button type attribute that determines the button's behavior in forms:
-     * - `button`: Standard button with no special form behavior (default)
-     * - `submit`: Submits the parent form when clicked
-     * - `reset`: Resets the parent form fields to their initial values
-     * - `link`: Behaves like a button but renders as button type for Firefox compatibility
-     * @default 'button'
-     */
-    type?: ButtonType;
-    /**
-     * Size variant that controls the button's dimensions and text size:
-     * - `sm`: Small button with compact padding and smaller text (default)
-     * - `lg`: Large button with generous padding and larger text
-     * @default 'sm'
-     */
-    size?: ButtonSize;
-    /**
-     * When true, disables the button preventing user interaction.
-     * Disabled buttons are visually dimmed and do not respond to clicks or focus.
-     * The button will also have `pointer-events: none` applied via CSS.
-     */
-    disabled?: boolean;
-    /**
-     * Additional CSS classes to apply to the button element.
-     * These classes are combined with the component's built-in styling classes.
-     * Use this to customize appearance beyond the standard variants.
-     */
-    extraClassNames?: string;
-    /**
-     * Icon class name to display alongside the button text.
-     * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
-     * The icon is automatically styled to match the button's text color.
-     */
-    icon?: string;
-    /**
-     * Determines how the icon should be styled and colored:
-     * - `text`: Uses the button's text color (default)
-     * - `white`: Forces white color regardless of button variant
-     * - `theme`: Uses theme-specific colors
-     * - `color`: Uses a custom color specified in `iconColor`
-     * @default 'text'
-     */
-    iconStyle?: IconType;
-    /**
-     * Custom color for the icon when `iconStyle` is set to 'color'.
-     * Can be any valid CSS color value (hex, rgb, color name, etc.).
-     * This property is required when iconStyle is 'color'.
-     */
-    iconColor?: string;
-    /**
-     * Position of the icon relative to the button text:
-     * - `left`: Icon appears before the text with right margin
-     * - `right`: Icon appears after the text with left margin
-     * @default 'left'
-     */
-    iconPosition?: IconPosition;
-    /**
-     * 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
-     * require different prefixes. Use this to override the default behavior.
-     */
-    iconPrefix?: string;
-    /**
-     * HTML ID attribute for the button element.
-     * Should be unique across the entire page for proper HTML semantics.
-     * Also used as a prefix for the icon's test ID when an icon is present.
-     */
-    id?: string;
-    /**
-     * Test ID attribute for the button element used in automated testing.
-     * Applied to the `data-testid` attribute for element selection in test suites.
-     */
-    testId?: string;
-    /**
-     * Controls whether the click event should stop propagation to parent elements.
-     * When true (default), prevents the click from bubbling up the DOM tree.
-     * Set to false if you need parent elements to also handle the click event.
-     * @default true
-     */
-    stopPropagation?: boolean;
-    /**
-     * Tooltip text to display when hovering over the button.
-     * When provided, the button will show a tooltip with this text on hover.
-     * The tooltip appearance and behavior can be customized with `tooltipOptions`.
-     */
-    tooltip?: 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.
-     * @default false
-     */
-    isHtmlTooltip?: boolean;
-    /**
-     * Test ID attribute specifically for the tooltip element.
-     * Used for automated testing to identify and interact with the tooltip.
-     * Helpful when you need to test tooltip-specific behavior separately from the button.
-     */
-    tooltipTestId?: string;
-    /**
-     * Configuration options for customizing tooltip behavior and appearance.
-     * Omits the 'text' property since that's handled by the `tooltip` prop.
-     * Includes options like position, delay, and other tooltip-specific settings.
-     */
-    tooltipOptions?: Omit<TooltipProps, 'text'>;
-    /**
-     * When true, prevents the blur event from occurring on mouse down.
-     * Useful when you want to keep focus on the current element after clicking the button.
-     * Commonly used in scenarios where button clicks shouldn't interrupt form input focus.
-     * @default false
-     */
-    preventBlur?: boolean;
+import { TooltipProps } from "../Tooltip/Tooltip.types.js";
+import { IconType } from "../Icon/Icon.types.js";
+import React from "react";
+
+//#region src/Button/Button.types.d.ts
+declare const buttonTypes: readonly ["button", "reset", "submit", "link"];
+declare const buttonSizes: readonly ["xs", "sm", "lg"];
+declare const buttonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
+declare const iconPositions: string[];
+type ButtonType = (typeof buttonTypes)[number];
+type ButtonSize = (typeof buttonSizes)[number];
+type ButtonVariant = (typeof buttonVariants)[number];
+type IconPosition = (typeof iconPositions)[number];
+interface ButtonProps {
+  /**
+   * Callback function triggered when the button is clicked.
+   * Receives the mouse event as a parameter for additional event handling.
+   * Use this to define the primary action the button should perform.
+   */
+  onClick?: (e: React.MouseEvent) => void;
+  /**
+   * The text, element, or content to display inside the button.
+   * Can be a string for simple text, a translation key, or any React element/node
+   * for more complex content like formatted text or inline elements.
+   */
+  label?: string | React.JSX.Element | React.ReactNode;
+  /**
+   * Visual style variant that determines the button's appearance and color scheme:
+   * - `outline`: White background with border, suitable for secondary actions
+   * - `theme`: Primary theme colors, typically for main call-to-action buttons
+   * - `theme-light`: Lighter version of theme colors for subtle primary actions
+   * - `warning`: Yellow/orange styling for caution-related actions
+   * - `danger`: Red styling for destructive or critical actions
+   * - `no-border`: Borderless styling for minimal, text-like buttons
+   * @default 'outline'
+   */
+  variant?: ButtonVariant;
+  /**
+   * HTML button type attribute that determines the button's behavior in forms:
+   * - `button`: Standard button with no special form behavior (default)
+   * - `submit`: Submits the parent form when clicked
+   * - `reset`: Resets the parent form fields to their initial values
+   * - `link`: Behaves like a button but renders as button type for Firefox compatibility
+   * @default 'button'
+   */
+  type?: ButtonType;
+  /**
+   * Size variant that controls the button's dimensions and text size:
+   * - `sm`: Small button with compact padding and smaller text (default)
+   * - `lg`: Large button with generous padding and larger text
+   * @default 'sm'
+   */
+  size?: ButtonSize;
+  /**
+   * When true, disables the button preventing user interaction.
+   * Disabled buttons are visually dimmed and do not respond to clicks or focus.
+   * The button will also have `pointer-events: none` applied via CSS.
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS classes to apply to the button element.
+   * These classes are combined with the component's built-in styling classes.
+   * Use this to customize appearance beyond the standard variants.
+   */
+  extraClassNames?: string;
+  /**
+   * Icon class name to display alongside the button text.
+   * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
+   * The icon is automatically styled to match the button's text color.
+   */
+  icon?: string;
+  /**
+   * Determines how the icon should be styled and colored:
+   * - `text`: Uses the button's text color (default)
+   * - `white`: Forces white color regardless of button variant
+   * - `theme`: Uses theme-specific colors
+   * - `color`: Uses a custom color specified in `iconColor`
+   * @default 'text'
+   */
+  iconStyle?: IconType;
+  /**
+   * Custom color for the icon when `iconStyle` is set to 'color'.
+   * Can be any valid CSS color value (hex, rgb, color name, etc.).
+   * This property is required when iconStyle is 'color'.
+   */
+  iconColor?: string;
+  /**
+   * Position of the icon relative to the button text:
+   * - `left`: Icon appears before the text with right margin
+   * - `right`: Icon appears after the text with left margin
+   * @default 'left'
+   */
+  iconPosition?: IconPosition;
+  /**
+   * 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
+   * require different prefixes. Use this to override the default behavior.
+   */
+  iconPrefix?: string;
+  /**
+   * HTML ID attribute for the button element.
+   * Should be unique across the entire page for proper HTML semantics.
+   * Also used as a prefix for the icon's test ID when an icon is present.
+   */
+  id?: string;
+  /**
+   * Test ID attribute for the button element used in automated testing.
+   * Applied to the `data-testid` attribute for element selection in test suites.
+   */
+  testId?: string;
+  /**
+   * Controls whether the click event should stop propagation to parent elements.
+   * When true (default), prevents the click from bubbling up the DOM tree.
+   * Set to false if you need parent elements to also handle the click event.
+   * @default true
+   */
+  stopPropagation?: boolean;
+  /**
+   * Tooltip text to display when hovering over the button.
+   * When provided, the button will show a tooltip with this text on hover.
+   * The tooltip appearance and behavior can be customized with `tooltipOptions`.
+   */
+  tooltip?: 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.
+   * @default false
+   */
+  isHtmlTooltip?: boolean;
+  /**
+   * Test ID attribute specifically for the tooltip element.
+   * Used for automated testing to identify and interact with the tooltip.
+   * Helpful when you need to test tooltip-specific behavior separately from the button.
+   */
+  tooltipTestId?: string;
+  /**
+   * Configuration options for customizing tooltip behavior and appearance.
+   * Omits the 'text' property since that's handled by the `tooltip` prop.
+   * Includes options like position, delay, and other tooltip-specific settings.
+   */
+  tooltipOptions?: Omit<TooltipProps, 'text'>;
+  /**
+   * When true, prevents the blur event from occurring on mouse down.
+   * Useful when you want to keep focus on the current element after clicking the button.
+   * Commonly used in scenarios where button clicks shouldn't interrupt form input focus.
+   * @default false
+   */
+  preventBlur?: boolean;
 }
+//#endregion
+export { ButtonProps, ButtonSize, ButtonType, ButtonVariant, IconPosition, buttonSizes, buttonTypes, buttonVariants, iconPositions };

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

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

package/dist/src/ButtonGroup/ButtonGroup.d.ts

@@ -1,6 +1,11 @@
-import React from 'react';
-import { ButtonGroupProps } from './ButtonGroup.types';
+import { ButtonGroupProps } from "./ButtonGroup.types.js";
+import React from "react";
+
+//#region src/ButtonGroup/ButtonGroup.d.ts
+
 /**
  * ButtonGroup.
  */
-export declare const ButtonGroup: React.FunctionComponent<ButtonGroupProps>;
+declare const ButtonGroup: React.FunctionComponent<ButtonGroupProps>;
+//#endregion
+export { ButtonGroup };

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

@@ -1,80 +1,84 @@
-import { ButtonProps } from '../Button/Button.types';
-import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
+import { ButtonProps } from "../Button/Button.types.js";
+
+//#region src/ButtonGroup/ButtonGroup.types.d.ts
+
 /**
  * Interface representing the properties for a button within a ButtonGroup.
  * Used when you want to include an interactive button as part of the group.
  */
 interface AppendedButtonProps {
-    /**
-     * Specifies that this group item is a clickable button.
-     * Button items can be selected, have active states, and trigger onChange events.
-     */
-    variant: 'button';
-    /**
-     * Configuration properties for the button component.
-     * Omits the onClick handler since ButtonGroup manages selection internally.
-     * Requires a value for selection tracking and optionally an isActive state.
-     */
-    buttonProps: Omit<ButtonProps, 'onClick'> & {
-        /** Unique value used to identify this button when selected */
-        value: string;
-        /** Whether this button is currently in the active/selected state */
-        isActive?: boolean;
-    };
+  /**
+   * Specifies that this group item is a clickable button.
+   * Button items can be selected, have active states, and trigger onChange events.
+   */
+  variant: 'button';
+  /**
+   * Configuration properties for the button component.
+   * Omits the onClick handler since ButtonGroup manages selection internally.
+   * Requires a value for selection tracking and optionally an isActive state.
+   */
+  buttonProps: Omit<ButtonProps, 'onClick'> & {
+    /** Unique value used to identify this button when selected */
+    value: string;
+    /** Whether this button is currently in the active/selected state */
+    isActive?: boolean;
+  };
 }
 /**
  * Interface for including custom React elements within a ButtonGroup.
  * Used when you need to add non-button content like separators, labels, or custom components.
  */
 interface ElementProps {
-    /**
-     * Specifies that this group item is a custom React element.
-     * Element items are purely presentational and don't participate in selection logic.
-     */
-    variant: 'element';
-    /**
-     * The React content to render within the button group.
-     * Can be any valid React node including text, icons, separators, or complex components.
-     */
-    element: React.ReactNode;
-    /**
-     * Additional CSS classes to apply to the element's container.
-     * Use this to style the element consistently with the button group's appearance.
-     */
-    extraClassNames?: string;
+  /**
+   * Specifies that this group item is a custom React element.
+   * Element items are purely presentational and don't participate in selection logic.
+   */
+  variant: 'element';
+  /**
+   * The React content to render within the button group.
+   * Can be any valid React node including text, icons, separators, or complex components.
+   */
+  element: React.ReactNode;
+  /**
+   * Additional CSS classes to apply to the element's container.
+   * Use this to style the element consistently with the button group's appearance.
+   */
+  extraClassNames?: string;
 }
 type Props = AppendedButtonProps | ElementProps | undefined;
 /**
  * Props for the ButtonGroup component that creates a cohesive group of related buttons.
  * Extends TooltipComponentProps to support tooltip functionality on the entire group.
  */
-export interface ButtonGroupProps extends TooltipComponentProps {
-    /**
-     * Array of items to display in the button group.
-     * Each item can be either a button (for interactive elements) or an element (for decorative content).
-     * Buttons within the group share consistent styling and spacing for a unified appearance.
-     */
-    buttons: Props[];
-    /**
-     * HTML ID attribute for the button group container.
-     * Should be unique across the page for proper HTML semantics and accessibility.
-     */
-    id?: string;
-    /**
-     * Additional CSS classes to apply to the button group container.
-     * Use this to customize the group's appearance, spacing, or layout beyond default styling.
-     */
-    extraClassNames?: string;
-    /**
-     * Callback function triggered when a button within the group is selected.
-     * Receives the value of the selected button as defined in its buttonProps.value.
-     * Use this to handle selection changes and update your application state.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Test ID attribute for the button group container used in automated testing.
-     * Applied to the group's root element for test targeting and interaction.
-     */
-    testId?: string;
+interface ButtonGroupProps extends TooltipComponentProps {
+  /**
+   * Array of items to display in the button group.
+   * Each item can be either a button (for interactive elements) or an element (for decorative content).
+   * Buttons within the group share consistent styling and spacing for a unified appearance.
+   */
+  buttons: Props[];
+  /**
+   * HTML ID attribute for the button group container.
+   * Should be unique across the page for proper HTML semantics and accessibility.
+   */
+  id?: string;
+  /**
+   * Additional CSS classes to apply to the button group container.
+   * Use this to customize the group's appearance, spacing, or layout beyond default styling.
+   */
+  extraClassNames?: string;
+  /**
+   * Callback function triggered when a button within the group is selected.
+   * Receives the value of the selected button as defined in its buttonProps.value.
+   * Use this to handle selection changes and update your application state.
+   */
+  onChange?: (value: string) => void;
+  /**
+   * Test ID attribute for the button group container used in automated testing.
+   * Applied to the group's root element for test targeting and interaction.
+   */
+  testId?: string;
 }
-export {};
+//#endregion
+export { ButtonGroupProps };

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

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

package/dist/src/ButtonWithDropdown/ButtonWithDropdown.d.ts

@@ -1,5 +1,8 @@
-import * as React from 'react';
-import { ButtonWithDropdownProps } from './ButtonWithDropdown.types';
-declare const ButtonWithDropdown: React.FunctionComponent<ButtonWithDropdownProps>;
-export declare const Dropdown: React.FunctionComponent<ButtonWithDropdownProps>;
-export default ButtonWithDropdown;
+import { ButtonWithDropdownProps } from "./ButtonWithDropdown.types.js";
+import * as React$1 from "react";
+
+//#region src/ButtonWithDropdown/ButtonWithDropdown.d.ts
+declare const ButtonWithDropdown: React$1.FunctionComponent<ButtonWithDropdownProps>;
+declare const Dropdown: React$1.FunctionComponent<ButtonWithDropdownProps>;
+//#endregion
+export { Dropdown, ButtonWithDropdown as default };