@rovula/ui 0.0.65 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -82,6 +82,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-portal": "^1.1.3",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",

package/src/components/Dropdown/Dropdown.tsx

@@ -82,7 +82,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       error = false,
       filterMode = false,
       required = true,
-      modal = true,
+      modal = false,
       onChangeText,
       onSelect,
       renderOptions: customRenderOptions,
@@ -158,6 +158,8 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       );
     }, [options, filterMode, textValue]);
 
+    const usePortal = isInsideDialog ? false : modal;
+
     const updateDropdownPosition = useCallback(() => {
       if (inputRef.current && dropdownRef.current) {
         const rect = inputRef.current.getBoundingClientRect();
@@ -169,8 +171,6 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
         setIsAbove(shouldOpenAbove);
 
-        const usePortal = isInsideDialog ? false : modal;
-
         if (usePortal) {
           setDropdownStyles({
             position: "absolute",
@@ -179,7 +179,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
               : `${rect.bottom}px`,
             left: `${rect.left}px`,
             width: `${rect.width}px`,
-            zIndex: 9999, // Ensure it's above everything
+            zIndex: 9999,
           });
         } else {
           setDropdownStyles({
@@ -187,22 +187,20 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             top: shouldOpenAbove ? `-${dropdownHeight}px` : "100%",
             left: "0",
             width: "100%",
-            zIndex: 10,
+            zIndex: 9999,
           });
         }
       }
-    }, [modal, isInsideDialog]);
+    }, [modal, isInsideDialog, usePortal]);
 
     useEffect(() => {
       if (isFocused) {
         updateDropdownPosition();
         window.addEventListener("resize", updateDropdownPosition);
-        window.addEventListener("scroll", updateDropdownPosition, true);
       }
 
       return () => {
         window.removeEventListener("resize", updateDropdownPosition);
-        window.removeEventListener("scroll", updateDropdownPosition, true);
       };
     }, [isFocused, updateDropdownPosition]);
 
@@ -221,7 +219,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         <ul
           className={cn(
             "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-[9999] max-h-60 overflow-y-auto",
-            isAbove ? "bottom-full mb-1" : "top-full mt-1",
+            !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"),
             optionContainerClassName
           )}
           style={dropdownStyles}
@@ -337,7 +335,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     );
 
     return (
-      <div className={`relative ${fullwidth ? "w-full" : ""}`}>
+      <div className={`relative  ${fullwidth ? "w-full" : ""}`}>
         <TextInput
           hasClearIcon={false}
           endIcon={
@@ -372,7 +370,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           onKeyDown={handleOnKeyDown}
         />
         {isFocused &&
-          ((isInsideDialog ? false : modal) ? (
+          (usePortal ? (
             <Portal.Root container={document.body}>
               {renderOptions()}
             </Portal.Root>

package/src/components/Tabs/Tabs.stories.tsx

@@ -314,3 +314,41 @@ export const Controller = {
     );
   },
 } satisfies StoryObj;
+
+export const CustomClassname = {
+  args: {
+    initialTab: 0,
+    tabs: tabs.map((tab, i) => ({
+      ...tab,
+      disabled: i !== 0,
+      activeClassName: "text-green-500",
+      // className: "text-red-500",
+      disableClassName: i === 1 && "text-pink-200",
+      activeDisableClassName: "text-red-500",
+    })),
+  },
+  render: (args) => {
+    const props: any = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-row gap-4">
+        <Tabs
+          tabs={tabs}
+          {...props}
+          tabButtonDisableClassName="text-red-500"
+          tabButtonActiveDisableClassName="text-blue-500"
+          tabBarContainerClassName="border-red-500"
+        />
+        <Tabs
+          tabs={tabs}
+          {...props}
+          disabled
+          tabButtonDisableClassName="text-red-500"
+          tabButtonActiveDisableClassName="text-blue-500"
+          tabBarContainerClassName="border-blue-500"
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Tabs/Tabs.tsx

@@ -13,6 +13,10 @@ type Tab = {
   content: React.ReactNode;
   disabled?: boolean;
   isLoading?: boolean;
+  activeClassName?: string;
+  disableClassName?: string;
+  activeDisableClassName?: string;
+  className?: string;
 };
 
 type TabsProps = {
@@ -30,6 +34,8 @@ type TabsProps = {
   tabBarWrapperClassName?: string;
   tabButtonClassName?: string;
   tabButtonActiveClassName?: string;
+  tabButtonActiveDisableClassName?: string;
+  tabButtonDisableClassName?: string;
   tabContentClassName?: string;
   addTabButtonWrapperClassName?: string;
   borderSliderClassName?: string;
@@ -58,6 +64,8 @@ const Tabs: React.FC<TabsProps> = ({
   tabBarWrapperClassName,
   tabButtonClassName,
   tabButtonActiveClassName,
+  tabButtonActiveDisableClassName,
+  tabButtonDisableClassName,
   tabContentClassName,
   addTabButtonWrapperClassName,
   borderSliderClassName,
@@ -132,12 +140,15 @@ const Tabs: React.FC<TabsProps> = ({
   return (
     <div className={cn("w-full", className)}>
       <div
-        className={cn(" relative flex flex-row w-full", {
-          [`border-b-[1px] border-base-stroke`]: enableBorderLine,
-          "border-state-disable-outline": disabled,
-          "flex-1": tabMode === "justify",
-          tabBarContainerClassName,
-        })}
+        className={cn(
+          " relative flex flex-row w-full",
+          {
+            [`border-b-[1px] border-base-stroke`]: enableBorderLine,
+            "border-state-disable-outline": disabled,
+            "flex-1": tabMode === "justify",
+          },
+          tabBarContainerClassName
+        )}
       >
         {leftAction}
         <div
@@ -178,12 +189,23 @@ const Tabs: React.FC<TabsProps> = ({
                     "text-foreground": index === activeTab,
                     "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark":
                       index !== activeTab,
+                    // -- disabled
                     "text-state-disable-solid pointer-events-none":
                       disabled || tab.disabled,
+                    [tab.disableClassName ?? tabButtonDisableClassName ?? ""]:
+                      disabled || tab.disabled,
+                    // --
                     "text-state-disable-outline":
-                      (index === activeTab && disabled) || tab.disabled,
-                    [tabButtonClassName ?? ""]: true,
-                    [tabButtonActiveClassName ?? ""]: index === activeTab,
+                      index === activeTab && (disabled || tab.disabled),
+                    // -- active disabled --
+                    [tab.activeDisableClassName ??
+                    tabButtonActiveDisableClassName ??
+                    ""]: index === activeTab && (disabled || tab.disabled),
+                    // -- class name
+                    [tab.className ?? tabButtonClassName ?? ""]: true,
+                    // -- active --
+                    [tab.activeClassName ?? tabButtonActiveClassName ?? ""]:
+                      index === activeTab,
                     "flex-1": tabMode === "justify",
                   }
                 )}

package/dist/theme/global.css

@@ -1,30 +0,0 @@
-
-@import "./tokens/baseline.css";
-@import "./themes/xspector/baseline.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  * {
-    /* @apply border-border; */
-  }
-  body {
-    /* @apply bg-background text-foreground; */
-    /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
-  }
-
-  /* hide input number arrow */
-  /* Chrome, Safari, Edge, Opera */
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  input[type=number] {
-    -moz-appearance: textfield;
-  }
-}

package/dist/theme/main-preset.js

@@ -1,283 +0,0 @@
-const { fontFamily } = require("tailwindcss/defaultTheme");
-
-module.exports = {
-  darkMode: "class",
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      fontSize: {
-        h1: [
-          "var(--h1-size, 64px)",
-          {
-            lineHeight: "var(--h1-line-height, 80px)",
-            fontWeight: "var(--h1-weight, 700)",
-            fontFamily: "var(--h1-family, 'Poppins')",
-          },
-        ],
-        h2: [
-          "var(--h2-size, 48px)",
-          {
-            lineHeight: "var(--h2-line-height, 60px)",
-            fontWeight: "var(--h2-weight, 700)",
-            fontFamily: "var(--h2-family, 'Poppins')",
-          },
-        ],
-        h3: [
-          "var(--h3-size, 32px)",
-          {
-            lineHeight: "var(--h3-line-height, 48px)",
-            fontWeight: "var(--h3-weight, 700)",
-            fontFamily: "var(--h3-family, 'Poppins')",
-          },
-        ],
-        h4: [
-          "var(--h4-size, 24px)",
-          {
-            lineHeight: "var(--h4-line-height, 32px)",
-            fontWeight: "var(--h4-weight, 700)",
-            fontFamily: "var(--h4-family, 'Poppins')",
-          },
-        ],
-        h5: [
-          "var(--h5-size, 20px)",
-          {
-            lineHeight: "var(--h5-line-height, 28px)",
-            fontWeight: "var(--h5-weight, 700)",
-            fontFamily: "var(--h5-family, 'Poppins')",
-          },
-        ],
-        h6: [
-          "var(--h6-size, 18px)",
-          {
-            lineHeight: "var(--h6-line-height, 24px)",
-            fontWeight: "var(--h6-weight, 700)",
-            fontFamily: "var(--h6-family, 'Poppins')",
-          },
-        ],
-        subtitile1: [
-          "var(--subtitle1-size, 16px)",
-          {
-            lineHeight: "var(--subtitle1-line-height, 24px)",
-            fontWeight: "var(--subtitle1-weight, 400)",
-            fontFamily: "var(--subtitle1-family, 'Poppins')",
-          },
-        ],
-        subtitile2: [
-          "var(--subtitle2-size, 16px)",
-          {
-            lineHeight: "var(--subtitle2-line-height, 24px)",
-            fontWeight: "var(--subtitle2-weight, 500)",
-            fontFamily: "var(--subtitle2-family, 'Poppins')",
-          },
-        ],
-        subtitile3: [
-          "var(--subtitle3-size, 16px)",
-          {
-            lineHeight: "var(--subtitle3-line-height, 24px)",
-            fontWeight: "var(--subtitle3-weight, 600)",
-            fontFamily: "var(--subtitle3-family, 'Poppins')",
-          },
-        ],
-        subtitile4: [
-          "var(--subtitle4-size, 14px)",
-          {
-            lineHeight: "var(--subtitle4-line-height, 22px)",
-            fontWeight: "var(--subtitle4-weight, 400)",
-            fontFamily: "var(--subtitle4-family, 'Poppins')",
-          },
-        ],
-        subtitile5: [
-          "var(--subtitle5-size, 14px)",
-          {
-            lineHeight: "var(--subtitle5-line-height, 22px)",
-            fontWeight: "var(--subtitle5-weight, 500)",
-            fontFamily: "var(--subtitle5-family, 'Poppins')",
-          },
-        ],
-        subtitile6: [
-          "var(--subtitle6-size, 14px)",
-          {
-            lineHeight: "var(--subtitle6-line-height, 22px)",
-            fontWeight: "var(--subtitle6-weight, 600)",
-            fontFamily: "var(--subtitle6-family, 'Poppins')",
-          },
-        ],
-        body1: [
-          "var(--body1-size, 16px)",
-          {
-            lineHeight: "var(--body1-line-height, 20px)",
-            fontWeight: "var(--body1-weight, 400)",
-            fontFamily: "var(--body1-family, 'Poppins')",
-          },
-        ],
-        body2: [
-          "var(--body2-size, 16px)",
-          {
-            lineHeight: "var(--body2-line-height, 20px)",
-            fontWeight: "var(--body2-weight, 500)",
-            fontFamily: "var(--body2-family, 'Poppins')",
-          },
-        ],
-        body3: [
-          "var(--body3-size, 14px)",
-          {
-            lineHeight: "var(--body3-line-height, 18px)",
-            fontWeight: "var(--body3-weight, 400)",
-            fontFamily: "var(--body3-family, 'Poppins')",
-          },
-        ],
-        body4: [
-          "var(--body4-size, 14px)",
-          {
-            lineHeight: "var(--body4-line-height, 18px)",
-            fontWeight: "var(--body4-weight, 500)",
-            fontFamily: "var(--body4-family, 'Poppins')",
-          },
-        ],
-        small1: [
-          "var(--small1-size, 12px)",
-          {
-            lineHeight: "var(--small1-line-height, 14px)",
-            fontWeight: "var(--small1-weight, 400)",
-            fontFamily: "var(--small1-family, 'Poppins')",
-          },
-        ],
-        small2: [
-          "var(--small2-size, 12px)",
-          {
-            lineHeight: "var(--small2-line-height, 14px)",
-            fontWeight: "var(--small2-weight, 500)",
-            fontFamily: "var(--small2-family, 'Poppins')",
-          },
-        ],
-        small3: [
-          "var(--small3-size, 12px)",
-          {
-            lineHeight: "var(--small3-line-height, 14px)",
-            fontWeight: "var(--small3-weight, 600)",
-            fontFamily: "var(--small3-family, 'Poppins')",
-          },
-        ],
-        small4: [
-          "var(--small4-size, 10px)",
-          {
-            lineHeight: "var(--small4-line-height, 12px)",
-            fontWeight: "var(--small4-weight, 400)",
-            fontFamily: "var(--small4-family, 'Poppins')",
-          },
-        ],
-        small5: [
-          "var(--small5-size, 10px)",
-          {
-            lineHeight: "var(--small5-line-height, 12px)",
-            fontWeight: "var(--small5-weight, 500)",
-            fontFamily: "var(--small5-family, 'Poppins')",
-          },
-        ],
-        small6: [
-          "var(--small5-size, 10px)",
-          {
-            lineHeight: "var(--small6-line-height, 12px)",
-            fontWeight: "var(--small6-weight, 600)",
-            fontFamily: "var(--small6-family, 'Poppins')",
-          },
-        ],
-        small7: [
-          "var(--small7-size, 8px)",
-          {
-            lineHeight: "var(--small7-line-height, 10px)",
-            fontWeight: "var(--small7-weight, 600)",
-            fontFamily: "var(--small7-family, 'Poppins')",
-          },
-        ],
-        small8: [
-          "var(--small8-size, 8px)",
-          {
-            lineHeight: "var(--small8-line-height, 10px)",
-            fontWeight: "var(--small8-weight, 700)",
-            fontFamily: "var(--small8-family, 'Poppins')",
-          },
-        ],
-        small9: [
-          "var(--small9-size, 8px)",
-          {
-            lineHeight: "var(--small9-line-height, 10px)",
-            fontWeight: "var(--small9-weight, 400)",
-            fontFamily: "var(--small9-family, 'Poppins')",
-          },
-        ],
-        label1: [
-          "var(--label-label1-size, 12px)",
-          {
-            lineHeight: "var(--label-label1-line-height, 12px)",
-            fontWeight: "var(--label-label1-weight, 400)",
-            fontFamily: "var(--label-label1-family, 'Poppins')",
-          },
-        ],
-        label2: [
-          "var(--label-label2-size, 10px)",
-          {
-            lineHeight: "var(--label-label2-line-height, 10px)",
-            fontWeight: "var(--label-label2-weight, 400)",
-            fontFamily: "var(--label-label2-family, 'Poppins')",
-          },
-        ],
-        buttonL: [
-          "var(--button-button-l-size, 16px)",
-          {
-            lineHeight: "var(--button-button-l-line-height, 24px)",
-            fontWeight: "var(--button-button-l-weight, 700)",
-            fontFamily: "var(--button-button-l-family, 'Poppins')",
-          },
-        ],
-        buttonMS: [
-          "var(--button-button-ms-size, 14px)",
-          {
-            lineHeight: "var(--button-button-ms-line-height, 22px)",
-            fontWeight: "var(--button-button-ms-weight, 700)",
-            fontFamily: "var(--button-button-ms-family, 'Poppins')",
-          },
-        ],
-      },
-      borderRadius: {
-        xl: "var(--radius-radius-xl)",
-        lg: "var(--radius-radius-l)",
-        md: "var(--radius-radius-m)",
-        sm: "var(--radius-radius-s)",
-        xs: "var(--radius-radius-xs)",
-      },
-      spacing: {
-        xxs: "var(--spacing-spacing-xxs)",
-        xs: "var(--spacing-spacing-xs)",
-        sm: "var(--spacing-spacing-s)",
-        md: "var(--spacing-spacing-m)",
-        lg: "var(--spacing-spacing-l)",
-        xl: "var(--spacing-spacing-xl)",
-        xxl: "var(--spacing-spacing-xxl)",
-        xxxl: "var(--spacing-spacing-xxxl)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  presets: [require("./presets/colors"), require("tailwindcss-animate")],
-  plugins: [require("./plugins/utilities/typography")],
-};

package/dist/theme/plugins/utilities/typography.js

@@ -1,93 +0,0 @@
-const plugin = require("tailwindcss/plugin");
-
-module.exports = plugin(function ({ addUtilities }) {
-  addUtilities({
-    ".typography-h1": {
-      "@apply text-h1": {},
-    },
-    ".typography-h2": {
-      "@apply text-h2": {},
-    },
-    ".typography-h3": {
-      "@apply text-h3": {},
-    },
-    ".typography-h4": {
-      "@apply text-h4": {},
-    },
-    ".typography-h5": {
-      "@apply text-h5": {},
-    },
-    ".typography-h6": {
-      "@apply text-h6": {},
-    },
-    ".typography-subtitile1": {
-      "@apply text-subtitile1": {},
-    },
-    ".typography-subtitile2": {
-      "@apply text-subtitile2": {},
-    },
-    ".typography-subtitile3": {
-      "@apply text-subtitile3": {},
-    },
-    ".typography-subtitile4": {
-      "@apply text-subtitile4": {},
-    },
-    ".typography-subtitile5": {
-      "@apply text-subtitile5": {},
-    },
-    ".typography-subtitile6": {
-      "@apply text-subtitile6": {},
-    },
-    ".typography-body1": {
-      "@apply text-body1": {},
-    },
-    ".typography-body2": {
-      "@apply text-body2": {},
-    },
-    ".typography-body3": {
-      "@apply text-body3": {},
-    },
-    ".typography-body4": {
-      "@apply text-body4": {},
-    },
-    ".typography-small1": {
-      "@apply text-small1": {},
-    },
-    ".typography-small2": {
-      "@apply text-small2": {},
-    },
-    ".typography-small3": {
-      "@apply text-small3": {},
-    },
-    ".typography-small4": {
-      "@apply text-small4": {},
-    },
-    ".typography-small5": {
-      "@apply text-small5": {},
-    },
-    ".typography-small6": {
-      "@apply text-small6": {},
-    },
-    ".typography-small7": {
-      "@apply text-small7": {},
-    },
-    ".typography-small8": {
-      "@apply text-small8": {},
-    },
-    ".typography-small9": {
-      "@apply text-small9": {},
-    },
-    ".typography-label1": {
-      "@apply text-label1": {},
-    },
-    ".typography-label2": {
-      "@apply text-label2": {},
-    },
-    ".typography-buttonL": {
-      "@apply text-buttonL": {},
-    },
-    ".typography-buttonMS": {
-      "@apply text-buttonMS": {},
-    },
-  });
-});