@seeqdev/qomponents 0.0.157 → 0.0.159

package/dist/styles.css

@@ -1184,7 +1184,7 @@
     content: "\f979" !important;
 }
 
-/* ! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com */
+/* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -1211,16 +1211,21 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   -o-tab-size: 4;
      tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
   font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*
@@ -1287,8 +1292,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -1296,7 +1303,9 @@ kbd,
 samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-size: 1em; /* 2 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
 }
 
 /*
@@ -1351,6 +1360,8 @@ optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
@@ -1488,6 +1499,14 @@ menu {
   padding: 0;
 }
 
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
 /*
 Prevent resizing textareas horizontally by default.
 */
@@ -1673,6 +1692,9 @@ ol,
     --tw-pan-y:  ;
     --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
     --tw-ordinal:  ;
     --tw-slashed-zero:  ;
     --tw-numeric-figure:  ;
@@ -1720,6 +1742,9 @@ ol,
     --tw-pan-y:  ;
     --tw-pinch-zoom:  ;
     --tw-scroll-snap-strictness: proximity;
+    --tw-gradient-from-position:  ;
+    --tw-gradient-via-position:  ;
+    --tw-gradient-to-position:  ;
     --tw-ordinal:  ;
     --tw-slashed-zero:  ;
     --tw-numeric-figure:  ;
@@ -1856,10 +1881,7 @@ ol,
 }
 
 .tw-inset-0 {
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
+    inset: 0px;
 }
 
 .-tw-bottom-2 {
@@ -2219,6 +2241,10 @@ ol,
     width: 100%;
 }
 
+.tw-min-w-6 {
+    min-width: 1.5rem;
+}
+
 .tw-min-w-\[100px\] {
     min-width: 100px;
 }
@@ -2252,6 +2278,10 @@ ol,
     max-width: 72rem;
 }
 
+.tw-max-w-96 {
+    max-width: 24rem;
+}
+
 .tw-max-w-full {
     max-width: 100%;
 }
@@ -3773,286 +3803,291 @@ ol,
     color: rgb(var(--sq-disabled-gray));
 }
 
-.tw-dark .dark\:tw-border-gray-500 {
+:is(.tw-dark .dark\:tw-border-gray-500) {
     --tw-border-opacity: 1;
     border-color: rgb(107 114 128 / var(--tw-border-opacity));
 }
 
-.tw-dark .dark\:tw-border-gray-700 {
+:is(.tw-dark .dark\:tw-border-gray-700) {
     --tw-border-opacity: 1;
     border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
 
-.tw-dark .dark\:tw-border-sq-color-dark {
+:is(.tw-dark .dark\:tw-border-sq-color-dark) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-color-dark));
 }
 
-.tw-dark .dark\:tw-border-sq-dark-background {
+:is(.tw-dark .dark\:tw-border-sq-dark-background) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-dark-background));
 }
 
-.tw-dark .dark\:tw-border-sq-dark-disabled-gray {
+:is(.tw-dark .dark\:tw-border-sq-dark-disabled-gray) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-dark-disabled-gray));
 }
 
-.tw-dark .dark\:tw-border-sq-dark-text {
+:is(.tw-dark .dark\:tw-border-sq-dark-text) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-dark-text));
 }
 
-.tw-dark .dark\:tw-border-sq-icon-dark {
+:is(.tw-dark .dark\:tw-border-sq-icon-dark) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-icon-dark));
 }
 
-.tw-dark .dark\:tw-border-b-sq-color-dark {
+:is(.tw-dark .dark\:tw-border-b-sq-color-dark) {
     --tw-border-opacity: 1;
     border-bottom-color: rgb(var(--sq-color-dark));
 }
 
-.tw-dark .dark\:\!tw-bg-sq-multi-gray-dark {
+:is(.tw-dark .dark\:\!tw-bg-sq-multi-gray-dark) {
     --tw-bg-opacity: 1 !important;
     background-color: rgb(var(--sq-multi-gray-dark)) !important;
 }
 
-.tw-dark .dark\:tw-bg-gray-500 {
+:is(.tw-dark .dark\:tw-bg-gray-500) {
     --tw-bg-opacity: 1;
     background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
-.tw-dark .dark\:tw-bg-gray-700 {
+:is(.tw-dark .dark\:tw-bg-gray-700) {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.tw-dark .dark\:tw-bg-sq-color-dark {
+:is(.tw-dark .dark\:tw-bg-sq-color-dark) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-color-dark));
 }
 
-.tw-dark .dark\:tw-bg-sq-color-highlight {
+:is(.tw-dark .dark\:tw-bg-sq-color-highlight) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-color-highlight));
 }
 
-.tw-dark .dark\:tw-bg-sq-colored-hover-dark {
+:is(.tw-dark .dark\:tw-bg-sq-colored-hover-dark) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-colored-hover-dark));
 }
 
-.tw-dark .dark\:tw-bg-sq-dark-background {
+:is(.tw-dark .dark\:tw-bg-sq-dark-background) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-dark-background));
 }
 
-.tw-dark .dark\:tw-bg-sq-dark-disabled-gray {
+:is(.tw-dark .dark\:tw-bg-sq-dark-disabled-gray) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-dark-disabled-gray));
 }
 
-.tw-dark .dark\:tw-bg-sq-icon-dark {
+:is(.tw-dark .dark\:tw-bg-sq-icon-dark) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-icon-dark));
 }
 
-.tw-dark .dark\:tw-bg-sq-multi-gray-dark {
+:is(.tw-dark .dark\:tw-bg-sq-multi-gray-dark) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-multi-gray-dark));
 }
 
-.tw-dark .dark\:tw-bg-transparent {
+:is(.tw-dark .dark\:tw-bg-sq-worksheetspanel-gray-dark) {
+    --tw-bg-opacity: 1;
+    background-color: rgb(var(--sq-worksheetspanel-gray-dark));
+}
+
+:is(.tw-dark .dark\:tw-bg-transparent) {
     background-color: transparent;
 }
 
-.tw-dark .dark\:tw-text-sq-color-dark-dark {
+:is(.tw-dark .dark\:tw-text-sq-color-dark-dark) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-color-dark-dark));
 }
 
-.tw-dark .dark\:tw-text-sq-dark-disabled-gray {
+:is(.tw-dark .dark\:tw-text-sq-dark-disabled-gray) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-dark-disabled-gray));
 }
 
-.tw-dark .dark\:tw-text-sq-dark-text {
+:is(.tw-dark .dark\:tw-text-sq-dark-text) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-dark-text));
 }
 
-.tw-dark .dark\:tw-text-sq-dark-text-lighter {
+:is(.tw-dark .dark\:tw-text-sq-dark-text-lighter) {
     --tw-text-opacity: 1;
     color: rgba(var(--sq-dark-text), 0.3);
 }
 
-.tw-dark .dark\:tw-text-sq-fairly-dark-gray {
+:is(.tw-dark .dark\:tw-text-sq-fairly-dark-gray) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-fairly-dark-gray));
 }
 
-.tw-dark .dark\:tw-text-sq-link-dark {
+:is(.tw-dark .dark\:tw-text-sq-link-dark) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-link-dark));
 }
 
-.tw-dark .dark\:tw-text-sq-text-color {
+:is(.tw-dark .dark\:tw-text-sq-text-color) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-text-color));
 }
 
-.tw-dark .dark\:tw-text-sq-white {
+:is(.tw-dark .dark\:tw-text-sq-white) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-white));
 }
 
-.tw-dark .dark\:tw-text-white {
+:is(.tw-dark .dark\:tw-text-white) {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.tw-dark .dark\:tw-placeholder-sq-dark-text-lighter::-moz-placeholder {
+:is(.tw-dark .dark\:tw-placeholder-sq-dark-text-lighter)::-moz-placeholder {
     --tw-placeholder-opacity: 1;
     color: rgba(var(--sq-dark-text), 0.3);
 }
 
-.tw-dark .dark\:tw-placeholder-sq-dark-text-lighter::placeholder {
+:is(.tw-dark .dark\:tw-placeholder-sq-dark-text-lighter)::placeholder {
     --tw-placeholder-opacity: 1;
     color: rgba(var(--sq-dark-text), 0.3);
 }
 
-.tw-dark .dark\:hover\:tw-border-sq-color-dark-dark:hover {
+:is(.tw-dark .dark\:hover\:tw-border-sq-color-dark-dark:hover) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-color-dark-dark));
 }
 
-.tw-dark .dark\:hover\:tw-border-sq-color-highlight:hover {
+:is(.tw-dark .dark\:hover\:tw-border-sq-color-highlight:hover) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-color-highlight));
 }
 
-.tw-dark .dark\:hover\:tw-border-sq-dark-disabled-gray:hover {
+:is(.tw-dark .dark\:hover\:tw-border-sq-dark-disabled-gray:hover) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-dark-disabled-gray));
 }
 
-.tw-dark .dark\:hover\:tw-border-sq-link-dark:hover {
+:is(.tw-dark .dark\:hover\:tw-border-sq-link-dark:hover) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-link-dark));
 }
 
-.tw-dark .dark\:hover\:tw-bg-sq-color-highlight:hover {
+:is(.tw-dark .dark\:hover\:tw-bg-sq-color-highlight:hover) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-color-highlight));
 }
 
-.tw-dark .dark\:hover\:tw-bg-sq-dark-background:hover {
+:is(.tw-dark .dark\:hover\:tw-bg-sq-dark-background:hover) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-dark-background));
 }
 
-.tw-dark .dark\:hover\:tw-bg-sq-field-disabled-gray:hover {
+:is(.tw-dark .dark\:hover\:tw-bg-sq-field-disabled-gray:hover) {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--sq-field-disabled-gray), 0.3);
 }
 
-.tw-dark .dark\:hover\:tw-bg-sq-gray-highlight-dark:hover {
+:is(.tw-dark .dark\:hover\:tw-bg-sq-gray-highlight-dark:hover) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-gray-highlight-dark));
 }
 
-.tw-dark .dark\:hover\:tw-bg-sq-highlight-color-dark:hover {
+:is(.tw-dark .dark\:hover\:tw-bg-sq-highlight-color-dark:hover) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-highlight-color-dark));
 }
 
-.tw-dark .dark\:hover\:tw-bg-sq-link-dark:hover {
+:is(.tw-dark .dark\:hover\:tw-bg-sq-link-dark:hover) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-link-dark));
 }
 
-.tw-dark .hover\:dark\:tw-bg-gray-700:hover {
+:is(.tw-dark .hover\:dark\:tw-bg-gray-700):hover {
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.tw-dark .dark\:hover\:tw-text-sq-color-dark-dark:hover {
+:is(.tw-dark .dark\:hover\:tw-text-sq-color-dark-dark:hover) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-color-dark-dark));
 }
 
-.tw-dark .dark\:focus\:tw-border-sq-color-dark:focus {
+:is(.tw-dark .dark\:focus\:tw-border-sq-color-dark:focus) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-color-dark));
 }
 
-.tw-dark .dark\:focus\:tw-border-sq-color-dark-dark:focus {
+:is(.tw-dark .dark\:focus\:tw-border-sq-color-dark-dark:focus) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-color-dark-dark));
 }
 
-.tw-dark .dark\:focus\:tw-bg-sq-multi-gray-dark:focus {
+:is(.tw-dark .dark\:focus\:tw-bg-sq-multi-gray-dark:focus) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-multi-gray-dark));
 }
 
-.tw-dark .dark\:focus\:tw-text-sq-color-dark-dark:focus {
+:is(.tw-dark .dark\:focus\:tw-text-sq-color-dark-dark:focus) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-color-dark-dark));
 }
 
-.tw-dark .dark\:checked\:focus\:tw-bg-sq-dark-background:focus:checked {
+:is(.tw-dark .dark\:checked\:focus\:tw-bg-sq-dark-background:focus:checked) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-dark-background));
 }
 
-.tw-dark .dark\:active\:tw-border-sq-color-dark:active {
+:is(.tw-dark .dark\:active\:tw-border-sq-color-dark:active) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-color-dark));
 }
 
-.tw-dark .dark\:active\:tw-border-sq-color-dark-dark:active {
+:is(.tw-dark .dark\:active\:tw-border-sq-color-dark-dark:active) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-color-dark-dark));
 }
 
-.tw-dark .dark\:active\:tw-bg-sq-dark-disabled-gray:active {
+:is(.tw-dark .dark\:active\:tw-bg-sq-dark-disabled-gray:active) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-dark-disabled-gray));
 }
 
-.tw-dark .dark\:active\:tw-bg-sq-field-disabled-gray:active {
+:is(.tw-dark .dark\:active\:tw-bg-sq-field-disabled-gray:active) {
     --tw-bg-opacity: 1;
     background-color: rgba(var(--sq-field-disabled-gray), 0.3);
 }
 
-.tw-dark .dark\:active\:tw-bg-sq-multi-gray-dark:active {
+:is(.tw-dark .dark\:active\:tw-bg-sq-multi-gray-dark:active) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-multi-gray-dark));
 }
 
-.tw-dark .dark\:active\:tw-text-sq-color-dark-dark:active {
+:is(.tw-dark .dark\:active\:tw-text-sq-color-dark-dark:active) {
     --tw-text-opacity: 1;
     color: rgb(var(--sq-color-dark-dark));
 }
 
-.tw-dark .dark\:disabled\:tw-border-sq-fairly-dark-gray:disabled {
+:is(.tw-dark .dark\:disabled\:tw-border-sq-fairly-dark-gray:disabled) {
     --tw-border-opacity: 1;
     border-color: rgb(var(--sq-fairly-dark-gray));
 }
 
-.tw-dark .disabled\:dark\:tw-bg-sq-dark-disabled-gray:disabled {
+:is(.tw-dark .disabled\:dark\:tw-bg-sq-dark-disabled-gray):disabled {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-dark-disabled-gray));
 }
 
-.tw-dark .disabled\:dark\:tw-text-sq-dark-text-lighter:disabled {
+:is(.tw-dark .disabled\:dark\:tw-text-sq-dark-text-lighter):disabled {
     --tw-text-opacity: 1;
     color: rgba(var(--sq-dark-text), 0.3);
 }
 
-.tw-dark .dark\:aria-disabled\:tw-bg-sq-dark-disabled-gray[aria-disabled="true"] {
+:is(.tw-dark .dark\:aria-disabled\:tw-bg-sq-dark-disabled-gray[aria-disabled="true"]) {
     --tw-bg-opacity: 1;
     background-color: rgb(var(--sq-dark-disabled-gray));
 }

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sources":["../src/Button/Button.types.ts","../src/Icon/Icon.types.ts","../src/Tooltip/Tooltip.types.ts"],"sourcesContent":["import { TooltipProps } from '../Tooltip/Tooltip.types';\nimport { IconType } from '../Icon/Icon.types';\nimport React from 'react';\n\nexport const buttonTypes = ['button', 'reset', 'submit', 'link'] as const;\nexport const buttonSizes = ['sm', 'lg'] as const;\nexport const buttonVariants = ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'] as const;\nexport const iconPositions = ['left', 'right'];\n\nexport type ButtonType = (typeof buttonTypes)[number];\nexport type ButtonSize = (typeof buttonSizes)[number];\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type IconPosition = (typeof iconPositions)[number];\n\nexport interface ButtonProps {\n  /**\n   * Callback function triggered when the button is clicked.\n   * Receives the mouse event as a parameter for additional event handling.\n   * Use this to define the primary action the button should perform.\n   */\n  onClick?: (e: React.MouseEvent) => void;\n\n  /**\n   * The text, element, or content to display inside the button.\n   * Can be a string for simple text, a translation key, or any React element/node\n   * for more complex content like formatted text or inline elements.\n   */\n  label?: string | React.JSX.Element | React.ReactNode;\n\n  /**\n   * Visual style variant that determines the button's appearance and color scheme:\n   * - `outline`: White background with border, suitable for secondary actions\n   * - `theme`: Primary theme colors, typically for main call-to-action buttons\n   * - `theme-light`: Lighter version of theme colors for subtle primary actions\n   * - `warning`: Yellow/orange styling for caution-related actions\n   * - `danger`: Red styling for destructive or critical actions\n   * - `no-border`: Borderless styling for minimal, text-like buttons\n   * @default 'outline'\n   */\n  variant?: ButtonVariant;\n\n  /**\n   * HTML button type attribute that determines the button's behavior in forms:\n   * - `button`: Standard button with no special form behavior (default)\n   * - `submit`: Submits the parent form when clicked\n   * - `reset`: Resets the parent form fields to their initial values\n   * - `link`: Behaves like a button but renders as button type for Firefox compatibility\n   * @default 'button'\n   */\n  type?: ButtonType;\n\n  /**\n   * Size variant that controls the button's dimensions and text size:\n   * - `sm`: Small button with compact padding and smaller text (default)\n   * - `lg`: Large button with generous padding and larger text\n   * @default 'sm'\n   */\n  size?: ButtonSize;\n\n  /**\n   * When true, disables the button preventing user interaction.\n   * Disabled buttons are visually dimmed and do not respond to clicks or focus.\n   * The button will also have `pointer-events: none` applied via CSS.\n   */\n  disabled?: boolean;\n\n  /**\n   * Additional CSS classes to apply to the button element.\n   * These classes are combined with the component's built-in styling classes.\n   * Use this to customize appearance beyond the standard variants.\n   */\n  extraClassNames?: string;\n\n  /**\n   * Icon class name to display alongside the button text.\n   * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').\n   * The icon is automatically styled to match the button's text color.\n   */\n  icon?: string;\n\n  /**\n   * Determines how the icon should be styled and colored:\n   * - `text`: Uses the button's text color (default)\n   * - `white`: Forces white color regardless of button variant\n   * - `theme`: Uses theme-specific colors\n   * - `color`: Uses a custom color specified in `iconColor`\n   * @default 'text'\n   */\n  iconStyle?: IconType;\n\n  /**\n   * Custom color for the icon when `iconStyle` is set to 'color'.\n   * Can be any valid CSS color value (hex, rgb, color name, etc.).\n   * This property is required when iconStyle is 'color'.\n   */\n  iconColor?: string;\n\n  /**\n   * Position of the icon relative to the button text:\n   * - `left`: Icon appears before the text with right margin\n   * - `right`: Icon appears after the text with left margin\n   * @default 'left'\n   */\n  iconPosition?: IconPosition;\n\n  /**\n   * Custom prefix for the icon class when not using standard FontAwesome icons.\n   * By default, icons are prefixed with 'fa-sharp fa-regular', but some icons\n   * require different prefixes. Use this to override the default behavior.\n   */\n  iconPrefix?: string;\n\n  /**\n   * HTML ID attribute for the button element.\n   * Should be unique across the entire page for proper HTML semantics.\n   * Also used as a prefix for the icon's test ID when an icon is present.\n   */\n  id?: string;\n\n  /**\n   * Test ID attribute for the button element used in automated testing.\n   * Applied to the `data-testid` attribute for element selection in test suites.\n   */\n  testId?: string;\n\n  /**\n   * Controls whether the click event should stop propagation to parent elements.\n   * When true (default), prevents the click from bubbling up the DOM tree.\n   * Set to false if you need parent elements to also handle the click event.\n   * @default true\n   */\n  stopPropagation?: boolean;\n\n  /**\n   * Tooltip text to display when hovering over the button.\n   * When provided, the button will show a tooltip with this text on hover.\n   * The tooltip appearance and behavior can be customized with `tooltipOptions`.\n   */\n  tooltip?: string;\n\n  /**\n   * When true, the tooltip text is rendered as HTML allowing for rich content.\n   * When false (default), the tooltip text is treated as plain text for security.\n   * Only set to true if you trust the tooltip content source.\n   * @default false\n   */\n  isHtmlTooltip?: boolean;\n\n  /**\n   * Test ID attribute specifically for the tooltip element.\n   * Used for automated testing to identify and interact with the tooltip.\n   * Helpful when you need to test tooltip-specific behavior separately from the button.\n   */\n  tooltipTestId?: string;\n\n  /**\n   * Configuration options for customizing tooltip behavior and appearance.\n   * Omits the 'text' property since that's handled by the `tooltip` prop.\n   * Includes options like position, delay, and other tooltip-specific settings.\n   */\n  tooltipOptions?: Omit<TooltipProps, 'text'>;\n\n  /**\n   * When true, prevents the blur event from occurring on mouse down.\n   * Useful when you want to keep focus on the current element after clicking the button.\n   * Commonly used in scenarios where button clicks shouldn't interrupt form input focus.\n   * @default false\n   */\n  preventBlur?: boolean;\n}\n","import { TooltipComponentProps } from '../Tooltip/Tooltip.types';\n\nexport const iconTypes = [\n  'theme',\n  'white',\n  'dark-gray',\n  'darkish-gray',\n  'gray',\n  'color',\n  'info',\n  'text',\n  'warning',\n  'inherit',\n  'danger',\n  'theme-light',\n  'success',\n] as const;\n\nexport type IconType = (typeof iconTypes)[number];\n\n/**\n * Props for the Icon component that renders customizable icons with various styling options.\n * Extends TooltipComponentProps to support tooltip functionality on the icon.\n */\nexport interface IconProps extends TooltipComponentProps {\n  /**\n   * Icon class name to display, typically from FontAwesome.\n   * Examples: 'fc-zoom', 'fc-delete', 'fc-save'. This determines which icon is rendered.\n   */\n  icon: string;\n\n  /**\n   * Custom prefix for the icon class when not using standard FontAwesome icons.\n   * By default, icons are prefixed with 'fa-sharp fa-regular', but some icons\n   * from different icon sets require specific prefixes. Use this to override the default.\n   */\n  iconPrefix?: string;\n\n  /**\n   * Visual style type that determines the icon's color and appearance:\n   * - `theme`: Uses primary theme colors (default)\n   * - `white`: Pure white color\n   * - `text`: Uses standard text color\n   * - `dark-gray`: Dark gray color\n   * - `darkish-gray`: Medium-dark gray color\n   * - `gray`: Standard gray color\n   * - `color`: Uses custom color specified in `color` prop\n   * - `info`: Blue informational color\n   * - `warning`: Yellow/orange warning color\n   * - `danger`: Red error/danger color\n   * - `success`: Green success color\n   * - `theme-light`: Lighter version of theme color\n   * - `inherit`: Inherits color from parent element\n   * @default 'theme'\n   */\n  type?: IconType;\n\n  /**\n   * Custom color value for the icon when `type` is set to 'color'.\n   * Can be any valid CSS color (hex, rgb, color names, etc.).\n   * This property is required when type is 'color'.\n   */\n  color?: string;\n\n  /**\n   * Callback function triggered when the icon is clicked.\n   * Receives the mouse event as a parameter. Use this to make icons interactive\n   * for actions like opening menus, triggering functions, or navigation.\n   */\n  onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => any;\n\n  /**\n   * Additional CSS classes to apply to the icon element.\n   * Use this to customize the icon's appearance, spacing, or behavior beyond built-in options.\n   */\n  extraClassNames?: string;\n\n  /**\n   * HTML ID attribute for the icon element.\n   * Should be unique across the page for proper HTML semantics and accessibility.\n   */\n  id?: string;\n\n  /**\n   * When true, applies the 'fa-lg' class to make the icon larger than normal size.\n   * Cannot be used together with the `small` prop. Useful for emphasis or better visibility.\n   */\n  large?: boolean;\n\n  /**\n   * When true, applies the 'fa-sm' class to make the icon smaller than normal size.\n   * Cannot be used together with the `large` prop. Useful for compact layouts or inline text.\n   */\n  small?: boolean;\n\n  /**\n   * Test ID attribute for the icon element used in automated testing.\n   * Applied to the `data-testid` attribute for element selection in test suites.\n   */\n  testId?: string;\n\n  /**\n   * Custom identifier placed in the `data-customid` attribute on the icon element.\n   * Useful for identifying the specific icon in event handlers when multiple icons\n   * share the same click handler. Helps distinguish which icon was clicked.\n   */\n  customId?: string;\n\n  /**\n   * Numeric value associated with the icon, purpose depends on specific use case.\n   * Can be used for ordering, counting, or any numeric data related to the icon.\n   */\n  number?: number;\n}\n","export const DEFAULT_TOOL_TIP_DELAY = 500;\nexport const tooltipPositions = ['top', 'left', 'right', 'bottom'] as const;\nimport React from 'react';\n\nexport type TooltipPosition = (typeof tooltipPositions)[number];\n\nexport interface TooltipProps {\n  position?: TooltipPosition;\n  children?: React.JSX.Element | string;\n  text: React.JSX.Element | string;\n  delay?: number;\n}\n\nexport interface TooltipComponentProps {\n  /** text to display on tooltip */\n  tooltip?: string;\n  /** number of milliseconds to wait before showing a tooltip on-hover */\n  tooltipDelay?: number;\n  /** one of four possible tooltip positions */\n  tooltipPlacement?: TooltipPosition;\n  /** true if the provided tooltip text should be rendered as HTML */\n  isHtmlTooltip?: boolean;\n  /** optional testId applied to the tooltip - useful for testing */\n  tooltipTestId?: string;\n}\n"],"names":[],"mappings":";;AAIO,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAW;MAC7D,WAAW,GAAG,CAAC,IAAI,EAAE,IAAI,EAAW;AACpC,MAAA,cAAc,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAW;MAChG,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO;;ACLhC,MAAA,SAAS,GAAG;IACvB,OAAO;IACP,OAAO;IACP,WAAW;IACX,cAAc;IACd,MAAM;IACN,OAAO;IACP,MAAM;IACN,MAAM;IACN,SAAS;IACT,SAAS;IACT,QAAQ;IACR,aAAa;IACb,SAAS;;;ACfJ,MAAM,sBAAsB,GAAG,IAAI;AACnC,MAAM,gBAAgB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seeqdev/qomponents",
-  "version": "0.0.157",
+  "version": "0.0.159",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.js",
@@ -18,7 +18,6 @@
   "description": "A library that allows you to build native UIs ... TODO",
   "scripts": {
     "build": "rollup -c --bundleConfigAsCjs",
-    "postinstall": "node ./node_modules/patch-package/index.js --patch-dir=patches",
     "watchRollup": "rollup -c --bundleConfigAsCjs --watch",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -35,43 +34,43 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@ladle/react": "2.9.0",
+    "@ladle/react": "5.0.3",
     "@react-types/shared": "3.30.0",
-    "@rollup/plugin-commonjs": "24.0.1",
-    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-commonjs": "26.0.0",
+    "@rollup/plugin-node-resolve": "16.0.0",
     "@tailwindcss/forms": "0.5.3",
-    "@testing-library/jest-dom": "5.16.5",
+    "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "16.3.0",
-    "@testing-library/user-event": "14.4.3",
+    "@testing-library/user-event": "14.5.2",
     "@types/dompurify": "^3.0.2",
-    "@types/jest": "29.4.0",
+    "@types/jest": "29.5.12",
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "@types/tinycolor2": "1.4.2",
-    "autoprefixer": "10.4.13",
+    "autoprefixer": "10.4.17",
     "color": "4.2.3",
     "identity-obj-proxy": "3.0.0",
-    "jest": "29.4.3",
-    "jest-cli": "29.1.1",
-    "jest-environment-jsdom": "29.4.3",
-    "jest-junit": "15.0.0",
+    "jest": "29.7.0",
+    "jest-cli": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-junit": "16.0.0",
     "jest-silent-reporter": "0.5.0",
-    "postcss-import": "15.1.0",
+    "postcss-import": "16.0.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "rollup": "3.17.2",
+    "rollup": "4.22.4",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-typescript2": "0.34.1",
-    "tailwindcss": "3.2.7",
-    "ts-jest": "29.0.5",
-    "ts-node": "10.9.1",
-    "typescript": "4.9.5",
+    "tailwindcss": "3.4.1",
+    "ts-jest": "29.1.2",
+    "ts-node": "10.9.2",
+    "typescript": "5.3.3",
     "typescript-strict-plugin": "2.1.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.5.1",
+    "@floating-ui/dom": "1.6.3",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-dialog": "1.1.6",
     "@radix-ui/react-dropdown-menu": "2.1.6",
@@ -82,8 +81,7 @@
     "dompurify": "3.2.3",
     "framer-motion": "12.17.0",
     "motion": "12.17.0",
-    "patch-package": "8.0.0",
-    "postcss": "8.4.21",
+    "postcss": "8.4.35",
     "react-select": "5.10.1",
     "rooks": "8.0.1",
     "tinycolor2": "1.6.0"

package/dist/Accordion/Accordion.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllAccordionVariants: () => React.JSX.Element;

package/dist/Accordion/Accordion.types.d.ts

@@ -1,20 +0,0 @@
-import React from 'react';
-export interface AccordionProps {
-    extraClassNames?: string;
-    defaultValue?: string;
-    value: string;
-    disabled?: boolean;
-    accordionItems: AccordionItem[];
-    testId?: string;
-    onItemSelect: (key: string) => void;
-}
-interface AccordionItem {
-    value: string;
-    trigger: React.ReactNode;
-    content: React.ReactNode;
-    itemTestId?: string;
-    id?: string;
-    disabled?: boolean;
-    contentClassNames?: string;
-}
-export {};

package/dist/Alert/Alert.stories.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllAlertsVariants: () => React.JSX.Element;

package/dist/Alert/Alert.test.d.ts

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

package/dist/Alert/Alert.types.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { TooltipComponentProps } from '../Tooltip/Tooltip.types';
-interface Props {
-    children: React.ReactNode;
-    dismissible?: boolean;
-    onClose?: () => void;
-    show?: boolean;
-    variant: 'danger' | 'theme' | 'warning' | 'gray';
-    testId?: string;
-    id?: string;
-    extraClassNames?: string;
-}
-export type AlertProps = Props & TooltipComponentProps;
-export {};

package/dist/Button/Button.stories.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const AllButtonVariants: () => React.JSX.Element;
-export declare const ButtonWithTooltip: () => React.JSX.Element;
-export declare const ButtonWithIcon: () => React.JSX.Element;
-export declare const DisabledButton: () => React.JSX.Element;