@seeqdev/qomponents 0.0.157 → 0.0.159-patch-package-alternative

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

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

package/dist/{SvgIcon → src/SvgIcon}/index.d.ts

@@ -1 +1 @@
-export { default } from './SvgIcon';
+export { default } from './SvgIcon';

package/dist/{Tabs → src/Tabs}/Tabs.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { TabsProps } from './Tabs.types';
-declare const Tabs: React.FunctionComponent<TabsProps>;
-export default Tabs;
+import React from 'react';
+import { TabsProps } from './Tabs.types';
+declare const Tabs: React.FunctionComponent<TabsProps>;
+export default Tabs;

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllTabsVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/{Tabs → src/Tabs}/Tabs.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';

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

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

package/dist/{Tabs → src/Tabs}/index.d.ts

@@ -1 +1 @@
-export { default } from './Tabs';
+export { default } from './Tabs';

package/dist/{TextArea → src/TextArea}/TextArea.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { TextAreaProps } from './TextArea.types';
-import '../styles.css';
-/**
- * TextArea.
- */
-export declare const TextArea: React.FunctionComponent<TextAreaProps>;
+import React from 'react';
+import { TextAreaProps } from './TextArea.types';
+import '../styles.css';
+/**
+ * TextArea.
+ */
+export declare const TextArea: React.FunctionComponent<TextAreaProps>;

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllTextAreas: () => import("react/jsx-runtime").JSX.Element;

package/dist/{TextArea → src/TextArea}/TextArea.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';

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

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

package/dist/{TextArea → src/TextArea}/index.d.ts

@@ -1 +1 @@
-export { TextArea as default } from './TextArea';
+export { TextArea as default } from './TextArea';

package/dist/{TextField → src/TextField}/TextField.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { InputLengthStyleProps, TextFieldProps } from './TextField.types';
-import '../styles.css';
-/**
- * Textfield.
- */
-export declare const TextField: React.FunctionComponent<TextFieldProps & InputLengthStyleProps>;
+import React from 'react';
+import { InputLengthStyleProps, TextFieldProps } from './TextField.types';
+import '../styles.css';
+/**
+ * Textfield.
+ */
+export declare const TextField: React.FunctionComponent<TextFieldProps & InputLengthStyleProps>;

package/dist/src/TextField/TextField.stories.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllTextFields: () => import("react/jsx-runtime").JSX.Element;

package/dist/{TextField → src/TextField}/TextField.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,199 @@
+/// <reference types="react" />
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+import { FormControlElement, InputGroupPlacement } from '../types';
+export interface TextFieldProps extends TooltipComponentProps {
+    /**
+     * When true, makes the text field read-only, preventing user input.
+     * The field will display its value but users cannot modify it. Unlike disabled fields,
+     * read-only fields can still receive focus and their values are included in form submissions.
+     */
+    readonly?: boolean;
+    /**
+     * When true, disables the text field preventing any user interaction.
+     * Disabled fields appear visually dimmed, cannot receive focus, and their
+     * values are not included in form submissions.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function triggered when the text field value changes.
+     * Receives the change event containing the new value. Use this to update
+     * your component state in controlled input scenarios.
+     */
+    onChange?: React.ChangeEventHandler<FormControlElement>;
+    /**
+     * Callback function triggered when a key is released while the field has focus.
+     * Useful for implementing search-as-you-type functionality or debounced input handling.
+     * Receives the keyboard event with details about the released key.
+     */
+    onKeyUp?: React.KeyboardEventHandler<FormControlElement>;
+    /**
+     * Callback function triggered when a key is pressed while the field has focus.
+     * Useful for implementing keyboard shortcuts, form submission on Enter,
+     * or preventing certain characters from being entered.
+     */
+    onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
+    /**
+     * Callback function triggered when the text field receives focus.
+     * Use this to handle focus-related logic such as showing hints,
+     * clearing placeholder text, or updating UI state.
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    /**
+     * Callback function triggered when the text field loses focus.
+     * Commonly used for form validation, saving draft data, or
+     * updating UI state when users finish interacting with the field.
+     */
+    onBlur?: React.FocusEventHandler<FormControlElement>;
+    /**
+     * HTML ID attribute for the text field element.
+     * Should be unique across the entire page for proper HTML semantics and accessibility.
+     * Used for associating labels and error messages with the input field.
+     */
+    id?: string;
+    /**
+     * Name attribute for the text field used in form submission.
+     * This identifies the field's data when the form is submitted to a server.
+     * Essential for proper form handling and data processing.
+     */
+    name?: string;
+    /**
+     * Size variant that controls the text field's height and text size:
+     * - `sm`: Small field with compact padding and smaller text
+     * - `lg`: Large field with generous padding and larger text
+     * If not specified, uses the default/medium size.
+     */
+    size?: 'sm' | 'lg';
+    /**
+     * The current value of the text field.
+     * Can be a string for text input, an array of strings for multi-value fields,
+     * or a number for numeric inputs. Use this for controlled input components.
+     */
+    value?: string | string[] | number;
+    /**
+     * Placeholder text displayed when the field is empty.
+     * Provides users with a hint about what type of content is expected.
+     * Should be descriptive but not replace proper labels.
+     */
+    placeholder?: string;
+    /**
+     * Additional CSS classes to apply to the text field element.
+     * These classes are combined with the component's built-in styling.
+     * Use this to customize appearance beyond the standard size variants.
+     */
+    extraClassNames?: string;
+    /**
+     * HTML input type that determines the field's behavior and validation:
+     * - `text`: Standard text input (default)
+     * - `password`: Obscures entered text for security
+     * - `number`: Numeric input with increment/decrement controls
+     * - `email`: Email input with built-in email validation
+     * @default 'text'
+     */
+    type?: 'text' | 'password' | 'number' | 'email';
+    /**
+     * Test ID attribute for the text field element used in automated testing.
+     * Applied to the `data-testid` attribute for element selection in test suites.
+     */
+    testId?: string;
+    /**
+     * React ref object for direct access to the text field DOM element.
+     * Use this when you need to programmatically focus the field,
+     * measure its dimensions, or perform other direct DOM operations.
+     */
+    ref?: any;
+    /**
+     * Configuration for input group styling when the field is part of a group:
+     * - `prepend`: Field is preceded by another element (button, icon, text)
+     * - `append`: Field is followed by another element
+     * Affects border radius and styling to create seamless grouped appearance.
+     */
+    inputGroup?: InputGroupPlacement;
+    /**
+     * Step value for numeric input types that defines the increment/decrement amount.
+     * When users click the number input's up/down arrows or use arrow keys,
+     * the value changes by this step amount. Can be a number or string.
+     */
+    step?: number | string;
+    /**
+     * When true, displays error styling on the text field.
+     * Typically changes border color to red and may add error-related visual cues.
+     * Usually used in combination with `errorText` to provide validation feedback.
+     */
+    showError?: boolean;
+    /**
+     * Error message text to display below the field when validation fails.
+     * Provides specific feedback about what the user needs to correct.
+     * Only shown when there's an actual error to communicate.
+     */
+    errorText?: string;
+    /**
+     * When true, marks the field as required for form validation.
+     * May add visual indicators (like asterisks) and prevents form submission
+     * if the field is empty. Essential for mandatory form fields.
+     */
+    required?: boolean;
+    /**
+     * HTML autocomplete attribute that helps browsers provide appropriate suggestions.
+     * Values like 'email', 'name', 'new-password', 'current-password', etc.
+     * Improves user experience by enabling relevant autocomplete functionality.
+     */
+    autoComplete?: string;
+    /**
+     * When true, automatically focuses this field when the component mounts.
+     * Useful for modal dialogs or forms where immediate input is expected.
+     * Should be used sparingly to avoid accessibility issues.
+     */
+    autoFocus?: boolean;
+    /**
+     * Fixed width in pixels for the text field input element.
+     * Primarily used in the Editable Text component for precise sizing control.
+     * Overrides default responsive width behavior when a specific width is needed.
+     */
+    inputWidth?: number;
+    /**
+     * Fixed height in pixels for the text field input element.
+     * Primarily used in the Editable Text component for precise sizing control.
+     * Overrides default height behavior when a specific height is needed.
+     */
+    inputHeight?: number;
+    /**
+     * Minimum allowed value for numeric, date, time, and range input types.
+     * Prevents users from entering or selecting values below this threshold.
+     * Used for validation and UI constraints in number-based inputs.
+     */
+    min?: number;
+    /**
+     * Maximum allowed value for numeric, date, time, and range input types.
+     * Prevents users from entering or selecting values above this threshold.
+     * Used for validation and UI constraints in number-based inputs.
+     */
+    max?: number;
+}
+/**
+ * Interface for defining dimension styles with CSS-compatible values.
+ * Used internally for styling components with dynamic width and height.
+ */
+export interface DimensionStyle {
+    /** CSS width value (e.g., '100px', '50%', 'auto') */
+    width?: string;
+    /** CSS height value (e.g., '40px', '2rem', 'auto') */
+    height?: string;
+}
+/**
+ * Interface for defining text input length constraints.
+ * Used for validation and input limiting in text-based fields.
+ */
+export interface InputLengthStyleProps {
+    /**
+     * Maximum number of characters allowed in the text field.
+     * Prevents users from entering more text beyond this limit.
+     * Useful for database field constraints and UI consistency.
+     */
+    maxLength?: number;
+    /**
+     * Minimum number of characters required in the text field.
+     * Used for validation to ensure adequate input length.
+     * Commonly used for passwords, codes, or required descriptions.
+     */
+    minLength?: number;
+}

package/dist/{TextField → src/TextField}/index.d.ts

@@ -1 +1 @@
-export { TextField as default } from './TextField';
+export { TextField as default } from './TextField';

package/dist/{ToolbarButton → src/ToolbarButton}/ToolbarButton.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
-import { ToolbarButtonProps } from './ToolbarButton.types';
-export declare const ToolbarButton: React.FunctionComponent<ToolbarButtonProps>;
+import * as React from 'react';
+import { ToolbarButtonProps } from './ToolbarButton.types';
+export declare const ToolbarButton: React.FunctionComponent<ToolbarButtonProps>;

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

@@ -0,0 +1,5 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AllToolbarButtonVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/{ToolbarButton → src/ToolbarButton}/ToolbarButton.test.d.ts

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';