@sableui/react 0.6.2 → 0.7.1

package/dist/ios/chrome.js

@@ -0,0 +1,36 @@
+// src/ios/chrome.tsx
+import { Button, Glass, Navbar, NavbarBackLink, Page, Tabbar, TabbarLink } from "konsta/react";
+import { jsx } from "react/jsx-runtime";
+function IosPage(props) {
+  return /* @__PURE__ */ jsx(Page, { ...props });
+}
+function IosBackLink({ component = "button", ...props }) {
+  return /* @__PURE__ */ jsx(NavbarBackLink, { component, ...props });
+}
+function IosTab({ component = "button", active, ...props }) {
+  return /* @__PURE__ */ jsx(TabbarLink, { component, active, "aria-current": active ? "page" : void 0, ...props });
+}
+function IosNavbar({ titleClassName = "", titleLargeFontSizeIos = "text-[34px]", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Navbar,
+    {
+      ...props,
+      titleClassName: `ios-navigation-title ${titleClassName}`,
+      titleLargeFontSizeIos: `ios-navigation-title ${titleLargeFontSizeIos}`
+    }
+  );
+}
+function IosTabbar({ children, className = "", colors, ...props }) {
+  return /* @__PURE__ */ jsx(Tabbar, { labels: true, icons: true, component: "nav", ...props, className: `native-tabbar ${className}`, colors: { bgIos: "native-tab-scrim", ...colors }, children: /* @__PURE__ */ jsx(Glass, { className: "native-tab-glass", children }) });
+}
+function IosIconButton({ className = "", ...props }) {
+  return /* @__PURE__ */ jsx(Button, { inline: true, rounded: true, clear: true, ...props, className: `ios-icon-action ${className}` });
+}
+export {
+  IosBackLink,
+  IosIconButton,
+  IosNavbar,
+  IosPage,
+  IosTab,
+  IosTabbar
+};

package/dist/ios/index.js

@@ -1,315 +1,19 @@
-import { StatusIcons } from '../chunk-NEQNXI2G.js';
-import { PresentationProvider } from '../chunk-FKZXAFIY.js';
-import { App, Sheet, Button, Glass, Page, NavbarBackLink, TabbarLink, Navbar, Tabbar } from 'konsta/react';
-import { createContext, useEffect, useContext, useState, useRef, useId } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var SVG_NS = "http://www.w3.org/2000/svg";
-function refractionMap(width, height) {
-  const canvas = document.createElement("canvas");
-  canvas.width = Math.ceil(width);
-  canvas.height = Math.ceil(height);
-  const context = canvas.getContext("2d");
-  const pixels = context.createImageData(canvas.width, canvas.height);
-  const radius = Math.min(width, height) / 2;
-  const edge = Math.min(12, radius * 0.45);
-  for (let y = 0; y < canvas.height; y++) for (let x = 0; x < canvas.width; x++) {
-    const dx = x + 0.5 - width / 2, dy = y + 0.5 - height / 2;
-    const qx = Math.abs(dx) - width / 2 + radius;
-    const qy = Math.abs(dy) - height / 2 + radius;
-    const ox = Math.max(qx, 0), oy = Math.max(qy, 0);
-    const length = Math.hypot(ox, oy);
-    const depth = radius - length - Math.min(Math.max(qx, qy), 0);
-    const bend = depth > 0 && depth < edge ? Math.sin(depth / edge * Math.PI) * 0.44 : 0;
-    const nx = length ? Math.sign(dx) * ox / length : 0;
-    const ny = length ? Math.sign(dy) * oy / length : 0;
-    const index = (y * canvas.width + x) * 4;
-    pixels.data[index] = Math.round((0.5 + nx * bend) * 255);
-    pixels.data[index + 1] = Math.round((0.5 + ny * bend) * 255);
-    pixels.data[index + 2] = 128;
-    pixels.data[index + 3] = 255;
-  }
-  context.putImageData(pixels, 0, 0);
-  return canvas.toDataURL();
-}
-function LiquidGlassMaterial() {
-  const svg = useRef(null);
-  const prefix = useId().replace(/[^a-zA-Z0-9_-]/g, "");
-  useEffect(() => {
-    const root = svg.current?.closest(".ios-prototype");
-    const defs = svg.current?.querySelector("defs");
-    if (!root || !defs) return;
-    const filters = /* @__PURE__ */ new Map();
-    let sequence = 0, frame = 0;
-    const pending = /* @__PURE__ */ new Set();
-    const primitive = (name, attributes) => {
-      const element = document.createElementNS(SVG_NS, name);
-      for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
-      return element;
-    };
-    const update = (element) => {
-      const { width, height } = element.getBoundingClientRect();
-      if (!width || !height) return;
-      let filter = filters.get(element);
-      if (!filter) {
-        filter = primitive("filter", { id: `${prefix}-glass-${sequence++}`, x: "0", y: "0", width: "100%", height: "100%", "color-interpolation-filters": "sRGB" });
-        defs.append(filter);
-        filters.set(element, filter);
-      }
-      filter.replaceChildren(
-        primitive("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "softened" }),
-        primitive("feImage", { href: refractionMap(width, height), x: "0", y: "0", width: String(width), height: String(height), preserveAspectRatio: "none", result: "rim" }),
-        primitive("feDisplacementMap", { in: "softened", in2: "rim", scale: "14", xChannelSelector: "R", yChannelSelector: "G" })
-      );
-      element.style.setProperty("--ios-glass-optics", `url("#${filter.id}")`);
-    };
-    const resize = new ResizeObserver((entries) => {
-      for (const entry of entries) pending.add(entry.target);
-      cancelAnimationFrame(frame);
-      frame = requestAnimationFrame(() => {
-        for (const element of pending) update(element);
-        pending.clear();
-      });
-    });
-    const scan = () => {
-      for (const element of root.querySelectorAll(".k-glass")) {
-        if (!filters.has(element)) {
-          resize.observe(element);
-          update(element);
-        }
-      }
-      for (const [element, filter] of filters) if (!root.contains(element)) {
-        resize.unobserve(element);
-        filter.remove();
-        filters.delete(element);
-      }
-    };
-    scan();
-    const mutations = new MutationObserver((records) => {
-      if (records.some((record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof Element && (node.matches(".k-glass") || node.querySelector(".k-glass"))))) scan();
-    });
-    mutations.observe(root, { childList: true, subtree: true });
-    return () => {
-      cancelAnimationFrame(frame);
-      resize.disconnect();
-      mutations.disconnect();
-      for (const [element, filter] of filters) {
-        element.style.removeProperty("--ios-glass-optics");
-        filter.remove();
-      }
-    };
-  }, [prefix]);
-  return /* @__PURE__ */ jsx("svg", { ref: svg, className: "ios-glass-filters", width: "0", height: "0", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("defs", {}) });
-}
-
-// src/ios/theme.ts
-var NAMES = [
-  "--background",
-  "--card",
-  "--foreground",
-  "--muted-foreground",
-  "--primary",
-  "--primary-foreground",
-  "--muted",
-  "--font-sans",
-  "--font-display",
-  "--type-title-weight"
-];
-function iosThemeStyle(tokens) {
-  return Object.fromEntries(NAMES.flatMap((name) => tokens[name] === void 0 ? [] : [[name, tokens[name]]]));
-}
-function NativeApp({
-  children,
-  mode = "light",
-  glassTint = 0.35,
-  reducedMotion = false,
-  className = "",
-  tokens = {},
-  style,
-  systemChrome = true
-}) {
-  const dark = mode === "dark";
-  useEffect(() => {
-    document.documentElement.classList.toggle("dark", dark);
-  }, [dark]);
-  const tint = Math.max(0, Math.min(1, Number.isFinite(glassTint) ? glassTint : 0.35));
-  return /* @__PURE__ */ jsxs(
-    App,
-    {
-      theme: "ios",
-      dark,
-      className: `ios-prototype ${dark ? "dark" : ""} ${systemChrome ? "" : "ios-bare"} ${className}`,
-      "data-reduced-motion": reducedMotion || void 0,
-      style: { ...iosThemeStyle(tokens), "--ios-glass-tint": tint, ...style },
-      children: [
-        /* @__PURE__ */ jsx(LiquidGlassMaterial, {}),
-        systemChrome ? /* @__PURE__ */ jsxs("div", { className: "ios-status-bar", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx("span", { children: "9:41" }),
-          /* @__PURE__ */ jsx("span", { className: "ios-island" }),
-          /* @__PURE__ */ jsx(StatusIcons, { className: "ios-status-icons" })
-        ] }) : null,
-        children,
-        systemChrome ? /* @__PURE__ */ jsx("div", { className: "ios-home-indicator", "aria-hidden": "true" }) : null
-      ]
-    }
-  );
-}
-var Context = createContext(null);
-function useNavigation() {
-  const value = useContext(Context);
-  if (!value) throw new Error("useNavigation needs a NavigationStack");
-  return value;
-}
-function NavigationStack({ children, active = true, label }) {
-  const [entries, setEntries] = useState([]);
-  const [direction, setDirection] = useState("push");
-  const gesture = useRef(null);
-  const host = useRef(null);
-  const focusTarget = useRef(null);
-  const push = (id, content) => {
-    const returnFocus = document.activeElement;
-    setDirection("push");
-    setEntries((previous) => [...previous, { id, content, returnFocus }]);
-  };
-  const pop = () => {
-    setDirection("pop");
-    setEntries((previous) => {
-      focusTarget.current = previous.at(-1)?.returnFocus || null;
-      return previous.slice(0, -1);
-    });
-  };
-  useEffect(() => {
-    if (!active) return;
-    if (direction === "pop" && focusTarget.current?.isConnected) focusTarget.current.focus({ preventScroll: true });
-    else if (entries.length) host.current?.querySelector("[data-ios-route]:last-child h1, [data-ios-route]:last-child [data-ios-title]")?.focus({ preventScroll: true });
-  }, [entries.length, active, direction]);
-  const endGesture = (event) => {
-    const start = gesture.current;
-    gesture.current = null;
-    if (start && entries.length && event.clientX - start.x > 80 && Math.abs(event.clientY - start.y) < 50) pop();
-  };
-  return /* @__PURE__ */ jsx(Context.Provider, { value: { push, pop, depth: entries.length }, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: host,
-      className: "ios-navigation-stack",
-      hidden: !active,
-      "aria-label": label,
-      "data-direction": direction,
-      onPointerDown: (event) => {
-        if (event.clientX < 24 && event.isPrimary) gesture.current = { x: event.clientX, y: event.clientY };
-      },
-      onPointerUp: endGesture,
-      onPointerCancel: () => {
-        gesture.current = null;
-      },
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "ios-route", "data-ios-route": "root", hidden: entries.length > 0, children }),
-        entries.map((entry, index) => /* @__PURE__ */ jsx("div", { className: "ios-route", "data-ios-route": entry.id, hidden: index !== entries.length - 1, children: entry.content }, `${index}:${entry.id}`))
-      ]
-    }
-  ) });
-}
-function IosSheet({ open, onOpenChange, title, children, detent = "medium", background = "glass" }) {
-  const dialog = useRef(null);
-  const titleId = useId();
-  const [shown, setShown] = useState(false);
-  const [expanded, setExpanded] = useState(detent === "large");
-  const startY = useRef(null);
-  const dragged = useRef(false);
-  useEffect(() => {
-    const el = dialog.current;
-    if (!el) return;
-    if (open) {
-      setExpanded(detent === "large");
-      if (!el.open) {
-        el.showModal();
-        el.querySelector("h2")?.focus();
-      }
-      const frame = requestAnimationFrame(() => setShown(true));
-      return () => cancelAnimationFrame(frame);
-    }
-    setShown(false);
-    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches || !!el.closest("[data-reduced-motion]");
-    const timer = setTimeout(() => el.close(), reduced ? 0 : 220);
-    return () => clearTimeout(timer);
-  }, [open, detent]);
-  return /* @__PURE__ */ jsx(
-    "dialog",
-    {
-      ref: dialog,
-      className: "ios-sheet-dialog",
-      "aria-labelledby": titleId,
-      onCancel: (event) => {
-        event.preventDefault();
-        onOpenChange(false);
-      },
-      onClick: (event) => {
-        if (event.target === event.currentTarget) onOpenChange(false);
-      },
-      children: /* @__PURE__ */ jsxs(Sheet, { opened: shown, backdrop: false, className: "ios-sheet", "data-detent": expanded ? "large" : "medium", "data-background": background, style: { height: expanded ? "90%" : "56%" }, children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            clear: true,
-            className: "ios-sheet-grabber",
-            "aria-label": expanded ? "Reduce sheet height" : "Expand sheet",
-            onClick: () => {
-              if (dragged.current) {
-                dragged.current = false;
-                return;
-              }
-              setExpanded((value) => !value);
-            },
-            onPointerDown: (event) => {
-              startY.current = event.clientY;
-              dragged.current = false;
-              event.currentTarget.setPointerCapture(event.pointerId);
-            },
-            onPointerUp: (event) => {
-              if (startY.current === null) return;
-              const distance = event.clientY - startY.current;
-              dragged.current = Math.abs(distance) > 10;
-              startY.current = null;
-              if (distance > 80) onOpenChange(false);
-              else if (distance < -40) setExpanded(true);
-            },
-            children: /* @__PURE__ */ jsx("span", { className: "ios-grabber-mark" })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "ios-sheet-heading", children: [
-          /* @__PURE__ */ jsx(Glass, { className: "ios-sheet-close", children: /* @__PURE__ */ jsx(Button, { inline: true, rounded: true, clear: true, className: "ios-icon-action", "aria-label": "Close", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", width: "16", height: "16", children: /* @__PURE__ */ jsx("path", { d: "M3.5 3.5l9 9m0-9l-9 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none" }) }) }) }),
-          /* @__PURE__ */ jsx("h2", { id: titleId, tabIndex: -1, children: title })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "ios-sheet-content", children: /* @__PURE__ */ jsx(PresentationProvider, { value: "sheet", children }) })
-      ] })
-    }
-  );
-}
-function IosPage(props) {
-  return /* @__PURE__ */ jsx(Page, { ...props });
-}
-function IosBackLink({ component = "button", ...props }) {
-  return /* @__PURE__ */ jsx(NavbarBackLink, { component, ...props });
-}
-function IosTab({ component = "button", active, ...props }) {
-  return /* @__PURE__ */ jsx(TabbarLink, { component, active, "aria-current": active ? "page" : void 0, ...props });
-}
-function IosNavbar({ titleClassName = "", titleLargeFontSizeIos = "text-[34px]", ...props }) {
-  return /* @__PURE__ */ jsx(
-    Navbar,
-    {
-      ...props,
-      titleClassName: `ios-navigation-title ${titleClassName}`,
-      titleLargeFontSizeIos: `ios-navigation-title ${titleLargeFontSizeIos}`
-    }
-  );
-}
-function IosTabbar({ children, className = "", colors, ...props }) {
-  return /* @__PURE__ */ jsx(Tabbar, { labels: true, icons: true, component: "nav", ...props, className: `native-tabbar ${className}`, colors: { bgIos: "native-tab-scrim", ...colors }, children: /* @__PURE__ */ jsx(Glass, { className: "native-tab-glass", children }) });
-}
-function IosIconButton({ className = "", ...props }) {
-  return /* @__PURE__ */ jsx(Button, { inline: true, rounded: true, clear: true, ...props, className: `ios-icon-action ${className}` });
-}
-
-export { IosBackLink, IosIconButton, IosNavbar, IosPage, IosSheet, IosTab, IosTabbar, NativeApp, NavigationStack, iosThemeStyle, useNavigation };
+// src/ios/index.ts
+import { NativeApp } from "./native-app.js";
+import { NavigationStack, useNavigation } from "./navigation.js";
+import { IosSheet } from "./sheet.js";
+import { IosPage, IosNavbar, IosBackLink, IosTabbar, IosTab, IosIconButton } from "./chrome.js";
+import { iosThemeStyle } from "./theme.js";
+export {
+  IosBackLink,
+  IosIconButton,
+  IosNavbar,
+  IosPage,
+  IosSheet,
+  IosTab,
+  IosTabbar,
+  NativeApp,
+  NavigationStack,
+  iosThemeStyle,
+  useNavigation
+};

package/dist/ios/liquid-glass.js

@@ -0,0 +1,103 @@
+// src/ios/liquid-glass.tsx
+import { useEffect, useId, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SVG_NS = "http://www.w3.org/2000/svg";
+function refractionMap(width, height) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.ceil(width);
+  canvas.height = Math.ceil(height);
+  const context = canvas.getContext("2d");
+  const pixels = context.createImageData(canvas.width, canvas.height);
+  const radius = Math.min(width, height) / 2;
+  const edge = Math.min(12, radius * 0.45);
+  for (let y = 0; y < canvas.height; y++) for (let x = 0; x < canvas.width; x++) {
+    const dx = x + 0.5 - width / 2, dy = y + 0.5 - height / 2;
+    const qx = Math.abs(dx) - width / 2 + radius;
+    const qy = Math.abs(dy) - height / 2 + radius;
+    const ox = Math.max(qx, 0), oy = Math.max(qy, 0);
+    const length = Math.hypot(ox, oy);
+    const depth = radius - length - Math.min(Math.max(qx, qy), 0);
+    const bend = depth > 0 && depth < edge ? Math.sin(depth / edge * Math.PI) * 0.44 : 0;
+    const nx = length ? Math.sign(dx) * ox / length : 0;
+    const ny = length ? Math.sign(dy) * oy / length : 0;
+    const index = (y * canvas.width + x) * 4;
+    pixels.data[index] = Math.round((0.5 + nx * bend) * 255);
+    pixels.data[index + 1] = Math.round((0.5 + ny * bend) * 255);
+    pixels.data[index + 2] = 128;
+    pixels.data[index + 3] = 255;
+  }
+  context.putImageData(pixels, 0, 0);
+  return canvas.toDataURL();
+}
+function LiquidGlassMaterial() {
+  const svg = useRef(null);
+  const prefix = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  useEffect(() => {
+    const root = svg.current?.closest(".ios-prototype");
+    const defs = svg.current?.querySelector("defs");
+    if (!root || !defs) return;
+    const filters = /* @__PURE__ */ new Map();
+    let sequence = 0, frame = 0;
+    const pending = /* @__PURE__ */ new Set();
+    const primitive = (name, attributes) => {
+      const element = document.createElementNS(SVG_NS, name);
+      for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
+      return element;
+    };
+    const update = (element) => {
+      const { width, height } = element.getBoundingClientRect();
+      if (!width || !height) return;
+      let filter = filters.get(element);
+      if (!filter) {
+        filter = primitive("filter", { id: `${prefix}-glass-${sequence++}`, x: "0", y: "0", width: "100%", height: "100%", "color-interpolation-filters": "sRGB" });
+        defs.append(filter);
+        filters.set(element, filter);
+      }
+      filter.replaceChildren(
+        primitive("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "softened" }),
+        primitive("feImage", { href: refractionMap(width, height), x: "0", y: "0", width: String(width), height: String(height), preserveAspectRatio: "none", result: "rim" }),
+        primitive("feDisplacementMap", { in: "softened", in2: "rim", scale: "14", xChannelSelector: "R", yChannelSelector: "G" })
+      );
+      element.style.setProperty("--ios-glass-optics", `url("#${filter.id}")`);
+    };
+    const resize = new ResizeObserver((entries) => {
+      for (const entry of entries) pending.add(entry.target);
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        for (const element of pending) update(element);
+        pending.clear();
+      });
+    });
+    const scan = () => {
+      for (const element of root.querySelectorAll(".k-glass")) {
+        if (!filters.has(element)) {
+          resize.observe(element);
+          update(element);
+        }
+      }
+      for (const [element, filter] of filters) if (!root.contains(element)) {
+        resize.unobserve(element);
+        filter.remove();
+        filters.delete(element);
+      }
+    };
+    scan();
+    const mutations = new MutationObserver((records) => {
+      if (records.some((record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof Element && (node.matches(".k-glass") || node.querySelector(".k-glass"))))) scan();
+    });
+    mutations.observe(root, { childList: true, subtree: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      mutations.disconnect();
+      for (const [element, filter] of filters) {
+        element.style.removeProperty("--ios-glass-optics");
+        filter.remove();
+      }
+    };
+  }, [prefix]);
+  return /* @__PURE__ */ jsx("svg", { ref: svg, className: "ios-glass-filters", width: "0", height: "0", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("defs", {}) });
+}
+export {
+  LiquidGlassMaterial
+};

package/dist/ios/native-app.js

@@ -0,0 +1,46 @@
+// src/ios/native-app.tsx
+import { App } from "konsta/react";
+import { useEffect } from "react";
+import { StatusIcons } from "../components/phone/status-icons.js";
+import { LiquidGlassMaterial } from "./liquid-glass.js";
+import { iosThemeStyle } from "./theme.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NativeApp({
+  children,
+  mode = "light",
+  glassTint = 0.35,
+  reducedMotion = false,
+  className = "",
+  tokens = {},
+  style,
+  systemChrome = true
+}) {
+  const dark = mode === "dark";
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+  }, [dark]);
+  const tint = Math.max(0, Math.min(1, Number.isFinite(glassTint) ? glassTint : 0.35));
+  return /* @__PURE__ */ jsxs(
+    App,
+    {
+      theme: "ios",
+      dark,
+      className: `ios-prototype ${dark ? "dark" : ""} ${systemChrome ? "" : "ios-bare"} ${className}`,
+      "data-reduced-motion": reducedMotion || void 0,
+      style: { ...iosThemeStyle(tokens), "--ios-glass-tint": tint, ...style },
+      children: [
+        /* @__PURE__ */ jsx(LiquidGlassMaterial, {}),
+        systemChrome ? /* @__PURE__ */ jsxs("div", { className: "ios-status-bar", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { children: "9:41" }),
+          /* @__PURE__ */ jsx("span", { className: "ios-island" }),
+          /* @__PURE__ */ jsx(StatusIcons, { className: "ios-status-icons" })
+        ] }) : null,
+        children,
+        systemChrome ? /* @__PURE__ */ jsx("div", { className: "ios-home-indicator", "aria-hidden": "true" }) : null
+      ]
+    }
+  );
+}
+export {
+  NativeApp
+};

package/dist/ios/navigation.js

@@ -0,0 +1,63 @@
+// src/ios/navigation.tsx
+import { createContext, useContext, useRef, useState, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Context = createContext(null);
+function useNavigation() {
+  const value = useContext(Context);
+  if (!value) throw new Error("useNavigation needs a NavigationStack");
+  return value;
+}
+function NavigationStack({ children, active = true, label }) {
+  const [entries, setEntries] = useState([]);
+  const [direction, setDirection] = useState("push");
+  const gesture = useRef(null);
+  const host = useRef(null);
+  const focusTarget = useRef(null);
+  const push = (id, content) => {
+    const returnFocus = document.activeElement;
+    setDirection("push");
+    setEntries((previous) => [...previous, { id, content, returnFocus }]);
+  };
+  const pop = () => {
+    setDirection("pop");
+    setEntries((previous) => {
+      focusTarget.current = previous.at(-1)?.returnFocus || null;
+      return previous.slice(0, -1);
+    });
+  };
+  useEffect(() => {
+    if (!active) return;
+    if (direction === "pop" && focusTarget.current?.isConnected) focusTarget.current.focus({ preventScroll: true });
+    else if (entries.length) host.current?.querySelector("[data-ios-route]:last-child h1, [data-ios-route]:last-child [data-ios-title]")?.focus({ preventScroll: true });
+  }, [entries.length, active, direction]);
+  const endGesture = (event) => {
+    const start = gesture.current;
+    gesture.current = null;
+    if (start && entries.length && event.clientX - start.x > 80 && Math.abs(event.clientY - start.y) < 50) pop();
+  };
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { push, pop, depth: entries.length }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: host,
+      className: "ios-navigation-stack",
+      hidden: !active,
+      "aria-label": label,
+      "data-direction": direction,
+      onPointerDown: (event) => {
+        if (event.clientX < 24 && event.isPrimary) gesture.current = { x: event.clientX, y: event.clientY };
+      },
+      onPointerUp: endGesture,
+      onPointerCancel: () => {
+        gesture.current = null;
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ios-route", "data-ios-route": "root", hidden: entries.length > 0, children }),
+        entries.map((entry, index) => /* @__PURE__ */ jsx("div", { className: "ios-route", "data-ios-route": entry.id, hidden: index !== entries.length - 1, children: entry.content }, `${index}:${entry.id}`))
+      ]
+    }
+  ) });
+}
+export {
+  NavigationStack,
+  useNavigation
+};

package/dist/ios/phone-frame.js

@@ -0,0 +1,64 @@
+// src/ios/phone-frame.tsx
+import { useEffect, useRef, useState } from "react";
+import { Phone } from "../components/phone/index.js";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var phoneSizes = {
+  compact: { width: 375, height: 812 },
+  /** A current 6.3" iPhone Pro. */
+  standard: { width: 402, height: 874 },
+  /** A current 6.9" iPhone Pro Max. */
+  large: { width: 440, height: 956 }
+};
+function PhoneFrame({
+  src,
+  title = "iPhone prototype",
+  size = "standard",
+  fit = "width",
+  className,
+  frameRef,
+  onLoad
+}) {
+  const host = useRef(null);
+  const device = useRef(null);
+  const [box, setBox] = useState({ scale: 1, width: 0, height: 0, offset: 0 });
+  const { width, height } = phoneSizes[size];
+  useEffect(() => {
+    const hostEl = host.current;
+    const deviceEl = device.current;
+    if (!hostEl || !deviceEl) return;
+    const measure = () => {
+      const natural = { width: deviceEl.offsetWidth, height: deviceEl.offsetHeight };
+      if (!natural.width) return setBox({ scale: 1, ...natural, offset: 0 });
+      const byHeight = fit === "contain" && hostEl.clientHeight ? hostEl.clientHeight / natural.height : 1;
+      const scale = Math.min(1, hostEl.clientWidth / natural.width, byHeight);
+      const offset = fit === "contain" ? Math.max(0, (hostEl.clientWidth - natural.width * scale) / 2) : 0;
+      setBox({ scale, ...natural, offset });
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(hostEl);
+    observer.observe(deviceEl);
+    return () => observer.disconnect();
+  }, [fit]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: host,
+      className: cn("ios-preview-host", className),
+      style: fit === "contain" ? void 0 : { maxWidth: box.width || void 0, height: box.height ? box.height * box.scale : height },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: device,
+          className: "ios-phone-frame",
+          style: { width: width / 0.926, insetInlineStart: box.offset, transform: `scale(${box.scale})` },
+          children: /* @__PURE__ */ jsx(Phone, { statusBar: false, systemChrome: false, className: "w-full", children: /* @__PURE__ */ jsx("iframe", { ref: frameRef, onLoad, src, title, className: "ios-phone-screen" }) })
+        }
+      )
+    }
+  );
+}
+export {
+  PhoneFrame,
+  phoneSizes
+};