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

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}
 		/>
 	);

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}
 		/>
 	);
@@ -28,7 +35,7 @@ function PaginationContent({
 	return (
 		<ul
 			data-slot="pagination-content"
-			className={cn("flex flex-row items-center gap-1", className)}
+			className={cn("flex", "flex-row", "items-center", "gap-1", className)}
 			{...props}
 		/>
 	);
@@ -37,7 +44,7 @@ function PaginationContent({
 function PaginationItem({ ...props }: React.ComponentProps<"li">) {
 	return (
 		<li
-			className="hover:bg-accent rounded-md"
+			className={cn("hover:bg-bg-secondary", "rounded-md")}
 			data-slot="pagination-item"
 			{...props}
 		/>
@@ -80,11 +87,10 @@ function PaginationPrevious({
 		<PaginationLink
 			aria-label="Go to previous page"
 			size="small"
-			className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+			className={cn("gap-1", "px-2.5", "sm:pl-2.5", className)}
 			{...props}
 		>
 			<ChevronLeftIcon />
-			<span className="hidden sm:block">Previous</span>
 		</PaginationLink>
 	);
 }
@@ -97,10 +103,9 @@ function PaginationNext({
 		<PaginationLink
 			aria-label="Go to next page"
 			size="regular"
-			className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+			className={cn("gap-1", "px-2.5", "sm:pr-2.5", className)}
 			{...props}
 		>
-			<span className="hidden sm:block">Next</span>
 			<ChevronRightIcon />
 		</PaginationLink>
 	);
@@ -114,7 +119,13 @@ function PaginationEllipsis({
 		<span
 			aria-hidden
 			data-slot="pagination-ellipsis"
-			className={cn("flex size-9 items-center justify-center", className)}
+			className={cn(
+				"flex",
+				"size-9",
+				"items-center",
+				"justify-center",
+				className,
+			)}
 			{...props}
 		>
 			<MoreHorizontalIcon className="size-4" />
@@ -123,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,
@@ -131,4 +187,5 @@ export {
 	PaginationPrevious,
 	PaginationNext,
 	PaginationEllipsis,
+	PaginationPageSizeSelector,
 };

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

@@ -1,8 +1,43 @@
+"use client";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Popover content styles
+const popoverContentStyles = cn(
+	// Layout
+	"z-50",
+	"w-72",
+	"origin-(--radix-popover-content-transform-origin)",
+	"outline-hidden",
+	// Shape
+	"rounded-md",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Background & Colors
+	"bg-bg-primary",
+	"text-text-primary",
+	// Spacing
+	"p-4",
+	// 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",
+);
+
 function Popover({
 	...props
 }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
@@ -27,10 +62,7 @@ function PopoverContent({
 				data-slot="popover-content"
 				align={align}
 				sideOffset={sideOffset}
-				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 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-					className,
-				)}
+				className={cn(popoverContentStyles, className)}
 				{...props}
 			/>
 		</PopoverPrimitive.Portal>

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

@@ -3,6 +3,25 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Progress root styles
+const progressRootStyles = cn(
+	"relative",
+	"h-2",
+	"w-full",
+	"overflow-hidden",
+	"rounded-full",
+	"bg-bg-quaternary",
+);
+
+// Progress indicator styles
+const progressIndicatorStyles = cn(
+	"bg-bg-link",
+	"h-full",
+	"w-full",
+	"flex-1",
+	"transition-all",
+);
+
 function Progress({
 	className,
 	value,
@@ -11,15 +30,12 @@ function Progress({
 	return (
 		<ProgressPrimitive.Root
 			data-slot="progress"
-			className={cn(
-				"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
-				className,
-			)}
+			className={cn(progressRootStyles, className)}
 			{...props}
 		>
 			<ProgressPrimitive.Indicator
 				data-slot="progress-indicator"
-				className="bg-primary h-full w-full flex-1 transition-all"
+				className={progressIndicatorStyles}
 				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 			/>
 		</ProgressPrimitive.Root>