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

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

@@ -15,7 +15,7 @@ function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
 			role="navigation"
 			aria-label="pagination"
 			data-slot="pagination"
-			className={cn("mx-auto flex w-full justify-center", className)}
+			className={cn("mx-auto", "flex", "w-full", "justify-center", className)}
 			{...props}
 		/>
 	);
@@ -28,7 +28,7 @@ function PaginationContent({
 	return (
 		<ul
 			data-slot="pagination-content"
-			className={cn("flex flex-row items-center gap-1", className)}
+			className={cn("flex", "flex-row", "items-center", "gap-1", className)}
 			{...props}
 		/>
 	);
@@ -37,7 +37,7 @@ function PaginationContent({
 function PaginationItem({ ...props }: React.ComponentProps<"li">) {
 	return (
 		<li
-			className="hover:bg-accent rounded-md"
+			className={cn("hover:bg-bg-secondary", "rounded-md")}
 			data-slot="pagination-item"
 			{...props}
 		/>
@@ -80,7 +80,7 @@ function PaginationPrevious({
 		<PaginationLink
 			aria-label="Go to previous page"
 			size="small"
-			className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+			className={cn("gap-1", "px-2.5", "sm:pl-2.5", className)}
 			{...props}
 		>
 			<ChevronLeftIcon />
@@ -97,7 +97,7 @@ function PaginationNext({
 		<PaginationLink
 			aria-label="Go to next page"
 			size="regular"
-			className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+			className={cn("gap-1", "px-2.5", "sm:pr-2.5", className)}
 			{...props}
 		>
 			<span className="hidden sm:block">Next</span>
@@ -114,7 +114,13 @@ function PaginationEllipsis({
 		<span
 			aria-hidden
 			data-slot="pagination-ellipsis"
-			className={cn("flex size-9 items-center justify-center", className)}
+			className={cn(
+				"flex",
+				"size-9",
+				"items-center",
+				"justify-center",
+				className,
+			)}
 			{...props}
 		>
 			<MoreHorizontalIcon className="size-4" />

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

@@ -4,6 +4,40 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Popover content styles
+const popoverContentStyles = cn(
+	// Layout
+	"z-50",
+	"w-72",
+	"origin-(--radix-popover-content-transform-origin)",
+	"outline-hidden",
+	// Shape
+	"rounded-md",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Background & Colors
+	"bg-bg-primary",
+	"text-text-primary",
+	// Spacing
+	"p-4",
+	// Shadow
+	"shadow-md",
+	// 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",
+);
+
 function Popover({
 	...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
@@ -28,10 +62,7 @@ function PopoverContent({
 				data-slot="popover-content"
 				align={align}
 				sideOffset={sideOffset}
-				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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-					className,
-				)}
+				className={cn(popoverContentStyles, className)}
 				{...props}
 			/>
 		</PopoverPrimitive.Portal>

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

@@ -3,6 +3,25 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Progress root styles
+const progressRootStyles = cn(
+	"relative",
+	"h-2",
+	"w-full",
+	"overflow-hidden",
+	"rounded-full",
+	"bg-bg-quaternary",
+);
+
+// Progress indicator styles
+const progressIndicatorStyles = cn(
+	"bg-bg-link",
+	"h-full",
+	"w-full",
+	"flex-1",
+	"transition-all",
+);
+
 function Progress({
 	className,
 	value,
@@ -11,15 +30,12 @@ function Progress({
 	return (
 		<ProgressPrimitive.Root
 			data-slot="progress"
-			className={cn(
-				"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-				className,
-			)}
+			className={cn(progressRootStyles, className)}
 			{...props}
 		>
 			<ProgressPrimitive.Indicator
 				data-slot="progress-indicator"
-				className="bg-primary h-full w-full flex-1 transition-all"
+				className={progressIndicatorStyles}
 				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 			/>
 		</ProgressPrimitive.Root>

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

@@ -11,19 +11,27 @@ type Story = StoryObj<typeof meta>;
 
 export const Demo = {
 	render: () => (
-		<RadioGroup defaultValue="comfortable">
-			<div className="flex items-center gap-3">
-				<RadioGroupItem value="default" id="r1" />
-				<Label htmlFor="r1">Default</Label>
-			</div>
-			<div className="flex items-center gap-3">
-				<RadioGroupItem value="comfortable" id="r2" />
-				<Label htmlFor="r2">Comfortable</Label>
-			</div>
-			<div className="flex items-center gap-3">
-				<RadioGroupItem value="compact" id="r3" />
-				<Label htmlFor="r3">Compact</Label>
-			</div>
-		</RadioGroup>
+		<div className="space-y-6">
+			<RadioGroup defaultValue="checked">
+				<div className="flex items-center gap-3">
+					<RadioGroupItem value="default" id="r1" />
+					<Label htmlFor="r1">Default</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<RadioGroupItem value="checked" id="r2" />
+					<Label htmlFor="r2">Checked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<RadioGroupItem value="disabled" id="r3" disabled />
+					<Label htmlFor="r3">Disabled</Label>
+				</div>
+			</RadioGroup>
+			<RadioGroup defaultValue="disabled-checked">
+				<div className="flex items-center gap-3">
+					<RadioGroupItem value="disabled-checked" id="r4" disabled />
+					<Label htmlFor="r4">Disabled Checked</Label>
+				</div>
+			</RadioGroup>
+		</div>
 	),
 } satisfies Story;

package/src/shadcn/components/ui/radio-group.tsx

@@ -1,6 +1,5 @@
 "use client";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { CircleIcon } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
@@ -12,7 +11,7 @@ function RadioGroup({
 	return (
 		<RadioGroupPrimitive.Root
 			data-slot="radio-group"
-			className={cn("grid gap-3", className)}
+			className={cn("grid", "gap-3", className)}
 			{...props}
 		/>
 	);
@@ -26,16 +25,54 @@ function RadioGroupItem({
 		<RadioGroupPrimitive.Item
 			data-slot="radio-group-item"
 			className={cn(
-				"border-input text-primary 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 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				// Base styles
+				"aspect-square",
+				"size-4",
+				"shrink-0",
+				"rounded-full",
+				"overflow-hidden",
+				"relative",
+				"outline-none",
+				"cursor-pointer",
+				// Animations
+				"transition-all",
+				"duration-200",
+				"active:scale-90",
+				"active:duration-75",
+				// Default state:
+				"bg-white",
+				"border-[1.6px]",
+				"border-solid",
+				"border-border-primary",
+				// Checked state:
+				"data-[state=checked]:bg-bg-link",
+				"data-[state=checked]:border-bg-link",
+				// Disabled states
+				"disabled:cursor-not-allowed",
+				"disabled:active:scale-100",
+				"disabled:bg-white",
+				"disabled:border-border-secondary",
+				"disabled:data-[state=checked]:bg-border-secondary",
+				"disabled:data-[state=checked]:border-border-secondary",
+				// Focus styles
+				"focus-visible:ring-2",
+				"focus-visible:ring-bg-link",
+				"focus-visible:ring-offset-2",
 				className,
 			)}
 			{...props}
 		>
 			<RadioGroupPrimitive.Indicator
 				data-slot="radio-group-indicator"
-				className="relative flex items-center justify-center"
+				className={cn(
+					"absolute",
+					"inset-0",
+					"flex",
+					"items-center",
+					"justify-center",
+				)}
 			>
-				<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+				<div className={cn("size-1.5", "rounded-full", "bg-white")} />
 			</RadioGroupPrimitive.Indicator>
 		</RadioGroupPrimitive.Item>
 	);

package/src/shadcn/components/ui/scroll-area.tsx

@@ -4,6 +4,34 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Scroll area viewport styles
+const scrollAreaViewportStyles = cn(
+	"size-full",
+	"rounded-[inherit]",
+	"transition-[color,box-shadow]",
+	"outline-none",
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	"focus-visible:outline-1",
+);
+
+// Scroll bar base styles
+const scrollBarBaseStyles = cn(
+	"flex",
+	"touch-none",
+	"p-px",
+	"transition-colors",
+	"select-none",
+);
+
+// Scroll bar thumb styles
+const scrollBarThumbStyles = cn(
+	"bg-border-primary",
+	"relative",
+	"flex-1",
+	"rounded-full",
+);
+
 function ScrollArea({
 	className,
 	children,
@@ -17,7 +45,7 @@ function ScrollArea({
 		>
 			<ScrollAreaPrimitive.Viewport
 				data-slot="scroll-area-viewport"
-				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+				className={scrollAreaViewportStyles}
 			>
 				{children}
 			</ScrollAreaPrimitive.Viewport>
@@ -37,18 +65,18 @@ function ScrollBar({
 			data-slot="scroll-area-scrollbar"
 			orientation={orientation}
 			className={cn(
-				"flex touch-none p-px transition-colors select-none",
+				scrollBarBaseStyles,
 				orientation === "vertical" &&
-					"h-full w-2.5 border-l border-l-transparent",
+					cn("h-full", "w-2.5", "border-l", "border-l-transparent"),
 				orientation === "horizontal" &&
-					"h-2.5 flex-col border-t border-t-transparent",
+					cn("h-2.5", "flex-col", "border-t", "border-t-transparent"),
 				className,
 			)}
 			{...props}
 		>
 			<ScrollAreaPrimitive.ScrollAreaThumb
 				data-slot="scroll-area-thumb"
-				className="bg-border relative flex-1 rounded-full"
+				className={scrollBarThumbStyles}
 			/>
 		</ScrollAreaPrimitive.ScrollAreaScrollbar>
 	);

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

@@ -5,7 +5,6 @@ import {
 	SelectContent,
 	SelectGroup,
 	SelectItem,
-	SelectLabel,
 	SelectTrigger,
 	SelectValue,
 } from "#shadcn/components/ui/select";
@@ -25,7 +24,6 @@ export const Demo = {
 			</SelectTrigger>
 			<SelectContent>
 				<SelectGroup>
-					<SelectLabel>Fruits</SelectLabel>
 					<SelectItem value="apple">Apple</SelectItem>
 					<SelectItem value="banana">Banana</SelectItem>
 					<SelectItem value="blueberry">Blueberry</SelectItem>

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}
 		/>
 	);