appos 0.4.3-0 → 0.5.1-0

package/src/web/ui/table.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import type * as React from "react";
+import { cn } from "#src/web/lib/utils.ts";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div
+			data-slot="table-container"
+			className="relative w-full overflow-x-auto"
+		>
+			<table
+				data-slot="table"
+				className={cn("w-full caption-bottom text-sm", className)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return (
+		<thead
+			data-slot="table-header"
+			className={cn("[&_tr]:border-b", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return (
+		<tbody
+			data-slot="table-body"
+			className={cn("[&_tr:last-child]:border-0", className)}
+			{...props}
+		/>
+	);
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
+		<tfoot
+			data-slot="table-footer"
+			className={cn(
+				"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
+		<tr
+			data-slot="table-row"
+			className={cn(
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
+		<th
+			data-slot="table-head"
+			className={cn(
+				"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
+		<td
+			data-slot="table-cell"
+			className={cn(
+				"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TableCaption({
+	className,
+	...props
+}: React.ComponentProps<"caption">) {
+	return (
+		<caption
+			data-slot="table-caption"
+			className={cn("text-muted-foreground mt-4 text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
+};

package/src/web/ui/tabs.stories.tsx

@@ -0,0 +1,401 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+	Button,
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+	Input,
+	Label,
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "appos/web";
+import { BellIcon, CreditCardIcon, SettingsIcon, UserIcon } from "lucide-react";
+import { expect, userEvent, within } from "storybook/test";
+
+const meta = {
+	title: "Base/Tabs",
+	component: Tabs,
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+		docs: {
+			description: {
+				component:
+					"A tabs component for organizing content into switchable panels. Supports horizontal and vertical orientations with default and line variants.",
+			},
+		},
+	},
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+	render: () => (
+		<Tabs defaultValue="account" className="w-100">
+			<TabsList>
+				<TabsTrigger value="account">Account</TabsTrigger>
+				<TabsTrigger value="password">Password</TabsTrigger>
+			</TabsList>
+			<TabsContent value="account">
+				<Card>
+					<CardHeader>
+						<CardTitle>Account</CardTitle>
+						<CardDescription>
+							Make changes to your account here.
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-2">
+						<div className="space-y-1">
+							<Label htmlFor="name">Name</Label>
+							<Input id="name" defaultValue="John Doe" />
+						</div>
+						<div className="space-y-1">
+							<Label htmlFor="username">Username</Label>
+							<Input id="username" defaultValue="@johndoe" />
+						</div>
+					</CardContent>
+				</Card>
+			</TabsContent>
+			<TabsContent value="password">
+				<Card>
+					<CardHeader>
+						<CardTitle>Password</CardTitle>
+						<CardDescription>Change your password here.</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-2">
+						<div className="space-y-1">
+							<Label htmlFor="current">Current password</Label>
+							<Input id="current" type="password" />
+						</div>
+						<div className="space-y-1">
+							<Label htmlFor="new">New password</Label>
+							<Input id="new" type="password" />
+						</div>
+					</CardContent>
+				</Card>
+			</TabsContent>
+		</Tabs>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Default tabs with card content.",
+			},
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const passwordTab = canvas.getByRole("tab", { name: /password/i });
+		await userEvent.click(passwordTab);
+		await expect(canvas.getByText("Current password")).toBeInTheDocument();
+	},
+};
+
+export const LineVariant: Story = {
+	render: () => (
+		<Tabs defaultValue="overview" className="w-100">
+			<TabsList variant="line">
+				<TabsTrigger value="overview">Overview</TabsTrigger>
+				<TabsTrigger value="analytics">Analytics</TabsTrigger>
+				<TabsTrigger value="reports">Reports</TabsTrigger>
+			</TabsList>
+			<TabsContent value="overview" className="pt-4">
+				<p className="text-sm text-muted-foreground">
+					Overview content goes here.
+				</p>
+			</TabsContent>
+			<TabsContent value="analytics" className="pt-4">
+				<p className="text-sm text-muted-foreground">
+					Analytics content goes here.
+				</p>
+			</TabsContent>
+			<TabsContent value="reports" className="pt-4">
+				<p className="text-sm text-muted-foreground">
+					Reports content goes here.
+				</p>
+			</TabsContent>
+		</Tabs>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Tabs with line variant styling.",
+			},
+		},
+	},
+};
+
+export const WithIcons: Story = {
+	render: () => (
+		<Tabs defaultValue="profile" className="w-100">
+			<TabsList>
+				<TabsTrigger value="profile">
+					<UserIcon />
+					Profile
+				</TabsTrigger>
+				<TabsTrigger value="notifications">
+					<BellIcon />
+					Notifications
+				</TabsTrigger>
+				<TabsTrigger value="settings">
+					<SettingsIcon />
+					Settings
+				</TabsTrigger>
+			</TabsList>
+			<TabsContent value="profile" className="pt-4">
+				<p className="text-sm text-muted-foreground">
+					Manage your profile settings.
+				</p>
+			</TabsContent>
+			<TabsContent value="notifications" className="pt-4">
+				<p className="text-sm text-muted-foreground">
+					Configure notification preferences.
+				</p>
+			</TabsContent>
+			<TabsContent value="settings" className="pt-4">
+				<p className="text-sm text-muted-foreground">
+					Adjust general settings.
+				</p>
+			</TabsContent>
+		</Tabs>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Tabs with icons in triggers.",
+			},
+		},
+	},
+};
+
+export const Vertical: Story = {
+	render: () => (
+		<Tabs defaultValue="general" orientation="vertical" className="w-125">
+			<TabsList className="h-fit">
+				<TabsTrigger value="general">General</TabsTrigger>
+				<TabsTrigger value="security">Security</TabsTrigger>
+				<TabsTrigger value="billing">Billing</TabsTrigger>
+				<TabsTrigger value="team">Team</TabsTrigger>
+			</TabsList>
+			<TabsContent value="general" className="flex-1">
+				<Card>
+					<CardHeader>
+						<CardTitle>General Settings</CardTitle>
+						<CardDescription>Manage your general settings.</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div className="space-y-2">
+							<Label htmlFor="org-name">Organization Name</Label>
+							<Input id="org-name" defaultValue="Acme Inc" />
+						</div>
+					</CardContent>
+				</Card>
+			</TabsContent>
+			<TabsContent value="security" className="flex-1">
+				<Card>
+					<CardHeader>
+						<CardTitle>Security</CardTitle>
+						<CardDescription>Configure security options.</CardDescription>
+					</CardHeader>
+				</Card>
+			</TabsContent>
+			<TabsContent value="billing" className="flex-1">
+				<Card>
+					<CardHeader>
+						<CardTitle>Billing</CardTitle>
+						<CardDescription>Manage billing and payments.</CardDescription>
+					</CardHeader>
+				</Card>
+			</TabsContent>
+			<TabsContent value="team" className="flex-1">
+				<Card>
+					<CardHeader>
+						<CardTitle>Team</CardTitle>
+						<CardDescription>Manage team members.</CardDescription>
+					</CardHeader>
+				</Card>
+			</TabsContent>
+		</Tabs>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Vertical tabs for settings pages.",
+			},
+		},
+	},
+};
+
+export const VerticalLine: Story = {
+	render: () => (
+		<Tabs defaultValue="account" orientation="vertical" className="w-125">
+			<TabsList variant="line" className="h-fit">
+				<TabsTrigger value="account">
+					<UserIcon />
+					Account
+				</TabsTrigger>
+				<TabsTrigger value="billing">
+					<CreditCardIcon />
+					Billing
+				</TabsTrigger>
+				<TabsTrigger value="notifications">
+					<BellIcon />
+					Notifications
+				</TabsTrigger>
+				<TabsTrigger value="settings">
+					<SettingsIcon />
+					Settings
+				</TabsTrigger>
+			</TabsList>
+			<TabsContent value="account" className="flex-1 pl-4">
+				<h3 className="text-lg font-medium">Account</h3>
+				<p className="text-sm text-muted-foreground mt-2">
+					Update your account information.
+				</p>
+			</TabsContent>
+			<TabsContent value="billing" className="flex-1 pl-4">
+				<h3 className="text-lg font-medium">Billing</h3>
+				<p className="text-sm text-muted-foreground mt-2">
+					Manage your billing and subscription.
+				</p>
+			</TabsContent>
+			<TabsContent value="notifications" className="flex-1 pl-4">
+				<h3 className="text-lg font-medium">Notifications</h3>
+				<p className="text-sm text-muted-foreground mt-2">
+					Configure your notification preferences.
+				</p>
+			</TabsContent>
+			<TabsContent value="settings" className="flex-1 pl-4">
+				<h3 className="text-lg font-medium">Settings</h3>
+				<p className="text-sm text-muted-foreground mt-2">
+					Adjust your general settings.
+				</p>
+			</TabsContent>
+		</Tabs>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Vertical tabs with line variant and icons.",
+			},
+		},
+	},
+};
+
+export const Disabled: Story = {
+	render: () => (
+		<Tabs defaultValue="active" className="w-100">
+			<TabsList>
+				<TabsTrigger value="active">Active</TabsTrigger>
+				<TabsTrigger value="disabled" disabled>
+					Disabled
+				</TabsTrigger>
+				<TabsTrigger value="other">Other</TabsTrigger>
+			</TabsList>
+			<TabsContent value="active" className="pt-4">
+				<p className="text-sm text-muted-foreground">Active tab content.</p>
+			</TabsContent>
+			<TabsContent value="other" className="pt-4">
+				<p className="text-sm text-muted-foreground">Other tab content.</p>
+			</TabsContent>
+		</Tabs>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Tabs with a disabled trigger.",
+			},
+		},
+	},
+};
+
+export const FullWidth: Story = {
+	render: () => (
+		<Tabs defaultValue="tab1" className="w-100">
+			<TabsList className="w-full">
+				<TabsTrigger value="tab1" className="flex-1">
+					Tab 1
+				</TabsTrigger>
+				<TabsTrigger value="tab2" className="flex-1">
+					Tab 2
+				</TabsTrigger>
+				<TabsTrigger value="tab3" className="flex-1">
+					Tab 3
+				</TabsTrigger>
+			</TabsList>
+			<TabsContent value="tab1" className="pt-4">
+				Content for Tab 1
+			</TabsContent>
+			<TabsContent value="tab2" className="pt-4">
+				Content for Tab 2
+			</TabsContent>
+			<TabsContent value="tab3" className="pt-4">
+				Content for Tab 3
+			</TabsContent>
+		</Tabs>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Full-width tabs with equal tab widths.",
+			},
+		},
+	},
+};
+
+export const ProductTabs: Story = {
+	render: () => (
+		<Tabs defaultValue="description" className="w-125">
+			<TabsList variant="line">
+				<TabsTrigger value="description">Description</TabsTrigger>
+				<TabsTrigger value="specifications">Specifications</TabsTrigger>
+				<TabsTrigger value="reviews">Reviews (24)</TabsTrigger>
+			</TabsList>
+			<TabsContent value="description" className="pt-4">
+				<p className="text-sm text-muted-foreground">
+					This is a premium product with exceptional quality and craftsmanship.
+					Made from sustainable materials and designed to last a lifetime.
+				</p>
+			</TabsContent>
+			<TabsContent value="specifications" className="pt-4">
+				<ul className="text-sm space-y-2">
+					<li className="flex justify-between">
+						<span className="text-muted-foreground">Dimensions</span>
+						<span>10 x 5 x 2 inches</span>
+					</li>
+					<li className="flex justify-between">
+						<span className="text-muted-foreground">Weight</span>
+						<span>1.5 lbs</span>
+					</li>
+					<li className="flex justify-between">
+						<span className="text-muted-foreground">Material</span>
+						<span>Recycled aluminum</span>
+					</li>
+				</ul>
+			</TabsContent>
+			<TabsContent value="reviews" className="pt-4">
+				<div className="space-y-4">
+					<div className="flex items-center gap-2">
+						<span className="text-2xl font-bold">4.8</span>
+						<span className="text-sm text-muted-foreground">out of 5</span>
+					</div>
+					<Button variant="outline" size="sm">
+						Write a Review
+					</Button>
+				</div>
+			</TabsContent>
+		</Tabs>
+	),
+	parameters: {
+		docs: {
+			description: {
+				story: "Product detail tabs with line variant.",
+			},
+		},
+	},
+};

package/src/web/ui/tabs.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "#src/web/lib/utils.ts";
+
+/**
+ * A set of layered content panels displayed one at a time.
+ *
+ * Organizes content into distinct views that users can switch between.
+ * Supports horizontal and vertical orientations.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="account">
+ *   <TabsList>
+ *     <TabsTrigger value="account">Account</TabsTrigger>
+ *     <TabsTrigger value="settings">Settings</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account">Account content</TabsContent>
+ *   <TabsContent value="settings">Settings content</TabsContent>
+ * </Tabs>
+ * ```
+ */
+function Tabs({
+	className,
+	orientation = "horizontal",
+	...props
+}: TabsPrimitive.Root.Props) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			data-orientation={orientation}
+			className={cn(
+				"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/** TabsList variant styles for different visual appearances. */
+const tabsListVariants = cva(
+	"rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+	{
+		variants: {
+			variant: {
+				default: "bg-muted",
+				line: "gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+/**
+ * The container for tab triggers.
+ *
+ * Supports default (pill-style) and line variants. Arranges triggers
+ * horizontally or vertically based on parent orientation.
+ *
+ * @example
+ * ```tsx
+ * <TabsList variant="line">
+ *   <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ * </TabsList>
+ * ```
+ */
+function TabsList({
+	className,
+	variant = "default",
+	...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+	return (
+		<TabsPrimitive.List
+			data-slot="tabs-list"
+			data-variant={variant}
+			className={cn(tabsListVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * A button that activates its associated tab content panel.
+ *
+ * Displays active state styling and supports keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * <TabsTrigger value="settings">Settings</TabsTrigger>
+ * ```
+ */
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+	return (
+		<TabsPrimitive.Tab
+			data-slot="tabs-trigger"
+			className={cn(
+				"gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+				"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+				"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * The content panel associated with a tab trigger.
+ *
+ * Only visible when its corresponding trigger is active. Hidden panels
+ * are removed from the accessibility tree.
+ *
+ * @example
+ * ```tsx
+ * <TabsContent value="settings">
+ *   <p>Settings panel content.</p>
+ * </TabsContent>
+ * ```
+ */
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+	return (
+		<TabsPrimitive.Panel
+			data-slot="tabs-content"
+			className={cn("text-sm flex-1 outline-none", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };