@seeqdev/qomponents 0.0.219 → 0.0.220

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

@@ -0,0 +1,15 @@
+import { BadgeProps } from "./Badge.types.js";
+import * as react_jsx_runtime1 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_runtime1.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/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";
@@ -48,4 +49,4 @@ import Carousel from "./Carousel/Carousel.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, 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";
@@ -48,4 +49,4 @@ import Carousel from "./Carousel/Carousel.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, 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;

package/package.json

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