@sikka/hawa 0.27.24-next → 0.28.0-next

package/dist/blocks/index.js

@@ -5294,6 +5294,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 // elements/tabs/Tabs.tsx
 var React35 = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
+var import_tailwind_variants = require("tailwind-variants");
 
 // elements/chip/Chip.tsx
 var import_react27 = __toESM(require("react"));
@@ -5377,31 +5378,99 @@ var Chip = import_react27.default.forwardRef(
 );
 
 // elements/tabs/Tabs.tsx
-var TabsContext = React35.createContext({ orientation: "vertical" });
-var Tabs = React35.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React35.createElement(
-    TabsPrimitive.Root,
+var tabsListVariant = (0, import_tailwind_variants.tv)({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
     {
-      ref,
-      className: cn(
-        "hawa-flex hawa-gap-2",
-        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-        className
-      ),
-      ...props
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-border-e-2 hawa-border-e-primary"
     },
-    /* @__PURE__ */ React35.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
-  )
-);
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-border-b-2 hawa-border-b-primary"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
+      underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+      underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined",
+      orientation: "horizontal",
+      class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
+    },
+    {
+      variant: "underlined",
+      orientation: "vertical",
+      class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-rounded-b-none"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-rounded-e-none"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+var TabsContext = React35.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React35.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React35.createElement(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React35.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React35.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React35.useContext(TabsContext);
+  const { orientation, variant } = React35.useContext(TabsContext);
   return /* @__PURE__ */ React35.createElement(
     TabsPrimitive.List,
     {
       ref,
       className: cn(
-        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+        tabsListVariant({ variant, orientation }),
         orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
         className
       ),
@@ -5411,14 +5480,12 @@ var TabsList = React35.forwardRef(({ className, ...props }, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React35.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React35.useContext(TabsContext);
   return /* @__PURE__ */ React35.createElement(
     TabsPrimitive.Trigger,
     {
       ref,
-      className: cn(
-        "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
-        className
-      ),
+      className: cn(tabsTriggerVariant({ variant, orientation }), className),
       ...props
     },
     props.children,

package/dist/blocks/index.mjs

@@ -26,7 +26,7 @@ import {
   UncheckMark,
   VeryBadEmoji,
   VeryGoodEmoji
-} from "../chunk-3ZURZ4TW.mjs";
+} from "../chunk-Y3HUZNCH.mjs";
 import {
   Button,
   Card,

package/dist/blocks/misc/index.js

@@ -97,6 +97,7 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 // elements/tabs/Tabs.tsx
 var React3 = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
+var import_tailwind_variants = require("tailwind-variants");
 
 // elements/chip/Chip.tsx
 var import_react = __toESM(require("react"));
@@ -180,31 +181,99 @@ var Chip = import_react.default.forwardRef(
 );
 
 // elements/tabs/Tabs.tsx
-var TabsContext = React3.createContext({ orientation: "vertical" });
-var Tabs = React3.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React3.createElement(
-    TabsPrimitive.Root,
+var tabsListVariant = (0, import_tailwind_variants.tv)({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
     {
-      ref,
-      className: cn(
-        "hawa-flex hawa-gap-2",
-        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-        className
-      ),
-      ...props
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-border-e-2 hawa-border-e-primary"
     },
-    /* @__PURE__ */ React3.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
-  )
-);
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-border-b-2 hawa-border-b-primary"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+var tabsTriggerVariant = (0, import_tailwind_variants.tv)({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
+      underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+      underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined",
+      orientation: "horizontal",
+      class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
+    },
+    {
+      variant: "underlined",
+      orientation: "vertical",
+      class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-rounded-b-none"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-rounded-e-none"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+var TabsContext = React3.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React3.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React3.createElement(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React3.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React3.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React3.useContext(TabsContext);
+  const { orientation, variant } = React3.useContext(TabsContext);
   return /* @__PURE__ */ React3.createElement(
     TabsPrimitive.List,
     {
       ref,
       className: cn(
-        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+        tabsListVariant({ variant, orientation }),
         orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
         className
       ),
@@ -214,14 +283,12 @@ var TabsList = React3.forwardRef(({ className, ...props }, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React3.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React3.useContext(TabsContext);
   return /* @__PURE__ */ React3.createElement(
     TabsPrimitive.Trigger,
     {
       ref,
-      className: cn(
-        "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
-        className
-      ),
+      className: cn(tabsTriggerVariant({ variant, orientation }), className),
       ...props
     },
     props.children,

package/dist/blocks/misc/index.mjs

@@ -29,31 +29,100 @@ import React2 from "react";
 // elements/tabs/Tabs.tsx
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-var TabsContext = React.createContext({ orientation: "vertical" });
-var Tabs = React.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React.createElement(
-    TabsPrimitive.Root,
+import { tv } from "tailwind-variants";
+var tabsListVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
     {
-      ref,
-      className: cn(
-        "hawa-flex hawa-gap-2",
-        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-        className
-      ),
-      ...props
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-border-e-2 hawa-border-e-primary"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-border-b-2 hawa-border-b-primary"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+var tabsTriggerVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
+      underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+      underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined",
+      orientation: "horizontal",
+      class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
+    },
+    {
+      variant: "underlined",
+      orientation: "vertical",
+      class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
     },
-    /* @__PURE__ */ React.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
-  )
-);
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-rounded-b-none"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-rounded-e-none"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+var TabsContext = React.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React.createElement(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React.useContext(TabsContext);
+  const { orientation, variant } = React.useContext(TabsContext);
   return /* @__PURE__ */ React.createElement(
     TabsPrimitive.List,
     {
       ref,
       className: cn(
-        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+        tabsListVariant({ variant, orientation }),
         orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
         className
       ),
@@ -63,14 +132,12 @@ var TabsList = React.forwardRef(({ className, ...props }, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React.useContext(TabsContext);
   return /* @__PURE__ */ React.createElement(
     TabsPrimitive.Trigger,
     {
       ref,
-      className: cn(
-        "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
-        className
-      ),
+      className: cn(tabsTriggerVariant({ variant, orientation }), className),
       ...props
     },
     props.children,

package/dist/{chunk-3ZURZ4TW.mjs → chunk-Y3HUZNCH.mjs}

@@ -2804,31 +2804,100 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 // elements/tabs/Tabs.tsx
 import * as React13 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-var TabsContext = React13.createContext({ orientation: "vertical" });
-var Tabs = React13.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React13.createElement(
-    TabsPrimitive.Root,
+import { tv } from "tailwind-variants";
+var tabsListVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs: "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
     {
-      ref,
-      className: cn(
-        "hawa-flex hawa-gap-2",
-        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-        className
-      ),
-      ...props
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-border-e-2 hawa-border-e-primary"
     },
-    /* @__PURE__ */ React13.createElement(TabsContext.Provider, { value: { orientation } }, props.children)
-  )
-);
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-border-b-2 hawa-border-b-primary"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+var tabsTriggerVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
+      underlined: "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+      underlined_tabs: "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined",
+      orientation: "horizontal",
+      class: "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
+    },
+    {
+      variant: "underlined",
+      orientation: "vertical",
+      class: "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-rounded-b-none"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-rounded-e-none"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+var TabsContext = React13.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React13.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React13.createElement(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React13.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React13.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React13.useContext(TabsContext);
+  const { orientation, variant } = React13.useContext(TabsContext);
   return /* @__PURE__ */ React13.createElement(
     TabsPrimitive.List,
     {
       ref,
       className: cn(
-        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+        tabsListVariant({ variant, orientation }),
         orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
         className
       ),
@@ -2838,14 +2907,12 @@ var TabsList = React13.forwardRef(({ className, ...props }, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React13.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React13.useContext(TabsContext);
   return /* @__PURE__ */ React13.createElement(
     TabsPrimitive.Trigger,
     {
       ref,
-      className: cn(
-        "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
-        className
-      ),
+      className: cn(tabsTriggerVariant({ variant, orientation }), className),
       ...props
     },
     props.children,

package/dist/elements/index.d.mts

@@ -454,8 +454,9 @@ type SortButtonProps = {
 };
 declare const SortButton: React__default.FC<SortButtonProps>;
 
+type TabsVariants = "default" | "underlined" | "underlined_tabs";
 declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    orientation?: "vertical" | "horizontal" | undefined;
+    variant?: TabsVariants | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {

package/dist/elements/index.d.ts

@@ -454,8 +454,9 @@ type SortButtonProps = {
 };
 declare const SortButton: React__default.FC<SortButtonProps>;
 
+type TabsVariants = "default" | "underlined" | "underlined_tabs";
 declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    orientation?: "vertical" | "horizontal" | undefined;
+    variant?: TabsVariants | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {