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

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

@@ -2,16 +2,29 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Card styles
+const cardStyles = cn(
+	// Layout
+	"flex",
+	"flex-col",
+	"gap-6",
+	// Shape
+	"rounded-xl",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Background & Colors
+	"bg-bg-primary",
+	"text-text-primary",
+	// Spacing
+	"py-6",
+	// Shadow
+	"shadow-sm",
+);
+
 function Card({ className, ...props }: React.ComponentProps<"div">) {
 	return (
-		<div
-			data-slot="card"
-			className={cn(
-				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-				className,
-			)}
-			{...props}
-		/>
+		<div data-slot="card" className={cn(cardStyles, className)} {...props} />
 	);
 }
 
@@ -20,7 +33,15 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="card-header"
 			className={cn(
-				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				"@container/card-header",
+				"grid",
+				"auto-rows-min",
+				"grid-rows-[auto_auto]",
+				"items-start",
+				"gap-1.5",
+				"px-6",
+				"has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+				"[.border-b]:pb-6",
 				className,
 			)}
 			{...props}
@@ -32,7 +53,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="card-title"
-			className={cn("leading-none font-semibold", className)}
+			className={cn("leading-none", "font-semibold", className)}
 			{...props}
 		/>
 	);
@@ -42,7 +63,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="card-description"
-			className={cn("text-muted-foreground text-sm", className)}
+			className={cn("text-text-secondary", "text-sm", className)}
 			{...props}
 		/>
 	);
@@ -53,7 +74,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="card-action"
 			className={cn(
-				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				"col-start-2",
+				"row-span-2",
+				"row-start-1",
+				"self-start",
+				"justify-self-end",
 				className,
 			)}
 			{...props}
@@ -75,7 +100,13 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="card-footer"
-			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			className={cn(
+				"flex",
+				"items-center",
+				"px-6",
+				"[.border-t]:pt-6",
+				className,
+			)}
 			{...props}
 		/>
 	);

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

@@ -1,3 +1,4 @@
+"use client";
 import useEmblaCarousel, {
 	type UseEmblaCarouselType,
 } from "embla-carousel-react";

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

@@ -14,36 +14,32 @@ export const Demo = {
 		<div className="flex flex-col gap-6">
 			<div className="flex items-center gap-3">
 				<Checkbox id="terms" />
-				<Label htmlFor="terms">Accept terms and conditions</Label>
+				<Label htmlFor="terms">Unchecked</Label>
 			</div>
-			<div className="flex items-start gap-3">
+			<div className="flex items-center gap-3">
 				<Checkbox id="terms-2" defaultChecked />
-				<div className="grid gap-2">
-					<Label htmlFor="terms-2">Accept terms and conditions</Label>
-					<p className="text-muted-foreground text-sm">
-						By clicking this checkbox, you agree to the terms and conditions.
-					</p>
-				</div>
+				<Label htmlFor="terms-2">Checked</Label>
+			</div>
+			<div className="flex items-center gap-3">
+				<Checkbox id="indeterminate" checked="indeterminate" />
+				<Label htmlFor="indeterminate">Indeterminate</Label>
+			</div>
+			<div className="flex items-center gap-3">
+				<Checkbox id="disabled" disabled />
+				<Label htmlFor="disabled">Disabled unchecked</Label>
 			</div>
-			<div className="flex items-start gap-3">
-				<Checkbox id="toggle" disabled />
-				<Label htmlFor="toggle">Enable notifications</Label>
+			<div className="flex items-center gap-3">
+				<Checkbox id="disabled-checked" disabled defaultChecked />
+				<Label htmlFor="disabled-checked">Disabled checked</Label>
 			</div>
-			<Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+			<div className="flex items-center gap-3">
 				<Checkbox
-					id="toggle-2"
-					defaultChecked
-					className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+					id="disabled-indeterminate"
+					disabled
+					checked="indeterminate"
 				/>
-				<div className="grid gap-1.5 font-normal">
-					<p className="text-sm leading-none font-medium">
-						Enable notifications
-					</p>
-					<p className="text-muted-foreground text-sm">
-						You can enable or disable notifications at any time.
-					</p>
-				</div>
-			</Label>
+				<Label htmlFor="disabled-indeterminate">Disabled indeterminate</Label>
+			</div>
 		</div>
 	),
 } satisfies Story;

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

@@ -1,6 +1,6 @@
 "use client";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
@@ -13,16 +13,57 @@ function Checkbox({
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
 			className={cn(
-				"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-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 size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+				// Base styles
+				"peer",
+				"size-5",
+				"shrink-0",
+				"rounded-md",
+				"border-[1.5px]",
+				"transition-all",
+				"duration-200",
+				"outline-none",
+				"cursor-pointer",
+				"text-white",
+				// Click animation
+				"active:scale-90",
+				"active:duration-75",
+				// Default state
+				"border-border-primary",
+				"bg-transparent",
+				"hover:bg-bg-tertiary",
+				// Checked state
+				"data-[state=checked]:bg-bg-link",
+				"data-[state=checked]:border-border-link",
+				"data-[state=checked]:text-white",
+				// Indeterminate state
+				"data-[state=indeterminate]:bg-fg-link",
+				"data-[state=indeterminate]:border-fg-link",
+				"data-[state=indeterminate]:text-white",
+				// Disabled states
+				"disabled:cursor-not-allowed",
+				"disabled:active:scale-100",
+				"disabled:border-border-secondary",
+				"disabled:bg-transparent",
+				"disabled:data-[state=checked]:bg-fg-tertiary",
+				"disabled:data-[state=checked]:border-fg-tertiary",
+				"disabled:data-[state=indeterminate]:bg-fg-tertiary",
+				"disabled:data-[state=indeterminate]:border-fg-tertiary",
+				// Focus state
+				"focus-visible:ring-2",
+				"focus-visible:ring-utility-blue/70",
 				className,
 			)}
 			{...props}
 		>
 			<CheckboxPrimitive.Indicator
 				data-slot="checkbox-indicator"
-				className="flex items-center justify-center text-current transition-none"
+				className="flex items-center justify-center text-white"
 			>
-				<CheckIcon className="size-3.5" />
+				{props.checked === "indeterminate" ? (
+					<MinusIcon className="size-3.5" style={{ strokeWidth: 3 }} />
+				) : (
+					<CheckIcon className="size-3.5" style={{ strokeWidth: 3 }} />
+				)}
 			</CheckboxPrimitive.Indicator>
 		</CheckboxPrimitive.Root>
 	);

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ComboboxDemo } from "./combobox";
+
+const meta = {
+	title: "Component/Combobox",
+	component: ComboboxDemo,
+	argTypes: {},
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	render: () => (
+		<div className="w-[560px]">
+			<ComboboxDemo />
+		</div>
+	),
+} satisfies Story;

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>