@seeqdev/qomponents 0.0.219 → 0.0.221

package/dist/src/Badge/Badge.d.ts

@@ -0,0 +1,15 @@
+import { BadgeProps } from "./Badge.types.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/Badge/Badge.d.ts
+/**
+ * Renders a compact inline badge for feature-state labels such as new or preview.
+ */
+declare const Badge: ({
+  children,
+  variant,
+  testId,
+  extraClassNames
+}: BadgeProps) => react_jsx_runtime2.JSX.Element;
+//#endregion
+export { Badge, Badge as default };

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

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+
+//#region src/Badge/Badge.types.d.ts
+declare const badgeVariants: readonly ["new", "preview"];
+type BadgeVariant = (typeof badgeVariants)[number];
+type BadgeProps = {
+  /**
+   * The content rendered inside the badge.
+   */
+  children: ReactNode;
+  /**
+   * Visual style variant for the badge.
+   * @default 'new'
+   */
+  variant?: BadgeVariant;
+  /**
+   * Test ID attribute used to locate the badge in automated tests.
+   */
+  testId?: string;
+  /**
+   * Additional CSS classes applied to the badge element.
+   */
+  extraClassNames?: string;
+};
+//#endregion
+export { BadgeProps, BadgeVariant, badgeVariants };

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

@@ -0,0 +1,2 @@
+import { Badge } from "./Badge.js";
+export { Badge as default };

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

@@ -57,6 +57,11 @@ interface ButtonProps {
    * The button will also have `pointer-events: none` applied via CSS.
    */
   disabled?: boolean;
+  /**
+   * When true, renders a loading indicator in the icon slot instead of the configured icon.
+   * This keeps loading button treatment consistent across consumers.
+   */
+  inProgress?: boolean;
   /**
    * Additional CSS classes to apply to the button element.
    * These classes are combined with the component's built-in styling classes.

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

@@ -50,6 +50,11 @@ interface DropdownItems extends TooltipComponentProps {
    * Typically uses Seeq or FontAwesome classes for consistent visual styling.
    */
   icon?: string;
+  /**
+   * When true, renders a loading indicator in the icon slot instead of the configured icon.
+   * This keeps loading dropdown item treatment consistent across consumers.
+   */
+  inProgress?: boolean;
   /**
    * Type/style of the icon that determines its rendering and colors.
    * Common values include 'theme', 'text', 'color' based on the Icon component.

package/dist/src/LoadingIndicator/LoadingIndicator.d.ts

@@ -0,0 +1,24 @@
+import { LoadingIndicatorProps } from "./LoadingIndicator.types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/LoadingIndicator/LoadingIndicator.d.ts
+/**
+ * Shared loading spinner that inherits the active Seeq theme color unless a color is provided.
+ */
+declare const LoadingIndicator: ({
+  id,
+  customId,
+  testId,
+  size,
+  thickness,
+  color,
+  extraClassNames,
+  style,
+  ariaLabel,
+  ariaHidden,
+  role,
+  onClick,
+  title
+}: LoadingIndicatorProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LoadingIndicator as default };

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

@@ -0,0 +1,70 @@
+import { CSSProperties, MouseEventHandler } from "react";
+
+//#region src/LoadingIndicator/LoadingIndicator.types.d.ts
+
+/**
+ * Preset loading indicator sizes.
+ */
+type LoadingIndicatorSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Props for the LoadingIndicator component.
+ */
+type LoadingIndicatorProps = {
+  /**
+   * HTML ID attribute for the loading indicator element.
+   */
+  id?: string;
+  /**
+   * Legacy HTML ID attribute alias for consumers that still use customId.
+   */
+  customId?: string;
+  /**
+   * Test ID attribute used in automated testing.
+   */
+  testId?: string;
+  /**
+   * Preset size or explicit pixel size for the loading indicator.
+   * @default 'md'
+   */
+  size?: LoadingIndicatorSize | number;
+  /**
+   * Ring thickness in pixels. Defaults to the selected preset size's thickness.
+   */
+  thickness?: number;
+  /**
+   * Spinner color. Defaults to currentColor so the indicator inherits from its context.
+   */
+  color?: string;
+  /**
+   * Additional CSS classes to apply to the loading indicator element.
+   */
+  extraClassNames?: string;
+  /**
+   * Inline styles to apply to the loading indicator element.
+   */
+  style?: CSSProperties;
+  /**
+   * Accessible label for assistive technologies.
+   * When omitted, the indicator is treated as decorative unless role, onClick, or ariaHidden is provided.
+   */
+  ariaLabel?: string;
+  /**
+   * Controls whether the loading indicator is hidden from assistive technologies.
+   * When omitted, decorative indicators are hidden automatically.
+   */
+  ariaHidden?: boolean;
+  /**
+   * ARIA role for the loading indicator element.
+   */
+  role?: string;
+  /**
+   * Click handler for interactive loading indicator usages.
+   */
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  /**
+   * Browser tooltip text for the loading indicator element.
+   */
+  title?: string;
+};
+//#endregion
+export { LoadingIndicatorProps, LoadingIndicatorSize };

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

@@ -0,0 +1,2 @@
+import LoadingIndicator from "./LoadingIndicator.js";
+export { LoadingIndicator as default };

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

@@ -3,6 +3,7 @@ import Accordion from "./Accordion/Accordion.js";
 import { DEFAULT_TOOL_TIP_DELAY, TooltipComponentProps, TooltipPosition, TooltipProps, tooltipPositions } from "./Tooltip/Tooltip.types.js";
 import { AlertProps } from "./Alert/Alert.types.js";
 import { Alert } from "./Alert/Alert.js";
+import { Badge } from "./Badge/Badge.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 Button from "./Button/Button.js";
@@ -45,7 +46,8 @@ 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 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, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, FormControlElement, GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, Modal, ModalProps, ModalSize, Option, OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, 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, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, 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, 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 };

package/dist/src/index.d.ts

@@ -3,6 +3,7 @@ import Accordion from "./Accordion/Accordion.js";
 import { DEFAULT_TOOL_TIP_DELAY, TooltipComponentProps, TooltipPosition, TooltipProps, tooltipPositions } from "./Tooltip/Tooltip.types.js";
 import { AlertProps } from "./Alert/Alert.types.js";
 import { Alert } from "./Alert/Alert.js";
+import { Badge } from "./Badge/Badge.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 Button from "./Button/Button.js";
@@ -45,7 +46,8 @@ 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 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, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonType, ButtonVariant, ButtonWithDropdown, ButtonWithDropdownProps, ButtonWithPopover, ButtonWithPopoverProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Collapse, CollapseProps, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, FormControlElement, type GroupBase, GroupedOption, Icon, IconPosition, IconProps, IconSize, IconType, InputGroup, InputGroupPlacement, InputGroupProps, InputLengthStyleProps, Modal, ModalProps, ModalSize, Option, type OptionProps, ProgressBar, ProgressBarProps, ProgressIndicatorProps, QTip, QTipDataAttributes, type QomponentsTheme, SeeqActionDropdown, SeeqActionDropdownItems, SeeqActionDropdownProps, 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, DEFAULT_TOOL_TIP_DELAY, DimensionStyle, DropdownItems, DropdownProps, DropdownSubItem, 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, 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 };

package/dist/styles.css

@@ -674,6 +674,9 @@
   .tw\:gap-2 {
     gap: calc(var(--tw-spacing) * 2);
   }
+  .tw\:gap-3 {
+    gap: calc(var(--tw-spacing) * 3);
+  }
   .tw\:gap-4 {
     gap: calc(var(--tw-spacing) * 4);
   }
@@ -701,6 +704,9 @@
   .tw\:rounded-\[0\.9375rem\] {
     border-radius: 0.9375rem;
   }
+  .tw\:rounded-\[3px\] {
+    border-radius: 3px;
+  }
   .tw\:rounded-\[10px\] {
     border-radius: 10px;
   }
@@ -865,6 +871,9 @@
   .tw\:bg-red-500\! {
     background-color: var(--tw-color-red-500) !important;
   }
+  .tw\:bg-sq-badge-preview-bg {
+    background-color: var(--bg-included-2);
+  }
   .tw\:bg-sq-bg-warning {
     background-color: #fff3cd;
   }
@@ -931,6 +940,9 @@
   .tw\:bg-sq-warning {
     background-color: var(--sq-status-warning-color);
   }
+  .tw\:bg-sq-warning-bg-color {
+    background-color: var(--sq-warning-bg-color);
+  }
   .tw\:bg-sq-white {
     background-color: var(--sqw-white);
   }
@@ -985,6 +997,9 @@
   .tw\:px-6 {
     padding-inline: calc(var(--tw-spacing) * 6);
   }
+  .tw\:px-\[5px\] {
+    padding-inline: 5px;
+  }
   .tw\:px-sq-19 {
     padding-inline: 1.1875rem;
   }
@@ -1003,12 +1018,18 @@
   .tw\:py-6 {
     padding-block: calc(var(--tw-spacing) * 6);
   }
+  .tw\:py-\[2px\] {
+    padding-block: 2px;
+  }
   .tw\:py-px {
     padding-block: 1px;
   }
   .tw\:py-sq-5 {
     padding-block: 0.3125rem;
   }
+  .tw\:pt-2 {
+    padding-top: calc(var(--tw-spacing) * 2);
+  }
   .tw\:pr-1 {
     padding-right: calc(var(--tw-spacing) * 1);
   }
@@ -1052,6 +1073,9 @@
     font-size: var(--tw-text-xs);
     line-height: var(--tw-leading, var(--tw-text-xs--line-height));
   }
+  .tw\:text-\[0\.8rem\] {
+    font-size: 0.8rem;
+  }
   .tw\:text-\[20px\] {
     font-size: 20px;
   }
@@ -1135,6 +1159,12 @@
   .tw\:text-sq-text-color {
     color: #3a3a3a;
   }
+  .tw\:text-sq-text-dark-warning-color {
+    color: var(--sq-text-dark-warning-color);
+  }
+  .tw\:text-sq-text-interactive {
+    color: var(--sq-analysis-link);
+  }
   .tw\:text-sq-theme-dark {
     color: var(--theme-dark);
   }
@@ -1156,6 +1186,9 @@
   .tw\:text-white {
     color: var(--tw-color-white);
   }
+  .tw\:capitalize {
+    text-transform: capitalize;
+  }
   .tw\:italic {
     font-style: italic;
   }
@@ -1884,6 +1917,11 @@
       background-color: var(--tw-color-gray-700);
     }
   }
+  .tw\:dark\:bg-sq-bg-default-preview-dark {
+    &:where(.tw-dark, .tw-dark *) {
+      background-color: var(--bg-default-preview-dark);
+    }
+  }
   .tw\:dark\:bg-sq-colored-hover-dark {
     &:where(.tw-dark, .tw-dark *) {
       background-color: #262c36;
@@ -1914,6 +1952,11 @@
       background-color: #262c36 !important;
     }
   }
+  .tw\:dark\:bg-sq-text-dark-warning-color {
+    &:where(.tw-dark, .tw-dark *) {
+      background-color: var(--sq-text-dark-warning-color);
+    }
+  }
   .tw\:dark\:bg-sq-theme-dark {
     &:where(.tw-dark, .tw-dark *) {
       background-color: var(--theme-dark);
@@ -1974,6 +2017,11 @@
       color: #f0f6fc;
     }
   }
+  .tw\:dark\:text-sq-text-interactive-dark {
+    &:where(.tw-dark, .tw-dark *) {
+      color: var(--sq-text-interactive-dark);
+    }
+  }
   .tw\:dark\:text-sq-theme-dark {
     &:where(.tw-dark, .tw-dark *) {
       color: var(--theme-dark);
@@ -1989,6 +2037,11 @@
       color: var(--theme-link);
     }
   }
+  .tw\:dark\:text-sq-warning-bg-color {
+    &:where(.tw-dark, .tw-dark *) {
+      color: var(--sq-warning-bg-color);
+    }
+  }
   .tw\:dark\:text-sq-white {
     &:where(.tw-dark, .tw-dark *) {
       color: var(--sqw-white);
@@ -3400,6 +3453,7 @@
   --sq-gray-text: #869298;
   --sq-gray-text-dark: #9198a1;
   --sq-text-muted: #6c757d;
+  --sq-text-interactive-dark: #1fcfa6;
   --sq-darker-gray: #e7e7e7;
   --sq-darker-gray-dark: #21262d;
   --sqw-disabled-gray: #dde1e3;
@@ -3501,6 +3555,7 @@
   --bg-table-highlight-hover: #faf2cc;
   --bg-highlight: #e6d4a3;
   --bg-highlight-hover: #e0c65c;
+  --bg-default-preview-dark: #1e4032;
   --sq-brand-header: #062f41;
   --sq-report-color: #39516b;
   --sq-analysis-color: #427c63;
@@ -3522,6 +3577,7 @@
   --sqw-danger-color: #d9534f;
   --sqw-warning-color: #f0ad4e;
   --sq-text-warning-color: #f0ad4e;
+  --sq-warning-bg-color: #fce7ce;
   --sq-text-dark-warning-color: #664d03;
   --sq-flag-icon-light-color: #b85559;
   --sq-flag-icon-dark-color: #c77a7b;
@@ -3655,6 +3711,46 @@
 .svgContainer path {
   transform: translateX(0.5px) translateY(0.5px);
 }
+.loading-spinner, .fa-spinner, .fa-circle-notch.fa-spin, .fa-refresh.fa-spin {
+  --spinner-size: 40px;
+  --thickness: 7px;
+  position: relative;
+  display: inline-block;
+  flex: 0 0 auto;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  color: var(--spinner-color, var(--theme-dark, var(--sq-theme-color, #4086c4)));
+  line-height: 1;
+  vertical-align: middle;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg, transparent, currentColor);
+  -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - var(--thickness)), black calc(100% - var(--thickness) + 0.5px) );
+  mask: radial-gradient( farthest-side, transparent calc(100% - var(--thickness)), black calc(100% - var(--thickness) + 0.5px) );
+  animation: spin 1s linear infinite;
+}
+.loading-spinner::before, .fa-spinner::before, .fa-circle-notch.fa-spin::before, .fa-refresh.fa-spin::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: var(--thickness);
+  height: var(--thickness);
+  background: currentColor;
+  border-radius: 50%;
+  transform: translateX(-50%);
+}
+.loading-spinner-icon, .fa-spinner, .fa-circle-notch.fa-spin, .fa-refresh.fa-spin {
+  --spinner-size: 1em;
+  --thickness: 0.18em;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.219",
+  "version": "0.0.221",
   "type": "module",
   "main": "dist/index.js",
   "source": "src/index.ts",