@bearmenu/ui 0.1.1 → 0.5.1

package/src/components/alert.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert, AlertTitle, AlertDescription } from "./alert";
+import { AlertCircle, CheckCircle, Info, AlertTriangle } from "lucide-react";
+
+const meta = {
+  title: "Components/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive", "warning", "success"],
+    },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Alert>
+      <Info className="h-4 w-4" />
+      <AlertTitle>Information</AlertTitle>
+      <AlertDescription>This is a default informational alert.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Warning: Story = {
+  render: () => (
+    <Alert variant="warning">
+      <AlertTriangle className="h-4 w-4" />
+      <AlertTitle>Warning</AlertTitle>
+      <AlertDescription>Your session is about to expire.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Success: Story = {
+  render: () => (
+    <Alert variant="success">
+      <CheckCircle className="h-4 w-4" />
+      <AlertTitle>Success</AlertTitle>
+      <AlertDescription>Your changes have been saved.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[450px]">
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>Default</AlertTitle>
+        <AlertDescription>Informational message.</AlertDescription>
+      </Alert>
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Destructive</AlertTitle>
+        <AlertDescription>Error message.</AlertDescription>
+      </Alert>
+      <Alert variant="warning">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>Warning</AlertTitle>
+        <AlertDescription>Warning message.</AlertDescription>
+      </Alert>
+      <Alert variant="success">
+        <CheckCircle className="h-4 w-4" />
+        <AlertTitle>Success</AlertTitle>
+        <AlertDescription>Success message.</AlertDescription>
+      </Alert>
+    </div>
+  ),
+};

package/src/components/aspect-ratio.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AspectRatio } from "./aspect-ratio";
+
+const meta = {
+  title: "Components/AspectRatio",
+  component: AspectRatio,
+  tags: ["autodocs"],
+} satisfies Meta<typeof AspectRatio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <AspectRatio ratio={16 / 9} className="bg-muted rounded-md overflow-hidden">
+        <div className="flex items-center justify-center h-full text-muted-foreground">
+          16:9
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Square: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <AspectRatio ratio={1} className="bg-muted rounded-md overflow-hidden">
+        <div className="flex items-center justify-center h-full text-muted-foreground">
+          1:1
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Portrait: Story = {
+  render: () => (
+    <div className="w-[200px]">
+      <AspectRatio ratio={3 / 4} className="bg-muted rounded-md overflow-hidden">
+        <div className="flex items-center justify-center h-full text-muted-foreground">
+          3:4
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+};

package/src/components/avatar.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+
+const meta = {
+  title: "Components/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithImage: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="User" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Fallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar className="h-8 w-8">
+        <AvatarFallback className="text-xs">S</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>MD</AvatarFallback>
+      </Avatar>
+      <Avatar className="h-14 w-14">
+        <AvatarFallback className="text-lg">LG</AvatarFallback>
+      </Avatar>
+      <Avatar className="h-20 w-20">
+        <AvatarFallback className="text-xl">XL</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+};
+
+export const Group: Story = {
+  render: () => (
+    <div className="flex -space-x-3">
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>A</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>B</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>C</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback className="text-xs">+3</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+};

package/src/components/badge.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "./badge";
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "secondary", "destructive", "outline", "overlay", "glass", "success", "warning"],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Badge" },
+};
+
+export const Secondary: Story = {
+  args: { children: "Secondary", variant: "secondary" },
+};
+
+export const Destructive: Story = {
+  args: { children: "Destructive", variant: "destructive" },
+};
+
+export const Outline: Story = {
+  args: { children: "Outline", variant: "outline" },
+};
+
+export const Glass: Story = {
+  args: { children: "Glass", variant: "glass" },
+};
+
+export const Success: Story = {
+  args: { children: "Success", variant: "success" },
+};
+
+export const Warning: Story = {
+  args: { children: "Warning", variant: "warning" },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="overlay">Overlay</Badge>
+      <Badge variant="glass">Glass</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+    </div>
+  ),
+};

package/src/components/breadcrumb.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./breadcrumb";
+
+const meta = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Products</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Current Page</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const WithEllipsis: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Category</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Product</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};

package/src/components/button.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { Heart, Mail, Plus } from "lucide-react";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+        "glass",
+        "brown",
+        "antagonist",
+      ],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon"],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Button" },
+};
+
+export const Destructive: Story = {
+  args: { children: "Delete", variant: "destructive" },
+};
+
+export const Outline: Story = {
+  args: { children: "Outline", variant: "outline" },
+};
+
+export const Secondary: Story = {
+  args: { children: "Secondary", variant: "secondary" },
+};
+
+export const Ghost: Story = {
+  args: { children: "Ghost", variant: "ghost" },
+};
+
+export const Link: Story = {
+  args: { children: "Link", variant: "link" },
+};
+
+export const Glass: Story = {
+  args: { children: "Glass", variant: "glass" },
+};
+
+export const Brown: Story = {
+  args: { children: "Brown", variant: "brown" },
+};
+
+export const Antagonist: Story = {
+  args: { children: "Antagonist", variant: "antagonist" },
+};
+
+export const Small: Story = {
+  args: { children: "Small", size: "sm" },
+};
+
+export const Large: Story = {
+  args: { children: "Large", size: "lg" },
+};
+
+export const Icon: Story = {
+  args: { size: "icon", children: <Plus className="h-4 w-4" /> },
+};
+
+export const WithIcon: Story = {
+  args: { children: <><Mail className="h-4 w-4" /> Send Email</> },
+};
+
+export const Disabled: Story = {
+  args: { children: "Disabled", disabled: true },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button variant="default">Default</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+      <Button variant="glass">Glass</Button>
+      <Button variant="brown">Brown</Button>
+      <Button variant="antagonist">Antagonist</Button>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Button size="sm">Small</Button>
+      <Button size="default">Default</Button>
+      <Button size="lg">Large</Button>
+      <Button size="icon"><Heart className="h-4 w-4" /></Button>
+    </div>
+  ),
+};

package/src/components/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-lg hover:bg-destructive/90 hover:shadow-destructive/20 backdrop-blur-sm border border-destructive/20",
         outline:
-          "border border-border bg-card/70 backdrop-blur-md hover:bg-accent hover:text-accent-foreground hover:border-accent-foreground/20 hover:shadow-lg glass-hover",
+          "border border-border bg-sidebar backdrop-blur-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-accent-foreground/20 hover:shadow-lg",
         secondary:
           "bg-secondary text-secondary-foreground shadow-lg hover:bg-secondary/90 hover:shadow-secondary/20 backdrop-blur-sm border border-secondary/20",
         ghost: "hover:bg-foreground/10 hover:text-foreground transition-colors duration-200",

package/src/components/calendar.stories.tsx

@@ -0,0 +1,47 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Calendar } from "./calendar";
+
+const meta = {
+  title: "Components/Calendar",
+  component: Calendar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Calendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function CalendarDemo() {
+  const [date, setDate] = useState<Date | undefined>(new Date());
+  return (
+    <Calendar
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      className="rounded-md border"
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <CalendarDemo />,
+};
+
+function CalendarRangeDemo() {
+  const [range, setRange] = useState<{ from: Date; to?: Date }>({
+    from: new Date(),
+  });
+  return (
+    <Calendar
+      mode="range"
+      selected={range}
+      onSelect={(r) => r && setRange(r as { from: Date; to?: Date })}
+      numberOfMonths={2}
+      className="rounded-md border"
+    />
+  );
+}
+
+export const Range: Story = {
+  render: () => <CalendarRangeDemo />,
+};