@sableui/react 0.1.1 → 0.3.0

package/dist/ios/index.d.ts

@@ -21,8 +21,13 @@ declare function iosThemeStyle(tokens: IosBrandTokens): CSSProperties;
  * the chrome and any Sable content then follow the preset together. `tokens`
  * overrides individual semantic values. `mode` also sets `dark` on <html>, so
  * Sable popups portaled to <body> follow the prototype's appearance.
+ *
+ * `systemChrome={false}` is for a prototype shown on a real phone, without
+ * PhoneFrame: the device already draws its own status bar and home indicator,
+ * so the fake ones go, and the safe areas come from the device
+ * (`env(safe-area-inset-*)`) instead of the standard phone's fixed geometry.
  */
-declare function NativeApp({ children, mode, glassTint, reducedMotion, className, tokens, style, }: {
+declare function NativeApp({ children, mode, glassTint, reducedMotion, className, tokens, style, systemChrome, }: {
     children: ReactNode;
     mode?: "light" | "dark";
     glassTint?: number;
@@ -30,6 +35,8 @@ declare function NativeApp({ children, mode, glassTint, reducedMotion, className
     className?: string;
     tokens?: IosBrandTokens;
     style?: CSSProperties;
+    /** Draw the status bar, island and home indicator. Turn off on a real phone. @default true */
+    systemChrome?: boolean;
 }): react.JSX.Element;
 
 type Navigation = {
@@ -45,7 +52,12 @@ declare function NavigationStack({ children, active, label }: {
     label: string;
 }): react.JSX.Element;
 
-/** Browser dialog owns focus trapping, Escape, inert background, and restoration. */
+/**
+ * An iOS 26 sheet. At the medium detent it floats inset from the screen edges in
+ * Liquid Glass; at the large detent it is opaque and meets the bottom edge. The
+ * header is a glass close button and a centered inline title.
+ * Browser dialog owns focus trapping, Escape, inert background, and restoration.
+ */
 declare function IosSheet({ open, onOpenChange, title, children, detent }: {
     open: boolean;
     onOpenChange: (open: boolean) => void;

package/dist/ios/index.js

@@ -1,5 +1,5 @@
 import { StatusIcons } from '../chunk-NEQNXI2G.js';
-import { App, Sheet, Button, Page, NavbarBackLink, TabbarLink, Navbar, Tabbar, Glass } from 'konsta/react';
+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';
 
@@ -124,7 +124,8 @@ function NativeApp({
   reducedMotion = false,
   className = "",
   tokens = {},
-  style
+  style,
+  systemChrome = true
 }) {
   const dark = mode === "dark";
   useEffect(() => {
@@ -136,18 +137,18 @@ function NativeApp({
     {
       theme: "ios",
       dark,
-      className: `ios-prototype ${dark ? "dark" : ""} ${className}`,
+      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, {}),
-        /* @__PURE__ */ jsxs("div", { className: "ios-status-bar", "aria-hidden": "true", children: [
+        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,
-        /* @__PURE__ */ jsx("div", { className: "ios-home-indicator", "aria-hidden": "true" })
+        systemChrome ? /* @__PURE__ */ jsx("div", { className: "ios-home-indicator", "aria-hidden": "true" }) : null
       ]
     }
   );
@@ -245,7 +246,7 @@ function IosSheet({ open, onOpenChange, title, children, detent = "medium" }) {
       onClick: (event) => {
         if (event.target === event.currentTarget) onOpenChange(false);
       },
-      children: /* @__PURE__ */ jsxs(Sheet, { opened: shown, backdrop: false, className: "ios-sheet", style: { height: expanded ? "90%" : "56%" }, children: [
+      children: /* @__PURE__ */ jsxs(Sheet, { opened: shown, backdrop: false, className: "ios-sheet", "data-detent": expanded ? "large" : "medium", style: { height: expanded ? "90%" : "56%" }, children: [
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -276,8 +277,8 @@ function IosSheet({ open, onOpenChange, title, children, detent = "medium" }) {
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "ios-sheet-heading", children: [
-          /* @__PURE__ */ jsx("h2", { id: titleId, tabIndex: -1, children: title }),
-          /* @__PURE__ */ jsx(Button, { clear: true, onClick: () => onOpenChange(false), children: "Cancel" })
+          /* @__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 })
       ] })

package/dist/ios/preview.d.ts

@@ -26,11 +26,21 @@ declare const phoneSizes: {
  * scaled, never the viewport, so the prototype lays out as it would on a phone.
  * The document draws its own status bar, island and home indicator, so the
  * frame draws neither.
+ *
+ * `fit="width"` (the default) scales the device to its host's width and sizes
+ * the host to match. `fit="contain"` scales it to fit BOTH of the host's
+ * dimensions and centres it, so the whole device stays in view: give the host
+ * a height through `className` (a viewport-relative one keeps the phone on
+ * screen beside other controls).
  */
-declare function PhoneFrame({ src, title, size, frameRef, onLoad, }: {
+declare function PhoneFrame({ src, title, size, fit, className, frameRef, onLoad, }: {
     src: string;
     title?: string;
     size?: keyof typeof phoneSizes;
+    /** "width" fills the host's width; "contain" fits the host's width and height. @default "width" */
+    fit?: "width" | "contain";
+    /** Classes for the host box. With fit="contain", this is where its height comes from. */
+    className?: string;
     frameRef?: Ref<HTMLIFrameElement>;
     onLoad?: ReactEventHandler<HTMLIFrameElement>;
 }): react.JSX.Element;

package/dist/ios/preview.js

@@ -1,6 +1,6 @@
-import { Phone } from '../chunk-RWP4XBSK.js';
+import { Phone } from '../chunk-KFZ43RKU.js';
 import '../chunk-NEQNXI2G.js';
-import '../chunk-SRQWQUTW.js';
+import { cn } from '../chunk-SRQWQUTW.js';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -15,12 +15,14 @@ function PhoneFrame({
   src,
   title = "iPhone prototype",
   size = "standard",
+  fit = "width",
+  className,
   frameRef,
   onLoad
 }) {
   const host = useRef(null);
   const device = useRef(null);
-  const [fit, setFit] = useState({ scale: 1, width: 0, height: 0 });
+  const [box, setBox] = useState({ scale: 1, width: 0, height: 0, offset: 0 });
   const { width, height } = phoneSizes[size];
   useEffect(() => {
     const hostEl = host.current;
@@ -28,26 +30,29 @@ function PhoneFrame({
     if (!hostEl || !deviceEl) return;
     const measure = () => {
       const natural = { width: deviceEl.offsetWidth, height: deviceEl.offsetHeight };
-      const scale = natural.width ? Math.min(1, hostEl.clientWidth / natural.width) : 1;
-      setFit({ scale, ...natural });
+      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: "ios-preview-host",
-      style: { maxWidth: fit.width || void 0, height: fit.height ? fit.height * fit.scale : height },
+      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, transform: `scale(${fit.scale})` },
+          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" }) })
         }
       )

package/dist/ios/styles.css

@@ -24,6 +24,12 @@
   --ios-motion: 300ms; --ios-safe-top: 62px; --ios-header-height: 154px; --ios-tabbar-bottom: 28px; --ios-content-bottom: 110px;
   font-family: var(--font-sans, system-ui, sans-serif); color: var(--ios-ink); background: var(--ios-canvas); height: 100dvh; overflow: hidden;
 }
+/* On a real phone (NativeApp systemChrome={false}): the device's own insets, the
+   same chrome heights above and below them. */
+.ios-prototype.ios-bare {
+  --ios-safe-top: env(safe-area-inset-top, 0px); --ios-header-height: calc(92px + var(--ios-safe-top));
+  --ios-tabbar-bottom: max(12px, env(safe-area-inset-bottom, 0px)); --ios-content-bottom: calc(82px + var(--ios-tabbar-bottom));
+}
 .ios-prototype.dark {
   --ios-canvas: var(--background, #000); --ios-ink: var(--foreground, #f2f2f7); --ios-secondary: var(--muted-foreground, #aeaeb2);
   --ios-panel: var(--card, #1c1c1e); --ios-primary-ink: var(--primary-foreground, #fff);
@@ -61,17 +67,31 @@
 .ios-prototype .native-tabbar > .k-glass { width: 100%; }
 .ios-sheet-dialog { position: fixed; inset: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: transparent; color: var(--ios-ink); overflow: hidden; }
 .ios-sheet-dialog::backdrop { background: #0005; }
-.ios-sheet { border-radius: 32px 32px 0 0; background: var(--ios-canvas); transition-duration: var(--ios-motion); padding-bottom: 34px; }
+/* iOS 26 sheets. Large: opaque, attached to the bottom edge. Medium: floats 8px in from
+   the edges, concentric with the screen corners, in the same glass as the bars. */
+.ios-sheet { border-radius: 38px 38px 0 0; background: var(--ios-canvas); transition-duration: var(--ios-motion); padding-bottom: 34px; }
+.ios-sheet[data-detent='medium'] {
+  /* Concentric: the top with the close button (its 22px radius + 16px inset), the
+     bottom with the 62px screen corner, less the 8px float. */
+  left: 8px; right: 8px; top: calc(100% - 8px); border-radius: 38px 38px 54px 54px; padding-bottom: 26px;
+  background: color-mix(in srgb, var(--ios-canvas) calc(max(var(--ios-glass-tint, .7), .7) * 100%), transparent);
+  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
+  box-shadow: inset 0 .75px .5px rgb(255 255 255 / .6), 0 8px 40px color-mix(in srgb, var(--ios-ink) 14%, transparent);
+}
+.ios-prototype.dark .ios-sheet[data-detent='medium'], .dark .ios-sheet[data-detent='medium'] { box-shadow: inset 0 .75px .5px rgb(255 255 255 / .25), 0 8px 40px rgb(0 0 0 / .4); }
 .ios-sheet-grabber { display: flex; margin-inline: auto; width: 80px; touch-action: none; }
 .ios-grabber-mark { width: 36px; height: 5px; border-radius: 4px; background: var(--ios-secondary); }
-.ios-sheet-heading { display: flex; align-items: center; justify-content: space-between; padding-inline: 20px; }
-.ios-sheet-heading h2 { font-size: 22px; font-weight: 700; }
-.ios-sheet-heading > button { width: auto; flex-shrink: 0; }
-.ios-sheet::after { content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 4px; background: var(--ios-ink); }
+/* A glass close button, a centered inline title, and an empty column that keeps it centered. */
+.ios-sheet-heading { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding-inline: 16px; }
+.ios-sheet-heading h2 { grid-column: 2; text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ios-sheet-close { grid-column: 1; grid-row: 1; border-radius: 9999px; color: var(--ios-ink); }
+/* Glass on glass: the sheet already blurs what's behind, and refracting the sheet's own
+   flat surface only smears pale patches into the rim. Keep the fill and highlights. */
+.ios-prototype .ios-sheet .k-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
 .ios-sheet-content { height: calc(100% - 88px); overflow-y: auto; scrollbar-width: none; padding: 16px 20px; }
 .ios-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 @keyframes ios-route-enter { from { opacity: .7; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
 @keyframes ios-route-back { from { opacity: .7; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
 .ios-prototype[data-reduced-motion] *, .ios-prototype[data-reduced-motion] *::before, .ios-prototype[data-reduced-motion] *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
 @media (prefers-reduced-motion: reduce) { .ios-prototype *, .ios-prototype *::before, .ios-prototype *::after { animation-duration: 0s !important; transition-duration: 0s !important; } }
-@media (prefers-reduced-transparency: reduce) { .ios-prototype { --ios-glass-tint: 1 !important; } }
+@media (prefers-reduced-transparency: reduce) { .ios-prototype { --ios-glass-tint: 1 !important; } .ios-sheet[data-detent='medium'] { background: var(--ios-canvas); } }

package/dist/{meta-6dUzgC6M.d.ts → meta-CcE_SeFu.d.ts}

@@ -140,6 +140,42 @@ interface PatternMeta {
     /** Accessibility notes. */
     a11y?: string[];
 }
+/**
+ * A block: a section-sized composition of components with sample content —
+ * smaller than a page shell, with no behaviour of its own to upgrade. Ships
+ * the way patterns do (copy-in source + importable preview). Its props are
+ * the block contract only — `className`, `framed` on Card-built blocks, and
+ * the primary action's callback — never content; content is the constant at
+ * the top of the source, edited after copying.
+ */
+interface BlockMeta {
+    /** Block name, e.g. "SignInBlock". Always ends in "Block". */
+    name: string;
+    /** One-line summary. */
+    summary: string;
+    /** When to reach for this block — and when a component or page shell fits better. */
+    intent: string;
+    /**
+     * "card" — one self-contained object that fills its container up to a
+     * designed width. "section" — a full-width band of a page.
+     */
+    kind: "card" | "section";
+    /**
+     * The width range it is designed for, as CSS lengths. The block renders
+     * `w-full` capped at `max`; `min` is the narrowest it still holds together
+     * (a grid's `minItemWidth`). Section blocks omit it.
+     */
+    width?: {
+        min: string;
+        max: string;
+    };
+    /** Groups related blocks in the catalog ("Auth", "Commerce", …). */
+    family: string;
+    /** Canonical decisions the block encodes. */
+    notes?: string[];
+    /** Accessibility notes. */
+    a11y?: string[];
+}
 interface ComponentMeta {
     /** Public component name, e.g. "Button". Must be an actual export. */
     name: string;
@@ -202,4 +238,4 @@ interface ComponentMeta {
     examples: ExampleMeta[];
 }
 
-export type { AnatomyMeta as A, BestPracticeMeta as B, ComponentMeta as C, ExampleMeta as E, MotionMeta as M, PatternMeta as P, RelatedMeta as R, SubcomponentMeta as S, UsageMeta as U, MotionSlot as a, PropMeta as b };
+export type { AnatomyMeta as A, BlockMeta as B, ComponentMeta as C, ExampleMeta as E, MotionMeta as M, PatternMeta as P, RelatedMeta as R, SubcomponentMeta as S, UsageMeta as U, BestPracticeMeta as a, MotionSlot as b, PropMeta as c };

package/dist/patterns/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { P as PatternMeta } from '../meta-6dUzgC6M.js';
+import { P as PatternMeta } from '../meta-CcE_SeFu.js';
 
 declare function AuthPage(): react.JSX.Element;