@mockifydev/react 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,112 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** A single color variant for a device. */
+interface DeviceColorVariant {
+    /** Human-readable color name, e.g. "Natural Titanium" */
+    name: string;
+    /** Path to the frame PNG for this color (relative to basePath) */
+    frameSrc: string;
+    /** CSS hex color for the UI swatch */
+    swatch: string;
+}
+/** Configuration for a device model. Contains all frame geometry and color variants. */
+interface DeviceConfig {
+    /** Display name, e.g. "iPhone 16 Pro" */
+    name: string;
+    /** Default frame PNG path (relative to basePath) */
+    frameSrc: string;
+    /** Native width of the frame PNG in pixels */
+    framePngWidth: number;
+    /** Native height of the frame PNG in pixels */
+    framePngHeight: number;
+    /** Screen left offset as a fraction of frame width (0–1) */
+    screenLeftFraction: number;
+    /** Screen top offset as a fraction of frame height (0–1) */
+    screenTopFraction: number;
+    /** Screen width as a fraction of frame width (0–1) */
+    screenWidthFraction: number;
+    /** Screen height as a fraction of frame height (0–1) */
+    screenHeightFraction: number;
+    /** Screen corner radius as a fraction of frame width (0–1) */
+    screenRadiusFraction: number;
+    /** Status bar PNG path (relative to basePath) */
+    statusBarSrc: string;
+    /** Status bar height as a fraction of screen height (0–1) */
+    statusBarHeightFraction: number;
+    /** Available color variants. Empty array = single-color device. */
+    colors: DeviceColorVariant[];
+    /** Default color name. Must match one of colors[].name. */
+    defaultColor?: string;
+}
+/** Props for the DeviceMockup component. */
+interface DeviceMockupProps {
+    /** Device configuration object */
+    device: DeviceConfig;
+    /** Content to render inside the phone screen */
+    children?: React.ReactNode;
+    /** Rendered width in pixels. @default 320 */
+    width?: number;
+    /** Screen background color when no children are provided. @default "#f2f2f2" */
+    screenColor?: string;
+    /** Show the status bar overlay. @default true */
+    showStatusBar?: boolean;
+    /** Additional CSS class for the outer wrapper */
+    className?: string;
+    /** Inline styles for the outer wrapper */
+    style?: React.CSSProperties;
+    /** Color variant name. Falls back to defaultColor, then frameSrc. */
+    color?: string;
+    /**
+     * Base path for device frame and status bar assets.
+     * Defaults to the unpkg CDN so it works out of the box — no setup needed.
+     * Set to "/mockify" if you self-host with `npx @mockify/react init`.
+     * @default "https://unpkg.com/@mockify/react@latest/assets"
+     */
+    basePath?: string;
+}
+
+/**
+ * Renders an ultra-realistic iPhone device mockup.
+ *
+ * Uses a 3-layer compositing approach:
+ * 1. Screen content area (z-index 10)
+ * 2. Status bar PNG overlay
+ * 3. Device frame PNG on top (z-index 20, pointer-events: none)
+ *
+ * All positioning is fraction-based so mockups scale to any size.
+ *
+ * @example
+ * ```tsx
+ * import { DeviceMockup, iPhone16Pro } from "@mockify/react";
+ *
+ * <DeviceMockup device={iPhone16Pro} width={320}>
+ *   <img src="/screenshot.png" alt="App" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+ * </DeviceMockup>
+ * ```
+ */
+declare function DeviceMockup({ device, children, width, screenColor, showStatusBar, className, style, color, basePath, }: DeviceMockupProps): react_jsx_runtime.JSX.Element;
+
+declare const iPhone13: DeviceConfig;
+declare const iPhone13Mini: DeviceConfig;
+declare const iPhone13Pro: DeviceConfig;
+declare const iPhone13ProMax: DeviceConfig;
+declare const iPhone14: DeviceConfig;
+declare const iPhone14Plus: DeviceConfig;
+declare const iPhone14Pro: DeviceConfig;
+declare const iPhone14ProMax: DeviceConfig;
+declare const iPhone15: DeviceConfig;
+declare const iPhone15Plus: DeviceConfig;
+declare const iPhone15Pro: DeviceConfig;
+declare const iPhone15ProMax: DeviceConfig;
+declare const iPhone16: DeviceConfig;
+declare const iPhone16Plus: DeviceConfig;
+declare const iPhone16Pro: DeviceConfig;
+declare const iPhone16ProMax: DeviceConfig;
+declare const iPhone17: DeviceConfig;
+declare const iPhone17Pro: DeviceConfig;
+declare const iPhone17ProMax: DeviceConfig;
+declare const iPhoneAir: DeviceConfig;
+/** All 20 available devices, ordered newest first. */
+declare const allDevices: DeviceConfig[];
+
+export { type DeviceColorVariant, type DeviceConfig, DeviceMockup, type DeviceMockupProps, allDevices, iPhone13, iPhone13Mini, iPhone13Pro, iPhone13ProMax, iPhone14, iPhone14Plus, iPhone14Pro, iPhone14ProMax, iPhone15, iPhone15Plus, iPhone15Pro, iPhone15ProMax, iPhone16, iPhone16Plus, iPhone16Pro, iPhone16ProMax, iPhone17, iPhone17Pro, iPhone17ProMax, iPhoneAir };

package/dist/index.d.ts

@@ -0,0 +1,112 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** A single color variant for a device. */
+interface DeviceColorVariant {
+    /** Human-readable color name, e.g. "Natural Titanium" */
+    name: string;
+    /** Path to the frame PNG for this color (relative to basePath) */
+    frameSrc: string;
+    /** CSS hex color for the UI swatch */
+    swatch: string;
+}
+/** Configuration for a device model. Contains all frame geometry and color variants. */
+interface DeviceConfig {
+    /** Display name, e.g. "iPhone 16 Pro" */
+    name: string;
+    /** Default frame PNG path (relative to basePath) */
+    frameSrc: string;
+    /** Native width of the frame PNG in pixels */
+    framePngWidth: number;
+    /** Native height of the frame PNG in pixels */
+    framePngHeight: number;
+    /** Screen left offset as a fraction of frame width (0–1) */
+    screenLeftFraction: number;
+    /** Screen top offset as a fraction of frame height (0–1) */
+    screenTopFraction: number;
+    /** Screen width as a fraction of frame width (0–1) */
+    screenWidthFraction: number;
+    /** Screen height as a fraction of frame height (0–1) */
+    screenHeightFraction: number;
+    /** Screen corner radius as a fraction of frame width (0–1) */
+    screenRadiusFraction: number;
+    /** Status bar PNG path (relative to basePath) */
+    statusBarSrc: string;
+    /** Status bar height as a fraction of screen height (0–1) */
+    statusBarHeightFraction: number;
+    /** Available color variants. Empty array = single-color device. */
+    colors: DeviceColorVariant[];
+    /** Default color name. Must match one of colors[].name. */
+    defaultColor?: string;
+}
+/** Props for the DeviceMockup component. */
+interface DeviceMockupProps {
+    /** Device configuration object */
+    device: DeviceConfig;
+    /** Content to render inside the phone screen */
+    children?: React.ReactNode;
+    /** Rendered width in pixels. @default 320 */
+    width?: number;
+    /** Screen background color when no children are provided. @default "#f2f2f2" */
+    screenColor?: string;
+    /** Show the status bar overlay. @default true */
+    showStatusBar?: boolean;
+    /** Additional CSS class for the outer wrapper */
+    className?: string;
+    /** Inline styles for the outer wrapper */
+    style?: React.CSSProperties;
+    /** Color variant name. Falls back to defaultColor, then frameSrc. */
+    color?: string;
+    /**
+     * Base path for device frame and status bar assets.
+     * Defaults to the unpkg CDN so it works out of the box — no setup needed.
+     * Set to "/mockify" if you self-host with `npx @mockify/react init`.
+     * @default "https://unpkg.com/@mockify/react@latest/assets"
+     */
+    basePath?: string;
+}
+
+/**
+ * Renders an ultra-realistic iPhone device mockup.
+ *
+ * Uses a 3-layer compositing approach:
+ * 1. Screen content area (z-index 10)
+ * 2. Status bar PNG overlay
+ * 3. Device frame PNG on top (z-index 20, pointer-events: none)
+ *
+ * All positioning is fraction-based so mockups scale to any size.
+ *
+ * @example
+ * ```tsx
+ * import { DeviceMockup, iPhone16Pro } from "@mockify/react";
+ *
+ * <DeviceMockup device={iPhone16Pro} width={320}>
+ *   <img src="/screenshot.png" alt="App" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+ * </DeviceMockup>
+ * ```
+ */
+declare function DeviceMockup({ device, children, width, screenColor, showStatusBar, className, style, color, basePath, }: DeviceMockupProps): react_jsx_runtime.JSX.Element;
+
+declare const iPhone13: DeviceConfig;
+declare const iPhone13Mini: DeviceConfig;
+declare const iPhone13Pro: DeviceConfig;
+declare const iPhone13ProMax: DeviceConfig;
+declare const iPhone14: DeviceConfig;
+declare const iPhone14Plus: DeviceConfig;
+declare const iPhone14Pro: DeviceConfig;
+declare const iPhone14ProMax: DeviceConfig;
+declare const iPhone15: DeviceConfig;
+declare const iPhone15Plus: DeviceConfig;
+declare const iPhone15Pro: DeviceConfig;
+declare const iPhone15ProMax: DeviceConfig;
+declare const iPhone16: DeviceConfig;
+declare const iPhone16Plus: DeviceConfig;
+declare const iPhone16Pro: DeviceConfig;
+declare const iPhone16ProMax: DeviceConfig;
+declare const iPhone17: DeviceConfig;
+declare const iPhone17Pro: DeviceConfig;
+declare const iPhone17ProMax: DeviceConfig;
+declare const iPhoneAir: DeviceConfig;
+/** All 20 available devices, ordered newest first. */
+declare const allDevices: DeviceConfig[];
+
+export { type DeviceColorVariant, type DeviceConfig, DeviceMockup, type DeviceMockupProps, allDevices, iPhone13, iPhone13Mini, iPhone13Pro, iPhone13ProMax, iPhone14, iPhone14Plus, iPhone14Pro, iPhone14ProMax, iPhone15, iPhone15Plus, iPhone15Pro, iPhone15ProMax, iPhone16, iPhone16Plus, iPhone16Pro, iPhone16ProMax, iPhone17, iPhone17Pro, iPhone17ProMax, iPhoneAir };