@ponti-studios/ui 2.0.1 → 3.0.0

package/src/components/overlays/bottom-sheet.tsx

@@ -1,179 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-// Non-modal persistent bottom panel with drag-to-collapse/expand.
-// Positioning and sizing are app-owned via className (the kit only sets
-// structure + the translateY transform; Tailwind translate utilities compose
-// via the independent CSS `translate` property).
-//
-// Distinct from Sheet: Sheet is a modal dialog; BottomSheet is always
-// mounted chrome (maps, players, detail panels).
-
-const FLICK_VELOCITY = 0.4;
-const DRAG_THRESHOLD = 0.25;
-
-export type BottomSheetProps = {
-  children: React.ReactNode;
-  /** Controlled expanded state. */
-  expanded?: boolean;
-  /** Uncontrolled initial state. @default false */
-  defaultExpanded?: boolean;
-  onExpandedChange?: (expanded: boolean) => void;
-  /** Visible stub height when collapsed. @default 48 */
-  peek?: number;
-  /** Accessible name for the panel region. @default "Details panel" */
-  label?: string;
-  /** Positioning/sizing (app-owned). */
-  className?: string;
-  /** Applied to the scrollable content wrapper alongside its defaults. */
-  scrollClassName?: string;
-  /** Applied to the drag handle button alongside its defaults. */
-  handleClassName?: string;
-};
-
-export function BottomSheet({
-  children,
-  expanded: controlledExpanded,
-  defaultExpanded = false,
-  onExpandedChange,
-  peek = 48,
-  label = "Details panel",
-  className,
-  scrollClassName,
-  handleClassName,
-}: BottomSheetProps) {
-  const sheetRef = React.useRef<HTMLElement>(null);
-  const [translateY, setTranslateY] = React.useState(0);
-  const [dragOffset, setDragOffset] = React.useState(0);
-  const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
-  const isDragging = React.useRef(false);
-  const didDrag = React.useRef(false);
-  const dragRef = React.useRef<{ startY: number; startTime: number } | null>(null);
-  const reduceMotion = React.useRef(
-    typeof window !== "undefined" &&
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches,
-  );
-
-  const expanded = controlledExpanded ?? internalExpanded;
-
-  const getHeight = React.useCallback(() => sheetRef.current?.offsetHeight ?? 400, []);
-  const closedY = React.useCallback(() => Math.max(0, getHeight() - peek), [getHeight, peek]);
-
-  const setExpanded = React.useCallback(
-    (next: boolean) => {
-      onExpandedChange?.(next);
-      if (controlledExpanded === undefined) setInternalExpanded(next);
-    },
-    [controlledExpanded, onExpandedChange],
-  );
-
-  const snapTo = React.useCallback((targetY: number) => {
-    setTranslateY(targetY);
-    setDragOffset(0);
-  }, []);
-
-  // Sync visuals with expanded state (and settle closed on mount).
-  React.useEffect(() => {
-    snapTo(expanded ? 0 : closedY());
-  }, [expanded, closedY, snapTo]);
-
-  const open = React.useCallback(() => setExpanded(true), [setExpanded]);
-  const close = React.useCallback(() => setExpanded(false), [setExpanded]);
-
-  const onPointerDown = React.useCallback((e: React.PointerEvent) => {
-    isDragging.current = true;
-    didDrag.current = false;
-    dragRef.current = { startY: e.clientY, startTime: Date.now() };
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-  }, []);
-
-  const onPointerMove = React.useCallback(
-    (e: React.PointerEvent) => {
-      if (!isDragging.current || !dragRef.current) return;
-      const delta = e.clientY - dragRef.current.startY;
-      if (Math.abs(delta) > 4) didDrag.current = true;
-      setDragOffset(Math.max(-translateY, delta));
-    },
-    [translateY],
-  );
-
-  const endDrag = React.useCallback(
-    (e: React.PointerEvent) => {
-      if (!isDragging.current || !dragRef.current) return;
-      isDragging.current = false;
-
-      const delta = e.clientY - dragRef.current.startY;
-      const elapsed = Date.now() - dragRef.current.startTime;
-      const velocity = elapsed > 0 ? delta / elapsed : 0;
-      dragRef.current = null;
-      setDragOffset(0);
-
-      if (didDrag.current) {
-        const height = getHeight();
-        const newY = Math.max(0, translateY + delta);
-        const fraction = height > 0 ? newY / height : 0;
-
-        if (velocity > FLICK_VELOCITY) close();
-        else if (velocity < -FLICK_VELOCITY) open();
-        else if (fraction > DRAG_THRESHOLD) close();
-        else open();
-      }
-    },
-    [translateY, getHeight, open, close],
-  );
-
-  const onHandleClick = React.useCallback(() => {
-    if (didDrag.current) return;
-    if (expanded) close();
-    else open();
-  }, [expanded, open, close]);
-
-  const currentY = Math.max(0, translateY + dragOffset);
-
-  return (
-    <section
-      ref={sheetRef}
-      data-slot="bottom-sheet"
-      aria-label={label}
-      className={cn("flex touch-none flex-col overflow-hidden", className)}
-      style={{
-        transform: `translateY(${currentY}px)`,
-        transition: isDragging.current
-          ? "none"
-          : reduceMotion.current
-            ? "none"
-            : "transform 0.35s cubic-bezier(0.32, 0.72, 0, 1)",
-      }}
-    >
-      <button
-        type="button"
-        data-slot="bottom-sheet-handle"
-        aria-expanded={expanded}
-        aria-label={expanded ? "Collapse panel" : "Expand panel"}
-        onPointerDown={onPointerDown}
-        onPointerMove={onPointerMove}
-        onPointerUp={endDrag}
-        onPointerCancel={endDrag}
-        onClick={onHandleClick}
-        onKeyDown={(e) => {
-          if (e.key === "Escape") close();
-        }}
-        className={cn(
-          "flex w-full shrink-0 cursor-grab touch-none justify-center py-3.5 active:cursor-grabbing",
-          handleClassName,
-        )}
-      >
-        <span aria-hidden="true" className="bg-border h-1 w-9 rounded-full" />
-      </button>
-      <div
-        data-slot="bottom-sheet-scroll"
-        className={cn("flex-1 overflow-y-auto", scrollClassName)}
-      >
-        {children}
-      </div>
-    </section>
-  );
-}

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

@@ -1,65 +0,0 @@
-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

@@ -1,227 +0,0 @@
-import { Combobox as CommandPrimitive } from "@base-ui/react/combobox";
-import { SearchIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
-
-function Command({
-  className,
-  children,
-  ...props
-}: Omit<React.ComponentProps<typeof CommandPrimitive.Root<string>>, "className"> & {
-  className?: string;
-}) {
-  return (
-    <div
-      data-slot="command"
-      className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className,
-      )}
-    >
-      <CommandPrimitive.Root {...props}>{children}</CommandPrimitive.Root>
-    </div>
-  );
-}
-
-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>
-  );
-}
-
-type CommandInputProps = React.ComponentProps<typeof CommandPrimitive.Input> & {
-  onValueChange?: (value: string) => void;
-};
-
-function CommandInput({
-  className,
-  onValueChange,
-  onChange,
-  "aria-label": ariaLabel = "Search commands",
-  ...props
-}: CommandInputProps) {
-  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"
-        aria-label={ariaLabel}
-        className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
-        onChange={(event) => {
-          onChange?.(event);
-          onValueChange?.(event.currentTarget.value);
-        }}
-        {...props}
-      />
-    </div>
-  );
-}
-
-function CommandList({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
-  if (typeof children === "function") {
-    return (
-      <CommandPrimitive.List
-        data-slot="command-list"
-        aria-label="Command results"
-        tabIndex={0}
-        className={cn("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
-        {...props}
-      >
-        {children}
-      </CommandPrimitive.List>
-    );
-  }
-
-  const listChildren: React.ReactNode[] = [];
-  const emptyChildren: React.ReactNode[] = [];
-
-  React.Children.forEach(children, (child) => {
-    if (React.isValidElement(child) && child.type === CommandEmpty) emptyChildren.push(child);
-    else listChildren.push(child);
-  });
-
-  return (
-    <div data-slot="command-list-container" className="relative">
-      <CommandPrimitive.List
-        data-slot="command-list"
-        aria-label="Command results"
-        tabIndex={0}
-        className={cn("max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
-        {...props}
-      >
-        {listChildren}
-      </CommandPrimitive.List>
-      {emptyChildren}
-    </div>
-  );
-}
-
-function CommandEmpty({
-  className,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return (
-    <CommandPrimitive.Empty
-      data-slot="command-empty"
-      className={cn("py-6 text-center text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandGroup({
-  className,
-  heading,
-  children,
-  ...props
-}: React.ComponentProps<typeof CommandPrimitive.Group> & { heading?: React.ReactNode }) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn("text-foreground overflow-hidden p-1", className)}
-      {...props}
-    >
-      {heading ? (
-        <CommandPrimitive.GroupLabel className="text-muted-foreground px-2 py-1.5 text-xs font-medium">
-          {heading}
-        </CommandPrimitive.GroupLabel>
-      ) : null}
-      {children}
-    </CommandPrimitive.Group>
-  );
-}
-
-type CommandItemProps = React.ComponentProps<typeof CommandPrimitive.Item> & {
-  onSelect?: () => void;
-};
-
-function CommandItem({ className, onSelect, onClick, ...props }: CommandItemProps) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-hidden select-none",
-        "data-disabled:pointer-events-none data-disabled:opacity-50",
-        className,
-      )}
-      onClick={(event) => {
-        onClick?.(event);
-        onSelect?.();
-      }}
-      {...props}
-    />
-  );
-}
-
-function CommandSeparator({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="command-separator"
-      aria-hidden="true"
-      className={cn("bg-border -mx-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
-      {...props}
-    />
-  );
-}
-
-function CommandListLoading({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="command-list-loading"
-      className={cn("py-6 text-center text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandListLoading,
-  CommandSeparator,
-  CommandShortcut,
-};

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

@@ -1,148 +0,0 @@
-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,
-  DialogClose,
-  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>
-          <DialogClose asChild>
-            <Button>Confirm</Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </DialogPreview>
-  ),
-};
-
-/**
- * `alert` swaps in Base UI's AlertDialog primitive: `role="alertdialog"`,
- * forced modal, and no dismiss via outside click or Escape. Use it for
- * confirmations that need explicit acknowledgment (destructive actions,
- * unsaved-changes warnings). The close (X) button is off by default in this
- * mode — dismissal should go through an explicit action.
- */
-export const Alert: Story = {
-  render: () => (
-    <Dialog alert>
-      <DialogTrigger asChild>
-        <Button variant="outline">Delete account</Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Are you absolutely sure?</DialogTitle>
-          <DialogDescription>
-            This action cannot be undone. This will permanently delete your account and remove your
-            data from our servers.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <DialogClose asChild>
-            <Button>Continue</Button>
-          </DialogClose>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  ),
-};