@bearmenu/ui 0.1.1 → 0.5.0

package/src/components/checkbox.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./checkbox";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Checkbox>;
+
+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">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">I agree to the terms of service</Label>
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <div className="flex items-center gap-2">
+        <Checkbox id="opt1" defaultChecked />
+        <Label htmlFor="opt1">Email notifications</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="opt2" />
+        <Label htmlFor="opt2">SMS notifications</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <Checkbox id="opt3" disabled />
+        <Label htmlFor="opt3">Push notifications (coming soon)</Label>
+      </div>
+    </div>
+  ),
+};

package/src/components/checkbox.tsx

@@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-5 w-5 shrink-0 rounded-md border border-border glass transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 hover:border-accent/50 hover:shadow-md",
+      "peer h-5 w-5 shrink-0 rounded-md border border-border bg-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary data-[state=indeterminate]:shadow-lg data-[state=indeterminate]:shadow-primary/20 hover:border-primary/40 hover:shadow-md",
       className
     )}
     {...props}

package/src/components/collapsible.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
+import { Button } from "./button";
+import { ChevronsUpDown } from "lucide-react";
+
+const meta = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Collapsible>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Collapsible className="w-[350px] space-y-2">
+      <div className="flex items-center justify-between space-x-4 px-4">
+        <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+        <CollapsibleTrigger asChild>
+          <Button variant="ghost" size="sm" className="w-9 p-0">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className="rounded-md border px-4 py-3 text-sm">@radix-ui/primitives</div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-3 text-sm">@radix-ui/colors</div>
+        <div className="rounded-md border px-4 py-3 text-sm">@stitches/react</div>
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+};

package/src/components/command.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "./command";
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from "lucide-react";
+
+const meta = {
+  title: "Components/Command",
+  component: Command,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Command>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Command className="rounded-lg border shadow-md w-[400px]">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>
+            <Calendar className="mr-2 h-4 w-4" />
+            <span>Calendar</span>
+          </CommandItem>
+          <CommandItem>
+            <Smile className="mr-2 h-4 w-4" />
+            <span>Search Emoji</span>
+          </CommandItem>
+          <CommandItem>
+            <Calculator className="mr-2 h-4 w-4" />
+            <span>Calculator</span>
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem>
+            <User className="mr-2 h-4 w-4" />
+            <span>Profile</span>
+            <CommandShortcut>⌘P</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <CreditCard className="mr-2 h-4 w-4" />
+            <span>Billing</span>
+            <CommandShortcut>⌘B</CommandShortcut>
+          </CommandItem>
+          <CommandItem>
+            <Settings className="mr-2 h-4 w-4" />
+            <span>Settings</span>
+            <CommandShortcut>⌘S</CommandShortcut>
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  ),
+};

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

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CurrencyInput } from "./currency-input";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/CurrencyInput",
+  component: CurrencyInput,
+  tags: ["autodocs"],
+} satisfies Meta<typeof CurrencyInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function CurrencyInputDemo() {
+  const [value, setValue] = useState<number | null>(null);
+  return (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label>Amount</Label>
+      <CurrencyInput value={value} onChange={setValue} placeholder="Enter amount" />
+      <p className="text-sm text-muted-foreground">Value: {value ?? "null"}</p>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: () => <CurrencyInputDemo />,
+};
+
+function CurrencyInputWithConstraints() {
+  const [value, setValue] = useState<number | null>(50);
+  return (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label>Price (min: 0, max: 1000)</Label>
+      <CurrencyInput value={value} onChange={setValue} min={0} max={1000} />
+    </div>
+  );
+}
+
+export const WithConstraints: Story = {
+  render: () => <CurrencyInputWithConstraints />,
+};
+
+export const Disabled: Story = {
+  render: () => <CurrencyInput value={99.99} onChange={() => {}} disabled />,
+};
+
+export const WithError: Story = {
+  render: () => <CurrencyInput value={null} onChange={() => {}} error="Amount is required" />,
+};

package/src/components/dialog.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Label } from "./label";
+
+const meta = {
+  title: "Components/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you sure?</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. This will permanently delete your account.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button variant="destructive">Delete</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};
+
+export const WithForm: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Edit Profile</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex flex-col gap-4 py-4">
+          <div className="grid gap-1.5">
+            <Label htmlFor="name">Name</Label>
+            <Input id="name" defaultValue="John Doe" />
+          </div>
+          <div className="grid gap-1.5">
+            <Label htmlFor="username">Username</Label>
+            <Input id="username" defaultValue="@johndoe" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button>Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+};

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" },
+};