@seeqdev/qomponents 0.0.22 → 0.0.24

package/dist/index.js

@@ -94,7 +94,7 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
     }
     const iconPrefix = icon.startsWith('fc') ? 'fc' : 'fa';
     const style = type === 'color' && color ? { color } : {};
-    const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
+    const appliedClassNames = `${iconPrefix} ${icon} ${small ? 'fa-sm' : ''} ${large ? 'fa-lg' : ''} 
   ${colorClassesThemeLight[type]} ${colorClassesThemeDark[type]} ${onClick ? 'cursor-pointer' : ''} ${extraClassNames}`;
     const tooltipData = tooltip
         ? {
@@ -116,12 +116,13 @@ const Icon = ({ onClick, icon, type = 'theme', extraClassNames, id, large, small
 const Button = ({ onClick, label, variant = 'outline', type = 'button', size = 'sm', disabled, extraClassNames, id, testId, stopPropagation = true, tooltip, tooltipOptions, iconStyle = 'text', icon, iconColor, preventBlur = false, isHtmlTooltip = false, tooltipTestId, }) => {
     const baseClasses = 'tw-py-1 tw-px-2.5 tw-rounded-sm focus:tw-ring-0 disabled:tw-pointer-events-none';
     const baseClassesByVariant = {
-        'outline': 'tw-border-solid tw-border',
-        'theme': 'disabled:tw-opacity-50',
-        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50',
-        'theme-light': 'disabled:tw-opacity-50',
-        'no-border': '',
-        'warning': 'tw-bg-sq-warning-color',
+        'outline': 'disabled:tw-opacity-50 tw-border-solid tw-border',
+        'theme': 'disabled:tw-opacity-50 tw-border-solid tw-border',
+        'danger': 'tw-bg-sq-danger-color hover:tw-bg-sq-danger-color-hover disabled:tw-opacity-50 tw-border-solid tw-border ' +
+            'tw-border-sq-danger-color hover:tw-border-sq-danger-color-hover',
+        'theme-light': 'disabled:tw-opacity-50 tw-border-solid tw-border',
+        'no-border': 'disabled:tw-opacity-50',
+        'warning': 'tw-bg-sq-warning-color tw-border-solid tw-border tw-border-sq-warning-color',
     };
     const textClassesByVariantLightTheme = {
         'outline': 'tw-text-sq-text-color',
@@ -140,21 +141,24 @@ const Button = ({ onClick, label, variant = 'outline', type = 'button', size = '
         'warning': 'dark:tw-text-white',
     };
     const classesByVariantLightTheme = {
-        'outline': 'tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
+        'outline': 'tw-bg-white dark:tw-bg-sq-dark-background tw-border-sq-disabled-gray hover:tw-bg-sq-light-gray' +
             ' focus:tw-bg-sq-dark-gray active:tw-bg-sq-dark-gray focus:tw-border-sq-color-dark active:tw-border-sq-color-dark',
-        'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight',
+        'theme': 'tw-bg-sq-color-dark hover:tw-bg-sq-color-highlight tw-border-sq-color-dark' +
+            ' hover:tw-border-sq-color-highlight',
         'danger': '',
-        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link',
+        'theme-light': 'tw-bg-sq-icon hover:tw-bg-sq-link tw-border-sq-icon hover:tw-border-sq-link',
         'no-border': '',
-        'warning': 'tw-bg-sq-warning-color',
+        'warning': '',
     };
     const classesByVariantDarkTheme = {
         'outline': 'dark:tw-border-sq-dark-disabled-gray dark:hover:tw-bg-sq-highlight-color-dark' +
             ' dark:focus:tw-bg-sq-dark-gray dark:active:tw-bg-sq-dark-gray dark:focus:tw-border-sq-color-dark' +
             ' dark:active:tw-border-sq-color-dark',
-        'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight',
+        'theme': 'dark:tw-bg-sq-color-dark dark:hover:tw-bg-sq-color-highlight dark:tw-border-sq-color-dark' +
+            ' dark:hover:tw-border-sq-color-highlight',
         'danger': '',
-        'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark',
+        'theme-light': 'dark:tw-bg-sq-icon-dark dark:hover:tw-bg-sq-link-dark dark:tw-border-sq-icon-dark' +
+            ' dark:hover:tw-border-sq-link-dark',
         'no-border': '',
         'warning': '',
     };
@@ -304,13 +308,13 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     const arrowBaseClasses = "before:tw-content-[''] before:tw-absolute before:tw-border-8";
     const centerArrowVertically = 'before:tw-top-1/2 before:-tw-translate-y-1/2';
     const centerArrowHorizontally = 'before:tw-left-1/2 before:-tw-translate-x-1/2';
-    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
+    const arrowRight = `${arrowBaseClasses} ${centerArrowVertically} before:tw-right-[100%] before:tw-border-y-transparent 
   before:tw-border-l-transparent before:tw-border-r-black`;
-    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
+    const arrowLeft = `${arrowBaseClasses} ${centerArrowVertically} before:tw-left-[100%] before:tw-border-y-transparent
    before:tw-border-l-black before:tw-border-r-transparent`;
-    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
+    const arrowBottom = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-top-4 before:tw-border-b-black 
   before:tw-border-r-transparent before:tw-border-l-transparent before:tw-border-t-transparent`;
-    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
+    const arrowTop = `${arrowBaseClasses} ${centerArrowHorizontally} before:-tw-bottom-4 before:tw-border-b-transparent 
   before:tw-border-t-black before:tw-border-l-transparent before:tw-border-r-transparent`;
     const placements = {
         top: `-tw-top-2 -tw-translate-y-full tw-left-1/2 -tw-translate-x-1/2 ${arrowTop}`,
@@ -320,7 +324,7 @@ const Tooltip = ({ position = 'bottom', children, text, delay = DEFAULT_TOOL_TIP
     };
     return (React.createElement("div", { className: "tw-group tw-relative tw-inline-block" },
         children,
-        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
+        React.createElement("div", { className: `tw-z-50 tw-whitespace-nowrap tw-hidden group-hover:tw-inline-block group-hover:tw-delay-[${delay}ms] 
         tw-absolute tw-opacity-0 group-hover:tw-opacity-100 tw-rounded tw-bg-black tw-p-2 tw-text-xs tw-text-white ${placements[position]}` }, text)));
 };