82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { Separator } from "@ai-ui/ui";
|
|
import type { Meta, StoryObj } from "@storybook/react";
|
|
|
|
const meta = {
|
|
title: "Components/Separator",
|
|
component: Separator,
|
|
args: {
|
|
orientation: "horizontal",
|
|
tone: "subtle"
|
|
},
|
|
argTypes: {
|
|
className: {
|
|
control: false
|
|
},
|
|
decorative: {
|
|
control: "boolean"
|
|
},
|
|
orientation: {
|
|
control: "radio",
|
|
options: ["horizontal", "vertical"]
|
|
},
|
|
tone: {
|
|
control: "radio",
|
|
options: ["subtle", "strong"]
|
|
}
|
|
},
|
|
parameters: {
|
|
layout: "centered"
|
|
},
|
|
tags: ["autodocs"]
|
|
} satisfies Meta<typeof Separator>;
|
|
|
|
export default meta;
|
|
|
|
type Story = StoryObj<typeof meta>;
|
|
|
|
export const Playground: Story = {
|
|
render: (args) => (
|
|
<div className="w-80">
|
|
<Separator {...args} />
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export const InCard: Story = {
|
|
render: () => (
|
|
<div className="w-[420px] rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-5 shadow-[var(--shadow-sm)]">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h3 className="m-0 text-base font-semibold">Workspace</h3>
|
|
<p className="m-0 text-sm text-[var(--color-muted-foreground)]">
|
|
Project status and recent activity
|
|
</p>
|
|
</div>
|
|
<Separator />
|
|
<div className="grid gap-2 text-sm text-[var(--color-muted-foreground)]">
|
|
<div className="flex items-center justify-between">
|
|
<span>Tokens</span>
|
|
<span className="text-[var(--color-foreground)]">Stable</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span>Components</span>
|
|
<span className="text-[var(--color-foreground)]">In progress</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
export const Vertical: Story = {
|
|
render: () => (
|
|
<div className="flex h-16 items-center gap-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] px-5 shadow-[var(--shadow-xs)]">
|
|
<span className="text-sm text-[var(--color-muted-foreground)]">Overview</span>
|
|
<Separator className="h-8" orientation="vertical" />
|
|
<span className="text-sm text-[var(--color-muted-foreground)]">Metrics</span>
|
|
<Separator className="h-8" orientation="vertical" tone="strong" />
|
|
<span className="text-sm text-[var(--color-muted-foreground)]">Activity</span>
|
|
</div>
|
|
)
|
|
};
|