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

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

@@ -1,9 +1,308 @@
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { cva, type VariantProps } from "class-variance-authority";
 import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Styles
+const contextMenuContentBaseStyles = cn(
+	// Background
+	"bg-bg-primary",
+	// Layout
+	"z-50",
+	"max-h-(--radix-context-menu-content-available-height)",
+	"min-w-[8rem]",
+	"origin-(--radix-context-menu-content-transform-origin)",
+	"overflow-x-hidden",
+	"overflow-y-auto",
+	// Shape
+	"rounded-md",
+	// Border
+	"border",
+	"border-border-separator",
+	// Spacing
+	"p-2",
+	"gap-1",
+	"flex",
+	"flex-col",
+	// 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",
+);
+
+const contextMenuItemBaseStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"justify-between",
+	"gap-2",
+	"h-7",
+	// Spacing
+	"px-3",
+	"py-0",
+	// Shape
+	"rounded",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-primary",
+	// Interaction
+	"cursor-pointer",
+	"outline-hidden",
+	"select-none",
+	// Focus states
+	"focus:bg-bg-tertiary",
+	"focus:text-text-primary",
+	"focus:rounded",
+	// Disabled states
+	"data-[disabled]:pointer-events-none",
+	"data-[disabled]:opacity-50",
+	// Inset spacing
+	"data-[inset]:pl-8",
+	// SVG
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+	"[&_svg:not([class*='text-'])]:text-fg-secondary",
+);
+
+const contextMenuItemVariants = cva(contextMenuItemBaseStyles, {
+	variants: {
+		variant: {
+			default: "",
+			destructive: cn(
+				"data-[variant=destructive]:text-text-error-primary",
+				"data-[variant=destructive]:focus:bg-bg-error-tertiary",
+				"data-[variant=destructive]:focus:text-text-error-primary",
+				"data-[variant=destructive]:*:[svg]:!text-text-error-primary",
+			),
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+const contextMenuCheckboxItemBaseStyles = cn(
+	// Layout
+	"relative",
+	"flex",
+	"items-center",
+	"gap-2",
+	"h-7",
+	// Spacing
+	"py-0",
+	"pr-2",
+	"pl-9",
+	// Shape
+	"rounded",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-primary",
+	// Interaction
+	"cursor-default",
+	"outline-hidden",
+	"select-none",
+	// Focus states
+	"focus:bg-bg-secondary",
+	"focus:text-text-primary",
+	// Disabled states
+	"data-[disabled]:pointer-events-none",
+	"data-[disabled]:opacity-50",
+	// SVG
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+	"[&_svg]:text-text-link",
+);
+
+const contextMenuCheckboxIndicatorStyles = cn(
+	// Layout
+	"pointer-events-none",
+	"absolute",
+	"left-3",
+	"flex",
+	"size-3.5",
+	"items-center",
+	"justify-center",
+);
+
+const contextMenuRadioItemBaseStyles = cn(
+	// Layout
+	"relative",
+	"flex",
+	"items-center",
+	"gap-2",
+	"h-7",
+	// Spacing
+	"py-0",
+	"pr-2",
+	"pl-8",
+	// Shape
+	"rounded",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-primary",
+	// Interaction
+	"cursor-pointer",
+	"outline-hidden",
+	"select-none",
+	// Focus states
+	"focus:bg-bg-secondary",
+	"focus:text-text-primary",
+	// Disabled states
+	"data-[disabled]:pointer-events-none",
+	"data-[disabled]:opacity-50",
+	// SVG
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+);
+
+const contextMenuRadioIndicatorStyles = cn(
+	// Layout
+	"pointer-events-none",
+	"absolute",
+	"left-2",
+	"flex",
+	"size-3.5",
+	"items-center",
+	"justify-center",
+);
+
+const contextMenuLabelBaseStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"h-7",
+	// Spacing
+	"px-3",
+	"py-0",
+	"data-[inset]:pl-10",
+	// Typography
+	"typo-label-tiny",
+	// Colors
+	"text-text-secondary",
+);
+
+const contextMenuSeparatorBaseStyles = cn(
+	// Border
+	"border-t",
+	"border-border-separator",
+	// Spacing
+	"-mx-1",
+	"my-1",
+	// Size
+	"h-1",
+);
+
+const contextMenuShortcutBaseStyles = cn(
+	// Typography
+	"text-xs",
+	"tracking-widest",
+	// Colors
+	"text-text-secondary",
+	// Spacing
+	"ml-auto",
+);
+
+const contextMenuIconBaseStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"justify-center",
+	// Size
+	"size-6",
+	// Spacing
+	"p-1",
+	// SVG
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+	"[&_svg:not([class*='text-'])]:text-fg-tertiary",
+	// Hover states
+	"hover:[&_svg:not([class*='text-'])]:text-fg-tertiary_hover",
+);
+
+const contextMenuSubTriggerBaseStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"h-7",
+	// Spacing
+	"px-3",
+	"py-0",
+	"data-[inset]:pl-8",
+	// Shape
+	"rounded",
+	// Typography
+	"typo-body",
+	// Colors
+	"text-text-primary",
+	// Interaction
+	"cursor-default",
+	"outline-hidden",
+	"select-none",
+	// Focus states
+	"focus:bg-bg-secondary",
+	"focus:text-text-primary",
+	"data-[state=open]:bg-bg-secondary",
+	"data-[state=open]:text-text-primary",
+);
+
+const contextMenuSubContentBaseStyles = cn(
+	// Background
+	"bg-bg-primary",
+	// Layout
+	"z-50",
+	"min-w-[8rem]",
+	"origin-(--radix-context-menu-content-transform-origin)",
+	"overflow-hidden",
+	// Shape
+	"rounded-md",
+	// Border
+	"border",
+	"border-border-separator",
+	// Spacing
+	"p-2",
+	"gap-1",
+	"flex",
+	"flex-col",
+	// Colors
+	"text-text-primary",
+	// 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",
+);
+
+// Components
 function ContextMenu({
 	...props
 }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
@@ -63,14 +362,11 @@ function ContextMenuSubTrigger({
 		<ContextMenuPrimitive.SubTrigger
 			data-slot="context-menu-sub-trigger"
 			data-inset={inset}
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
+			className={cn(contextMenuSubTriggerBaseStyles, className)}
 			{...props}
 		>
 			{children}
-			<ChevronRightIcon className="ml-auto" />
+			<ChevronRightIcon className="ml-auto size-4" />
 		</ContextMenuPrimitive.SubTrigger>
 	);
 }
@@ -82,10 +378,7 @@ function ContextMenuSubContent({
 	return (
 		<ContextMenuPrimitive.SubContent
 			data-slot="context-menu-sub-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 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-				className,
-			)}
+			className={cn(contextMenuSubContentBaseStyles, className)}
 			{...props}
 		/>
 	);
@@ -99,10 +392,7 @@ function ContextMenuContent({
 		<ContextMenuPrimitive.Portal>
 			<ContextMenuPrimitive.Content
 				data-slot="context-menu-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 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-					className,
-				)}
+				className={cn(contextMenuContentBaseStyles, className)}
 				{...props}
 			/>
 		</ContextMenuPrimitive.Portal>
@@ -114,19 +404,16 @@ function ContextMenuItem({
 	inset,
 	variant = "default",
 	...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
-	inset?: boolean;
-	variant?: "default" | "destructive";
-}) {
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> &
+	VariantProps<typeof contextMenuItemVariants> & {
+		inset?: boolean;
+	}) {
 	return (
 		<ContextMenuPrimitive.Item
 			data-slot="context-menu-item"
 			data-inset={inset}
 			data-variant={variant}
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-				className,
-			)}
+			className={cn(contextMenuItemVariants({ variant }), className)}
 			{...props}
 		/>
 	);
@@ -140,13 +427,10 @@ function ContextMenuCheckboxItem({
 	return (
 		<ContextMenuPrimitive.CheckboxItem
 			data-slot="context-menu-checkbox-item"
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
-				className,
-			)}
+			className={cn(contextMenuCheckboxItemBaseStyles, className)}
 			{...props}
 		>
-			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			<span className={contextMenuCheckboxIndicatorStyles}>
 				<ContextMenuPrimitive.ItemIndicator>
 					<CheckIcon className="size-4" />
 				</ContextMenuPrimitive.ItemIndicator>
@@ -164,13 +448,10 @@ function ContextMenuRadioItem({
 	return (
 		<ContextMenuPrimitive.RadioItem
 			data-slot="context-menu-radio-item"
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 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",
-				className,
-			)}
+			className={cn(contextMenuRadioItemBaseStyles, className)}
 			{...props}
 		>
-			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			<span className={contextMenuRadioIndicatorStyles}>
 				<ContextMenuPrimitive.ItemIndicator>
 					<CircleIcon className="size-2 fill-current" />
 				</ContextMenuPrimitive.ItemIndicator>
@@ -191,10 +472,7 @@ function ContextMenuLabel({
 		<ContextMenuPrimitive.Label
 			data-slot="context-menu-label"
 			data-inset={inset}
-			className={cn(
-				"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-				className,
-			)}
+			className={cn(contextMenuLabelBaseStyles, className)}
 			{...props}
 		/>
 	);
@@ -207,7 +485,7 @@ function ContextMenuSeparator({
 	return (
 		<ContextMenuPrimitive.Separator
 			data-slot="context-menu-separator"
-			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			className={cn(contextMenuSeparatorBaseStyles, className)}
 			{...props}
 		/>
 	);
@@ -220,25 +498,40 @@ function ContextMenuShortcut({
 	return (
 		<span
 			data-slot="context-menu-shortcut"
-			className={cn(
-				"text-muted-foreground ml-auto text-xs tracking-widest",
-				className,
-			)}
+			className={cn(contextMenuShortcutBaseStyles, className)}
 			{...props}
 		/>
 	);
 }
 
+function ContextMenuIcon({
+	className,
+	children,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="context-menu-icon"
+			className={cn(contextMenuIconBaseStyles, className)}
+			{...props}
+		>
+			{children}
+		</span>
+	);
+}
+
 export {
 	ContextMenu,
 	ContextMenuTrigger,
 	ContextMenuContent,
 	ContextMenuItem,
+	contextMenuItemVariants,
 	ContextMenuCheckboxItem,
 	ContextMenuRadioItem,
 	ContextMenuLabel,
 	ContextMenuSeparator,
 	ContextMenuShortcut,
+	ContextMenuIcon,
 	ContextMenuGroup,
 	ContextMenuPortal,
 	ContextMenuSub,

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
+	"dropdown-menu-shadow",
+	// 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}
 		/>
 	);