@rovula/ui 0.0.66 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.66",
+  "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/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": {},
-    },
-  });
-});

package/dist/theme/presets/colors.js

@@ -1,136 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-import {
-  generateColorConfig,
-  generateTransparentColorConfig,
-  withColorMixin,
-  generateButtonStyles,
-  generateActionButtonStyles,
-} from "../utils";
-
-const secondaryRange = [
-  "50",
-  "100",
-  "200",
-  "300",
-  "400",
-  "500",
-  "600",
-  "700",
-  "800",
-  "900",
-  "950",
-];
-
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        "text-black": withColorMixin("--text-black"),
-        "text-dark": withColorMixin("--text-dark"),
-        "text-medium": withColorMixin("--text-medium"),
-        "text-light": withColorMixin("--text-light"),
-        "text-grey-dark": withColorMixin("--text-grey-dark"),
-        "text-grey-medium": withColorMixin("--text-grey-medium"),
-        "text-grey-light": withColorMixin("--text-grey-light"),
-        "text-white": withColorMixin("--text-white"),
-
-        ...generateColorConfig("primary", "primary-ramps-primary"),
-        ...generateColorConfig("secondary", "secondary-ramps-secondary"),
-        ...generateColorConfig("tertiary", "tertiary-ramps-tertiary"),
-        ...generateColorConfig("grey", "grey-grey"),
-
-        ...generateColorConfig("grey2", "grey2-grey2", secondaryRange),
-        ...generateColorConfig("info", "info-info", secondaryRange),
-        ...generateColorConfig("success", "success-success", secondaryRange),
-        ...generateColorConfig("warning", "warning-warning", secondaryRange),
-        ...generateColorConfig("error", "error-error", secondaryRange),
-
-        ...generateTransparentColorConfig("primary", "main"),
-        ...generateTransparentColorConfig("secondary", "main"),
-        ...generateTransparentColorConfig("tertiary", "main"),
-        ...generateTransparentColorConfig("grey", "other"),
-        ...generateTransparentColorConfig("grey2", "other"),
-        ...generateTransparentColorConfig("info", "other"),
-        ...generateTransparentColorConfig("success", "other"),
-        ...generateTransparentColorConfig("warning", "other"),
-        ...generateTransparentColorConfig("error", "other"),
-        ...generateTransparentColorConfig("black", "other"),
-        ...generateTransparentColorConfig("white", "other"),
-
-        "state-disable-solid": withColorMixin("--state-color-disable-solid"),
-        "state-disable-outline": withColorMixin(
-          "--state-color-disable-outline"
-        ),
-
-        "input-default-text": withColorMixin("--input-color-default-text"),
-        "input-default-stroke": withColorMixin("--input-color-default-stroke"),
-        "input-filled-text": withColorMixin("--input-color-filled-text"),
-        "input-active-stroke": withColorMixin("--input-color-active-stroke"),
-        "input-disable-text": withColorMixin("--input-color-disable-text"),
-        "input-disable-stroke": withColorMixin("--input-color-disable-stroke"),
-        "input-disable-bg": withColorMixin("--input-color-disable-bg"),
-        "input-label-bg": withColorMixin("--input-color-label-bg"),
-        "input-error": withColorMixin("--input-color-error"),
-
-        "function-default-solid": withColorMixin("--function-default-solid"),
-        "function-default-hover": withColorMixin("--function-default-hover"),
-        "function-default-hover-bg": withColorMixin(
-          "--function-default-hover-bg"
-        ),
-        "function-default-stroke": withColorMixin("--function-default-stroke"),
-        "function-default-icon": withColorMixin("--function-default-icon"),
-        "function-default-outline": withColorMixin(
-          "--function-default-outline-icon"
-        ),
-        "function-active-solid": withColorMixin("--function-active-solid"),
-        "function-active-hover": withColorMixin("--function-active-hover"),
-        "function-active-hover-bg": withColorMixin(
-          "--function-active-hover-bg"
-        ),
-        "function-active-stroke": withColorMixin("--function-active-stroke"),
-        "function-active-icon": withColorMixin("--function-active-icon"),
-
-        "base-bg": withColorMixin("--base-color-bg"),
-        "base-bg2": withColorMixin("--base-color-bg2"),
-        "base-bg3": withColorMixin("--base-color-bg3"),
-        "base-popup": withColorMixin("--base-color-popup"),
-        "base-popup-highlight": withColorMixin("--base-color-popup-hightlight"),
-        "base-popup-curtain": withColorMixin("--base-color-popup-curtain"),
-        "base-popup-foreground": withColorMixin(
-          "--base-color-popup-foreground"
-        ),
-        "base-stroke": withColorMixin("--base-color-workspace-stroke"),
-        "base-workspace-stroke": withColorMixin(
-          "--base-color-workspace-stroke"
-        ),
-        "base-guideline-stroke": withColorMixin(
-          "--base-color-guideline-stroke"
-        ),
-
-        "common-white": withColorMixin("--common-white"),
-        "common-black": withColorMixin("--common-black"),
-
-        surface: withColorMixin("--surface"),
-        "surface-foreground": withColorMixin("--surface-foreground"),
-        background: withColorMixin("--background"),
-        foreground: withColorMixin("--foreground"),
-      },
-      borderColor: {
-        ...generateButtonStyles("border"),
-        ...generateActionButtonStyles("border"),
-      },
-      backgroundColor: {
-        ...generateButtonStyles("bg"),
-        ...generateActionButtonStyles("bg"),
-      },
-      textColor: {
-        ...generateButtonStyles("text"),
-        ...generateActionButtonStyles("text"),
-      },
-      fill: {
-        ...generateButtonStyles("text"),
-        ...generateActionButtonStyles("text"),
-      },
-    },
-  },
-};