@bearmenu/ui 0.1.1 → 0.5.0

package/src/components/toast.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "./toast";
+
+const meta = {
+  title: "Components/Toast",
+  component: Toast,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <ToastProvider>
+        <Story />
+        <ToastViewport />
+      </ToastProvider>
+    ),
+  ],
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Toast open>
+      <div className="grid gap-1">
+        <ToastTitle>Notification</ToastTitle>
+        <ToastDescription>Your changes have been saved.</ToastDescription>
+      </div>
+      <ToastClose />
+    </Toast>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <Toast variant="destructive" open>
+      <div className="grid gap-1">
+        <ToastTitle>Error</ToastTitle>
+        <ToastDescription>Something went wrong.</ToastDescription>
+      </div>
+      <ToastClose />
+    </Toast>
+  ),
+};
+
+export const WithAction: Story = {
+  render: () => (
+    <Toast open>
+      <div className="grid gap-1">
+        <ToastTitle>Event Created</ToastTitle>
+        <ToastDescription>Friday, March 14 at 2:00 PM</ToastDescription>
+      </div>
+      <ToastAction altText="Undo">Undo</ToastAction>
+    </Toast>
+  ),
+};

package/src/components/toggle-group.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from "lucide-react";
+
+const meta = {
+  title: "Components/ToggleGroup",
+  component: ToggleGroup,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Single: Story = {
+  render: () => (
+    <ToggleGroup type="single" defaultValue="center">
+      <ToggleGroupItem value="left" aria-label="Align left">
+        <AlignLeft className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Align center">
+        <AlignCenter className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Align right">
+        <AlignRight className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Outline: Story = {
+  render: () => (
+    <ToggleGroup type="multiple" variant="outline">
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};

package/src/components/toggle.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toggle } from "./toggle";
+import { Bold, Italic, Underline } from "lucide-react";
+
+const meta = {
+  title: "Components/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "outline"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg"],
+    },
+  },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: <Bold className="h-4 w-4" /> },
+};
+
+export const Outline: Story = {
+  args: { variant: "outline", children: <Italic className="h-4 w-4" /> },
+};
+
+export const WithText: Story = {
+  args: { children: <><Bold className="h-4 w-4" /> Bold</> },
+};
+
+export const Disabled: Story = {
+  args: { disabled: true, children: <Bold className="h-4 w-4" /> },
+};
+
+export const TextFormatting: Story = {
+  render: () => (
+    <div className="flex items-center gap-1">
+      <Toggle variant="outline" size="sm"><Bold className="h-4 w-4" /></Toggle>
+      <Toggle variant="outline" size="sm"><Italic className="h-4 w-4" /></Toggle>
+      <Toggle variant="outline" size="sm"><Underline className="h-4 w-4" /></Toggle>
+    </div>
+  ),
+};

package/src/components/tooltip.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+import { Button } from "./button";
+import { Plus } from "lucide-react";
+
+const meta = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>This is a tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const OnIcon: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button size="icon" variant="outline">
+          <Plus className="h-4 w-4" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Add new item</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const Positions: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Tooltip>
+        <TooltipTrigger asChild><Button variant="outline" size="sm">Top</Button></TooltipTrigger>
+        <TooltipContent side="top"><p>Top tooltip</p></TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild><Button variant="outline" size="sm">Bottom</Button></TooltipTrigger>
+        <TooltipContent side="bottom"><p>Bottom tooltip</p></TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild><Button variant="outline" size="sm">Left</Button></TooltipTrigger>
+        <TooltipContent side="left"><p>Left tooltip</p></TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild><Button variant="outline" size="sm">Right</Button></TooltipTrigger>
+        <TooltipContent side="right"><p>Right tooltip</p></TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};

package/src/globals.css

@@ -60,7 +60,7 @@ h6 {
   --accent: oklch(0.94 0.04 50);
   --accent-foreground: oklch(0.22 0.025 45);
   --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.9 0.012 60);
   --input: oklch(0.9 0.012 60);
   --ring: oklch(0.25 0.05 35);
@@ -82,6 +82,10 @@ h6 {
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  --success: oklch(0.48 0.17 150);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.72 0.18 68);
+  --warning-foreground: oklch(0.18 0.04 45);
 }
 
 .dark {
@@ -100,7 +104,7 @@ h6 {
   --accent: oklch(0.3 0.04 50);
   --accent-foreground: oklch(0.97 0.008 60);
   --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.985 0 0);
   --border: oklch(0.3 0.015 45);
   --input: oklch(0.3 0.015 45);
   --ring: oklch(0.98 0 0);
@@ -121,6 +125,10 @@ h6 {
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(0.269 0 0);
   --sidebar-ring: oklch(0.439 0 0);
+  --success: oklch(0.63 0.17 150);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.76 0.15 68);
+  --warning-foreground: oklch(0.18 0.04 45);
 }
 
 @theme inline {
@@ -162,6 +170,10 @@ h6 {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-surface: var(--surface);
   --color-surface-foreground: var(--surface-foreground);
   --color-surface-2: var(--surface-2);

package/src/test/setup.ts

@@ -0,0 +1,9 @@
+import "@testing-library/jest-dom";
+
+global.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+window.HTMLElement.prototype.scrollIntoView = function () {};