@seeqdev/qomponents 0.0.180 → 0.0.181

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

@@ -0,0 +1,198 @@
+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/TextField.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TextField.types.js.map

package/dist/TextField/TextField.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.types.js","sourceRoot":"","sources":["../../src/TextField/TextField.types.ts"],"names":[],"mappings":""}

package/dist/TextField/index.d.ts

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

package/dist/TextField/index.js

@@ -0,0 +1,2 @@
+export { TextField as default } from './TextField';
+//# sourceMappingURL=index.js.map

package/dist/TextField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,aAAa,CAAC"}

package/dist/ToolbarButton/ToolbarButton.d.ts

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

package/dist/ToolbarButton/ToolbarButton.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import Icon from '../Icon';
+import { DEFAULT_TOOL_TIP_DELAY } from '../Tooltip/Tooltip.types';
+import { getSvgIconPath } from '../utils/svg';
+const popoverBorderStyles = [
+    'tw:border-solid',
+    'tw:border',
+    'tw:rounded-md',
+    'tw:border-sq-disabled-gray',
+    'tw:dark:border-gray-500',
+].join(' ');
+const triggerBackgroundStyles = [
+    'tw:bg-transparent',
+    'tw:hover:bg-sq-worksheetspanel-gray',
+    'tw:active:bg-sq-worksheetspanel-gray',
+    'tw:dark:bg-transparent',
+    'tw:dark:hover:bg-sq-field-disabled-gray/30',
+    'tw:dark:active:bg-sq-field-disabled-gray/30',
+].join(' ');
+const activeBackgroundStyles = [
+    'active',
+    'tw:bg-sq-overlay',
+    'tw:active:bg-sq-overlay',
+    'tw:dark:bg-sq-dark-disabled-gray',
+    'tw:dark:hover:border-sq-dark-disabled-gray/30',
+    'tw:dark:active:bg-sq-dark-disabled-gray/30',
+].join(' ');
+const bgStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
+const disabledClasses = ['tw:opacity-50', 'tw:cursor-not-allowed'].join(' ');
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, ...props, asChild: true })));
+export const ToolbarButton = ({ isSmall = false, label, icon, secondIcon, forceSmallIcon = false, tooltipText, id, popoverContent, extraClassNames, testId, tooltipTestId, tooltipOptions, isActive = false, isHtmlTooltip = false, hasArrow = false, disabled = false, isPrimaryAnSvg = false, primaryIconExtraClassNames = false, iconHeight = 24, iconWidth = 24, primaryIconViewbox = '0 0 24 24', onClick, onHide, }) => {
+    let tooltipData = undefined;
+    if (tooltipText) {
+        tooltipData = {
+            'data-qtip-text': tooltipText,
+            'data-qtip-placement': tooltipOptions?.position,
+            'data-qtip-is-html': isHtmlTooltip,
+            'data-qtip-testid': tooltipTestId,
+            'data-qtip-delay': tooltipOptions?.delay ?? DEFAULT_TOOL_TIP_DELAY,
+        };
+    }
+    const onOpenChange = (open) => {
+        if (!open) {
+            onHide && onHide();
+        }
+    };
+    return (_jsxs(PopoverPrimitive.Root, { defaultOpen: false, onOpenChange: onOpenChange, children: [_jsx(PopoverPrimitive.Trigger, { id: id, className: `tw:bg-transparent tw:border-none tw:mx-sq-1.5 tw:first:ml-0 tw:last:mr-0 ${isActive ? 'active' : ''}`, disabled: disabled, "data-testid": testId, onClick: (e) => {
+                    onClick && onClick(e);
+                }, children: _jsxs("div", { ...tooltipData, className: `tw:flex tw:flex-col tw:items-center tw:rounded-md ${isSmall ? 'tw:py-px tw:px-1' : 'tw:px-2 tw:py-sq-5'} ${disabled ? disabledClasses : isActive ? activeBackgroundStyles : triggerBackgroundStyles} ${extraClassNames || ''}`, children: [_jsxs("span", { className: "tw:nowrap", children: [isPrimaryAnSvg ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: `tw:text-sq-text-color tw:dark:text-sq-dark-text ${primaryIconExtraClassNames || ''}`, viewBox: primaryIconViewbox, height: `${iconHeight}px`, width: `${iconWidth}px`, fill: "currentColor", "data-testid": testId, children: _jsx("path", { d: getSvgIconPath(icon) }) })) : (_jsx(Icon, { icon: icon, testId: "firstIcon", type: "text", size: !isSmall && !label && !secondIcon && !forceSmallIcon ? 'lg' : 'sm', extraClassNames: `tw:text-sq-text-color tw:dark:text-sq-dark-text` })), secondIcon && _jsx(Icon, { icon: secondIcon, type: "text", testId: "secondIcon" }), popoverContent ? (_jsx(Icon, { icon: "fc-arrow-dropdown", extraClassNames: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:ml-sq-3 tw:text-2", type: "text", size: "sm" })) : undefined] }), !isSmall && _jsx("small", { className: "tw:text-sq-text-color tw:dark:text-sq-dark-text tw:text-2.5", children: label })] }) }), !!popoverContent ? (_jsx(PopoverContent, { sideOffset: 2, align: "start", children: _jsxs("div", { className: bgStyles +
+                        ' tw:relative tw:z-[1000] tw:min-w-6 tw:p-2 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out' +
+                        ' tw:data-[state=closed]:fade-out-0 tw:data-[state=open]:fade-in-0 tw:data-[state=closed]:zoom-out-95 tw:data-[state=open]:zoom-in-95 tw:data-[side=bottom]:slide-in-from-top-2 tw:data-[side=left]:slide-in-from-right-2 tw:data-[side=right]:slide-in-from-left-2 tw:data-[side=top]:slide-in-from-bottom-2' +
+                        popoverBorderStyles, children: [hasArrow && (_jsx(PopoverPrimitive.Arrow, { asChild: true, children: _jsx("div", { className: " tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), popoverContent] }) })) : undefined] }));
+};
+//# sourceMappingURL=ToolbarButton.js.map

package/dist/ToolbarButton/ToolbarButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.js","sourceRoot":"","sources":["../../src/ToolbarButton/ToolbarButton.tsx"],"names":[],"mappings":"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"}

package/dist/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/ToolbarButton.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ToolbarButton } from './ToolbarButton';
+import Icon from '../Icon';
+import { QTip } from '../Tooltip/Qtip';
+export default {
+    title: 'Toolbar Button',
+};
+export const AllToolbarButtonVariants = () => {
+    const options = [
+        { value: 'a', label: 'Chocolate' },
+        { value: 'b', label: 'Strawberry' },
+        { value: 'c', label: 'Vanilla' },
+        { value: 'd', label: 'Rocky Road' },
+        { value: 'e', label: 'Crazy Cow' },
+        { value: 'f', label: 'Almond Joy' },
+        { value: 'g', label: 'All of the above' },
+    ];
+    const colorOptions = [
+        { value: 'h', label: 'pink' },
+        { value: 'i', label: 'purple' },
+        { value: 'j', label: 'green' },
+        { value: 'k', label: 'red' },
+    ];
+    const allToolbarButtons = (isDark) => (_jsxs("div", { className: isDark ? 'tw-dark tw:bg-sq-dark-background' : '', children: [_jsx("div", { className: "tw:p-5 ", children: _jsx(ToolbarButton, { icon: "fc-y-axis", label: "Popover", testId: "basic-popover1", tooltipText: "This is a small popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isSmall: true, popoverContent: _jsxs("div", { className: "tw:text-sm tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:bg-gray-200 tw:dark:bg-gray-700 tw:p-2", children: "Flavors" }), options.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2 tw:hover:bg-green-500", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value))), _jsx("p", { className: "tw:bg-gray-200 tw:dark:bg-gray-700 tw:p-2", children: "Colors" }), colorOptions.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value)))] }) }) }), _jsx("div", { className: "tw:p-5 ", children: _jsx(ToolbarButton, { icon: "fc-y-axis", label: "Normal", testId: "basic-popover1", tooltipText: "This is a normal popover.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, popoverContent: _jsxs("div", { className: "tw:text-sm tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:bg-gray-200 tw:dark:bg-gray-700 tw:p-2", children: "Flavors" }), options.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2 tw:hover:bg-green-500", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value))), _jsx("p", { className: "tw:bg-gray-200 tw:dark:bg-gray-700 tw:p-2", children: "Colors" }), colorOptions.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value)))] }) }) }), _jsxs("div", { className: "tw:p-5 tw:flex", children: [_jsx(ToolbarButton, { icon: "fc-y-axis", label: "With arrow", testId: "basic-popover1", tooltipText: "This is a normal popover.", tooltipOptions: { position: 'top', delay: 0 }, hasArrow: true, isHtmlTooltip: false, popoverContent: _jsxs("div", { className: "tw:text-sm tw:dark:text-sq-white", children: [_jsx("p", { className: "tw:bg-gray-200 tw:dark:bg-gray-700 tw:p-2", children: "Flavors" }), options.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2 tw:hover:bg-green-500", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value))), _jsx("p", { className: "tw:bg-gray-200 tw:dark:bg-gray-700 tw:p-2", children: "Colors" }), colorOptions.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value)))] }) }), _jsx(ToolbarButton, { icon: "fc-y-axis", tooltipText: "This is a large popover icon", tooltipOptions: { position: 'top', delay: 0 }, testId: "basic-popover4", isHtmlTooltip: false })] }), _jsxs("div", { className: "tw:p-5 ", children: [_jsx("p", { className: "tw:text-sq-theme-dark tw:text-2.5", children: "Without popup" }), _jsx(ToolbarButton, { icon: "fc-y-axis", label: "Button", testId: "basic-popover3", isHtmlTooltip: false })] }), _jsx("div", { className: "tw:p-5 tw:flex", children: _jsx(ToolbarButton, { icon: "fc-y-axis", label: "Disabled", testId: "basic-popover2", tooltipText: "This is a popover.", tooltipOptions: { position: 'top' }, isHtmlTooltip: false, disabled: true, popoverContent: _jsxs("div", { className: "tw:border tw:border-gray-100 tw:p-2 tw:rounded-sm tw:text-sm tw:dark:bg-sq-dark-background", children: [_jsx("p", { className: "tw:bg-gray-200 tw:dark:bg-gray-700 tw:p-2", children: "Flavors" }), options.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2 tw:hover:bg-green-500", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value))), _jsx("p", { className: "tw:bg-gray-200 tw:dark:bg-gray-700 tw:p-2", children: "Colors" }), colorOptions.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value)))] }) }) }), _jsx("div", { className: "tw:p-5 ", children: _jsx(ToolbarButton, { id: "scatterPlotFlipXY", isActive: false, disabled: true, testId: "scatterPlotFlipXY", label: "", icon: "fc-grab-window", tooltipText: "This is a large disabled popover.", tooltipOptions: { position: 'top' }, extraClassNames: "no-border ml5" }) }), _jsx("div", { className: "tw:p-5 ", children: _jsx(ToolbarButton, { icon: "fc-y-axis", tooltipText: "This is a large popover icon", tooltipOptions: { position: 'top', delay: 0 }, testId: "basic-popover4", isHtmlTooltip: false }) }), _jsx("div", { className: "tw:p-5 ", children: _jsx(ToolbarButton, { icon: "fc-y-axis", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true }) }), _jsx("div", { className: "tw:p-5 ", children: _jsx(ToolbarButton, { isPrimaryAnSvg: true, iconHeight: 13, iconWidth: 13, icon: "svgpath:M 19 2.76 L 18.016 4.066 L 7.678 17.765 L 6.745 19 L 5.812 17.765 L 0.984 11.373 L 0 10.067 L 1.867 7.307 L 2.851 8.613 L 6.745 13.771 L 16.149 1.306 L 17.133 0 L 19 2.76 Z", label: "Active", testId: "basic-popover5", tooltipText: "This is a button.", tooltipOptions: { position: 'top', delay: 0 }, isHtmlTooltip: false, isActive: true }) })] }));
+    const renderAllVariations = () => (_jsxs("div", { className: "tw:grid tw:grid-cols-2 tw:gap-4 tw:p-4", children: [allToolbarButtons(), allToolbarButtons(true)] }));
+    return (_jsxs("div", { children: [_jsxs("div", { className: "tw:grid tw:grid-cols-2 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: "tw:grid tw:grid-cols-2 tw:gap-4", children: [_jsxs("div", { className: "color_datalab", children: [_jsx("b", { children: "Datalab Colors" }), renderAllVariations()] }), _jsxs("div", { className: "color_vantage", children: [_jsx("b", { children: "Vantage Colors" }), renderAllVariations()] })] })] }));
+};
+//# sourceMappingURL=ToolbarButton.stories.js.map

package/dist/ToolbarButton/ToolbarButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.stories.js","sourceRoot":"","sources":["../../src/ToolbarButton/ToolbarButton.stories.tsx"],"names":[],"mappings":"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"}

package/dist/ToolbarButton/ToolbarButton.test.d.ts

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

package/dist/ToolbarButton/ToolbarButton.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ToolbarButton } from './ToolbarButton';
+import Icon from '../Icon';
+describe('ToolbarButton', () => {
+    const options = [
+        { value: 'a', label: 'Chocolate' },
+        { value: 'b', label: 'Strawberry' },
+        { value: 'c', label: 'Vanilla' },
+        { value: 'd', label: 'Rocky Road' },
+        { value: 'e', label: 'Crazy Cow' },
+        { value: 'f', label: 'Almond Joy' },
+        { value: 'g', label: 'All of the above' },
+    ];
+    const colorOptions = [
+        { value: 'h', label: 'pink' },
+        { value: 'i', label: 'purple' },
+        { value: 'j', label: 'green' },
+        { value: 'k', label: 'red' },
+    ];
+    const popoverContent = (_jsxs("div", { className: "tw:text-sm", children: [_jsx("p", { className: "tw:bg-gray-200 tw:p-2", children: "Flavors" }), options.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2 tw:hover:bg-green-500", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value))), _jsx("p", { children: "Colors" }), colorOptions.map((option) => (_jsxs("div", { className: "tw:flex tw:items-center tw:p-2", children: [_jsx(Icon, { type: "color", color: "green", icon: "fc-check", extraClassNames: "tw:mr-2" }), _jsx("span", { children: option.label })] }, option.value)))] }));
+    const mockOnClick = jest.fn();
+    class Context {
+        testId = 'popoverTestId';
+        label = 'popover label';
+        props = {
+            label: this.label,
+            onClick: mockOnClick,
+            testId: this.testId,
+            icon: 'fc-y-axis',
+            tooltipText: 'This is a popover.',
+            tooltipOptions: { position: 'top', delay: 0 },
+            isHtmlTooltip: false,
+            isSmall: false,
+            popoverContent,
+        };
+    }
+    let tc;
+    beforeEach(() => {
+        tc = new Context();
+        jest.clearAllMocks();
+    });
+    const renderToolbarButton = (props) => render(_jsx(ToolbarButton, { ...props }));
+    const openPopover = async () => {
+        const popover = screen.getByTestId(tc.testId);
+        await userEvent.click(popover);
+    };
+    it('renders popover icon without label when small', () => {
+        tc.props.isSmall = true;
+        renderToolbarButton(tc.props);
+        const popoverLabel = screen.queryByText(tc.label);
+        expect(popoverLabel).not.toBeInTheDocument();
+    });
+    it('renders popover trigger button', () => {
+        renderToolbarButton(tc.props);
+        expect(screen.getByText(tc.label)).toBeInTheDocument();
+    });
+    it('opens popover on click', async () => {
+        renderToolbarButton(tc.props);
+        await openPopover();
+        expect(screen.getByText(options[2].label)).toBeVisible();
+    });
+    it('renders disabled popover trigger', async () => {
+        renderToolbarButton({ ...tc.props, disabled: true });
+        await openPopover();
+        expect(mockOnClick).not.toHaveBeenCalled();
+    });
+    it('handles click events', async () => {
+        const handleClick = jest.fn();
+        tc.props.onClick = handleClick;
+        const { getByTestId } = renderToolbarButton(tc.props);
+        await userEvent.click(getByTestId(tc.testId));
+        expect(handleClick).toHaveBeenCalled();
+    });
+    it('handles click events within popover and does not close the popover', async () => {
+        renderToolbarButton(tc.props);
+        expect(screen.queryByText(options[4].label)).not.toBeInTheDocument();
+        await openPopover();
+        await userEvent.click(screen.getByText(options[3].label));
+        expect(screen.getByText(options[4].label)).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=ToolbarButton.test.js.map

package/dist/ToolbarButton/ToolbarButton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.test.js","sourceRoot":"","sources":["../../src/ToolbarButton/ToolbarButton.test.tsx"],"names":[],"mappings":"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"}

package/dist/ToolbarButton/ToolbarButton.types.d.ts

@@ -0,0 +1,122 @@
+import React, { MouseEvent } from 'react';
+import { TooltipProps } from '../Tooltip/Tooltip.types';
+export declare const toolbarButtonVariants: readonly ["outline", "theme", "theme-light", "warning", "danger", "no-border"];
+export type ToolbarButtonVariant = (typeof toolbarButtonVariants)[number];
+/**
+ * Props for the ToolbarButton component that creates toolbar-style buttons with optional popovers.
+ * Designed for use in toolbars, action bars, and similar UI contexts.
+ */
+export interface ToolbarButtonProps {
+    /**
+     * Primary icon class name to display on the button.
+     * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
+     * This is the main visual identifier for the button's function.
+     */
+    icon: string;
+    /**
+     * Secondary icon class name to display alongside the primary icon.
+     * Useful for showing state indicators, badges, or additional context.
+     */
+    secondIcon?: string;
+    /**
+     * When true, forces the primary icon to render in a smaller size.
+     * Overrides automatic sizing based on button variant or layout.
+     */
+    forceSmallIcon?: boolean;
+    /**
+     * Text label for the toolbar button.
+     * Typically shown when the toolbar has sufficient width or in expanded states.
+     * Helps users understand the button's function when icons alone aren't clear.
+     */
+    label?: string;
+    /**
+     * React content to display in an attached popover when the button is clicked.
+     * Can be any React elements including forms, menus, or complex layouts.
+     * When provided, the button becomes a popover trigger.
+     */
+    popoverContent?: React.ReactNode;
+    /**
+     * When true, renders the button in a compact, icon-only mode.
+     * Hides the label even if provided and uses minimal padding for space-constrained layouts.
+     */
+    isSmall?: boolean;
+    /**
+     * HTML ID attribute for the toolbar button element.
+     * Should be unique across the page for proper HTML semantics and accessibility.
+     */
+    id?: string;
+    /**
+     * Additional CSS classes to apply to the toolbar button container.
+     * Use this to customize the button's appearance beyond the built-in variants.
+     */
+    extraClassNames?: string;
+    /**
+     * Test ID attribute for the toolbar button element used in automated testing.
+     * Applied to the button element for test targeting and interaction.
+     */
+    testId?: string;
+    /**
+     * Text to display in the button's tooltip when hovering.
+     * Provides additional context or instructions about the button's function.
+     */
+    tooltipText?: 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.
+     */
+    isHtmlTooltip?: boolean;
+    /**
+     * Test ID attribute specifically for the tooltip element used in automated testing.
+     * Helps identify and interact with the tooltip separately from the button.
+     */
+    tooltipTestId?: string;
+    /**
+     * Configuration options for customizing tooltip behavior and appearance.
+     * Omits the 'text' property since that's handled by the `tooltipText` prop.
+     * Includes options like position, delay, and other tooltip-specific settings.
+     */
+    tooltipOptions?: Omit<TooltipProps, 'text'>;
+    /**
+     * When true, disables the toolbar button preventing user interaction.
+     * Disabled buttons appear visually dimmed and don't respond to clicks or show popovers.
+     */
+    disabled?: boolean;
+    /**
+     * Callback function triggered when the toolbar button is clicked.
+     * Primarily used for tracking, analytics, or additional click handling.
+     * Note: this doesn't prevent popover opening if popoverContent is provided.
+     */
+    onClick?: (e: MouseEvent) => void;
+    /**
+     * When true, displays the button in an "active" or "pressed" visual state.
+     * Useful for toggle buttons or indicating the current tool/mode in a toolbar.
+     */
+    isActive?: boolean;
+    /**
+     * Callback function triggered when an attached popover is hidden/closed.
+     * Use this for cleanup, state management, or other hide-related side effects.
+     */
+    onHide?: () => void;
+    /**
+     * When true, displays a visual arrow on the button indicating it has a dropdown/popover.
+     * Helps users understand that clicking will reveal additional options or content.
+     */
+    hasArrow?: boolean;
+    /**
+     * When true, treats the primary icon string as an SVG identifier instead of a font icon class.
+     * Changes how the icon is rendered and styled within the component.
+     */
+    isPrimaryAnSvg?: boolean;
+    /**
+     * Additional CSS classes to apply specifically to the primary icon element.
+     * Use this to customize the icon's appearance independently from the button container.
+     */
+    primaryIconExtraClassNames?: string;
+    /** height for the icon */
+    iconHeight?: number;
+    /** width for the icon */
+    iconWidth?: number;
+    /** viewbox for the icon */
+    primaryIconViewbox?: string;
+}

package/dist/ToolbarButton/ToolbarButton.types.js

@@ -0,0 +1,2 @@
+export const toolbarButtonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
+//# sourceMappingURL=ToolbarButton.types.js.map

package/dist/ToolbarButton/ToolbarButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.types.js","sourceRoot":"","sources":["../../src/ToolbarButton/ToolbarButton.types.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAU,CAAC"}

package/dist/ToolbarButton/index.d.ts

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

package/dist/ToolbarButton/index.js

@@ -0,0 +1,2 @@
+export { ToolbarButton as default } from './ToolbarButton';
+//# sourceMappingURL=index.js.map

package/dist/ToolbarButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ToolbarButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/Tooltip/QTip.stories.d.ts

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

package/dist/Tooltip/QTip.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Button from '../Button';
+import { tooltipPositions } from './Tooltip.types';
+import { QTip } from './Qtip';
+import Icon from '../Icon';
+export default {
+    title: 'Tooltip',
+};
+export const AllQTips = () => {
+    const renderSvgWithTooltip = () => tooltipPositions.map((position) => (_jsx("div", { className: "tw:w-full tw:flex tw:justify-center tw:items-center", children: _jsx("div", { "data-qtip-text": "this is a test tooltip", "data-qtip-placement": position, children: _jsx("svg", { viewBox: "0 0 19 19", xmlns: "http://www.w3.org/2000/svg", className: "seeq-icon p2", height: "19", width: "19", children: _jsx("path", { d: "M 2.714 1.188 L 2.714 0 L 0 0 L 0 1.188 L 0 2.375 L 0 13.656 L 0 17.813 L 0 19 L 2.714 19 L 2.714 17.813 L 2.714 13.063 L 5.441 12.465 C 7.184 12.083 9.029 12.261 10.637 12.962 C 12.511 13.782 14.687 13.883 16.646 13.237 L 19 12.469 L 19 0.594 L 16.693 1.603 C 14.729 2.464 12.418 2.464 10.454 1.603 C 8.966 0.95 7.256 0.787 5.641 1.139 L 2.714 1.781 L 2.714 1.188 Z", fill: "red" }) }) }, `${position}_svg`) })));
+    const renderButtonsWithTooltip = () => tooltipPositions.map((position) => (_jsx("div", { children: _jsx(Button, { tooltip: `Tooltip on the ${position}`, label: position, tooltipOptions: { position } }) }, `${position}_button`)));
+    const renderIconsWithHtmlTooltip = () => tooltipPositions.map((position) => (_jsx("div", { children: _jsx(Icon, { tooltip: "<div><h2>Fancy Tooltip</h2> This is a special tooltip. Why? <br />Because it supports <b>HTML!</b></div>", tooltipPlacement: position, icon: "fc-sun", isHtmlTooltip: true }) }, `${position}_icon`)));
+    const renderTextTooltipOnText = () => tooltipPositions.map((position) => (_jsx("div", { children: _jsxs("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position, children: ["Hover for Tooltip (on the ", position, ")"] }) }, `${position}_text`)));
+    const renderTextTooltipOnTextWithDelay = () => tooltipPositions.map((position) => (_jsx("div", { children: _jsxs("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position, "data-qtip-delay": 1500, children: ["Hover for Tooltip (on the ", position, ") - with delay (1500ms)"] }) }, `${position}_text`)));
+    const renderTextTooltipOnOverflowHiddenText = () => tooltipPositions.map((position) => (_jsx("div", { className: "tw:overflow-hidden", children: _jsxs("span", { "data-qtip-text": "Helpful information provided here", "data-qtip-placement": position, children: ["Hover for Tooltip (on the ", position, ")", _jsx("br", {}), "(Overflow set to hidden)"] }) }, `${position}_text`)));
+    const renderTextTooltipToRealignAtScreenEdge = () => tooltipPositions.map((position) => (_jsx("div", { className: "tw:overflow-hidden", children: _jsx("span", { "data-qtip-text": "This tooltip will realign its arrow and position if the data to be displayed within it goes beyond the screen edge. The text after this will be dummy text just to show a lot of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", "data-qtip-placement": position, children: "Hover for Tooltip (Should avoid screen edges)" }) }, `${position}_text`)));
+    return (_jsxs(_Fragment, { children: [_jsx(QTip, {}), _jsxs("div", { className: "tw:grid tw:grid-cols-4 tw:gap-4 tw:text-center", children: [renderSvgWithTooltip(), renderButtonsWithTooltip(), renderIconsWithHtmlTooltip(), renderTextTooltipOnText(), renderTextTooltipOnTextWithDelay(), renderTextTooltipOnOverflowHiddenText(), renderTextTooltipToRealignAtScreenEdge()] })] }));
+};
+//# sourceMappingURL=QTip.stories.js.map