@seeqdev/qomponents 0.0.184 → 0.0.185

package/dist/src/Checkbox/Checkbox.test.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { Checkbox } from './Checkbox';
+import userEvent from '@testing-library/user-event';
+describe('Checkbox', () => {
+    class Context {
+        testId = 'checkboxTestId';
+        props = {
+            onChange: jest.fn(),
+            checked: false,
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderCheckbox = (props) => render(_jsx(Checkbox, { ...props }));
+    it('renders checkbox', () => {
+        renderCheckbox(tc.props);
+        expect(screen.getByTestId(tc.testId)).toBeInTheDocument();
+    });
+    it('renders radio', () => {
+        renderCheckbox({ ...tc.props, type: 'radio' });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('type', 'radio');
+    });
+    it('renders label', () => {
+        const label = 'look at this checkbox!';
+        renderCheckbox({ ...tc.props, label });
+        expect(screen.getByText(label)).toBeInTheDocument();
+    });
+    it('respects checked', () => {
+        renderCheckbox({ ...tc.props, checked: true });
+        expect(screen.getByTestId(tc.testId)).toBeChecked();
+    });
+    it('calls onChange handler', async () => {
+        const onChange = jest.fn();
+        renderCheckbox({ ...tc.props, onChange });
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(onChange).toHaveBeenCalled();
+    });
+    it('calls onKeyDown handler', async () => {
+        const onKeyDown = jest.fn();
+        renderCheckbox({ ...tc.props, onKeyDown });
+        await userEvent.type(screen.getByTestId(tc.testId), 'a');
+        expect(onKeyDown).toHaveBeenCalled();
+    });
+    it('calls onClickHandler handler', async () => {
+        const onClick = jest.fn();
+        renderCheckbox({ ...tc.props, onClick });
+        await userEvent.click(screen.getByTestId(tc.testId));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('respects disabled', () => {
+        renderCheckbox({ ...tc.props, disabled: true });
+        expect(screen.getByTestId(tc.testId)).not.toBeEnabled();
+    });
+    it('renders label clickable', async () => {
+        const label = 'amazing checkbox';
+        const onClick = jest.fn();
+        renderCheckbox({ ...tc.props, label, onClick });
+        expect(screen.getByTestId(tc.testId)).not.toBeChecked();
+        await userEvent.click(screen.getByText(label));
+        expect(onClick).toHaveBeenCalled();
+    });
+    it('respects id', () => {
+        const id = 'checkboxId';
+        renderCheckbox({ ...tc.props, id });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('id', id);
+    });
+    it('respects name', () => {
+        const name = 'checkboxName';
+        renderCheckbox({ ...tc.props, name });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('name', name);
+    });
+    it('respects name', () => {
+        const value = 'priceless';
+        renderCheckbox({ ...tc.props, value });
+        expect(screen.getByTestId(tc.testId)).toHaveProperty('value', value);
+    });
+    it('applies extraClassNames', () => {
+        const extraClassNames = 'extra styling so fancy';
+        renderCheckbox({ ...tc.props, extraClassNames });
+        expect(screen.getByTestId(tc.testId).parentNode).toHaveClass(extraClassNames);
+    });
+    it('applies extraLabelClassNames', () => {
+        const extraLabelClassNames = 'special label';
+        const label = 'amazing checkbox';
+        renderCheckbox({ ...tc.props, extraLabelClassNames, label });
+        expect(screen.getByText(label)).toHaveClass(extraLabelClassNames);
+    });
+});

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

@@ -0,0 +1,91 @@
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export interface CheckboxProps extends TooltipComponentProps {
+    /**
+     * Additional CSS classes to apply to the checkbox container.
+     * These classes are combined with the component's built-in styling.
+     * Use this to customize the overall appearance of the checkbox wrapper.
+     */
+    extraClassNames?: string;
+    /**
+     * Additional CSS classes to apply specifically to the label element.
+     * Use this to customize the styling of the text label that appears next to the checkbox.
+     * Does not affect the input element itself.
+     */
+    extraLabelClassNames?: string;
+    /**
+     * Determines the type of input control to render:
+     * - `checkbox`: Standard checkbox that can be checked/unchecked independently
+     * - `radio`: Radio button that is typically part of a group where only one can be selected
+     * @default 'checkbox'
+     */
+    type?: 'radio' | 'checkbox';
+    /**
+     * HTML ID attribute for the input element.
+     * Should be unique across the entire page for proper HTML semantics and accessibility.
+     * If not provided, a random ID will be generated automatically.
+     * Used for associating the label with the input for accessibility.
+     */
+    id?: string;
+    /**
+     * Name attribute for the input element, used for form submission and grouping.
+     * For radio buttons, all options in the same group should share the same name.
+     * For checkboxes, this identifies the field when the form is submitted.
+     */
+    name?: string;
+    /**
+     * Controls whether the checkbox/radio button is currently checked.
+     * Use this for controlled components where you manage the state externally.
+     * When provided, the component becomes controlled and you must handle state changes via `onChange`.
+     */
+    checked?: boolean;
+    /**
+     * Sets the initial checked state for uncontrolled components.
+     * Only used when `checked` is not provided (uncontrolled mode).
+     * The component will manage its own state after the initial render.
+     */
+    defaultChecked?: boolean;
+    /**
+     * The value associated with this checkbox/radio button.
+     * This is the value that will be submitted with the form when the input is checked.
+     * For radio buttons, each option in a group should have a unique value.
+     */
+    value?: string | number;
+    /**
+     * The text or content to display as the label next to the checkbox/radio button.
+     * Can be a simple string or any React element for more complex label content.
+     * Clicking on this label will toggle the input due to proper accessibility association.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * Callback function triggered when the checkbox/radio button state changes.
+     * Receives the change event which contains the new checked state and value.
+     * Use this to update your component state when in controlled mode.
+     */
+    onChange?: React.ChangeEventHandler<FormControlElement>;
+    /**
+     * Callback function triggered when a key is pressed while the input has focus.
+     * Useful for implementing custom keyboard navigation or shortcuts.
+     * Receives the keyboard event with details about the pressed key.
+     */
+    onKeyDown?: React.KeyboardEventHandler<FormControlElement>;
+    /**
+     * Callback function triggered when the input element is clicked.
+     * This fires before the onChange event and can be used for additional click handling.
+     * Note that clicking the associated label will also trigger this event.
+     */
+    onClick?: React.MouseEventHandler<FormControlElement>;
+    /**
+     * When true, disables the checkbox/radio button preventing user interaction.
+     * Disabled inputs appear visually dimmed and do not respond to user actions.
+     * The input will not be included in form submissions when disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Test ID attribute for the input element used in automated testing.
+     * Applied to the `data-testid` attribute for element selection in test suites.
+     * Helps identify this specific checkbox/radio button in tests.
+     */
+    testId?: string;
+}
+export {};

package/dist/src/Checkbox/Checkbox.types.js

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

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

@@ -0,0 +1 @@
+export { Checkbox as default } from './Checkbox';

package/dist/src/Checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox as default } from './Checkbox';

package/dist/src/Collapse/Collapse.d.ts

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

package/dist/src/Collapse/Collapse.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+const Collapse = ({ isVisible, children }) => {
+    const contentRef = useRef(null);
+    const [contentHeight, setContentHeight] = useState(0);
+    useEffect(() => {
+        if (contentRef.current) {
+            setTimeout(() => {
+                setContentHeight((contentRef.current?.scrollHeight ?? 0) + 5);
+            }, 0);
+        }
+    }, [children]);
+    return (_jsx(AnimatePresence, { initial: false, children: isVisible && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: contentHeight, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { type: 'spring', damping: 20, stiffness: 100 }, children: _jsx("div", { ref: contentRef, children: children }) })) }));
+};
+export default Collapse;

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

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

package/dist/src/Collapse/Collapse.stories.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import Collapse from './Collapse';
+import { QTip } from '../Tooltip';
+import Button from '../Button';
+export default {
+    title: 'Collapse',
+};
+export const AllCollapses = () => {
+    const [isVisible, setIsVisible] = React.useState(true);
+    const renderChild = () => (_jsxs("div", { className: "tw-text-sq-color-gray dark:tw-text-sq-white", children: [
+            _jsx("p", { className: "tw-mb-5 tw-text-[0.9375rem] tw-leading-normal", children: "This is a content to be shown when the collapse is visible. Click the button above to toggle it" }), _jsx(Button, { variant: "outline", label: "Save data" })
+        ] }));
+    const renderAllVariations = () => (_jsxs(_Fragment, { children: [
+            _jsx("div", { className: "tw-p-4 light", children: _jsxs("div", { className: "tw-p-4", children: [
+                        _jsx(Button, { variant: "theme", label: "Toggle Collapse", onClick: () => setIsVisible(!isVisible) }), _jsx(Collapse, { isVisible: isVisible, children: renderChild() })
+                    ] }) }), _jsx("div", { className: "tw-p-4 tw-dark tw-bg-sq-dark-background", children: _jsxs("div", { className: "tw-p-4", children: [
+                        _jsx(Button, { variant: "theme", label: "Toggle Collapse", onClick: () => setIsVisible(!isVisible) }), _jsx(Collapse, { isVisible: isVisible, children: renderChild() })
+                    ] }) })
+        ] }));
+    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
+            _jsx(QTip, {}), _jsxs("div", { className: "color_topic", children: [
+                    _jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [
+                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [
+                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [
+                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })
+        ] }));
+};

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

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

package/dist/src/Collapse/Collapse.test.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Collapse from './Collapse';
+describe('Collapse component', () => {
+    test('renders children when visible', async () => {
+        render(_jsx(Collapse, { isVisible: true, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        await waitFor(() => {
+            expect(screen.getByTestId('content')).toBeVisible();
+        });
+    });
+    test('does not render children when not visible', async () => {
+        render(_jsx(Collapse, { isVisible: false, children: _jsx("div", { "data-testid": "content", children: "Content" }) }));
+        expect(screen.queryByTestId('content')).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,18 @@
+/**
+ * Props for the Collapse component that creates smooth expand/collapse animations.
+ */
+export interface CollapseProps {
+    /**
+     * Controls whether the collapse content is visible and expanded.
+     * When true, the content smoothly expands to full height.
+     * When false, the content smoothly collapses to zero height.
+     * Use this to control the collapse state from parent components.
+     */
+    isVisible: boolean;
+    /**
+     * Content to display inside the collapsible area.
+     * Can be any React elements that you want to show/hide with animation.
+     * The content will be measured and animated when expanding or collapsing.
+     */
+    children: React.ReactNode;
+}

package/dist/src/Collapse/Collapse.types.js

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

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

@@ -0,0 +1 @@
+export { default } from './Collapse';

package/dist/src/Collapse/index.js

@@ -0,0 +1 @@
+export { default } from './Collapse';

package/dist/src/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import '../styles.css';
+import { IconProps } from './Icon.types';
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+declare const Icon: React.FunctionComponent<IconProps>;
+export default Icon;

package/dist/src/Icon/Icon.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+const colorClassesThemeLight = {
+    'theme': 'tw-text-sq-color-dark',
+    'white': 'tw-text-white',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': 'tw-text-sq-warning-color',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'tw-text-sq-disabled-gray',
+    'color': '',
+    'info': 'tw-text-sq-link',
+    'text': 'tw-text-sq-text-color',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+const colorClassesThemeDark = {
+    'theme': 'dark:tw-text-sq-color-dark-dark',
+    'white': '',
+    'dark-gray': 'tw-text-sq-fairly-dark-gray',
+    'warning': '',
+    'darkish-gray': 'tw-text-sq-darkish-gray',
+    'gray': 'dark:tw-text-sq-dark-disabled-gray',
+    'color': '',
+    'info': 'dark:tw-text-sq-link-dark',
+    'text': 'dark:tw-text-sq-dark-text',
+    'inherit': '',
+    'danger': 'tw-text-sq-danger-color',
+    'theme-light': 'tw-text-sq-color-light',
+    'success': 'tw-text-sq-success-color',
+};
+/**
+ * Icon:
+ *  - access to Seeq custom icons by providing the desired icon
+ *  - leverage "type" to style your icon
+ */
+const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClassNames, id, large, small, size, color, testId, customId, number, ...tooltipProps }) => {
+    if ((type === 'color' && (color === undefined || color === '')) || (color && type !== 'color')) {
+        const errorMessage = color === undefined || color === ''
+            ? 'Icon with type="color" must have prop color specified.'
+            : 'Icon with prop color must have type="color".';
+        return _jsx("div", { className: "tw-text-sq-danger-color", children: errorMessage });
+    }
+    const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
+    const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
+    const style = type === 'color' && color ? { color } : {};
+    const sizeClass = size ? `fa-${size}` : small ? 'fa-sm' : large ? 'fa-lg' : '';
+    const appliedClassNames = `${iconPrefixString} ${icon} ${sizeClass} 
+  ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'tw-cursor-pointer' : ''} ${extraClassNames} focus:tw-outline-none focus-visible:tw-outline-none tw-outline-none`;
+    const tooltipData = getQTipData(tooltipProps);
+    return (_jsx("i", { className: appliedClassNames, style: style, onClick: onClick, "data-testid": testId, "data-customid": customId, id: id, "data-number": number, ...tooltipData }));
+};
+export default Icon;

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

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

package/dist/src/Icon/Icon.stories.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from './Icon';
+import { iconTypes } from './Icon.types';
+export default {
+    title: 'Icons',
+};
+export const AllIcons = () => {
+    const renderAllVariations = () => {
+        return (_jsxs(_Fragment, { children: [
+                _jsx("br", {}), _jsx("br", {}), iconTypes.map((iconType) => {
+                    return (_jsxs("div", { children: [
+                            _jsxs("b", { children: ["type=", iconType] }), _jsx("br", {}), _jsxs("div", { children: [
+                                    _jsx(Icon, { icon: "fc-genai-chat", small: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-formula-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-datalab-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-genai-agent-q", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-workbook-ai", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-vantage", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })
+                                ] }), _jsxs("div", { children: [
+                                    _jsx(Icon, { icon: "fc-statistics-menu", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-statistic-summary", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined }), _jsx(Icon, { icon: "fc-create-summary", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-view-summaries", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })
+                                ] }), _jsx("b", { children: "Sizes" }), _jsx("br", {}), _jsxs("div", { className: "tw-flex tw-flex-row tw-flex-wrap tw-gap-1 tw-py-6", children: [
+                                    _jsx(Icon, { icon: "fc-pca", size: "2xs", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "xs", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "sm", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "lg", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "xl", type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-pca", size: "2xl", type: iconType, color: iconType === 'color' ? 'purple' : undefined })
+                                ] }), _jsxs("div", { className: "tw-dark tw-bg-sq-dark-background", children: [
+                                    _jsx(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'purple' : undefined }), _jsx(Icon, { icon: "fc-announcements", extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? '#928378' : undefined }), _jsx(Icon, { icon: "fc-announcements", large: true, extraClassNames: 'tw-p-2', type: iconType, color: iconType === 'color' ? 'pink' : undefined })
+                                ] }), _jsx("br", {})
+                        ] }, `${iconType}`));
+                })] }));
+    };
+    return (_jsxs("div", { className: "tw-grid tw-grid-cols-4 tw-gap-4", children: [
+            _jsxs("div", { className: "color_topic", children: [
+                    _jsx("b", { children: "Topic Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_analysis", children: [
+                    _jsx("b", { children: "Analysis Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_datalab", children: [
+                    _jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [
+                    _jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })
+        ] }));
+};

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

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

package/dist/src/Icon/Icon.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import Icon from './Icon';
+describe('Icon', () => {
+    class Context {
+        testId = 'iconTestId';
+        icon = 'testIcon';
+        props = {
+            icon: this.icon,
+            onClick: jest.fn(),
+            testId: this.testId,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+    });
+    const renderIcon = (props) => render(_jsx(Icon, { ...props }));
+    it('renders icon', () => {
+        renderIcon(tc.props);
+        expect(screen.getByTestId(tc.testId)).toHaveClass(tc.icon);
+    });
+    it('renders large icon', () => {
+        renderIcon({ ...tc.props, large: true });
+        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-lg');
+    });
+    it('renders small icon', () => {
+        renderIcon({ ...tc.props, small: true });
+        expect(screen.getByTestId(tc.testId)).toHaveClass('fa-sm');
+    });
+    describe('icon types', () => {
+        it('renders the theme type by default', () => {
+            renderIcon(tc.props);
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-color-dark');
+        });
+        it('renders the white icon', () => {
+            renderIcon({ ...tc.props, type: 'white' });
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-white');
+        });
+        it('renders the text-type icon', () => {
+            renderIcon({ ...tc.props, type: 'text' });
+            expect(screen.getByTestId(tc.testId)).toHaveClass('tw-text-sq-text-color');
+        });
+        it('renders the color-type icon', () => {
+            renderIcon({ ...tc.props, type: 'color', color: '#AABBFF' });
+            expect(screen.getByTestId(tc.testId)).toHaveStyle('color: #AABBFF');
+        });
+        it('renders a warning if type=color and no color is provided', () => {
+            renderIcon({ ...tc.props, type: 'color' });
+            expect(screen.getByText('Icon with type="color" must have prop color specified.')).toBeInTheDocument();
+        });
+    });
+});

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

@@ -0,0 +1,90 @@
+import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
+export declare const iconTypes: readonly ["theme", "white", "dark-gray", "darkish-gray", "gray", "color", "info", "text", "warning", "inherit", "danger", "theme-light", "success"];
+export type IconType = typeof iconTypes[number];
+export type IconSize = '2xs' | 'xs' | 'sm' | 'lg' | 'xl' | '2xl' | '1x' | '2x' | '3x' | '4x' | '5x' | '6x' | '7x' | '8x' | '9x' | '10x';
+/**
+ * Props for the Icon component that renders customizable icons with various styling options.
+ * Extends TooltipComponentProps to support tooltip functionality on the icon.
+ */
+export interface IconProps extends TooltipComponentProps {
+    /**
+     * Icon class name to display, typically from FontAwesome.
+     * Examples: 'fc-zoom', 'fc-delete', 'fc-save'. This determines which icon is rendered.
+     */
+    icon: string;
+    /**
+     * 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
+     * from different icon sets require specific prefixes. Use this to override the default.
+     */
+    iconPrefix?: string;
+    /**
+     * Visual style type that determines the icon's color and appearance:
+     * - `theme`: Uses primary theme colors (default)
+     * - `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 'theme'
+     */
+    type?: IconType;
+    /**
+     * Icon size, mapped to FontAwesome sizing classes so it works for both FA and FontCustom icons.
+     * Examples: 'sm', 'lg', 'xl', '2xl', '1x'...'10x', 'xs', '2xs'.
+     */
+    size?: IconSize;
+    /**
+     * 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 icon element.
+     * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.
+     */
+    extraClassNames?: string;
+    /**
+     * HTML ID attribute for the icon element.
+     * Should be unique across the page for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * @deprecated Use `size="lg"` instead.
+     */
+    large?: boolean;
+    /**
+     * @deprecated Use `size="sm"` instead.
+     */
+    small?: boolean;
+    /**
+     * Test ID attribute for the 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;
+    /**
+     * Numeric value associated with the icon, purpose depends on specific use case.
+     * Can be used for ordering, counting, or any numeric data related to the icon.
+     */
+    number?: number;
+}

package/dist/src/Icon/Icon.types.js

@@ -0,0 +1,15 @@
+export const iconTypes = [
+    'theme',
+    'white',
+    'dark-gray',
+    'darkish-gray',
+    'gray',
+    'color',
+    'info',
+    'text',
+    'warning',
+    'inherit',
+    'danger',
+    'theme-light',
+    'success',
+];

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

@@ -0,0 +1 @@
+export { default } from './Icon';

package/dist/src/Icon/index.js

@@ -0,0 +1 @@
+export { default } from './Icon';

package/dist/src/InputGroup/InputGroup.d.ts

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

package/dist/src/InputGroup/InputGroup.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import '../styles.css';
+import { getQTipData } from '../Tooltip/qTip.utilities';
+import TextField from '../TextField';
+import Button from '../Button';
+const baseClasses = 'tw-flex tw-outline-none tw-rounded-md tw-w-full tw-relative tw-flex-wrap';
+const errorClasses = 'tw-border-sq-danger-color';
+const borderColorClasses = [
+    'tw-border-sq-disabled-gray',
+    'dark:tw-border-sq-dark-disabled-gray',
+    'dark:focus:tw-border-sq-color-dark-dark',
+    'dark:active:tw-border-sq-color-dark-dark',
+    'focus:tw-border-sq-color-dark',
+    'active:tw-border-sq-color-dark',
+].join(' ');
+const fieldBorderRadius = 'tw-rounded-l-md tw-rounded-r-none';
+const fieldClasses = 'tw-leading-normal tw-outline-none tw-py-1 tw-px-3' + 'tw-p-1 tw-border-solid tw-border';
+const darkTheme = 'dark:tw-bg-sq-dark-background dark:tw-text-sq-dark-text disabled:dark:tw-text-sq-dark-text-lighter';
+const lightTheme = 'tw-text-sq-text-color disabled:tw-text-sq-darkish-gray';
+/**
+ * InputGroup.
+ */
+export const InputGroup = React.forwardRef((props, ref) => {
+    const { readonly = false, onChange, onKeyUp, onFocus, onBlur, onKeyDown, name, value, placeholder, append = [], extraClassNames = '', id, testId, showError, required, autoComplete, autoFocus, disabled, type, step, min, max, field, maxLength, minLength, ...tooltipProps } = props;
+    const tooltipData = getQTipData(tooltipProps);
+    const appliedClasses = `${baseClasses} ${extraClassNames}`;
+    const fieldAppliedClasses = `${fieldClasses} ${extraClassNames} ${lightTheme} ${darkTheme} ${fieldBorderRadius} ${showError ? errorClasses : borderColorClasses} `;
+    const elementsToAppend = append.filter(Boolean);
+    return (_jsxs("div", { id: `input-group-${id}`, className: appliedClasses, children: [field ? (_jsx("div", { "data-testid": testId, className: `tw-flex tw-flex-1 tw-cursor-pointer active:tw-z-50 ${fieldAppliedClasses}`, children: field })) : (_jsx(TextField, { testId: testId, readonly: readonly, onChange: onChange, onKeyUp: onKeyUp, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, name: name, ref: ref, showError: showError, value: value, required: required, placeholder: placeholder, autoComplete: autoComplete, autoFocus: autoFocus, id: id, type: type, disabled: disabled, step: step, min: min, max: max, maxLength: maxLength, minLength: minLength, extraClassNames: `tw-flex tw-flex-1 tw-w-full focus:tw-z-30 tw-rounded-r-none last:tw-rounded-r-md ${extraClassNames}`, ...tooltipData })), elementsToAppend.map((item, index) => {
+                return item?.variant === 'button' ? (_jsx(Button, { extraClassNames: `${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} focus:tw-z-40 focus:tw-border tw-rounded-none last:tw-rounded-r-md`, ...item.buttonProps }, index)) : (_jsx("div", { className: `${borderColorClasses} ${index ? 'tw-ml-[-1px]' : 'tw-ml-0'} tw-flex tw-items-center tw-justify-center tw-rounded-none last:tw-rounded-r-md active:tw-z-30 active:tw-border tw-border`, children: item?.element }, index));
+            })] }));
+});

package/dist/src/InputGroup/InputGroup.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;