@sableui/react 0.1.1 → 0.2.0

package/dist/ios/index.d.ts

@@ -45,7 +45,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';
 
@@ -245,7 +245,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 +276,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.js

@@ -1,4 +1,4 @@
-import { Phone } from '../chunk-RWP4XBSK.js';
+import { Phone } from '../chunk-KFZ43RKU.js';
 import '../chunk-NEQNXI2G.js';
 import '../chunk-SRQWQUTW.js';
 import { useRef, useState, useEffect, useCallback } from 'react';

package/dist/ios/styles.css

@@ -61,17 +61,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); } }