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

package/dist/src/typography.css

@@ -42,42 +42,57 @@ body {
 	font-weight: var(--font-weight-normal);
 	line-height: var(--font-leading-4);
 }
+.typo-body-xs {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-4);
+}
+.typo-label-xs {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-3);
+}
+
+.typo-label-tiny {
+	font-size: var(--font-size-xxs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-4);
+	letter-spacing: var(--font-tracking-wide);
+	text-transform: uppercase;
+}
 
 .h1 {
-	font-size: var(--font-size-4xl);
+	font-size: var(--font-size-5xl);
 	font-family: var(--font-family-sans);
 	font-weight: var(--font-weight-extrabold);
-	line-height: var(--font-leading-none);
+	line-height: var(--font-leading-14);
 	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-size: var(--font-size-4xl);
 	font-family: var(--font-family-sans);
-	font-weight: var(--font-weight-semibold);
-	line-height: var(--font-leading-none);
+	font-weight: var(--font-weight-bold);
+	line-height: var(--font-leading-10);
 	letter-spacing: var(--font-tracking-tight);
 }
 
 .h3 {
-	font-size: var(--font-size-2xl);
+	font-size: var(--font-size-3xl);
 	font-family: var(--font-family-sans);
 	font-weight: var(--font-weight-semibold);
-	line-height: var(--font-leading-none);
+	line-height: var(--font-leading-9);
 	letter-spacing: var(--font-tracking-tight);
 }
 
 .h4 {
-	font-size: var(--font-size-xl);
+	font-size: var(--font-size-2xl);
 	font-family: var(--font-family-sans);
 	font-weight: var(--font-weight-semibold);
-	line-height: var(--font-leading-none);
+	line-height: var(--font-leading-8);
 	letter-spacing: var(--font-tracking-tight);
 }
 
@@ -96,3 +111,51 @@ body {
 	line-height: var(--font-leading-none);
 	letter-spacing: var(--font-tracking-tight);
 }
+
+.caption {
+	font-size: var(--font-size-xl);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-7);
+	letter-spacing: var(--font-tracking-tight);
+}
+
+.body14 {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-5);
+	letter-spacing: var(--font-tracking-normal);
+}
+
+.body14bold {
+	font-size: var(--font-size-sm);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-5);
+	letter-spacing: var(--font-tracking-normal);
+}
+
+.body16 {
+	font-size: var(--font-size-base);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-6);
+	letter-spacing: var(--font-tracking-normal);
+}
+
+.body16bold {
+	font-size: var(--font-size-base);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-medium);
+	line-height: var(--font-leading-6);
+	letter-spacing: var(--font-tracking-normal);
+}
+
+.body12 {
+	font-size: var(--font-size-xs);
+	font-family: var(--font-family-sans);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--font-leading-4);
+	letter-spacing: var(--font-tracking-normal);
+}

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@health-samurai/react-components",
-  "version": "0.0.0-alpha.2",
+  "version": "0.0.0-alpha.21",
   "type": "module",
   "files": [
     "dist",
     "src"
   ],
   "exports": {
-    ".": "./dist/src/index.js",
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "default": "./dist/src/index.js"
+    },
     "./bundle.css": "./dist/bundle.css",
     "./css": "./dist/src/index.css",
     "./deps.css": "./dist/src/deps.css",
@@ -17,88 +20,105 @@
     "#shadcn/*": "./src/shadcn/*"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.6",
-    "@codemirror/commands": "^6.8.1",
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/language": "^6.11.3",
-    "@codemirror/lint": "^6.8.5",
-    "@codemirror/search": "^6.5.11",
-    "@codemirror/state": "^6.5.2",
-    "@codemirror/view": "^6.38.1",
-    "@hookform/resolvers": "^5.2.1",
-    "@lezer/highlight": "^1.2.1",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-hover-card": "^1.1.14",
-    "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/lint": "^6.9.5",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.40.0",
+    "@headless-tree/core": "^1.6.3",
+    "@headless-tree/react": "^1.6.3",
+    "@hookform/resolvers": "^5.2.2",
+    "@lezer/common": "^1.5.1",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/lr": "^1.4.8",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@replit/codemirror-vim": "^6.3.0",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.539.0",
+    "lucide-react": "^0.577.0",
     "next-themes": "^0.4.6",
-    "react": "^19.1.0",
-    "react-day-picker": "^9.8.1",
-    "react-dom": "^19.1.0",
-    "react-hook-form": "^7.62.0",
-    "react-resizable-panels": "^3.0.4",
-    "recharts": "2.15.4",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.2",
+    "react-resizable-panels": "^3.0.6",
+    "recharts": "3.8.0",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "zod": "^4.0.17"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/react-vite": "^9.1.1",
-    "@swc/cli": "^0.7.8",
-    "@swc/core": "^1.13.5",
-    "@tailwindcss/cli": "^4.1.11",
-    "@tailwindcss/vite": "^4.1.11",
-    "@types/node": "^24.2.0",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react-swc": "^3.10.2",
-    "storybook": "^9.1.1",
-    "tailwindcss": "^4.1.11",
-    "tsx": "^4.20.4",
-    "tw-animate-css": "^1.3.6",
-    "typescript": "~5.8.3",
-    "vite": "^7.0.4"
+    "@lezer/generator": "^1.8.0",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/react-vite": "^10.2.17",
+    "@swc/cli": "^0.8.0",
+    "@swc/core": "^1.15.18",
+    "@tailwindcss/cli": "^4.2.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^25.4.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "chokidar": "^5.0.0",
+    "storybook": "^10.2.17",
+    "tailwindcss": "^4.2.1",
+    "tsc-alias": "^1.8.16",
+    "tsx": "^4.21.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "@health-samurai/aidbox-client": "0.0.0-alpha.6",
+    "@health-samurai/aidbox-fhirpath-lsp": "0.0.0-alpha.8"
   },
   "publishConfig": {
     "access": "public"
   },
+  "homepage": "https://github.com/HealthSamurai/aidbox-ts-sdk/tree/master/packages/react-components#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/HealthSamurai/aidbox-ts-sdk"
+    "url": "https://github.com/HealthSamurai/aidbox-ts-sdk",
+    "directory": "packages/react-components"
   },
   "scripts": {
-    "build": "rm -rf dist && mkdir -p dist && swc src -d dist -D && tsc -b --force && tailwindcss --cwd ./src -i ./full.css -o ../dist/bundle.css && echo success",
+    "build": "rm -rf dist && mkdir -p dist && swc src -d dist -D && tsc -b --force && tsc-alias -p tsconfig.app.json && tailwindcss --cwd ./src -i ./full.css -o ../dist/bundle.css && echo success",
     "build:watch": "tsx scripts/watch.node.ts",
     "build-storybook": "storybook build",
     "format": "biome format",

package/src/components/button-dropdown.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { ButtonDropdown } from "./button-dropdown";
+
+const meta = {
+	title: "Component/ButtonDropdown",
+	component: ButtonDropdownDemo,
+	argTypes: {},
+} satisfies Meta;
+export default meta;
+
+// Demo component for Storybook
+const demoOptions = [
+	{ value: "next.js", label: "Next.js" },
+	{ value: "sveltekit", label: "SvelteKit" },
+	{ value: "nuxt.js", label: "Nuxt.js" },
+	{ value: "remix", label: "Remix" },
+	{ value: "astro", label: "Astro" },
+];
+
+function ButtonDropdownDemo() {
+	const [value, setValue] = React.useState("next.js");
+
+	return (
+		<ButtonDropdown
+			options={demoOptions}
+			selectedValue={value}
+			onSelectItem={setValue}
+		/>
+	);
+}
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+	render: () => (
+		<div className="w-[560px]">
+			<ButtonDropdownDemo />
+		</div>
+	),
+} satisfies Story;

package/src/components/button-dropdown.tsx

@@ -0,0 +1,97 @@
+import { cva } from "class-variance-authority";
+import * as Lucide from "lucide-react";
+import * as React from "react";
+import { Button } from "#shadcn/components/ui/button.js";
+import {
+	Command,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "#shadcn/components/ui/command.js";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "#shadcn/components/ui/popover";
+import { cn } from "#shadcn/lib/utils";
+
+export interface ButtonDropdownOption {
+	value: string;
+	label: string;
+}
+
+const popoverTriggerButtonStyle = cn(
+	"text-text-secondary",
+	"bg-gray-100",
+	"rounded-full",
+	"px-2 h-6",
+);
+
+const checkIconStyles = cva("ml-auto size-4", {
+	variants: {
+		isSelected: {
+			true: "opacity-100",
+			false: "opacity-0",
+		},
+	},
+});
+
+export function ButtonDropdown({
+	options,
+	selectedValue,
+	onSelectItem,
+}: {
+	selectedValue?: string;
+	options: ButtonDropdownOption[];
+	onSelectItem: (item: string) => void;
+}) {
+	const [open, setOpen] = React.useState(false);
+
+	const onSelectItemMy = (item: string) => {
+		onSelectItem(item);
+		setOpen(false);
+	};
+
+	const selectedOption = options.find(
+		(option) => option.value === selectedValue,
+	);
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<Button variant="link" className={popoverTriggerButtonStyle}>
+					<span className="typo-body">{selectedOption?.label}</span>
+					<Lucide.ChevronDownIcon />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="p-0">
+				<Command>
+					<CommandInput></CommandInput>
+					<CommandList>
+						{options.map((option) => (
+							<CommandItem
+								key={option.value}
+								data-state={
+									selectedOption?.value === option.value
+										? "checked"
+										: "unchecked"
+								}
+								value={option.value}
+								onSelect={onSelectItemMy}
+							>
+								{option.label}
+								<Lucide.CheckIcon
+									className={cn(
+										checkIconStyles({
+											isSelected: selectedOption?.value === option.value,
+										}),
+									)}
+								/>
+							</CommandItem>
+						))}
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}