@ankhorage/surface 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ankhorage contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+# @ankhorage/surface
+
+`@ankhorage/surface` is the render-foundation package extracted from Ankhorage.
+It owns layout primitives, responsive helpers, theming, typography, generic font and
+translation bridges, and built-in Expo-backed icon rendering.
+
+It does not own manifest rendering, action execution, Studio authoring, plugin orchestration,
+or CLI generation. Those concerns stay in the Ankhorage monorepo.
+
+## Installation
+
+Install Surface with its required shared contract package and React Native peers:
+
+```bash
+bun add @ankhorage/surface @ankhorage/contracts
+bun add react react-native
+```
+
+If you use the built-in `Icon` primitive, install the Expo icon peers in the host app too:
+
+```bash
+bun add @expo/vector-icons expo-font
+```
+
+## Basic Usage
+
+```tsx
+import { Box, Heading, Icon, Stack, ThemeProvider } from '@ankhorage/surface';
+
+const theme = {
+  id: 'app',
+  name: 'App',
+  mode: 'light',
+  colors: {
+    primary: '#2563eb',
+  },
+};
+
+export function Example() {
+  return (
+    <ThemeProvider initialConfig={theme}>
+      <Stack gap="m">
+        <Heading level={1}>Hello</Heading>
+        <Box p="m">
+          <Icon name="home" provider="Ionicons" />
+        </Box>
+      </Stack>
+    </ThemeProvider>
+  );
+}
+```
+
+## Theming
+
+Serialized theme configuration types are imported from `@ankhorage/contracts`.
+Surface owns theme creation, resolved runtime theme objects, token lookup, and component
+consumption of those tokens.
+
+## Scope
+
+`@ankhorage/surface` includes:
+
+- layout primitives
+- heading and icon primitives
+- theme creation and theme context
+- responsive utilities
+- generic font and translation bridges
+- render-only utilities
+
+`@ankhorage/surface` does not include:
+
+- manifest rendering
+- runtime action execution
+- Studio panels or authoring metadata
+- CLI or project scaffolding logic
+- low-code configuration workflows

package/dist/context/FontContext.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+/**
+ * Runtime font state consumed by theme and text primitives.
+ */
+export interface FontRuntime {
+    /** true when the active font assets have finished loading */
+    fontsLoaded: boolean;
+    /** The currently active font family id */
+    activeFontId: string | null;
+    /** Update the active font family id */
+    setActiveFontId: (id: string) => void;
+}
+export declare function FontProvider(props: {
+    fontsLoaded: boolean;
+    activeFontId?: string | null;
+    children: React.ReactNode;
+    onActiveFontChange?: (id: string) => void;
+}): React.JSX.Element;
+export declare function useFontContext(): FontRuntime;
+//# sourceMappingURL=FontContext.d.ts.map

package/dist/context/FontContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontContext.d.ts","sourceRoot":"","sources":["../../src/context/FontContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,WAAW,EAAE,OAAO,CAAC;IAErB,0CAA0C;IAC1C,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAE5B,uCAAuC;IACvC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAUD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C,qBAuBA;AAED,wBAAgB,cAAc,IAAI,WAAW,CAE5C"}

package/dist/context/FontContext.js

@@ -0,0 +1,25 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+const fallbackRuntime = {
+    fontsLoaded: true,
+    activeFontId: null,
+    setActiveFontId: () => { },
+};
+const FontContext = createContext(fallbackRuntime);
+export function FontProvider(props) {
+    const { fontsLoaded, activeFontId: initialActiveFontId = null, children, onActiveFontChange, } = props;
+    const [activeFontId, setActiveFontIdState] = useState(initialActiveFontId);
+    const value = useMemo(() => ({
+        fontsLoaded,
+        activeFontId,
+        setActiveFontId: (id) => {
+            setActiveFontIdState(id);
+            if (onActiveFontChange)
+                onActiveFontChange(id);
+        },
+    }), [fontsLoaded, activeFontId, onActiveFontChange]);
+    return <FontContext.Provider value={value}>{children}</FontContext.Provider>;
+}
+export function useFontContext() {
+    return useContext(FontContext);
+}
+//# sourceMappingURL=FontContext.js.map

package/dist/context/FontContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontContext.js","sourceRoot":"","sources":["../../src/context/FontContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgB5E,MAAM,eAAe,GAAgB;IACnC,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,IAAI;IAClB,eAAe,EAAE,GAAG,EAAE,GAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAEnD,MAAM,UAAU,YAAY,CAAC,KAK5B;IACC,MAAM,EACJ,WAAW,EACX,YAAY,EAAE,mBAAmB,GAAG,IAAI,EACxC,QAAQ,EACR,kBAAkB,GACnB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,YAAY,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAE3E,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,YAAY;QACZ,eAAe,EAAE,CAAC,EAAU,EAAE,EAAE;YAC9B,oBAAoB,CAAC,EAAE,CAAC,CAAC;YACzB,IAAI,kBAAkB;gBAAE,kBAAkB,CAAC,EAAE,CAAC,CAAC;QACjD,CAAC;KACF,CAAC,EACF,CAAC,WAAW,EAAE,YAAY,EAAE,kBAAkB,CAAC,CAChD,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;AAC/E,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,OAAO,UAAU,CAAC,WAAW,CAAC,CAAC;AACjC,CAAC"}

package/dist/context/TranslationContext.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+/**
+ * Minimal translation runtime surface.
+ * Do not import i18next types here; keep Surface runtime-agnostic.
+ */
+export interface I18nInstance {
+    changeLanguage: (lng: string) => Promise<unknown>;
+    language?: string;
+    t?: Translator;
+}
+export type Translator = (key: string, options?: Record<string, unknown>) => string;
+export interface TranslationRuntime {
+    t: Translator;
+    i18n: I18nInstance | null;
+}
+export declare function TranslationProvider(props: {
+    t: Translator;
+    i18n?: I18nInstance | null;
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useTranslationContext(): TranslationRuntime;
+//# sourceMappingURL=TranslationContext.d.ts.map

package/dist/context/TranslationContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslationContext.d.ts","sourceRoot":"","sources":["../../src/context/TranslationContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,CAAC,CAAC,EAAE,UAAU,CAAC;CAChB;AAED,MAAM,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,MAAM,CAAC;AAEpF,MAAM,WAAW,kBAAkB;IACjC,CAAC,EAAE,UAAU,CAAC;IACd,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;CAC3B;AASD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE;IACzC,CAAC,EAAE,UAAU,CAAC;IACd,IAAI,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAmBA;AAED,wBAAgB,qBAAqB,IAAI,kBAAkB,CAE1D"}

package/dist/context/TranslationContext.js

@@ -0,0 +1,26 @@
+import React, { createContext, useContext, useMemo } from 'react';
+const fallbackRuntime = {
+    t: (key) => key,
+    i18n: null,
+};
+const TranslationContext = createContext(fallbackRuntime);
+export function TranslationProvider(props) {
+    const { t, i18n, children } = props;
+    const value = useMemo(() => ({
+        t: (key, options) => {
+            if (i18n?.t) {
+                const result = i18n.t(key, options);
+                // If translation returns the key, it's missing in the current dictionary
+                if (result !== key)
+                    return result;
+            }
+            return t(key, options);
+        },
+        i18n: i18n ?? null,
+    }), [t, i18n, i18n?.language]);
+    return <TranslationContext.Provider value={value}>{children}</TranslationContext.Provider>;
+}
+export function useTranslationContext() {
+    return useContext(TranslationContext);
+}
+//# sourceMappingURL=TranslationContext.js.map

package/dist/context/TranslationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslationContext.js","sourceRoot":"","sources":["../../src/context/TranslationContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAmBlE,MAAM,eAAe,GAAuB;IAC1C,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG;IACf,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,kBAAkB,GAAG,aAAa,CAAC,eAAe,CAAC,CAAC;AAE1D,MAAM,UAAU,mBAAmB,CAAC,KAInC;IACC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEpC,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,CAAC,EAAE,CAAC,GAAW,EAAE,OAAiC,EAAE,EAAE;YACpD,IAAI,IAAI,EAAE,CAAC,EAAE,CAAC;gBACZ,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;gBACpC,yEAAyE;gBACzE,IAAI,MAAM,KAAK,GAAG;oBAAE,OAAO,MAAM,CAAC;YACpC,CAAC;YACD,OAAO,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;QACzB,CAAC;QACD,IAAI,EAAE,IAAI,IAAI,IAAI;KACnB,CAAC,EACF,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAC1B,CAAC;IAEF,OAAO,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAC7F,CAAC;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO,UAAU,CAAC,kBAAkB,CAAC,CAAC;AACxC,CAAC"}

package/dist/core/responsive/ResponsiveProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ResponsiveRuntime } from './types';
+export declare function ResponsiveProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useResponsiveRuntime(): ResponsiveRuntime;
+//# sourceMappingURL=ResponsiveProvider.d.ts.map

package/dist/core/responsive/ResponsiveProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveProvider.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/ResponsiveProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAIlE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,qBAY7E;AAED,wBAAgB,oBAAoB,IAAI,iBAAiB,CAQxD"}

package/dist/core/responsive/ResponsiveProvider.js

@@ -0,0 +1,20 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { getBreakpointFromWidth } from './getBreakpointFromWidth';
+const ResponsiveContext = createContext(null);
+export function ResponsiveProvider({ children }) {
+    const { width } = useWindowDimensions();
+    const value = useMemo(() => ({
+        breakpoint: getBreakpointFromWidth(width),
+        width,
+    }), [width]);
+    return <ResponsiveContext.Provider value={value}>{children}</ResponsiveContext.Provider>;
+}
+export function useResponsiveRuntime() {
+    const runtime = useContext(ResponsiveContext);
+    if (!runtime) {
+        throw new Error('useResponsiveRuntime must be used within a ResponsiveProvider');
+    }
+    return runtime;
+}
+//# sourceMappingURL=ResponsiveProvider.js.map

package/dist/core/responsive/ResponsiveProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveProvider.js","sourceRoot":"","sources":["../../../src/core/responsive/ResponsiveProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,iBAAiB,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAExE,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAiC;IAC5E,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAExC,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,UAAU,EAAE,sBAAsB,CAAC,KAAK,CAAC;QACzC,KAAK;KACN,CAAC,EACF,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CAAC,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;AAC3F,CAAC;AAED,MAAM,UAAU,oBAAoB;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,+DAA+D,CAAC,CAAC;IACnF,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/core/responsive/breakpoints.d.ts

@@ -0,0 +1,9 @@
+export declare const BREAKPOINTS: {
+    readonly base: 0;
+    readonly sm: 480;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+export declare const BREAKPOINT_ORDER: readonly ["base", "sm", "md", "lg", "xl"];
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/core/responsive/breakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAEX,eAAO,MAAM,gBAAgB,2CAA4C,CAAC"}

package/dist/core/responsive/breakpoints.js

@@ -0,0 +1,9 @@
+export const BREAKPOINTS = {
+    base: 0,
+    sm: 480,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+};
+export const BREAKPOINT_ORDER = ['base', 'sm', 'md', 'lg', 'xl'];
+//# sourceMappingURL=breakpoints.js.map

package/dist/core/responsive/breakpoints.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../../src/core/responsive/breakpoints.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,CAAC;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,GAAG;IACP,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;CACA,CAAC;AAEX,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC"}

package/dist/core/responsive/getBreakpointFromWidth.d.ts

@@ -0,0 +1,3 @@
+import type { Breakpoint } from './types';
+export declare function getBreakpointFromWidth(width: number): Breakpoint;
+//# sourceMappingURL=getBreakpointFromWidth.d.ts.map

package/dist/core/responsive/getBreakpointFromWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBreakpointFromWidth.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/getBreakpointFromWidth.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAMhE"}

package/dist/core/responsive/getBreakpointFromWidth.js

@@ -0,0 +1,10 @@
+import { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';
+export function getBreakpointFromWidth(width) {
+    let active = 'base';
+    for (const key of BREAKPOINT_ORDER) {
+        if (width >= BREAKPOINTS[key])
+            active = key;
+    }
+    return active;
+}
+//# sourceMappingURL=getBreakpointFromWidth.js.map

package/dist/core/responsive/getBreakpointFromWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBreakpointFromWidth.js","sourceRoot":"","sources":["../../../src/core/responsive/getBreakpointFromWidth.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG9D,MAAM,UAAU,sBAAsB,CAAC,KAAa;IAClD,IAAI,MAAM,GAAe,MAAM,CAAC;IAChC,KAAK,MAAM,GAAG,IAAI,gBAAgB,EAAE,CAAC;QACnC,IAAI,KAAK,IAAI,WAAW,CAAC,GAAG,CAAC;YAAE,MAAM,GAAG,GAAG,CAAC;IAC9C,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/core/responsive/index.d.ts

@@ -0,0 +1,7 @@
+export { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';
+export { getBreakpointFromWidth } from './getBreakpointFromWidth';
+export { resolveResponsive } from './resolve';
+export { ResponsiveProvider, useResponsiveRuntime } from './ResponsiveProvider';
+export type { Breakpoint, Responsive, ResponsiveRuntime } from './types';
+export { useBreakpoint } from './useBreakpoint';
+//# sourceMappingURL=index.d.ts.map

package/dist/core/responsive/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAChF,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/core/responsive/index.js

@@ -0,0 +1,6 @@
+export { BREAKPOINT_ORDER, BREAKPOINTS } from './breakpoints';
+export { getBreakpointFromWidth } from './getBreakpointFromWidth';
+export { resolveResponsive } from './resolve';
+export { ResponsiveProvider, useResponsiveRuntime } from './ResponsiveProvider';
+export { useBreakpoint } from './useBreakpoint';
+//# sourceMappingURL=index.js.map

package/dist/core/responsive/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/core/responsive/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/core/responsive/resolve.d.ts

@@ -0,0 +1,3 @@
+import type { Breakpoint, Responsive } from './types';
+export declare function resolveResponsive<T>(value: Responsive<T> | undefined, breakpoint: Breakpoint): T | undefined;
+//# sourceMappingURL=resolve.d.ts.map

package/dist/core/responsive/resolve.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/resolve.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAMtD,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,EAChC,UAAU,EAAE,UAAU,GACrB,CAAC,GAAG,SAAS,CAaf"}

package/dist/core/responsive/resolve.js

@@ -0,0 +1,21 @@
+import { BREAKPOINT_ORDER } from './breakpoints';
+function isResponsiveRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+export function resolveResponsive(value, breakpoint) {
+    if (value === undefined)
+        return undefined;
+    if (!isResponsiveRecord(value))
+        return value;
+    const activeIndex = BREAKPOINT_ORDER.indexOf(breakpoint);
+    for (let i = activeIndex; i >= 0; i -= 1) {
+        const key = BREAKPOINT_ORDER[i];
+        if (!key)
+            continue;
+        const candidate = value[key];
+        if (candidate !== undefined)
+            return candidate;
+    }
+    return undefined;
+}
+//# sourceMappingURL=resolve.js.map

package/dist/core/responsive/resolve.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve.js","sourceRoot":"","sources":["../../../src/core/responsive/resolve.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGjD,SAAS,kBAAkB,CAAI,KAAoB;IACjD,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC9E,CAAC;AAED,MAAM,UAAU,iBAAiB,CAC/B,KAAgC,EAChC,UAAsB;IAEtB,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAC1C,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;QAAE,OAAO,KAAK,CAAC;IAE7C,MAAM,WAAW,GAAG,gBAAgB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACzD,KAAK,IAAI,CAAC,GAAG,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;QACzC,MAAM,GAAG,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;QAChC,IAAI,CAAC,GAAG;YAAE,SAAS;QACnB,MAAM,SAAS,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QAC7B,IAAI,SAAS,KAAK,SAAS;YAAE,OAAO,SAAS,CAAC;IAChD,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/dist/core/responsive/types.d.ts

@@ -0,0 +1,8 @@
+import type { BREAKPOINTS } from './breakpoints';
+export type Breakpoint = keyof typeof BREAKPOINTS;
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;
+export interface ResponsiveRuntime {
+    breakpoint: Breakpoint;
+    width: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/core/responsive/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAE/D,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,UAAU,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/core/responsive/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/core/responsive/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/core/responsive/types.ts"],"names":[],"mappings":""}

package/dist/core/responsive/useBreakpoint.d.ts

@@ -0,0 +1,3 @@
+import type { Breakpoint } from './types';
+export declare function useBreakpoint(): Breakpoint;
+//# sourceMappingURL=useBreakpoint.d.ts.map

package/dist/core/responsive/useBreakpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.d.ts","sourceRoot":"","sources":["../../../src/core/responsive/useBreakpoint.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,wBAAgB,aAAa,IAAI,UAAU,CAG1C"}

package/dist/core/responsive/useBreakpoint.js

@@ -0,0 +1,7 @@
+import { useWindowDimensions } from 'react-native';
+import { getBreakpointFromWidth } from './getBreakpointFromWidth';
+export function useBreakpoint() {
+    const { width } = useWindowDimensions();
+    return getBreakpointFromWidth(width);
+}
+//# sourceMappingURL=useBreakpoint.js.map

package/dist/core/responsive/useBreakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../../src/core/responsive/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACxC,OAAO,sBAAsB,CAAC,KAAK,CAAC,CAAC;AACvC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export type { FontRuntime } from './context/FontContext';
+export { FontProvider, useFontContext } from './context/FontContext';
+export type { I18nInstance, TranslationRuntime, Translator } from './context/TranslationContext';
+export { TranslationProvider, useTranslationContext } from './context/TranslationContext';
+export * from './core/responsive';
+export * from './layout';
+export type { HeadingLevel, HeadingProps } from './primitives/heading';
+export { Heading } from './primitives/heading';
+export type { IconProps, IconProvider } from './primitives/icon';
+export { Icon } from './primitives/icon';
+export * from './theme';
+export { isDeepEqual } from './utils/deepEqual';
+export { deepMerge } from './utils/deepMerge';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACrE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AACjG,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -0,0 +1,10 @@
+export { FontProvider, useFontContext } from './context/FontContext';
+export { TranslationProvider, useTranslationContext } from './context/TranslationContext';
+export * from './core/responsive';
+export * from './layout';
+export { Heading } from './primitives/heading';
+export { Icon } from './primitives/icon';
+export * from './theme';
+export { isDeepEqual } from './utils/deepEqual';
+export { deepMerge } from './utils/deepMerge';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/layout/Box.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type ViewProps as ReactNativeViewProps } from 'react-native';
+import { type BoxStyleProps } from './helpers';
+export interface BoxProps extends BoxStyleProps {
+    children?: React.ReactNode;
+    pointerEvents?: ReactNativeViewProps['pointerEvents'];
+    testID?: string;
+}
+export declare function Box({ children, pointerEvents, style, testID, ...props }: BoxProps): React.JSX.Element;
+//# sourceMappingURL=Box.d.ts.map

package/dist/layout/Box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../src/layout/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,SAAS,IAAI,oBAAoB,EAEvC,MAAM,cAAc,CAAC;AAItB,OAAO,EAAE,KAAK,aAAa,EAAoB,MAAM,WAAW,CAAC;AAEjE,MAAM,WAAW,QAAS,SAAQ,aAAa;IAC7C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,oBAAoB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2BD,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,qBAgBjF"}

package/dist/layout/Box.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Platform, View, } from 'react-native';
+import { useResponsiveRuntime } from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import { resolveBoxStyles } from './helpers';
+function resolvePointerEventsStyle(pointerEvents) {
+    if (Platform.OS !== 'web' || pointerEvents === undefined)
+        return null;
+    if (pointerEvents === 'auto' || pointerEvents === 'none') {
+        return { pointerEvents };
+    }
+    return null;
+}
+function resolveViewPointerEvents(pointerEvents) {
+    if (pointerEvents === undefined)
+        return undefined;
+    if (Platform.OS !== 'web')
+        return pointerEvents;
+    if (pointerEvents === 'box-none' || pointerEvents === 'box-only') {
+        return pointerEvents;
+    }
+    return undefined;
+}
+export function Box({ children, pointerEvents, style, testID, ...props }) {
+    const { theme } = useTheme();
+    const { breakpoint } = useResponsiveRuntime();
+    const resolved = resolveBoxStyles(theme, breakpoint, props);
+    const pointerEventsStyle = resolvePointerEventsStyle(pointerEvents);
+    const viewPointerEvents = resolveViewPointerEvents(pointerEvents);
+    return (<View pointerEvents={viewPointerEvents} testID={testID} style={[resolved, pointerEventsStyle, style]}>
+      {children}
+    </View>);
+}
+//# sourceMappingURL=Box.js.map

package/dist/layout/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../src/layout/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,QAAQ,EAER,IAAI,GAGL,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAsB,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAQjE,SAAS,yBAAyB,CAChC,aAAgE;IAEhE,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAEtE,IAAI,aAAa,KAAK,MAAM,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QACzD,OAAO,EAAE,aAAa,EAAE,CAAC;IAC3B,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,wBAAwB,CAC/B,aAAgE;IAEhE,IAAI,aAAa,KAAK,SAAS;QAAE,OAAO,SAAS,CAAC;IAClD,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK;QAAE,OAAO,aAAa,CAAC;IAEhD,IAAI,aAAa,KAAK,UAAU,IAAI,aAAa,KAAK,UAAU,EAAE,CAAC;QACjE,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK,EAAY;IAChF,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;IAC5D,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,aAAa,CAAC,CAAC;IACpE,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,aAAa,CAAC,CAAC;IAElE,OAAO,CACL,CAAC,IAAI,CACH,aAAa,CAAC,CAAC,iBAAiB,CAAC,CACjC,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,kBAAkB,EAAE,KAA6B,CAAC,CAAC,CAErE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/dist/layout/Container.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type Responsive } from '../core/responsive';
+import type { AnkhTheme } from '../theme/types';
+import { type BoxProps } from './Box';
+export interface ContainerProps extends Omit<BoxProps, 'children'> {
+    children?: React.ReactNode;
+    maxWidth?: Responsive<number>;
+    px?: Responsive<number | keyof AnkhTheme['spacing']>;
+}
+export declare function Container({ children, maxWidth, px, ...props }: ContainerProps): React.JSX.Element;
+//# sourceMappingURL=Container.d.ts.map

package/dist/layout/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../src/layout/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,KAAK,UAAU,EAAwB,MAAM,oBAAoB,CAAC;AAE9F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG3C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAChE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC9B,EAAE,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,MAAM,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;CACtD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAsD,EACtD,EAAiC,EACjC,GAAG,KAAK,EACT,EAAE,cAAc,qBAsBhB"}

package/dist/layout/Container.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from 'react-native';
+import { resolveResponsive, useResponsiveRuntime } from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import { Box } from './Box';
+import { resolveSpacing } from './helpers';
+export function Container({ children, maxWidth = { base: Number.MAX_SAFE_INTEGER, lg: 1120 }, px = { base: 16, md: 24, lg: 32 }, ...props }) {
+    const { theme } = useTheme();
+    const { breakpoint } = useResponsiveRuntime();
+    const activeMaxWidth = resolveResponsive(maxWidth, breakpoint);
+    const activePx = resolveSpacing(theme, resolveResponsive(px, breakpoint));
+    return (<Box {...props} width="100%" style={[{ width: '100%' }, props.style]}>
+      <View style={{
+            width: '100%',
+            maxWidth: activeMaxWidth,
+            alignSelf: 'center',
+            paddingLeft: activePx,
+            paddingRight: activePx,
+        }}>
+        {children}
+      </View>
+    </Box>);
+}
+//# sourceMappingURL=Container.js.map

package/dist/layout/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/layout/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,iBAAiB,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC9F,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAQ3C,MAAM,UAAU,SAAS,CAAC,EACxB,QAAQ,EACR,QAAQ,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAAE,EAAE,IAAI,EAAE,EACtD,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EACjC,GAAG,KAAK,EACO;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,EAAE,CAAC;IAC7B,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE9C,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;IAC/D,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CACnE;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,cAAc;YACxB,SAAS,EAAE,QAAQ;YACnB,WAAW,EAAE,QAAQ;YACrB,YAAY,EAAE,QAAQ;SACvB,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}

package/dist/layout/Grid.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type Responsive } from '../core/responsive';
+import { type BoxProps } from './Box';
+import { type SpaceValue } from './helpers';
+export interface GridProps extends Omit<BoxProps, 'children'> {
+    children?: React.ReactNode;
+    cols: Responsive<number>;
+    gap?: Responsive<SpaceValue>;
+    rowGap?: Responsive<SpaceValue>;
+    colGap?: Responsive<SpaceValue>;
+    minItemWidth?: Responsive<number>;
+}
+export declare function Grid({ children, cols, gap, rowGap, colGap, minItemWidth, ...props }: GridProps): React.JSX.Element;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/layout/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/layout/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAqB,KAAK,UAAU,EAAwB,MAAM,oBAAoB,CAAC;AAE9F,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5D,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACzB,GAAG,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CACnC;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,EACJ,GAAO,EACP,MAAM,EACN,MAAM,EACN,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,qBAyDX"}

package/dist/layout/Grid.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { View } from 'react-native';
+import { resolveResponsive, useResponsiveRuntime } from '../core/responsive';
+import { useTheme } from '../theme/ThemeContext';
+import { Box } from './Box';
+import { resolveSpacing } from './helpers';
+export function Grid({ children, cols, gap = 0, rowGap, colGap, minItemWidth, ...props }) {
+    const { theme } = useTheme();
+    const { breakpoint } = useResponsiveRuntime();
+    const activeCols = Math.max(1, Math.floor(resolveResponsive(cols, breakpoint) ?? 1));
+    const defaultGap = resolveResponsive(gap, breakpoint) ?? 0;
+    const activeRowGap = resolveResponsive(rowGap, breakpoint) ?? defaultGap;
+    const activeColGap = resolveResponsive(colGap, breakpoint) ?? defaultGap;
+    const rowSpacing = Number(resolveSpacing(theme, activeRowGap) ?? 0);
+    const colSpacing = Number(resolveSpacing(theme, activeColGap) ?? 0);
+    const activeMinItemWidth = resolveResponsive(minItemWidth, breakpoint);
+    const basisPercent = `${100 / activeCols}%`;
+    const nodes = React.Children.toArray(children);
+    return (<Box {...props}>
+      <View style={{
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            marginTop: -rowSpacing / 2,
+            marginLeft: -colSpacing / 2,
+            marginRight: -colSpacing / 2,
+        }}>
+        {nodes.map((node, index) => {
+            const itemStyle = activeMinItemWidth !== undefined
+                ? {
+                    minWidth: activeMinItemWidth,
+                    flexBasis: activeMinItemWidth,
+                    flexGrow: 1,
+                }
+                : {
+                    width: basisPercent,
+                    flexBasis: basisPercent,
+                };
+            return (<View key={String(index)} style={{
+                    paddingTop: rowSpacing / 2,
+                    paddingBottom: rowSpacing / 2,
+                    paddingLeft: colSpacing / 2,
+                    paddingRight: colSpacing / 2,
+                    ...itemStyle,
+                }}>
+              {node}
+            </View>);
+        })}
+      </View>
+    </Box>);
+}
+//# sourceMappingURL=Grid.js.map