appos 0.4.3-0 → 0.5.1-0

package/src/web/ui/hover-card.stories.tsx

@@ -0,0 +1,261 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconBrandGithub, IconCalendar, IconMapPin } from "@tabler/icons-react";
+import {
+	Avatar,
+	AvatarFallback,
+	AvatarImage,
+	Button,
+	HoverCard,
+	HoverCardContent,
+	HoverCardTrigger,
+} from "appos/web";
+
+const meta = {
+	title: "Base/HoverCard",
+	component: HoverCard,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"A preview card that appears on hover. Use for showing additional information without leaving the current context.",
+			},
+		},
+	},
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger render={<Button variant="link" />}>
+				@nextjs
+			</HoverCardTrigger>
+			<HoverCardContent>
+				<div className="flex justify-between space-x-4">
+					<Avatar>
+						<AvatarImage src="https://github.com/vercel.png" />
+						<AvatarFallback>VC</AvatarFallback>
+					</Avatar>
+					<div className="space-y-1">
+						<h4 className="text-sm font-semibold">@nextjs</h4>
+						<p className="text-sm">
+							The React Framework – created and maintained by @vercel.
+						</p>
+						<div className="flex items-center pt-2">
+							<IconCalendar className="mr-2 size-4 opacity-70" />
+							<span className="text-muted-foreground text-xs">
+								Joined December 2016
+							</span>
+						</div>
+					</div>
+				</div>
+			</HoverCardContent>
+		</HoverCard>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Default hover card showing user profile preview with avatar and details.",
+			},
+		},
+	},
+};
+
+export const WithGitHubProfile: Story = {
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger
+				render={
+					<button
+						type="button"
+						className="text-sm font-medium underline underline-offset-4"
+					/>
+				}
+			>
+				shadcn
+			</HoverCardTrigger>
+			<HoverCardContent className="w-80">
+				<div className="flex gap-4">
+					<Avatar className="size-12">
+						<AvatarImage src="https://github.com/shadcn.png" />
+						<AvatarFallback>SC</AvatarFallback>
+					</Avatar>
+					<div className="space-y-1">
+						<h4 className="text-sm font-semibold">shadcn</h4>
+						<p className="text-muted-foreground text-sm">Building @shadcn/ui</p>
+						<div className="flex items-center gap-4 pt-2 text-xs text-muted-foreground">
+							<div className="flex items-center gap-1">
+								<IconBrandGithub className="size-3" />
+								<span>12.5k followers</span>
+							</div>
+							<div className="flex items-center gap-1">
+								<IconMapPin className="size-3" />
+								<span>New York</span>
+							</div>
+						</div>
+					</div>
+				</div>
+			</HoverCardContent>
+		</HoverCard>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"GitHub-style profile hover card with follower count and location.",
+			},
+		},
+	},
+};
+
+export const SideTop: Story = {
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger render={<Button variant="outline" />}>
+				Hover me (top)
+			</HoverCardTrigger>
+			<HoverCardContent side="top">
+				<p className="text-sm">This card appears above the trigger.</p>
+			</HoverCardContent>
+		</HoverCard>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Hover card positioned above the trigger element.",
+			},
+		},
+	},
+};
+
+export const SideLeft: Story = {
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger render={<Button variant="outline" />}>
+				Hover me (left)
+			</HoverCardTrigger>
+			<HoverCardContent side="left">
+				<p className="text-sm">This card appears to the left of the trigger.</p>
+			</HoverCardContent>
+		</HoverCard>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Hover card positioned to the left of the trigger element.",
+			},
+		},
+	},
+};
+
+export const SideRight: Story = {
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger render={<Button variant="outline" />}>
+				Hover me (right)
+			</HoverCardTrigger>
+			<HoverCardContent side="right">
+				<p className="text-sm">
+					This card appears to the right of the trigger.
+				</p>
+			</HoverCardContent>
+		</HoverCard>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Hover card positioned to the right of the trigger element.",
+			},
+		},
+	},
+};
+
+export const AlignStart: Story = {
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger render={<Button variant="outline" />}>
+				Align start
+			</HoverCardTrigger>
+			<HoverCardContent align="start">
+				<p className="text-sm">
+					This card is aligned to the start of the trigger.
+				</p>
+			</HoverCardContent>
+		</HoverCard>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Hover card aligned to the start of the trigger.",
+			},
+		},
+	},
+};
+
+export const AlignEnd: Story = {
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger render={<Button variant="outline" />}>
+				Align end
+			</HoverCardTrigger>
+			<HoverCardContent align="end">
+				<p className="text-sm">
+					This card is aligned to the end of the trigger.
+				</p>
+			</HoverCardContent>
+		</HoverCard>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Hover card aligned to the end of the trigger.",
+			},
+		},
+	},
+};
+
+export const ProductPreview: Story = {
+	render: () => (
+		<HoverCard>
+			<HoverCardTrigger
+				render={
+					<button
+						type="button"
+						className="text-sm font-medium underline underline-offset-4"
+					/>
+				}
+			>
+				MacBook Pro 14"
+			</HoverCardTrigger>
+			<HoverCardContent className="w-72">
+				<div className="space-y-2">
+					<div className="aspect-video bg-muted rounded-md flex items-center justify-center">
+						<span className="text-muted-foreground text-xs">Product Image</span>
+					</div>
+					<div>
+						<h4 className="font-semibold">MacBook Pro 14"</h4>
+						<p className="text-muted-foreground text-sm">
+							Apple M3 Pro chip, 18GB RAM, 512GB SSD
+						</p>
+					</div>
+					<div className="flex items-center justify-between text-sm">
+						<span className="font-semibold">$1,999</span>
+						<span className="text-green-600">In Stock</span>
+					</div>
+				</div>
+			</HoverCardContent>
+		</HoverCard>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Product preview card for e-commerce hover interactions.",
+			},
+		},
+	},
+};

package/src/web/ui/hover-card.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import { cn } from "#src/web/lib/utils.ts";
+
+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
+	return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+	return (
+		<PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+	);
+}
+
+function HoverCardContent({
+	className,
+	side = "bottom",
+	sideOffset = 4,
+	align = "center",
+	alignOffset = 4,
+	...props
+}: PreviewCardPrimitive.Popup.Props &
+	Pick<
+		PreviewCardPrimitive.Positioner.Props,
+		"align" | "alignOffset" | "side" | "sideOffset"
+	>) {
+	return (
+		<PreviewCardPrimitive.Portal data-slot="hover-card-portal">
+			<PreviewCardPrimitive.Positioner
+				align={align}
+				alignOffset={alignOffset}
+				side={side}
+				sideOffset={sideOffset}
+				className="isolate z-50"
+			>
+				<PreviewCardPrimitive.Popup
+					data-slot="hover-card-content"
+					className={cn(
+						"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100 z-50 origin-(--transform-origin) outline-hidden",
+						className,
+					)}
+					{...props}
+				/>
+			</PreviewCardPrimitive.Positioner>
+		</PreviewCardPrimitive.Portal>
+	);
+}
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

package/src/web/ui/index.ts

@@ -0,0 +1,55 @@
+export * from "./accordion.tsx";
+export * from "./alert.tsx";
+export * from "./alert-dialog.tsx";
+export * from "./animated-check.tsx";
+export * from "./aspect-ratio.tsx";
+export * from "./avatar.tsx";
+export * from "./badge.tsx";
+export * from "./brand.tsx";
+export * from "./breadcrumb.tsx";
+export * from "./button.tsx";
+export * from "./button-group.tsx";
+export * from "./calendar.tsx";
+export * from "./card.tsx";
+export * from "./carousel.tsx";
+export * from "./chart.tsx";
+export * from "./checkbox.tsx";
+export * from "./collapsible.tsx";
+export * from "./command.tsx";
+export * from "./context-menu.tsx";
+export * from "./dialog.tsx";
+export * from "./drawer.tsx";
+export * from "./dropdown-menu.tsx";
+export * from "./empty.tsx";
+export * from "./error-page.tsx";
+export * from "./field.tsx";
+export * from "./hover-card.tsx";
+export * from "./input.tsx";
+export * from "./input-group.tsx";
+export * from "./input-otp.tsx";
+export * from "./item.tsx";
+export * from "./kbd.tsx";
+export * from "./label.tsx";
+export * from "./menubar.tsx";
+export * from "./navigation-menu.tsx";
+export * from "./pagination.tsx";
+export * from "./popover.tsx";
+export * from "./progress.tsx";
+export * from "./radio-group.tsx";
+export * from "./resizable.tsx";
+export * from "./scroll-area.tsx";
+export * from "./select.tsx";
+export * from "./separator.tsx";
+export * from "./sheet.tsx";
+export * from "./sidebar.tsx";
+export * from "./skeleton.tsx";
+export * from "./slider.tsx";
+export * from "./sonner.tsx";
+export * from "./spinner.tsx";
+export * from "./switch.tsx";
+export * from "./table.tsx";
+export * from "./tabs.tsx";
+export * from "./textarea.tsx";
+export * from "./toggle.tsx";
+export * from "./toggle-group.tsx";
+export * from "./tooltip.tsx";

package/src/web/ui/input-group.stories.tsx

@@ -0,0 +1,290 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	IconCopy,
+	IconEye,
+	IconEyeOff,
+	IconMail,
+	IconSearch,
+	IconSend,
+} from "@tabler/icons-react";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+	InputGroupText,
+	InputGroupTextarea,
+	Kbd,
+} from "appos/web";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+
+const meta = {
+	title: "Base/InputGroup",
+	component: InputGroup,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"A compound input component that combines inputs with addons, buttons, and icons. Supports inline and block positioning.",
+			},
+		},
+	},
+} satisfies Meta<typeof InputGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupAddon>
+				<IconMail className="size-4" />
+			</InputGroupAddon>
+			<InputGroupInput placeholder="Enter email" />
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Default input group with icon addon at inline-start position.",
+			},
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const input = canvas.getByPlaceholderText("Enter email");
+		await userEvent.type(input, "test@example.com");
+		await expect(input).toHaveValue("test@example.com");
+	},
+};
+
+export const WithButton: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupInput placeholder="Search..." />
+			<InputGroupAddon align="inline-end">
+				<InputGroupButton>
+					<IconSearch className="size-4" />
+				</InputGroupButton>
+			</InputGroupAddon>
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Input group with action button at inline-end.",
+			},
+		},
+	},
+};
+
+export const WithTextAddon: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupAddon>
+				<InputGroupText>https://</InputGroupText>
+			</InputGroupAddon>
+			<InputGroupInput placeholder="example.com" />
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Input group with text addon for URL prefix.",
+			},
+		},
+	},
+};
+
+export const WithKbd: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupInput placeholder="Search..." />
+			<InputGroupAddon align="inline-end">
+				<Kbd>⌘K</Kbd>
+			</InputGroupAddon>
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Input group with keyboard shortcut indicator.",
+			},
+		},
+	},
+};
+
+export const PasswordToggle: Story = {
+	render: () => {
+		const [showPassword, setShowPassword] = useState(false);
+		return (
+			<InputGroup className="w-75">
+				<InputGroupInput
+					type={showPassword ? "text" : "password"}
+					placeholder="Enter password"
+				/>
+				<InputGroupAddon align="inline-end">
+					<InputGroupButton
+						onClick={() => setShowPassword(!showPassword)}
+						aria-label={showPassword ? "Hide password" : "Show password"}
+					>
+						{showPassword ? (
+							<IconEyeOff className="size-4" />
+						) : (
+							<IconEye className="size-4" />
+						)}
+					</InputGroupButton>
+				</InputGroupAddon>
+			</InputGroup>
+		);
+	},
+	parameters: {
+		docs: {
+			description: {
+				story: "Password input with show/hide toggle button.",
+			},
+		},
+	},
+};
+
+export const CopyToClipboard: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupInput defaultValue="abc123xyz" readOnly />
+			<InputGroupAddon align="inline-end">
+				<InputGroupButton aria-label="Copy to clipboard">
+					<IconCopy className="size-4" />
+				</InputGroupButton>
+			</InputGroupAddon>
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Read-only input with copy button for sharing codes or tokens.",
+			},
+		},
+	},
+};
+
+export const BothSides: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupAddon align="inline-start">
+				<InputGroupText>$</InputGroupText>
+			</InputGroupAddon>
+			<InputGroupInput placeholder="0.00" type="number" />
+			<InputGroupAddon align="inline-end">
+				<InputGroupText>USD</InputGroupText>
+			</InputGroupAddon>
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Input group with addons on both sides for currency input.",
+			},
+		},
+	},
+};
+
+export const WithTextarea: Story = {
+	render: () => (
+		<InputGroup className="w-100">
+			<InputGroupTextarea placeholder="Type your message..." rows={3} />
+			<InputGroupAddon align="inline-end">
+				<InputGroupButton size="icon-sm" aria-label="Send message">
+					<IconSend className="size-4" />
+				</InputGroupButton>
+			</InputGroupAddon>
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Input group with textarea for message composition.",
+			},
+		},
+	},
+};
+
+export const BlockStartAddon: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupAddon align="block-start">
+				<InputGroupText>Label Text</InputGroupText>
+			</InputGroupAddon>
+			<InputGroupInput placeholder="Enter value" />
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story:
+					"Input group with addon positioned at block-start (above input).",
+			},
+		},
+	},
+};
+
+export const BlockEndAddon: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupInput placeholder="Enter value" />
+			<InputGroupAddon align="block-end">
+				<InputGroupText className="text-muted-foreground text-xs">
+					Helper text below
+				</InputGroupText>
+			</InputGroupAddon>
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Input group with addon positioned at block-end (below input).",
+			},
+		},
+	},
+};
+
+export const Invalid: Story = {
+	render: () => (
+		<InputGroup className="w-75">
+			<InputGroupAddon>
+				<IconMail className="size-4" />
+			</InputGroupAddon>
+			<InputGroupInput placeholder="Enter email" aria-invalid="true" />
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Input group in invalid state with error styling.",
+			},
+		},
+	},
+};
+
+export const MultipleButtons: Story = {
+	render: () => (
+		<InputGroup className="w-87.5">
+			<InputGroupInput placeholder="Search files..." />
+			<InputGroupAddon align="inline-end">
+				<InputGroupButton aria-label="Search">
+					<IconSearch className="size-4" />
+				</InputGroupButton>
+				<InputGroupButton aria-label="Clear">×</InputGroupButton>
+			</InputGroupAddon>
+		</InputGroup>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Input group with multiple action buttons.",
+			},
+		},
+	},
+};