@seeqdev/qomponents 0.0.214 → 0.0.215

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

@@ -1,250 +1,254 @@
-import { FormControlElement } from '../types';
-import React from 'react';
-import { ButtonVariant } from '../Button/Button.types';
-export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-export type TitleIconPosition = 'left' | 'right';
-export interface ModalProps {
-    /**
-     * Main title text displayed prominently in the modal header.
-     * This is the primary heading that identifies the purpose or content of the modal.
-     */
-    title: string;
-    /**
-     * Additional text to append after the main title.
-     * Useful for adding context, version numbers, or secondary information to the title.
-     */
-    titleSuffixLabel?: string;
-    /**
-     * Secondary text displayed below the main title in the header.
-     * Use this for additional context, descriptions, or instructions for the modal content.
-     */
-    subtitle?: string;
-    /**
-     * Icon to display next to the title in the header.
-     * Can be an icon class name (string) for font icons or a React element for custom icons.
-     * Helps provide visual context for the modal's purpose.
-     */
-    titleIcon?: string | React.ReactElement;
-    /**
-     * Position of the title icon relative to the title text:
-     * - `left`: Icon appears before the title text
-     * - `right`: Icon appears after the title text
-     * @default 'left'
-     */
-    titleIconPosition?: TitleIconPosition;
-    /**
-     * Main content of the modal body.
-     * This is where you place the primary content, forms, information, or interactive elements.
-     * Accepts any renderable React content: elements, strings, numbers, arrays, fragments, etc.
-     */
-    children: React.ReactNode;
-    /**
-     * Custom footer content that completely replaces the default button footer.
-     * When provided, all default buttons (submit, cancel, custom) are hidden.
-     * Use this when you need complete control over the footer layout and actions.
-     * Accepts any renderable React content: elements, strings, numbers, arrays, fragments, etc.
-     */
-    modalFooter?: React.ReactNode;
-    /**
-     * Controls whether the modal is currently visible and open.
-     * When true, the modal is displayed with overlay. When false, the modal is hidden.
-     * Use this prop to control modal visibility from parent components.
-     */
-    open: boolean;
-    /**
-     * Callback function triggered when the user attempts to close the modal.
-     * Called when clicking the X button, cancel button, or clicking outside the modal.
-     * Use this to handle modal closure logic and update the `open` state.
-     */
-    onClose?: () => any;
-    /**
-     * When true, displays an additional custom button in the footer alongside default buttons.
-     * The custom button appears before the submit and cancel buttons.
-     * Configure the button's appearance and behavior with related custom button props.
-     */
-    customButton?: boolean;
-    /**
-     * Text label for the custom button when `customButton` is true.
-     * This text will be displayed on the button to indicate its purpose or action.
-     */
-    customButtonLabel?: string;
-    /**
-     * Callback function triggered when the custom button is clicked.
-     * Use this to define the action that should occur when users click the custom button.
-     */
-    onClickCustomButton?: () => any;
-    /**
-     * Text label for the primary submit/confirmation button.
-     * This button typically confirms the modal action or submits form data.
-     * @default "OK"
-     */
-    submitButtonLabel?: string;
-    /**
-     * Text label for the cancel/dismiss button.
-     * This button typically closes the modal without saving changes or performing actions.
-     * @default "Cancel"
-     */
-    cancelButtonLabel?: string;
-    /**
-     * When true, disables the submit button preventing user interaction.
-     * Useful when form validation fails or when an operation is in progress.
-     * The button will appear visually disabled and won't respond to clicks.
-     */
-    disableSubmitButton?: boolean;
-    /**
-     * Controls whether the submit button click event should stop propagation.
-     * When true, prevents the click event from bubbling up to parent elements.
-     * @default true
-     */
-    stopPropagationSubmitButton?: boolean;
-    /**
-     * Callback function triggered when the submit button is clicked.
-     * Receives the click event as a parameter for additional event handling.
-     * Use this to handle form submission, data processing, or confirmation actions.
-     */
-    onSubmit?: (event: React.MouseEvent) => any;
-    /**
-     * When true, allows the title text to be edited inline by clicking on it.
-     * The title becomes an input field that users can modify directly in the modal header.
-     * Useful for renaming operations or title customization workflows.
-     */
-    isTitleEditable?: boolean;
-    /**
-     * Callback function triggered when the editable title text changes.
-     * Only relevant when `isTitleEditable` is true. Receives the change event
-     * which contains the new title value. Use this to update your title state.
-     */
-    onTitleChanged?: React.ChangeEventHandler<FormControlElement>;
-    /**
-     * Additional CSS classes to apply to the title input field.
-     * Only used when `isTitleEditable` is true. Use this to customize
-     * the appearance of the editable title input beyond default styling.
-     */
-    inputExtraClassNames?: string;
-    /**
-     * When true, hides the X close icon button in the modal header.
-     * Users will only be able to close the modal using footer buttons or by clicking outside.
-     * Useful when you want to force users to make an explicit choice via footer buttons.
-     */
-    hideCloseIcon?: boolean;
-    /**
-     * Size variant that controls the modal's width and maximum dimensions:
-     * - `xs`: Extra small modal (280px max width)
-     * - `sm`: Small modal (384px max width)
-     * - `md`: Medium modal (448px max width)
-     * - `lg`: Large modal (512px max width)
-     * - `xl`: Extra large modal (576px max width)
-     * - `2xl` through `6xl`: Progressively larger sizes up to full screen
-     */
-    size?: ModalSize;
-    /**
-     * When true, completely hides all default footer buttons (submit, cancel, custom).
-     * The modal will only have header and body content. Useful when you provide
-     * custom actions within the modal body or use a custom footer.
-     */
-    hideFooterButtons?: boolean;
-    /**
-     * When true, hides only the submit button while keeping other footer buttons visible.
-     * Useful for information-only modals that don't require a confirmation action.
-     */
-    hideSubmitButton?: boolean;
-    /**
-     * When true, hides only the cancel button while keeping other footer buttons visible.
-     * Useful for critical operations where cancellation should not be easily accessible.
-     */
-    hideCancelButton?: boolean;
-    /**
-     * Test ID attribute for the modal container element.
-     * Used for automated testing to identify and interact with the modal.
-     * Applied to the modal's root element for test targeting.
-     */
-    testId?: string;
-    /**
-     * Additional CSS classes to apply to the modal dialog container.
-     * Use this to customize the modal's positioning, sizing, or appearance
-     * beyond the built-in size variants and default styling.
-     */
-    dialogClassName?: string;
-    /**
-     * Placeholder text displayed in the title input when `isTitleEditable` is true.
-     * Shows helpful text when the title field is empty, guiding users on what to enter.
-     */
-    titlePlaceholder?: string;
-    /**
-     * When true, makes the title field required when `isTitleEditable` is true.
-     * Prevents submission or validation if the title is empty. Usually combined
-     * with validation feedback and error handling.
-     */
-    titleRequired?: boolean;
-    /**
-     * Error message to display when the editable title has validation issues.
-     * Only shown when `isTitleEditable` is true and there's a title validation error.
-     * Provides user feedback about what needs to be corrected.
-     */
-    titleError?: string;
-    /**
-     * Tooltip text to display when hovering over the submit button.
-     * Provides additional context or instructions about what the submit action will do.
-     * Helpful for clarifying the button's purpose in complex workflows.
-     */
-    submitButtonTooltip?: string;
-    /**
-     * Tooltip text to display when hovering over the cancel button.
-     * Can provide information about what happens when canceling or any data loss warnings.
-     */
-    cancelButtonTooltip?: string;
-    /**
-     * When true, disables the custom button preventing user interaction.
-     * Only relevant when `customButton` is true. The button will appear
-     * visually disabled and won't respond to clicks.
-     */
-    disableCustomButton?: boolean;
-    /**
-     * Custom header content that completely replaces the default modal header.
-     * When provided, the default title, subtitle, and close button are not rendered.
-     * Use this when you need complete control over the header layout and content.
-     */
-    customHeader?: React.ReactElement;
-    /**
-     * Content to display in the center area of the footer between buttons.
-     * Useful for adding status messages, progress indicators, or additional
-     * information that should be visible alongside the action buttons.
-     */
-    middleFooterSection?: React.ReactElement;
-    /**
-     * Visual style variant for the custom button when `customButton` is true.
-     * Determines the button's appearance and color scheme. Uses the same
-     * variants as the standard Button component (outline, theme, danger, etc.).
-     */
-    customButtonVariant?: ButtonVariant;
-    /**
-     * Controls whether focus should be trapped within the modal when open.
-     * When true (default), focus cycles through modal elements only. Set to false
-     * if you need to interact with elements outside the modal (like tooltips with inputs).
-     * @default true
-     */
-    keepFocusInsideModal?: boolean;
-    /**
-     * Visual style variant for the submit button.
-     * Determines the button's appearance and color scheme. Use 'theme' for primary
-     * actions, 'danger' for destructive actions, or other variants as appropriate.
-     */
-    submitButtonVariant?: ButtonVariant;
-    /**
-     * ARIA attribute that references the ID of an element containing descriptive text for the modal.
-     * This prop is passed to the modal dialog element as `aria-describedby` for accessibility purposes.
-     */
-    ariaDescribedBy?: string;
-    /**
-     * Callback function triggered when the user clicks/taps outside the modal dialog.
-     * Receives the pointer event. Use this to customize outside-click behavior,
-     * such as preventing closure in certain conditions or showing warnings.
-     */
-    onPointerDownOutside?: (e: Event) => void;
-    /**
-     * Callback function triggered when the user interacts outside the modal.
-     * This includes clicks, taps, and other interactions outside the modal area.
-     * More general than `onPointerDownOutside` and covers additional interaction types.
-     */
-    onInteractOutside?: (e: Event) => void;
+import { ButtonVariant } from "../Button/Button.types.js";
+import { FormControlElement } from "../types.js";
+import React from "react";
+
+//#region src/Modal/Modal.types.d.ts
+type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+type TitleIconPosition = 'left' | 'right';
+interface ModalProps {
+  /**
+   * Main title text displayed prominently in the modal header.
+   * This is the primary heading that identifies the purpose or content of the modal.
+   */
+  title: string;
+  /**
+   * Additional text to append after the main title.
+   * Useful for adding context, version numbers, or secondary information to the title.
+   */
+  titleSuffixLabel?: string;
+  /**
+   * Secondary text displayed below the main title in the header.
+   * Use this for additional context, descriptions, or instructions for the modal content.
+   */
+  subtitle?: string;
+  /**
+   * Icon to display next to the title in the header.
+   * Can be an icon class name (string) for font icons or a React element for custom icons.
+   * Helps provide visual context for the modal's purpose.
+   */
+  titleIcon?: string | React.ReactElement;
+  /**
+   * Position of the title icon relative to the title text:
+   * - `left`: Icon appears before the title text
+   * - `right`: Icon appears after the title text
+   * @default 'left'
+   */
+  titleIconPosition?: TitleIconPosition;
+  /**
+   * Main content of the modal body.
+   * This is where you place the primary content, forms, information, or interactive elements.
+   * Accepts any renderable React content: elements, strings, numbers, arrays, fragments, etc.
+   */
+  children: React.ReactNode;
+  /**
+   * Custom footer content that completely replaces the default button footer.
+   * When provided, all default buttons (submit, cancel, custom) are hidden.
+   * Use this when you need complete control over the footer layout and actions.
+   * Accepts any renderable React content: elements, strings, numbers, arrays, fragments, etc.
+   */
+  modalFooter?: React.ReactNode;
+  /**
+   * Controls whether the modal is currently visible and open.
+   * When true, the modal is displayed with overlay. When false, the modal is hidden.
+   * Use this prop to control modal visibility from parent components.
+   */
+  open: boolean;
+  /**
+   * Callback function triggered when the user attempts to close the modal.
+   * Called when clicking the X button, cancel button, or clicking outside the modal.
+   * Use this to handle modal closure logic and update the `open` state.
+   */
+  onClose?: () => any;
+  /**
+   * When true, displays an additional custom button in the footer alongside default buttons.
+   * The custom button appears before the submit and cancel buttons.
+   * Configure the button's appearance and behavior with related custom button props.
+   */
+  customButton?: boolean;
+  /**
+   * Text label for the custom button when `customButton` is true.
+   * This text will be displayed on the button to indicate its purpose or action.
+   */
+  customButtonLabel?: string;
+  /**
+   * Callback function triggered when the custom button is clicked.
+   * Use this to define the action that should occur when users click the custom button.
+   */
+  onClickCustomButton?: () => any;
+  /**
+   * Text label for the primary submit/confirmation button.
+   * This button typically confirms the modal action or submits form data.
+   * @default "OK"
+   */
+  submitButtonLabel?: string;
+  /**
+   * Text label for the cancel/dismiss button.
+   * This button typically closes the modal without saving changes or performing actions.
+   * @default "Cancel"
+   */
+  cancelButtonLabel?: string;
+  /**
+   * When true, disables the submit button preventing user interaction.
+   * Useful when form validation fails or when an operation is in progress.
+   * The button will appear visually disabled and won't respond to clicks.
+   */
+  disableSubmitButton?: boolean;
+  /**
+   * Controls whether the submit button click event should stop propagation.
+   * When true, prevents the click event from bubbling up to parent elements.
+   * @default true
+   */
+  stopPropagationSubmitButton?: boolean;
+  /**
+   * Callback function triggered when the submit button is clicked.
+   * Receives the click event as a parameter for additional event handling.
+   * Use this to handle form submission, data processing, or confirmation actions.
+   */
+  onSubmit?: (event: React.MouseEvent) => any;
+  /**
+   * When true, allows the title text to be edited inline by clicking on it.
+   * The title becomes an input field that users can modify directly in the modal header.
+   * Useful for renaming operations or title customization workflows.
+   */
+  isTitleEditable?: boolean;
+  /**
+   * Callback function triggered when the editable title text changes.
+   * Only relevant when `isTitleEditable` is true. Receives the change event
+   * which contains the new title value. Use this to update your title state.
+   */
+  onTitleChanged?: React.ChangeEventHandler<FormControlElement>;
+  /**
+   * Additional CSS classes to apply to the title input field.
+   * Only used when `isTitleEditable` is true. Use this to customize
+   * the appearance of the editable title input beyond default styling.
+   */
+  inputExtraClassNames?: string;
+  /**
+   * When true, hides the X close icon button in the modal header.
+   * Users will only be able to close the modal using footer buttons or by clicking outside.
+   * Useful when you want to force users to make an explicit choice via footer buttons.
+   */
+  hideCloseIcon?: boolean;
+  /**
+   * Size variant that controls the modal's width and maximum dimensions:
+   * - `xs`: Extra small modal (280px max width)
+   * - `sm`: Small modal (384px max width)
+   * - `md`: Medium modal (448px max width)
+   * - `lg`: Large modal (512px max width)
+   * - `xl`: Extra large modal (576px max width)
+   * - `2xl` through `6xl`: Progressively larger sizes up to full screen
+   */
+  size?: ModalSize;
+  /**
+   * When true, completely hides all default footer buttons (submit, cancel, custom).
+   * The modal will only have header and body content. Useful when you provide
+   * custom actions within the modal body or use a custom footer.
+   */
+  hideFooterButtons?: boolean;
+  /**
+   * When true, hides only the submit button while keeping other footer buttons visible.
+   * Useful for information-only modals that don't require a confirmation action.
+   */
+  hideSubmitButton?: boolean;
+  /**
+   * When true, hides only the cancel button while keeping other footer buttons visible.
+   * Useful for critical operations where cancellation should not be easily accessible.
+   */
+  hideCancelButton?: boolean;
+  /**
+   * Test ID attribute for the modal container element.
+   * Used for automated testing to identify and interact with the modal.
+   * Applied to the modal's root element for test targeting.
+   */
+  testId?: string;
+  /**
+   * Additional CSS classes to apply to the modal dialog container.
+   * Use this to customize the modal's positioning, sizing, or appearance
+   * beyond the built-in size variants and default styling.
+   */
+  dialogClassName?: string;
+  /**
+   * Placeholder text displayed in the title input when `isTitleEditable` is true.
+   * Shows helpful text when the title field is empty, guiding users on what to enter.
+   */
+  titlePlaceholder?: string;
+  /**
+   * When true, makes the title field required when `isTitleEditable` is true.
+   * Prevents submission or validation if the title is empty. Usually combined
+   * with validation feedback and error handling.
+   */
+  titleRequired?: boolean;
+  /**
+   * Error message to display when the editable title has validation issues.
+   * Only shown when `isTitleEditable` is true and there's a title validation error.
+   * Provides user feedback about what needs to be corrected.
+   */
+  titleError?: string;
+  /**
+   * Tooltip text to display when hovering over the submit button.
+   * Provides additional context or instructions about what the submit action will do.
+   * Helpful for clarifying the button's purpose in complex workflows.
+   */
+  submitButtonTooltip?: string;
+  /**
+   * Tooltip text to display when hovering over the cancel button.
+   * Can provide information about what happens when canceling or any data loss warnings.
+   */
+  cancelButtonTooltip?: string;
+  /**
+   * When true, disables the custom button preventing user interaction.
+   * Only relevant when `customButton` is true. The button will appear
+   * visually disabled and won't respond to clicks.
+   */
+  disableCustomButton?: boolean;
+  /**
+   * Custom header content that completely replaces the default modal header.
+   * When provided, the default title, subtitle, and close button are not rendered.
+   * Use this when you need complete control over the header layout and content.
+   */
+  customHeader?: React.ReactElement;
+  /**
+   * Content to display in the center area of the footer between buttons.
+   * Useful for adding status messages, progress indicators, or additional
+   * information that should be visible alongside the action buttons.
+   */
+  middleFooterSection?: React.ReactElement;
+  /**
+   * Visual style variant for the custom button when `customButton` is true.
+   * Determines the button's appearance and color scheme. Uses the same
+   * variants as the standard Button component (outline, theme, danger, etc.).
+   */
+  customButtonVariant?: ButtonVariant;
+  /**
+   * Controls whether focus should be trapped within the modal when open.
+   * When true (default), focus cycles through modal elements only. Set to false
+   * if you need to interact with elements outside the modal (like tooltips with inputs).
+   * @default true
+   */
+  keepFocusInsideModal?: boolean;
+  /**
+   * Visual style variant for the submit button.
+   * Determines the button's appearance and color scheme. Use 'theme' for primary
+   * actions, 'danger' for destructive actions, or other variants as appropriate.
+   */
+  submitButtonVariant?: ButtonVariant;
+  /**
+   * ARIA attribute that references the ID of an element containing descriptive text for the modal.
+   * This prop is passed to the modal dialog element as `aria-describedby` for accessibility purposes.
+   */
+  ariaDescribedBy?: string;
+  /**
+   * Callback function triggered when the user clicks/taps outside the modal dialog.
+   * Receives the pointer event. Use this to customize outside-click behavior,
+   * such as preventing closure in certain conditions or showing warnings.
+   */
+  onPointerDownOutside?: (e: Event) => void;
+  /**
+   * Callback function triggered when the user interacts outside the modal.
+   * This includes clicks, taps, and other interactions outside the modal area.
+   * More general than `onPointerDownOutside` and covers additional interaction types.
+   */
+  onInteractOutside?: (e: Event) => void;
 }
+//#endregion
+export { ModalProps, ModalSize, TitleIconPosition };

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

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

package/dist/src/ProgressBar/ProgressBar.d.ts

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