@camox/ui 0.6.1 → 0.7.0

package/src/components/switch.tsx

@@ -1,23 +1,27 @@
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import * as React from "react";
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
 
 import { cn } from "../lib/utils";
 
-function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default";
+}) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
+      data-size={size}
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
-        )}
+        className="bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
       />
     </SwitchPrimitive.Root>
   );

package/src/components/tabs.tsx

@@ -1,37 +1,58 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../lib/utils";
 
-function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
+function Tabs({ className, orientation = "horizontal", ...props }: TabsPrimitive.Root.Props) {
   return (
     <TabsPrimitive.Root
       data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
+      data-orientation={orientation}
+      className={cn("group/tabs flex gap-2 data-horizontal:flex-col", className)}
       {...props}
     />
   );
 }
 
-function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className,
-      )}
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
   );
 }
 
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
   return (
-    <TabsPrimitive.Trigger
+    <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className,
       )}
       {...props}
@@ -39,14 +60,14 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
   );
 }
 
-function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
   return (
-    <TabsPrimitive.Content
+    <TabsPrimitive.Panel
       data-slot="tabs-content"
-      className={cn("flex-1 outline-none", className)}
+      className={cn("flex-1 text-sm outline-none", className)}
       {...props}
     />
   );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/src/components/textarea.tsx

@@ -1,15 +1,13 @@
 import * as React from "react";
 
-import { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, cn } from "../lib/utils";
+import { cn } from "../lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
       data-slot="textarea"
       className={cn(
-        INPUT_BASE_STYLES,
-        INPUT_FOCUS_STYLES,
-        "dark:bg-input/30 flex field-sizing-content min-h-16 w-full px-3 py-2",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}

package/src/components/toggle.tsx

@@ -1,23 +1,21 @@
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-import * as React from "react";
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent/50 hover:text-accent-foreground",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-muted",
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
+        default:
+          "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        sm: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 min-w-10 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
       },
     },
     defaultVariants: {
@@ -29,12 +27,12 @@ const toggleVariants = cva(
 
 function Toggle({
   className,
-  variant,
-  size,
+  variant = "default",
+  size = "default",
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
   return (
-    <TogglePrimitive.Root
+    <TogglePrimitive
       data-slot="toggle"
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}

package/src/components/tooltip.tsx

@@ -1,53 +1,50 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
 
 import { cn } from "../lib/utils";
 
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  );
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
 }
 
-function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
-function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
 function TooltipContent({
   className,
-  sideOffset = 0,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
   children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        data-slot="tooltip-content"
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
         sideOffset={sideOffset}
-        className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-          className,
-        )}
-        {...props}
+        className="isolate z-50"
       >
-        {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
   );
 }

package/src/styles/globals.css

@@ -42,7 +42,7 @@
   --foreground: theme(--color-zinc-50);
   --card: theme(--color-zinc-900);
   --card-foreground: theme(--color-zinc-50);
-  --popover: theme(--color-zinc-900);
+  --popover: oklch(17.5% 0.0055 285.85);
   --popover-foreground: theme(--color-zinc-50);
   --primary: theme(--color-emerald-600);
   --primary-foreground: theme(--color-emerald-50);

package/src/components/accordion.tsx

@@ -1,58 +0,0 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import * as React from "react";
-
-import { cn } from "../lib/utils";
-
-function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  );
-}
-
-interface AccordionTriggerProps extends React.ComponentProps<typeof AccordionPrimitive.Trigger> {}
-
-function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  );
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/checkbox.tsx

@@ -1,27 +0,0 @@
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "lucide-react";
-import * as React from "react";
-
-import { cn } from "../lib/utils";
-
-function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };

package/src/components/control-group.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import { Primitive } from "@radix-ui/react-primitive";
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
-
-import { cn } from "../lib/utils";
-
-const ControlGroupContext = React.createContext<Pick<ControlGroupProps, "orientation">>({
-  orientation: "horizontal",
-});
-
-function useControlGroup() {
-  const context = React.useContext(ControlGroupContext);
-  if (!context) {
-    throw new Error("useControlGroup must be used within a <ControlGroup />.");
-  }
-
-  return context;
-}
-
-export interface ControlGroupProps extends React.ComponentProps<typeof Primitive.div> {
-  orientation?: "horizontal" | "vertical";
-}
-
-function ControlGroup({ className, orientation = "horizontal", ...props }: ControlGroupProps) {
-  return (
-    <ControlGroupContext.Provider value={{ orientation }}>
-      <Primitive.div
-        data-slot="control-group"
-        data-orientation={orientation}
-        className={cn("flex", orientation === "vertical" && "flex-col", className)}
-        {...props}
-      />
-    </ControlGroupContext.Provider>
-  );
-}
-
-function ControlGroupItem({ className, ...props }: React.ComponentProps<typeof Slot>) {
-  const { orientation } = useControlGroup();
-
-  return (
-    <Slot
-      data-slot="control-group-item"
-      className={cn(
-        "rounded-none focus-within:z-10",
-        orientation === "horizontal" &&
-          "-me-px h-auto first:rounded-s-md last:-me-0 last:rounded-e-md",
-        orientation === "vertical" &&
-          "w-auto [margin-block-end:-1px] first:rounded-ss-md first:rounded-se-md last:rounded-ee-md last:rounded-es-md last:[margin-block-end:0]",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export { ControlGroup, ControlGroupItem };

package/src/components/frame.tsx

@@ -1,146 +0,0 @@
-import * as React from "react";
-import { createPortal } from "react-dom";
-
-import { cn } from "../lib/utils";
-
-interface FrameContextValue {
-  window: Window | null;
-  iframeElement: HTMLIFrameElement | null;
-}
-
-const FrameContext = React.createContext<FrameContextValue>({
-  window: null,
-  iframeElement: null,
-});
-
-export function useFrame() {
-  const context = React.use(FrameContext);
-  if (!context) {
-    throw new Error("useFrame must be used within a Frame");
-  }
-  return context;
-}
-
-interface FrameProps {
-  children: React.ReactNode;
-  /** Optional className for the iframe element */
-  className?: string;
-  /** Optional inline styles for the iframe element */
-  style?: React.CSSProperties;
-  /** Whether to copy parent document styles into the iframe (default: true) */
-  copyStyles?: boolean;
-  /** Callback when iframe is ready, receives the iframe element */
-  onIframeReady?: (iframe: HTMLIFrameElement) => void;
-}
-
-export const Frame = ({
-  children,
-  className,
-  style,
-  copyStyles = true,
-  onIframeReady,
-}: FrameProps) => {
-  const iframeRef = React.useRef<HTMLIFrameElement>(null);
-  const [iframeWindow, setIframeWindow] = React.useState<Window | null>(null);
-  const [iframeElement, setIframeElement] = React.useState<HTMLIFrameElement | null>(null);
-  const [mountNode, setMountNode] = React.useState<HTMLElement | null>(null);
-  const [hasRadixPopper, setHasRadixPopper] = React.useState(false);
-
-  React.useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    const handleLoad = () => {
-      const iframeDoc = iframe.contentDocument;
-      const iframeWin = iframe.contentWindow;
-
-      if (!iframeDoc || !iframeWin) return;
-
-      // Set up basic document structure
-      iframeDoc.open();
-      iframeDoc.write(
-        "<!DOCTYPE html><html><head></head><body style='background: transparent;'></body></html>",
-      );
-      iframeDoc.close();
-
-      // Navigate the top-level window when a native <a> is clicked inside the
-      // iframe. Links managed by a client-side router (e.g. TanStack Router's
-      // <Link>) call e.preventDefault() themselves, so we skip those.
-      // We listen on `iframeWin` (not `iframeDoc`) so that this handler fires
-      // AFTER React's event delegation (which is on the document/body), giving
-      // React a chance to call preventDefault() first.
-      iframeWin.addEventListener("click", (e) => {
-        if (e.defaultPrevented) return;
-        const anchor = (e.target as Element).closest("a");
-        if (!anchor?.href) return;
-        if (anchor.target === "_blank") return;
-        e.preventDefault();
-        window.top?.location.assign(anchor.href);
-      });
-
-      // Copy styles from parent document if requested
-      if (copyStyles) {
-        const headStyles = Array.from(
-          document.head.querySelectorAll('style, link[rel="stylesheet"]'),
-        );
-        headStyles.forEach((style) => {
-          const clonedStyle = style.cloneNode(true);
-          iframeDoc.head.appendChild(clonedStyle);
-        });
-      }
-
-      // Set the mount node to the iframe's body
-      setMountNode(iframeDoc.body);
-      setIframeWindow(iframeWin);
-      setIframeElement(iframe);
-      onIframeReady?.(iframe);
-    };
-
-    // Add load event listener
-    iframe.addEventListener("load", handleLoad);
-
-    // Trigger load if iframe is already loaded
-    if (iframe.contentDocument?.readyState === "complete") {
-      handleLoad();
-    }
-
-    return () => {
-      iframe.removeEventListener("load", handleLoad);
-    };
-  }, [copyStyles, onIframeReady]);
-
-  // Monitor for Radix popper content wrapper in body
-  React.useEffect(() => {
-    const checkForRadixPopper = () => {
-      const hasPopper =
-        document.body.querySelector(":scope > [data-radix-popper-content-wrapper]") !== null;
-      setHasRadixPopper(hasPopper);
-    };
-
-    // Initial check
-    checkForRadixPopper();
-
-    // Set up MutationObserver to watch for changes
-    const observer = new MutationObserver(checkForRadixPopper);
-    observer.observe(document.body, {
-      childList: true,
-      subtree: false, // Only watch direct children of body
-    });
-
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  return (
-    <div className={cn("relative w-full h-full", className)} style={style}>
-      {/* Display an overlay to properly close close Radix portals (modals, popovers...) */}
-      {/* because otherwise Radix wouldn't detect pointer events that would happen on the iframe */}
-      {hasRadixPopper && <div className="absolute top-0 left-0 h-full w-full" />}
-      <FrameContext.Provider value={{ window: iframeWindow, iframeElement }}>
-        <iframe ref={iframeRef} className={cn("w-full h-full")} />
-        {mountNode && createPortal(children, mountNode)}
-      </FrameContext.Provider>
-    </div>
-  );
-};