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

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

@@ -0,0 +1,142 @@
+"use client";
+
+import { CheckIcon } from "lucide-react";
+import * as React from "react";
+import {
+	Command,
+	CommandEmpty,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "#shadcn/components/ui/command";
+import {
+	Select,
+	SelectContent,
+	SelectTrigger,
+	SelectValue,
+} from "#shadcn/components/ui/select";
+import { cn } from "#shadcn/lib/utils";
+
+export interface ComboboxOption {
+	value: string;
+	label: string;
+}
+
+interface ComboboxProps {
+	options: ComboboxOption[];
+	value?: string;
+	onValueChange?: (value: string) => void;
+	placeholder?: string;
+	searchPlaceholder?: string;
+	emptyText?: string;
+	disabled?: boolean;
+	className?: string;
+}
+
+export function Combobox({
+	options,
+	value,
+	onValueChange,
+	placeholder = "Select option...",
+	searchPlaceholder = "Search...",
+	emptyText = "No options found.",
+	disabled = false,
+	className,
+}: ComboboxProps) {
+	const [open, setOpen] = React.useState(false);
+	const [searchValue, setSearchValue] = React.useState("");
+	const inputRef = React.useRef<HTMLInputElement>(null);
+
+	const filteredOptions = React.useMemo(() => {
+		if (!searchValue) return options;
+		return options.filter((option) =>
+			option.label.toLowerCase().includes(searchValue.toLowerCase()),
+		);
+	}, [options, searchValue]);
+
+	const selectedOption = options.find((option) => option.value === value);
+
+	// Reset search when closing and auto-focus when opening
+	React.useEffect(() => {
+		if (!open) {
+			setSearchValue("");
+		} else {
+			// Auto-focus on search input when opening
+			setTimeout(() => {
+				inputRef.current?.focus();
+			}, 0);
+		}
+	}, [open]);
+
+	return (
+		<Select
+			value={value || ""}
+			{...(onValueChange && { onValueChange })}
+			disabled={disabled}
+			open={open}
+			onOpenChange={setOpen}
+		>
+			<SelectTrigger className={className}>
+				<SelectValue placeholder={placeholder}>
+					{selectedOption?.label}
+				</SelectValue>
+			</SelectTrigger>
+			<SelectContent className="p-0 [&_[data-radix-select-viewport]]:p-0">
+				<Command className="w-full">
+					<CommandInput
+						ref={inputRef}
+						placeholder={searchPlaceholder}
+						value={searchValue}
+						onValueChange={setSearchValue}
+					/>
+					<CommandList>
+						<CommandEmpty>{emptyText}</CommandEmpty>
+
+						{filteredOptions.map((option) => (
+							<CommandItem
+								key={option.value}
+								value={option.value}
+								data-state={value === option.value ? "checked" : undefined}
+								onSelect={(currentValue) => {
+									onValueChange?.(currentValue);
+									setOpen(false);
+								}}
+							>
+								{option.label}
+								<CheckIcon
+									className={cn(
+										"ml-auto size-4",
+										value === option.value ? "opacity-100" : "opacity-0",
+									)}
+								/>
+							</CommandItem>
+						))}
+					</CommandList>
+				</Command>
+			</SelectContent>
+		</Select>
+	);
+}
+
+// Demo component for Storybook
+const demoOptions = [
+	{ value: "next.js", label: "Next.js" },
+	{ value: "sveltekit", label: "SvelteKit" },
+	{ value: "nuxt.js", label: "Nuxt.js" },
+	{ value: "remix", label: "Remix" },
+	{ value: "astro", label: "Astro" },
+];
+
+export function ComboboxDemo() {
+	const [value, setValue] = React.useState("");
+
+	return (
+		<Combobox
+			options={demoOptions}
+			value={value}
+			onValueChange={setValue}
+			placeholder="Select framework..."
+			searchPlaceholder="Search framework..."
+		/>
+	);
+}

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

@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Demo = {
 	render: () => (
-		<Command className="rounded-lg border shadow-md md:min-w-[450px]">
+		<Command>
 			<CommandInput placeholder="Type a command or search..." />
 			<CommandList>
 				<CommandEmpty>No results found.</CommandEmpty>

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

@@ -10,6 +10,186 @@ import {
 } from "#shadcn/components/ui/dialog";
 import { cn } from "#shadcn/lib/utils";
 
+// Command Root
+const commandStyles = cn(
+	// Layout
+	"flex",
+	"h-full",
+	"w-full",
+	"flex-col",
+	"overflow-hidden",
+	"rounded-md",
+	// Colors
+	"bg-bg-primary",
+	"text-text-primary",
+);
+
+// Command Dialog
+const commandDialogContentStyles = cn(
+	// Layout
+	"overflow-hidden",
+	"p-0",
+);
+
+const commandDialogCommandStyles = cn(
+	// Group headings
+	"[&_[cmdk-group-heading]]:text-muted-foreground",
+	"[&_[cmdk-group-heading]]:px-2",
+	"[&_[cmdk-group-heading]]:font-medium",
+	// Groups
+	"[&_[cmdk-group]]:px-2",
+	"[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0",
+	// Input wrapper
+	"[&_[cmdk-input-wrapper]]:h-12",
+	"**:data-[slot=command-input-wrapper]:h-12",
+	// Input wrapper SVG
+	"[&_[cmdk-input-wrapper]_svg]:h-5",
+	"[&_[cmdk-input-wrapper]_svg]:w-5",
+	// Input
+	"[&_[cmdk-input]]:h-12",
+	// Items
+	"[&_[cmdk-item]]:px-2",
+	"[&_[cmdk-item]]:py-3",
+	// Item SVG
+	"[&_[cmdk-item]_svg]:h-5",
+	"[&_[cmdk-item]_svg]:w-5",
+);
+
+// Command Input Wrapper
+const commandInputWrapperStyles = cn(
+	// Layout
+	"flex",
+	"h-9",
+	"items-center",
+	"gap-2",
+	"px-3",
+	// Border
+	"border-b",
+	"border-border-separator",
+	// Animation
+	"transition-colors",
+	"duration-300",
+);
+
+// Command Input Icon
+const commandInputIconStyles = cn(
+	// Size
+	"size-4",
+	"shrink-0",
+	// Colors
+	"text-text-tertiary",
+);
+
+// Command Input
+const commandInputStyles = cn(
+	// Layout
+	"flex",
+	"h-10",
+	"w-full",
+	"rounded-md",
+	"py-3",
+	// Background
+	"bg-transparent",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-primary",
+	"placeholder:text-text-quternary",
+	"file:text-text-primary",
+	// States
+	"outline-hidden",
+	"disabled:cursor-not-allowed",
+	"disabled:opacity-50",
+);
+
+// Command List
+const commandListStyles = cn(
+	// Layout
+	"max-h-[300px]",
+	"scroll-py-1",
+	// Overflow
+	"overflow-x-hidden",
+	"overflow-y-auto",
+	"p-2",
+);
+
+// Command Empty
+const commandEmptyStyles = cn(
+	// Layout
+	"py-6",
+	"text-center",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-tertiary",
+);
+
+// Command Group
+const commandGroupStyles = cn(
+	// Layout
+	"overflow-hidden",
+	"p-1",
+	"group",
+	// Colors
+	"text-text-tertiary",
+	// Group heading styles
+	"[&_[cmdk-group-heading]]:text-text-quaternary",
+	"[&_[cmdk-group-heading]]:px-2",
+	"[&_[cmdk-group-heading]]:py-1.5",
+	"[&_[cmdk-group-heading]]:text-xs",
+);
+
+// Command Separator
+const commandSeparatorStyles = cn(
+	// Layout
+	"-mx-1",
+	"h-px",
+	// Colors
+	"bg-border-separator",
+);
+
+// Command Item
+const commandItemStyles = cn(
+	// Layout
+	"relative",
+	"flex",
+	"cursor-default",
+	"items-center",
+	"gap-2",
+	"rounded-md",
+	"px-2",
+	"py-1.5",
+	"select-none",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-primary",
+	// States
+	"outline-hidden",
+	"data-[state=checked]:bg-bg-tertiary",
+	"group-hover:data-[state=checked]:bg-transparent",
+	"hover:bg-bg-tertiary",
+	"data-[state=checked]:text-text-primary",
+	"data-[disabled=true]:pointer-events-none",
+	"data-[disabled=true]:opacity-50",
+	// SVG styles
+	"[&_svg:not([class*='text-'])]:text-text-quaternary",
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+);
+
+// Command Shortcut
+const commandShortcutStyles = cn(
+	// Layout
+	"ml-auto",
+	// Typography
+	"typo-body",
+	"tracking-widest",
+	// Colors
+	"text-text-quaternary",
+);
+
 function Command({
 	className,
 	...props
@@ -17,10 +197,7 @@ function Command({
 	return (
 		<CommandPrimitive
 			data-slot="command"
-			className={cn(
-				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-				className,
-			)}
+			className={cn(commandStyles, className)}
 			{...props}
 		/>
 	);
@@ -46,12 +223,10 @@ function CommandDialog({
 				<DialogDescription>{description}</DialogDescription>
 			</DialogHeader>
 			<DialogContent
-				className={cn("overflow-hidden p-0", className)}
+				className={cn(commandDialogContentStyles, className)}
 				showCloseButton={showCloseButton}
 			>
-				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-					{children}
-				</Command>
+				<Command className={commandDialogCommandStyles}>{children}</Command>
 			</DialogContent>
 		</Dialog>
 	);
@@ -64,15 +239,12 @@ function CommandInput({
 	return (
 		<div
 			data-slot="command-input-wrapper"
-			className="flex h-9 items-center gap-2 border-b px-3"
+			className={commandInputWrapperStyles}
 		>
-			<SearchIcon className="size-4 shrink-0 opacity-50" />
+			<SearchIcon className={commandInputIconStyles} />
 			<CommandPrimitive.Input
 				data-slot="command-input"
-				className={cn(
-					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-					className,
-				)}
+				className={cn(commandInputStyles, className)}
 				{...props}
 			/>
 		</div>
@@ -86,10 +258,7 @@ function CommandList({
 	return (
 		<CommandPrimitive.List
 			data-slot="command-list"
-			className={cn(
-				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-				className,
-			)}
+			className={cn(commandListStyles, className)}
 			{...props}
 		/>
 	);
@@ -101,7 +270,7 @@ function CommandEmpty({
 	return (
 		<CommandPrimitive.Empty
 			data-slot="command-empty"
-			className="py-6 text-center text-sm"
+			className={commandEmptyStyles}
 			{...props}
 		/>
 	);
@@ -114,10 +283,7 @@ function CommandGroup({
 	return (
 		<CommandPrimitive.Group
 			data-slot="command-group"
-			className={cn(
-				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-				className,
-			)}
+			className={cn(commandGroupStyles, className)}
 			{...props}
 		/>
 	);
@@ -130,7 +296,7 @@ function CommandSeparator({
 	return (
 		<CommandPrimitive.Separator
 			data-slot="command-separator"
-			className={cn("bg-border -mx-1 h-px", className)}
+			className={cn(commandSeparatorStyles, className)}
 			{...props}
 		/>
 	);
@@ -143,14 +309,7 @@ function CommandItem({
 	return (
 		<CommandPrimitive.Item
 			data-slot="command-item"
-			className={cn(
-				"data-[selected=true]:bg-(--color-surface-1) text-(--color-elements-assistive)",
-				"data-[selected=true]:text-(--color-elements-readable) [&_svg:not([class*='text-'])]:text-muted-foreground",
-				"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
-				"data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none",
-				"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
+			className={cn(commandItemStyles, className)}
 			{...props}
 		/>
 	);
@@ -163,10 +322,7 @@ function CommandShortcut({
 	return (
 		<span
 			data-slot="command-shortcut"
-			className={cn(
-				"text-muted-foreground ml-auto text-xs tracking-widest",
-				className,
-			)}
+			className={cn(commandShortcutStyles, className)}
 			{...props}
 		/>
 	);

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

@@ -4,6 +4,89 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Dialog overlay styles
+const dialogOverlayStyles = cn(
+	// Layout
+	"fixed",
+	"inset-0",
+	"z-50",
+	// Background
+	"bg-black/50",
+	// Animations - open
+	"data-[state=open]:animate-in",
+	"data-[state=open]:fade-in-0",
+	// Animations - closed
+	"data-[state=closed]:animate-out",
+	"data-[state=closed]:fade-out-0",
+);
+
+// Dialog content styles
+const dialogContentStyles = cn(
+	// Layout
+	"fixed",
+	"top-[50%]",
+	"left-[50%]",
+	"z-50",
+	"grid",
+	"w-full",
+	"max-w-[calc(100%-2rem)]",
+	"translate-x-[-50%]",
+	"translate-y-[-50%]",
+	"gap-4",
+	// Shape
+	"rounded-lg",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Background & Colors
+	"bg-bg-primary",
+	// Spacing
+	"p-6",
+	// Shadow
+	"shadow-lg",
+	// Animation duration
+	"duration-200",
+	// Responsive
+	"sm:max-w-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",
+);
+
+// Dialog close button styles
+const dialogCloseButtonStyles = cn(
+	// Layout
+	"absolute",
+	"top-4",
+	"right-4",
+	// Shape
+	"rounded-xs",
+	// Opacity
+	"opacity-70",
+	"hover:opacity-100",
+	// Transitions
+	"transition-opacity",
+	// Focus
+	"focus:ring-2",
+	"focus:ring-utility-blue/70",
+	"focus:ring-offset-2",
+	"focus:outline-hidden",
+	// Disabled
+	"disabled:pointer-events-none",
+	// SVG styles
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+	// States
+	"data-[state=open]:bg-bg-secondary",
+	"data-[state=open]:text-text-secondary",
+);
+
 function Dialog({
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
@@ -35,10 +118,7 @@ function DialogOverlay({
 	return (
 		<DialogPrimitive.Overlay
 			data-slot="dialog-overlay"
-			className={cn(
-				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-				className,
-			)}
+			className={cn(dialogOverlayStyles, className)}
 			{...props}
 		/>
 	);
@@ -57,17 +137,14 @@ function DialogContent({
 			<DialogOverlay />
 			<DialogPrimitive.Content
 				data-slot="dialog-content"
-				className={cn(
-					"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-					className,
-				)}
+				className={cn(dialogContentStyles, className)}
 				{...props}
 			>
 				{children}
 				{showCloseButton && (
 					<DialogPrimitive.Close
 						data-slot="dialog-close"
-						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+						className={dialogCloseButtonStyles}
 					>
 						<XIcon />
 						<span className="sr-only">Close</span>
@@ -82,7 +159,14 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="dialog-header"
-			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			className={cn(
+				"flex",
+				"flex-col",
+				"gap-2",
+				"text-center",
+				"sm:text-left",
+				className,
+			)}
 			{...props}
 		/>
 	);
@@ -93,7 +177,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="dialog-footer"
 			className={cn(
-				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				"flex",
+				"flex-col-reverse",
+				"gap-2",
+				"sm:flex-row",
+				"sm:justify-end",
 				className,
 			)}
 			{...props}
@@ -108,7 +196,7 @@ function DialogTitle({
 	return (
 		<DialogPrimitive.Title
 			data-slot="dialog-title"
-			className={cn("text-lg leading-none font-semibold", className)}
+			className={cn("text-lg", "leading-none", "font-semibold", className)}
 			{...props}
 		/>
 	);
@@ -121,7 +209,7 @@ function DialogDescription({
 	return (
 		<DialogPrimitive.Description
 			data-slot="dialog-description"
-			className={cn("text-muted-foreground text-sm", className)}
+			className={cn("text-text-secondary", "text-sm", className)}
 			{...props}
 		/>
 	);