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

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

@@ -477,35 +477,77 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 	);
 }
 
-const sidebarMenuButtonVariants = cva(
-	cn(
-		"typo-body text-text-secondary flex items-center gap-2 overflow-hidden rounded-lg py-2 px-[0.44rem] outline-hidden ",
-		"ring-sidebar-ring transition-all focus-visible:ring-2 active:bg-bg-quaternary disabled:pointer-events-none",
-		"disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-		"data-[active=true]:bg-bg-brand-secondary data-[active=true]:text-text-primary data-[state=open]:hover:bg-sidebar-accent",
-		"data-[state=open]:hover:text-sidebar-accent-foreground  group-data-[collapsible=icon]:py-2! group-data-[collapsible=icon]:px-[0.44rem]!",
-		"[&>span:last-child]:truncate [&>svg]:size-5 [&>svg]:shrink-0 hover:bg-bg-secondary hover:text-text-primary",
-		"data-[active=true]:[&>svg]:text-text-brand-primary w-full",
-	),
-	{
-		variants: {
-			variant: {
-				default: "",
-				outline:
-					"shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-			},
-			size: {
-				default: "",
-				sm: "",
-				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-			},
+// Base sidebar menu button styles
+const baseSidebarMenuButtonStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"gap-2",
+	"w-full",
+	"overflow-hidden",
+	// Shape
+	"rounded-lg",
+	// Spacing
+	"py-2",
+	"px-[0.44rem]",
+	// Typography
+	"typo-body",
+	"text-text-secondary",
+	// Interaction
+	"outline-hidden",
+	"transition-all",
+	"cursor-pointer",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Hover
+	"hover:bg-bg-secondary",
+	"hover:text-text-primary",
+	// Active
+	"active:bg-bg-quaternary",
+	"data-[active=true]:bg-bg-brand-secondary",
+	"data-[active=true]:text-text-primary",
+	"data-[active=true]:[&>svg]:text-text-brand-primary",
+	// Open state
+	"data-[state=open]:hover:bg-bg-secondary",
+	"data-[state=open]:hover:text-text-primary",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+	"aria-disabled:pointer-events-none",
+	"aria-disabled:opacity-50",
+	// Group styles
+	"group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+	"group-data-[collapsible=icon]:py-2!",
+	"group-data-[collapsible=icon]:px-[0.44rem]!",
+	// Content styles
+	"[&>span:last-child]:truncate",
+	"[&>svg]:size-5",
+	"[&>svg]:shrink-0",
+);
+
+const sidebarMenuButtonVariants = cva(baseSidebarMenuButtonStyles, {
+	variants: {
+		variant: {
+			default: cn(""),
+			outline: cn(
+				"shadow-[0_0_0_1px_hsl(var(--sidebar-border))]",
+				"hover:bg-bg-secondary",
+				"hover:text-text-primary",
+				"hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			),
 		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
+		size: {
+			default: cn(""),
+			sm: cn(""),
+			lg: cn("h-12", "text-sm", "group-data-[collapsible=icon]:p-0!"),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
 
 function SidebarMenuButton({
 	asChild = false,

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

@@ -1,10 +1,13 @@
 import { cn } from "#shadcn/lib/utils";
 
+// Skeleton styles
+const skeletonStyles = cn("bg-bg-tertiary", "animate-pulse", "rounded-md");
+
 function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="skeleton"
-			className={cn("bg-accent animate-pulse rounded-md", className)}
+			className={cn(skeletonStyles, className)}
 			{...props}
 		/>
 	);

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

@@ -4,6 +4,84 @@ import * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Slider root styles
+const sliderRootStyles = cn(
+	// Layout
+	"relative",
+	"flex",
+	"w-full",
+	"items-center",
+	// Interaction
+	"touch-none",
+	"select-none",
+	// Disabled
+	"data-[disabled]:opacity-50",
+	// Vertical orientation
+	"data-[orientation=vertical]:h-full",
+	"data-[orientation=vertical]:min-h-44",
+	"data-[orientation=vertical]:w-auto",
+	"data-[orientation=vertical]:flex-col",
+);
+
+// Slider track styles
+const sliderTrackStyles = cn(
+	// Background
+	"bg-bg-quaternary",
+	// Layout
+	"relative",
+	"grow",
+	"overflow-hidden",
+	// Shape
+	"rounded-full",
+	// Horizontal orientation
+	"data-[orientation=horizontal]:h-1.5",
+	"data-[orientation=horizontal]:w-full",
+	// Vertical orientation
+	"data-[orientation=vertical]:h-full",
+	"data-[orientation=vertical]:w-1.5",
+);
+
+// Slider range styles
+const sliderRangeStyles = cn(
+	// Background
+	"bg-bg-link",
+	// Layout
+	"absolute",
+	// Horizontal orientation
+	"data-[orientation=horizontal]:h-full",
+	// Vertical orientation
+	"data-[orientation=vertical]:w-full",
+);
+
+// Slider thumb styles
+const sliderThumbStyles = cn(
+	// Layout
+	"block",
+	"size-4",
+	"shrink-0",
+	// Shape
+	"rounded-full",
+	// Borders
+	"border",
+	"border-border-link",
+	// Background
+	"bg-bg-primary",
+	// Shadow
+	"shadow-sm",
+	// Transitions
+	"transition-[color,box-shadow]",
+	// Hover
+	"hover:ring-4",
+	"hover:ring-utility-blue/70",
+	// Focus
+	"focus-visible:ring-4",
+	"focus-visible:ring-utility-blue/70",
+	"focus-visible:outline-hidden",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+);
+
 function Slider({
 	className,
 	defaultValue,
@@ -29,23 +107,16 @@ function Slider({
 			{...(value !== undefined ? { value } : {})}
 			min={min}
 			max={max}
-			className={cn(
-				"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-				className,
-			)}
+			className={cn(sliderRootStyles, className)}
 			{...props}
 		>
 			<SliderPrimitive.Track
 				data-slot="slider-track"
-				className={cn(
-					"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
-				)}
+				className={sliderTrackStyles}
 			>
 				<SliderPrimitive.Range
 					data-slot="slider-range"
-					className={cn(
-						"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
-					)}
+					className={sliderRangeStyles}
 				/>
 			</SliderPrimitive.Track>
 			{Array.from({ length: _values.length }, (_, index) => (
@@ -53,7 +124,7 @@ function Slider({
 					data-slot="slider-thumb"
 					// biome-ignore lint/suspicious/noArrayIndexKey: FIXME: unchanged shadcn
 					key={index}
-					className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+					className={sliderThumbStyles}
 				/>
 			))}
 		</SliderPrimitive.Root>

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { toast } from "sonner";
 import { Button } from "#shadcn/components/ui/button";
+import { Toaster, toast } from "#shadcn/components/ui/sonner";
 
 const meta = {
 	title: "Component/Sonner",
@@ -11,19 +11,23 @@ type Story = StoryObj<typeof meta>;
 
 export const Demo = {
 	render: () => (
-		<Button
-			variant="secondary"
-			onClick={() =>
-				toast("Event has been created", {
-					description: "Sunday, December 03, 2023 at 9:00 AM",
-					action: {
-						label: "Undo",
-						onClick: () => console.log("Undo"),
-					},
-				})
-			}
-		>
-			Show Toast
-		</Button>
+		<div>
+			<Button
+				variant="secondary"
+				onClick={() =>
+					toast("Event has been created", {
+						description: "Sunday, December 03, 2023 at 9:00 AM",
+						action: {
+							label: "Undo",
+							variant: "primary",
+							onClick: () => console.log("Undo"),
+						},
+					})
+				}
+			>
+				Show Toast
+			</Button>
+			<Toaster position="top-center" />
+		</div>
 	),
 } satisfies Story;

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

@@ -1,12 +1,22 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
+import {
+	Toaster as Sonner,
+	toast as sonnerToast,
+	type ToasterProps,
+} from "sonner";
+import { Button, type buttonVariants } from "./button";
 
 const Toaster = ({ ...props }: ToasterProps) => {
 	const { theme = "system" } = useTheme();
 
 	return (
 		<Sonner
-			theme={theme as ToasterProps["theme"] & {}}
+			theme={
+				theme === "system" ? "system" : theme === "dark" ? "dark" : "light"
+			}
 			className="toaster group"
 			style={
 				{
@@ -20,4 +30,44 @@ const Toaster = ({ ...props }: ToasterProps) => {
 	);
 };
 
-export { Toaster };
+// Custom toast wrapper with our buttons
+const toast = (
+	message: string,
+	options?: {
+		description?: string;
+		action?: {
+			label: string;
+			onClick: () => void;
+			variant?: VariantProps<typeof buttonVariants>["variant"];
+		};
+		cancel?: {
+			label: string;
+			onClick: () => void;
+			variant?: VariantProps<typeof buttonVariants>["variant"];
+		};
+	},
+) => {
+	return sonnerToast(message, {
+		...options,
+		action: options?.action ? (
+			<Button
+				variant={options.action.variant || "secondary"}
+				size="small"
+				onClick={options.action.onClick}
+			>
+				{options.action.label}
+			</Button>
+		) : undefined,
+		cancel: options?.cancel ? (
+			<Button
+				variant={options.cancel.variant || "ghost"}
+				size="small"
+				onClick={options.cancel.onClick}
+			>
+				{options.cancel.label}
+			</Button>
+		) : undefined,
+	});
+};
+
+export { Toaster, toast };

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

@@ -4,6 +4,57 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Switch root styles
+const switchRootStyles = cn(
+	// Layout
+	"peer",
+	"inline-flex",
+	"items-center",
+	"shrink-0",
+	// Size
+	"h-[1.15rem]",
+	"w-8",
+	// Shape
+	"rounded-full",
+	"border",
+	"border-transparent",
+	// Interaction
+	"transition-all",
+	"outline-none",
+	"cursor-pointer",
+	// States
+	"data-[state=unchecked]:bg-bg-quaternary",
+	"data-[state=checked]:bg-bg-link",
+	"hover:data-[state=unchecked]:bg-bg-tertiary",
+	"hover:data-[state=checked]:bg-bg-link_hover",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Disabled
+	"disabled:cursor-not-allowed",
+	"disabled:opacity-50",
+	"disabled:data-[state=checked]:bg-bg-disabled",
+	"disabled:data-[state=unchecked]:bg-bg-disabled",
+);
+
+// Switch thumb styles
+const switchThumbStyles = cn(
+	// Layout
+	"pointer-events-none",
+	"block",
+	// Size
+	"size-4",
+	// Shape
+	"rounded-full",
+	"ring-0",
+	// Color
+	"bg-bg-primary",
+	// Animation
+	"transition-transform",
+	"data-[state=checked]:translate-x-[calc(100%-2px)]",
+	"data-[state=unchecked]:translate-x-0",
+);
+
 function Switch({
 	className,
 	...props
@@ -11,17 +62,12 @@ function Switch({
 	return (
 		<SwitchPrimitive.Root
 			data-slot="switch"
-			className={cn(
-				"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-				className,
-			)}
+			className={cn(switchRootStyles, className)}
 			{...props}
 		>
 			<SwitchPrimitive.Thumb
 				data-slot="switch-thumb"
-				className={cn(
-					"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
-				)}
+				className={switchThumbStyles}
 			/>
 		</SwitchPrimitive.Root>
 	);

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

@@ -2,15 +2,18 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Table container styles
+const tableContainerStyles = cn("relative", "w-full", "overflow-x-auto");
+
+// Table styles
+const tableStyles = cn("w-full", "caption-bottom", "text-sm");
+
 function Table({ className, ...props }: React.ComponentProps<"table">) {
 	return (
-		<div
-			data-slot="table-container"
-			className="relative w-full overflow-x-auto"
-		>
+		<div data-slot="table-container" className={tableContainerStyles}>
 			<table
 				data-slot="table"
-				className={cn("w-full caption-bottom text-sm", className)}
+				className={cn(tableStyles, className)}
 				{...props}
 			/>
 		</div>
@@ -21,7 +24,11 @@ function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
 	return (
 		<thead
 			data-slot="table-header"
-			className={cn("[&_tr]:border-b", className)}
+			className={cn(
+				"[&_tr]:border-b",
+				"[&_tr]:border-border-primary",
+				className,
+			)}
 			{...props}
 		/>
 	);
@@ -42,7 +49,11 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
 		<tfoot
 			data-slot="table-footer"
 			className={cn(
-				"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+				"bg-bg-tertiary/50",
+				"border-t",
+				"border-border-primary",
+				"font-medium",
+				"[&>tr]:last:border-b-0",
 				className,
 			)}
 			{...props}
@@ -55,7 +66,11 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
 		<tr
 			data-slot="table-row"
 			className={cn(
-				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				"hover:bg-bg-tertiary/50",
+				"data-[state=selected]:bg-bg-tertiary",
+				"border-b",
+				"border-border-primary",
+				"transition-colors",
 				className,
 			)}
 			{...props}
@@ -68,7 +83,15 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
 		<th
 			data-slot="table-head"
 			className={cn(
-				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				"text-text-primary",
+				"h-10",
+				"px-2",
+				"text-left",
+				"align-middle",
+				"font-medium",
+				"whitespace-nowrap",
+				"[&:has([role=checkbox])]:pr-0",
+				"[&>[role=checkbox]]:translate-y-[2px]",
 				className,
 			)}
 			{...props}
@@ -81,7 +104,11 @@ function TableCell({ className, ...props }: React.ComponentProps<"td">) {
 		<td
 			data-slot="table-cell"
 			className={cn(
-				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				"p-2",
+				"align-middle",
+				"whitespace-nowrap",
+				"[&:has([role=checkbox])]:pr-0",
+				"[&>[role=checkbox]]:translate-y-[2px]",
 				className,
 			)}
 			{...props}
@@ -96,7 +123,7 @@ function TableCaption({
 	return (
 		<caption
 			data-slot="table-caption"
-			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			className={cn("text-text-secondary", "mt-4", "text-sm", className)}
 			{...props}
 		/>
 	);

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

@@ -16,6 +16,7 @@ import {
 	TabsAddButton,
 	TabsContent,
 	TabsList,
+	TabsListDropdown,
 	TabsTrigger,
 } from "#shadcn/components/ui/tabs";
 
@@ -144,6 +145,37 @@ export const Browser = {
 				</TabsTrigger>
 			</TabsList>
 			<TabsAddButton onClick={BrowserTabOnAdd} />
+			<TabsListDropdown
+				tabs={[
+					{
+						id: "first",
+						content: (
+							<span className="flex items-center gap-1">
+								<span className="text-utility-green">GET</span>
+								<span>/fhir/Patient</span>
+							</span>
+						),
+					},
+					{
+						id: "second",
+						content: (
+							<span className="flex items-center gap-1">
+								<span className="text-utility-yellow">POST</span>
+								<span>/fhir</span>
+							</span>
+						),
+					},
+					{
+						id: "third",
+						content: (
+							<span className="flex items-center gap-1">
+								<span className="text-utility-yellow">POST</span>
+								<span>/$graphql</span>
+							</span>
+						),
+					},
+				]}
+			/>
 		</Tabs>
 	),
 } satisfies Story;