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

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

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

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

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

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

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

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

@@ -0,0 +1,86 @@
+import React from 'react';
+export interface AccordionProps {
+    /**
+     * Additional CSS classes to apply to the accordion container.
+     * Use this to customize the styling of the entire accordion component.
+     */
+    extraClassNames?: string;
+    /**
+     * The value of the accordion item that should be expanded by default when the component first renders.
+     * Only used when the accordion is in uncontrolled mode (when you don't manage the state externally).
+     * Should match the `value` of one of the items in `accordionItems`.
+     */
+    defaultValue?: string;
+    /**
+     * The value of the currently selected/expanded accordion item.
+     * This should match the `value` property of one of the items in `accordionItems`.
+     * Use this when you want to control which item is expanded from a parent component.
+     */
+    value: string;
+    /**
+     * When true, disables the entire accordion component, preventing any user interaction.
+     * Individual items can still be disabled independently using their own `disabled` property.
+     */
+    disabled?: boolean;
+    /**
+     * Array of accordion items to render. Each item represents a collapsible section
+     * with a clickable header (trigger) and expandable content area.
+     */
+    accordionItems: AccordionItem[];
+    /**
+     * Test ID attribute for the accordion container element.
+     * Used for automated testing and element selection in test suites.
+     */
+    testId?: string;
+    /**
+     * Callback function triggered when a user clicks on an accordion item header.
+     * Receives the `value` of the selected item as a parameter.
+     * Use this to handle accordion state changes and update the `value` prop accordingly.
+     */
+    onItemSelect: (key: string) => void;
+}
+interface AccordionItem {
+    /**
+     * Unique identifier for the accordion item.
+     * This value is used to determine which item is currently expanded and
+     * is passed to the `onItemSelect` callback when the item is clicked.
+     */
+    value: string;
+    /**
+     * The content displayed in the clickable header/trigger area of the accordion item.
+     * This is what users click to expand or collapse the item.
+     * Can be any React element (text, icons, buttons, etc.).
+     */
+    trigger: React.ReactNode;
+    /**
+     * The content displayed when the accordion item is expanded.
+     * This is the collapsible content area that shows/hides when the trigger is clicked.
+     * Can contain any React elements including forms, lists, text, or other components.
+     */
+    content: React.ReactNode;
+    /**
+     * Test ID attribute for this specific accordion item.
+     * Used for automated testing to uniquely identify and interact with this item.
+     * Applied to the item's container element.
+     */
+    itemTestId?: string;
+    /**
+     * HTML ID attribute for the accordion item's container element.
+     * Useful for accessibility, linking, or custom styling via CSS selectors.
+     * Should be unique across the entire page.
+     */
+    id?: string;
+    /**
+     * When true, disables this specific accordion item, preventing user interaction.
+     * The item will appear visually disabled and clicking on it will have no effect.
+     * This overrides the parent accordion's disabled state for this individual item.
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS classes to apply specifically to this item's content area.
+     * Use this to customize the styling of the expandable content section.
+     * Does not affect the trigger/header styling.
+     */
+    contentClassNames?: string;
+}
+export {};

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const ThemedAlert: any;
+export declare const WarningAlert: any;
+export declare const DangerAlert: any;
+export declare const GrayAlert: any;
+export declare const AllAlertsVariants: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Alert/Alert.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+interface Props {
+    /**
+     * The content to be displayed inside the alert message.
+     * Can include text, icons, buttons, or any other React elements.
+     * This is the main message or information you want to communicate to the user.
+     */
+    children: React.ReactNode;
+    /**
+     * When true, displays a close button (X icon) that allows users to dismiss the alert.
+     * When false, the alert cannot be closed by the user and must be controlled programmatically.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Callback function triggered when the user clicks the close button to dismiss the alert.
+     * Only relevant when `dismissible` is true. Use this to handle alert dismissal logic,
+     * such as updating state to hide the alert or performing cleanup actions.
+     */
+    onClose?: () => void;
+    /**
+     * Controls the visibility of the alert component.
+     * When false, the alert is completely hidden from the UI.
+     * Use this for programmatic control of when alerts should appear or disappear.
+     * @default true
+     */
+    show?: boolean;
+    /**
+     * The visual style variant of the alert, which determines its appearance and color scheme:
+     * - `danger`: Red styling for error messages or critical warnings
+     * - `warning`: Yellow/orange styling for caution messages
+     * - `gray`: Neutral gray styling for general information
+     * - `theme`: Uses the current theme colors for contextual information
+     */
+    variant: 'danger' | 'theme' | 'warning' | 'gray';
+    /**
+     * Test ID attribute for the alert container element.
+     * Used for automated testing and element selection in test suites.
+     * Also used as a prefix for the close button's test ID when dismissible.
+     * @default 'alert-id'
+     */
+    testId?: string;
+    /**
+     * HTML ID attribute for the alert container element.
+     * Should be unique across the entire page for proper HTML semantics.
+     * Useful for accessibility, linking, or custom styling via CSS selectors.
+     */
+    id?: string;
+    /**
+     * Additional CSS classes to apply to the alert container.
+     * Use this to customize the alert's appearance beyond the built-in variants.
+     * Classes are combined with the component's default styling.
+     */
+    extraClassNames?: string;
+}
+/**
+ * Combined props for the Alert component.
+ * Includes all Alert-specific properties plus tooltip functionality
+ * inherited from TooltipComponentProps for enhanced user interaction.
+ */
+export type AlertProps = Props & TooltipComponentProps;
+export {};

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

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

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ButtonProps } from './Button.types';
-import '../styles.css';
-/**
- * All-in-one Button:
- *  - use "variant" to achieve the desired style
- *  - include tooltips and/or icons
- */
-declare const Button: React.FunctionComponent<ButtonProps>;
-export default Button;
+import React from 'react';
+import { ButtonProps } from './Button.types';
+import '../styles.css';
+/**
+ * All-in-one Button:
+ *  - use "variant" to achieve the desired style
+ *  - include tooltips and/or icons
+ */
+declare const Button: React.FunctionComponent<ButtonProps>;
+export default Button;

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

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

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

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

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

@@ -0,0 +1,148 @@
+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 ["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;
+}

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

@@ -1 +1 @@
-export { default } from "./Button";
+export { default } from "./Button";

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

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

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,81 @@
+/// <reference types="react" />
+import { ButtonProps } from '../Button/Button.types';
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+/**
+ * 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;
+    };
+}
+/**
+ * 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;
+}
+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;
+}
+export {};

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

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

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

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

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

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

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

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