@seeqdev/qomponents 0.0.223 → 0.0.229

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

@@ -1,11 +1,41 @@
-import { InputLengthStyleProps, TextFieldProps } from "./TextField.types.js";
-import React from "react";
+import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
+import { FormControlElement, InputGroupPlacement } from "../types.js";
+import { InputLengthStyleProps } from "./TextField.types.js";
+import * as react1 from "react";
 
 //#region src/TextField/TextField.d.ts
-
 /**
  * Textfield.
  */
-declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps & InputLengthStyleProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const TextField: react1.ForwardRefExoticComponent<Omit<{
+  readonly?: boolean | undefined;
+  disabled?: boolean | undefined;
+  onChange?: react1.ChangeEventHandler<FormControlElement> | undefined;
+  onPaste?: react1.ClipboardEventHandler<FormControlElement> | undefined;
+  onKeyUp?: react1.KeyboardEventHandler<FormControlElement> | undefined;
+  onKeyDown?: react1.KeyboardEventHandler<FormControlElement> | undefined;
+  onFocus?: react1.FocusEventHandler<HTMLInputElement> | undefined;
+  onBlur?: react1.FocusEventHandler<FormControlElement> | undefined;
+  id?: string | undefined;
+  name?: string | undefined;
+  size?: "lg" | "sm" | undefined;
+  value?: string | number | string[] | undefined;
+  placeholder?: string | undefined;
+  extraClassNames?: string | undefined;
+  type?: "email" | "number" | "password" | "text" | undefined;
+  testId?: string | undefined;
+  ref?: react1.Ref<HTMLInputElement> | undefined;
+  inputGroup?: InputGroupPlacement;
+  step?: string | number | undefined;
+  showError?: boolean | undefined;
+  errorText?: string | undefined;
+  required?: boolean | undefined;
+  autoComplete?: string | undefined;
+  autoFocus?: boolean | undefined;
+  inputWidth?: number | undefined;
+  inputHeight?: number | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+} & TooltipComponentProps & InputLengthStyleProps, "ref"> & react1.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { TextField };

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

@@ -1,8 +1,9 @@
 import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
 import { FormControlElement, InputGroupPlacement } from "../types.js";
+import React from "react";
 
 //#region src/TextField/TextField.types.d.ts
-interface TextFieldProps extends TooltipComponentProps {
+type TextFieldProps = {
   /**
    * 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,
@@ -108,7 +109,7 @@ interface TextFieldProps extends TooltipComponentProps {
    * Use this when you need to programmatically focus the field,
    * measure its dimensions, or perform other direct DOM operations.
    */
-  ref?: any;
+  ref?: React.Ref<HTMLInputElement>;
   /**
    * Configuration for input group styling when the field is part of a group:
    * - `prepend`: Field is preceded by another element (button, icon, text)
@@ -174,22 +175,22 @@ interface TextFieldProps extends TooltipComponentProps {
    * Used for validation and UI constraints in number-based inputs.
    */
   max?: number;
-}
+} & TooltipComponentProps;
 /**
  * Interface for defining dimension styles with CSS-compatible values.
  * Used internally for styling components with dynamic width and height.
  */
-interface DimensionStyle {
+type 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.
  */
-interface InputLengthStyleProps {
+type InputLengthStyleProps = {
   /**
    * Maximum number of characters allowed in the text field.
    * Prevents users from entering more text beyond this limit.
@@ -202,6 +203,6 @@ interface InputLengthStyleProps {
    * Commonly used for passwords, codes, or required descriptions.
    */
   minLength?: number;
-}
+};
 //#endregion
 export { DimensionStyle, InputLengthStyleProps, TextFieldProps };

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

@@ -1,7 +1,32 @@
 import { ToolbarButtonProps } from "./ToolbarButton.types.js";
-import * as React$1 from "react";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/ToolbarButton/ToolbarButton.d.ts
-declare const ToolbarButton: React$1.FunctionComponent<ToolbarButtonProps>;
+declare const ToolbarButton: ({
+  isSmall,
+  label,
+  icon,
+  secondIcon,
+  forceSmallIcon,
+  tooltipText,
+  id,
+  popoverContent,
+  extraClassNames,
+  testId,
+  tooltipTestId,
+  tooltipOptions,
+  isActive,
+  isHtmlTooltip,
+  hasArrow,
+  disabled,
+  isPrimaryAnSvg,
+  primaryIconExtraClassNames,
+  iconHeight,
+  iconWidth,
+  primaryIconViewbox,
+  popoverAlign,
+  onClick,
+  onHide
+}: ToolbarButtonProps) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { ToolbarButton };

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

@@ -8,7 +8,7 @@ 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.
  */
-interface ToolbarButtonProps {
+type ToolbarButtonProps = {
   /**
    * Primary icon class name to display on the button.
    * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
@@ -121,6 +121,11 @@ interface ToolbarButtonProps {
   iconWidth?: number;
   /** viewbox for the icon */
   primaryIconViewbox?: string;
-}
+  /**
+   * Alignment of the popover relative to the trigger button.
+   * 'start' aligns left edges (popover to the right), 'end' aligns right edges (popover to the left), 'center' centers it.
+   */
+  popoverAlign?: 'start' | 'end' | 'center';
+};
 //#endregion
 export { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants };

package/dist/src/Tooltip/QTip.types.d.ts

@@ -1,7 +1,7 @@
 import { TooltipPosition } from "./Tooltip.types.js";
 
 //#region src/Tooltip/QTip.types.d.ts
-interface QTipDataAttributes {
+type QTipDataAttributes = {
   /** text displayed by the tooltip */
   'data-qtip-text': string;
   /** one of TooltipPosition */
@@ -12,6 +12,6 @@ interface QTipDataAttributes {
   'data-qtip-delay'?: number;
   /** useful for testing; sets the provided string as the data-testid attribute of the tooltip */
   'data-qtip-testid'?: string;
-}
+};
 //#endregion
 export { QTipDataAttributes };

package/dist/src/Tooltip/Qtip.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/Tooltip/Qtip.d.ts
 
@@ -26,6 +26,6 @@ import React from "react";
  *
  * and enjoy beautiful & performant tooltips!
  */
-declare const QTip: React.FunctionComponent<any>;
+declare const QTip: () => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { QTip };

package/dist/src/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import { TooltipProps } from "./Tooltip.types.js";
-import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/Tooltip/Tooltip.d.ts
 
@@ -12,6 +12,11 @@ import React from "react";
  * correctly if a parent element has an overflow CSS property assigned. Please use QTip to ensure your tooltips
  * display correctly.
  */
-declare const Tooltip: React.FunctionComponent<TooltipProps>;
+declare const Tooltip: ({
+  position,
+  children,
+  text,
+  delay
+}: TooltipProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Tooltip };

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

@@ -4,13 +4,13 @@ import React from "react";
 declare const DEFAULT_TOOL_TIP_DELAY: number;
 declare const tooltipPositions: readonly ["top", "left", "right", "bottom"];
 type TooltipPosition = (typeof tooltipPositions)[number];
-interface TooltipProps {
+type TooltipProps = {
   position?: TooltipPosition;
   children?: React.JSX.Element | string;
   text: React.JSX.Element | string;
   delay?: number;
-}
-interface TooltipComponentProps {
+};
+type TooltipComponentProps = {
   /** text to display on tooltip */
   tooltip?: string;
   /** number of milliseconds to wait before showing a tooltip on-hover */
@@ -21,6 +21,6 @@ interface TooltipComponentProps {
   isHtmlTooltip?: boolean;
   /** optional testId applied to the tooltip - useful for testing */
   tooltipTestId?: string;
-}
+};
 //#endregion
 export { DEFAULT_TOOL_TIP_DELAY, TooltipComponentProps, TooltipPosition, TooltipProps, tooltipPositions };

package/dist/src/TriggerWithDropdown/TriggerWithDropdown.d.ts

@@ -1,7 +1,7 @@
 import { TriggerWithDropdownProps } from "./TriggerWithDropdown.types.js";
-import * as React$1 from "react";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/TriggerWithDropdown/TriggerWithDropdown.d.ts
-declare const TriggerWithDropdown: React$1.FunctionComponent<TriggerWithDropdownProps>;
+declare const TriggerWithDropdown: (props: TriggerWithDropdownProps) => react_jsx_runtime2.JSX.Element;
 //#endregion
 export { TriggerWithDropdown as default };

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

@@ -10,7 +10,7 @@ import { DropdownItems } from "../ButtonWithDropdown/ButtonWithDropdown.types.js
  * Use this component when you need full control over the trigger element's appearance.
  * If you want a standard Qomponents Button as the trigger, use ButtonWithDropdown instead.
  */
-interface TriggerWithDropdownProps extends TooltipComponentProps {
+type TriggerWithDropdownProps = {
   /**
    * Array of items to display in the dropdown menu.
    * Each item can be interactive (with onClick) or decorative (labels/dividers).
@@ -102,6 +102,6 @@ interface TriggerWithDropdownProps extends TooltipComponentProps {
    * Receives the click event. Use this for handling container-level interactions.
    */
   onContainerClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-}
+} & TooltipComponentProps;
 //#endregion
 export { TriggerWithDropdownProps };

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

@@ -9,14 +9,21 @@ import { ButtonProps, ButtonSize, ButtonType, ButtonVariant, IconPosition, butto
 import Button from "./Button/Button.js";
 import { ButtonGroupProps } from "./ButtonGroup/ButtonGroup.types.js";
 import { ButtonGroup } from "./ButtonGroup/ButtonGroup.js";
-import { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants } from "./ToolbarButton/ToolbarButton.types.js";
-import { ToolbarButton } from "./ToolbarButton/ToolbarButton.js";
-import { TriggerWithDropdownProps } from "./TriggerWithDropdown/TriggerWithDropdown.types.js";
 import { ButtonWithPopoverProps } from "./ButtonWithPopover/ButtonWithPopover.types.js";
+import ButtonWithPopover from "./ButtonWithPopover/ButtonWithPopover.js";
 import { CarouselProps } from "./Carousel/Carousel.types.js";
+import Carousel from "./Carousel/Carousel.js";
 import { CheckboxProps } from "./Checkbox/Checkbox.types.js";
+import { Checkbox } from "./Checkbox/Checkbox.js";
 import { CollapseProps } from "./Collapse/Collapse.types.js";
-import { AppendedProps, InputGroupProps } from "./InputGroup/InputGroup.types.js";
+import Collapse from "./Collapse/Collapse.js";
+import ColorPickerControl from "./ColorPickerControl/ColorPickerControl.js";
+import ColorSwatch from "./ColorSwatch/ColorSwatch.js";
+import EditorPanel from "./EditorPanel/EditorPanel.js";
+import { ExternalLinkProps, ExternalLinkThemeClass, ExternalLinkVariant, externalLinkThemeClasses } from "./ExternalLink/ExternalLink.types.js";
+import { ExternalLink } from "./ExternalLink/ExternalLink.js";
+import Icon from "./Icon/Icon.js";
+import { TriggerWithDropdownProps } from "./TriggerWithDropdown/TriggerWithDropdown.types.js";
 import { ModalProps, ModalSize, TitleIconPosition } from "./Modal/Modal.types.js";
 import { ProgressBarProps, ProgressIndicatorProps } from "./ProgressBar/ProgressBar.types.js";
 import { SeeqActionDropdownItems, SeeqActionDropdownProps } from "./SeeqActionDropdown/SeeqActionDropdown.types.js";
@@ -25,33 +32,28 @@ import { SliderProps } from "./Slider/Slider.types.js";
 import { SvgIconProps, SvgIconType, svgIconTypes } from "./SvgIcon/SvgIcon.types.js";
 import { TabsProps } from "./Tabs/Tabs.types.js";
 import { TextAreaProps } from "./TextArea/TextArea.types.js";
+import { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants } from "./ToolbarButton/ToolbarButton.types.js";
 import { QTipDataAttributes } from "./Tooltip/QTip.types.js";
 import { FormControlElement, InputGroupPlacement } from "./types.js";
 import { DimensionStyle, InputLengthStyleProps, TextFieldProps } from "./TextField/TextField.types.js";
-import { TextField } from "./TextField/TextField.js";
-import { Checkbox } from "./Checkbox/Checkbox.js";
-import { TextArea } from "./TextArea/TextArea.js";
-import { Tooltip } from "./Tooltip/Tooltip.js";
-import { QTip } from "./Tooltip/Qtip.js";
-import Icon from "./Icon/Icon.js";
+import { AppendedProps, InputGroupProps } from "./InputGroup/InputGroup.types.js";
+import { InputGroup } from "./InputGroup/InputGroup.js";
+import LoadingIndicator from "./LoadingIndicator/LoadingIndicator.js";
+import Modal from "./Modal/Modal.js";
+import ProgressBar from "./ProgressBar/ProgressBar.js";
+import SeeqActionDropdown from "./SeeqActionDropdown/SeeqActionDropdown.js";
+import SegmentedControl from "./SegmentedControl/SegmentedControl.js";
 import Select from "./Select/Select.js";
 import { GroupBase, OptionProps, SelectComponents } from "./Select/index.js";
-import Modal from "./Modal/Modal.js";
+import { Slider } from "./Slider/Slider.js";
 import Tabs from "./Tabs/Tabs.js";
-import ButtonWithPopover from "./ButtonWithPopover/ButtonWithPopover.js";
+import { TextArea } from "./TextArea/TextArea.js";
+import { TextField } from "./TextField/TextField.js";
+import { ToolbarButton } from "./ToolbarButton/ToolbarButton.js";
+import { Tooltip } from "./Tooltip/Tooltip.js";
+import { QTip } from "./Tooltip/Qtip.js";
 import TriggerWithDropdown from "./TriggerWithDropdown/TriggerWithDropdown.js";
-import SeeqActionDropdown from "./SeeqActionDropdown/SeeqActionDropdown.js";
-import { InputGroup } from "./InputGroup/InputGroup.js";
-import Collapse from "./Collapse/Collapse.js";
-import { Slider } from "./Slider/Slider.js";
-import ProgressBar from "./ProgressBar/ProgressBar.js";
-import Carousel from "./Carousel/Carousel.js";
-import SegmentedControl from "./SegmentedControl/SegmentedControl.js";
-import EditorPanel from "./EditorPanel/EditorPanel.js";
-import ColorSwatch from "./ColorSwatch/ColorSwatch.js";
-import ColorPickerControl from "./ColorPickerControl/ColorPickerControl.js";
-import LoadingIndicator from "./LoadingIndicator/LoadingIndicator.js";
 import { QomponentsTheme } from "./constants.js";
 import { ButtonWithDropdownProps, DropdownItems, DropdownProps, DropdownSubItem } from "./ButtonWithDropdown/ButtonWithDropdown.types.js";
 import ButtonWithDropdown from "./ButtonWithDropdown/ButtonWithDropdown.js";
-export { Accordion, AccordionProps, Alert, AlertProps, AppendedProps, Badge, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, ColorPickerControl, ColorSwatch, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, EditorPanel, FormControlElement, GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, LoadingIndicator, Modal, ModalProps, ModalSize, Option, OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, SegmentedControl, Select, SelectComponents, SelectProps, Slider, SliderProps, SvgIconProps, SvgIconType, Tabs, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TitleIconPosition, ToolbarButton, ToolbarButtonProps, ToolbarButtonVariant, Tooltip, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdown, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
+export { Accordion, AccordionProps, Alert, AlertProps, AppendedProps, Badge, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, ColorPickerControl, ColorSwatch, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, EditorPanel, ExternalLink, ExternalLinkProps, ExternalLinkThemeClass, ExternalLinkVariant, FormControlElement, GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, LoadingIndicator, Modal, ModalProps, ModalSize, Option, OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, SegmentedControl, Select, SelectComponents, SelectProps, Slider, SliderProps, SvgIconProps, SvgIconType, Tabs, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TitleIconPosition, ToolbarButton, ToolbarButtonProps, ToolbarButtonVariant, Tooltip, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdown, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, externalLinkThemeClasses, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };

package/dist/src/index.d.ts

@@ -9,14 +9,21 @@ import { ButtonProps, ButtonSize, ButtonType, ButtonVariant, IconPosition, butto
 import Button from "./Button/Button.js";
 import { ButtonGroupProps } from "./ButtonGroup/ButtonGroup.types.js";
 import { ButtonGroup } from "./ButtonGroup/ButtonGroup.js";
-import { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants } from "./ToolbarButton/ToolbarButton.types.js";
-import { ToolbarButton } from "./ToolbarButton/ToolbarButton.js";
-import { TriggerWithDropdownProps } from "./TriggerWithDropdown/TriggerWithDropdown.types.js";
 import { ButtonWithPopoverProps } from "./ButtonWithPopover/ButtonWithPopover.types.js";
+import ButtonWithPopover from "./ButtonWithPopover/ButtonWithPopover.js";
 import { CarouselProps } from "./Carousel/Carousel.types.js";
+import Carousel from "./Carousel/Carousel.js";
 import { CheckboxProps } from "./Checkbox/Checkbox.types.js";
+import { Checkbox } from "./Checkbox/Checkbox.js";
 import { CollapseProps } from "./Collapse/Collapse.types.js";
-import { AppendedProps, InputGroupProps } from "./InputGroup/InputGroup.types.js";
+import Collapse from "./Collapse/Collapse.js";
+import ColorPickerControl from "./ColorPickerControl/ColorPickerControl.js";
+import ColorSwatch from "./ColorSwatch/ColorSwatch.js";
+import EditorPanel from "./EditorPanel/EditorPanel.js";
+import { ExternalLinkProps, ExternalLinkThemeClass, ExternalLinkVariant, externalLinkThemeClasses } from "./ExternalLink/ExternalLink.types.js";
+import { ExternalLink } from "./ExternalLink/ExternalLink.js";
+import Icon from "./Icon/Icon.js";
+import { TriggerWithDropdownProps } from "./TriggerWithDropdown/TriggerWithDropdown.types.js";
 import { ModalProps, ModalSize, TitleIconPosition } from "./Modal/Modal.types.js";
 import { ProgressBarProps, ProgressIndicatorProps } from "./ProgressBar/ProgressBar.types.js";
 import { SeeqActionDropdownItems, SeeqActionDropdownProps } from "./SeeqActionDropdown/SeeqActionDropdown.types.js";
@@ -25,33 +32,28 @@ import { SliderProps } from "./Slider/Slider.types.js";
 import { SvgIconProps, SvgIconType, svgIconTypes } from "./SvgIcon/SvgIcon.types.js";
 import { TabsProps } from "./Tabs/Tabs.types.js";
 import { TextAreaProps } from "./TextArea/TextArea.types.js";
+import { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants } from "./ToolbarButton/ToolbarButton.types.js";
 import { QTipDataAttributes } from "./Tooltip/QTip.types.js";
 import { FormControlElement, InputGroupPlacement } from "./types.js";
 import { DimensionStyle, InputLengthStyleProps, TextFieldProps } from "./TextField/TextField.types.js";
-import { TextField } from "./TextField/TextField.js";
-import { Checkbox } from "./Checkbox/Checkbox.js";
-import { TextArea } from "./TextArea/TextArea.js";
-import { Tooltip } from "./Tooltip/Tooltip.js";
-import { QTip } from "./Tooltip/Qtip.js";
-import Icon from "./Icon/Icon.js";
+import { AppendedProps, InputGroupProps } from "./InputGroup/InputGroup.types.js";
+import { InputGroup } from "./InputGroup/InputGroup.js";
+import LoadingIndicator from "./LoadingIndicator/LoadingIndicator.js";
+import Modal from "./Modal/Modal.js";
+import ProgressBar from "./ProgressBar/ProgressBar.js";
+import SeeqActionDropdown from "./SeeqActionDropdown/SeeqActionDropdown.js";
+import SegmentedControl from "./SegmentedControl/SegmentedControl.js";
 import Select from "./Select/Select.js";
 import { GroupBase, OptionProps, SelectComponents } from "./Select/index.js";
-import Modal from "./Modal/Modal.js";
+import { Slider } from "./Slider/Slider.js";
 import Tabs from "./Tabs/Tabs.js";
-import ButtonWithPopover from "./ButtonWithPopover/ButtonWithPopover.js";
+import { TextArea } from "./TextArea/TextArea.js";
+import { TextField } from "./TextField/TextField.js";
+import { ToolbarButton } from "./ToolbarButton/ToolbarButton.js";
+import { Tooltip } from "./Tooltip/Tooltip.js";
+import { QTip } from "./Tooltip/Qtip.js";
 import TriggerWithDropdown from "./TriggerWithDropdown/TriggerWithDropdown.js";
-import SeeqActionDropdown from "./SeeqActionDropdown/SeeqActionDropdown.js";
-import { InputGroup } from "./InputGroup/InputGroup.js";
-import Collapse from "./Collapse/Collapse.js";
-import { Slider } from "./Slider/Slider.js";
-import ProgressBar from "./ProgressBar/ProgressBar.js";
-import Carousel from "./Carousel/Carousel.js";
-import SegmentedControl from "./SegmentedControl/SegmentedControl.js";
-import EditorPanel from "./EditorPanel/EditorPanel.js";
-import ColorSwatch from "./ColorSwatch/ColorSwatch.js";
-import ColorPickerControl from "./ColorPickerControl/ColorPickerControl.js";
-import LoadingIndicator from "./LoadingIndicator/LoadingIndicator.js";
 import { QomponentsTheme } from "./constants.js";
 import { ButtonWithDropdownProps, DropdownItems, DropdownProps, DropdownSubItem } from "./ButtonWithDropdown/ButtonWithDropdown.types.js";
 import ButtonWithDropdown from "./ButtonWithDropdown/ButtonWithDropdown.js";
-export { Accordion, AccordionProps, Alert, AlertProps, AppendedProps, Badge, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, ColorPickerControl, ColorSwatch, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, EditorPanel, FormControlElement, type GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, LoadingIndicator, Modal, ModalProps, ModalSize, Option, type OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, type QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, SegmentedControl, Select, SelectComponents, SelectProps, Slider, SliderProps, SvgIconProps, SvgIconType, Tabs, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TitleIconPosition, ToolbarButton, ToolbarButtonProps, ToolbarButtonVariant, Tooltip, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdown, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
+export { Accordion, AccordionProps, Alert, AlertProps, AppendedProps, Badge, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, ColorPickerControl, ColorSwatch, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, EditorPanel, ExternalLink, ExternalLinkProps, ExternalLinkThemeClass, ExternalLinkVariant, FormControlElement, type GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, LoadingIndicator, Modal, ModalProps, ModalSize, Option, type OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, type QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, SegmentedControl, Select, SelectComponents, SelectProps, Slider, SliderProps, SvgIconProps, SvgIconType, Tabs, TabsProps, TextArea, TextAreaProps, TextField, TextFieldProps, TitleIconPosition, ToolbarButton, ToolbarButtonProps, ToolbarButtonVariant, Tooltip, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdown, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, externalLinkThemeClasses, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };

package/dist/src/types.d.ts

@@ -4,13 +4,12 @@ import { AlertProps } from "./Alert/Alert.types.js";
 import { IconProps, IconSize, IconType, iconTypes } from "./Icon/Icon.types.js";
 import { ButtonProps, ButtonSize, ButtonType, ButtonVariant, IconPosition, buttonSizes, buttonTypes, buttonVariants, iconPositions } from "./Button/Button.types.js";
 import { ButtonGroupProps } from "./ButtonGroup/ButtonGroup.types.js";
-import { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants } from "./ToolbarButton/ToolbarButton.types.js";
-import { TriggerWithDropdownProps } from "./TriggerWithDropdown/TriggerWithDropdown.types.js";
 import { ButtonWithPopoverProps } from "./ButtonWithPopover/ButtonWithPopover.types.js";
 import { CarouselProps } from "./Carousel/Carousel.types.js";
 import { CheckboxProps } from "./Checkbox/Checkbox.types.js";
 import { CollapseProps } from "./Collapse/Collapse.types.js";
-import { AppendedProps, InputGroupProps } from "./InputGroup/InputGroup.types.js";
+import { ExternalLinkProps, ExternalLinkThemeClass, ExternalLinkVariant, externalLinkThemeClasses } from "./ExternalLink/ExternalLink.types.js";
+import { TriggerWithDropdownProps } from "./TriggerWithDropdown/TriggerWithDropdown.types.js";
 import { ModalProps, ModalSize, TitleIconPosition } from "./Modal/Modal.types.js";
 import { ProgressBarProps, ProgressIndicatorProps } from "./ProgressBar/ProgressBar.types.js";
 import { SeeqActionDropdownItems, SeeqActionDropdownProps } from "./SeeqActionDropdown/SeeqActionDropdown.types.js";
@@ -19,12 +18,14 @@ import { SliderProps } from "./Slider/Slider.types.js";
 import { SvgIconProps, SvgIconType, svgIconTypes } from "./SvgIcon/SvgIcon.types.js";
 import { TabsProps } from "./Tabs/Tabs.types.js";
 import { TextAreaProps } from "./TextArea/TextArea.types.js";
+import { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants } from "./ToolbarButton/ToolbarButton.types.js";
 import { QTipDataAttributes } from "./Tooltip/QTip.types.js";
 import { DimensionStyle, InputLengthStyleProps, TextFieldProps } from "./TextField/TextField.types.js";
+import { AppendedProps, InputGroupProps } from "./InputGroup/InputGroup.types.js";
 import { ButtonWithDropdownProps, DropdownItems, DropdownProps, DropdownSubItem } from "./ButtonWithDropdown/ButtonWithDropdown.types.js";
 
 //#region src/types.d.ts
 type InputGroupPlacement = 'left' | 'right' | undefined;
 type FormControlElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 //#endregion
-export { AccordionProps, AlertProps, AppendedProps, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdownProps, ButtonWithPopoverProps, CarouselProps, CheckboxProps, CollapseProps, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, FormControlElement, GroupedOption, IconPosition, IconProps, IconSize, IconType, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, ModalProps, ModalSize, Option, ProgressBarProps, ProgressIndicatorProps, QTipDataAttributes, SeeqActionDropdownItems, SeeqActionDropdownProps, SelectProps, SliderProps, SvgIconProps, SvgIconType, TabsProps, TextAreaProps, TextFieldProps, TitleIconPosition, type ToolbarButtonProps, type ToolbarButtonVariant, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };
+export { AccordionProps, AlertProps, AppendedProps, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdownProps, ButtonWithPopoverProps, CarouselProps, CheckboxProps, CollapseProps, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, ExternalLinkProps, ExternalLinkThemeClass, ExternalLinkVariant, FormControlElement, GroupedOption, IconPosition, IconProps, IconSize, IconType, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, ModalProps, ModalSize, Option, ProgressBarProps, ProgressIndicatorProps, QTipDataAttributes, SeeqActionDropdownItems, SeeqActionDropdownProps, SelectProps, SliderProps, SvgIconProps, SvgIconType, TabsProps, TextAreaProps, TextFieldProps, TitleIconPosition, type ToolbarButtonProps, type ToolbarButtonVariant, TooltipComponentProps, TooltipPosition, TooltipProps, TriggerWithDropdownProps, buttonSizes, buttonTypes, buttonVariants, externalLinkThemeClasses, iconPositions, iconTypes, svgIconTypes, toolbarButtonVariants, tooltipPositions };

package/dist/styles.css

@@ -52,7 +52,7 @@
     --tw-radius-sm: 0.25rem;
     --tw-radius-md: 0.375rem;
     --tw-radius-lg: 0.5rem;
-    --tw-radius-xl: 0.75rem;
+    --tw-radius-3xl: 1.5rem;
     --tw-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --tw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --tw-animate-spin: spin 1s linear infinite;
@@ -355,6 +355,9 @@
   .tw\:mb-0 {
     margin-bottom: calc(var(--tw-spacing) * 0);
   }
+  .tw\:mb-1 {
+    margin-bottom: calc(var(--tw-spacing) * 1);
+  }
   .tw\:mb-2 {
     margin-bottom: calc(var(--tw-spacing) * 2);
   }
@@ -382,6 +385,9 @@
   .tw\:ml-1\.5 {
     margin-left: calc(var(--tw-spacing) * 1.5);
   }
+  .tw\:ml-2 {
+    margin-left: calc(var(--tw-spacing) * 2);
+  }
   .tw\:ml-4 {
     margin-left: calc(var(--tw-spacing) * 4);
   }
@@ -668,6 +674,9 @@
   .tw\:flex-wrap {
     flex-wrap: wrap;
   }
+  .tw\:items-baseline {
+    align-items: baseline;
+  }
   .tw\:items-center {
     align-items: center;
   }
@@ -704,6 +713,9 @@
   .tw\:gap-4 {
     gap: calc(var(--tw-spacing) * 4);
   }
+  .tw\:gap-6 {
+    gap: calc(var(--tw-spacing) * 6);
+  }
   .tw\:gap-8 {
     gap: calc(var(--tw-spacing) * 8);
   }
@@ -719,6 +731,9 @@
   .tw\:rounded {
     border-radius: 0.25rem;
   }
+  .tw\:rounded-3xl {
+    border-radius: var(--tw-radius-3xl);
+  }
   .tw\:rounded-\[0\.5rem\] {
     border-radius: 0.5rem;
   }
@@ -752,9 +767,6 @@
   .tw\:rounded-sm {
     border-radius: var(--tw-radius-sm);
   }
-  .tw\:rounded-xl {
-    border-radius: var(--tw-radius-xl);
-  }
   .tw\:rounded-t-md {
     border-top-left-radius: var(--tw-radius-md);
     border-top-right-radius: var(--tw-radius-md);
@@ -868,6 +880,9 @@
   .tw\:border-sq-theme-icon {
     border-color: var(--theme-icon);
   }
+  .tw\:border-sq-tool-btn-border {
+    border-color: var(--sq-tool-btn-border);
+  }
   .tw\:border-sq-warning {
     border-color: var(--sq-status-warning-color);
   }
@@ -952,6 +967,9 @@
   .tw\:bg-sq-success\! {
     background-color: var(--sqw-success-color) !important;
   }
+  .tw\:bg-sq-surface {
+    background-color: #ffffff;
+  }
   .tw\:bg-sq-text-color {
     background-color: #3a3a3a;
   }
@@ -988,6 +1006,9 @@
   .tw\:bg-yellow-500 {
     background-color: var(--tw-color-yellow-500);
   }
+  .tw\:bg-cover {
+    background-size: cover;
+  }
   .tw\:fill-transparent {
     fill: transparent;
   }
@@ -1130,6 +1151,10 @@
   .tw\:text-sq-15 {
     font-size: 0.9375rem;
   }
+  .tw\:\!leading-normal {
+    --tw-leading: var(--tw-leading-normal) !important;
+    line-height: var(--tw-leading-normal) !important;
+  }
   .tw\:leading-4 {
     --tw-leading: calc(var(--tw-spacing) * 4);
     line-height: calc(var(--tw-spacing) * 4);
@@ -1253,6 +1278,12 @@
   .tw\:not-italic {
     font-style: normal;
   }
+  .tw\:underline {
+    text-decoration-line: underline;
+  }
+  .tw\:underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .tw\:placeholder-gray-400\! {
     &::placeholder {
       color: var(--tw-color-gray-400) !important;
@@ -1278,10 +1309,6 @@
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .tw\:shadow-md {
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .tw\:shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1300,6 +1327,11 @@
     transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--tw-default-transition-duration));
   }
+  .tw\:transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--tw-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--tw-default-transition-duration));
+  }
   .tw\:duration-150 {
     --tw-duration: 150ms;
     transition-duration: 150ms;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.223",
+  "version": "0.0.229",
   "type": "module",
   "main": "dist/index.js",
   "source": "src/index.ts",
@@ -30,6 +30,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "9.38.0",
     "@ladle/react": "5.0.3",
     "@react-types/shared": "3.30.0",
     "@tailwindcss/forms": "0.5.3",
@@ -46,8 +47,10 @@
     "autoprefixer": "10.4.17",
     "color": "4.2.3",
     "cross-env": "10.0.0",
+    "eslint": "9.39.4",
     "identity-obj-proxy": "3.0.0",
     "postcss-import": "16.0.0",
+    "prettier": "3.8.1",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "rimraf": "6.0.1",
@@ -95,8 +98,8 @@
     "test:watch": "cross-env TZ=UTC LANG=en-US vitest watch",
     "test:coverage": "cross-env TZ=UTC LANG=en-US vitest run --coverage",
     "dev": "ladle serve",
-    "lint": "echo 'ESLint not configured yet'",
-    "lint:fix": "echo 'ESLint not configured yet'",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
+    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,json,css}\"",
     "format:write": "prettier --write \"**/*.{ts,tsx,js,json,css}\"",
     "type:check": "tsgo --noEmit"