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

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

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+	Menubar,
+	MenubarCheckboxItem,
+	MenubarContent,
+	MenubarItem,
+	MenubarMenu,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSeparator,
+	MenubarShortcut,
+	MenubarSub,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarTrigger,
+} from "#shadcn/components/ui/menubar";
+
+const meta = {
+	title: "Component/Menubar",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<Menubar>
+			<MenubarMenu>
+				<MenubarTrigger>File</MenubarTrigger>
+				<MenubarContent>
+					<MenubarItem>
+						New Tab <MenubarShortcut>⌘T</MenubarShortcut>
+					</MenubarItem>
+					<MenubarItem>
+						New Window <MenubarShortcut>⌘N</MenubarShortcut>
+					</MenubarItem>
+					<MenubarItem disabled>New Incognito Window</MenubarItem>
+					<MenubarSeparator />
+					<MenubarSub>
+						<MenubarSubTrigger>Share</MenubarSubTrigger>
+						<MenubarSubContent>
+							<MenubarItem>Email link</MenubarItem>
+							<MenubarItem>Messages</MenubarItem>
+							<MenubarItem>Notes</MenubarItem>
+						</MenubarSubContent>
+					</MenubarSub>
+					<MenubarSeparator />
+					<MenubarItem>
+						Print... <MenubarShortcut>⌘P</MenubarShortcut>
+					</MenubarItem>
+				</MenubarContent>
+			</MenubarMenu>
+			<MenubarMenu>
+				<MenubarTrigger>Edit</MenubarTrigger>
+				<MenubarContent>
+					<MenubarItem>
+						Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+					</MenubarItem>
+					<MenubarItem>
+						Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+					</MenubarItem>
+					<MenubarSeparator />
+					<MenubarSub>
+						<MenubarSubTrigger>Find</MenubarSubTrigger>
+						<MenubarSubContent>
+							<MenubarItem>Search the web</MenubarItem>
+							<MenubarSeparator />
+							<MenubarItem>Find...</MenubarItem>
+							<MenubarItem>Find Next</MenubarItem>
+							<MenubarItem>Find Previous</MenubarItem>
+						</MenubarSubContent>
+					</MenubarSub>
+					<MenubarSeparator />
+					<MenubarItem>Cut</MenubarItem>
+					<MenubarItem>Copy</MenubarItem>
+					<MenubarItem>Paste</MenubarItem>
+				</MenubarContent>
+			</MenubarMenu>
+			<MenubarMenu>
+				<MenubarTrigger>View</MenubarTrigger>
+				<MenubarContent>
+					<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
+					<MenubarCheckboxItem checked>
+						Always Show Full URLs
+					</MenubarCheckboxItem>
+					<MenubarSeparator />
+					<MenubarItem inset>
+						Reload <MenubarShortcut>⌘R</MenubarShortcut>
+					</MenubarItem>
+					<MenubarItem disabled inset>
+						Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
+					</MenubarItem>
+					<MenubarSeparator />
+					<MenubarItem inset>Toggle Fullscreen</MenubarItem>
+					<MenubarSeparator />
+					<MenubarItem inset>Hide Sidebar</MenubarItem>
+				</MenubarContent>
+			</MenubarMenu>
+			<MenubarMenu>
+				<MenubarTrigger>Profiles</MenubarTrigger>
+				<MenubarContent>
+					<MenubarRadioGroup value="benoit">
+						<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+						<MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+						<MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+					</MenubarRadioGroup>
+					<MenubarSeparator />
+					<MenubarItem inset>Edit...</MenubarItem>
+					<MenubarSeparator />
+					<MenubarItem inset>Add Profile...</MenubarItem>
+				</MenubarContent>
+			</MenubarMenu>
+		</Menubar>
+	),
+} satisfies Story;

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

@@ -0,0 +1,272 @@
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "#shadcn/lib/utils";
+
+function Menubar({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+	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,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarMenu({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+	return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+	return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+	return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+	return (
+		<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+	);
+}
+
+function MenubarTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+	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,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarContent({
+	className,
+	align = "start",
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+	return (
+		<MenubarPortal>
+			<MenubarPrimitive.Content
+				data-slot="menubar-content"
+				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,
+				)}
+				{...props}
+			/>
+		</MenubarPortal>
+	);
+}
+
+function MenubarItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<MenubarPrimitive.Item
+			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,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarCheckboxItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+	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,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.CheckboxItem>
+	);
+}
+
+function MenubarRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+	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,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.RadioItem>
+	);
+}
+
+function MenubarLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<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,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+	return (
+		<MenubarPrimitive.Separator
+			data-slot="menubar-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="menubar-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSub({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+	return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<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,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto h-4 w-4" />
+		</MenubarPrimitive.SubTrigger>
+	);
+}
+
+function MenubarSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+	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,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Menubar,
+	MenubarPortal,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarGroup,
+	MenubarSeparator,
+	MenubarLabel,
+	MenubarItem,
+	MenubarShortcut,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSub,
+	MenubarSubTrigger,
+	MenubarSubContent,
+};

package/src/shadcn/components/ui/navigation-menu.stories.tsx

@@ -0,0 +1,217 @@
+// biome-ignore-all lint/a11y/useValidAnchor: Useless in stories
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CircleCheckIcon, CircleHelpIcon, CircleIcon } from "lucide-react";
+import type * as React from "react";
+import {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+	navigationMenuTriggerStyle,
+} from "#shadcn/components/ui/navigation-menu";
+
+const components: { title: string; href: string; description: string }[] = [
+	{
+		title: "Alert Dialog",
+		href: "/docs/primitives/alert-dialog",
+		description:
+			"A modal dialog that interrupts the user with important content and expects a response.",
+	},
+	{
+		title: "Hover Card",
+		href: "/docs/primitives/hover-card",
+		description:
+			"For sighted users to preview content available behind a link.",
+	},
+	{
+		title: "Progress",
+		href: "/docs/primitives/progress",
+		description:
+			"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+	},
+	{
+		title: "Scroll-area",
+		href: "/docs/primitives/scroll-area",
+		description: "Visually or semantically separates content.",
+	},
+	{
+		title: "Tabs",
+		href: "/docs/primitives/tabs",
+		description:
+			"A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+	},
+	{
+		title: "Tooltip",
+		href: "/docs/primitives/tooltip",
+		description:
+			"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+	},
+];
+
+function ListItem({
+	title,
+	children,
+	href,
+	...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+	return (
+		<li {...props}>
+			<NavigationMenuLink asChild>
+				<a href={href}>
+					<div className="text-sm leading-none font-medium">{title}</div>
+					<p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+						{children}
+					</p>
+				</a>
+			</NavigationMenuLink>
+		</li>
+	);
+}
+
+const meta = {
+	title: "Component/Navigation menu",
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Demo = {
+	render: () => (
+		<NavigationMenu viewport={false}>
+			<NavigationMenuList>
+				<NavigationMenuItem>
+					<NavigationMenuTrigger>Home</NavigationMenuTrigger>
+					<NavigationMenuContent>
+						<ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+							<li className="row-span-3">
+								<NavigationMenuLink asChild>
+									<a
+										className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
+										href="/"
+									>
+										<div className="mt-4 mb-2 text-lg font-medium">
+											shadcn/ui
+										</div>
+										<p className="text-muted-foreground text-sm leading-tight">
+											Beautifully designed components built with Tailwind CSS.
+										</p>
+									</a>
+								</NavigationMenuLink>
+							</li>
+							<ListItem href="/docs" title="Introduction">
+								Re-usable components built using Radix UI and Tailwind CSS.
+							</ListItem>
+							<ListItem href="/docs/installation" title="Installation">
+								How to install dependencies and structure your app.
+							</ListItem>
+							<ListItem href="/docs/primitives/typography" title="Typography">
+								Styles for headings, paragraphs, lists...etc
+							</ListItem>
+						</ul>
+					</NavigationMenuContent>
+				</NavigationMenuItem>
+				<NavigationMenuItem>
+					<NavigationMenuTrigger>Components</NavigationMenuTrigger>
+					<NavigationMenuContent>
+						<ul className="grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+							{components.map((component) => (
+								<ListItem
+									key={component.title}
+									title={component.title}
+									href={component.href}
+								>
+									{component.description}
+								</ListItem>
+							))}
+						</ul>
+					</NavigationMenuContent>
+				</NavigationMenuItem>
+				<NavigationMenuItem>
+					<NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+						<a href="/docs">Docs</a>
+					</NavigationMenuLink>
+				</NavigationMenuItem>
+				<NavigationMenuItem>
+					<NavigationMenuTrigger>List</NavigationMenuTrigger>
+					<NavigationMenuContent>
+						<ul className="grid w-[300px] gap-4">
+							<li>
+								<NavigationMenuLink asChild>
+									<a href="#">
+										<div className="font-medium">Components</div>
+										<div className="text-muted-foreground">
+											Browse all components in the library.
+										</div>
+									</a>
+								</NavigationMenuLink>
+								<NavigationMenuLink asChild>
+									<a href="#">
+										<div className="font-medium">Documentation</div>
+										<div className="text-muted-foreground">
+											Learn how to use the library.
+										</div>
+									</a>
+								</NavigationMenuLink>
+								<NavigationMenuLink asChild>
+									<a href="#">
+										<div className="font-medium">Blog</div>
+										<div className="text-muted-foreground">
+											Read our latest blog posts.
+										</div>
+									</a>
+								</NavigationMenuLink>
+							</li>
+						</ul>
+					</NavigationMenuContent>
+				</NavigationMenuItem>
+				<NavigationMenuItem>
+					<NavigationMenuTrigger>Simple</NavigationMenuTrigger>
+					<NavigationMenuContent>
+						<ul className="grid w-[200px] gap-4">
+							<li>
+								<NavigationMenuLink asChild>
+									<a href="#">Components</a>
+								</NavigationMenuLink>
+								<NavigationMenuLink asChild>
+									<a href="#">Documentation</a>
+								</NavigationMenuLink>
+								<NavigationMenuLink asChild>
+									<a href="#">Blocks</a>
+								</NavigationMenuLink>
+							</li>
+						</ul>
+					</NavigationMenuContent>
+				</NavigationMenuItem>
+				<NavigationMenuItem>
+					<NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
+					<NavigationMenuContent>
+						<ul className="grid w-[200px] gap-4">
+							<li>
+								<NavigationMenuLink asChild>
+									<a href="#" className="flex-row items-center gap-2">
+										<CircleHelpIcon />
+										Backlog
+									</a>
+								</NavigationMenuLink>
+								<NavigationMenuLink asChild>
+									<a href="#" className="flex-row items-center gap-2">
+										<CircleIcon />
+										To Do
+									</a>
+								</NavigationMenuLink>
+								<NavigationMenuLink asChild>
+									<a href="#" className="flex-row items-center gap-2">
+										<CircleCheckIcon />
+										Done
+									</a>
+								</NavigationMenuLink>
+							</li>
+						</ul>
+					</NavigationMenuContent>
+				</NavigationMenuItem>
+			</NavigationMenuList>
+		</NavigationMenu>
+	),
+} satisfies Story;