@techzyapp/ui-library 1.0.25 → 1.0.28

package/dist/components/ErrorState/QueryError.d.cts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type ErrorStateProps } from './ErrorState';
+export interface QueryErrorProps extends ErrorStateProps {
+    /** The query's error (`query.error`). `null` / `undefined` → renders nothing. */
+    error: unknown;
+    /**
+     * The user-facing sentence ("Could not load players."). Shown instead of the raw message, which then
+     * only appears in the (dev) details panel. Same as `description`, which wins when both are set.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * The react-query-style one-liner: `<QueryError error={users.error} onRetry={users.refetch}
+ * fallback="Could not load players." />`. Renders nothing while `error` is empty, otherwise an
+ * `ErrorState` — **compact by default** (it usually sits where the data would, inside a card or table
+ * area; pass `compact={false}` for the hero). Everything else passes through to `ErrorState`.
+ */
+export declare const QueryError: import("react").ForwardRefExoticComponent<QueryErrorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ErrorState/QueryError.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import { type ErrorStateProps } from './ErrorState';
+export interface QueryErrorProps extends ErrorStateProps {
+    /** The query's error (`query.error`). `null` / `undefined` → renders nothing. */
+    error: unknown;
+    /**
+     * The user-facing sentence ("Could not load players."). Shown instead of the raw message, which then
+     * only appears in the (dev) details panel. Same as `description`, which wins when both are set.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * The react-query-style one-liner: `<QueryError error={users.error} onRetry={users.refetch}
+ * fallback="Could not load players." />`. Renders nothing while `error` is empty, otherwise an
+ * `ErrorState` — **compact by default** (it usually sits where the data would, inside a card or table
+ * area; pass `compact={false}` for the hero). Everything else passes through to `ErrorState`.
+ */
+export declare const QueryError: import("react").ForwardRefExoticComponent<QueryErrorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ErrorState/errorMessage.d.cts

@@ -0,0 +1,14 @@
+/**
+ * Pull a human-readable message out of whatever was thrown / returned — the shapes admin apps actually see:
+ *
+ * 1. an axios-style error with a server body — `error.response.data.message` (the backend's own sentence)
+ * 2. an `Error` (or anything with a string `message`) — `error.message`
+ * 3. a raw HTTP response / status object — `{ status: 404, statusText }` → `"Request failed (404)"`
+ * 4. a plain string
+ *
+ * Returns `undefined` when nothing usable is found (the caller shows its generic fallback). Pure — pass
+ * `requestFailed` to localize case 3 (`{status}` is interpolated).
+ */
+export declare function getErrorMessage(error: unknown, requestFailed?: (status: number) => string): string | undefined;
+/** A stack / detail dump for the developer-facing details panel (Error → `name: message` + stack). */
+export declare function getErrorDetails(error: unknown): string | undefined;

package/dist/components/ErrorState/errorMessage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Pull a human-readable message out of whatever was thrown / returned — the shapes admin apps actually see:
+ *
+ * 1. an axios-style error with a server body — `error.response.data.message` (the backend's own sentence)
+ * 2. an `Error` (or anything with a string `message`) — `error.message`
+ * 3. a raw HTTP response / status object — `{ status: 404, statusText }` → `"Request failed (404)"`
+ * 4. a plain string
+ *
+ * Returns `undefined` when nothing usable is found (the caller shows its generic fallback). Pure — pass
+ * `requestFailed` to localize case 3 (`{status}` is interpolated).
+ */
+export declare function getErrorMessage(error: unknown, requestFailed?: (status: number) => string): string | undefined;
+/** A stack / detail dump for the developer-facing details panel (Error → `name: message` + stack). */
+export declare function getErrorDetails(error: unknown): string | undefined;

package/dist/components/ErrorState/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../ErrorBoundary-unvC1vZQ.cjs"),e=require("../../QueryError-BMH8X69O.cjs");exports.ErrorBoundary=r.ErrorBoundary;exports.ErrorState=r.ErrorState;exports.default=r.ErrorState;exports.getErrorDetails=r.getErrorDetails;exports.getErrorMessage=r.getErrorMessage;exports.QueryError=e.QueryError;
+//# sourceMappingURL=index.cjs.map

package/dist/components/ErrorState/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/ErrorState/index.d.cts

@@ -0,0 +1,7 @@
+export { ErrorState, ErrorState as default } from './ErrorState';
+export type { ErrorStateProps } from './ErrorState';
+export { QueryError } from './QueryError';
+export type { QueryErrorProps } from './QueryError';
+export { ErrorBoundary } from './ErrorBoundary';
+export type { ErrorBoundaryProps } from './ErrorBoundary';
+export { getErrorMessage, getErrorDetails } from './errorMessage';

package/dist/components/ErrorState/index.d.ts

@@ -0,0 +1,7 @@
+export { ErrorState, ErrorState as default } from './ErrorState';
+export type { ErrorStateProps } from './ErrorState';
+export { QueryError } from './QueryError';
+export type { QueryErrorProps } from './QueryError';
+export { ErrorBoundary } from './ErrorBoundary';
+export type { ErrorBoundaryProps } from './ErrorBoundary';
+export { getErrorMessage, getErrorDetails } from './errorMessage';

package/dist/components/ErrorState/index.js

@@ -0,0 +1,11 @@
+import { E as e, a as o, a as s, g as t, b as E } from "../../ErrorBoundary-DJ6R1M9k.js";
+import { Q as f } from "../../QueryError-tBuIQRgv.js";
+export {
+  e as ErrorBoundary,
+  o as ErrorState,
+  f as QueryError,
+  s as default,
+  t as getErrorDetails,
+  E as getErrorMessage
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ErrorState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/FileCard/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileCard-DW5Ur8Aj.cjs");exports.FileCard=e.FileCard;exports.default=e.FileCard;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileCard-DKjDQRzZ.cjs");exports.FileCard=e.FileCard;exports.default=e.FileCard;
 //# sourceMappingURL=index.cjs.map

package/dist/components/FileCard/index.js

@@ -1,4 +1,4 @@
-import { F as r, F } from "../../FileCard-DY8N9Lzz.js";
+import { F as r, F } from "../../FileCard-C3a2yDhK.js";
 export {
   r as FileCard,
   F as default

package/dist/components/FileUploader/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileUploader-B7VfhcR7.cjs");exports.FileUploader=e.FileUploader;exports.default=e.FileUploader;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FileUploader-VIOg03pl.cjs");exports.FileUploader=e.FileUploader;exports.default=e.FileUploader;
 //# sourceMappingURL=index.cjs.map

package/dist/components/FileUploader/index.js

@@ -1,4 +1,4 @@
-import { F as l, F as o } from "../../FileUploader-BYF5FvUc.js";
+import { F as l, F as o } from "../../FileUploader-CuOHWkiG.js";
 export {
   l as FileUploader,
   o as default

package/dist/components/Flag/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flag-CB4YyPj3.cjs");exports.Flag=e.Flag;exports.default=e.Flag;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Flag-aOQncoEZ.cjs");exports.Flag=e.Flag;exports.default=e.Flag;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Flag/index.js

@@ -1,4 +1,4 @@
-import { F as e, F as f } from "../../Flag-yA1y5XzR.js";
+import { F as e, F as f } from "../../Flag-kpUfmrwC.js";
 export {
   e as Flag,
   f as default

package/dist/components/FloatingPanel/FloatingPanel.d.cts

@@ -14,6 +14,10 @@ export interface FloatingPanelProps {
     role?: string;
     /** Accessible label, paired with `role`. */
     ariaLabel?: string;
+    /** `id` of the element that labels the panel (instead of `ariaLabel`). */
+    ariaLabelledBy?: string;
+    /** `id` of the element that describes the panel. */
+    ariaDescribedBy?: string;
     /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */
     trapFocus?: boolean;
     /** Constrain the panel to the trigger's width (select-like). */

package/dist/components/FloatingPanel/FloatingPanel.d.ts

@@ -14,6 +14,10 @@ export interface FloatingPanelProps {
     role?: string;
     /** Accessible label, paired with `role`. */
     ariaLabel?: string;
+    /** `id` of the element that labels the panel (instead of `ariaLabel`). */
+    ariaLabelledBy?: string;
+    /** `id` of the element that describes the panel. */
+    ariaDescribedBy?: string;
     /** Trap Tab focus inside the panel + mark it `aria-modal` (for modal dialogs like the date pickers). */
     trapFocus?: boolean;
     /** Constrain the panel to the trigger's width (select-like). */

package/dist/components/FullscreenToggle/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FullscreenToggle-0lskYnpx.cjs");exports.FullscreenToggle=e.FullscreenToggle;exports.default=e.FullscreenToggle;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../FullscreenToggle-BSwxQEaG.cjs");exports.FullscreenToggle=e.FullscreenToggle;exports.default=e.FullscreenToggle;
 //# sourceMappingURL=index.cjs.map

package/dist/components/FullscreenToggle/index.js

@@ -1,4 +1,4 @@
-import { F as a, F as o } from "../../FullscreenToggle-jSLruiKt.js";
+import { F as a, F as o } from "../../FullscreenToggle-CMifmPD3.js";
 export {
   a as FullscreenToggle,
   o as default

package/dist/components/IconButton/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../IconButton-BN-bZxEi.cjs");exports.IconButton=t.IconButton;exports.default=t.IconButton;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../IconButton-A2B0bqC-.cjs");exports.IconButton=t.IconButton;exports.default=t.IconButton;
 //# sourceMappingURL=index.cjs.map

package/dist/components/IconButton/index.js

@@ -1,4 +1,4 @@
-import { I as a, I } from "../../IconButton-BEGWfcVc.js";
+import { I as a, I } from "../../IconButton-Dq17Fekm.js";
 export {
   a as IconButton,
   I as default

package/dist/components/List/List.d.cts

@@ -1,6 +1,6 @@
 import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import { type Spacing } from '../Flex/Flex';
-import type { ListItemSize } from './ListItem';
+import { type ListItemSize } from './ListItem';
 export interface ListProps extends HTMLAttributes<HTMLElement> {
     /** Render a different element — e.g. `'ul'`, `'nav'`, `'menu'`. Defaults to `div`. */
     as?: ElementType;
@@ -10,11 +10,21 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
     padding?: Spacing;
     /** Default size for the contained `ListItem`s — each item can still override its own `size`. */
     size?: ListItemSize;
+    /**
+     * Default `flush` for the contained `ListItem`s — drops their left / right padding so rows sit flush with
+     * the list's edges (e.g. inside a padded `Card`). Each item can still override its own `flush`.
+     */
+    flush?: boolean;
+    /**
+     * Render skeleton rows instead of `children` — `true` shows 3, a number sets the count. Each row is a
+     * `ListItem` with an icon disc, a label line and a description line. Defaults to `false`.
+     */
+    loading?: boolean | number;
     children?: ReactNode;
 }
 /**
  * A thin semantic container for `ListItem`s — a vertical stack with a configurable `gap`/`padding`
- * and `role="list"` (override `role` to `"menu"` for a dropdown, etc.). `size` sets a default for all
- * contained `ListItem`s. Layout is set via inline style, matching the `Flex`/`Grid` primitives.
+ * and `role="list"` (override `role` to `"menu"` for a dropdown, etc.). `size` and `flush` set defaults
+ * for all contained `ListItem`s (an explicit item prop wins). `loading` swaps the items for skeleton rows. Layout is set via inline style, matching the `Flex`/`Grid` primitives.
  */
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/List/List.d.ts

@@ -1,6 +1,6 @@
 import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import { type Spacing } from '../Flex/Flex';
-import type { ListItemSize } from './ListItem';
+import { type ListItemSize } from './ListItem';
 export interface ListProps extends HTMLAttributes<HTMLElement> {
     /** Render a different element — e.g. `'ul'`, `'nav'`, `'menu'`. Defaults to `div`. */
     as?: ElementType;
@@ -10,11 +10,21 @@ export interface ListProps extends HTMLAttributes<HTMLElement> {
     padding?: Spacing;
     /** Default size for the contained `ListItem`s — each item can still override its own `size`. */
     size?: ListItemSize;
+    /**
+     * Default `flush` for the contained `ListItem`s — drops their left / right padding so rows sit flush with
+     * the list's edges (e.g. inside a padded `Card`). Each item can still override its own `flush`.
+     */
+    flush?: boolean;
+    /**
+     * Render skeleton rows instead of `children` — `true` shows 3, a number sets the count. Each row is a
+     * `ListItem` with an icon disc, a label line and a description line. Defaults to `false`.
+     */
+    loading?: boolean | number;
     children?: ReactNode;
 }
 /**
  * A thin semantic container for `ListItem`s — a vertical stack with a configurable `gap`/`padding`
- * and `role="list"` (override `role` to `"menu"` for a dropdown, etc.). `size` sets a default for all
- * contained `ListItem`s. Layout is set via inline style, matching the `Flex`/`Grid` primitives.
+ * and `role="list"` (override `role` to `"menu"` for a dropdown, etc.). `size` and `flush` set defaults
+ * for all contained `ListItem`s (an explicit item prop wins). `loading` swaps the items for skeleton rows. Layout is set via inline style, matching the `Flex`/`Grid` primitives.
  */
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/List/ListItem.d.cts

@@ -17,6 +17,11 @@ export interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     disabled?: boolean;
     /** Row size — height / padding / font. Defaults to `md`. */
     size?: ListItemSize;
+    /**
+     * Drops the row's left / right padding so it sits flush with its container's edges (vertical padding
+     * and min-height stay). Defaults to `false`; a surrounding `List flush` sets the default for all its rows.
+     */
+    flush?: boolean;
     /** Theme color for the selected tint and clickable hover. Defaults to `primary`. */
     color?: ThemeColor;
     /** Render a different element/component — e.g. `'a'`, `'button'`, or a router `Link`. Defaults to `div`. */

package/dist/components/List/ListItem.d.ts

@@ -17,6 +17,11 @@ export interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, 'color'
     disabled?: boolean;
     /** Row size — height / padding / font. Defaults to `md`. */
     size?: ListItemSize;
+    /**
+     * Drops the row's left / right padding so it sits flush with its container's edges (vertical padding
+     * and min-height stay). Defaults to `false`; a surrounding `List flush` sets the default for all its rows.
+     */
+    flush?: boolean;
     /** Theme color for the selected tint and clickable hover. Defaults to `primary`. */
     color?: ThemeColor;
     /** Render a different element/component — e.g. `'a'`, `'button'`, or a router `Link`. Defaults to `div`. */

package/dist/components/List/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../List-ChXO0Hz-.cjs"),t=require("../../ListItem-yXXjtepZ.cjs");exports.List=e.List;exports.default=e.List;exports.ListItem=t.ListItem;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../List-9lUjapQ5.cjs");exports.List=e.List;exports.ListItem=e.ListItem;exports.default=e.List;
 //# sourceMappingURL=index.cjs.map

package/dist/components/List/index.js

@@ -1,8 +1,7 @@
-import { L, L as a } from "../../List-LqbfF6gU.js";
-import { L as o } from "../../ListItem-Cn15lJBr.js";
+import { L as t, a as L, L as e } from "../../List-CZwNGxuP.js";
 export {
-  L as List,
-  o as ListItem,
-  a as default
+  t as List,
+  L as ListItem,
+  e as default
 };
 //# sourceMappingURL=index.js.map

package/dist/components/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/List/listContext.d.cts

@@ -1,5 +1,11 @@
 import type { ListItemSize } from './ListItem';
-/** Lets a `List` set a default size that its `ListItem`s inherit (an explicit item `size` still wins). */
-export declare const ListSizeContext: import("react").Context<ListItemSize | undefined>;
-/** Read the size provided by a surrounding `List`, if any. */
+/** Defaults a `List` hands to its `ListItem`s — an explicit item prop still wins. */
+export interface ListContextValue {
+    size?: ListItemSize;
+    flush?: boolean;
+}
+export declare const ListContext: import("react").Context<ListContextValue>;
+/** Read the defaults provided by a surrounding `List`, if any. */
+export declare const useListContext: () => ListContextValue;
+/** @deprecated internal — use `useListContext().size`. Kept so older call sites keep compiling. */
 export declare const useListSize: () => ListItemSize | undefined;

package/dist/components/List/listContext.d.ts

@@ -1,5 +1,11 @@
 import type { ListItemSize } from './ListItem';
-/** Lets a `List` set a default size that its `ListItem`s inherit (an explicit item `size` still wins). */
-export declare const ListSizeContext: import("react").Context<ListItemSize | undefined>;
-/** Read the size provided by a surrounding `List`, if any. */
+/** Defaults a `List` hands to its `ListItem`s — an explicit item prop still wins. */
+export interface ListContextValue {
+    size?: ListItemSize;
+    flush?: boolean;
+}
+export declare const ListContext: import("react").Context<ListContextValue>;
+/** Read the defaults provided by a surrounding `List`, if any. */
+export declare const useListContext: () => ListContextValue;
+/** @deprecated internal — use `useListContext().size`. Kept so older call sites keep compiling. */
 export declare const useListSize: () => ListItemSize | undefined;

package/dist/components/Loader/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Loader-B5YqzEYy.cjs");exports.Loader=e.Loader;exports.default=e.Loader;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Loader-D9nteBXt.cjs");exports.Loader=e.Loader;exports.default=e.Loader;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Loader/index.js

@@ -1,4 +1,4 @@
-import { L as o, L as r } from "../../Loader-BZIa8hwv.js";
+import { L as o, L as r } from "../../Loader-CwyoKoWY.js";
 export {
   o as Loader,
   r as default

package/dist/components/MobileFrame/MobileFrame.d.cts

@@ -0,0 +1,45 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type MobileFrameSpec } from './frames';
+export interface MobileFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What the phone shows. Laid out at exactly `screenWidth` CSS px, then scaled with the frame. */
+    children?: ReactNode;
+    /** The screen's layout width in CSS px — the "true device width" the content sees (default `440`). */
+    screenWidth?: number;
+    /** Which frame (default `IPHONE_FRAME`). */
+    frame?: MobileFrameSpec;
+    /** Fill behind the children (a CSS color / var). Default `var(--tz-color-surface)`. */
+    screenBackground?: string;
+    /** Accessible name for the artwork (default `frame.label` + " preview"). */
+    alt?: string;
+    /** Class for the screen element (the scaled `screenWidth` box), e.g. to give it a font or theme vars. */
+    screenClassName?: string;
+    /** Style for the screen element. */
+    screenStyle?: CSSProperties;
+    /** Fires with the current scale factor whenever the frame is re-measured. */
+    onScaleChange?: (scale: number) => void;
+    /**
+     * Hide the scrollbars of every scroller inside the screen (default `true`) — a real phone has no
+     * permanent scrollbar gutter, so a desktop bar drawn inside the frame breaks the illusion. Scrolling
+     * (wheel / touch) still works. `false` shows them again (e.g. while debugging layout).
+     */
+    hideScrollbars?: boolean;
+}
+/** The frame's rendered width at which the screen is exactly `screenWidth` px (scale 1). */
+export declare const frameWidthFor: (screenWidth: number, frame: MobileFrameSpec) => number;
+/**
+ * A phone mockup that renders any content at a **true device width**. The frame artwork is an `<img>`
+ * (never inlined — its Inkscape ids are document-global, so two inlined copies would overwrite each
+ * other's gradients); the **screen** is positioned exactly in the artwork's aperture, **laid out at a
+ * fixed `screenWidth` CSS px** like a real device, and **scaled** (`transform: scale`) to whatever width
+ * the frame gets — so children see a viewport that is exactly `screenWidth` px wide (media queries, `%`
+ * widths and `vw` do **not** follow the visual size; use container queries on the screen if needed),
+ * while the visual size follows the frame. The root fills its container up to the width at which the
+ * screen is a true `screenWidth` (≈478px for the iPhone at 440), and shrinks with it below that — two
+ * phones in a `Row` share the row and shrink together. The one measurement (`ResizeObserver` on the root)
+ * writes `--mf-scale` straight onto the DOM node (no React state, no re-render of the preview) and
+ * reports it via `onScaleChange`. Every CSS number is derived from the `frame` spec as inline custom
+ * properties — the stylesheet only reads vars. The component knows nothing about the previewed app's
+ * light / dark theme: wrap it in your own provider (**outside** `MobileFrame`, or the var is undefined on
+ * the screen element) and pass `screenBackground="var(--your-canvas)"`.
+ */
+export declare const MobileFrame: import("react").ForwardRefExoticComponent<MobileFrameProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/MobileFrame/MobileFrame.d.ts

@@ -0,0 +1,45 @@
+import { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
+import { type MobileFrameSpec } from './frames';
+export interface MobileFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What the phone shows. Laid out at exactly `screenWidth` CSS px, then scaled with the frame. */
+    children?: ReactNode;
+    /** The screen's layout width in CSS px — the "true device width" the content sees (default `440`). */
+    screenWidth?: number;
+    /** Which frame (default `IPHONE_FRAME`). */
+    frame?: MobileFrameSpec;
+    /** Fill behind the children (a CSS color / var). Default `var(--tz-color-surface)`. */
+    screenBackground?: string;
+    /** Accessible name for the artwork (default `frame.label` + " preview"). */
+    alt?: string;
+    /** Class for the screen element (the scaled `screenWidth` box), e.g. to give it a font or theme vars. */
+    screenClassName?: string;
+    /** Style for the screen element. */
+    screenStyle?: CSSProperties;
+    /** Fires with the current scale factor whenever the frame is re-measured. */
+    onScaleChange?: (scale: number) => void;
+    /**
+     * Hide the scrollbars of every scroller inside the screen (default `true`) — a real phone has no
+     * permanent scrollbar gutter, so a desktop bar drawn inside the frame breaks the illusion. Scrolling
+     * (wheel / touch) still works. `false` shows them again (e.g. while debugging layout).
+     */
+    hideScrollbars?: boolean;
+}
+/** The frame's rendered width at which the screen is exactly `screenWidth` px (scale 1). */
+export declare const frameWidthFor: (screenWidth: number, frame: MobileFrameSpec) => number;
+/**
+ * A phone mockup that renders any content at a **true device width**. The frame artwork is an `<img>`
+ * (never inlined — its Inkscape ids are document-global, so two inlined copies would overwrite each
+ * other's gradients); the **screen** is positioned exactly in the artwork's aperture, **laid out at a
+ * fixed `screenWidth` CSS px** like a real device, and **scaled** (`transform: scale`) to whatever width
+ * the frame gets — so children see a viewport that is exactly `screenWidth` px wide (media queries, `%`
+ * widths and `vw` do **not** follow the visual size; use container queries on the screen if needed),
+ * while the visual size follows the frame. The root fills its container up to the width at which the
+ * screen is a true `screenWidth` (≈478px for the iPhone at 440), and shrinks with it below that — two
+ * phones in a `Row` share the row and shrink together. The one measurement (`ResizeObserver` on the root)
+ * writes `--mf-scale` straight onto the DOM node (no React state, no re-render of the preview) and
+ * reports it via `onScaleChange`. Every CSS number is derived from the `frame` spec as inline custom
+ * properties — the stylesheet only reads vars. The component knows nothing about the previewed app's
+ * light / dark theme: wrap it in your own provider (**outside** `MobileFrame`, or the var is undefined on
+ * the screen element) and pass `screenBackground="var(--your-canvas)"`.
+ */
+export declare const MobileFrame: import("react").ForwardRefExoticComponent<MobileFrameProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/MobileFrame/frames.d.cts

@@ -0,0 +1,27 @@
+/** A phone frame: the artwork plus the exact screen aperture cut into it, in the artwork's own units. */
+export interface MobileFrameSpec {
+    /** The frame artwork, rendered as `<img>` (never inlined — see the component doc). */
+    src: string;
+    /** viewBox size of the artwork. */
+    viewBox: {
+        width: number;
+        height: number;
+    };
+    /** The screen aperture inside that viewBox, same units. `radius` is the rendered screen corner. */
+    aperture: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radius: number;
+    };
+    /** Default accessible name of the artwork. */
+    label: string;
+}
+/**
+ * The iPhone frame (Inkscape artwork, 72.5 × 150 units — the source is in mm; aspect 1 / 2.069). The
+ * aperture is the `screenCutout` mask path: x 2.9125 → 69.5880, y 2.4649 → 147.5351. Its true corner
+ * radius is **10.4004**; the rendered screen uses **10.2004** so the screen's anti-aliased edge sits just
+ * inside the bezel with no light leak at the corners (the value the consumer tuned at 1× and 0.5×).
+ */
+export declare const IPHONE_FRAME: MobileFrameSpec;

package/dist/components/MobileFrame/frames.d.ts

@@ -0,0 +1,27 @@
+/** A phone frame: the artwork plus the exact screen aperture cut into it, in the artwork's own units. */
+export interface MobileFrameSpec {
+    /** The frame artwork, rendered as `<img>` (never inlined — see the component doc). */
+    src: string;
+    /** viewBox size of the artwork. */
+    viewBox: {
+        width: number;
+        height: number;
+    };
+    /** The screen aperture inside that viewBox, same units. `radius` is the rendered screen corner. */
+    aperture: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radius: number;
+    };
+    /** Default accessible name of the artwork. */
+    label: string;
+}
+/**
+ * The iPhone frame (Inkscape artwork, 72.5 × 150 units — the source is in mm; aspect 1 / 2.069). The
+ * aperture is the `screenCutout` mask path: x 2.9125 → 69.5880, y 2.4649 → 147.5351. Its true corner
+ * radius is **10.4004**; the rendered screen uses **10.2004** so the screen's anti-aliased edge sits just
+ * inside the bezel with no light leak at the corners (the value the consumer tuned at 1× and 0.5×).
+ */
+export declare const IPHONE_FRAME: MobileFrameSpec;

package/dist/components/MobileFrame/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MobileFrame-Dsfgd_4k.cjs");exports.IPHONE_FRAME=e.IPHONE_FRAME;exports.MobileFrame=e.MobileFrame;exports.default=e.MobileFrame;exports.frameWidthFor=e.frameWidthFor;
+//# sourceMappingURL=index.cjs.map

package/dist/components/MobileFrame/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/MobileFrame/index.d.cts

@@ -0,0 +1,4 @@
+export { MobileFrame, MobileFrame as default, frameWidthFor } from './MobileFrame';
+export type { MobileFrameProps } from './MobileFrame';
+export { IPHONE_FRAME } from './frames';
+export type { MobileFrameSpec } from './frames';

package/dist/components/MobileFrame/index.d.ts

@@ -0,0 +1,4 @@
+export { MobileFrame, MobileFrame as default, frameWidthFor } from './MobileFrame';
+export type { MobileFrameProps } from './MobileFrame';
+export { IPHONE_FRAME } from './frames';
+export type { MobileFrameSpec } from './frames';

package/dist/components/MobileFrame/index.js

@@ -0,0 +1,8 @@
+import { I as r, M as f, M as o, f as s } from "../../MobileFrame-8FSsYA_w.js";
+export {
+  r as IPHONE_FRAME,
+  f as MobileFrame,
+  o as default,
+  s as frameWidthFor
+};
+//# sourceMappingURL=index.js.map

package/dist/components/MobileFrame/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Modal/Modal.d.cts

@@ -34,6 +34,8 @@ export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     color?: ThemeColor;
     /** Footer slot — right-aligned actions over a top divider (e.g. Cancel / Confirm buttons). */
     footer?: ReactNode;
+    /** Extra class on the scrollable body element — to tune its padding / layout (e.g. a compact confirm). */
+    bodyClassName?: string;
     /** Show the header × close button. Defaults to `true`. */
     showCloseButton?: boolean;
     /** Close when the backdrop (outside the dialog) is clicked. Defaults to `true`. */

package/dist/components/Modal/Modal.d.ts

@@ -34,6 +34,8 @@ export interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'
     color?: ThemeColor;
     /** Footer slot — right-aligned actions over a top divider (e.g. Cancel / Confirm buttons). */
     footer?: ReactNode;
+    /** Extra class on the scrollable body element — to tune its padding / layout (e.g. a compact confirm). */
+    bodyClassName?: string;
     /** Show the header × close button. Defaults to `true`. */
     showCloseButton?: boolean;
     /** Close when the backdrop (outside the dialog) is clicked. Defaults to `true`. */

package/dist/components/Modal/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Modal-0V-REVV-.cjs");exports.Modal=e.Modal;exports.default=e.Modal;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../Modal-CQDcYS-Y.cjs");exports.Modal=e.Modal;exports.default=e.Modal;
 //# sourceMappingURL=index.cjs.map

package/dist/components/Modal/index.js

@@ -1,4 +1,4 @@
-import { M, M as d } from "../../Modal-B7yoFC3o.js";
+import { M, M as d } from "../../Modal-cz6JIsZn.js";
 export {
   M as Modal,
   d as default

package/dist/components/MultiSelect/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MultiSelect-gj9Ymeh2.cjs");exports.MultiSelect=e.MultiSelect;exports.default=e.MultiSelect;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MultiSelect-BIwE6wb7.cjs");exports.MultiSelect=e.MultiSelect;exports.default=e.MultiSelect;
 //# sourceMappingURL=index.cjs.map

package/dist/components/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { M as a, M as l } from "../../MultiSelect-C8xuXaoR.js";
+import { M as a, M as l } from "../../MultiSelect-C6l0LpIs.js";
 export {
   a as MultiSelect,
   l as default

package/dist/components/MultilineTextField/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MultilineTextField-Dz6Fg8RJ.cjs");exports.MultilineTextField=e.MultilineTextField;exports.default=e.MultilineTextField;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../MultilineTextField-B6EYAdik.cjs");exports.MultilineTextField=e.MultilineTextField;exports.default=e.MultilineTextField;
 //# sourceMappingURL=index.cjs.map

package/dist/components/MultilineTextField/index.js

@@ -1,4 +1,4 @@
-import { M as t, M as a } from "../../MultilineTextField-CwNCJ9lZ.js";
+import { M as t, M as a } from "../../MultilineTextField-BgfBFeeF.js";
 export {
   t as MultilineTextField,
   a as default