@health-samurai/react-components 0.0.0-alpha.1

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

@@ -0,0 +1,70 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { toggleVariants } from "#shadcn/components/ui/toggle";
+import { cn } from "#shadcn/lib/utils";
+
+const ToggleGroupContext = React.createContext<
+	VariantProps<typeof toggleVariants>
+>({
+	size: "default",
+	variant: "default",
+});
+
+function ToggleGroup({
+	className,
+	variant,
+	size,
+	children,
+	...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+	VariantProps<typeof toggleVariants>) {
+	return (
+		<ToggleGroupPrimitive.Root
+			data-slot="toggle-group"
+			data-variant={variant}
+			data-size={size}
+			className={cn(
+				"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+				className,
+			)}
+			{...props}
+		>
+			<ToggleGroupContext.Provider value={{ variant, size }}>
+				{children}
+			</ToggleGroupContext.Provider>
+		</ToggleGroupPrimitive.Root>
+	);
+}
+
+function ToggleGroupItem({
+	className,
+	children,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+	VariantProps<typeof toggleVariants>) {
+	const context = React.useContext(ToggleGroupContext);
+
+	return (
+		<ToggleGroupPrimitive.Item
+			data-slot="toggle-group-item"
+			data-variant={context.variant || variant}
+			data-size={context.size || size}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
+}
+
+export { ToggleGroup, ToggleGroupItem };

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Bold } from "lucide-react";
+import { Toggle } from "#shadcn/components/ui/toggle";
+
+const meta = {
+	title: "Component/Toggle",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<Toggle aria-label="Toggle italic">
+			<Bold className="h-4 w-4" />
+		</Toggle>
+	),
+} satisfies Story;

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

@@ -0,0 +1,45 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+const toggleVariants = cva(
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 px-2 min-w-9",
+				sm: "h-8 px-1.5 min-w-8",
+				lg: "h-10 px-2.5 min-w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Toggle({
+	className,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+	VariantProps<typeof toggleVariants>) {
+	return (
+		<TogglePrimitive.Root
+			data-slot="toggle"
+			className={cn(toggleVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Toggle, toggleVariants };

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "#shadcn/components/ui/button";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "#shadcn/components/ui/tooltip";
+
+const meta = {
+	title: "Component/Tooltip",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button variant="secondary">Hover</Button>
+			</TooltipTrigger>
+			<TooltipContent>
+				<p>Add to library</p>
+			</TooltipContent>
+		</Tooltip>
+	),
+} satisfies Story;

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

@@ -0,0 +1,62 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function TooltipProvider({
+	delayDuration = 0,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
+}
+
+function Tooltip({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}
+
+function TooltipTrigger({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-(--color-elements-assistive) text-(--color-elements-readable-inv) animate-in fade-in-0 zoom-in-95",
+					"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md",
+					"px-3 py-1.5 text-xs text-balance",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/shadcn/hooks/use-mobile.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+		undefined,
+	);
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}

package/src/shadcn/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/src/shadcn/shadcn.css

@@ -0,0 +1,122 @@
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	/* --background: var(--color-surface-0); */
+	/* --popover: var(--color-surface-0); */
+	--background: white;
+	--popover: white;
+	--foreground: var(--color-elements-readable);
+	--card: var(--color-surface-0);
+	--card-foreground: var(--color-elements-readable);
+	--popover-foreground: var(--color-elements-readable);
+	--primary: var(--color-cta);
+	--primary-foreground: var(--color-elements-readable-inv);
+	--secondary: var(--color-surface-0);
+	--secondary-foreground: var(--color-elements-readable);
+
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+
+	--accent: var(--color-surface-1);
+	--accent-foreground: var(--color-elements-readable);
+	--destructive: var(--color-critical-default);
+	--border: var(--color-border-default);
+
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+		font-family: "Inter", system-ui, sans-serif;
+	}
+}

package/src/tokens.css

@@ -0,0 +1,179 @@
+@theme {
+	--radius: 6px;
+
+	--color-neutral-50: #f9f9f9;
+	--color-neutral-100: #f5f5f6;
+	--color-neutral-200: #ebecee;
+	--color-neutral-300: #ccced3;
+	--color-neutral-400: #98a1ae;
+	--color-neutral-500: #717684;
+	--color-neutral-600: #4a5565;
+	--color-neutral-700: #364153;
+	--color-neutral-800: #1e2938;
+	--color-neutral-900: #1d2331;
+	--color-neutral-950: #030712;
+
+	--color-brand-50: #fef7f6;
+	--color-brand-100: #fdedea;
+	--color-brand-200: #f9cac3;
+	--color-brand-300: #f4a499;
+	--color-brand-400: #ef7767;
+	--color-brand-500: #ea4a35;
+	--color-brand-600: #d72710;
+	--color-brand-700: #c31a03;
+	--color-brand-800: #78190c;
+	--color-brand-900: #4a0f08;
+	--color-brand-950: #2e0a05;
+
+	--color-grey-50: #fafafa;
+	--color-grey-100: #f5f5f5;
+	--color-grey-200: #e5e5e5;
+	--color-grey-300: #d4d4d4;
+	--color-grey-400: #a4a4a4;
+	--color-grey-500: #767676;
+	--color-grey-600: #575757;
+	--color-grey-700: #434343;
+	--color-grey-800: #292929;
+	--color-grey-900: #1a1a1a;
+	--color-grey-950: #0a0a0a;
+
+	--color-red-50: #fef9f9;
+	--color-red-100: #fff6f5;
+	--color-red-200: #fdedea;
+	--color-red-300: #f4a499;
+	--color-red-400: #ea4a35;
+	--color-red-500: #d7270f;
+	--color-red-600: #d7270f;
+	--color-red-700: #c31b03;
+	--color-red-800: #a72d22;
+	--color-red-900: #7a0d00;
+	--color-red-950: #410801;
+
+	--color-blue-50: #f9fbfe;
+	--color-blue-100: #f4f8fc;
+	--color-blue-200: #e9f2fc;
+	--color-blue-300: #d0e2f8;
+	--color-blue-400: #a7c9f3;
+	--color-blue-500: #2378e1;
+	--color-blue-600: #045ac3;
+	--color-blue-700: #014391;
+	--color-blue-800: #053775;
+	--color-blue-900: #052040;
+	--color-blue-950: #05101e;
+
+	--color-green-50: #fbfdf8;
+	--color-green-100: #f8fbf3;
+	--color-green-200: #f1f8e6;
+	--color-green-300: #e3efcb;
+	--color-green-400: #c9e19b;
+	--color-green-500: #78b506;
+	--color-green-600: #558300;
+	--color-green-700: #334e02;
+	--color-green-800: #1d2b03;
+	--color-green-900: #090d04;
+	--color-green-950: #090d04;
+
+	--color-yellow-50: #fffdf2;
+	--color-yellow-100: #fffbe5;
+	--color-yellow-200: #fff9d9;
+	--color-yellow-300: #fff4bf;
+	--color-yellow-400: #ffea80;
+	--color-yellow-500: #ffd400;
+	--color-yellow-600: #dfa400;
+	--color-yellow-700: #855600;
+	--color-yellow-800: #562a00;
+	--color-yellow-900: #341900;
+	--color-yellow-950: #200900;
+
+	--font-size-xs: 12px;
+	--font-size-sm: 14px;
+	--font-size-base: 16px;
+	--font-size-lg: 18px;
+	--font-size-xl: 20px;
+	--font-size-2xl: 24px;
+	--font-size-3xl: 30px;
+	--font-size-4xl: 36px;
+	--font-size-5xl: 48px;
+	--font-size-6xl: 60px;
+	--font-size-7xl: 72px;
+	--font-size-8xl: 96px;
+	--font-size-9xl: 128px;
+
+	--font-family-sans: Inter;
+	--font-family-mono: JetBrains Mono;
+
+	--font-style-italic: italic;
+	--font-style-not-italic: normal;
+
+	--font-weight-thin: 100;
+	--font-weight-extralight: 200;
+	--font-weight-light: 300;
+	--font-weight-normal: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+	--font-weight-extrabold: 800;
+	--font-weight-black: 900;
+
+	--font-tracking-tighter: -0.8;
+	--font-tracking-tight: -0.4;
+	--font-tracking-normal: 0px;
+	--font-tracking-wide: 0.4;
+	--font-tracking-wider: 0.8;
+	--font-tracking-widest: 1.6;
+
+	--font-leading-3: 12px;
+	--font-leading-4: 16px;
+	--font-leading-5: 20px;
+	--font-leading-6: 24px;
+	--font-leading-7: 28px;
+	--font-leading-8: 32px;
+	--font-leading-9: 36px;
+	--font-leading-10: 40px;
+
+	--spacing-x1: 8px;
+	--spacing-x1point5: 12px;
+	--spacing-x2: 16px;
+	--spacing-x4: 32px;
+	--spacing-x6: 48px;
+	--spacing-x8: 64px;
+	--spacing-quarter: 2px;
+	--spacing-half: 4px;
+	--spacing-x12: 96px;
+	--spacing-x3: 24px;
+	--corner-corner-max: 999px;
+	--corner-corner-s: 4px;
+	--corner-corner-m: 6px;
+	--corner-corner-l: 8px;
+	--corner-corner-xs: 2px;
+	--color-elements-readable: var(--color-neutral-900);
+	--color-cta: var(--color-brand-600);
+	--color-critical-default: var(--color-red-600);
+	--color-elements-disabled: var(--color-neutral-300);
+	--color-elements-assistive: var(--color-neutral-500);
+	--color-surface-0: var(--color-neutral-50);
+	--color-border-default: var(--color-neutral-200);
+	--color-surface-selected: var(--color-neutral-200);
+	--color-cta-hover: var(--color-brand-700);
+	--color-critical-hover: var(--color-red-700);
+	--color-surface-1: var(--color-neutral-100);
+	--color-border-XS-critical: var(--color-red-50);
+	--color-border-XS-critical-hover: var(--color-red-100);
+	--color-elements-green: var(--color-green-600);
+	--color-elements-yellow: var(--color-yellow-500);
+	--color-border-XS-regular: var(--color-blue-300);
+	--color-border-XS-regular-hover: var(--color-blue-400);
+	--color-separator: var(--color-neutral-200);
+	--color-surface-info: var(--color-blue-50);
+	--color-surface-warning: var(--color-yellow-50);
+	--color-surface-alert: var(--color-red-50);
+	--color-elements-warning: var(--color-yellow-700);
+	--color-code-red: var(--color-red-600);
+	--color-code-blue: var(--color-blue-500);
+	--color-elements-readable-inv: var(--color-neutral-50);
+	--color-logo-readable: var(--color-neutral-800);
+	--color-elements-links: var(--color-brand-600);
+	--color-elements-info: var(--color-brand-600);
+	--color-elements-alert: var(--color-red-600);
+	--color-illustrations-solid: var(--color-brand-600);
+}

package/src/typography.css

@@ -0,0 +1,98 @@
+body {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+	font-feature-settings:
+		"kern" 1,
+		"liga" 1;
+}
+
+.typo-body {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-5);
+}
+
+.typo-code {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-mono);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-5);
+}
+
+.typo-label {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-5);
+}
+
+.typo-page-header {
+	font-size: var(--font-size-xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-7);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.typo-button-label-xs {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-4);
+}
+
+.h1 {
+	font-size: var(--font-size-4xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-extrabold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+@media (min-width: 1024px) {
+	.h1 {
+		font-size: var(--font-size-5xl);
+	}
+}
+
+.h2 {
+	font-size: var(--font-size-3xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.h3 {
+	font-size: var(--font-size-2xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.h4 {
+	font-size: var(--font-size-xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.h5 {
+	font-size: var(--font-size-lg);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.h6 {
+	font-size: var(--font-size-base);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-semibold);
+	line-height: var(--font-leading-none);
+	letter-spacing: var(--font-tracking-tight);
+}