@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

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

@@ -1,27 +1,110 @@
+"use client";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { CheckIcon, MinusIcon } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Checkbox root styles
+const baseCheckboxStyles = cn(
+	// Layout
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"peer",
+	"shrink-0",
+	// Shape
+	"rounded-[2px]",
+	// Interaction
+	"outline-none",
+	"cursor-pointer",
+	// Animation
+	"transition-colors",
+	"duration-200",
+	// Default state
+	"bg-bg-primary",
+	"border-border-dark",
+	// Checked state
+	"data-[state=checked]:bg-[var(--color-fg-link)]",
+	"data-[state=checked]:border-[var(--color-fg-link)]",
+	"data-[state=checked]:text-white",
+	// Indeterminate state
+	"data-[state=indeterminate]:bg-[var(--color-fg-link)]",
+	"data-[state=indeterminate]:border-[var(--color-fg-link)]",
+	"data-[state=indeterminate]:text-white",
+	// Disabled states
+	"disabled:cursor-not-allowed",
+	"disabled:bg-bg-primary",
+	"disabled:border-[var(--color-fg-disabled)]",
+	"disabled:data-[state=checked]:bg-[var(--color-fg-disabled)]",
+	"disabled:data-[state=checked]:border-[var(--color-fg-disabled)]",
+	"disabled:data-[state=checked]:text-[var(--color-fg-secondary)]",
+	"disabled:data-[state=indeterminate]:bg-[var(--color-fg-disabled)]",
+	"disabled:data-[state=indeterminate]:border-[var(--color-fg-disabled)]",
+	"disabled:data-[state=indeterminate]:text-[var(--color-fg-secondary)]",
+	// Focus styles
+	"focus-visible:ring-4",
+	"focus-visible:ring-ring-blue",
+	"focus-visible:border-border-link",
+	// Hover styles
+	"disabled:hover:ring-0",
+);
+
+const checkboxVariants = cva(baseCheckboxStyles, {
+	variants: {
+		size: {
+			regular: "size-5 border-[1.5px]",
+			small: "size-4 border-[1.5px]",
+		},
+	},
+	defaultVariants: {
+		size: "regular",
+	},
+});
+
+// Checkbox indicator styles
+const checkboxIndicatorStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"justify-center",
+	// Colors
+	"text-white",
+	"disabled:text-[var(--color-fg-secondary)]",
+);
+
 function Checkbox({
 	className,
+	size,
 	...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+}: React.ComponentProps<typeof CheckboxPrimitive.Root> &
+	VariantProps<typeof checkboxVariants>) {
 	return (
 		<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",
-				className,
-			)}
+			className={cn(checkboxVariants({ size }), className)}
 			{...props}
 		>
 			<CheckboxPrimitive.Indicator
+				forceMount
 				data-slot="checkbox-indicator"
-				className="flex items-center justify-center text-current transition-none"
+				className={cn(
+					checkboxIndicatorStyles,
+					"data-[state=unchecked]:opacity-0",
+				)}
 			>
-				<CheckIcon className="size-3.5" />
+				{props.checked === "indeterminate" ? (
+					<MinusIcon
+						className={cn(size === "small" ? "size-2.5" : "size-3.5")}
+						style={{ strokeWidth: 3 }}
+					/>
+				) : (
+					<CheckIcon
+						className={cn(size === "small" ? "size-2.5" : "size-3.5")}
+						style={{ strokeWidth: 3 }}
+					/>
+				)}
 			</CheckboxPrimitive.Indicator>
 		</CheckboxPrimitive.Root>
 	);

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

@@ -0,0 +1,148 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Combobox, MultiCombobox } from "./combobox";
+
+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" },
+];
+
+interface ComboboxWrapperProps {
+	multi?: boolean;
+	disabled?: boolean;
+}
+
+function ComboboxWrapper({
+	multi = false,
+	disabled = false,
+}: ComboboxWrapperProps) {
+	const [value, setValue] = useState("");
+	const [multiValue, setMultiValue] = useState<string[]>([]);
+
+	if (multi) {
+		return (
+			<MultiCombobox
+				options={demoOptions}
+				value={multiValue}
+				onValueChange={setMultiValue}
+				placeholder="Select frameworks..."
+				searchPlaceholder="Search framework..."
+				disabled={disabled}
+			/>
+		);
+	}
+
+	return (
+		<Combobox
+			options={demoOptions}
+			value={value}
+			onValueChange={setValue}
+			placeholder="Select framework..."
+			searchPlaceholder="Search framework..."
+			disabled={disabled}
+		/>
+	);
+}
+
+const meta = {
+	title: "Component/Combobox",
+	component: ComboboxWrapper,
+	parameters: {
+		layout: "centered",
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<p className="sbdocs-p">
+						Combobox is a searchable select component. When the dropdown opens,
+						it displays a <strong>Command</strong> component for search and
+						selection. See the Command component for all available styling
+						options.
+					</p>
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		multi: {
+			control: "boolean",
+		},
+		disabled: {
+			control: "boolean",
+		},
+	},
+	args: {
+		multi: false,
+		disabled: false,
+	},
+} satisfies Meta<typeof ComboboxWrapper>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	tags: ["!dev"],
+	render: ({ multi = false, disabled = false }) => (
+		<div className="w-[300px]">
+			<ComboboxWrapper multi={multi} disabled={disabled} />
+		</div>
+	),
+} satisfies Story;
+
+export const Demo = {
+	tags: ["!autodocs"],
+	render: () => {
+		const [value, setValue] = useState("");
+		const [multiValue, setMultiValue] = useState<string[]>([]);
+
+		return (
+			<div className="space-y-8">
+				{/* Single */}
+				<div>
+					<h3 className="typo-label mb-4">Single select</h3>
+					<div className="w-[300px]">
+						<Combobox
+							options={demoOptions}
+							value={value}
+							onValueChange={setValue}
+							placeholder="Select framework..."
+							searchPlaceholder="Search framework..."
+						/>
+					</div>
+				</div>
+
+				{/* Multi */}
+				<div>
+					<h3 className="typo-label mb-4">Multi select</h3>
+					<div className="w-[300px]">
+						<MultiCombobox
+							options={demoOptions}
+							value={multiValue}
+							onValueChange={setMultiValue}
+							placeholder="Select frameworks..."
+							searchPlaceholder="Search framework..."
+						/>
+					</div>
+				</div>
+
+				{/* Disabled */}
+				<div>
+					<h3 className="typo-label mb-4">Disabled</h3>
+					<div className="w-[300px]">
+						<Combobox
+							options={demoOptions}
+							placeholder="Select framework..."
+							disabled
+						/>
+					</div>
+				</div>
+			</div>
+		);
+	},
+} satisfies Story;

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

@@ -0,0 +1,324 @@
+"use client";
+
+import { CheckIcon, X } 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";
+import { Tag } from "../../../components/tag";
+
+/* ==========================================================================
+   Styles
+   ========================================================================== */
+
+const selectContentStyles = cn(
+	// Spacing
+	"p-0",
+	// Radix viewport reset
+	"[&_[data-radix-select-viewport]]:p-0",
+);
+
+const commandStyles = cn(
+	// Layout
+	"w-full",
+);
+
+const checkIconStyles = cn(
+	// Layout
+	"ml-auto",
+	// Size
+	"size-4",
+);
+
+const checkIconVisibleStyles = cn(checkIconStyles, "opacity-100");
+
+const checkIconHiddenStyles = cn(checkIconStyles, "opacity-0");
+
+const triggerWithValueStyles = cn("text-text-primary");
+
+const triggerWithTagsStyles = cn("pl-2");
+
+const clearButtonStyles = cn(
+	// Layout
+	"ml-auto",
+	"shrink-0",
+	// Size
+	"size-4",
+	// Colors
+	"text-text-tertiary",
+	"hover:text-text-primary",
+	// Interactions
+	"cursor-pointer",
+	"pointer-events-auto",
+	"z-10",
+	// Transitions
+	"transition-colors",
+);
+
+/* ==========================================================================
+   Types
+   ========================================================================== */
+
+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;
+}
+
+/* ==========================================================================
+   Components
+   ========================================================================== */
+
+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);
+
+	const changeOpen = (newOpen: boolean) => {
+		if (!newOpen) {
+			setSearchValue("");
+		} else {
+			inputRef.current?.focus();
+		}
+		setOpen(newOpen);
+	};
+
+	return (
+		<Select
+			value={value || ""}
+			{...(onValueChange && { onValueChange })}
+			disabled={disabled}
+			open={open}
+			onOpenChange={changeOpen}
+		>
+			<SelectTrigger className={className}>
+				<SelectValue placeholder={placeholder}>
+					{selectedOption?.label}
+				</SelectValue>
+			</SelectTrigger>
+			<SelectContent className={selectContentStyles}>
+				<Command className={commandStyles}>
+					<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);
+									changeOpen(false);
+								}}
+							>
+								{option.label}
+								<CheckIcon
+									className={
+										value === option.value
+											? checkIconVisibleStyles
+											: checkIconHiddenStyles
+									}
+								/>
+							</CommandItem>
+						))}
+					</CommandList>
+				</Command>
+			</SelectContent>
+		</Select>
+	);
+}
+
+interface MultiComboboxProps {
+	options: ComboboxOption[];
+	value?: string[];
+	onValueChange?: (value: string[]) => void;
+	placeholder?: string;
+	searchPlaceholder?: string;
+	emptyText?: string;
+	disabled?: boolean;
+	className?: string;
+	maxDisplay?: number;
+}
+
+export function MultiCombobox({
+	options,
+	value = [],
+	onValueChange,
+	placeholder = "Select options...",
+	searchPlaceholder = "Search...",
+	emptyText = "No options found.",
+	disabled = false,
+	className,
+	maxDisplay = 2,
+}: MultiComboboxProps) {
+	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 selectedOptions = React.useMemo(
+		() => options.filter((option) => value.includes(option.value)),
+		[options, value],
+	);
+
+	const handleSelect = (selectedValue: string) => {
+		const newValue = value.includes(selectedValue)
+			? value.filter((v) => v !== selectedValue)
+			: [...value, selectedValue];
+		onValueChange?.(newValue);
+	};
+
+	const handleClear = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		onValueChange?.([]);
+	};
+
+	const changeOpen = (newOpen: boolean) => {
+		if (!newOpen) {
+			setSearchValue("");
+		} else {
+			inputRef.current?.focus();
+		}
+		setOpen(newOpen);
+	};
+
+	const hasValue = selectedOptions.length > 0;
+	const displayedOptions = selectedOptions.slice(0, maxDisplay);
+	const remainingCount = selectedOptions.length - maxDisplay;
+
+	return (
+		<Select open={open} onOpenChange={changeOpen}>
+			<SelectTrigger
+				className={cn(
+					className,
+					hasValue && triggerWithValueStyles,
+					hasValue && triggerWithTagsStyles,
+				)}
+				disabled={disabled}
+			>
+				{hasValue ? (
+					<>
+						<div className="flex items-center gap-1 overflow-hidden">
+							{displayedOptions.map((opt) => (
+								<Tag
+									key={opt.value}
+									size="small"
+									color="gray"
+									vibrance="subtle"
+									showIcon={false}
+								>
+									{opt.label}
+								</Tag>
+							))}
+							{remainingCount > 0 && (
+								<Tag
+									size="small"
+									color="gray"
+									vibrance="subtle"
+									showIcon={false}
+								>
+									+{remainingCount}
+								</Tag>
+							)}
+						</div>
+						<button
+							type="button"
+							className={clearButtonStyles}
+							onClick={handleClear}
+							onPointerDown={(e) => e.stopPropagation()}
+						>
+							<X className="size-4" />
+						</button>
+					</>
+				) : (
+					<SelectValue placeholder={placeholder} />
+				)}
+			</SelectTrigger>
+			<SelectContent className={selectContentStyles}>
+				<Command className={commandStyles}>
+					<CommandInput
+						ref={inputRef}
+						placeholder={searchPlaceholder}
+						value={searchValue}
+						onValueChange={setSearchValue}
+					/>
+					<CommandList>
+						<CommandEmpty>{emptyText}</CommandEmpty>
+
+						{filteredOptions.map((option) => {
+							const isSelected = value.includes(option.value);
+							return (
+								<CommandItem
+									key={option.value}
+									value={option.value}
+									data-state={isSelected ? "checked" : undefined}
+									onSelect={handleSelect}
+								>
+									{option.label}
+									<CheckIcon
+										className={
+											isSelected
+												? checkIconVisibleStyles
+												: checkIconHiddenStyles
+										}
+									/>
+								</CommandItem>
+							);
+						})}
+					</CommandList>
+				</Command>
+			</SelectContent>
+		</Select>
+	);
+}