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

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;