@bearmenu/ui 0.1.1 → 0.5.1

package/src/components/drawer.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "./drawer";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/Drawer",
+  component: Drawer,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Move Goal</DrawerTitle>
+          <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+        </DrawerHeader>
+        <div className="p-4">
+          <p className="text-center text-4xl font-bold">350</p>
+          <p className="text-center text-muted-foreground">calories/day</p>
+        </div>
+        <DrawerFooter>
+          <Button>Submit</Button>
+          <DrawerClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  ),
+};

package/src/components/dropdown-menu.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+import { Button } from "./button";
+import { LogOut, Settings, User, CreditCard, Keyboard } from "lucide-react";
+
+const meta = {
+  title: "Components/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline">Open Menu</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            <User className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard className="mr-2 h-4 w-4" />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Keyboard className="mr-2 h-4 w-4" />
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log out</span>
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};

package/src/components/dropdown-menu.tsx

@@ -72,7 +72,7 @@ function DropdownMenuItem({
 function DropdownMenuCheckboxItem({
   className,
   children,
-  checked,
+  checked = false,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
   return (

package/src/components/empty-state.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmptyState, SearchEmptyState, ErrorEmptyState } from "./empty-state";
+
+const meta = {
+  title: "Components/EmptyState",
+  component: EmptyState,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "search", "error"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "No items yet",
+    description: "Get started by creating your first item.",
+    action: { label: "Create item", onClick: () => {} },
+  },
+};
+
+export const Search: Story = {
+  render: () => (
+    <SearchEmptyState
+      title="No results found"
+      description="Try adjusting your search or filters to find what you're looking for."
+      action={{ label: "Clear filters", onClick: () => {} }}
+    />
+  ),
+};
+
+export const Error: Story = {
+  render: () => (
+    <ErrorEmptyState
+      title="Something went wrong"
+      description="We couldn't load the data. Please try again."
+      action={{ label: "Retry", onClick: () => {} }}
+      secondaryAction={{ label: "Go back", onClick: () => {} }}
+    />
+  ),
+};
+
+export const Small: Story = {
+  args: {
+    title: "No data",
+    description: "Nothing to show here.",
+    size: "sm",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    title: "Welcome!",
+    description: "This is your dashboard. Start by adding some content.",
+    size: "lg",
+    action: { label: "Get started", onClick: () => {} },
+  },
+};

package/src/components/form.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useForm } from "react-hook-form";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "./form";
+import { Input } from "./input";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/Form",
+  component: Form,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function FormDemo() {
+  const form = useForm({
+    defaultValues: {
+      username: "",
+      email: "",
+    },
+  });
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(() => {})} className="space-y-6 w-[400px]">
+        <FormField
+          control={form.control}
+          name="username"
+          rules={{ required: "Username is required" }}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="johndoe" {...field} />
+              </FormControl>
+              <FormDescription>This is your public display name.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="email"
+          rules={{ required: "Email is required" }}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Email</FormLabel>
+              <FormControl>
+                <Input type="email" placeholder="john@example.com" {...field} />
+              </FormControl>
+              <FormDescription>We'll never share your email.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  );
+}
+
+export const Default: Story = {
+  render: () => <FormDemo />,
+};

package/src/components/haptic-button.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HapticButton } from "./haptic-button";
+
+const meta = {
+  title: "Components/HapticButton",
+  component: HapticButton,
+  tags: ["autodocs"],
+} satisfies Meta<typeof HapticButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+  render: () => <HapticButton hapticStyle="light">Light Haptic</HapticButton>,
+};
+
+export const Medium: Story = {
+  render: () => (
+    <HapticButton hapticStyle="medium" variant="secondary">
+      Medium Haptic
+    </HapticButton>
+  ),
+};
+
+export const Heavy: Story = {
+  render: () => (
+    <HapticButton hapticStyle="heavy" variant="destructive">
+      Heavy Haptic
+    </HapticButton>
+  ),
+};
+
+export const AllStyles: Story = {
+  render: () => (
+    <div className="flex gap-3">
+      <HapticButton hapticStyle="light">Light</HapticButton>
+      <HapticButton hapticStyle="medium" variant="secondary">Medium</HapticButton>
+      <HapticButton hapticStyle="heavy" variant="outline">Heavy</HapticButton>
+    </div>
+  ),
+};

package/src/components/input-otp.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./input-otp";
+
+const meta = {
+  title: "Components/InputOTP",
+  component: InputOTP,
+  tags: ["autodocs"],
+} satisfies Meta<typeof InputOTP>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+};
+
+export const FourDigits: Story = {
+  render: () => (
+    <InputOTP maxLength={4}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+};

package/src/components/input.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./input";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Input",
+  component: Input,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { placeholder: "Enter text..." },
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="email">Email</Label>
+      <Input type="email" id="email" placeholder="name@example.com" />
+    </div>
+  ),
+};
+
+export const Password: Story = {
+  args: { type: "password", placeholder: "Enter password..." },
+};
+
+export const Disabled: Story = {
+  args: { placeholder: "Disabled", disabled: true },
+};
+
+export const WithValue: Story = {
+  args: { defaultValue: "hello@bearmenu.com", type: "email" },
+};
+
+export const File: Story = {
+  args: { type: "file" },
+};

package/src/components/label.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label } from "./label";
+import { Input } from "./input";
+import { Checkbox } from "./checkbox";
+
+const meta = {
+  title: "Components/Label",
+  component: Label,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Label" },
+};
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="username">Username</Label>
+      <Input id="username" placeholder="Enter username" />
+    </div>
+  ),
+};
+
+export const WithCheckbox: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  ),
+};

package/src/components/markdown-renderer.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MarkdownRenderer } from "./markdown-renderer";
+
+const meta = {
+  title: "Components/MarkdownRenderer",
+  component: MarkdownRenderer,
+  tags: ["autodocs"],
+} satisfies Meta<typeof MarkdownRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <MarkdownRenderer
+      content={`# Heading 1
+## Heading 2
+### Heading 3
+
+This is a paragraph with **bold** and *italic* text.
+
+- List item 1
+- List item 2
+- List item 3
+
+1. Ordered item
+2. Another item
+
+> This is a blockquote
+
+\`inline code\` and a code block:
+
+\`\`\`
+const hello = "world";
+\`\`\`
+
+| Column 1 | Column 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+`}
+      className="prose dark:prose-invert max-w-none"
+    />
+  ),
+};

package/src/components/multi-select-combobox.stories.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MultiSelectCombobox } from "./multi-select-combobox";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/MultiSelectCombobox",
+  component: MultiSelectCombobox,
+  tags: ["autodocs"],
+} satisfies Meta<typeof MultiSelectCombobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const cuisines = [
+  { value: "italian", label: "Italian" },
+  { value: "japanese", label: "Japanese" },
+  { value: "mexican", label: "Mexican" },
+  { value: "indian", label: "Indian" },
+  { value: "thai", label: "Thai" },
+  { value: "french", label: "French" },
+  { value: "chinese", label: "Chinese" },
+  { value: "korean", label: "Korean" },
+];
+
+function MultiSelectDemo() {
+  const [selected, setSelected] = useState<string[]>([]);
+  return (
+    <div className="w-[350px] space-y-2">
+      <Label>Cuisines</Label>
+      <MultiSelectCombobox
+        options={cuisines}
+        selected={selected}
+        onSelectionChange={setSelected}
+        placeholder="Select cuisines..."
+        searchPlaceholder="Search cuisines..."
+      />
+      <p className="text-sm text-muted-foreground">
+        Selected: {selected.length ? selected.join(", ") : "none"}
+      </p>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <MultiSelectDemo />,
+};
+
+function PreselectedDemo() {
+  const [selected, setSelected] = useState(["italian", "japanese", "thai"]);
+  return (
+    <div className="w-[350px]">
+      <MultiSelectCombobox
+        options={cuisines}
+        selected={selected}
+        onSelectionChange={setSelected}
+        placeholder="Select cuisines..."
+      />
+    </div>
+  );
+}
+
+export const Preselected: Story = {
+  render: () => <PreselectedDemo />,
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[350px]">
+      <MultiSelectCombobox
+        options={cuisines}
+        selected={["italian"]}
+        onSelectionChange={() => {}}
+        disabled
+      />
+    </div>
+  ),
+};

package/src/components/multi-select-menu.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Checkbox } from "./checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface MultiSelectMenuOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface MultiSelectMenuProps {
+  options: MultiSelectMenuOption[];
+  selected: string[];
+  onSelectedChange: (values: string[]) => void;
+  /** Trigger element rendered via Radix `asChild` — typically a Button. */
+  trigger: React.ReactNode;
+  /** Optional heading rendered above the option list. */
+  label?: string;
+  align?: "start" | "center" | "end";
+  /** Pixel width of the popover content. Defaults to 220. */
+  width?: number;
+  /** className for the popover content. */
+  contentClassName?: string;
+  emptyText?: string;
+}
+
+export function MultiSelectMenu({
+  options,
+  selected,
+  onSelectedChange,
+  trigger,
+  label,
+  align = "end",
+  width = 220,
+  contentClassName,
+  emptyText = "No options",
+}: MultiSelectMenuProps) {
+  const selectedSet = React.useMemo(() => new Set(selected), [selected]);
+
+  function handleToggle(value: string) {
+    const next = new Set(selectedSet);
+    if (next.has(value)) {
+      next.delete(value);
+    } else {
+      next.add(value);
+    }
+    onSelectedChange(Array.from(next));
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
+      <PopoverContent
+        align={align}
+        className={cn("p-2", contentClassName)}
+        style={{ width }}
+      >
+        {label && (
+          <div className="text-foreground px-2 py-1.5 text-sm font-semibold">
+            {label}
+          </div>
+        )}
+        <div role="group" aria-label={label} className="flex flex-col gap-0.5">
+          {options.length === 0 ? (
+            <p className="text-muted-foreground px-2 py-1.5 text-sm">{emptyText}</p>
+          ) : (
+            options.map((option) => {
+              const checked = selectedSet.has(option.value);
+              return (
+                <label
+                  key={option.value}
+                  className={cn(
+                    "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm select-none",
+                    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+                    option.disabled && "pointer-events-none opacity-50",
+                  )}
+                >
+                  <Checkbox
+                    checked={checked}
+                    onCheckedChange={() => handleToggle(option.value)}
+                    disabled={option.disabled}
+                    aria-label={typeof option.label === "string" ? option.label : option.value}
+                  />
+                  <span className="flex-1">{option.label}</span>
+                </label>
+              );
+            })
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/pagination.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+
+const meta = {
+  title: "Components/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#" isActive>
+            2
+          </PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  ),
+};