@health-samurai/react-components 0.0.0-alpha.1 → 0.0.0-alpha.3

package/src/shadcn/components/ui/tabs.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
+import { action } from "storybook/internal/actions";
 import { Button } from "#shadcn/components/ui/button";
 import {
 	Card,
@@ -12,6 +13,7 @@ import { Input } from "#shadcn/components/ui/input";
 import { Label } from "#shadcn/components/ui/label";
 import {
 	Tabs,
+	TabsAddButton,
 	TabsContent,
 	TabsList,
 	TabsTrigger,
@@ -90,3 +92,58 @@ export const Demo = {
 		</div>
 	),
 } satisfies Story;
+
+function BrowserTabOnClose(value: string) {
+	action("onClose")(value);
+}
+
+function BrowserTabOnClick() {
+	action("onClick")();
+}
+
+function BrowserTabOnAdd() {
+	action("onAdd")();
+}
+
+export const Browser = {
+	parameters: {
+		layout: "fullscreen",
+	},
+	render: () => (
+		<Tabs defaultValue="first" variant="browser">
+			<TabsList>
+				<TabsTrigger
+					value="first"
+					onClick={BrowserTabOnClick}
+					onClose={BrowserTabOnClose}
+				>
+					<span className="flex items-center gap-1">
+						<span className="text-utility-green">GET</span>
+						<span>/fhir/Patient</span>
+					</span>
+				</TabsTrigger>
+				<TabsTrigger
+					value="second"
+					onClick={BrowserTabOnClick}
+					onClose={BrowserTabOnClose}
+				>
+					<span className="flex items-center gap-1">
+						<span className="text-utility-yellow">POST</span>
+						<span>/fhir</span>
+					</span>
+				</TabsTrigger>
+				<TabsTrigger
+					value="third"
+					onClick={BrowserTabOnClick}
+					onClose={BrowserTabOnClose}
+				>
+					<span className="flex items-center gap-1">
+						<span className="text-utility-yellow">POST</span>
+						<span>/$graphql</span>
+					</span>
+				</TabsTrigger>
+			</TabsList>
+			<TabsAddButton onClick={BrowserTabOnAdd} />
+		</Tabs>
+	),
+} satisfies Story;

package/src/shadcn/components/ui/tabs.tsx

@@ -1,47 +1,73 @@
+"use client";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Plus, X } from "lucide-react";
 import type * as React from "react";
 import { cn } from "#shadcn/lib/utils";
+import { Button } from "./button";
+
+const tabsVariants = cva("", {
+	variants: {
+		variant: {
+			browser: cn(
+				// Tabs
+				`flex-row 
+				 items-center
+				 h-10
+				 `,
+				// TabsList
+				`**:data-[slot=tabs-list]:overflow-x-auto
+				 **:data-[slot=tabs-list]:divide-x`,
+				// TabsTrigger
+				`**:data-[slot=tabs-trigger]:max-w-80 
+				 **:data-[slot=tabs-trigger]:min-w-40
+				 **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-1
+				 **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-border-secondary
+				 **:data-[slot=tabs-trigger]:data-[state=inactive]:pt-[9px]
+				 `, // TODO: Try to implement this without using pt-[9px].
+			),
+		},
+	},
+});
 
 function Tabs({
 	className,
+	variant,
 	...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+}: React.ComponentProps<typeof TabsPrimitive.Root> &
+	VariantProps<typeof tabsVariants>) {
 	return (
 		<TabsPrimitive.Root
 			data-slot="tabs"
-			className={cn("flex flex-col", className)}
+			className={cn("flex flex-col", tabsVariants({ variant }), className)}
 			{...props}
 		/>
 	);
 }
 
-const tabListVariants = cva("", {
-	variants: {
-		variant: {
-			button: "",
-			dashed: "",
-		},
-	},
-	defaultVariants: {
-		variant: "dashed",
-	},
-});
+export function TabsAddButton(props: React.ComponentProps<typeof Button>) {
+	return (
+		<div className="grow h-full bg-bg-secondary border-l border-b">
+			<Button
+				data-slot="tabs-add-button"
+				variant="link"
+				className="h-full"
+				{...props}
+			>
+				<Plus />
+			</Button>
+		</div>
+	);
+}
 
 function TabsList({
 	className,
-	variant,
 	...props
-}: React.ComponentProps<typeof TabsPrimitive.List> &
-	VariantProps<typeof tabListVariants>) {
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
 	return (
 		<TabsPrimitive.List
 			data-slot="tabs-list"
-			className={cn(
-				tabListVariants({ variant }),
-				"inline-flex w-fit items-center",
-				className,
-			)}
+			className={cn("inline-flex w-fit items-center", className)}
 			{...props}
 		/>
 	);
@@ -49,22 +75,47 @@ function TabsList({
 
 function TabsTrigger({
 	className,
+	onClose,
 	...props
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+}: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
+	onClose?: (value: string) => void;
+}) {
 	return (
 		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
 			className={cn(
-				"h-10 typo-label px-3 py-2 cursor-pointer text-text-tertiary data-[state=active]:text-text-primary border-b-2",
-				"data-[state=active]:border-border-brand border-transparent hover:text-text-tertiary-hover focus-visible:border-ring",
+				"group/tabs-trigger",
+				"box-border h-10 typo-body px-3 pb-2 pt-2.5 cursor-pointer text-text-tertiary data-[state=active]:text-text-primary",
+				"data-[state=active]:border-b-border-brand border-b-2 border-b-transparent hover:text-text-tertiary-hover focus-visible:border-ring",
 				"focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:text-muted-foreground",
-				"inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow,border]",
+				"inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow]",
 				"focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50",
 				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"hover:bg-bg-secondary/60",
+				onClose ? "justify-between" : "",
 				className,
 			)}
 			{...props}
-		/>
+		>
+			{props.children}
+
+			{onClose && (
+				<Button
+					onClick={(event) => {
+						event.stopPropagation();
+						onClose(props.value);
+					}}
+					variant="link"
+					size="small"
+					className="p-0 ml-2"
+					asChild
+				>
+					<span>
+						<X />
+					</span>
+				</Button>
+			)}
+		</TabsPrimitive.Trigger>
 	);
 }
 

package/src/shadcn/components/ui/tooltip.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import type * as React from "react";