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

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

@@ -4,67 +4,163 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-const buttonVariants = cva(
-	cn(
-		"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg transition-all ",
-		"outline-none cursor-pointer",
-		"disabled:cursor-not-allowed",
-		"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
-		"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-		"aria-invalid:ring-destructive/20",
-	),
-	{
-		variants: {
-			variant: {
-				primary:
-					"bg-bg-link text-text-primary_on-brand shadow-xs hover:bg-bg-link_hover active:bg-bg-link disabled:bg-bg-disabled",
-				secondary:
-					"border border-border-primary bg-bg-primary text-text-tertiary shadow-xs hover:text-fg-primary disabled:text-fg-disabled disabled:border-border-disabled hover:bg-bg-secondary active:bg-bg-primary active:text-text-tertiary disabled:hover:bg-bg-primary",
-				link: "text-text-secondary hover:text-text-primary disabled:text-text-disabled rounded-none",
-				ghost:
-					"text-text-secondary hover:text-text-primary disabled:text-text-disabled hover:bg-bg-secondary active:bg-bg-tertiary disabled:hover:bg-bg-primary",
-			},
-			size: {
-				regular: "h-9 px-4 typo-label",
-				small: "h-6 px-2 typo-button-label-xs gap-1 rounded-md",
-			},
-			danger: {
-				true: "",
-				false: "",
-			},
+const baseButtonStyles = cn(
+	// Layout
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"gap-2",
+	"whitespace-nowrap",
+	"shrink-0",
+	// Shape
+	"rounded-lg",
+	// Interaction
+	"transition-all",
+	"outline-none",
+	"cursor-pointer",
+	// Disabled states
+	"disabled:cursor-not-allowed",
+	// Icon styles
+	"[&_svg]:pointer-events-none",
+	"[&_svg:not([class*='size-'])]:size-4",
+	"[&_svg]:shrink-0",
+	// Focus states
+	// Invalid states
+	"aria-invalid:ring-2",
+	"aria-invalid:ring-utility-red/70",
+);
+
+const buttonVariants = cva(baseButtonStyles, {
+	variants: {
+		variant: {
+			primary: cn(
+				"bg-bg-link",
+				"text-text-primary_on-brand",
+				"hover:bg-bg-link_hover",
+				"active:bg-bg-link",
+			),
+			secondary: cn(
+				"border",
+				"border-border-primary",
+				"bg-bg-primary",
+				"text-text-secondary",
+				"hover:text-text-primary",
+				"hover:bg-bg-secondary",
+				"active:bg-bg-primary",
+				"active:text-text-tertiary",
+			),
+			link: cn("text-text-secondary", "hover:text-text-primary", "rounded"),
+			ghost: cn(
+				"text-text-secondary",
+				"hover:text-text-primary",
+				"hover:bg-bg-secondary",
+				"active:bg-bg-tertiary",
+			),
+		},
+		size: {
+			regular: cn("h-9", "px-4", "typo-body"),
+			small: cn("h-6", "px-2", "gap-1", "typo-button-label-xs"),
+		},
+		danger: {
+			true: "",
+			false: "",
+		},
+	},
+	compoundVariants: [
+		// Primary disabled
+		{
+			variant: "primary",
+			class: cn("disabled:bg-bg-disabled", "disabled:text-white"),
+		},
+		// Secondary disabled
+		{
+			variant: "secondary",
+			class: cn(
+				"disabled:bg-bg-primary",
+				"disabled:text-text-disabled",
+				"disabled:border-border-disabled",
+			),
+		},
+		// Link disabled
+		{
+			variant: "link",
+			class: cn("disabled:text-text-disabled"),
+		},
+		// Ghost disabled
+		{
+			variant: "ghost",
+			class: cn("disabled:text-text-disabled"),
 		},
-		compoundVariants: [
-			{
-				variant: "primary",
-				danger: true,
-				class:
-					"bg-bg-error-primary_inverse text-text-primary_on-brand hover:bg-bg-error-primary_inverse_hover active:bg-bg-error-primary_inverse disabled:bg-bg-disabled",
-			},
-			{
-				variant: "secondary",
-				danger: true,
-				class:
-					"border-border-error text-text-error-primary hover:text-text-error-primary_hover hover:bg-bg-error-secondary active:bg-bg-primary active:text-text-error-primary_on-brand",
-			},
-			{
-				variant: "link",
-				danger: true,
-				class: "text-text-error-secondary hover:text-text-error-primary",
-			},
-			{
-				variant: "ghost",
-				danger: true,
-				class:
-					"text-text-error-secondary hover:text-text-error-primary hover:bg-bg-error-secondary active:bg-bg-error-tertiary",
-			},
-		],
-		defaultVariants: {
+		// Primary danger
+		{
 			variant: "primary",
+			danger: true,
+			class: cn(
+				"bg-bg-error-primary_inverse",
+				"text-text-primary_on-brand",
+				"hover:bg-bg-error-primary_inverse_hover",
+				"active:bg-bg-error-primary_inverse",
+			),
+		},
+		// Secondary danger
+		{
+			variant: "secondary",
+			danger: true,
+			class: cn(
+				"border-border-error",
+				"text-text-error-primary",
+				"hover:text-text-error-primary",
+				"hover:bg-bg-error-secondary",
+				"active:bg-bg-primary",
+				"active:text-text-error-primary",
+			),
+		},
+		// Link danger
+		{
+			variant: "link",
+			danger: true,
+			class: cn("text-text-error-secondary", "hover:text-text-error-primary"),
+		},
+		// Ghost danger
+		{
+			variant: "ghost",
+			danger: true,
+			class: cn(
+				"text-text-error-secondary",
+				"hover:text-text-error-primary",
+				"hover:bg-bg-error-secondary",
+				"active:bg-bg-error-tertiary",
+			),
+		},
+		// Focus ring for regular size
+		{
+			size: "regular",
+			danger: false,
+			class: cn("focus-visible:ring-4", "focus-visible:ring-ring-blue"),
+		},
+		{
 			size: "regular",
+			danger: true,
+			class: cn("focus-visible:ring-4", "focus-visible:ring-ring-red"),
+		},
+		// Focus ring for small size
+		{
+			size: "small",
 			danger: false,
+			class: cn("focus-visible:ring-3", "focus-visible:ring-ring-blue"),
 		},
+		{
+			size: "small",
+			danger: true,
+			class: cn("focus-visible:ring-3", "focus-visible:ring-ring-red"),
+		},
+	],
+	defaultVariants: {
+		variant: "primary",
+		size: "regular",
+		danger: false,
 	},
-);
+});
 
 function Button({
 	className,

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

@@ -1,3 +1,4 @@
+"use client";
 import {
 	ChevronDownIcon,
 	ChevronLeftIcon,

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

@@ -15,14 +15,28 @@ import { Label } from "#shadcn/components/ui/label";
 
 const meta = {
 	title: "Component/Card",
-} satisfies Meta;
+	component: Card,
+	parameters: {
+		layout: "centered",
+	},
+	argTypes: {
+		variant: {
+			control: { type: "select" },
+			options: ["default", "round", "round-white"],
+			description: "Card variant",
+		},
+	},
+} satisfies Meta<typeof Card>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Demo = {
-	render: () => (
-		<Card className="w-full max-w-sm">
+	args: {
+		variant: "default",
+	},
+	render: ({ variant }) => (
+		<Card variant={variant || "default"} className="w-full max-w-sm">
 			<CardHeader>
 				<CardTitle>Login to your account</CardTitle>
 				<CardDescription>

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

@@ -2,16 +2,73 @@ import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+// Base card styles
+const baseCardStyles = cn(
+	// Layout
+	"flex",
+	"flex-col",
+	"gap-6",
+	// Borders
+	"border",
+	"border-border-primary",
+	// Background & Colors
+	"bg-bg-primary",
+	"text-text-primary",
+	// Shadow
+	"shadow-sm",
+);
+
+// Default card styles
+const defaultCardStyles = cn(
+	baseCardStyles,
+	// Shape
+	"rounded-xl",
+	// Spacing
+	"py-6",
+);
+
+// Round card styles
+const roundCardStyles = cn(
+	baseCardStyles,
+	// Shape
+	"rounded-3xl",
+	// Spacing
+	"px-8",
+	"py-6",
+);
+
+// Round white card styles (no border, no shadow)
+const roundWhiteCardStyles = cn(
+	// Layout
+	"flex",
+	"flex-col",
+	"gap-6",
+	// Background & Colors
+	"bg-bg-primary",
+	"text-text-primary",
+	// Shape
+	"rounded-3xl",
+	// Spacing
+	"px-8",
+	"py-6",
+);
+
+type CardVariant = "default" | "round" | "round-white";
+
+interface CardProps extends React.ComponentProps<"div"> {
+	variant?: CardVariant;
+}
+
+function Card({ className, variant = "default", ...props }: CardProps) {
+	const variantStyles =
+		variant === "round"
+			? roundCardStyles
+			: variant === "round-white"
+				? roundWhiteCardStyles
+				: defaultCardStyles;
+
 	return (
-		<div
-			data-slot="card"
-			className={cn(
-				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-				className,
-			)}
-			{...props}
-		/>
+		<div data-slot="card" className={cn(variantStyles, className)} {...props} />
 	);
 }
 
@@ -20,7 +77,15 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="card-header"
 			className={cn(
-				"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+				"@container/card-header",
+				"grid",
+				"auto-rows-min",
+				"grid-rows-[auto_auto]",
+				"items-start",
+				"gap-1.5",
+				"px-6",
+				"has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+				"[.border-b]:pb-6",
 				className,
 			)}
 			{...props}
@@ -32,7 +97,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="card-title"
-			className={cn("leading-none font-semibold", className)}
+			className={cn("leading-none", "font-semibold", className)}
 			{...props}
 		/>
 	);
@@ -42,7 +107,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="card-description"
-			className={cn("text-muted-foreground text-sm", className)}
+			className={cn("text-text-secondary", "text-sm", className)}
 			{...props}
 		/>
 	);
@@ -53,7 +118,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="card-action"
 			className={cn(
-				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+				"col-start-2",
+				"row-span-2",
+				"row-start-1",
+				"self-start",
+				"justify-self-end",
 				className,
 			)}
 			{...props}
@@ -75,7 +144,13 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="card-footer"
-			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+			className={cn(
+				"flex",
+				"items-center",
+				"px-6",
+				"[.border-t]:pt-6",
+				className,
+			)}
 			{...props}
 		/>
 	);

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

@@ -1,3 +1,4 @@
+"use client";
 import useEmblaCarousel, {
 	type UseEmblaCarouselType,
 } from "embla-carousel-react";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 
@@ -67,7 +68,7 @@ function ChartContainer({
 	);
 }
 
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+function ChartStyle({ id, config }: { id: string; config: ChartConfig }) {
 	const colorConfig = Object.entries(config).filter(
 		([, config]) => config.theme || config.color,
 	);
@@ -99,7 +100,7 @@ ${colorConfig
 			}}
 		/>
 	);
-};
+}
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
@@ -117,7 +118,7 @@ function ChartTooltipContent({
 	color,
 	nameKey,
 	labelKey,
-}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+}: RechartsPrimitive.TooltipContentProps &
 	React.ComponentProps<"div"> & {
 		hideLabel?: boolean;
 		hideIndicator?: boolean;
@@ -185,7 +186,7 @@ function ChartTooltipContent({
 
 					return (
 						<div
-							key={item.dataKey}
+							key={String(item.dataKey ?? index)}
 							className={cn(
 								"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
 								indicator === "dot" && "items-center",
@@ -256,7 +257,10 @@ function ChartLegendContent({
 	verticalAlign = "bottom",
 	nameKey,
 }: React.ComponentProps<"div"> &
-	Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+	Pick<
+		RechartsPrimitive.DefaultLegendContentProps,
+		"payload" | "verticalAlign"
+	> & {
 		hideIcon?: boolean;
 		nameKey?: string;
 	}) {

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

@@ -11,39 +11,87 @@ type Story = StoryObj<typeof meta>;
 
 export const Demo = {
 	render: () => (
-		<div className="flex flex-col gap-6">
-			<div className="flex items-center gap-3">
-				<Checkbox id="terms" />
-				<Label htmlFor="terms">Accept terms and conditions</Label>
-			</div>
-			<div className="flex items-start gap-3">
-				<Checkbox id="terms-2" defaultChecked />
-				<div className="grid gap-2">
-					<Label htmlFor="terms-2">Accept terms and conditions</Label>
-					<p className="text-muted-foreground text-sm">
-						By clicking this checkbox, you agree to the terms and conditions.
-					</p>
+		<div className="flex gap-12">
+			{/* Regular size */}
+			<div className="flex flex-col gap-6">
+				<div className="flex items-center gap-3">
+					<Checkbox id="terms" size="regular" />
+					<Label htmlFor="terms">Unchecked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox id="terms-2" size="regular" defaultChecked />
+					<Label htmlFor="terms-2">Checked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox id="indeterminate" size="regular" checked="indeterminate" />
+					<Label htmlFor="indeterminate">Indeterminate</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox id="disabled" size="regular" disabled />
+					<Label htmlFor="disabled">Disabled unchecked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox
+						id="disabled-checked"
+						size="regular"
+						disabled
+						defaultChecked
+					/>
+					<Label htmlFor="disabled-checked">Disabled checked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox
+						id="disabled-indeterminate"
+						size="regular"
+						disabled
+						checked="indeterminate"
+					/>
+					<Label htmlFor="disabled-indeterminate">Disabled indeterminate</Label>
 				</div>
 			</div>
-			<div className="flex items-start gap-3">
-				<Checkbox id="toggle" disabled />
-				<Label htmlFor="toggle">Enable notifications</Label>
+			{/* Small size */}
+			<div className="flex flex-col gap-6">
+				<div className="flex items-center gap-3">
+					<Checkbox id="terms-small" size="small" />
+					<Label htmlFor="terms-small">Unchecked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox id="terms-2-small" size="small" defaultChecked />
+					<Label htmlFor="terms-2-small">Checked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox
+						id="indeterminate-small"
+						size="small"
+						checked="indeterminate"
+					/>
+					<Label htmlFor="indeterminate-small">Indeterminate</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox id="disabled-small" size="small" disabled />
+					<Label htmlFor="disabled-small">Disabled unchecked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox
+						id="disabled-checked-small"
+						size="small"
+						disabled
+						defaultChecked
+					/>
+					<Label htmlFor="disabled-checked-small">Disabled checked</Label>
+				</div>
+				<div className="flex items-center gap-3">
+					<Checkbox
+						id="disabled-indeterminate-small"
+						size="small"
+						disabled
+						checked="indeterminate"
+					/>
+					<Label htmlFor="disabled-indeterminate-small">
+						Disabled indeterminate
+					</Label>
+				</div>
 			</div>
-			<Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
-				<Checkbox
-					id="toggle-2"
-					defaultChecked
-					className="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
-				/>
-				<div className="grid gap-1.5 font-normal">
-					<p className="text-sm leading-none font-medium">
-						Enable notifications
-					</p>
-					<p className="text-muted-foreground text-sm">
-						You can enable or disable notifications at any time.
-					</p>
-				</div>
-			</Label>
 		</div>
 	),
 } satisfies Story;