@camox/ui 0.1.1-alpha.0

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,226 @@
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-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({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...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(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </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(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      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 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
+      data-slot="dropdown-menu-shortcut"
+      className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="text-muted-foreground ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/src/components/floating-toolbar.tsx

@@ -0,0 +1,17 @@
+import { cn } from "../lib/utils";
+
+function FloatingToolbar({ className, ...props }: React.ComponentProps<"menu">) {
+  return (
+    <menu
+      role="toolbar"
+      data-slot="floating-toolbar"
+      className={cn(
+        "absolute left-[50%] z-30 flex translate-x-[-50%] items-center rounded-xl border-1 bg-background/95 p-2 shadow-2xl backdrop-blur-lg transition-all duration-200",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { FloatingToolbar };

package/src/components/frame.tsx

@@ -0,0 +1,146 @@
+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>
+  );
+};

package/src/components/input-base.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+
+export type InputBaseContextProps = Pick<InputBaseProps, "autoFocus" | "disabled"> & {
+  controlRef: React.RefObject<HTMLElement | null>;
+  onFocusedChange: (focused: boolean) => void;
+};
+
+const InputBaseContext = React.createContext<InputBaseContextProps>({
+  autoFocus: false,
+  controlRef: { current: null },
+  disabled: false,
+  onFocusedChange: () => {},
+});
+
+function useInputBase() {
+  const context = React.useContext(InputBaseContext);
+  if (!context) {
+    throw new Error("useInputBase must be used within a <InputBase />.");
+  }
+
+  return context;
+}
+
+export interface InputBaseProps extends React.ComponentProps<typeof Primitive.div> {
+  autoFocus?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+}
+
+function InputBase({ autoFocus, disabled, className, onClick, error, ...props }: InputBaseProps) {
+  const [focused, setFocused] = React.useState(false);
+  const controlRef = React.useRef<HTMLElement>(null);
+
+  return (
+    <InputBaseContext.Provider
+      value={{
+        autoFocus,
+        controlRef,
+        disabled,
+        onFocusedChange: setFocused,
+      }}
+    >
+      <Primitive.div
+        data-slot="input-base"
+        // Based on MUI's <InputBase /> implementation.
+        // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/InputBase/InputBase.js#L458~L460
+        onClick={composeEventHandlers(onClick, (event) => {
+          if (controlRef.current && event.currentTarget === event.target) {
+            controlRef.current.focus();
+          }
+        })}
+        className={cn(
+          "border-input selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex min-h-9 cursor-text items-center gap-2 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none md:text-sm",
+          disabled && "pointer-events-none cursor-not-allowed opacity-50",
+          focused && "border-ring ring-ring/50 ring-[3px]",
+          error && "ring-destructive/20 dark:ring-destructive/40 border-destructive",
+          className,
+        )}
+        {...props}
+      />
+    </InputBaseContext.Provider>
+  );
+}
+
+function InputBaseFlexWrapper({ className, ...props }: React.ComponentProps<typeof Primitive.div>) {
+  return (
+    <Primitive.div
+      data-slot="input-base-flex-wrapper"
+      className={cn("flex flex-1 flex-wrap", className)}
+      {...props}
+    />
+  );
+}
+
+function InputBaseControl({ ref, onFocus, onBlur, ...props }: React.ComponentProps<typeof Slot>) {
+  const { controlRef, autoFocus, disabled, onFocusedChange } = useInputBase();
+
+  const composedRefs = useComposedRefs(controlRef, ref);
+
+  return (
+    <Slot
+      data-slot="input-base-control"
+      ref={composedRefs}
+      autoFocus={autoFocus}
+      onFocus={composeEventHandlers(onFocus, () => onFocusedChange(true))}
+      onBlur={composeEventHandlers(onBlur, () => onFocusedChange(false))}
+      {...{ disabled }}
+      {...props}
+    />
+  );
+}
+
+export interface InputBaseAdornmentProps extends React.ComponentProps<"div"> {
+  asChild?: boolean;
+}
+
+function InputBaseAdornment({ className, asChild, children, ...props }: InputBaseAdornmentProps) {
+  let Comp: typeof Slot | "p" | "div";
+  if (asChild) {
+    Comp = Slot;
+  } else if (typeof children === "string") {
+    Comp = "p";
+  } else {
+    Comp = "div";
+  }
+
+  return (
+    <Comp
+      data-slot="input-base-adornment"
+      className={cn(
+        "text-muted-foreground flex items-center [&_svg:not([class*='size-'])]:size-4",
+        "[&:not(:has(button))]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
+
+function InputBaseAdornmentButton({
+  type = "button",
+  variant = "ghost",
+  size = "icon",
+  disabled: disabledProp,
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { disabled } = useInputBase();
+
+  return (
+    <Button
+      data-slot="input-base-adornment-button"
+      type={type}
+      variant={variant}
+      size={size}
+      disabled={disabled || disabledProp}
+      className={cn("size-6", className)}
+      {...props}
+    />
+  );
+}
+
+function InputBaseInput({ className, ...props }: React.ComponentProps<typeof Primitive.input>) {
+  return (
+    <Primitive.input
+      data-slot="input-base-input"
+      className={cn(
+        "placeholder:text-muted-foreground file:text-foreground w-full flex-1 bg-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium focus:outline-none disabled:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function InputBaseTextarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="input-base-textarea"
+      className={cn(
+        "placeholder:text-muted-foreground min-h-16 flex-1 bg-transparent focus:outline-none disabled:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  InputBase,
+  InputBaseFlexWrapper,
+  InputBaseControl,
+  InputBaseAdornment,
+  InputBaseAdornmentButton,
+  InputBaseInput,
+  InputBaseTextarea,
+  useInputBase,
+};

package/src/components/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { INPUT_BASE_STYLES, INPUT_FOCUS_STYLES, cn } from "../lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        INPUT_BASE_STYLES,
+        INPUT_FOCUS_STYLES,
+        "file:text-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 h-9 w-full min-w-0 px-3 py-1 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/components/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from "../lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };

package/src/components/label.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };