@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

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

@@ -1,5 +1,11 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { AlertCircleIcon, CheckCircle2Icon, PopcornIcon } from "lucide-react";
+import {
+	AlertCircleIcon,
+	CheckIcon,
+	CircleXIcon,
+	InfoIcon,
+} from "lucide-react";
 import {
 	Alert,
 	AlertDescription,
@@ -8,37 +14,130 @@ import {
 
 const meta = {
 	title: "Component/Alert",
-} satisfies Meta;
+	component: Alert,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["critical", "warning", "info", "neutral", "success"],
+		},
+		vivid: {
+			control: "boolean",
+		},
+		icon: {
+			control: "boolean",
+		},
+	},
+	args: {
+		variant: "info",
+		vivid: false,
+		icon: true,
+	},
+} satisfies Meta<typeof Alert>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default = {
+	tags: ["!dev"],
+	render: ({ variant, vivid, icon = true }) => (
+		<Alert variant={variant} vivid={vivid} icon={icon}>
+			<InfoIcon />
+			<AlertTitle>Alert Title</AlertTitle>
+			<AlertDescription>
+				This is an alert description with some helpful information.
+			</AlertDescription>
+		</Alert>
+	),
+} satisfies Story;
+
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
-		<div className="grid w-full max-w-xl items-start gap-4">
-			<Alert>
-				<CheckCircle2Icon />
-				<AlertTitle>Success! Your changes have been saved</AlertTitle>
+		<div className="grid grid-cols-2 w-full max-w-4xl items-start gap-4">
+			{/* Default variants */}
+			<Alert variant="critical">
+				<CircleXIcon />
 				<AlertDescription>
-					This is an alert with icon, title and description.
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
 				</AlertDescription>
 			</Alert>
-			<Alert>
-				<PopcornIcon />
-				<AlertTitle>
-					This Alert has a title and an icon. No description.
-				</AlertTitle>
+			<Alert variant="critical" vivid>
+				<CircleXIcon />
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
+				</AlertDescription>
 			</Alert>
-			<Alert variant="destructive">
+
+			<Alert variant="warning">
 				<AlertCircleIcon />
-				<AlertTitle>Unable to process your payment.</AlertTitle>
-				<AlertDescription>
-					<p>Please verify your billing information and try again.</p>
-					<ul className="list-inside list-disc text-sm">
-						<li>Check your card details</li>
-						<li>Ensure sufficient funds</li>
-						<li>Verify billing address</li>
-					</ul>
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
+				</AlertDescription>
+			</Alert>
+			<Alert variant="warning" vivid>
+				<AlertCircleIcon />
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
+				</AlertDescription>
+			</Alert>
+
+			<Alert variant="info">
+				<InfoIcon />
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
+				</AlertDescription>
+			</Alert>
+			<Alert variant="info" vivid>
+				<InfoIcon />
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
+				</AlertDescription>
+			</Alert>
+
+			<Alert variant="neutral">
+				<InfoIcon />
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
+				</AlertDescription>
+			</Alert>
+			<Alert variant="neutral" vivid>
+				<InfoIcon />
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
+				</AlertDescription>
+			</Alert>
+
+			<Alert variant="success">
+				<CheckIcon />
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
+				</AlertDescription>
+			</Alert>
+			<Alert variant="success" vivid>
+				<CheckIcon />
+				<AlertDescription>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Learn more
 				</AlertDescription>
 			</Alert>
 		</div>

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

@@ -1,36 +1,139 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * 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",
+	"flex",
+	"items-start",
+	"gap-[var(--spacing-x1,8px)]",
+	// Shape
+	"rounded-[var(--corner-corner-m,6px)]",
+	// Spacing
+	"p-[var(--spacing-x2,16px)]",
+	// Typography
+	"typo-body",
+	// SVG styles
+	"[&>svg]:size-5",
+	"[&>svg]:shrink-0",
+);
+
+const alertContentStyles = cn(
+	// Layout
+	"flex",
+	"flex-col",
+	"gap-[var(--spacing-x1,8px)]",
+	"flex-1",
+	"min-w-0",
 );
 
+const variantStyles = {
+	critical: {
+		default: cn(
+			"bg-bg-error-primary",
+			"text-text-error-primary",
+			"[&>svg]:text-fg-error-primary",
+		),
+		vivid: cn(
+			"bg-bg-error-primary_inverse",
+			"text-text-primary_on-brand",
+			"[&>svg]:text-fg-primary_on-brand",
+		),
+	},
+	warning: {
+		default: cn(
+			"bg-bg-warning-primary",
+			"text-text-warning-primary",
+			"[&>svg]:text-fg-warning-primary",
+		),
+		vivid: cn(
+			"bg-bg-warning-primary_inverse",
+			"text-text-warning-primary",
+			"[&>svg]:text-fg-warning-primary",
+		),
+	},
+	info: {
+		default: cn(
+			"bg-bg-info-primary",
+			"text-text-info-primary",
+			"[&>svg]:text-fg-info-primary",
+		),
+		vivid: cn(
+			"bg-bg-info-primary_inverse",
+			"text-text-primary_on-brand",
+			"[&>svg]:text-fg-primary_on-brand",
+		),
+	},
+	neutral: {
+		default: cn(
+			"bg-bg-neutral-primary",
+			"text-text-primary",
+			"[&>svg]:text-fg-neutral-primary",
+		),
+		vivid: cn(
+			"bg-bg-neutral-primary_inverse",
+			"text-text-primary_on-brand",
+			"[&>svg]:text-fg-primary_on-brand",
+		),
+	},
+	success: {
+		default: cn(
+			"bg-bg-success-secondary",
+			"text-text-primary",
+			"[&>svg]:text-fg-success-primary",
+		),
+		vivid: cn(
+			"bg-bg-success-primary_inverse",
+			"text-text-primary_on-brand",
+			"[&>svg]:text-fg-primary_on-brand",
+		),
+	},
+} as const;
+
+type AlertVariant = keyof typeof variantStyles;
+
 function Alert({
 	className,
-	variant,
+	variant = "info",
+	vivid = false,
+	icon = true,
+	children,
 	...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+}: React.ComponentProps<"div"> & {
+	variant?: AlertVariant | undefined;
+	vivid?: boolean | undefined;
+	icon?: boolean | undefined;
+}) {
+	const childrenArray = React.Children.toArray(children);
+
+	// Find first child that is not AlertTitle or AlertDescription (assumed to be icon)
+	const iconIndex = childrenArray.findIndex(
+		(child) =>
+			React.isValidElement(child) &&
+			child.type !== AlertTitle &&
+			child.type !== AlertDescription,
+	);
+
+	const hasIcon = icon && iconIndex !== -1;
+	const iconElement = hasIcon ? childrenArray[iconIndex] : null;
+	const content = hasIcon
+		? childrenArray.filter((_, index) => index !== iconIndex)
+		: childrenArray;
+
+	const variantStyle = variantStyles[variant][vivid ? "vivid" : "default"];
+
 	return (
 		<div
 			data-slot="alert"
 			role="alert"
-			className={cn(alertVariants({ variant }), className)}
+			className={cn(baseAlertStyles, variantStyle, className)}
 			{...props}
-		/>
+		>
+			{iconElement}
+			<div className={alertContentStyles}>{content}</div>
+		</div>
 	);
 }
 
@@ -38,10 +141,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="alert-title"
-			className={cn(
-				"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-				className,
-			)}
+			className={cn("typo-body", "font-medium", className)}
 			{...props}
 		/>
 	);
@@ -54,10 +154,7 @@ function AlertDescription({
 	return (
 		<div
 			data-slot="alert-description"
-			className={cn(
-				"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-				className,
-			)}
+			className={cn("typo-body", className)}
 			{...props}
 		/>
 	);

package/src/shadcn/components/ui/aspect-ratio.tsx

@@ -1,3 +1,4 @@
+"use client";
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
 
 function AspectRatio({

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

@@ -1,3 +1,4 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
 	Avatar,
@@ -5,20 +6,85 @@ import {
 	AvatarImage,
 } from "#shadcn/components/ui/avatar";
 
+interface AvatarWrapperProps {
+	shape?: "circle" | "square";
+	hasImage?: boolean;
+	fallback?: string;
+}
+
+function AvatarWrapper({
+	shape = "circle",
+	hasImage = true,
+	fallback = "CN",
+}: AvatarWrapperProps) {
+	return (
+		<Avatar
+			key={`${hasImage}`}
+			className={shape === "square" ? "rounded-lg" : undefined}
+		>
+			{hasImage && (
+				<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+			)}
+			<AvatarFallback>{fallback}</AvatarFallback>
+		</Avatar>
+	);
+}
+
 const meta = {
 	title: "Component/Avatar",
-} satisfies Meta;
+	component: AvatarWrapper,
+	parameters: {
+		layout: "centered",
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		shape: {
+			control: "select",
+			options: ["circle", "square"],
+		},
+		hasImage: {
+			control: "boolean",
+		},
+		fallback: {
+			control: "text",
+		},
+	},
+	args: {
+		shape: "circle",
+		hasImage: true,
+		fallback: "CN",
+	},
+} satisfies Meta<typeof AvatarWrapper>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default = {
+	tags: ["!dev"],
+	render: ({ shape = "circle", hasImage = true, fallback = "CN" }) => (
+		<AvatarWrapper shape={shape} hasImage={hasImage} fallback={fallback} />
+	),
+} satisfies Story;
+
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
 		<div className="flex flex-row flex-wrap items-center gap-12">
+			{/* With image - circle */}
 			<Avatar>
 				<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
 				<AvatarFallback>CN</AvatarFallback>
 			</Avatar>
+
+			{/* With image - square */}
 			<Avatar className="rounded-lg">
 				<AvatarImage
 					src="https://github.com/evilrabbit.png"
@@ -26,6 +92,13 @@ export const Demo = {
 				/>
 				<AvatarFallback>ER</AvatarFallback>
 			</Avatar>
+
+			{/* Fallback only */}
+			<Avatar>
+				<AvatarFallback>KB</AvatarFallback>
+			</Avatar>
+
+			{/* Stacked avatars */}
 			<div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
 				<Avatar>
 					<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />

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,17 @@ function AvatarFallback({
 		<AvatarPrimitive.Fallback
 			data-slot="avatar-fallback"
 			className={cn(
-				"bg-muted flex size-full items-center justify-center rounded-full",
+				"bg-bg-tertiary",
+				"text-text-secondary",
+				"flex",
+				"size-full",
+				"items-center",
+				"justify-center",
+				"rounded-full",
+				"transition-colors",
+				"cursor-pointer",
+				"hover:bg-bg-dark_tertiary",
+				"hover:text-text-primary_on-brand",
 				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,