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

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

@@ -4,6 +4,65 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Accordion item styles
+const accordionItemStyles = cn(
+	"border-b",
+	"border-border-primary",
+	"last:border-b-0",
+);
+
+// Accordion trigger styles
+const accordionTriggerStyles = cn(
+	// Layout
+	"flex",
+	"flex-1",
+	"items-start",
+	"justify-between",
+	"gap-4",
+	// Shape
+	"rounded-md",
+	// Spacing
+	"py-4",
+	// Typography
+	"text-left",
+	"text-sm",
+	"font-medium",
+	// Interaction
+	"transition-all",
+	"outline-none",
+	"hover:underline",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+	// Icon rotation
+	"[&[data-state=open]>svg]:rotate-180",
+);
+
+// Accordion content styles
+const accordionContentStyles = cn(
+	"data-[state=closed]:animate-accordion-up",
+	"data-[state=open]:animate-accordion-down",
+	"overflow-hidden",
+	"text-sm",
+);
+
+// Accordion content inner styles
+const accordionContentInnerStyles = cn("pt-0", "pb-4");
+
+// Accordion chevron styles
+const accordionChevronStyles = cn(
+	"text-text-secondary",
+	"pointer-events-none",
+	"size-4",
+	"shrink-0",
+	"translate-y-0.5",
+	"transition-transform",
+	"duration-200",
+);
+
 function Accordion({
 	...props
 }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
@@ -17,7 +76,7 @@ function AccordionItem({
 	return (
 		<AccordionPrimitive.Item
 			data-slot="accordion-item"
-			className={cn("border-b last:border-b-0", className)}
+			className={cn(accordionItemStyles, className)}
 			{...props}
 		/>
 	);
@@ -32,14 +91,11 @@ function AccordionTrigger({
 		<AccordionPrimitive.Header className="flex">
 			<AccordionPrimitive.Trigger
 				data-slot="accordion-trigger"
-				className={cn(
-					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-					className,
-				)}
+				className={cn(accordionTriggerStyles, className)}
 				{...props}
 			>
 				{children}
-				<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+				<ChevronDownIcon className={accordionChevronStyles} />
 			</AccordionPrimitive.Trigger>
 		</AccordionPrimitive.Header>
 	);
@@ -53,10 +109,12 @@ function AccordionContent({
 	return (
 		<AccordionPrimitive.Content
 			data-slot="accordion-content"
-			className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+			className={accordionContentStyles}
 			{...props}
 		>
-			<div className={cn("pt-0 pb-4", className)}>{children}</div>
+			<div className={cn(accordionContentInnerStyles, className)}>
+				{children}
+			</div>
 		</AccordionPrimitive.Content>
 	);
 }

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

@@ -3,21 +3,49 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-const alertVariants = cva(
-	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-	{
-		variants: {
-			variant: {
-				default: "bg-card text-card-foreground",
-				destructive:
-					"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
+const baseAlertStyles = cn(
+	// Layout
+	"relative",
+	"w-full",
+	"grid",
+	"items-start",
+	"grid-cols-[0_1fr]",
+	"has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr]",
+	"gap-y-0.5",
+	"has-[>svg]:gap-x-3",
+	// Shape
+	"rounded-lg",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Spacing
+	"px-4",
+	"py-3",
+	// Typography
+	"text-sm",
+	// SVG styles
+	"[&>svg]:size-4",
+	"[&>svg]:translate-y-0.5",
+	"[&>svg]:text-current",
+);
+
+const alertVariants = cva(baseAlertStyles, {
+	variants: {
+		variant: {
+			default: cn("bg-bg-primary", "text-text-primary"),
+			destructive: cn(
+				"text-text-error-primary",
+				"bg-bg-error-primary",
+				"border-border-error",
+				"[&>svg]:text-current",
+				"*:data-[slot=alert-description]:text-fg-error-secondary",
+			),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+	},
+});
 
 function Alert({
 	className,
@@ -39,7 +67,11 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="alert-title"
 			className={cn(
-				"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+				"col-start-2",
+				"line-clamp-1",
+				"min-h-4",
+				"font-medium",
+				"tracking-tight",
 				className,
 			)}
 			{...props}
@@ -55,7 +87,13 @@ function AlertDescription({
 		<div
 			data-slot="alert-description"
 			className={cn(
-				"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				"text-text-secondary",
+				"col-start-2",
+				"grid",
+				"justify-items-start",
+				"gap-1",
+				"text-sm",
+				"[&_p]:leading-relaxed",
 				className,
 			)}
 			{...props}

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

@@ -3,6 +3,15 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+const avatarStyles = cn(
+	"relative",
+	"flex",
+	"size-8",
+	"shrink-0",
+	"overflow-hidden",
+	"rounded-full",
+);
+
 function Avatar({
 	className,
 	...props
@@ -10,10 +19,7 @@ function Avatar({
 	return (
 		<AvatarPrimitive.Root
 			data-slot="avatar"
-			className={cn(
-				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
-				className,
-			)}
+			className={cn(avatarStyles, className)}
 			{...props}
 		/>
 	);
@@ -26,7 +32,7 @@ function AvatarImage({
 	return (
 		<AvatarPrimitive.Image
 			data-slot="avatar-image"
-			className={cn("aspect-square size-full", className)}
+			className={cn("aspect-square", "size-full", className)}
 			{...props}
 		/>
 	);
@@ -40,7 +46,12 @@ function AvatarFallback({
 		<AvatarPrimitive.Fallback
 			data-slot="avatar-fallback"
 			className={cn(
-				"bg-muted flex size-full items-center justify-center rounded-full",
+				"bg-bg-tertiary",
+				"flex",
+				"size-full",
+				"items-center",
+				"justify-center",
+				"rounded-full",
 				className,
 			)}
 			{...props}

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

@@ -4,26 +4,75 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-const badgeVariants = cva(
-	"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-	{
-		variants: {
-			variant: {
-				default:
-					"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-				secondary:
-					"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-				destructive:
-					"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-				outline:
-					"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
+// Base badge styles
+const baseBadgeStyles = cn(
+	// Layout
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"w-fit",
+	"whitespace-nowrap",
+	"shrink-0",
+	"gap-1",
+	"overflow-hidden",
+	// Shape
+	"rounded-md",
+	// Borders
+	"border",
+	// Spacing
+	"px-2",
+	"py-0.5",
+	// Typography
+	"text-xs",
+	"font-medium",
+	// SVG
+	"[&>svg]:size-3",
+	"[&>svg]:pointer-events-none",
+	// Transitions
+	"transition-[color,box-shadow]",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Invalid
+	"aria-invalid:ring-2",
+	"aria-invalid:ring-utility-red/70",
+	"aria-invalid:border-border-error",
+);
+
+const badgeVariants = cva(baseBadgeStyles, {
+	variants: {
+		variant: {
+			default: cn(
+				"border-transparent",
+				"bg-bg-link",
+				"text-text-primary_on-brand",
+				"[a&]:hover:bg-bg-link_hover",
+			),
+			secondary: cn(
+				"border-transparent",
+				"bg-bg-secondary",
+				"text-text-secondary",
+				"[a&]:hover:bg-bg-tertiary",
+			),
+			destructive: cn(
+				"border-transparent",
+				"bg-bg-error-primary_inverse",
+				"text-text-primary_on-brand",
+				"[a&]:hover:bg-bg-error-primary_inverse_hover",
+				"focus-visible:ring-utility-red/70",
+			),
+			outline: cn(
+				"text-text-primary",
+				"border-border-primary",
+				"[a&]:hover:bg-bg-secondary",
+				"[a&]:hover:text-text-primary",
+			),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+	},
+});
 
 function Badge({
 	className,

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

@@ -13,7 +13,13 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 		<ol
 			data-slot="breadcrumb-list"
 			className={cn(
-				"text-text-tertiary typo-body flex flex-wrap items-center break-words gap-2",
+				"text-text-tertiary",
+				"typo-body",
+				"flex",
+				"flex-wrap",
+				"items-center",
+				"break-words",
+				"gap-2",
 				className,
 			)}
 			{...props}
@@ -25,7 +31,7 @@ function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
 	return (
 		<li
 			data-slot="breadcrumb-item"
-			className={cn("inline-flex items-center", className)}
+			className={cn("inline-flex", "items-center", className)}
 			{...props}
 		/>
 	);
@@ -44,9 +50,17 @@ function BreadcrumbLink({
 		<Comp
 			data-slot="breadcrumb-link"
 			className={cn(
-				"typo-body bg-bg-tertiary text-text-tertiary rounded-md px-2 py-1 transition-colors",
+				"typo-body",
+				"bg-bg-tertiary",
+				"text-text-tertiary",
+				"rounded-md",
+				"px-2",
+				"py-1",
+				"transition-colors",
 				"hover:text-text-secondary",
-				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				"focus-visible:outline-none",
+				"focus-visible:ring-2",
+				"focus-visible:ring-utility-blue/70",
 				className,
 			)}
 			{...props}
@@ -64,7 +78,10 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
 			aria-disabled="true"
 			aria-current="page"
 			className={cn(
-				"typo-page-header text-text-primary px-0 py-0.5",
+				"typo-page-header",
+				"text-text-primary",
+				"px-0",
+				"py-0.5",
 				className,
 			)}
 			{...props}
@@ -82,7 +99,12 @@ function BreadcrumbSeparator({
 			data-slot="breadcrumb-separator"
 			role="presentation"
 			aria-hidden="true"
-			className={cn("[&>svg]:size-3.5 text-text-quternary text-xs", className)}
+			className={cn(
+				"[&>svg]:size-3.5",
+				"text-text-tertiary",
+				"text-xs",
+				className,
+			)}
 			{...props}
 		>
 			{children ?? "/"}
@@ -99,7 +121,13 @@ function BreadcrumbEllipsis({
 			data-slot="breadcrumb-ellipsis"
 			role="presentation"
 			aria-hidden="true"
-			className={cn("flex size-9 items-center justify-center", className)}
+			className={cn(
+				"flex",
+				"size-9",
+				"items-center",
+				"justify-center",
+				className,
+			)}
 			{...props}
 		>
 			<MoreHorizontal className="size-4" />

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

@@ -4,67 +4,128 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-const buttonVariants = cva(
-	cn(
-		"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg transition-all ",
-		"outline-none cursor-pointer",
-		"disabled:cursor-not-allowed",
-		"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
-		"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-		"aria-invalid:ring-destructive/20",
-	),
-	{
-		variants: {
-			variant: {
-				primary:
-					"bg-bg-link text-text-primary_on-brand shadow-xs hover:bg-bg-link_hover active:bg-bg-link disabled:bg-bg-disabled",
-				secondary:
-					"border border-border-primary bg-bg-primary text-text-tertiary shadow-xs hover:text-fg-primary disabled:text-fg-disabled disabled:border-border-disabled hover:bg-bg-secondary active:bg-bg-primary active:text-text-tertiary disabled:hover:bg-bg-primary",
-				link: "text-text-secondary hover:text-text-primary disabled:text-text-disabled rounded-none",
-				ghost:
-					"text-text-secondary hover:text-text-primary disabled:text-text-disabled hover:bg-bg-secondary active:bg-bg-tertiary disabled:hover:bg-bg-primary",
-			},
-			size: {
-				regular: "h-9 px-4 typo-label",
-				small: "h-6 px-2 typo-button-label-xs gap-1 rounded-md",
-			},
-			danger: {
-				true: "",
-				false: "",
-			},
+const baseButtonStyles = cn(
+	// Layout
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"gap-2",
+	"whitespace-nowrap",
+	"shrink-0",
+	// Shape
+	"rounded-lg",
+	// Interaction
+	"transition-all",
+	"outline-none",
+	"cursor-pointer",
+	// Disabled states
+	"disabled:cursor-not-allowed",
+	// Icon styles
+	"[&_svg]:pointer-events-none",
+	"[&_svg:not([class*='size-'])]:size-4",
+	"[&_svg]:shrink-0",
+	// Focus states
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Invalid states
+	"aria-invalid:ring-2",
+	"aria-invalid:ring-utility-red/70",
+);
+
+const buttonVariants = cva(baseButtonStyles, {
+	variants: {
+		variant: {
+			primary: cn(
+				"bg-bg-link",
+				"text-text-primary_on-brand",
+				"hover:bg-bg-link_hover",
+				"active:bg-bg-link",
+				"disabled:bg-bg-disabled",
+				"disabled:text-text-disabled",
+			),
+			secondary: cn(
+				"border",
+				"border-border-primary",
+				"bg-bg-primary",
+				"text-text-secondary",
+				"hover:text-text-primary",
+				"hover:bg-bg-secondary",
+				"active:bg-bg-primary",
+				"active:text-text-tertiary",
+				"disabled:text-text-disabled",
+				"disabled:border-border-disabled",
+				"disabled:hover:bg-bg-primary",
+			),
+			link: cn(
+				"text-text-secondary",
+				"hover:text-text-primary",
+				"disabled:text-text-disabled",
+				"rounded-none",
+			),
+			ghost: cn(
+				"text-text-secondary",
+				"hover:text-text-primary",
+				"hover:bg-bg-secondary",
+				"active:bg-bg-tertiary",
+				"disabled:text-text-disabled",
+				"disabled:hover:bg-bg-primary",
+			),
+		},
+		size: {
+			regular: cn("h-9", "px-4", "typo-label"),
+			small: cn("h-6", "px-2", "gap-1", "typo-button-label-xs"),
 		},
-		compoundVariants: [
-			{
-				variant: "primary",
-				danger: true,
-				class:
-					"bg-bg-error-primary_inverse text-text-primary_on-brand hover:bg-bg-error-primary_inverse_hover active:bg-bg-error-primary_inverse disabled:bg-bg-disabled",
-			},
-			{
-				variant: "secondary",
-				danger: true,
-				class:
-					"border-border-error text-text-error-primary hover:text-text-error-primary_hover hover:bg-bg-error-secondary active:bg-bg-primary active:text-text-error-primary_on-brand",
-			},
-			{
-				variant: "link",
-				danger: true,
-				class: "text-text-error-secondary hover:text-text-error-primary",
-			},
-			{
-				variant: "ghost",
-				danger: true,
-				class:
-					"text-text-error-secondary hover:text-text-error-primary hover:bg-bg-error-secondary active:bg-bg-error-tertiary",
-			},
-		],
-		defaultVariants: {
+		danger: {
+			true: "",
+			false: "",
+		},
+	},
+	compoundVariants: [
+		{
 			variant: "primary",
-			size: "regular",
-			danger: false,
+			danger: true,
+			class: cn(
+				"bg-bg-error-primary_inverse",
+				"text-text-primary_on-brand",
+				"hover:bg-bg-error-primary_inverse_hover",
+				"active:bg-bg-error-primary_inverse",
+				"disabled:bg-bg-disabled",
+			),
 		},
+		{
+			variant: "secondary",
+			danger: true,
+			class: cn(
+				"border-border-error",
+				"text-text-error-primary",
+				"hover:text-text-error-primary",
+				"hover:bg-bg-error-secondary",
+				"active:bg-bg-primary",
+				"active:text-text-error-primary",
+			),
+		},
+		{
+			variant: "link",
+			danger: true,
+			class: cn("text-text-error-secondary", "hover:text-text-error-primary"),
+		},
+		{
+			variant: "ghost",
+			danger: true,
+			class: cn(
+				"text-text-error-secondary",
+				"hover:text-text-error-primary",
+				"hover:bg-bg-error-secondary",
+				"active:bg-bg-error-tertiary",
+			),
+		},
+	],
+	defaultVariants: {
+		variant: "primary",
+		size: "regular",
+		danger: false,
 	},
-);
+});
 
 function Button({
 	className,