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

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

@@ -1,8 +1,37 @@
+"use client";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 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,
@@ -16,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>
@@ -36,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

@@ -1,31 +1,30 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Label } from "#shadcn/components/ui/label";
 import {
 	Select,
 	SelectContent,
 	SelectGroup,
 	SelectItem,
-	SelectLabel,
 	SelectTrigger,
 	SelectValue,
 } from "#shadcn/components/ui/select";
 
-const meta = {
-	title: "Component/Select",
-} satisfies Meta;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
+interface SelectWrapperProps {
+	variant?: "default" | "compound";
+	disabled?: boolean;
+}
 
-export const Demo = {
-	render: () => (
-		<Select>
-			<SelectTrigger className="w-[180px]">
+function SelectWrapper({
+	variant = "default",
+	disabled = false,
+}: SelectWrapperProps) {
+	return (
+		<Select disabled={disabled}>
+			<SelectTrigger className="w-[200px]" variant={variant}>
 				<SelectValue placeholder="Select a fruit" />
 			</SelectTrigger>
 			<SelectContent>
 				<SelectGroup>
-					<SelectLabel>Fruits</SelectLabel>
 					<SelectItem value="apple">Apple</SelectItem>
 					<SelectItem value="banana">Banana</SelectItem>
 					<SelectItem value="blueberry">Blueberry</SelectItem>
@@ -34,28 +33,105 @@ export const Demo = {
 				</SelectGroup>
 			</SelectContent>
 		</Select>
+	);
+}
+
+const meta = {
+	title: "Component/Select",
+	component: SelectWrapper,
+	parameters: {
+		layout: "centered",
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<p className="sbdocs-p">
+						Select is a dropdown component for choosing a single option. It is
+						also used as the trigger/container in <strong>Combobox</strong> and{" "}
+						<strong>MultiCombobox</strong> components.
+					</p>
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["default", "compound"],
+		},
+		disabled: {
+			control: "boolean",
+		},
+	},
+	args: {
+		variant: "default",
+		disabled: false,
+	},
+} satisfies Meta<typeof SelectWrapper>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	tags: ["!dev"],
+	render: ({ variant = "default", disabled = false }) => (
+		<SelectWrapper variant={variant} disabled={disabled} />
 	),
 } satisfies Story;
 
-export const CompoundSelectWrite: Story = {
+export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
-		<div className="grid w-full max-w-sm items-center gap-1.5">
-			<Label htmlFor="compound-select">Compound Select Write</Label>
-			<Select>
-				<SelectTrigger
-					id="compound-select"
-					variant="compound"
-					className="w-[180px]"
-				>
-					<SelectValue placeholder="Select option" />
-				</SelectTrigger>
-				<SelectContent>
-					<SelectItem value="option1">Option 1</SelectItem>
-					<SelectItem value="option2">Option 2</SelectItem>
-					<SelectItem value="option3">Option 3</SelectItem>
-					<SelectItem value="option4">Option 4</SelectItem>
-				</SelectContent>
-			</Select>
+		<div className="space-y-8">
+			{/* Default */}
+			<div>
+				<h3 className="typo-label mb-4">Default</h3>
+				<Select>
+					<SelectTrigger className="w-[200px]">
+						<SelectValue placeholder="Select a fruit" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							<SelectItem value="apple">Apple</SelectItem>
+							<SelectItem value="banana">Banana</SelectItem>
+							<SelectItem value="blueberry">Blueberry</SelectItem>
+						</SelectGroup>
+					</SelectContent>
+				</Select>
+			</div>
+
+			{/* Compound */}
+			<div>
+				<h3 className="typo-label mb-4">Compound</h3>
+				<Select>
+					<SelectTrigger className="w-[200px]" variant="compound">
+						<SelectValue placeholder="Select option" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="option1">Option 1</SelectItem>
+						<SelectItem value="option2">Option 2</SelectItem>
+						<SelectItem value="option3">Option 3</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
+
+			{/* Disabled */}
+			<div>
+				<h3 className="typo-label mb-4">Disabled</h3>
+				<Select disabled>
+					<SelectTrigger className="w-[200px]">
+						<SelectValue placeholder="Select a fruit" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectGroup>
+							<SelectItem value="apple">Apple</SelectItem>
+							<SelectItem value="banana">Banana</SelectItem>
+						</SelectGroup>
+					</SelectContent>
+				</Select>
+			</div>
 		</div>
 	),
-};
+} satisfies Story;

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

@@ -4,34 +4,75 @@ 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",
-			},
-		},
-		defaultVariants: {
-			size: "regular",
-			variant: "default",
+// 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:border-border-link",
+	// 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",
+	// Cursor
+	"cursor-pointer",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:cursor-not-allowed",
+	"disabled:text-text-disabled",
+	"disabled:bg-bg-secondary",
+	"disabled:border-border-primary",
+	// 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: {
+		variant: {
+			default: cn("h-9"),
+			compound: cn("h-9", "border-r-0", "typo-label"),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+	},
+});
 
 function Select({
 	...props
@@ -53,7 +94,6 @@ function SelectValue({
 
 function SelectTrigger({
 	className,
-	size,
 	variant,
 	children,
 	...props
@@ -62,12 +102,12 @@ function SelectTrigger({
 	return (
 		<SelectPrimitive.Trigger
 			data-slot="select-trigger"
-			className={cn(selectTriggerVariants({ variant, size, className }))}
+			className={cn(selectTriggerVariants({ variant, className }))}
 			{...props}
 		>
 			{children}
 			<SelectPrimitive.Icon asChild>
-				<ChevronDownIcon className="size-4 opacity-50" />
+				<ChevronDownIcon />
 			</SelectPrimitive.Icon>
 		</SelectPrimitive.Trigger>
 	);
@@ -84,9 +124,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-separator",
+					// Background & Colors
+					"bg-bg-primary",
+					"text-text-primary",
+					// Spacing
+					"py-1",
+					// Shadow
+					"dropdown-menu-shadow",
+					// 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 +175,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 +198,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 +219,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-pointer",
+				"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 +291,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

@@ -1,8 +1,23 @@
+"use client";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 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",
@@ -14,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}
 		/>
 	);

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

@@ -56,7 +56,7 @@ function SheetContent({
 			<SheetPrimitive.Content
 				data-slot="sheet-content"
 				className={cn(
-					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 dropdown-menu-shadow transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
 					side === "right" &&
 						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
 					side === "left" &&

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

@@ -1,3 +1,4 @@
+"use client";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
@@ -476,35 +477,77 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 	);
 }
 
-const sidebarMenuButtonVariants = cva(
-	cn(
-		"typo-body text-text-secondary flex items-center gap-2 overflow-hidden rounded-lg py-2 px-[0.44rem] outline-hidden ",
-		"ring-sidebar-ring transition-all focus-visible:ring-2 active:bg-bg-quaternary disabled:pointer-events-none",
-		"disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50",
-		"data-[active=true]:bg-bg-brand-secondary data-[active=true]:text-text-primary data-[state=open]:hover:bg-sidebar-accent",
-		"data-[state=open]:hover:text-sidebar-accent-foreground  group-data-[collapsible=icon]:py-2! group-data-[collapsible=icon]:px-[0.44rem]!",
-		"[&>span:last-child]:truncate [&>svg]:size-5 [&>svg]:shrink-0 hover:bg-bg-secondary hover:text-text-primary",
-		"data-[active=true]:[&>svg]:text-text-brand-primary w-full",
-	),
-	{
-		variants: {
-			variant: {
-				default: "",
-				outline:
-					"shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-			},
-			size: {
-				default: "",
-				sm: "",
-				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
-			},
+// Base sidebar menu button styles
+const baseSidebarMenuButtonStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"gap-2",
+	"w-full",
+	"overflow-hidden",
+	// Shape
+	"rounded-lg",
+	// Spacing
+	"py-2",
+	"px-[0.44rem]",
+	// Typography
+	"typo-body",
+	"text-fg-secondary",
+	// Interaction
+	"outline-hidden",
+	"transition-all",
+	"cursor-pointer",
+	// Focus
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	// Hover
+	"hover:bg-bg-secondary",
+	"hover:text-text-primary",
+	// Active
+	"active:bg-bg-quaternary",
+	"data-[active=true]:bg-bg-brand-primary",
+	"data-[active=true]:text-text-primary",
+	"data-[active=true]:[&>svg]:text-fg-brand-primary",
+	// Open state
+	"data-[state=open]:hover:bg-bg-secondary",
+	"data-[state=open]:hover:text-text-primary",
+	// Disabled
+	"disabled:pointer-events-none",
+	"disabled:opacity-50",
+	"aria-disabled:pointer-events-none",
+	"aria-disabled:opacity-50",
+	// Group styles
+	"group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+	"group-data-[collapsible=icon]:py-2!",
+	"group-data-[collapsible=icon]:px-[0.44rem]!",
+	// Content styles
+	"[&>span:last-child]:truncate",
+	"[&>svg]:size-5",
+	"[&>svg]:shrink-0",
+);
+
+const sidebarMenuButtonVariants = cva(baseSidebarMenuButtonStyles, {
+	variants: {
+		variant: {
+			default: cn(""),
+			outline: cn(
+				"shadow-[0_0_0_1px_hsl(var(--sidebar-border))]",
+				"hover:bg-bg-secondary",
+				"hover:text-text-primary",
+				"hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			),
 		},
-		defaultVariants: {
-			variant: "default",
-			size: "default",
+		size: {
+			default: cn(""),
+			sm: cn(""),
+			lg: cn("h-12", "text-sm", "group-data-[collapsible=icon]:p-0!"),
 		},
 	},
-);
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
 
 function SidebarMenuButton({
 	asChild = false,