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

package/src/shadcn/components/ui/radio-button-group.stories.tsx

@@ -0,0 +1,247 @@
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	RadioButtonGroup,
+	type RadioButtonGroupOption,
+} from "#shadcn/components/ui/radio-button-group";
+
+const optionsWithDescription: RadioButtonGroupOption[] = [
+	{
+		value: "option-1",
+		label: "First option",
+		description: "This is a helpful description for the first option",
+	},
+	{
+		value: "option-2",
+		label: "Second option",
+		description: "This is a helpful description for the second option",
+	},
+];
+
+const optionsWithoutDescription: RadioButtonGroupOption[] = [
+	{ value: "option-1", label: "First option" },
+	{ value: "option-2", label: "Second option" },
+];
+
+const threeOptionsWithDescription: RadioButtonGroupOption[] = [
+	{
+		value: "option-1",
+		label: "Basic plan",
+		description: "Perfect for individuals and small projects",
+	},
+	{
+		value: "option-2",
+		label: "Pro plan",
+		description: "Best for growing teams and businesses",
+	},
+	{
+		value: "option-3",
+		label: "Enterprise",
+		description: "Custom solutions for large organizations",
+	},
+];
+
+const threeOptionsWithoutDescription: RadioButtonGroupOption[] = [
+	{ value: "option-1", label: "Basic plan" },
+	{ value: "option-2", label: "Pro plan" },
+	{ value: "option-3", label: "Enterprise" },
+];
+
+interface RadioButtonGroupWrapperProps {
+	variant?: "wrapped" | "unwrapped";
+	vertical?: boolean;
+	title?: string;
+	description?: string;
+	disabled?: boolean;
+	optionDescription?: boolean;
+	defaultValue?: string;
+}
+
+function RadioButtonGroupWrapper({
+	variant = "wrapped",
+	vertical = false,
+	title,
+	description,
+	disabled = false,
+	optionDescription = true,
+	defaultValue = "option-1",
+}: RadioButtonGroupWrapperProps) {
+	const options = optionDescription
+		? optionsWithDescription
+		: optionsWithoutDescription;
+
+	return (
+		<RadioButtonGroup
+			variant={variant}
+			vertical={vertical}
+			{...(title && { title })}
+			{...(description && { description })}
+			disabled={disabled}
+			options={options}
+			defaultValue={defaultValue}
+		/>
+	);
+}
+
+const meta = {
+	title: "Component/Radio Button Group",
+	component: RadioButtonGroupWrapper,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		variant: {
+			control: "select",
+			options: ["wrapped", "unwrapped"],
+		},
+		vertical: {
+			control: "boolean",
+		},
+		disabled: {
+			control: "boolean",
+		},
+		optionDescription: {
+			control: "boolean",
+		},
+		title: {
+			control: "text",
+		},
+		description: {
+			control: "text",
+		},
+	},
+	args: {
+		variant: "wrapped",
+		vertical: false,
+		disabled: false,
+		optionDescription: true,
+		title: "Select an option",
+		description: "Choose the option that best fits your needs",
+		defaultValue: "option-1",
+	},
+} satisfies Meta<typeof RadioButtonGroupWrapper>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	tags: ["!dev"],
+	render: (args) => <RadioButtonGroupWrapper {...args} />,
+} satisfies Story;
+
+export const Demo = {
+	tags: ["!autodocs"],
+	render: () => (
+		<div className="flex flex-col gap-12 p-6">
+			{/* Wrapped Style with Description */}
+			<div className="space-y-8">
+				<h2 className="text-lg font-semibold text-text-primary">
+					Style: Wrapped (with description)
+				</h2>
+
+				<div className="space-y-4">
+					<h3 className="text-sm text-text-secondary">Horizontal</h3>
+					<RadioButtonGroup
+						variant="wrapped"
+						vertical={false}
+						title="Select an option"
+						description="Choose the option that best fits your needs"
+						options={optionsWithDescription}
+						defaultValue="option-1"
+					/>
+				</div>
+
+				<div className="space-y-4">
+					<h3 className="text-sm text-text-secondary">Vertical</h3>
+					<RadioButtonGroup
+						variant="wrapped"
+						vertical={true}
+						title="Select a plan"
+						description="Choose the plan that best fits your needs"
+						options={threeOptionsWithDescription}
+						defaultValue="option-1"
+					/>
+				</div>
+			</div>
+
+			{/* Wrapped Style without Description */}
+			<div className="space-y-8">
+				<h2 className="text-lg font-semibold text-text-primary">
+					Style: Wrapped (without description)
+				</h2>
+
+				<div className="space-y-4">
+					<h3 className="text-sm text-text-secondary">Horizontal</h3>
+					<RadioButtonGroup
+						variant="wrapped"
+						vertical={false}
+						title="Select an option"
+						options={optionsWithoutDescription}
+						defaultValue="option-1"
+					/>
+				</div>
+
+				<div className="space-y-4">
+					<h3 className="text-sm text-text-secondary">Vertical</h3>
+					<RadioButtonGroup
+						variant="wrapped"
+						vertical={true}
+						title="Select a plan"
+						options={threeOptionsWithoutDescription}
+						defaultValue="option-2"
+					/>
+				</div>
+			</div>
+
+			{/* Unwrapped Style */}
+			<div className="space-y-8">
+				<h2 className="text-lg font-semibold text-text-primary">
+					Style: Unwrapped
+				</h2>
+
+				<div className="space-y-4">
+					<h3 className="text-sm text-text-secondary">Horizontal</h3>
+					<RadioButtonGroup
+						variant="unwrapped"
+						vertical={false}
+						title="Select an option"
+						options={optionsWithoutDescription}
+						defaultValue="option-1"
+					/>
+				</div>
+
+				<div className="space-y-4">
+					<h3 className="text-sm text-text-secondary">Vertical</h3>
+					<RadioButtonGroup
+						variant="unwrapped"
+						vertical={true}
+						title="Select a plan"
+						options={threeOptionsWithoutDescription}
+						defaultValue="option-2"
+					/>
+				</div>
+			</div>
+
+			{/* Disabled */}
+			<div className="space-y-8">
+				<h2 className="text-lg font-semibold text-text-primary">Disabled</h2>
+				<RadioButtonGroup
+					variant="wrapped"
+					vertical={false}
+					title="Disabled group"
+					options={optionsWithDescription}
+					defaultValue="option-1"
+					disabled
+				/>
+			</div>
+		</div>
+	),
+} satisfies Story;

package/src/shadcn/components/ui/radio-button-group.tsx

@@ -0,0 +1,188 @@
+"use client";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+import { RadioGroupItem } from "./radio-group";
+
+// Radio Button Group container styles
+const radioButtonGroupStyles = cva("flex flex-col gap-2", {
+	variants: {
+		variant: {
+			wrapped: "",
+			unwrapped: "",
+		},
+		vertical: {
+			true: "",
+			false: "",
+		},
+	},
+	defaultVariants: {
+		variant: "wrapped",
+		vertical: false,
+	},
+});
+
+// Radio items container styles
+const radioItemsContainerStyles = cva("flex", {
+	variants: {
+		variant: {
+			wrapped: "",
+			unwrapped: "",
+		},
+		vertical: {
+			true: "flex-col",
+			false: "flex-row gap-3",
+		},
+	},
+	compoundVariants: [
+		{
+			variant: "unwrapped",
+			vertical: true,
+			class: "gap-2",
+		},
+	],
+	defaultVariants: {
+		variant: "wrapped",
+		vertical: false,
+	},
+});
+
+// Individual radio item wrapper styles
+const radioItemWrapperStyles = cva(cn("flex cursor-pointer transition-all"), {
+	variants: {
+		variant: {
+			wrapped: cn(
+				"items-start",
+				"gap-3",
+				"p-4",
+				"border",
+				"border-border-primary",
+				"bg-bg-primary",
+				"hover:bg-bg-secondary",
+				"[&:has([data-state=checked])]:bg-bg-tertiary",
+			),
+			unwrapped: "gap-2",
+		},
+		vertical: {
+			true: "",
+			false: "",
+		},
+	},
+	compoundVariants: [
+		{
+			variant: "wrapped",
+			vertical: false,
+			class: "rounded-lg",
+		},
+		{
+			variant: "wrapped",
+			vertical: true,
+			class: cn(
+				"first:rounded-t-lg",
+				"last:rounded-b-lg",
+				"[&:not(:first-child)]:-mt-px",
+			),
+		},
+	],
+	defaultVariants: {
+		variant: "wrapped",
+		vertical: false,
+	},
+});
+
+// Title styles
+const titleStyles = cn("text-text-primary", "body16bold");
+
+// Description styles
+const descriptionStyles = cn("text-text-secondary", "body14");
+
+// Label styles
+const labelStyles = cn(
+	"text-text-primary",
+	"body14",
+	"cursor-pointer",
+	"select-none",
+);
+
+export interface RadioButtonGroupOption {
+	value: string;
+	label: string;
+	description?: string;
+	disabled?: boolean;
+}
+
+export interface RadioButtonGroupProps
+	extends Omit<
+			React.ComponentProps<typeof RadioGroupPrimitive.Root>,
+			"children"
+		>,
+		VariantProps<typeof radioButtonGroupStyles> {
+	title?: string;
+	description?: string;
+	options: RadioButtonGroupOption[];
+}
+
+function RadioButtonGroup({
+	className,
+	variant = "wrapped",
+	vertical = false,
+	title,
+	description,
+	options,
+	...props
+}: RadioButtonGroupProps) {
+	return (
+		<div
+			className={cn(radioButtonGroupStyles({ variant, vertical }), className)}
+		>
+			{(title || description) && (
+				<div className="flex flex-col gap-0.5 mb-2">
+					{title && <span className={titleStyles}>{title}</span>}
+					{description && (
+						<span className={descriptionStyles}>{description}</span>
+					)}
+				</div>
+			)}
+			<RadioGroupPrimitive.Root
+				data-slot="radio-button-group"
+				className={radioItemsContainerStyles({ variant, vertical })}
+				{...props}
+			>
+				{options.map((option) => {
+					const radioId = `radio-${option.value}`;
+					return (
+						<label
+							key={option.value}
+							htmlFor={radioId}
+							className={cn(
+								radioItemWrapperStyles({ variant, vertical }),
+								variant === "unwrapped" &&
+									(option.description ? "items-start" : "items-center"),
+							)}
+						>
+							<RadioGroupItem
+								id={radioId}
+								value={option.value}
+								disabled={option.disabled}
+								size="small"
+								className={variant === "wrapped" ? "mt-0.5" : ""}
+							/>
+							<div className="flex flex-col gap-0.5">
+								<span className={labelStyles}>{option.label}</span>
+								{option.description && (
+									<span className={descriptionStyles}>
+										{option.description}
+									</span>
+								)}
+							</div>
+						</label>
+					);
+				})}
+			</RadioGroupPrimitive.Root>
+		</div>
+	);
+}
+
+export { RadioButtonGroup };

package/src/shadcn/components/ui/radio-group.stories.tsx

@@ -1,29 +1,85 @@
+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 { RadioGroup, RadioGroupItem } from "#shadcn/components/ui/radio-group";
 
 const meta = {
 	title: "Component/Radio group",
-} satisfies Meta;
+	component: RadioGroup,
+	parameters: {
+		docs: {
+			page: () => (
+				<>
+					<Title />
+					<Primary />
+					<Controls />
+				</>
+			),
+		},
+	},
+	argTypes: {
+		disabled: {
+			control: "boolean",
+		},
+	},
+	args: {
+		disabled: false,
+	},
+} satisfies Meta<typeof RadioGroup>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+export const Default = {
+	tags: ["!dev"],
+	render: (args) => (
+		<RadioGroup defaultValue="option-1" {...args}>
+			<RadioGroupItem value="option-1" id="option-1" size="regular" />
+			<RadioGroupItem value="option-2" id="option-2" size="regular" />
+		</RadioGroup>
+	),
+} satisfies Story;
+
 export const Demo = {
+	tags: ["!autodocs"],
 	render: () => (
-		<RadioGroup defaultValue="comfortable">
-			<div className="flex items-center gap-3">
-				<RadioGroupItem value="default" id="r1" />
-				<Label htmlFor="r1">Default</Label>
-			</div>
-			<div className="flex items-center gap-3">
-				<RadioGroupItem value="comfortable" id="r2" />
-				<Label htmlFor="r2">Comfortable</Label>
+		<div className="flex gap-12">
+			{/* Regular size */}
+			<div className="space-y-6">
+				<RadioGroup defaultValue="checked">
+					<RadioGroupItem value="default" id="r1" size="regular" />
+					<RadioGroupItem value="checked" id="r2" size="regular" />
+					<RadioGroupItem value="disabled" id="r3" size="regular" disabled />
+				</RadioGroup>
+				<RadioGroup defaultValue="disabled-checked">
+					<RadioGroupItem
+						value="disabled-checked"
+						id="r4"
+						size="regular"
+						disabled
+					/>
+				</RadioGroup>
 			</div>
-			<div className="flex items-center gap-3">
-				<RadioGroupItem value="compact" id="r3" />
-				<Label htmlFor="r3">Compact</Label>
+			{/* Small size */}
+			<div className="space-y-6">
+				<RadioGroup defaultValue="checked-small">
+					<RadioGroupItem value="default-small" id="r1-small" size="small" />
+					<RadioGroupItem value="checked-small" id="r2-small" size="small" />
+					<RadioGroupItem
+						value="disabled-small"
+						id="r3-small"
+						size="small"
+						disabled
+					/>
+				</RadioGroup>
+				<RadioGroup defaultValue="disabled-checked-small">
+					<RadioGroupItem
+						value="disabled-checked-small"
+						id="r4-small"
+						size="small"
+						disabled
+					/>
+				</RadioGroup>
 			</div>
-		</RadioGroup>
+		</div>
 	),
 } satisfies Story;

package/src/shadcn/components/ui/radio-group.tsx

@@ -1,9 +1,77 @@
+"use client";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { CircleIcon } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 
 import { cn } from "#shadcn/lib/utils";
 
+// Radio group root styles
+const radioGroupStyles = cn(
+	// Layout
+	"grid",
+	"gap-3",
+);
+
+// Radio group item base styles
+const baseRadioGroupItemStyles = cn(
+	// Layout
+	"aspect-square",
+	"shrink-0",
+	"relative",
+	// Shape
+	"rounded-full",
+	"overflow-hidden",
+	// Interaction
+	"outline-none",
+	"cursor-pointer",
+	// Animation
+	"transition-all",
+	"duration-200",
+	"active:scale-90",
+	"active:duration-75",
+	// Default state
+	"bg-bg-primary",
+	"border-[1.5px]",
+	"border-solid",
+	"border-border-primary",
+	// Checked state
+	"data-[state=checked]:bg-bg-link",
+	"data-[state=checked]:border-bg-link",
+	// Disabled states
+	"disabled:cursor-not-allowed",
+	"disabled:active:scale-100",
+	"disabled:bg-bg-primary",
+	"disabled:border-border-secondary",
+	"disabled:data-[state=checked]:bg-border-secondary",
+	"disabled:data-[state=checked]:border-border-secondary",
+	// Focus styles
+	"focus-visible:ring-4",
+	"focus-visible:ring-ring-blue",
+	"focus-visible:data-[state=unchecked]:border-bg-link",
+);
+
+const radioGroupItemVariants = cva(baseRadioGroupItemStyles, {
+	variants: {
+		size: {
+			regular: "size-5",
+			small: "size-4",
+		},
+	},
+	defaultVariants: {
+		size: "regular",
+	},
+});
+
+// Radio group indicator styles
+const radioGroupIndicatorStyles = cn(
+	// Layout
+	"absolute",
+	"inset-0",
+	"flex",
+	"items-center",
+	"justify-center",
+);
+
 function RadioGroup({
 	className,
 	...props
@@ -11,7 +79,7 @@ function RadioGroup({
 	return (
 		<RadioGroupPrimitive.Root
 			data-slot="radio-group"
-			className={cn("grid gap-3", className)}
+			className={cn(radioGroupStyles, className)}
 			{...props}
 		/>
 	);
@@ -19,22 +87,30 @@ function RadioGroup({
 
 function RadioGroupItem({
 	className,
+	size,
 	...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item> &
+	VariantProps<typeof radioGroupItemVariants>) {
 	return (
 		<RadioGroupPrimitive.Item
 			data-slot="radio-group-item"
-			className={cn(
-				"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-				className,
-			)}
+			className={cn(radioGroupItemVariants({ size }), className)}
 			{...props}
 		>
 			<RadioGroupPrimitive.Indicator
 				data-slot="radio-group-indicator"
-				className="relative flex items-center justify-center"
+				className={radioGroupIndicatorStyles}
 			>
-				<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+				<div
+					className={cn(
+						// Shape
+						"rounded-full",
+						// Colors
+						"bg-white",
+						// Size based on variant
+						size === "small" ? "size-1.5" : "size-2",
+					)}
+				/>
 			</RadioGroupPrimitive.Indicator>
 		</RadioGroupPrimitive.Item>
 	);

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

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
 export const Demo = {
 	render: () => (
 		<ResizablePanelGroup
-			direction="horizontal"
+			orientation="horizontal"
 			className="max-w-md rounded-lg border md:min-w-[450px]"
 		>
 			<ResizablePanel defaultSize={50}>
@@ -25,7 +25,7 @@ export const Demo = {
 			</ResizablePanel>
 			<ResizableHandle />
 			<ResizablePanel defaultSize={50}>
-				<ResizablePanelGroup direction="vertical">
+				<ResizablePanelGroup orientation="vertical">
 					<ResizablePanel defaultSize={25}>
 						<div className="flex h-full items-center justify-center p-6">
 							<span className="font-semibold">Two</span>

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

@@ -1,3 +1,4 @@
+"use client";
 import { GripVerticalIcon } from "lucide-react";
 import type * as React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
@@ -37,7 +38,7 @@ function ResizableHandle({
 		<ResizablePrimitive.PanelResizeHandle
 			data-slot="resizable-handle"
 			className={cn(
-				"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+				"bg-border border-x border-border hover:border-bg-link hover:bg-bg-link focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:border-x-0 data-[panel-group-direction=vertical]:border-y data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
 				className,
 			)}
 			{...props}