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

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "#shadcn/components/ui/skeleton";
+
+const meta = {
+	title: "Component/Skeleton",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<div className="flex items-center space-x-4">
+			<Skeleton className="h-12 w-12 rounded-full" />
+			<div className="space-y-2">
+				<Skeleton className="h-4 w-[250px]" />
+				<Skeleton className="h-4 w-[200px]" />
+			</div>
+		</div>
+	),
+} satisfies Story;

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

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

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Slider } from "#shadcn/components/ui/slider";
+
+const meta = {
+	title: "Component/Slider",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />
+	),
+} satisfies Story;

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

@@ -0,0 +1,62 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Slider({
+	className,
+	defaultValue,
+	value,
+	min = 0,
+	max = 100,
+	...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+	const _values = React.useMemo(
+		() =>
+			Array.isArray(value)
+				? value
+				: Array.isArray(defaultValue)
+					? defaultValue
+					: [min, max],
+		[value, defaultValue, min, max],
+	);
+
+	return (
+		<SliderPrimitive.Root
+			data-slot="slider"
+			{...(defaultValue !== undefined ? { defaultValue } : {})}
+			{...(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,
+			)}
+			{...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",
+				)}
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					className={cn(
+						"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+					)}
+				/>
+			</SliderPrimitive.Track>
+			{Array.from({ length: _values.length }, (_, index) => (
+				<SliderPrimitive.Thumb
+					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"
+				/>
+			))}
+		</SliderPrimitive.Root>
+	);
+}
+
+export { Slider };

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { toast } from "sonner";
+import { Button } from "#shadcn/components/ui/button";
+
+const meta = {
+	title: "Component/Sonner",
+} satisfies Meta;
+export default meta;
+
+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>
+	),
+} satisfies Story;

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

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = "system" } = useTheme();
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"] & {}}
+			className="toaster group"
+			style={
+				{
+					"--normal-bg": "var(--popover)",
+					"--normal-text": "var(--popover-foreground)",
+					"--normal-border": "var(--border)",
+				} as React.CSSProperties
+			}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Label } from "#shadcn/components/ui/label";
+import { Switch } from "#shadcn/components/ui/switch";
+
+const meta = {
+	title: "Component/Switch",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<div className="flex items-center space-x-2">
+			<Switch id="airplane-mode" />
+			<Label htmlFor="airplane-mode">Airplane Mode</Label>
+		</div>
+	),
+} satisfies Story;

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

@@ -0,0 +1,29 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Switch({
+	className,
+	...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	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,
+			)}
+			{...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",
+				)}
+			/>
+		</SwitchPrimitive.Root>
+	);
+}
+
+export { Switch };

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "#shadcn/components/ui/table";
+
+const invoices = [
+	{
+		invoice: "INV001",
+		paymentStatus: "Paid",
+		totalAmount: "$250.00",
+		paymentMethod: "Credit Card",
+	},
+	{
+		invoice: "INV002",
+		paymentStatus: "Pending",
+		totalAmount: "$150.00",
+		paymentMethod: "PayPal",
+	},
+	{
+		invoice: "INV003",
+		paymentStatus: "Unpaid",
+		totalAmount: "$350.00",
+		paymentMethod: "Bank Transfer",
+	},
+	{
+		invoice: "INV004",
+		paymentStatus: "Paid",
+		totalAmount: "$450.00",
+		paymentMethod: "Credit Card",
+	},
+	{
+		invoice: "INV005",
+		paymentStatus: "Paid",
+		totalAmount: "$550.00",
+		paymentMethod: "PayPal",
+	},
+	{
+		invoice: "INV006",
+		paymentStatus: "Pending",
+		totalAmount: "$200.00",
+		paymentMethod: "Bank Transfer",
+	},
+	{
+		invoice: "INV007",
+		paymentStatus: "Unpaid",
+		totalAmount: "$300.00",
+		paymentMethod: "Credit Card",
+	},
+];
+
+const meta = {
+	title: "Component/Table",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<Table>
+			<TableCaption>A list of your recent invoices.</TableCaption>
+			<TableHeader>
+				<TableRow>
+					<TableHead className="w-[100px]">Invoice</TableHead>
+					<TableHead>Status</TableHead>
+					<TableHead>Method</TableHead>
+					<TableHead className="text-right">Amount</TableHead>
+				</TableRow>
+			</TableHeader>
+			<TableBody>
+				{invoices.map((invoice) => (
+					<TableRow key={invoice.invoice}>
+						<TableCell className="font-medium">{invoice.invoice}</TableCell>
+						<TableCell>{invoice.paymentStatus}</TableCell>
+						<TableCell>{invoice.paymentMethod}</TableCell>
+						<TableCell className="text-right">{invoice.totalAmount}</TableCell>
+					</TableRow>
+				))}
+			</TableBody>
+			<TableFooter>
+				<TableRow>
+					<TableCell colSpan={3}>Total</TableCell>
+					<TableCell className="text-right">$2,500.00</TableCell>
+				</TableRow>
+			</TableFooter>
+		</Table>
+	),
+} satisfies Story;

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

@@ -0,0 +1,114 @@
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div
+			data-slot="table-container"
+			className="relative w-full overflow-x-auto"
+		>
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return (
+		<thead
+			data-slot="table-header"
+			className={cn("[&_tr]:border-b", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn(
+				"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<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]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCaption({
+	className,
+	...props
+}: React.ComponentProps<"caption">) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
+};

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "#shadcn/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "#shadcn/components/ui/card";
+import { Input } from "#shadcn/components/ui/input";
+import { Label } from "#shadcn/components/ui/label";
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "#shadcn/components/ui/tabs";
+
+const meta = {
+	title: "Component/Tabs",
+	argTypes: {
+		variant: {
+			options: ["button", "dashed"],
+			control: { type: "select" },
+		},
+	},
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: (props) => (
+		<div className="flex w-full max-w-sm flex-col gap-6">
+			<Tabs defaultValue="account" {...props}>
+				<TabsList>
+					<TabsTrigger value="account">Account</TabsTrigger>
+					<TabsTrigger value="password">Password</TabsTrigger>
+				</TabsList>
+				<TabsContent value="account">
+					<Card>
+						<CardHeader>
+							<CardTitle>Account</CardTitle>
+							<CardDescription>
+								Make changes to your account here. Click save when you&apos;re
+								done.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="grid gap-6">
+							<div className="grid gap-3">
+								<Label htmlFor="tabs-demo-name">Name</Label>
+								<Input id="tabs-demo-name" defaultValue="Pedro Duarte" />
+							</div>
+							<div className="grid gap-3">
+								<Label htmlFor="tabs-demo-username">Username</Label>
+								<Input id="tabs-demo-username" defaultValue="@peduarte" />
+							</div>
+						</CardContent>
+						<CardFooter>
+							<Button>Save changes</Button>
+						</CardFooter>
+					</Card>
+				</TabsContent>
+				<TabsContent value="password">
+					<Card>
+						<CardHeader>
+							<CardTitle>Password</CardTitle>
+							<CardDescription>
+								Change your password here. After saving, you&apos;ll be logged
+								out.
+							</CardDescription>
+						</CardHeader>
+						<CardContent className="grid gap-6">
+							<div className="grid gap-3">
+								<Label htmlFor="tabs-demo-current">Current password</Label>
+								<Input id="tabs-demo-current" type="password" />
+							</div>
+							<div className="grid gap-3">
+								<Label htmlFor="tabs-demo-new">New password</Label>
+								<Input id="tabs-demo-new" type="password" />
+							</div>
+						</CardContent>
+						<CardFooter>
+							<Button>Save password</Button>
+						</CardFooter>
+					</Card>
+				</TabsContent>
+			</Tabs>
+		</div>
+	),
+} satisfies Story;

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

@@ -0,0 +1,84 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "#shadcn/lib/utils";
+
+function Tabs({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			className={cn("flex flex-col", className)}
+			{...props}
+		/>
+	);
+}
+
+const tabListVariants = cva("", {
+	variants: {
+		variant: {
+			button: "",
+			dashed: "",
+		},
+	},
+	defaultVariants: {
+		variant: "dashed",
+	},
+});
+
+function TabsList({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+	VariantProps<typeof tabListVariants>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			className={cn(
+				tabListVariants({ variant }),
+				"inline-flex w-fit items-center",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	return (
+		<TabsPrimitive.Trigger
+			data-slot="tabs-trigger"
+			className={cn(
+				"h-10 typo-label px-3 py-2 cursor-pointer text-text-tertiary data-[state=active]:text-text-primary border-b-2",
+				"data-[state=active]:border-border-brand border-transparent hover:text-text-tertiary-hover focus-visible:border-ring",
+				"focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:text-muted-foreground",
+				"inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow,border]",
+				"focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50",
+				"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsContent({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return (
+		<TabsPrimitive.Content
+			data-slot="tabs-content"
+			className={cn("flex-1 outline-none", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Textarea } from "#shadcn/components/ui/textarea";
+
+const meta = {
+	title: "Component/Textarea",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => <Textarea placeholder="Type your message here." />,
+} satisfies Story;

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

@@ -0,0 +1,18 @@
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+	return (
+		<textarea
+			data-slot="textarea"
+			className={cn(
+				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Textarea };

package/src/shadcn/components/ui/toggle-group.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Bold, Italic, Underline } from "lucide-react";
+import {
+	ToggleGroup,
+	ToggleGroupItem,
+} from "#shadcn/components/ui/toggle-group";
+
+const meta = {
+	title: "Component/Toggle group",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<ToggleGroup variant="outline" type="multiple">
+			<ToggleGroupItem value="bold" aria-label="Toggle bold">
+				<Bold className="h-4 w-4" />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="italic" aria-label="Toggle italic">
+				<Italic className="h-4 w-4" />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+				<Underline className="h-4 w-4" />
+			</ToggleGroupItem>
+		</ToggleGroup>
+	),
+} satisfies Story;