@ponti-studios/ui 2.0.1 → 3.0.0

package/src/components/overlays/dialog.tsx

@@ -1,203 +0,0 @@
-"use client";
-
-import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog";
-import { Dialog as BaseDialog } from "@base-ui/react/dialog";
-import { XIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-/**
- * Whether the nearest ancestor `<Dialog alert>` is in alert mode. Every part
- * below (`DialogContent`, etc.) reads this instead of taking its own `alert`
- * prop, so the mode only has to be set once, at the root.
- */
-const DialogAlertContext = React.createContext(false);
-
-/**
- * `alert: true` swaps the root primitive for Base UI's `AlertDialog.Root`:
- * `role="alertdialog"`, forced `modal`, and no dismiss via outside click or
- * Escape — for confirmations that need explicit acknowledgment. Every other
- * part (`Trigger`, `Popup`, `Close`, `Title`, `Description`, ...) is a plain
- * re-export shared by both Base UI primitives, so only the root needs to
- * branch; `DialogContent` reads `DialogAlertContext` to default its close
- * button off in alert mode.
- */
-function Dialog({
-  alert = false,
-  modal,
-  disablePointerDismissal,
-  ...props
-}: Omit<React.ComponentProps<typeof BaseDialog.Root>, "handle"> & { alert?: boolean }) {
-  return (
-    <DialogAlertContext value={alert}>
-      {alert ? (
-        <BaseAlertDialog.Root {...props} />
-      ) : (
-        <BaseDialog.Root
-          modal={modal}
-          disablePointerDismissal={disablePointerDismissal}
-          {...props}
-        />
-      )}
-    </DialogAlertContext>
-  );
-}
-
-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("fixed inset-0 z-50 bg-black/80", className)}
-      {...props}
-    />
-  );
-}
-
-/**
- * Flush to the bottom edge as a sheet on mobile, centered as a card from
- * `sm` up. Animation (slide-up on mobile, fade/zoom on desktop) is driven by
- * [data-slot="dialog-content"] rules in animations.css, not by this class.
- */
-const dialogContentClassName =
-  "bg-popover text-popover-foreground fixed inset-x-0 bottom-0 z-50 grid max-h-[90dvh] w-full gap-6 overflow-y-auto rounded-t-xl border p-4 outline-none sm:top-[50%] sm:bottom-auto sm:left-[50%] sm:w-[calc(100%-2rem)] sm:max-w-[30rem] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:p-6";
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton,
-  ...props
-}: React.ComponentProps<typeof BaseDialog.Popup> & {
-  showCloseButton?: boolean;
-}) {
-  const isAlert = React.useContext(DialogAlertContext);
-  const shouldShowClose = showCloseButton ?? !isAlert;
-
-  return (
-    <BaseDialog.Portal data-slot="dialog-portal">
-      <DialogOverlay />
-      <BaseDialog.Popup
-        data-slot="dialog-content"
-        className={cn(dialogContentClassName, className)}
-        {...props}
-      >
-        {children}
-        {shouldShowClose && (
-          <BaseDialog.Close
-            data-slot="dialog-close"
-            className="text-muted-foreground hover:bg-muted hover:text-muted-foreground focus-visible:outline-ring absolute top-3 right-3 inline-flex size-9 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("text-lg leading-none font-semibold tracking-tight", className)}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof BaseDialog.Description>) {
-  return (
-    <BaseDialog.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground max-w-prose text-sm", className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};

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

@@ -1,74 +0,0 @@
-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" } },
-    },
-  },
-} 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">
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <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>
-  ),
-};

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

@@ -1,236 +0,0 @@
-import { Menu as DropdownMenuPrimitive } from "@base-ui/react/menu";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-function DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
-}
-
-function DropdownMenuPortal(props: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
-}
-
-function DropdownMenuTrigger({
-  asChild,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger> & { asChild?: boolean }) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...(asChild && React.isValidElement(children)
-        ? { render: children as React.ReactElement }
-        : {})}
-      {...props}
-    >
-      {!asChild && children}
-    </DropdownMenuPrimitive.Trigger>
-  );
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Popup> & { sideOffset?: number }) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Backdrop className="ui-mobile-sheet-backdrop" />
-      <DropdownMenuPrimitive.Positioner
-        className="ui-mobile-sheet-positioner"
-        sideOffset={sideOffset}
-      >
-        <DropdownMenuPrimitive.Popup
-          data-slot="dropdown-menu-content"
-          className={cn(
-            "bg-popover text-popover-foreground 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 z-50 max-h-(--available-height) min-w-[8rem] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 outline-none ui-mobile-sheet-popup",
-            className,
-          )}
-          {...props}
-        >
-          {children}
-        </DropdownMenuPrimitive.Popup>
-      </DropdownMenuPrimitive.Positioner>
-    </DropdownMenuPrimitive.Portal>
-  );
-}
-
-function DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.GroupLabel> & { inset?: boolean }) {
-  return (
-    <DropdownMenuPrimitive.GroupLabel
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-[variant=destructive]:text-destructive-text data-[variant=destructive]:data-highlighted:bg-destructive/10 relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
-        className,
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.CheckboxItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.CheckboxItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  );
-}
-
-function DropdownMenuRadioGroup(
-  props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,
-) {
-  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "data-highlighted:bg-muted data-highlighted:text-muted-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <span className="absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.RadioItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.RadioItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  );
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
-  );
-}
-
-function DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuRoot>) {
-  return <DropdownMenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubmenuTrigger> & { inset?: boolean }) {
-  return (
-    <DropdownMenuPrimitive.SubmenuTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "data-highlighted:bg-muted data-highlighted:text-muted-foreground data-open:bg-muted data-open:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubmenuTrigger>
-  );
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Popup>) {
-  return (
-    <DropdownMenuPrimitive.Popup
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg outline-none",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-};

package/src/components/overlays/index.ts

@@ -1,56 +0,0 @@
-export {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandListLoading,
-  CommandSeparator,
-  CommandShortcut,
-} from "./command";
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-} from "./dialog";
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "./dropdown-menu";
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover";
-export { BottomSheet, type BottomSheetProps } from "./bottom-sheet";
-export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./tooltip";
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-  SheetTrigger,
-} from "./sheet";

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

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Button } from "../primitives/button";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-
-const meta = {
-  title: "Overlays/Popover",
-  component: Popover,
-  tags: ["autodocs"],
-} satisfies Meta<typeof Popover>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline">Open Popover</Button>
-      </PopoverTrigger>
-      <PopoverContent>
-        <div className="grid gap-1.5">
-          <h4 className="text-foreground leading-none font-medium">Dimensions</h4>
-          <p className="text-muted-foreground text-sm">Set the dimensions for the layer.</p>
-        </div>
-        <div className="grid gap-4 pt-4">
-          <div className="grid grid-cols-3 items-center gap-4">
-            <label htmlFor="popover-width" className="text-sm">
-              Width
-            </label>
-            <input
-              id="popover-width"
-              className="col-span-2 h-8 rounded border px-2 text-sm"
-              defaultValue="100%"
-            />
-          </div>
-          <div className="grid grid-cols-3 items-center gap-4">
-            <label htmlFor="popover-height" className="text-sm">
-              Height
-            </label>
-            <input
-              id="popover-height"
-              className="col-span-2 h-8 rounded border px-2 text-sm"
-              defaultValue="25px"
-            />
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  ),
-};

package/src/components/overlays/popover.tsx

@@ -1,78 +0,0 @@
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { XIcon } from "lucide-react";
-import * as React from "react";
-
-import { useIsMobile } from "../../hooks/use-mobile";
-import { cn } from "../../lib/utils";
-
-function Popover({ modal, ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  const isMobile = useIsMobile();
-  return <PopoverPrimitive.Root data-slot="popover" modal={modal ?? isMobile} {...props} />;
-}
-
-function PopoverTrigger({
-  asChild,
-  children,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger> & { asChild?: boolean }) {
-  return (
-    <PopoverPrimitive.Trigger
-      data-slot="popover-trigger"
-      {...(asChild && React.isValidElement(children)
-        ? { render: children as React.ReactElement }
-        : {})}
-      {...props}
-    >
-      {!asChild && children}
-    </PopoverPrimitive.Trigger>
-  );
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  children,
-  side = "bottom",
-  avoidCollisions = true,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Popup> & {
-  align?: "start" | "center" | "end";
-  sideOffset?: number;
-  side?: "top" | "right" | "bottom" | "left";
-  avoidCollisions?: boolean;
-}) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Backdrop className="ui-mobile-sheet-backdrop" />
-      <PopoverPrimitive.Positioner
-        className="ui-mobile-sheet-positioner"
-        align={align}
-        side={side}
-        sideOffset={sideOffset}
-        collisionAvoidance={avoidCollisions ? undefined : { side: "none", align: "none" }}
-      >
-        <PopoverPrimitive.Popup
-          data-slot="popover-content"
-          className={cn(
-            "bg-popover text-popover-foreground 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 relative z-50 w-72 origin-(--transform-origin) rounded-md border p-4 outline-hidden ui-mobile-sheet-popup ui-mobile-popover-popup",
-            className,
-          )}
-          {...props}
-        >
-          {children}
-          <PopoverPrimitive.Close className="ui-mobile-sheet-close">
-            <XIcon aria-hidden="true" />
-            <span className="sr-only">Close</span>
-          </PopoverPrimitive.Close>
-        </PopoverPrimitive.Popup>
-      </PopoverPrimitive.Positioner>
-    </PopoverPrimitive.Portal>
-  );
-}
-
-function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-anchor" {...props} />;
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };