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

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

@@ -118,6 +118,119 @@ export function Combobox({
 	);
 }
 
+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 displayText = React.useMemo(() => {
+		if (selectedOptions.length === 0) return placeholder;
+		if (selectedOptions.length <= maxDisplay) {
+			return selectedOptions.map((opt) => opt.label).join(", ");
+		}
+		return `${selectedOptions
+			.slice(0, maxDisplay)
+			.map((opt) => opt.label)
+			.join(", ")} +${selectedOptions.length - maxDisplay}`;
+	}, [selectedOptions, placeholder, maxDisplay]);
+
+	const handleSelect = (selectedValue: string) => {
+		const newValue = value.includes(selectedValue)
+			? value.filter((v) => v !== selectedValue)
+			: [...value, selectedValue];
+		onValueChange?.(newValue);
+	};
+
+	// 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 open={open} onOpenChange={setOpen}>
+			<SelectTrigger
+				className={`${className} ${displayText ? "!text-text-primary" : undefined}`}
+				disabled={disabled}
+			>
+				<SelectValue placeholder={displayText || placeholder} />
+			</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.includes(option.value) ? "checked" : undefined
+								}
+								onSelect={handleSelect}
+							>
+								{option.label}
+								<CheckIcon
+									className={cn(
+										"ml-auto size-4",
+										value.includes(option.value) ? "opacity-100" : "opacity-0",
+									)}
+								/>
+							</CommandItem>
+						))}
+					</CommandList>
+				</Command>
+			</SelectContent>
+		</Select>
+	);
+}
+
 // Demo component for Storybook
 const demoOptions = [
 	{ value: "next.js", label: "Next.js" },
@@ -140,3 +253,17 @@ export function ComboboxDemo() {
 		/>
 	);
 }
+
+export function MultiComboboxDemo() {
+	const [value, setValue] = React.useState<string[]>([]);
+
+	return (
+		<MultiCombobox
+			options={demoOptions}
+			value={value}
+			onValueChange={setValue}
+			placeholder="Select frameworks..."
+			searchPlaceholder="Search framework..."
+		/>
+	);
+}

package/src/shadcn/components/ui/dropdown-menu.tsx

@@ -21,8 +21,7 @@ const dropdownMenuContentStyles = cn(
 	"border",
 	"border-border-separator",
 	// Spacing
-	"px-2",
-	"py-3",
+	"p-2",
 	"space-y-0.5",
 	// Shadow
 	"shadow-lg",

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

@@ -105,6 +105,37 @@ const iconRightItemClasses = cn(
 	"duration-300",
 );
 
+// Prefix styles
+const prefixClasses = cn(
+	// Borders
+	"border-border-primary",
+	"border",
+	"border-r-0",
+
+	// Background & Colors
+	"bg-bg-tertiary",
+	"text-text-tertiary",
+
+	// Layout & Flexbox
+	"flex",
+	"items-center",
+
+	// Spacing & Sizing
+	"rounded-l-md",
+	"px-3",
+	"py-1",
+
+	// Typography
+	"typo-body",
+
+	// Cursor & Interactions
+	"cursor-default",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
 // Suffix styles
 const suffixClasses = cn(
 	// Borders
@@ -135,6 +166,36 @@ const suffixClasses = cn(
 	"duration-300",
 );
 
+// Disabled prefix styles
+const prefixDisabledClasses = cn(
+	// Borders
+	"border-border-primary",
+	"border",
+
+	// Background & Colors
+	"bg-bg-tertiary",
+	"text-text-disabled",
+
+	// Layout & Flexbox
+	"flex",
+	"items-center",
+
+	// Spacing & Sizing
+	"rounded-l-md",
+	"px-3",
+	"py-1",
+
+	// Typography
+	"typo-body",
+
+	// Cursor & Interactions
+	"hover:cursor-not-allowed",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
 // Disabled suffix styles
 const suffixDisabledClasses = cn(
 	// Borders
@@ -165,6 +226,36 @@ const suffixDisabledClasses = cn(
 	"duration-300",
 );
 
+// Invalid prefix styles
+const prefixInvalidClasses = cn(
+	// Borders
+	"border-border-error",
+	"border",
+
+	// Background & Colors
+	"bg-bg-secondary",
+	"text-text-tertiary",
+
+	// Layout & Flexbox
+	"flex",
+	"items-center",
+
+	// Spacing & Sizing
+	"rounded-l-md",
+	"px-3",
+	"py-1",
+
+	// Typography
+	"typo-body",
+
+	// Cursor & Interactions
+	"cursor-default",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
 // Invalid suffix styles
 const suffixInvalidClasses = cn(
 	// Borders
@@ -279,6 +370,17 @@ const inputVariants = cva(
 					"pr-9",
 				),
 			},
+			hasPrefix: {
+				true: cn(
+					// Border adjustments for prefix
+					"rounded-r-md",
+					"rounded-l-none",
+
+					// Focus adjustments
+					"focus-visible:ring-offset-0",
+					"focus-visible:border-l-1",
+				),
+			},
 			hasSuffix: {
 				true: cn(
 					// Border adjustments for suffix
@@ -309,6 +411,7 @@ const inputVariants = cva(
 			},
 		},
 		defaultVariants: {
+			hasPrefix: false,
 			hasSuffix: false,
 			invalid: false,
 		},
@@ -319,6 +422,7 @@ interface InputProps
 	extends React.ComponentProps<"input">,
 		VariantProps<typeof inputVariants> {
 	type?: "text" | "password";
+	prefixValue?: React.ReactNode;
 	suffix?: string;
 	invalid?: boolean;
 	leftSlot?: React.ReactNode;
@@ -329,6 +433,7 @@ function Input({
 	className,
 	type,
 	invalid,
+	prefixValue,
 	suffix,
 	leftSlot,
 	rightSlot,
@@ -390,6 +495,7 @@ function Input({
 					invalid,
 					hasLeftSlot: !!leftSlot,
 					hasRightSlot: !!rightSlot,
+					hasPrefix: !!prefixValue,
 					hasSuffix: !!suffix,
 					className,
 				}),
@@ -400,6 +506,19 @@ function Input({
 
 	return (
 		<div className="flex w-full min-w-0">
+			{prefixValue && (
+				<div
+					className={
+						props.disabled
+							? prefixDisabledClasses
+							: invalid
+								? prefixInvalidClasses
+								: prefixClasses
+					}
+				>
+					{prefixValue}
+				</div>
+			)}
 			<div className="flex-1 relative">
 				{renderLeftSlot()}
 				{inputElement}

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

@@ -7,6 +7,7 @@ import {
 	PaginationItem,
 	PaginationLink,
 	PaginationNext,
+	PaginationPageSizeSelector,
 	PaginationPrevious,
 } from "#shadcn/components/ui/pagination";
 
@@ -20,6 +21,11 @@ type Story = StoryObj<typeof meta>;
 export const Demo = {
 	render: () => (
 		<Pagination>
+			<PaginationPageSizeSelector
+				pageSize={10}
+				onPageSizeChange={(_: number) => {}}
+				className="p-2"
+			/>
 			<PaginationContent>
 				<PaginationItem>
 					<PaginationPrevious href="#" />
@@ -33,10 +39,10 @@ export const Demo = {
 					</PaginationLink>
 				</PaginationItem>
 				<PaginationItem>
-					<PaginationLink href="#">3</PaginationLink>
+					<PaginationEllipsis />
 				</PaginationItem>
 				<PaginationItem>
-					<PaginationEllipsis />
+					<PaginationLink href="#">3</PaginationLink>
 				</PaginationItem>
 				<PaginationItem>
 					<PaginationNext href="#" />

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

@@ -1,10 +1,17 @@
 import {
+	ChevronDownIcon,
 	ChevronLeftIcon,
 	ChevronRightIcon,
 	MoreHorizontalIcon,
 } from "lucide-react";
 import type * as React from "react";
 import { type Button, buttonVariants } from "#shadcn/components/ui/button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "#shadcn/components/ui/dropdown-menu";
 import { cn } from "#shadcn/lib/utils";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
@@ -15,7 +22,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("flex", "justify-center", className)}
 			{...props}
 		/>
 	);
@@ -84,7 +91,6 @@ function PaginationPrevious({
 			{...props}
 		>
 			<ChevronLeftIcon />
-			<span className="hidden sm:block">Previous</span>
 		</PaginationLink>
 	);
 }
@@ -100,7 +106,6 @@ function PaginationNext({
 			className={cn("gap-1", "px-2.5", "sm:pr-2.5", className)}
 			{...props}
 		>
-			<span className="hidden sm:block">Next</span>
 			<ChevronRightIcon />
 		</PaginationLink>
 	);
@@ -129,6 +134,51 @@ function PaginationEllipsis({
 	);
 }
 
+type PaginationPageSizeSelectorProps = {
+	pageSize: number;
+	onPageSizeChange: (pageSize: number) => void;
+	pageSizeOptions?: number[];
+	className?: string;
+};
+
+function PaginationPageSizeSelector({
+	pageSize,
+	onPageSizeChange,
+	pageSizeOptions = [10, 20, 50, 100],
+	className,
+}: PaginationPageSizeSelectorProps) {
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger
+				className={cn(
+					"flex",
+					"items-center",
+					"gap-1",
+					"text-sm",
+					"text-text-secondary",
+					"hover:text-text-primary",
+					"outline-none",
+					className,
+				)}
+				data-slot="pagination-page-size-selector"
+			>
+				{pageSize} / Page
+				<ChevronDownIcon className="size-4" />
+			</DropdownMenuTrigger>
+			<DropdownMenuContent>
+				{pageSizeOptions.map((option) => (
+					<DropdownMenuItem
+						key={option}
+						onClick={() => onPageSizeChange(option)}
+					>
+						{option}
+					</DropdownMenuItem>
+				))}
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}
+
 export {
 	Pagination,
 	PaginationContent,
@@ -137,4 +187,5 @@ export {
 	PaginationPrevious,
 	PaginationNext,
 	PaginationEllipsis,
+	PaginationPageSizeSelector,
 };

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

@@ -3,7 +3,12 @@ import type * as React from "react";
 import { cn } from "#shadcn/lib/utils";
 
 // Table container styles
-const tableContainerStyles = cn("relative", "w-full", "overflow-x-auto");
+const tableContainerStyles = cn(
+	"relative",
+	"h-full",
+	"w-full",
+	"overflow-auto",
+);
 
 // Table styles
 const tableStyles = cn("w-full", "caption-bottom", "text-sm");

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

@@ -101,6 +101,7 @@ const tabsVariants = cva("", {
 				`**:data-[slot=tabs-trigger]:max-w-80 
 				 **:data-[slot=tabs-trigger]:w-60
 				 **:data-[slot=tabs-trigger]:min-w-40
+				 **:data-[slot=tabs-trigger]:data-[state=inactive]:text-text-secondary
 				 **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-1
 				 **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-border-secondary
 				 **:data-[slot=tabs-trigger]:data-[state=inactive]:pt-[9px]

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

@@ -5,6 +5,12 @@ import * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+type WithMeta = {
+	meta?: {
+		lastNode?: boolean;
+	};
+};
+
 // biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
 interface TreeContextValue<T = any> {
 	indent: number;
@@ -42,7 +48,7 @@ function Tree({ indent = 20, tree, className, ...props }: TreeProps) {
 	const mergedStyle = {
 		...propStyle,
 		"--tree-indent": `${indent}px`,
-		"--border": `var(--color-fg-disabled)`,
+		"--border": `var(--color-border-separator)`,
 	} as React.CSSProperties;
 
 	return (
@@ -87,7 +93,7 @@ function TreeItem<T = any>({
 		"--tree-padding": `${item.getItemMeta().level * indent}px`,
 	} as React.CSSProperties;
 
-	const Comp = asChild ? Slot.Root : "button";
+	const Comp = asChild ? Slot.Root : "span";
 
 	return (
 		<TreeContext.Provider value={{ indent, currentItem: item }}>
@@ -124,7 +130,16 @@ function TreeItem<T = any>({
 						: undefined
 				}
 				aria-expanded={item.isExpanded()}
-				{...otherProps}
+				{...Object.fromEntries(
+					Object.entries(otherProps).filter(
+						([key]) => key !== "onClick" && key !== "onDragStart",
+					),
+				)}
+				onDragStart={(e) => {
+					if ((e.target as HTMLElement).dataset.slot === "drag-handle") {
+						item.getProps().onDragStart(e);
+					}
+				}}
 			>
 				{children}
 			</Comp>
@@ -135,17 +150,22 @@ function TreeItem<T = any>({
 // biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
 interface TreeItemLabelProps<T = any>
 	extends React.HTMLAttributes<HTMLSpanElement> {
+	hideChevron?: boolean;
+	disableHover?: boolean;
 	item?: ItemInstance<T>;
+	horizontalLines?: boolean;
 }
 
-// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
-function TreeItemLabel<T = any>({
+function TreeItemLabel<T>({
 	item: propItem,
 	children,
 	className,
+	disableHover,
+	horizontalLines,
+	hideChevron,
 	...props
-}: TreeItemLabelProps<T>) {
-	const { currentItem } = useTreeContext<T>();
+}: TreeItemLabelProps<T & WithMeta>) {
+	const { currentItem } = useTreeContext<T & WithMeta>();
 	const item = propItem || currentItem;
 
 	if (!item) {
@@ -153,17 +173,50 @@ function TreeItemLabel<T = any>({
 		return null;
 	}
 
+	const data = item.getItemData?.();
+	const isLastNode = data?.meta?.lastNode;
+	const itemMeta = item.getItemMeta();
+
 	return (
 		<span
 			data-slot="tree-item-label"
 			className={cn(
-				"group/tree-item-label cursor-pointer in-data-[selected=true]:border-l-border-brand border-l-2 border-l-transparent in-focus-visible:ring-ring/50 bg-background hover:bg-bg-secondary in-data-[selected=true]:bg-bg-quaternary! text-text-secondary hover:text-text-primary in-data-[selected=true]:text-text-primary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-1.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-secondary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				!disableHover &&
+					"in-data-[selected=true]:bg-bg-secondary in-data-[selected=true]:text-text-primary",
+				!disableHover &&
+					item.isFolder() &&
+					"hover:bg-bg-secondary hover:text-text-primary cursor-pointer",
+				disableHover && "text-text-primary",
 				className,
 			)}
 			{...props}
 		>
 			{item.isFolder() && (
-				<ChevronDownIcon className="text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90" />
+				<button
+					type="button"
+					className="self-start mt-0.5 cursor-pointer"
+					onClick={() => {
+						item.isExpanded() ? item.collapse() : item.expand();
+					}}
+				>
+					<ChevronDownIcon className="text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90" />
+				</button>
+			)}
+			{!item.isFolder() && horizontalLines && (
+				<div
+					className={`w-5 min-w-5 h-px border-t mt-2 -ml-1 self-start`}
+				></div>
+			)}
+			{item.isFolder() && item.isExpanded() && horizontalLines && (
+				<div
+					className={`absolute left-4.25 top-8 w-px min-h-full h-full border-l mt-2.25  self-start `}
+				></div>
+			)}
+			{horizontalLines && (
+				<div
+					className={`absolute left-0 top-4.75 -m-[5px] border-t w-4 ${isLastNode ? "h-full bg-inherit " : ""} ${itemMeta.level === 0 ? "hidden" : ""}`}
+				></div>
 			)}
 			{children ||
 				(typeof item.getItemName === "function" ? item.getItemName() : null)}
@@ -197,4 +250,4 @@ function TreeDragLine({
 	);
 }
 
-export { Tree, TreeItem, TreeItemLabel, TreeDragLine };
+export { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };

package/src/typography.css

@@ -42,6 +42,18 @@ body {
 	font-weight: var(--font-weight-normal);
 	line-height: var(--font-leading-4);
 }
+.typo-body-xs {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-3);
+}
+.typo-label-xs {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-3);
+}
 
 .h1 {
 	font-size: var(--font-size-4xl);
@@ -57,14 +69,6 @@ body {
 	}
 }
 
-.h2 {
-	font-size: var(--font-size-3xl);
-	font-family: var(--font-family-sans);
-	font-weight: var(--font-weight-semibold);
-	line-height: var(--font-leading-none);
-	letter-spacing: var(--font-tracking-tight);
-}
-
 .h3 {
 	font-size: var(--font-size-2xl);
 	font-family: var(--font-family-sans);
@@ -96,3 +100,27 @@ body {
 	line-height: var(--font-leading-none);
 	letter-spacing: var(--font-tracking-tight);
 }
+
+.h2 {
+	font-size: var(--font-size-4xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-bold);
+	line-height: var(--font-leading-10);
+	letter-spacing: var(--font-tracking-normal);
+}
+
+.body16 {
+	font-size: var(--font-size-base);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-6);
+	letter-spacing: var(--font-tracking-normal);
+}
+
+.body12 {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-4);
+	letter-spacing: var(--font-tracking-normal);
+}