@sikka/hawa 0.27.24-next → 0.28.0

package/dist/elements/index.js

@@ -3826,31 +3826,100 @@ var SortButton = (props) => {
 // elements/tabs/Tabs.tsx
 var React31 = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
-var TabsContext = React31.createContext({ orientation: "vertical" });
-var Tabs = React31.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React31.createElement(
-    TabsPrimitive.Root,
+var import_tailwind_variants = require("tailwind-variants");
+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__ */ React31.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 = React31.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React31.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React31.createElement(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React31.useContext(TabsContext);
+  const { orientation, variant } = React31.useContext(TabsContext);
   return /* @__PURE__ */ React31.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
       ),
@@ -3860,14 +3929,12 @@ var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React31.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React31.useContext(TabsContext);
   return /* @__PURE__ */ React31.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.mjs

@@ -28,7 +28,7 @@ import {
   TabsTrigger,
   Textarea,
   UncheckMark
-} from "../chunk-3ZURZ4TW.mjs";
+} from "../chunk-Y3HUZNCH.mjs";
 import {
   Sheet,
   SheetClose,

package/dist/index.css

@@ -2024,6 +2024,14 @@ input[type="number"]::-webkit-inner-spin-button,
   border-bottom-right-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
 }
+.hawa-rounded-b-none {
+  border-bottom-right-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.hawa-rounded-e-none {
+  border-start-end-radius: 0px;
+  border-end-end-radius: 0px;
+}
 .hawa-rounded-l {
   border-top-left-radius: var(--radius);
   border-bottom-left-radius: var(--radius);
@@ -2085,6 +2093,12 @@ input[type="number"]::-webkit-inner-spin-button,
 .hawa-border-b-2 {
   border-bottom-width: 2px;
 }
+.hawa-border-e {
+  border-inline-end-width: 1px;
+}
+.hawa-border-e-2 {
+  border-inline-end-width: 2px;
+}
 .hawa-border-l {
   border-left-width: 1px;
 }
@@ -2141,9 +2155,15 @@ input[type="number"]::-webkit-inner-spin-button,
   border-left-color: transparent;
   border-right-color: transparent;
 }
+.hawa-border-b-primary {
+  border-bottom-color: hsl(var(--primary));
+}
 .hawa-border-b-transparent {
   border-bottom-color: transparent;
 }
+.hawa-border-e-primary {
+  border-inline-end-color: hsl(var(--primary));
+}
 .hawa-border-l-transparent {
   border-left-color: transparent;
 }
@@ -3571,6 +3591,12 @@ body {
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
 }
+.data-\[state\=active\]\:hawa-border-b-primary[data-state=active] {
+  border-bottom-color: hsl(var(--primary));
+}
+.data-\[state\=active\]\:hawa-border-e-primary[data-state=active] {
+  border-inline-end-color: hsl(var(--primary));
+}
 .data-\[active\]\:hawa-bg-accent\/50[data-active] {
   background-color: hsl(var(--accent) / 0.5);
 }

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -3893,31 +3893,100 @@ var SortButton = (props) => {
 // elements/tabs/Tabs.tsx
 var React31 = __toESM(require("react"));
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"));
-var TabsContext = React31.createContext({ orientation: "vertical" });
-var Tabs = React31.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React31.createElement(
-    TabsPrimitive.Root,
+var import_tailwind_variants = require("tailwind-variants");
+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__ */ React31.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 = React31.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React31.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React31.createElement(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React31.useContext(TabsContext);
+  const { orientation, variant } = React31.useContext(TabsContext);
   return /* @__PURE__ */ React31.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
       ),
@@ -3927,14 +3996,12 @@ var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React31.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React31.useContext(TabsContext);
   return /* @__PURE__ */ React31.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/index.mjs

@@ -3667,31 +3667,100 @@ var SortButton = (props) => {
 // elements/tabs/Tabs.tsx
 import * as React31 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-var TabsContext = React31.createContext({ orientation: "vertical" });
-var Tabs = React31.forwardRef(
-  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React31.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__ */ React31.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 = React31.createContext({ orientation: "horizontal", variant: "default" });
+var Tabs = React31.forwardRef(({ className, orientation, variant = "default", ...props }, ref) => /* @__PURE__ */ React31.createElement(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    ),
+    ...props
+  },
+  /* @__PURE__ */ React31.createElement(TabsContext.Provider, { value: { orientation, variant } }, props.children)
+));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
-  const { orientation } = React31.useContext(TabsContext);
+  const { orientation, variant } = React31.useContext(TabsContext);
   return /* @__PURE__ */ React31.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
       ),
@@ -3701,14 +3770,12 @@ var TabsList = React31.forwardRef(({ className, ...props }, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React31.forwardRef(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React31.useContext(TabsContext);
   return /* @__PURE__ */ React31.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/tabs/index.d.mts

@@ -20,8 +20,9 @@ type ChipTypes = React__default.HTMLAttributes<HTMLSpanElement> & {
     radius?: RadiusType;
 };
 
+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/tabs/index.d.ts

@@ -20,8 +20,9 @@ type ChipTypes = React__default.HTMLAttributes<HTMLSpanElement> & {
     radius?: RadiusType;
 };
 
+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"> & {