@bearmenu/ui 0.1.1 → 0.5.0

package/src/components/sheet.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetFooter,
+  SheetClose,
+} from "./sheet";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Sheet",
+  component: Sheet,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Sheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Right: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Sheet</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit Profile</SheetTitle>
+          <SheetDescription>Make changes to your profile here.</SheetDescription>
+        </SheetHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              Name
+            </Label>
+            <Input id="name" defaultValue="John Doe" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              Username
+            </Label>
+            <Input id="username" defaultValue="@johndoe" className="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose asChild>
+            <Button type="submit">Save changes</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+export const Left: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Left</Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>Navigation</SheetTitle>
+          <SheetDescription>Browse the app sections.</SheetDescription>
+        </SheetHeader>
+        <div className="py-4 space-y-2">
+          <Button variant="ghost" className="w-full justify-start">Home</Button>
+          <Button variant="ghost" className="w-full justify-start">Products</Button>
+          <Button variant="ghost" className="w-full justify-start">Settings</Button>
+        </div>
+      </SheetContent>
+    </Sheet>
+  ),
+};
+
+export const Bottom: Story = {
+  render: () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline">Open Bottom</Button>
+      </SheetTrigger>
+      <SheetContent side="bottom">
+        <SheetHeader>
+          <SheetTitle>Filters</SheetTitle>
+          <SheetDescription>Apply filters to narrow your search.</SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  ),
+};

package/src/components/skeleton-card.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SkeletonCard } from "./skeleton-card";
+
+const meta = {
+  title: "Components/SkeletonCard",
+  component: SkeletonCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SkeletonCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Experience: Story = {
+  render: () => <SkeletonCard variant="experience" className="w-[350px]" />,
+};
+
+export const Restaurant: Story = {
+  render: () => <SkeletonCard variant="restaurant" className="w-[350px]" />,
+};
+
+export const Place: Story = {
+  render: () => <SkeletonCard variant="place" className="w-[350px]" />,
+};
+
+export const Dish: Story = {
+  render: () => <SkeletonCard variant="dish" className="w-[350px]" />,
+};
+
+export const Drink: Story = {
+  render: () => <SkeletonCard variant="drink" className="w-[350px]" />,
+};
+
+export const Event: Story = {
+  render: () => <SkeletonCard variant="event" className="w-[350px]" />,
+};
+
+export const Generic: Story = {
+  render: () => <SkeletonCard variant="generic" className="w-[350px]" />,
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-4 w-[750px]">
+      <SkeletonCard variant="experience" />
+      <SkeletonCard variant="restaurant" />
+      <SkeletonCard variant="place" />
+      <SkeletonCard variant="dish" />
+      <SkeletonCard variant="drink" />
+      <SkeletonCard variant="event" />
+      <SkeletonCard variant="generic" />
+    </div>
+  ),
+};

package/src/components/skeleton.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "./skeleton";
+
+const meta = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Skeleton className="h-4 w-[250px]" />,
+};
+
+export const Circle: Story = {
+  render: () => <Skeleton className="h-12 w-12 rounded-full" />,
+};
+
+export const CardLayout: Story = {
+  render: () => (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  ),
+};
+
+export const ContentBlock: Story = {
+  render: () => (
+    <div className="space-y-3 w-[300px]">
+      <Skeleton className="h-[125px] w-full rounded-xl" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-[80%]" />
+      <Skeleton className="h-4 w-[60%]" />
+    </div>
+  ),
+};

package/src/components/skeleton.tsx

@@ -4,6 +4,7 @@ import { cn } from "../lib/utils";
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
+      data-slot="skeleton"
       className={cn(
         "animate-pulse rounded-xl glass border border-border/30 relative overflow-hidden",
         "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",

package/src/components/slider.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "./slider";
+
+const meta = {
+  title: "Components/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Slider defaultValue={[50]} max={100} step={1} className="w-[300px]" />,
+};
+
+export const Range: Story = {
+  render: () => <Slider defaultValue={[25, 75]} max={100} step={1} className="w-[300px]" />,
+};
+
+export const Disabled: Story = {
+  render: () => <Slider defaultValue={[50]} max={100} step={1} disabled className="w-[300px]" />,
+};
+
+export const SmallStep: Story = {
+  render: () => <Slider defaultValue={[0.5]} max={1} step={0.1} className="w-[300px]" />,
+};

package/src/components/sliding-panels.stories.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SlidingPanels } from "./sliding-panels";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/SlidingPanels",
+  component: SlidingPanels,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SlidingPanels>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SlidingPanelsDemo() {
+  const [currentPanel, setCurrentPanel] = useState("panel-1");
+
+  const panels = [
+    {
+      id: "panel-1",
+      content: (
+        <div className="space-y-4 p-4">
+          <h3 className="text-lg font-semibold">Step 1: Select Category</h3>
+          <p className="text-muted-foreground">Choose a category to continue.</p>
+          <Button onClick={() => setCurrentPanel("panel-2")}>Next</Button>
+        </div>
+      ),
+    },
+    {
+      id: "panel-2",
+      showBackButton: true,
+      backButtonLabel: "Details",
+      content: (
+        <div className="space-y-4 p-4">
+          <h3 className="text-lg font-semibold">Step 2: Enter Details</h3>
+          <p className="text-muted-foreground">Fill in your information.</p>
+          <Button onClick={() => setCurrentPanel("panel-3")}>Next</Button>
+        </div>
+      ),
+    },
+    {
+      id: "panel-3",
+      showBackButton: true,
+      backButtonLabel: "Confirm",
+      content: (
+        <div className="space-y-4 p-4">
+          <h3 className="text-lg font-semibold">Step 3: Confirm</h3>
+          <p className="text-muted-foreground">Review and submit.</p>
+          <Button onClick={() => setCurrentPanel("panel-1")}>Start Over</Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div className="w-[400px] border rounded-lg overflow-hidden">
+      <SlidingPanels
+        panels={panels}
+        currentPanel={currentPanel}
+        onPanelChange={setCurrentPanel}
+      />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <SlidingPanelsDemo />,
+};

package/src/components/sonner.tsx

@@ -1,20 +1,35 @@
 "use client";
 
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner, ToasterProps } from "sonner";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme();
 
   return (
     <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme={(theme ?? "system") as NonNullable<ToasterProps["theme"]>}
       className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
       style={
         {
           "--normal-bg": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
         } as React.CSSProperties
       }
       {...props}

package/src/components/sticky-container.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { StickyContainer } from "./sticky-container";
+
+const meta = {
+  title: "Components/StickyContainer",
+  component: StickyContainer,
+  tags: ["autodocs"],
+} satisfies Meta<typeof StickyContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="h-[400px] overflow-y-auto border rounded-lg">
+      <div className="p-4">
+        <p className="text-muted-foreground mb-4">Scroll down to see the sticky container in action.</p>
+      </div>
+      <StickyContainer topOffset="top-0" className="px-4">
+        <div className="bg-primary text-primary-foreground p-3 rounded-lg text-center font-medium">
+          Sticky Header
+        </div>
+      </StickyContainer>
+      <div className="p-4 space-y-4">
+        {Array.from({ length: 20 }).map((_, i) => (
+          <p key={i} className="text-muted-foreground">
+            Content line {i + 1} — scroll to see the sticky behavior.
+          </p>
+        ))}
+      </div>
+    </div>
+  ),
+};

package/src/components/switch.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./switch";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Checked: Story = {
+  args: { defaultChecked: true },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+export const DisabledChecked: Story = {
+  args: { disabled: true, defaultChecked: true },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Switch id="notifications" />
+      <Label htmlFor="notifications">Enable notifications</Label>
+    </div>
+  ),
+};

package/src/components/table.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+const meta = {
+  title: "Components/Table",
+  component: Table,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const invoices = [
+  { invoice: "INV001", status: "Paid", method: "Credit Card", amount: "$250.00" },
+  { invoice: "INV002", status: "Pending", method: "PayPal", amount: "$150.00" },
+  { invoice: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "$350.00" },
+  { invoice: "INV004", status: "Paid", method: "Credit Card", amount: "$450.00" },
+  { invoice: "INV005", status: "Paid", method: "PayPal", amount: "$550.00" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>A list of recent invoices.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead>Method</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((invoice) => (
+          <TableRow key={invoice.invoice}>
+            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell>{invoice.status}</TableCell>
+            <TableCell>{invoice.method}</TableCell>
+            <TableCell className="text-right">{invoice.amount}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>Total</TableCell>
+          <TableCell className="text-right">$1,750.00</TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+};

package/src/components/tabs.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+
+const meta = {
+  title: "Components/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pill: Story = {
+  render: () => (
+    <Tabs defaultValue="account" className="w-[400px]">
+      <TabsList variant="pill">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+        <TabsTrigger value="settings">Settings</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <p className="text-sm text-muted-foreground">Manage your account settings.</p>
+      </TabsContent>
+      <TabsContent value="password">
+        <p className="text-sm text-muted-foreground">Change your password here.</p>
+      </TabsContent>
+      <TabsContent value="settings">
+        <p className="text-sm text-muted-foreground">Configure app settings.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Underline: Story = {
+  render: () => (
+    <Tabs defaultValue="overview" className="w-[400px]">
+      <TabsList variant="underline">
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="analytics">Analytics</TabsTrigger>
+        <TabsTrigger value="reports">Reports</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <p className="text-sm text-muted-foreground">Overview content.</p>
+      </TabsContent>
+      <TabsContent value="analytics">
+        <p className="text-sm text-muted-foreground">Analytics content.</p>
+      </TabsContent>
+      <TabsContent value="reports">
+        <p className="text-sm text-muted-foreground">Reports content.</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};

package/src/components/tabs.tsx

@@ -21,7 +21,7 @@ const TabsList = React.forwardRef<
       ref={ref}
       className={cn(
         variant === "pill"
-          ? "inline-flex h-12 items-center justify-center gap-2 rounded-3xl glass p-1 text-muted-foreground border border-border/50 shadow-lg"
+          ? "inline-flex h-12 items-center justify-center gap-2 rounded-3xl bg-sidebar p-1 text-muted-foreground border border-border/50 shadow-lg"
           : "inline-flex h-auto items-center gap-0 rounded-none bg-transparent border-b border-border p-0 shadow-none text-muted-foreground",
         className
       )}

package/src/components/text.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "./text";
+
+const meta = {
+  title: "Components/Text",
+  component: Text,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["display", "h1", "h2", "h3", "h4", "body-lg", "body", "body-sm", "caption", "label", "overline"],
+    },
+    color: {
+      control: "select",
+      options: ["default", "muted", "primary", "destructive", "primary-foreground", "inherit"],
+    },
+    weight: {
+      control: "select",
+      options: ["normal", "medium", "semibold", "bold"],
+    },
+  },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "The quick brown fox jumps over the lazy dog", variant: "body" },
+};
+
+export const Display: Story = {
+  args: { children: "Display", variant: "display" },
+};
+
+export const Heading1: Story = {
+  args: { children: "Heading 1", variant: "h1", as: "h1" },
+};
+
+export const Heading2: Story = {
+  args: { children: "Heading 2", variant: "h2", as: "h2" },
+};
+
+export const Heading3: Story = {
+  args: { children: "Heading 3", variant: "h3", as: "h3" },
+};
+
+export const Caption: Story = {
+  args: { children: "Caption text", variant: "caption" },
+};
+
+export const Overline: Story = {
+  args: { children: "Overline", variant: "overline" },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Text variant="display">Display</Text>
+      <Text variant="h1" as="h1">Heading 1</Text>
+      <Text variant="h2" as="h2">Heading 2</Text>
+      <Text variant="h3" as="h3">Heading 3</Text>
+      <Text variant="h4" as="h4">Heading 4</Text>
+      <Text variant="body-lg">Body Large</Text>
+      <Text variant="body">Body</Text>
+      <Text variant="body-sm">Body Small</Text>
+      <Text variant="caption">Caption</Text>
+      <Text variant="label">Label</Text>
+      <Text variant="overline">Overline</Text>
+    </div>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Text variant="body" color="default">Default</Text>
+      <Text variant="body" color="muted">Muted</Text>
+      <Text variant="body" color="primary">Primary</Text>
+      <Text variant="body" color="destructive">Destructive</Text>
+    </div>
+  ),
+};

package/src/components/textarea.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "./textarea";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <Textarea placeholder="Type your message here..." />,
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full gap-1.5">
+      <Label htmlFor="message">Your message</Label>
+      <Textarea id="message" placeholder="Type your message here..." />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => <Textarea placeholder="Disabled textarea" disabled />,
+};
+
+export const WithValue: Story = {
+  render: () => (
+    <Textarea defaultValue="This textarea already has some content in it that demonstrates how text wraps and displays within the component." />
+  ),
+};