@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.5

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

@@ -1,10 +1,89 @@
 "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 {
+	ChevronDownIcon,
+	ChevronLeft,
+	ChevronRight,
+	Plus,
+	X,
+} from "lucide-react";
+import * as React from "react";
 import { cn } from "#shadcn/lib/utils";
 import { Button } from "./button";
+import {
+	Command,
+	CommandEmpty,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+// Base tabs styles
+const baseTabsStyles = cn("flex", "flex-col", "h-full");
+
+// Tabs add button container styles
+const tabsAddButtonContainerStyles = cn(
+	"grow",
+	"h-full",
+	"bg-bg-secondary",
+	"border-l",
+	"border-b",
+);
+
+// Tabs list styles
+const tabsListStyles = cn(
+	"inline-flex",
+	"w-fit",
+	"items-center",
+	"no-scrollbar",
+);
+
+// Base tabs trigger styles
+const baseTabsTriggerStyles = cn(
+	// Layout & Sizing
+	"box-border",
+	"flex-1",
+	"h-10",
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"px-3",
+	"whitespace-nowrap",
+	// Spacing & Padding
+	"pb-2",
+	"pt-2.5",
+	// Typography
+	"typo-body",
+	// Colors & States
+	"cursor-pointer",
+	"text-text-tertiary",
+	"hover:bg-bg-secondary/60",
+	"hover:text-text-tertiary_hover",
+	"data-[state=active]:text-text-primary",
+	"data-[state=active]:border-b-border-brand",
+	"disabled:opacity-50",
+	"disabled:pointer-events-none",
+	// Borders
+	"border-b-2",
+	"border-b-transparent",
+	// Focus & Accessibility
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	"focus-visible:outline-1",
+	// Transitions
+	"transition-[color,box-shadow]",
+	// Icons
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+	// Groups
+	"group/tabs-trigger",
+);
+
+// Tabs content styles
+const tabsContentStyles = cn("grow", "outline-none", "overflow-auto");
 
 const tabsVariants = cva("", {
 	variants: {
@@ -20,6 +99,7 @@ const tabsVariants = cva("", {
 				 **:data-[slot=tabs-list]:divide-x`,
 				// TabsTrigger
 				`**:data-[slot=tabs-trigger]:max-w-80 
+				 **:data-[slot=tabs-trigger]:w-60
 				 **: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
@@ -39,7 +119,7 @@ function Tabs({
 	return (
 		<TabsPrimitive.Root
 			data-slot="tabs"
-			className={cn("flex flex-col", tabsVariants({ variant }), className)}
+			className={cn(baseTabsStyles, tabsVariants({ variant }), className)}
 			{...props}
 		/>
 	);
@@ -47,7 +127,7 @@ function Tabs({
 
 export function TabsAddButton(props: React.ComponentProps<typeof Button>) {
 	return (
-		<div className="grow h-full bg-bg-secondary border-l border-b">
+		<div className={tabsAddButtonContainerStyles}>
 			<Button
 				data-slot="tabs-add-button"
 				variant="link"
@@ -60,19 +140,384 @@ export function TabsAddButton(props: React.ComponentProps<typeof Button>) {
 	);
 }
 
+const horizontalScroll = (event: React.WheelEvent) => {
+	const mode = event.deltaMode;
+	let deltaPx = 0;
+
+	if (mode === 0) {
+		deltaPx = event.deltaY;
+	} else if (mode === 1) {
+		deltaPx = event.deltaY * 160;
+	} else if (mode === 2) {
+		deltaPx = event.currentTarget.clientWidth;
+	}
+
+	const newScrollLeft = event.currentTarget.scrollLeft + deltaPx;
+
+	event.currentTarget.scrollTo({
+		left: newScrollLeft,
+		behavior: "smooth",
+	});
+};
+
+const performHorizontalScroll = (
+	tabsListRef: React.RefObject<HTMLDivElement | null>,
+	direction: "left" | "right",
+) => {
+	if (!tabsListRef.current) return;
+	const scrollAmount = 160;
+	let newScrollLeft = tabsListRef.current.scrollLeft;
+
+	if (direction === "left") {
+		newScrollLeft -= scrollAmount;
+		newScrollLeft -= newScrollLeft % scrollAmount;
+	} else {
+		newScrollLeft += scrollAmount;
+
+		const rightCoord = newScrollLeft + tabsListRef.current.clientWidth;
+
+		if (rightCoord % scrollAmount !== 0) {
+			newScrollLeft += scrollAmount - (rightCoord % scrollAmount);
+		}
+	}
+
+	tabsListRef.current.scrollTo({
+		left: newScrollLeft,
+		behavior: "smooth",
+	});
+};
+
+type EdgeScrollPosition = "touch" | "depart";
+type FlowType = "overflow" | "underflow";
+
+type TabsListProps = {
+	onLeftEdge?: (position: EdgeScrollPosition) => void;
+	onRightEdge?: (position: EdgeScrollPosition) => void;
+	onFlow?: (flow: FlowType) => void;
+	onResize?: (entries: ResizeObserverEntry[]) => void;
+	onTabChange?: (mutationRecords: MutationRecord[]) => void;
+} & React.ComponentProps<typeof TabsPrimitive.List>;
+
 function TabsList({
 	className,
+	onLeftEdge,
+	onRightEdge,
+	onResize,
+	onFlow,
+	onTabChange,
 	...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: TabsListProps) {
+	const tabListRef = React.useRef<HTMLDivElement | null>(null);
+
+	const onLeftEdgeRef = React.useRef(onLeftEdge);
+	React.useEffect(() => {
+		onLeftEdgeRef.current = onLeftEdge;
+	}, [onLeftEdge]);
+
+	const onResizeRef = React.useRef(onResize);
+	React.useEffect(() => {
+		onResizeRef.current = onResize;
+	}, [onResize]);
+
+	const onRightEdgeRef = React.useRef(onRightEdge);
+	React.useEffect(() => {
+		onRightEdgeRef.current = onRightEdge;
+	}, [onRightEdge]);
+
+	const onFlowRef = React.useRef(onFlow);
+	React.useEffect(() => {
+		onFlowRef.current = onFlow;
+	}, [onFlow]);
+
+	const onTabChangeRef = React.useRef(onTabChange);
+	React.useEffect(() => {
+		onTabChangeRef.current = onTabChange;
+	}, [onTabChange]);
+
+	React.useEffect(() => {
+		if (tabListRef.current === null) {
+			return;
+		}
+		const tabList = tabListRef.current;
+
+		let last: {
+			scrollLeft: number;
+			scrollWidth: number;
+			clientWidth: number;
+		} | null = null;
+
+		const handleScroll = () => {
+			if (onLeftEdgeRef.current) {
+				const newState: EdgeScrollPosition =
+					tabList.scrollLeft < 1 ? "touch" : "depart";
+
+				if (last === null) {
+					onLeftEdgeRef.current(newState);
+				} else {
+					const lastState: EdgeScrollPosition =
+						last.scrollLeft < 1 ? "touch" : "depart";
+
+					if (lastState !== newState) {
+						onLeftEdgeRef.current(newState);
+					}
+				}
+			}
+
+			if (onRightEdgeRef.current) {
+				const newState: EdgeScrollPosition =
+					tabList.scrollWidth - tabList.clientWidth - tabList.scrollLeft < 1
+						? "touch"
+						: "depart";
+
+				if (last === null) {
+					onRightEdgeRef.current(newState);
+				} else {
+					const lastState: EdgeScrollPosition =
+						last.scrollWidth - last.clientWidth - last.scrollLeft < 1
+							? "touch"
+							: "depart";
+
+					if (lastState !== newState) {
+						onRightEdgeRef.current(newState);
+					}
+				}
+			}
+
+			if (onFlowRef.current) {
+				const newState: FlowType =
+					tabList.scrollWidth > tabList.clientWidth ? "overflow" : "underflow";
+
+				if (last === null) {
+					onFlowRef.current(newState);
+				} else {
+					const lastState =
+						last.scrollWidth > last.clientWidth ? "overflow" : "underflow";
+					if (lastState !== newState) {
+						onFlowRef.current(newState);
+					}
+				}
+			}
+
+			last = {
+				scrollLeft: tabList.scrollLeft,
+				scrollWidth: tabList.scrollWidth,
+				clientWidth: tabList.clientWidth,
+			};
+		};
+
+		const scrollCallback = (_ev: unknown) => handleScroll();
+		const resizeObserver = new ResizeObserver((entries) => {
+			handleScroll();
+			if (onResizeRef.current) {
+				onResizeRef.current(entries);
+			}
+		});
+		const mutationObserver = new MutationObserver((mutationRecords) => {
+			handleScroll();
+			if (onTabChangeRef.current) {
+				onTabChangeRef.current(mutationRecords);
+			}
+		});
+
+		tabList.addEventListener("scroll", scrollCallback, { passive: true });
+		resizeObserver.observe(tabList);
+		mutationObserver.observe(tabList, { childList: true });
+
+		return () => {
+			tabList.removeEventListener("scroll", scrollCallback);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+		};
+	}, []);
+
 	return (
 		<TabsPrimitive.List
 			data-slot="tabs-list"
 			className={cn("inline-flex w-fit items-center", className)}
 			{...props}
+			ref={(element) => {
+				tabListRef.current = element;
+				if (props.ref !== undefined && props.ref !== null) {
+					if (typeof props.ref === "function") {
+						props.ref(element);
+					} else {
+						props.ref.current = element;
+					}
+				}
+			}}
 		/>
 	);
 }
 
+type TabScrollButtonProps = {
+	disabled: boolean;
+	onClick: () => void;
+};
+
+function TabScrollLeftButton({
+	disabled,
+	onClick,
+}: TabScrollButtonProps): React.ReactElement {
+	return (
+		<Button
+			variant="link"
+			size="small"
+			disabled={disabled}
+			className="h-full border-r border-b bg-bg-secondary"
+			onClick={onClick}
+		>
+			<ChevronLeft />
+		</Button>
+	);
+}
+
+function TabScrollRightButton({
+	disabled,
+	onClick,
+}: TabScrollButtonProps): React.ReactElement {
+	return (
+		<Button
+			variant="link"
+			size="small"
+			disabled={disabled}
+			className="h-full border-l border-b bg-bg-secondary"
+			onClick={onClick}
+		>
+			<ChevronRight />
+		</Button>
+	);
+}
+
+function TabsBrowserList({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+	const tabsListRef = React.useRef<HTMLDivElement | null>(null);
+
+	const [showScrollButtons, setShowScrollButtons] = React.useState(false);
+	const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+	const [canScrollRight, setCanScrollRight] = React.useState(false);
+
+	return (
+		<React.Fragment>
+			{showScrollButtons && (
+				<TabScrollLeftButton
+					disabled={!canScrollLeft}
+					onClick={() => performHorizontalScroll(tabsListRef, "left")}
+				/>
+			)}
+
+			<TabsList
+				onLeftEdge={(edgeState) => {
+					if (edgeState === "touch") {
+						setCanScrollLeft(false);
+					} else {
+						setCanScrollLeft(true);
+					}
+				}}
+				onRightEdge={(edgeState) => {
+					if (edgeState === "touch") {
+						setCanScrollRight(false);
+					} else {
+						setCanScrollRight(true);
+					}
+				}}
+				onFlow={(flow) => {
+					if (flow === "overflow") {
+						setShowScrollButtons(true);
+					} else {
+						setShowScrollButtons(false);
+					}
+				}}
+				onResize={() => {
+					tabsListRef.current
+						?.querySelector<HTMLButtonElement>('button[data-state="active"]')
+						?.scrollIntoView();
+				}}
+				onTabChange={(entries) => {
+					if (
+						entries.filter((entry) => entry.addedNodes.length !== 0).length !==
+						0
+					) {
+						tabsListRef.current
+							?.querySelector<HTMLButtonElement>('button[data-state="active"]')
+							?.scrollIntoView();
+					}
+				}}
+				data-slot="tabs-list"
+				className={cn(tabsListStyles, className)}
+				onWheel={(event) => horizontalScroll(event)}
+				{...props}
+				ref={tabsListRef}
+			>
+				{children}
+			</TabsList>
+
+			{showScrollButtons && (
+				<TabScrollRightButton
+					disabled={!canScrollRight}
+					onClick={() => performHorizontalScroll(tabsListRef, "right")}
+				/>
+			)}
+		</React.Fragment>
+	);
+}
+
+export function TabsListDropdown({
+	tabs,
+	handleTabSelect,
+	handleCloseTab,
+}: {
+	tabs: { id: string; content: React.ReactNode }[];
+	handleTabSelect?: (tabId: string) => void;
+	handleCloseTab?: (tabId: string) => void;
+}) {
+	const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+	return (
+		<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+			<PopoverTrigger asChild>
+				<Button variant="link" className="bg-bg-secondary h-full border-b pr-6">
+					<ChevronDownIcon className="size-4" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-80 p-0 mr-3" align="end">
+				<Command>
+					<CommandInput placeholder="Search tabs..." />
+					<CommandList>
+						<CommandEmpty>Not tabs found.</CommandEmpty>
+						{tabs.map((tab) => (
+							<CommandItem
+								key={tab.id}
+								onSelect={() => {
+									handleTabSelect?.(tab.id);
+									setIsMenuOpen(false);
+								}}
+								className="group flex items-center justify-between"
+							>
+								{tab.content}
+								{tabs.length > 1 && (
+									<Button
+										variant="ghost"
+										size="small"
+										className="opacity-0 group-hover:opacity-100 transition-opacity p-1 ml-2"
+										onClick={(e) => {
+											e.stopPropagation();
+											handleCloseTab?.(tab.id);
+										}}
+									>
+										<X className="size-3" />
+									</Button>
+								)}
+							</CommandItem>
+						))}
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
 function TabsTrigger({
 	className,
 	onClose,
@@ -84,15 +529,8 @@ function TabsTrigger({
 		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
 			className={cn(
-				"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]",
-				"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" : "",
+				baseTabsTriggerStyles,
+				onClose ? "justify-between" : "justify-start",
 				className,
 			)}
 			{...props}
@@ -107,7 +545,7 @@ function TabsTrigger({
 					}}
 					variant="link"
 					size="small"
-					className="p-0 ml-2"
+					className="p-0 ml-2 opacity-0 group-hover/tabs-trigger:opacity-100 transition-opacity"
 					asChild
 				>
 					<span>
@@ -126,10 +564,10 @@ function TabsContent({
 	return (
 		<TabsPrimitive.Content
 			data-slot="tabs-content"
-			className={cn("flex-1 outline-none", className)}
+			className={cn(tabsContentStyles, className)}
 			{...props}
 		/>
 	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsBrowserList };

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

@@ -2,14 +2,52 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Textarea styles
+const textareaStyles = cn(
+	// Layout
+	"flex",
+	"w-full",
+	"min-h-16",
+	"field-sizing-content",
+	// Shape
+	"rounded-md",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Background & Colors
+	"bg-transparent",
+	"text-base",
+	// Spacing
+	"px-3",
+	"py-2",
+	// Typography
+	"md:text-sm",
+	// Placeholder
+	"placeholder:text-text-tertiary",
+	// Transitions
+	"transition-[color,box-shadow]",
+	"outline-none",
+	// Hover
+	"hover:border-border-primary_hover",
+	// Focus
+	"focus-visible:border-border-link",
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Invalid
+	"aria-invalid:border-border-error",
+	"aria-invalid:ring-2",
+	"aria-invalid:ring-utility-red/70",
+	// Disabled
+	"disabled:cursor-not-allowed",
+	"disabled:opacity-50",
+	"disabled:border-border-disabled",
+);
+
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 	return (
 		<textarea
 			data-slot="textarea"
-			className={cn(
-				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-				className,
-			)}
+			className={cn(textareaStyles, className)}
 			{...props}
 		/>
 	);

package/src/shadcn/components/ui/toggle-group.tsx

@@ -5,6 +5,31 @@ import * as React from "react";
 import { toggleVariants } from "#shadcn/components/ui/toggle";
 import { cn } from "#shadcn/lib/utils";
 
+// Toggle group styles
+const toggleGroupStyles = cn(
+	"group/toggle-group",
+	"flex",
+	"w-fit",
+	"items-center",
+	"rounded-md",
+	"data-[variant=outline]:shadow-xs",
+);
+
+// Toggle group item styles
+const toggleGroupItemStyles = cn(
+	"min-w-0",
+	"flex-1",
+	"shrink-0",
+	"rounded-none",
+	"shadow-none",
+	"first:rounded-l-md",
+	"last:rounded-r-md",
+	"focus:z-10",
+	"focus-visible:z-10",
+	"data-[variant=outline]:border-l-0",
+	"data-[variant=outline]:first:border-l",
+);
+
 const ToggleGroupContext = React.createContext<
 	VariantProps<typeof toggleVariants>
 >({
@@ -25,10 +50,7 @@ function ToggleGroup({
 			data-slot="toggle-group"
 			data-variant={variant}
 			data-size={size}
-			className={cn(
-				"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-				className,
-			)}
+			className={cn(toggleGroupStyles, className)}
 			{...props}
 		>
 			<ToggleGroupContext.Provider value={{ variant, size }}>
@@ -58,7 +80,7 @@ function ToggleGroupItem({
 					variant: context.variant || variant,
 					size: context.size || size,
 				}),
-				"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+				toggleGroupItemStyles,
 				className,
 			)}
 			{...props}