@health-samurai/react-components 0.0.0-alpha.1

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

@@ -0,0 +1,66 @@
+import { cva, type VariantProps } from "class-variance-authority";
+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",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+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,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	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,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription };

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { AspectRatio } from "#shadcn/components/ui/aspect-ratio";
+
+const meta = {
+	title: "Component/Aspect ration",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+			<img
+				src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
+				alt="Aspect Ration demonstraion image."
+				className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
+			/>
+		</AspectRatio>
+	),
+} satisfies Story;

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

@@ -0,0 +1,9 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+	...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+	return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+} from "#shadcn/components/ui/avatar";
+
+const meta = {
+	title: "Component/Avatar",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<div className="flex flex-row flex-wrap items-center gap-12">
+			<Avatar>
+				<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+				<AvatarFallback>CN</AvatarFallback>
+			</Avatar>
+			<Avatar className="rounded-lg">
+				<AvatarImage
+					src="https://github.com/evilrabbit.png"
+					alt="@evilrabbit"
+				/>
+				<AvatarFallback>ER</AvatarFallback>
+			</Avatar>
+			<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" />
+					<AvatarFallback>CN</AvatarFallback>
+				</Avatar>
+				<Avatar>
+					<AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
+					<AvatarFallback>LR</AvatarFallback>
+				</Avatar>
+				<Avatar>
+					<AvatarImage
+						src="https://github.com/evilrabbit.png"
+						alt="@evilrabbit"
+					/>
+					<AvatarFallback>ER</AvatarFallback>
+				</Avatar>
+			</div>
+		</div>
+	),
+} satisfies Story;

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

@@ -0,0 +1,51 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Avatar({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+	return (
+		<AvatarPrimitive.Root
+			data-slot="avatar"
+			className={cn(
+				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarImage({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+	return (
+		<AvatarPrimitive.Image
+			data-slot="avatar-image"
+			className={cn("aspect-square size-full", className)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarFallback({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+	return (
+		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
+			className={cn(
+				"bg-muted flex size-full items-center justify-center rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { BadgeCheckIcon } from "lucide-react";
+import { Badge } from "#shadcn/components/ui/badge";
+
+const meta = {
+	title: "Component/Badge",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<div className="flex flex-col items-center gap-2">
+			<div className="flex w-full flex-wrap gap-2">
+				<Badge>Badge</Badge>
+				<Badge variant="secondary">Secondary</Badge>
+				<Badge variant="destructive">Destructive</Badge>
+				<Badge variant="outline">Outline</Badge>
+			</div>
+			<div className="flex w-full flex-wrap gap-2">
+				<Badge
+					variant="secondary"
+					className="bg-blue-500 text-white dark:bg-blue-600"
+				>
+					<BadgeCheckIcon />
+					Verified
+				</Badge>
+				<Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
+					8
+				</Badge>
+				<Badge
+					className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+					variant="destructive"
+				>
+					99
+				</Badge>
+				<Badge
+					className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
+					variant="outline"
+				>
+					20+
+				</Badge>
+			</div>
+		</div>
+	),
+} satisfies Story;

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

@@ -0,0 +1,46 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+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",
+		},
+	},
+);
+
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<"span"> &
+	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "span";
+
+	return (
+		<Comp
+			data-slot="badge"
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,62 @@
+// biome-ignore-all lint/a11y/useValidAnchor: Useless in stories
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	Breadcrumb,
+	BreadcrumbEllipsis,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "#shadcn/components/ui/breadcrumb";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "#shadcn/components/ui/dropdown-menu";
+
+const meta = {
+	title: "Component/Breadcrumb",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<Breadcrumb>
+			<BreadcrumbList>
+				<BreadcrumbItem>
+					<BreadcrumbLink asChild>
+						<a href="/">Home</a>
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<DropdownMenu>
+						<DropdownMenuTrigger className="flex items-center gap-1">
+							<BreadcrumbEllipsis className="size-4" />
+							<span className="sr-only">Toggle menu</span>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start">
+							<DropdownMenuItem>Documentation</DropdownMenuItem>
+							<DropdownMenuItem>Themes</DropdownMenuItem>
+							<DropdownMenuItem>GitHub</DropdownMenuItem>
+						</DropdownMenuContent>
+					</DropdownMenu>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<BreadcrumbLink asChild>
+						<a href="/docs/components">Components</a>
+					</BreadcrumbLink>
+				</BreadcrumbItem>
+				<BreadcrumbSeparator />
+				<BreadcrumbItem>
+					<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+				</BreadcrumbItem>
+			</BreadcrumbList>
+		</Breadcrumb>
+	),
+} satisfies Story;

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

@@ -0,0 +1,119 @@
+import { Slot } from "@radix-ui/react-slot";
+import { MoreHorizontal } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+	return (
+		<ol
+			data-slot="breadcrumb-list"
+			className={cn(
+				"text-text-tertiary typo-body flex flex-wrap items-center break-words gap-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="breadcrumb-item"
+			className={cn("inline-flex items-center", className)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbLink({
+	asChild,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			data-slot="breadcrumb-link"
+			className={cn(
+				"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",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+	return (
+		// biome-ignore lint/a11y/useFocusableInteractive: FIXME: unchanged shadcn
+		// biome-ignore lint/a11y/useSemanticElements: FIXME: unchanged shadcn
+		<span
+			data-slot="breadcrumb-page"
+			role="link"
+			aria-disabled="true"
+			aria-current="page"
+			className={cn(
+				"typo-page-header text-text-primary px-0 py-0.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function BreadcrumbSeparator({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="breadcrumb-separator"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("[&>svg]:size-3.5 text-text-quternary text-xs", className)}
+			{...props}
+		>
+			{children ?? "/"}
+		</li>
+	);
+}
+
+function BreadcrumbEllipsis({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="breadcrumb-ellipsis"
+			role="presentation"
+			aria-hidden="true"
+			className={cn("flex size-9 items-center justify-center", className)}
+			{...props}
+		>
+			<MoreHorizontal className="size-4" />
+			<span className="sr-only">More</span>
+		</span>
+	);
+}
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};

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

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Play, Trash2 } from "lucide-react";
+import { Badge } from "#shadcn/components/ui/badge";
+import { Button } from "#shadcn/components/ui/button";
+
+const meta = {
+	title: "Component/Button",
+	component: Button,
+	argTypes: {
+		variant: {},
+	},
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TextOnly = {
+	args: {
+		children: "Remove",
+	},
+} satisfies Story;
+
+export const WithIcon = {
+	args: {
+		children: (
+			<>
+				<Trash2 /> Remove{" "}
+			</>
+		),
+	},
+} satisfies Story;
+
+export const Demo = {
+	render: () => (
+		<div className="p-6  min-h-screen flex justify-center items-center">
+			<div className=" rounded-lg p-6 shadow-sm w-280">
+				<div className="flex items-center mb-4 justify-between">
+					<div className="w-40 text-center">Variants</div>
+					<div className="w-70 text-center text-sm text-text-secondary">
+						Danger:
+						<Badge variant="outline" className="text-xs">
+							false
+						</Badge>
+					</div>
+					<div className="w-70 text-center text-sm text-text-secondary">
+						Danger:
+						<Badge variant="outline" className="text-xs">
+							true
+						</Badge>
+					</div>
+					<div className="w-70 text-center text-sm text-text-secondary">
+						Disabled:
+						<Badge variant="outline" className="text-xs">
+							true
+						</Badge>
+					</div>
+				</div>
+
+				{(["regular", "small"] as const).map((size) => (
+					<div
+						className=" items-center gap-3 py-3 border-gray-l00 border-t border-border-separator"
+						key={size}
+					>
+						{(["primary", "secondary", "ghost", "link"] as const).map(
+							(variant) => (
+								<div
+									key={variant}
+									className="flex gap-3 items-center py-2 justify-between"
+								>
+									<div className="w-40 text-sm text-text-secondary">
+										<div className="flex mb-1">
+											<div className="w-15">Variant:</div>
+											<Badge variant="outline" className="text-xs">
+												{variant}
+											</Badge>
+										</div>
+										<div className="flex">
+											<div className="w-15">Size:</div>
+											<Badge variant="outline" className="text-xs">
+												{size}
+											</Badge>
+										</div>
+									</div>
+									<div className="w-70 flex gap-3 justify-center">
+										<Button size={size} variant={variant}>
+											Button
+										</Button>
+										<Button size={size} variant={variant}>
+											<Play /> Button
+										</Button>
+										<Button size={size} variant={variant}>
+											<Play />
+										</Button>
+									</div>
+									<div className="w-70 flex gap-3 justify-center">
+										<Button size={size} variant={variant} danger>
+											Button
+										</Button>
+										<Button size={size} variant={variant} danger>
+											<Play /> Button
+										</Button>
+										<Button size={size} variant={variant} danger>
+											<Play />
+										</Button>
+									</div>
+									<div className="w-70 flex gap-3 justify-center">
+										<Button size={size} variant={variant} disabled>
+											Button
+										</Button>
+										<Button size={size} variant={variant} disabled>
+											<Play /> Button
+										</Button>
+										<Button size={size} variant={variant} disabled>
+											<Play />
+										</Button>
+									</div>
+								</div>
+							),
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	),
+} satisfies Story;

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

@@ -0,0 +1,92 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+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: "",
+			},
+		},
+		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: {
+			variant: "primary",
+			size: "regular",
+			danger: false,
+		},
+	},
+);
+
+function Button({
+	className,
+	variant,
+	size,
+	danger = false,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+		danger?: boolean;
+	}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, danger, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };