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

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

@@ -3,57 +3,309 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-const iconBaseClasses =
-	"absolute top-1/2 -translate-y-1/2 cursor-pointer z-10 flex items-center justify-center [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0";
+// Base icon styles
+const iconBaseClasses = cn(
+	// Positioning
+	"absolute",
+	"top-1/2",
+	"-translate-y-1/2",
+	"z-10",
 
-const iconLeftPosition =
-	"left-3 hover:text-text-tertiary hover:cursor-default transition-colors duration-300";
+	// Layout & Flexbox
+	"flex",
+	"items-center",
+	"justify-center",
 
-const iconRightContainer =
-	"absolute right-3 top-1/2 -translate-y-1/2 flex gap-2 z-10";
+	// Cursor & Interactions
+	"cursor-default",
+	"[&_svg]:pointer-events-none",
 
-const iconNormalColor =
-	"text-text-tertiary hover:text-fg-secondary transition-colors duration-300";
-const iconInvalidColor =
-	"text-fg-tertiary hover:text-fg-secondary transition-colors duration-300";
-const iconDisabledColor =
-	"text-text-disabled hover:cursor-not-allowed transition-colors duration-300";
+	// Sizing
+	"[&_svg:not([class*='size-'])]:size-4",
+	"shrink-0",
+	"[&_svg]:shrink-0",
+);
+
+// Left icon positioning
+const iconLeftPosition = cn(
+	// Positioning
+	"left-3",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
+// Right icon container
+const iconRightContainer = cn(
+	// Positioning
+	"absolute",
+	"right-3",
+	"top-1/2",
+	"-translate-y-1/2",
+
+	// Layout & Flexbox
+	"flex",
+	"gap-2",
+
+	// Z-index
+	"z-10",
+);
+
+// Icon color states
+const iconNormalColor = cn(
+	// Colors
+	"text-text-tertiary",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
+const iconInvalidColor = cn(
+	// Colors
+	"text-text-tertiary",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
+const iconDisabledColor = cn(
+	// Colors
+	"text-text-disabled",
+
+	// Cursor & Interactions
+	"hover:cursor-not-allowed",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
+// Icon wrapper styles
+const iconWrapperClasses = cn(
+	// Sizing
+	"flex",
+	"items-center",
+	"[&>svg]:w-full",
+	"[&>svg]:h-full",
+	"[&>svg]:stroke-[1.5]",
+);
+
+// Right icon item styles
+const iconRightItemClasses = cn(
+	// Layout & Flexbox
+	"flex",
+	"items-center",
+	"justify-center",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
+// Suffix styles
+const suffixClasses = cn(
+	// Borders
+	"border-border-primary",
+	"border",
+
+	// Background & Colors
+	"bg-bg-tertiary",
+	"text-text-tertiary",
+
+	// Layout & Flexbox
+	"flex",
+	"items-center",
+
+	// Spacing & Sizing
+	"rounded-r-md",
+	"px-3",
+	"py-1",
+
+	// Typography
+	"typo-body",
+
+	// Cursor & Interactions
+	"cursor-default",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
+
+// Disabled suffix styles
+const suffixDisabledClasses = cn(
+	// Borders
+	"border-border-primary",
+	"border",
+
+	// Background & Colors
+	"bg-bg-tertiary",
+	"text-text-disabled",
+
+	// Layout & Flexbox
+	"flex",
+	"items-center",
 
-const iconWrapperClasses = "[&>svg]:w-full [&>svg]:h-full [&>svg]:stroke-[1.5]";
+	// Spacing & Sizing
+	"rounded-r-md",
+	"px-3",
+	"py-1",
+
+	// Typography
+	"typo-body",
+
+	// Cursor & Interactions
+	"hover:cursor-not-allowed",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
 
-const iconRightItemClasses =
-	"cursor-pointer flex items-center justify-center transition-colors duration-300";
+// Invalid suffix styles
+const suffixInvalidClasses = cn(
+	// Borders
+	"border-border-error",
+	"border",
 
-const suffixClasses =
-	"border-border-primary bg-bg-tertiary text-text-tertiary flex items-center rounded-r-md border px-3 py-1 typo-body cursor-default transition-colors duration-300";
+	// Background & Colors
+	"bg-bg-secondary",
+	"text-text-tertiary",
 
-const suffixDisabledClasses =
-	"border-border-primary bg-bg-tertiary text-text-disabled flex items-center rounded-r-md border px-3 py-1 typo-body hover:cursor-not-allowed transition-colors duration-300";
+	// Layout & Flexbox
+	"flex",
+	"items-center",
 
-const suffixInvalidClasses =
-	"border-border-error bg-bg-secondary flex items-center rounded-r-md border px-3 py-1 text-text-tertiary typo-body cursor-default transition-colors duration-300";
+	// Spacing & Sizing
+	"rounded-r-md",
+	"px-3",
+	"py-1",
+
+	// Typography
+	"typo-body",
+
+	// Cursor & Interactions
+	"cursor-default",
+
+	// Transitions
+	"transition-colors",
+	"duration-300",
+);
 
 const inputVariants = cva(
 	cn(
-		"h-9 file:text-text-primary placeholder:text-text-quternary disabled:placeholder:text-text-disabled selection:bg-bg-primary selection:text-text-primary-foreground border-border-primary hover:border-border-primary_hover flex w-full min-w-0 border bg-transparent px-3 py-2 typo-body text-base transition-all duration-300 outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-md file:font-medium disabled:bg-bg-secondary disabled:cursor-not-allowed disabled:border-border-primary md:text-md selection:bg-selection",
-		"focus-visible:ring-4 focus-visible:ring-ring-blue focus-visible:border-border-link",
-		"aria-invalid:ring-destructive aria-invalid:text-text-error-primary aria-invalid:border-border-error-primary",
-		"",
+		// Sizing & Layout
+		"h-9",
+		"flex",
+		"w-full",
+		"min-w-0",
+
+		// Spacing & Padding
+		"px-3",
+		"py-2",
+
+		// Borders
+		"border",
+		"border-border-primary",
+
+		// Background & Colors
+		"bg-transparent",
+		"text-base",
+
+		// Typography
+		"typo-body",
+		"md:text-md",
+
+		// File input styles
+		"file:text-text-primary",
+		"file:inline-flex",
+		"file:h-7",
+		"file:border-0",
+		"file:bg-transparent",
+		"file:text-md",
+		"file:font-medium",
+
+		// Placeholder styles
+		"placeholder:text-text-quternary",
+
+		// Selection styles
+		"selection:bg-bg-primary",
+		"selection:text-text-primary-foreground",
+		"selection:bg-selection",
+
+		// Hover states
+		"hover:border-border-primary_hover",
+
+		// Focus states
+
+		"focus-visible:border-border-link",
+
+		// Invalid states
+		"aria-invalid:ring-destructive",
+		"aria-invalid:text-text-error-primary",
+		"aria-invalid:border-border-error-primary",
+
+		// Disabled states
+		"disabled:bg-bg-secondary",
+		"disabled:cursor-not-allowed",
+		"disabled:border-border-primary",
+		"disabled:text-text-disabled",
+		"disabled:placeholder:text-text-disabled",
+
+		// Transitions
+		"transition-all",
+		"duration-300",
+
+		// Outline
+		"outline-none",
+
+		// Border radius
 		"rounded-md",
 	),
 	{
 		variants: {
 			hasLeftSlot: {
-				true: "pl-9",
+				true: cn(
+					// Left padding for icon
+					"pl-9",
+				),
 			},
 			hasRightSlot: {
-				true: "pr-9",
+				true: cn(
+					// Right padding for icon
+					"pr-9",
+				),
 			},
 			hasSuffix: {
-				true: "border-r-0 focus-visible:ring-offset-0 rounded-l-md rounded-r-none focus-visible:border-r-1",
+				true: cn(
+					// Border adjustments for suffix
+					"border-r-0",
+					"rounded-l-md",
+					"rounded-r-none",
+
+					// Focus adjustments
+					"focus-visible:ring-offset-0",
+					"focus-visible:border-r-1",
+				),
 			},
 			invalid: {
-				true: "border-border-error focus-visible:ring-4 focus-visible:ring-ring-red focus-visible:border-border-error hover:border-border-error_inverse transition-all duration-300",
+				true: cn(
+					// Invalid border colors
+					"border-border-error",
+					"hover:border-border-error_inverse",
+
+					// Invalid focus states
+					"focus-visible:ring-4",
+					"focus-visible:ring-ring-red",
+					"focus-visible:border-border-error",
+
+					// Transitions
+					"transition-all",
+					"duration-300",
+				),
 			},
 		},
 		defaultVariants: {

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

@@ -4,6 +4,26 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Label styles
+const labelStyles = cn(
+	// Layout
+	"flex",
+	"items-center",
+	"gap-2",
+	// Typography
+	"text-text-primary",
+	"typo-label",
+	"leading-none",
+	// Interaction
+	"select-none",
+	// Group disabled states
+	"group-data-[disabled=true]:pointer-events-none",
+	"group-data-[disabled=true]:opacity-50",
+	// Peer disabled states
+	"peer-disabled:cursor-not-allowed",
+	"peer-disabled:opacity-50",
+);
+
 function Label({
 	className,
 	...props
@@ -11,10 +31,7 @@ function Label({
 	return (
 		<LabelPrimitive.Root
 			data-slot="label"
-			className={cn(
-				"flex items-center gap-2 text-text-primary typo-label leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-				className,
-			)}
+			className={cn(labelStyles, className)}
 			{...props}
 		/>
 	);

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

@@ -4,6 +4,181 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Menubar styles
+const menubarStyles = cn(
+	"bg-background",
+	"flex",
+	"h-9",
+	"items-center",
+	"gap-1",
+	"rounded-md",
+	"border",
+	"p-1",
+	"shadow-xs",
+);
+
+// Menubar trigger styles
+const menubarTriggerStyles = cn(
+	"focus:bg-accent",
+	"focus:text-accent-foreground",
+	"data-[state=open]:bg-accent",
+	"data-[state=open]:text-accent-foreground",
+	"flex",
+	"items-center",
+	"rounded-sm",
+	"px-2",
+	"py-1",
+	"text-sm",
+	"font-medium",
+	"outline-hidden",
+	"select-none",
+);
+
+// Menubar content styles
+const menubarContentStyles = cn(
+	"bg-popover",
+	"text-popover-foreground",
+	"data-[state=open]:animate-in",
+	"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-[12rem]",
+	"origin-(--radix-menubar-content-transform-origin)",
+	"overflow-hidden",
+	"rounded-md",
+	"border",
+	"p-1",
+	"shadow-md",
+);
+
+// Menubar item styles
+const menubarItemStyles = 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",
+);
+
+// Menubar checkbox/radio item styles
+const menubarCheckboxRadioItemStyles = cn(
+	"focus:bg-accent",
+	"focus:text-accent-foreground",
+	"relative",
+	"flex",
+	"cursor-default",
+	"items-center",
+	"gap-2",
+	"rounded-xs",
+	"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",
+);
+
+// Menubar indicator styles
+const menubarIndicatorStyles = cn(
+	"pointer-events-none",
+	"absolute",
+	"left-2",
+	"flex",
+	"size-3.5",
+	"items-center",
+	"justify-center",
+);
+
+// Menubar label styles
+const menubarLabelStyles = cn(
+	"px-2",
+	"py-1.5",
+	"text-sm",
+	"font-medium",
+	"data-[inset]:pl-8",
+);
+
+// Menubar separator styles
+const menubarSeparatorStyles = cn("bg-border", "-mx-1", "my-1", "h-px");
+
+// Menubar shortcut styles
+const menubarShortcutStyles = cn(
+	"text-muted-foreground",
+	"ml-auto",
+	"text-xs",
+	"tracking-widest",
+);
+
+// Menubar sub trigger styles
+const menubarSubTriggerStyles = cn(
+	"focus:bg-(--color-surface-1)",
+	"data-[state=open]:bg-(--color-surface-1)",
+	"flex",
+	"items-center",
+	"rounded-sm",
+	"px-2",
+	"py-1",
+	"text-sm",
+	"font-medium",
+	"outline-hidden",
+	"select-none",
+);
+
+// Menubar sub content styles
+const menubarSubContentStyles = 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-menubar-content-transform-origin)",
+	"overflow-hidden",
+	"rounded-md",
+	"border",
+	"p-1",
+	"shadow-lg",
+);
+
 function Menubar({
 	className,
 	...props
@@ -11,10 +186,7 @@ function Menubar({
 	return (
 		<MenubarPrimitive.Root
 			data-slot="menubar"
-			className={cn(
-				"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-				className,
-			)}
+			className={cn(menubarStyles, className)}
 			{...props}
 		/>
 	);
@@ -53,10 +225,7 @@ function MenubarTrigger({
 	return (
 		<MenubarPrimitive.Trigger
 			data-slot="menubar-trigger"
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-				className,
-			)}
+			className={cn(menubarTriggerStyles, className)}
 			{...props}
 		/>
 	);
@@ -76,10 +245,7 @@ function MenubarContent({
 				align={align}
 				alignOffset={alignOffset}
 				sideOffset={sideOffset}
-				className={cn(
-					"bg-popover text-popover-foreground data-[state=open]:animate-in 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-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-					className,
-				)}
+				className={cn(menubarContentStyles, className)}
 				{...props}
 			/>
 		</MenubarPortal>
@@ -100,10 +266,7 @@ function MenubarItem({
 			data-slot="menubar-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(menubarItemStyles, className)}
 			{...props}
 		/>
 	);
@@ -117,13 +280,10 @@ function MenubarCheckboxItem({
 	return (
 		<MenubarPrimitive.CheckboxItem
 			data-slot="menubar-checkbox-item"
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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(menubarCheckboxRadioItemStyles, className)}
 			{...props}
 		>
-			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			<span className={menubarIndicatorStyles}>
 				<MenubarPrimitive.ItemIndicator>
 					<CheckIcon className="size-4" />
 				</MenubarPrimitive.ItemIndicator>
@@ -141,13 +301,10 @@ function MenubarRadioItem({
 	return (
 		<MenubarPrimitive.RadioItem
 			data-slot="menubar-radio-item"
-			className={cn(
-				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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(menubarCheckboxRadioItemStyles, className)}
 			{...props}
 		>
-			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+			<span className={menubarIndicatorStyles}>
 				<MenubarPrimitive.ItemIndicator>
 					<CircleIcon className="size-2 fill-current" />
 				</MenubarPrimitive.ItemIndicator>
@@ -168,10 +325,7 @@ function MenubarLabel({
 		<MenubarPrimitive.Label
 			data-slot="menubar-label"
 			data-inset={inset}
-			className={cn(
-				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-				className,
-			)}
+			className={cn(menubarLabelStyles, className)}
 			{...props}
 		/>
 	);
@@ -184,7 +338,7 @@ function MenubarSeparator({
 	return (
 		<MenubarPrimitive.Separator
 			data-slot="menubar-separator"
-			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			className={cn(menubarSeparatorStyles, className)}
 			{...props}
 		/>
 	);
@@ -197,10 +351,7 @@ function MenubarShortcut({
 	return (
 		<span
 			data-slot="menubar-shortcut"
-			className={cn(
-				"text-muted-foreground ml-auto text-xs tracking-widest",
-				className,
-			)}
+			className={cn(menubarShortcutStyles, className)}
 			{...props}
 		/>
 	);
@@ -224,10 +375,7 @@ function MenubarSubTrigger({
 		<MenubarPrimitive.SubTrigger
 			data-slot="menubar-sub-trigger"
 			data-inset={inset}
-			className={cn(
-				"focus:bg-(--color-surface-1) data-[state=open]:bg-(--color-surface-1) flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-				className,
-			)}
+			className={cn(menubarSubTriggerStyles, className)}
 			{...props}
 		>
 			{children}
@@ -243,10 +391,7 @@ function MenubarSubContent({
 	return (
 		<MenubarPrimitive.SubContent
 			data-slot="menubar-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-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-				className,
-			)}
+			className={cn(menubarSubContentStyles, className)}
 			{...props}
 		/>
 	);