@seeqdev/qomponents 0.0.177 → 0.0.179

package/dist/example/src/Example.tsx

@@ -37,8 +37,8 @@ const options = [
 ];
 
 const Trigger = ({ label }: { label: string }) => (
-  <div className="flex justify-start items-center border-b px-2 tw-text-sq-color-dark">
-    <Icon icon="fc-arrow-dropdown" extraClassNames="tw-text-sq-color-dark mr-[0.5rem] text-[0.75rem]" type="text" />
+  <div className="flex justify-start items-center border-b px-2 tw:text-sq-theme-dark">
+    <Icon icon="fc-arrow-dropdown" extraClassNames="tw:text-sq-theme-dark mr-[0.5rem] text-[0.75rem]" type="text" />
     {label}
   </div>
 );
@@ -80,7 +80,7 @@ const accordionItems = [
 ];
 
 const renderData = (text: string) => (
-  <div className="tw-text-sq-color-gray dark:tw-text-sq-white p-6">
+  <div className="tw:text-sq-gray dark:tw-text-sq-white p-6">
     <p className="mb-5 text-[0.9375rem] leading-normal">{text}</p>
   </div>
 );
@@ -484,7 +484,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">Explore the Mountains</div>
-                    <div className="text-xs tw-text-sq-color-gray">Find peace in nature's beauty.</div>
+                    <div className="text-xs tw:text-sq-dark-gray">Find peace in nature's beauty.</div>
                   </div>,
                   <div className="flex flex-col items-center justify-center p-4" key="slide2">
                     <img
@@ -493,7 +493,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">City Lights</div>
-                    <div className="text-xs tw-text-sq-color-gray">Experience the energy of the city.</div>
+                    <div className="text-xs tw:text-sq-dark-gray">Experience the energy of the city.</div>
                   </div>,
                   <div className="flex flex-col items-center justify-center p-4" key="slide3">
                     <img
@@ -502,7 +502,7 @@ function Example() {
                       className="w-48 h-32 object-cover rounded-md mb-2"
                     />
                     <div className="font-bold">Relax at the Beach</div>
-                    <div className="text-xs tw-text-sq-color-gray">Soak up the sun and surf.</div>
+                    <div className="text-xs tw:text-sq-dark-gray">Soak up the sun and surf.</div>
                   </div>,
                 ]}
                 showArrows={false}
@@ -527,7 +527,7 @@ function Example() {
               <Collapse isVisible={collapseVisible}>
                 <div className="p-4 mt-2 bg-transparent rounded-md">
                   <div className="font-bold">Advanced Settings</div>
-                  <div className="text-xs tw-text-sq-color-gray">Configure rarely used options here.</div>
+                  <div className="text-xs tw:text-sq-dark-gray">Configure rarely used options here.</div>
                   <Checkbox label="Enable beta features" />
                   <Checkbox label="Show debug info" />
                 </div>

package/dist/index.esm.js

@@ -85,7 +85,7 @@ const Icon = ({ onClick, icon, iconPrefix = undefined, type = 'theme', extraClas
         const errorMessage = color === undefined || color === ''
             ? 'Icon with type="color" must have prop color specified.'
             : 'Icon with prop color must have type="color".';
-        return jsx$1("div", { className: "tw:text-sq-danger-color", children: errorMessage });
+        return jsx$1("div", { className: "tw:text-sq-danger", children: errorMessage });
     }
     const fontAwesomePrefix = iconPrefix ? iconPrefix : 'fa-sharp fa-regular';
     const iconPrefixString = icon.startsWith('fc') ? 'fc' : fontAwesomePrefix;
@@ -107,11 +107,11 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     const baseClassesByVariant = {
         'outline': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
         'theme': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
-        'danger': 'tw:bg-sq-danger-color tw:disabled:opacity-50 tw:aria-disabled:opacity-50 ' +
-            'tw:border-solid tw:border tw:border-sq-danger-color',
+        'danger': 'tw:bg-sq-danger tw:disabled:opacity-50 tw:aria-disabled:opacity-50 ' +
+            'tw:border-solid tw:border tw:border-sq-danger',
         'theme-light': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50 tw:border-solid tw:border',
         'no-border': 'tw:disabled:opacity-50 tw:aria-disabled:opacity-50',
-        'warning': 'tw:bg-sq-warning-color tw:border-solid tw:border tw:border-sq-warning-color ' +
+        'warning': 'tw:bg-sq-warning tw:border-solid tw:border tw:border-sq-warning ' +
             'tw:disabled:opacity-50 tw:aria-disabled:opacity-50',
     };
     const textClassesByVariantLightTheme = {
@@ -132,7 +132,7 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     };
     const classesByVariantLightTheme = {
         'outline': 'tw:bg-white tw:border-sq-disabled-gray',
-        'theme': 'tw:bg-sq-color-dark tw:border-sq-color-dark',
+        'theme': 'tw:bg-sq-theme-dark tw:border-sq-theme-dark',
         'danger': '',
         'theme-light': 'tw:bg-sq-icon',
         'no-border': '',
@@ -140,26 +140,26 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
     };
     const classesByVariantDarkTheme = {
         'outline': 'tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-disabled-gray',
-        'theme': 'tw:dark:bg-sq-color-dark tw:dark:border-sq-color-dark',
+        'theme': 'tw:dark:bg-sq-theme-dark tw:dark:border-sq-theme-dark',
         'danger': '',
         'theme-light': 'tw:dark:bg-sq-icon-dark tw:dark:border-sq-icon-dark',
         'no-border': '',
         'warning': '',
     };
     const activeClassesByVariantLightTheme = {
-        'outline': 'tw:hover:bg-sq-light-gray tw:focus:bg-sq-dark-gray tw:active:bg-sq-dark-gray tw:focus:border-sq-color-dark' +
-            ' tw:active:border-sq-color-dark',
-        'theme': 'tw:hover:bg-sq-color-highlight tw:hover:border-sq-color-highlight',
-        'danger': 'tw:hover:bg-sq-danger-color-hover tw:hover:border-sq-danger-color-hover',
+        'outline': 'tw:hover:bg-sq-light-gray tw:focus:bg-sq-dark-gray tw:active:bg-sq-dark-gray tw:focus:border-sq-theme-dark' +
+            ' tw:active:border-sq-theme-dark',
+        'theme': 'tw:hover:bg-sq-theme-highlight tw:hover:border-sq-theme-highlight',
+        'danger': 'tw:hover:bg-sq-bg-danger tw:hover:border-sq-bg-danger',
         'theme-light': 'tw:hover:bg-sq-link tw:hover:border-sq-link',
         'no-border': '',
         'warning': '',
     };
     const activeClassesByVariantDarkTheme = {
         'outline': 'tw:dark:hover:bg-sq-highlight-color-dark tw:dark:focus:bg-sq-multi-gray-dark' +
-            ' tw:dark:active:bg-sq-multi-gray-dark tw:dark:focus:border-sq-color-dark tw:dark:active:border-sq-color-dark',
-        'theme': 'tw:dark:hover:bg-sq-color-highlight tw:dark:hover:border-sq-color-highlight',
-        'danger': 'tw:dark:hover:bg-sq-danger-color-hover tw:dark:hover:border-sq-danger-color-hover',
+            ' tw:dark:active:bg-sq-multi-gray-dark tw:dark:focus:border-sq-theme-dark tw:dark:active:border-sq-theme-dark',
+        'theme': 'tw:dark:hover:bg-sq-theme-highlight tw:dark:hover:border-sq-theme-highlight',
+        'danger': 'tw:dark:hover:bg-sq-bg-danger tw:dark:hover:border-sq-bg-danger',
         'theme-light': 'tw:dark:hover:bg-sq-link-dark tw:dark:hover:border-sq-link-dark',
         'no-border': '',
         'warning': '',
@@ -13925,16 +13925,16 @@ var CreatableSelect$1 = CreatableSelect;
 
 const baseClasses$3 = ['tw:focus:ring-0', 'tw:disabled:cursor-not-allowed'].join(' ');
 const containerStyles = ['tw:bg-sq-white', 'tw:dark:bg-sq-dark-background'].join(' ');
-const errorClasses$2 = 'tw:border-sq-danger-color';
+const errorClasses$2 = 'tw:border-sq-danger';
 const borderColorClasses$2 = ['tw:border-sq-disabled-gray', 'tw:dark:border-sq-dark-disabled-gray'].join(' ');
 const borderStyles$3 = ['tw:border-solid', 'tw:border'].join(' ');
 const borderActiveClasses = [
-    'tw:hover:border-sq-color-dark',
-    'tw:focus-within:border-sq-color-dark',
-    'tw:active:border-sq-color-dark',
-    'tw:dark:hover:border-sq-color-dark-dark',
-    'tw:dark:focus-within:border-sq-color-dark-dark',
-    'tw:dark:active:border-sq-color-dark-dark',
+    'tw:hover:border-sq-theme-dark',
+    'tw:focus-within:border-sq-theme-dark',
+    'tw:active:border-sq-theme-dark',
+    'tw:dark:hover:border-sq-theme-dark-dark',
+    'tw:dark:focus-within:border-sq-theme-dark-dark',
+    'tw:dark:active:border-sq-theme-dark-dark',
 ].join(' ');
 const textStyles = ['tw:text-sq-text-color', 'tw:dark:text-sq-dark-text', 'tw:text-sm'].join(' ');
 const textActiveStyles = [
@@ -13945,9 +13945,9 @@ const textActiveStyles = [
     'tw:dark:hover:text-sq-theme-dark-dark',
     'tw:dark:focus:text-sq-theme-dark-dark',
     'tw:dark:active:text-sq-theme-dark-dark',
-    'tw:hover:text-sq-color-dark',
+    'tw:hover:text-sq-theme-dark',
     'tw:dark:text-sq-dark-disabled-gray',
-    'tw:dark:hover:text-sq-color-dark-dark',
+    'tw:dark:hover:text-sq-theme-dark-dark',
 ].join(' ');
 const menuStyles = [
     'tw:border-solid',
@@ -14088,8 +14088,8 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
             },
             singleValue: () => 'specOpenSelect',
             multiValue: () => multiValueStyles,
-            multiValueRemove: () => 'tw:hover:text-sq-danger-color specSelectMultiValueRemove',
-            clearIndicator: () => 'tw:text-sq-disabled-gray tw:hover:text-sq-danger-color specClearSelect',
+            multiValueRemove: () => 'tw:hover:text-sq-danger specSelectMultiValueRemove',
+            clearIndicator: () => 'tw:text-sq-disabled-gray tw:hover:text-sq-danger specClearSelect',
             group: () => 'specSelectGroup',
             groupHeading: () => groupHeadingStyles,
         },
@@ -15469,8 +15469,8 @@ const ButtonWithPopover = ({ children, trigger, id, hasArrow, extraTriggerClassN
     };
     React.useEffect(() => clearHoverTimeout, []);
     const renderContent = () => {
-        return (jsx$1(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "focus-visible:tw:outline-none tw:outline-none tw:w-full tw:h-full", children: jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw:relative tw:z-[1200] tw:min-w-6 tw:focus-visible:outline-none tw:outline-none data-[state=open]:tw:animate-in data-[state=closed]:tw:animate-out
-         tw:data-[side=top]:animate-slideDownAndFade data-[side=right]:tw:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade tw:text-sq-text-color
+        return (jsx$1(Content2$3, { sideOffset: placementOffset, align: align, side: placement, onInteractOutside: onInteractOutside, onPointerDownOutside: onPointerDownOutside, alignOffset: isHoverEnabled ? -10 : alignOffset, asChild: true, onClick: () => isCloseOnContentClick && onOpenChange && onOpenChange(false), className: "tw:focus-visible:outline-none tw:outline-none tw:w-full tw:h-full", children: jsxs("div", { "data-testid": containerTestId, className: `${bgStyles$2} ${borderStyles$2} tw:relative tw:z-[1200] tw:min-w-6 tw:focus-visible:outline-none tw:outline-none tw:data-[state=open]:animate-in tw:data-[state=closed]:animate-out
+         tw:data-[side=top]:animate-slideDownAndFade tw:data-[side=right]:animate-slideLeftAndFade tw:data-[side=bottom]:animate-slideUpAndFade tw:data-[side=left]:animate-slideRightAndFade tw:text-sq-text-color
         ${extraPopoverClassNames || ''}`, children: [hasArrow && (jsx$1(Arrow2$2, { asChild: true, children: jsx$1("div", { className: "tw:fill-transparent tw:bg-sq-white tw:w-sq-15 tw:h-sq-15 tw:-mt-sq-7 tw:rotate-45 tw:dark:bg-sq-dark-background tw:border-b tw:border-r tw:border-sq-disabled-gray tw:dark:border-gray-500" }) })), children] }) }));
     };
     const renderPopover = (popoverOpenState) => {
@@ -16569,7 +16569,7 @@ const ButtonWithDropdown = ({ dropdownItems, triggerIcon, id, extraClassNames =
                             })] }) }) })] }));
 };
 
-const baseClasses$2 = 'tw:mx-auto tw:p-4 tw:leading-normal tw:outline-none tw:py-2 tw:px-3 tw:rounded-[10px] tw:w-full tw:relative' +
+const baseClasses$2 = 'tw:mx-auto tw:leading-normal tw:outline-none tw:py-2 tw:px-3 tw:rounded-[10px] tw:w-full tw:relative' +
     ' tw:border-solid tw:border tw:text-sm tw:flex tw:flex-col tw:justify-center tw:items-center';
 const darkTheme$1 = 'tw:dark:bg-sq-theme-hover-dark tw:dark:text-sq-text-color-dark';
 const lightTheme$1 = 'tw:text-sq-text-color tw:bg-sq-theme-highlight/10';
@@ -16616,7 +16616,7 @@ const Alert = ({ children, dismissible = true, onClose, show = true, variant, te
  * @param tooltipProps - props to pass to the tooltip
  */
 const SvgIcon = ({ onClick, icon, color, type = 'default', extraClassNames, viewBox = '0 0 19 19', id, testId, customId, ...tooltipProps }) => {
-    const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} focus:tw:outline-none focus-visible:tw:outline-none 
+    const appliedClassNames = `${onClick ? 'tw:cursor-pointer' : ''} ${extraClassNames} tw:focus:outline-none tw:focus-visible:outline-none 
   tw:outline-none`;
     const tooltipData = getQTipData(tooltipProps);
     const appliedType = type === 'default' ? 'currentColor' : 'rgb(var(--sq-icon))';
@@ -27575,7 +27575,7 @@ var Thumb = SliderThumb;
  */
 const Slider = (props) => {
     const { onValueChange, onPointerUp, id, value, name, disabled = false, rootExtraClassNames = '', trackExtraClassNames = '', rangeExtraClassNames = '', thumbExtraClassNames = '', step, min, max, } = props;
-    return (jsxs(Root$1, { className: `tw:relative tw:flex tw:h-5 tw:w-full tw:touch-none tw:select-none tw:items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [jsx$1(Track, { className: `tw:relative tw:h-sq-5 tw:grow tw:rounded-sm tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: jsx$1(Range, { className: `tw:absolute tw:h-full tw:rounded-full ${rangeExtraClassNames}` }) }), jsx$1(Thumb, { className: `tw:block tw:h-sq-15 tw:w-sq-15 tw:rounded-full tw:bg-sq-theme-dark active:tw:bg-sq-theme-darker tw:focus:outline-none tw:focus-visible:outline-none tw:aria-disabled:bg-sq-dark-gray tw:dark:aria-disabled:bg-sq-dark-disabled-gray tw:transition tw:ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
+    return (jsxs(Root$1, { className: `tw:relative tw:flex tw:h-5 tw:w-full tw:touch-none tw:select-none tw:items-center ${rootExtraClassNames}`, defaultValue: [value], value: [value], onValueChange: (value) => onValueChange && onValueChange(value), onPointerUp: (e) => onPointerUp && onPointerUp(e), name: name, id: id, max: max, min: min, disabled: disabled, step: step, children: [jsx$1(Track, { className: `tw:relative tw:h-sq-5 tw:grow tw:rounded-sm tw:bg-sq-dark-gray tw:dark:bg-sq-dark-disabled-gray ${trackExtraClassNames}`, children: jsx$1(Range, { className: `tw:absolute tw:h-full tw:rounded-full ${rangeExtraClassNames}` }) }), jsx$1(Thumb, { className: `tw:block tw:h-sq-15 tw:w-sq-15 tw:rounded-full tw:bg-sq-theme-dark tw:active:bg-sq-theme-darker tw:focus:outline-none tw:focus-visible:outline-none tw:aria-disabled:bg-sq-dark-gray tw:dark:aria-disabled:bg-sq-dark-disabled-gray tw:transition tw:ease-in-out ${thumbExtraClassNames}`, "aria-disabled": disabled })] }));
 };
 
 var PROGRESS_NAME = "Progress";
@@ -28991,7 +28991,11 @@ const Carousel = ({ testId = 'carousel-id', activeIndex = 0, extraClassNames = '
             changeSlide(currentIndex + 1);
         }
     };
-    const springTransition = { type: 'spring', damping: 20, stiffness: 100 };
+    const springTransition = {
+        type: 'spring',
+        damping: 20,
+        stiffness: 100,
+    };
     const slideVariants = {
         initial: (direction) => ({
             x: direction > 0 ? '100%' : '-100%',