@health-samurai/react-components 0.0.0-alpha.4 → 0.0.0-alpha.6

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

@@ -4,34 +4,79 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import type * as React from "react";
 import { cn } from "#shadcn/lib/utils";
 
-const selectTriggerVariants = cva(
-	cn(
-		"border-border-primary hover:border-border-primary_hover data-[placeholder]:text-text-quternary selection:bg-bg-primary",
-		"selection:text-text-primary-foreground [&_svg:not([class*='text-'])]:text-text-quternary flex w-fit items-center justify-between",
-		"gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none",
-		"disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-text-disabled focus-visible:ring-2 focus-visible:ring-border-link",
-		"data-[state=open]:ring-2 data-[state=open]:ring-border-link disabled:bg-bg-disabled aria-invalid:ring-destructive",
-		"aria-invalid:text-text-error-primary aria-invalid:border-border-error-primary *:data-[slot=select-value]:line-clamp-1",
-		"*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
-		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-	),
-	{
-		variants: {
-			size: {
-				regular: "h-9",
-				small: "h-8",
-			},
-			variant: {
-				default: "",
-				compound: "border-r-0 typo-label",
-			},
+// Base select trigger styles
+const baseSelectTriggerStyles = cn(
+	// Layout
+	"flex",
+	"w-full",
+	"items-center",
+	"justify-between",
+	"gap-2",
+	"whitespace-nowrap",
+	// Shape
+	"rounded-md",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Background & Colors
+	"bg-transparent",
+	"text-sm",
+	// Spacing
+	"px-3",
+	"py-2",
+	// Transitions
+	"transition-colors",
+	"duration-300",
+	"outline-none",
+	// Hover
+	"hover:border-border-primary_hover",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Placeholder
+	"data-[placeholder]:text-text-tertiary",
+	// Selection
+	"selection:bg-selection",
+	"selection:text-text-primary",
+	// SVG icons
+	"[&_svg:not([class*='text-'])]:text-text-tertiary",
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+	// Value styles
+	"*:data-[slot=select-value]:line-clamp-1",
+	"*:data-[slot=select-value]:flex",
+	"*:data-[slot=select-value]:items-center",
+	"*:data-[slot=select-value]:gap-2",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:cursor-not-allowed",
+	"disabled:text-text-disabled",
+	"disabled:bg-bg-disabled",
+	"disabled:border-border-disabled",
+	// Invalid
+	"aria-invalid:text-text-error-primary",
+	"aria-invalid:border-border-error",
+	"aria-invalid:ring-2",
+	"aria-invalid:ring-utility-red/70",
+);
+
+const selectTriggerVariants = cva(baseSelectTriggerStyles, {
+	variants: {
+		size: {
+			regular: cn("h-9"),
+			small: cn("h-8"),
 		},
-		defaultVariants: {
-			size: "regular",
-			variant: "default",
+		variant: {
+			default: cn(""),
+			compound: cn("border-r-0", "typo-label"),
 		},
 	},
-);
+	defaultVariants: {
+		size: "regular",
+		variant: "default",
+	},
+});
 
 function Select({
 	...props
@@ -67,7 +112,7 @@ function SelectTrigger({
 		>
 			{children}
 			<SelectPrimitive.Icon asChild>
-				<ChevronDownIcon className="size-4 opacity-50" />
+				<ChevronDownIcon />
 			</SelectPrimitive.Icon>
 		</SelectPrimitive.Trigger>
 	);
@@ -84,9 +129,47 @@ function SelectContent({
 			<SelectPrimitive.Content
 				data-slot="select-content"
 				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+					// Layout
+					"relative",
+					"z-50",
+					"group",
+					"min-w-[8rem]",
+					"max-h-(--radix-select-content-available-height)",
+					"origin-(--radix-select-content-transform-origin)",
+					"overflow-x-hidden",
+					"overflow-y-auto",
+					// Shape
+					"rounded-md",
+					// Borders
+					"border",
+					"border-border-primary",
+					// Background & Colors
+					"bg-bg-primary",
+					"text-text-primary",
+					// Spacing
+					"py-1",
+					// Shadow
+					"shadow-lg",
+					// Animations - open
+					"data-[state=open]:animate-in",
+					"data-[state=open]:fade-in-0",
+					"data-[state=open]:zoom-in-95",
+					// Animations - closed
+					"data-[state=closed]:animate-out",
+					"data-[state=closed]:fade-out-0",
+					"data-[state=closed]:zoom-out-95",
+					// Slide animations
+					"data-[side=bottom]:slide-in-from-top-2",
+					"data-[side=left]:slide-in-from-right-2",
+					"data-[side=right]:slide-in-from-left-2",
+					"data-[side=top]:slide-in-from-bottom-2",
 					position === "popper" &&
-						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+						cn(
+							"data-[side=bottom]:translate-y-1",
+							"data-[side=left]:-translate-x-1",
+							"data-[side=right]:translate-x-1",
+							"data-[side=top]:-translate-y-1",
+						),
 					className,
 				)}
 				position={position}
@@ -97,7 +180,12 @@ function SelectContent({
 					className={cn(
 						"p-1",
 						position === "popper" &&
-							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+							cn(
+								"h-[var(--radix-select-trigger-height)]",
+								"w-full",
+								"min-w-[var(--radix-select-trigger-width)]",
+								"scroll-my-1",
+							),
 					)}
 				>
 					{children}
@@ -115,7 +203,13 @@ function SelectLabel({
 	return (
 		<SelectPrimitive.Label
 			data-slot="select-label"
-			className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+			className={cn(
+				"text-text-tertiary",
+				"px-2",
+				"py-1.5",
+				"typo-label",
+				className,
+			)}
 			{...props}
 		/>
 	);
@@ -130,12 +224,62 @@ function SelectItem({
 		<SelectPrimitive.Item
 			data-slot="select-item"
 			className={cn(
-				"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+				// Layout
+				"relative",
+				"flex",
+				"w-full",
+				"items-center",
+				"cursor-default",
+				"select-none",
+				// Shape
+				"rounded-md",
+				// Spacing
+				"py-1.5",
+				"pl-3",
+				"pr-8",
+				"mb-0.5",
+				"last:mb-0",
+				// Typography
+				"text-sm",
+				"text-text-primary",
+				// Interaction
+				"outline-hidden",
+				// Hover
+				"hover:bg-bg-tertiary",
+				// Active
+				"active:text-text-primary",
+				// Focus
+				"focus-visible:bg-bg-tertiary",
+				// Checked state
+				"data-[state=checked]:bg-bg-tertiary",
+				"data-[state=checked]:text-text-primary",
+				"group-hover:data-[state=checked]:bg-transparent",
+				// Disabled
+				"data-[disabled]:pointer-events-none",
+				"data-[disabled]:opacity-50",
+				// SVG icons
+				"[&_svg:not([class*='text-'])]:text-text-tertiary",
+				"[&_svg]:pointer-events-none",
+				"[&_svg]:shrink-0",
+				"[&_svg:not([class*='size-'])]:size-4",
+				// Span styles
+				"*:[span]:last:flex",
+				"*:[span]:last:items-center",
+				"*:[span]:last:gap-2",
 				className,
 			)}
 			{...props}
 		>
-			<span className="absolute right-2 flex size-3.5 items-center justify-center">
+			<span
+				className={cn(
+					"absolute",
+					"right-2",
+					"flex",
+					"size-3.5",
+					"items-center",
+					"justify-center",
+				)}
+			>
 				<SelectPrimitive.ItemIndicator>
 					<CheckIcon className="size-4" />
 				</SelectPrimitive.ItemIndicator>
@@ -152,7 +296,14 @@ function SelectSeparator({
 	return (
 		<SelectPrimitive.Separator
 			data-slot="select-separator"
-			className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+			className={cn(
+				"bg-border-separator",
+				"pointer-events-none",
+				"-mx-1",
+				"my-1",
+				"h-px",
+				className,
+			)}
 			{...props}
 		/>
 	);

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

@@ -4,6 +4,20 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Separator styles
+const separatorStyles = cn(
+	// Background
+	"bg-border-separator",
+	// Layout
+	"shrink-0",
+	// Horizontal orientation
+	"data-[orientation=horizontal]:h-px",
+	"data-[orientation=horizontal]:w-full",
+	// Vertical orientation
+	"data-[orientation=vertical]:h-full",
+	"data-[orientation=vertical]:w-px",
+);
+
 function Separator({
 	className,
 	orientation = "horizontal",
@@ -15,11 +29,7 @@ function Separator({
 			data-slot="separator"
 			decorative={decorative}
 			orientation={orientation}
-			className={cn(
-				"bg-bg-quaternary shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full",
-				"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
-				className,
-			)}
+			className={cn(separatorStyles, className)}
 			{...props}
 		/>
 	);

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

@@ -477,35 +477,77 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 	);
 }
 
-const sidebarMenuButtonVariants = cva(
-	cn(
-		"typo-body text-text-secondary flex items-center gap-2 overflow-hidden rounded-lg py-2 px-[0.44rem] outline-hidden ",
-		"ring-sidebar-ring transition-all focus-visible:ring-2 active:bg-bg-quaternary disabled:pointer-events-none",
-		"disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-		"data-[active=true]:bg-bg-brand-secondary data-[active=true]:text-text-primary data-[state=open]:hover:bg-sidebar-accent",
-		"data-[state=open]:hover:text-sidebar-accent-foreground  group-data-[collapsible=icon]:py-2! group-data-[collapsible=icon]:px-[0.44rem]!",
-		"[&>span:last-child]:truncate [&>svg]:size-5 [&>svg]:shrink-0 hover:bg-bg-secondary hover:text-text-primary",
-		"data-[active=true]:[&>svg]:text-text-brand-primary w-full",
-	),
-	{
-		variants: {
-			variant: {
-				default: "",
-				outline:
-					"shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-			},
-			size: {
-				default: "",
-				sm: "",
-				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-			},
+// Base sidebar menu button styles
+const baseSidebarMenuButtonStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"gap-2",
+	"w-full",
+	"overflow-hidden",
+	// Shape
+	"rounded-lg",
+	// Spacing
+	"py-2",
+	"px-[0.44rem]",
+	// Typography
+	"typo-body",
+	"text-text-secondary",
+	// Interaction
+	"outline-hidden",
+	"transition-all",
+	"cursor-pointer",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Hover
+	"hover:bg-bg-secondary",
+	"hover:text-text-primary",
+	// Active
+	"active:bg-bg-quaternary",
+	"data-[active=true]:bg-bg-brand-secondary",
+	"data-[active=true]:text-text-primary",
+	"data-[active=true]:[&>svg]:text-text-brand-primary",
+	// Open state
+	"data-[state=open]:hover:bg-bg-secondary",
+	"data-[state=open]:hover:text-text-primary",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+	"aria-disabled:pointer-events-none",
+	"aria-disabled:opacity-50",
+	// Group styles
+	"group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+	"group-data-[collapsible=icon]:py-2!",
+	"group-data-[collapsible=icon]:px-[0.44rem]!",
+	// Content styles
+	"[&>span:last-child]:truncate",
+	"[&>svg]:size-5",
+	"[&>svg]:shrink-0",
+);
+
+const sidebarMenuButtonVariants = cva(baseSidebarMenuButtonStyles, {
+	variants: {
+		variant: {
+			default: cn(""),
+			outline: cn(
+				"shadow-[0_0_0_1px_hsl(var(--sidebar-border))]",
+				"hover:bg-bg-secondary",
+				"hover:text-text-primary",
+				"hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			),
 		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
+		size: {
+			default: cn(""),
+			sm: cn(""),
+			lg: cn("h-12", "text-sm", "group-data-[collapsible=icon]:p-0!"),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
 
 function SidebarMenuButton({
 	asChild = false,

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

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

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

@@ -4,6 +4,84 @@ import * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Slider root styles
+const sliderRootStyles = cn(
+	// Layout
+	"relative",
+	"flex",
+	"w-full",
+	"items-center",
+	// Interaction
+	"touch-none",
+	"select-none",
+	// Disabled
+	"data-[disabled]:opacity-50",
+	// Vertical orientation
+	"data-[orientation=vertical]:h-full",
+	"data-[orientation=vertical]:min-h-44",
+	"data-[orientation=vertical]:w-auto",
+	"data-[orientation=vertical]:flex-col",
+);
+
+// Slider track styles
+const sliderTrackStyles = cn(
+	// Background
+	"bg-bg-quaternary",
+	// Layout
+	"relative",
+	"grow",
+	"overflow-hidden",
+	// Shape
+	"rounded-full",
+	// Horizontal orientation
+	"data-[orientation=horizontal]:h-1.5",
+	"data-[orientation=horizontal]:w-full",
+	// Vertical orientation
+	"data-[orientation=vertical]:h-full",
+	"data-[orientation=vertical]:w-1.5",
+);
+
+// Slider range styles
+const sliderRangeStyles = cn(
+	// Background
+	"bg-bg-link",
+	// Layout
+	"absolute",
+	// Horizontal orientation
+	"data-[orientation=horizontal]:h-full",
+	// Vertical orientation
+	"data-[orientation=vertical]:w-full",
+);
+
+// Slider thumb styles
+const sliderThumbStyles = cn(
+	// Layout
+	"block",
+	"size-4",
+	"shrink-0",
+	// Shape
+	"rounded-full",
+	// Borders
+	"border",
+	"border-border-link",
+	// Background
+	"bg-bg-primary",
+	// Shadow
+	"shadow-sm",
+	// Transitions
+	"transition-[color,box-shadow]",
+	// Hover
+	"hover:ring-4",
+	"hover:ring-utility-blue/70",
+	// Focus
+	"focus-visible:ring-4",
+	"focus-visible:ring-utility-blue/70",
+	"focus-visible:outline-hidden",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+);
+
 function Slider({
 	className,
 	defaultValue,
@@ -29,23 +107,16 @@ function Slider({
 			{...(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,
-			)}
+			className={cn(sliderRootStyles, 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",
-				)}
+				className={sliderTrackStyles}
 			>
 				<SliderPrimitive.Range
 					data-slot="slider-range"
-					className={cn(
-						"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
-					)}
+					className={sliderRangeStyles}
 				/>
 			</SliderPrimitive.Track>
 			{Array.from({ length: _values.length }, (_, index) => (
@@ -53,7 +124,7 @@ function Slider({
 					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"
+					className={sliderThumbStyles}
 				/>
 			))}
 		</SliderPrimitive.Root>

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { toast } from "sonner";
 import { Button } from "#shadcn/components/ui/button";
+import { Toaster, toast } from "#shadcn/components/ui/sonner";
 
 const meta = {
 	title: "Component/Sonner",
@@ -11,19 +11,23 @@ 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>
+		<div>
+			<Button
+				variant="secondary"
+				onClick={() =>
+					toast("Event has been created", {
+						description: "Sunday, December 03, 2023 at 9:00 AM",
+						action: {
+							label: "Undo",
+							variant: "primary",
+							onClick: () => console.log("Undo"),
+						},
+					})
+				}
+			>
+				Show Toast
+			</Button>
+			<Toaster position="top-center" />
+		</div>
 	),
 } satisfies Story;

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

@@ -1,12 +1,22 @@
+"use client";
+
+import type { VariantProps } from "class-variance-authority";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner, type ToasterProps } from "sonner";
+import {
+	Toaster as Sonner,
+	toast as sonnerToast,
+	type ToasterProps,
+} from "sonner";
+import { Button, type buttonVariants } from "./button";
 
 const Toaster = ({ ...props }: ToasterProps) => {
 	const { theme = "system" } = useTheme();
 
 	return (
 		<Sonner
-			theme={theme as ToasterProps["theme"] & {}}
+			theme={
+				theme === "system" ? "system" : theme === "dark" ? "dark" : "light"
+			}
 			className="toaster group"
 			style={
 				{
@@ -20,4 +30,44 @@ const Toaster = ({ ...props }: ToasterProps) => {
 	);
 };
 
-export { Toaster };
+// Custom toast wrapper with our buttons
+const toast = (
+	message: string,
+	options?: {
+		description?: string;
+		action?: {
+			label: string;
+			onClick: () => void;
+			variant?: VariantProps<typeof buttonVariants>["variant"];
+		};
+		cancel?: {
+			label: string;
+			onClick: () => void;
+			variant?: VariantProps<typeof buttonVariants>["variant"];
+		};
+	},
+) => {
+	return sonnerToast(message, {
+		...options,
+		action: options?.action ? (
+			<Button
+				variant={options.action.variant || "secondary"}
+				size="small"
+				onClick={options.action.onClick}
+			>
+				{options.action.label}
+			</Button>
+		) : undefined,
+		cancel: options?.cancel ? (
+			<Button
+				variant={options.cancel.variant || "ghost"}
+				size="small"
+				onClick={options.cancel.onClick}
+			>
+				{options.cancel.label}
+			</Button>
+		) : undefined,
+	});
+};
+
+export { Toaster, toast };