@ponti-studios/ui 0.1.2

package/src/components/overlays/command.stories.tsx

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

package/src/components/overlays/command.tsx

@@ -0,0 +1,130 @@
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
+
+function Command(props: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className="bg-raised text-primary flex h-full w-full flex-col overflow-hidden rounded-md"
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  showCloseButton = true,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string;
+  description?: string;
+  showCloseButton?: boolean;
+  children?: React.ReactNode;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0" showCloseButton={showCloseButton}>
+        <Command>{children}</Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput(props: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="flex h-9 items-center gap-2 border-b px-3">
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className="placeholder:text-secondary flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50"
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList(props: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className="max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto"
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup(props: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className="text-primary **:[[cmdk-group-heading]]:text-secondary overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium"
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator(props: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className="bg-border -mx-1 h-px"
+      {...props}
+    />
+  );
+}
+
+function CommandItem(props: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className="data-[selected=true]:bg-accent data-[selected=true]:text-on-accent [&_svg:not([class*='text-'])]:text-secondary relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut(props: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className="text-secondary ml-auto text-xs tracking-widest"
+      {...props}
+    />
+  );
+}
+
+function CommandListLoading(props: React.ComponentProps<"div">) {
+  return <div data-slot="command-list-loading" className="py-6 text-center text-sm" {...props} />;
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandListLoading,
+  CommandSeparator,
+  CommandShortcut,
+};

package/src/components/overlays/dialog.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useEffect, useState } from "react";
+
+import { booleanControl, hiddenControl } from "../../storybook/controls";
+import { Button } from "../primitives/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+
+const meta = {
+  title: "Overlays/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+  argTypes: {
+    open: booleanControl("Controls whether the dialog is open", true),
+    modal: booleanControl("Whether interaction outside the dialog is disabled when open", true),
+    defaultOpen: hiddenControl,
+    onOpenChange: hiddenControl,
+  },
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function DialogPreview({
+  open,
+  modal,
+  children,
+}: {
+  open: boolean;
+  modal: boolean;
+  children: React.ReactNode;
+}) {
+  const [isOpen, setIsOpen] = useState(open);
+
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen} modal={modal}>
+      {children}
+    </Dialog>
+  );
+}
+
+export const Default: Story = {
+  args: {
+    open: true,
+    modal: true,
+  },
+  render: (args) => (
+    <DialogPreview open={Boolean(args.open ?? true)} modal={Boolean(args.modal ?? true)}>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile here. Click save when you're done.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <label htmlFor="name" className="text-right text-sm font-medium">
+              Name
+            </label>
+            <input
+              id="name"
+              defaultValue="Pedro Duarte"
+              className="col-span-3 h-9 rounded-md border px-3 text-sm"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button type="submit">Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogPreview>
+  ),
+};
+
+export const WithCloseButton: Story = {
+  args: {
+    open: true,
+    modal: true,
+  },
+  render: (args) => (
+    <DialogPreview open={Boolean(args.open ?? true)} modal={Boolean(args.modal ?? true)}>
+      <DialogTrigger asChild>
+        <Button>Open</Button>
+      </DialogTrigger>
+      <DialogContent showCloseButton>
+        <DialogHeader>
+          <DialogTitle>Confirmation</DialogTitle>
+          <DialogDescription>Are you sure you want to proceed?</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button>Confirm</Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogPreview>
+  ),
+};

package/src/components/overlays/dialog.tsx

@@ -0,0 +1,162 @@
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Dialog({ ...props }: React.ComponentProps<typeof BaseDialog.Root>) {
+  return <BaseDialog.Root {...props} />;
+}
+
+function DialogTrigger({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Trigger> & { asChild?: boolean }) {
+  if (asChild && React.isValidElement(children)) {
+    return (
+      <BaseDialog.Trigger
+        data-slot="dialog-trigger"
+        render={(triggerProps) =>
+          React.cloneElement(children as React.ReactElement<unknown>, triggerProps)
+        }
+        {...props}
+      />
+    );
+  }
+  return (
+    <BaseDialog.Trigger data-slot="dialog-trigger" {...props}>
+      {children}
+    </BaseDialog.Trigger>
+  );
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof BaseDialog.Portal>) {
+  return <BaseDialog.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Close> & { asChild?: boolean }) {
+  if (asChild && React.isValidElement(children)) {
+    return (
+      <BaseDialog.Close
+        data-slot="dialog-close"
+        render={(closeProps) =>
+          React.cloneElement(children as React.ReactElement<unknown>, closeProps)
+        }
+        {...props}
+      />
+    );
+  }
+  return (
+    <BaseDialog.Close data-slot="dialog-close" {...props}>
+      {children}
+    </BaseDialog.Close>
+  );
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof BaseDialog.Backdrop>) {
+  return (
+    <BaseDialog.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "overlay-backdrop data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 transition-opacity",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Popup> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <BaseDialog.Portal data-slot="dialog-portal">
+      <DialogOverlay />
+      <BaseDialog.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "bg-raised text-primary border-subtle data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid max-h-[90dvh] w-[calc(100%-2rem)] max-w-[30rem] translate-x-[-50%] translate-y-[-50%] gap-6 overflow-y-auto rounded-xl border p-4 duration-200 outline-none sm:p-6",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <BaseDialog.Close
+            data-slot="dialog-close"
+            className="text-secondary hover:bg-inset hover:text-primary focus-visible:outline-ring absolute top-3 right-3 inline-flex size-11 items-center justify-center rounded-md border border-transparent opacity-100 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none sm:top-4 sm:right-4 [&_svg]:pointer-events-none [&_svg]:size-4.5 [&_svg]:shrink-0"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </BaseDialog.Close>
+        )}
+      </BaseDialog.Popup>
+    </BaseDialog.Portal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof BaseDialog.Title>) {
+  return (
+    <BaseDialog.Title
+      data-slot="dialog-title"
+      className={cn("heading-2 text-primary", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Description>) {
+  return (
+    <BaseDialog.Description
+      data-slot="dialog-description"
+      className={cn("body-2 text-secondary max-w-prose", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

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

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { CreditCard, LogOut, Settings, User } from "lucide-react";
+
+import { Button } from "../primitives/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+const meta = {
+  title: "Overlays/DropdownMenu",
+  component: DropdownMenu,
+  tags: ["autodocs"],
+  argTypes: {
+    open: {
+      control: "boolean",
+      description: "Controls whether the dropdown menu is open",
+    },
+    defaultOpen: {
+      control: "boolean",
+      description: "Whether the dropdown menu is open by default (uncontrolled)",
+    },
+    modal: {
+      control: "boolean",
+      description: "When true, interaction outside the menu is disabled while open",
+      table: { defaultValue: { summary: "true" } },
+    },
+    dir: {
+      control: "select",
+      options: ["ltr", "rtl"],
+      description: "Reading direction of the dropdown menu",
+    },
+  },
+} 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 size-4" />
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <CreditCard className="mr-2 size-4" />
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Settings className="mr-2 size-4" />
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem variant="destructive">
+          <LogOut className="mr-2 size-4" />
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ),
+};