@techzyapp/ui-library 1.0.25 → 1.0.27

package/dist/components/ColorPicker/colorUtils.d.cts

@@ -7,22 +7,13 @@ export interface HSV {
     /** Value/brightness 0–1 */
     v: number;
 }
-export interface RGB {
-    r: number;
-    g: number;
-    b: number;
-}
+import { type RGB } from '../../helpers/color';
+export { clamp01, normalizeHex, isValidHex, hexToRgb, rgbToHex } from '../../helpers/color';
+export type { RGB } from '../../helpers/color';
 export interface RGBA extends RGB {
     /** Alpha 0–1 */
     a: number;
 }
-export declare const clamp01: (n: number) => number;
-/** Normalizes any `#rgb`/`#rrggbb` (with or without `#`) to a lowercase `#rrggbb`, or `null` if invalid. */
-export declare function normalizeHex(input: string): string | null;
-/** True for a complete `#rrggbb` (or `#rgb`) color. */
-export declare const isValidHex: (input: string) => boolean;
-export declare function hexToRgb(hex: string): RGB;
-export declare function rgbToHex({ r, g, b }: RGB): string;
 /** RGB (0–255) → HSV. */
 export declare function rgbToHsv({ r, g, b }: RGB): HSV;
 /** HSV → RGB (0–255). */

package/dist/components/ColorPicker/colorUtils.d.ts

@@ -7,22 +7,13 @@ export interface HSV {
     /** Value/brightness 0–1 */
     v: number;
 }
-export interface RGB {
-    r: number;
-    g: number;
-    b: number;
-}
+import { type RGB } from '../../helpers/color';
+export { clamp01, normalizeHex, isValidHex, hexToRgb, rgbToHex } from '../../helpers/color';
+export type { RGB } from '../../helpers/color';
 export interface RGBA extends RGB {
     /** Alpha 0–1 */
     a: number;
 }
-export declare const clamp01: (n: number) => number;
-/** Normalizes any `#rgb`/`#rrggbb` (with or without `#`) to a lowercase `#rrggbb`, or `null` if invalid. */
-export declare function normalizeHex(input: string): string | null;
-/** True for a complete `#rrggbb` (or `#rgb`) color. */
-export declare const isValidHex: (input: string) => boolean;
-export declare function hexToRgb(hex: string): RGB;
-export declare function rgbToHex({ r, g, b }: RGB): string;
 /** RGB (0–255) → HSV. */
 export declare function rgbToHsv({ r, g, b }: RGB): HSV;
 /** HSV → RGB (0–255). */

package/dist/components/ColorPicker/index.cjs

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

package/dist/components/ColorPicker/index.js

@@ -1,4 +1,4 @@
-import { C as a, C as e } from "../../ColorPicker-Dw6Qk0iy.js";
+import { C as a, C as e } from "../../ColorPicker-Cw-2X6u9.js";
 export {
   a as ColorPicker,
   e as default

package/dist/components/ColorRamp/ColorRamp.d.cts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type GeneratePaletteOptions, type PaletteSwatch } from '../../helpers/palette';
+export type ColorRampSize = 'sm' | 'md' | 'lg';
+export interface ColorRampProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onCopy'> {
+    /** The base (500) color — any value `generatePalette` accepts. Invalid → the empty-state caption. */
+    baseColor: string;
+    /** Token prefix for step names (`primary` → "primary-500") — used in tooltips, aria-labels and the copy toast. Default `'color'`. */
+    name?: string;
+    /** Passed to `generatePalette` (override any subset of the tint / shade fractions). */
+    options?: GeneratePaletteOptions;
+    /** Band height. `sm` 32 · `md` 40 (default) · `lg` 48 px. */
+    size?: ColorRampSize;
+    /** Click a step to copy its hex (default `true`). `false` renders the steps as non-interactive cells. */
+    copyable?: boolean;
+    /** After a successful copy — in addition to the built-in toast. */
+    onCopy?: (swatch: PaletteSwatch) => void;
+    /** Show the "Lightest … Darkest" caption row under the band (default `true`). */
+    showBounds?: boolean;
+    /** Label rendered above the band (field-family chrome, like `Slider` / `SwatchPicker`). */
+    label?: ReactNode;
+    /** Helper / validation text under the band. Adopts the error color while `error`. */
+    helperText?: ReactNode;
+    /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */
+    error?: boolean;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+}
+/**
+ * The generated tonal scale for one color as **a single horizontal band of ten equal steps** sharing
+ * one rounded, clipped frame (reads as a continuous ramp, not ten chips). Display + copy only — it never
+ * edits the color; pair it with `ColorPicker` (or use `PaletteField`, which composes both). Each step
+ * is a `Tooltip`-wrapped button whose fill / ink are the swatch's own colors (inline — the color IS the
+ * data), showing its number on the base step and on hover / focus; clicking copies the hex with a toast.
+ * `role="group"` labelled "{name} color scale"; an invalid `baseColor` renders only a muted caption.
+ */
+export declare const ColorRamp: import("react").ForwardRefExoticComponent<ColorRampProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ColorRamp/ColorRamp.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type GeneratePaletteOptions, type PaletteSwatch } from '../../helpers/palette';
+export type ColorRampSize = 'sm' | 'md' | 'lg';
+export interface ColorRampProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onCopy'> {
+    /** The base (500) color — any value `generatePalette` accepts. Invalid → the empty-state caption. */
+    baseColor: string;
+    /** Token prefix for step names (`primary` → "primary-500") — used in tooltips, aria-labels and the copy toast. Default `'color'`. */
+    name?: string;
+    /** Passed to `generatePalette` (override any subset of the tint / shade fractions). */
+    options?: GeneratePaletteOptions;
+    /** Band height. `sm` 32 · `md` 40 (default) · `lg` 48 px. */
+    size?: ColorRampSize;
+    /** Click a step to copy its hex (default `true`). `false` renders the steps as non-interactive cells. */
+    copyable?: boolean;
+    /** After a successful copy — in addition to the built-in toast. */
+    onCopy?: (swatch: PaletteSwatch) => void;
+    /** Show the "Lightest … Darkest" caption row under the band (default `true`). */
+    showBounds?: boolean;
+    /** Label rendered above the band (field-family chrome, like `Slider` / `SwatchPicker`). */
+    label?: ReactNode;
+    /** Helper / validation text under the band. Adopts the error color while `error`. */
+    helperText?: ReactNode;
+    /** Marks the field invalid — reddens the label/asterisk and shows `helperText` in the error color. */
+    error?: boolean;
+    /** Adds a red asterisk after the label. */
+    required?: boolean;
+}
+/**
+ * The generated tonal scale for one color as **a single horizontal band of ten equal steps** sharing
+ * one rounded, clipped frame (reads as a continuous ramp, not ten chips). Display + copy only — it never
+ * edits the color; pair it with `ColorPicker` (or use `PaletteField`, which composes both). Each step
+ * is a `Tooltip`-wrapped button whose fill / ink are the swatch's own colors (inline — the color IS the
+ * data), showing its number on the base step and on hover / focus; clicking copies the hex with a toast.
+ * `role="group"` labelled "{name} color scale"; an invalid `baseColor` renders only a muted caption.
+ */
+export declare const ColorRamp: import("react").ForwardRefExoticComponent<ColorRampProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ColorRamp/index.cjs

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

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

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

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

@@ -0,0 +1,3 @@
+export { ColorRamp, ColorRamp as default } from './ColorRamp';
+export type { ColorRampProps, ColorRampSize } from './ColorRamp';
+export type { PaletteSwatch, PaletteStep, GeneratePaletteOptions, Legibility, WcagRating, Rgb, } from '../../helpers/palette';

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

@@ -0,0 +1,3 @@
+export { ColorRamp, ColorRamp as default } from './ColorRamp';
+export type { ColorRampProps, ColorRampSize } from './ColorRamp';
+export type { PaletteSwatch, PaletteStep, GeneratePaletteOptions, Legibility, WcagRating, Rgb, } from '../../helpers/palette';

package/dist/components/ColorRamp/index.js

@@ -0,0 +1,6 @@
+import { C as r, C } from "../../ColorRamp-DnlJNKfy.js";
+export {
+  r as ColorRamp,
+  C as default
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/CopyButton/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../CopyButton-Ct-8AmmX.cjs");exports.CopyButton=t.CopyButton;exports.default=t.CopyButton;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../CopyButton-BqFGC-Ca.cjs");exports.CopyButton=t.CopyButton;exports.default=t.CopyButton;
 //# sourceMappingURL=index.cjs.map

package/dist/components/CopyButton/index.js

@@ -1,4 +1,4 @@
-import { C as a, C } from "../../CopyButton-DJ1PSJZU.js";
+import { C as a, C } from "../../CopyButton-D6-kcVCA.js";
 export {
   a as CopyButton,
   C as default

package/dist/components/DashedButton/index.cjs

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

package/dist/components/DashedButton/index.js

@@ -1,4 +1,4 @@
-import { D as e, D as o } from "../../DashedButton-BXZAyMtw.js";
+import { D as e, D as o } from "../../DashedButton-iM7kzopW.js";
 export {
   e as DashedButton,
   o as default

package/dist/components/DatePicker/index.cjs

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

package/dist/components/DatePicker/index.js

@@ -1,4 +1,4 @@
-import { D as r, D as t } from "../../DatePicker-CJioG5M7.js";
+import { D as r, D as t } from "../../DatePicker-DP7yASzq.js";
 export {
   r as DatePicker,
   t as default

package/dist/components/DateTimePicker/index.cjs

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

package/dist/components/DateTimePicker/index.js

@@ -1,4 +1,4 @@
-import { D as r, D as t } from "../../DateTimePicker-e2zj2bhS.js";
+import { D as r, D as t } from "../../DateTimePicker-CzRduOFz.js";
 export {
   r as DateTimePicker,
   t as default

package/dist/components/EmptyState/index.cjs

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

package/dist/components/EmptyState/index.js

@@ -1,4 +1,4 @@
-import { E as e, E } from "../../EmptyState-BTd7aVgu.js";
+import { E as e, E } from "../../EmptyState-A5nPGnHA.js";
 export {
   e as EmptyState,
   E as default

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-C4BkGMtK.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-BmPEEcue.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-D_F64mob.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-Dv_3bjZA.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-BM_2VJ1v.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-CzCEpB8E.js";
 export {
   e as Flag,
   f as default

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-BL0nBrsL.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-HZQOIa21.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-B87ipBK3.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-CBp8QuTO.js";
 export {
   a as IconButton,
   I as default

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-0Imnbael.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-fffFnQqS.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/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--e2qGisF.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-DJljaPqV.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-CvecZeMU.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-DLoS04lZ.js";
 export {
   a as MultiSelect,
   l as default

package/dist/components/NumberField/index.cjs

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

package/dist/components/NumberField/index.js

@@ -1,4 +1,4 @@
-import { N as r, N } from "../../NumberField-2yM0mmyj.js";
+import { N as r, N } from "../../NumberField-DYGVQdL5.js";
 export {
   r as NumberField,
   N as default

package/dist/components/OtpField/index.cjs

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

package/dist/components/OtpField/index.js

@@ -1,4 +1,4 @@
-import { O as t, O } from "../../OtpField-CkliY82J.js";
+import { O as t, O } from "../../OtpField-CpQr_ZqL.js";
 export {
   t as OtpField,
   O as default

package/dist/components/PageLayout/index.cjs

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

package/dist/components/PageLayout/index.js

@@ -1,4 +1,4 @@
-import { P as o, P as t } from "../../PageLayout-DzPh_G6H.js";
+import { P as o, P as t } from "../../PageLayout-CCcPCfJF.js";
 export {
   o as PageLayout,
   t as default

package/dist/components/PageNotFound/index.cjs

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

package/dist/components/PageNotFound/index.js

@@ -1,4 +1,4 @@
-import { P as e, P as t } from "../../PageNotFound-CCFfPHgA.js";
+import { P as e, P as t } from "../../PageNotFound-LWH2tU5E.js";
 export {
   e as PageNotFound,
   t as default

package/dist/components/Pagination/index.cjs

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

package/dist/components/Pagination/index.js

@@ -1,4 +1,4 @@
-import { P as t, P } from "../../Pagination-CmskZjcz.js";
+import { P as t, P } from "../../Pagination-BwtbmITJ.js";
 export {
   t as Pagination,
   P as default