@flipdish/ui-library 0.12.4 → 0.13.1

package/dist/native/providers/RouteProvider/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `RouteProvider` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/providers/RouteProvider` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `RouteProvider` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/providers/ThemeProvider/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `ThemeProvider` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/providers/ThemeProvider` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `ThemeProvider` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/providers/UIProvider/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `UIProvider` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/providers/UIProvider` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `UIProvider` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/utilities/cssScopeUtils/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `cssScopeUtils` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/utilities/cssScopeUtils` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `cssScopeUtils` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/utilities/cx/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Merge Tailwind class strings, resolving conflicts (last value wins). Accepts the
+ * same inputs as tailwind-merge — strings, arrays, and falsy values for
+ * conditionals — so it composes cleanly:
+ *
+ *   cx('px-2', isActive && 'bg-primary', ['text-sm', null]);
+ *
+ * Pure JS with no DOM dependency, so the same helper works on web (PostCSS) and
+ * React Native (NativeWind). Imported by components as
+ * `@flipdish/ui-library/utilities/cx`.
+ */
+export declare const cx: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+type ClassValue = string | number;
+type ClassDefinition = Record<string, ClassValue | Record<string, ClassValue | Record<string, ClassValue>>>;
+/**
+ * Identity helper that exists only so Tailwind IntelliSense recognises and sorts
+ * the class strings held inside style-config objects (e.g. `tailwind-variants`
+ * slot maps). Returns its argument unchanged.
+ */
+export declare const sortCx: <T extends ClassDefinition>(classes: T) => T;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/native/utilities/cx/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/cx/index.ts"],"names":[],"mappings":"AAkBA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,EAAE,sEAAU,CAAC;AAE1B,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAClC,KAAK,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;AAE5G;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,eAAe,EAAE,SAAS,CAAC,KAAG,CAAY,CAAC"}

package/dist/native/utilities/cx/index.js

@@ -0,0 +1,38 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+
+/**
+ * tailwind-merge configured for Untitled UI's custom font-size scale, so the
+ * `text-display-*` utilities are treated as part of the `font-size` conflict
+ * group. Without this, tailwind-merge wouldn't de-dupe e.g.
+ * `text-display-sm text-display-lg` down to the last one.
+ *
+ * Mirrors the `cx` helper from Untitled UI's Vite integration guide.
+ */
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            text: ['display-xs', 'display-sm', 'display-md', 'display-lg', 'display-xl', 'display-2xl'],
+        },
+    },
+});
+/**
+ * Merge Tailwind class strings, resolving conflicts (last value wins). Accepts the
+ * same inputs as tailwind-merge — strings, arrays, and falsy values for
+ * conditionals — so it composes cleanly:
+ *
+ *   cx('px-2', isActive && 'bg-primary', ['text-sm', null]);
+ *
+ * Pure JS with no DOM dependency, so the same helper works on web (PostCSS) and
+ * React Native (NativeWind). Imported by components as
+ * `@flipdish/ui-library/utilities/cx`.
+ */
+const cx = twMerge;
+/**
+ * Identity helper that exists only so Tailwind IntelliSense recognises and sorts
+ * the class strings held inside style-config objects (e.g. `tailwind-variants`
+ * slot maps). Returns its argument unchanged.
+ */
+const sortCx = (classes) => classes;
+
+export { cx, sortCx };
+//# sourceMappingURL=index.js.map

package/dist/native/utilities/cx/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/utilities/cx/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;;;;AAOG;AACH,MAAM,OAAO,GAAG,mBAAmB,CAAC;AAClC,IAAA,MAAM,EAAE;AACN,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,CAAC;AAC5F,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF;;;;;;;;;;AAUG;AACI,MAAM,EAAE,GAAG;AAKlB;;;;AAIG;AACI,MAAM,MAAM,GAAG,CAA4B,OAAU,KAAQ;;;;"}

package/dist/native/utilities/isReactComponent/index.d.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+type ReactComponent = React.FC<any> | React.ComponentClass<any, any> | React.ForwardRefExoticComponent<any>;
+/**
+ * Backs Untitled UI's `@/utils/is-react-component` import.
+ *
+ * Distinguishes a component passed as a prop (an icon `FC`, class component, or
+ * `forwardRef` object you instantiate) from an already-rendered element
+ * (handled via React's `isValidElement`). Untitled UI icon props accept either
+ * form; these guards select the "render it yourself" branch.
+ *
+ * Pure JS with no DOM dependency — works on web (PostCSS) and React Native
+ * (NativeWind). Imported by components as
+ * `@flipdish/ui-library/utilities/isReactComponent`.
+ */
+/** Checks if a given value is a function component. */
+export declare const isFunctionComponent: (component: any) => component is React.FC<any>;
+/** Checks if a given value is a class component. */
+export declare const isClassComponent: (component: any) => component is React.ComponentClass<any, any>;
+/** Checks if a given value is a forward ref component. */
+export declare const isForwardRefComponent: (component: any) => component is React.ForwardRefExoticComponent<any>;
+/** Checks if a given value is a valid React component (FC, class, or forwardRef). */
+export declare const isReactComponent: (component: any) => component is ReactComponent;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/native/utilities/isReactComponent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/isReactComponent/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,cAAc,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,KAAK,CAAC,yBAAyB,CAAC,GAAG,CAAC,CAAC;AAE5G;;;;;;;;;;;GAWG;AAEH,uDAAuD;AAEvD,eAAO,MAAM,mBAAmB,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,KAAK,CAAC,EAAE,CAAC,GAAG,CAE7E,CAAC;AAEF,oDAAoD;AAEpD,eAAO,MAAM,gBAAgB,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE,GAAG,CAE3F,CAAC;AAEF,0DAA0D;AAE1D,eAAO,MAAM,qBAAqB,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,KAAK,CAAC,yBAAyB,CAAC,GAAG,CAEtG,CAAC;AAEF,qFAAqF;AAErF,eAAO,MAAM,gBAAgB,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,cAE9D,CAAC"}

package/dist/native/utilities/isReactComponent/index.js

@@ -0,0 +1,35 @@
+/**
+ * Backs Untitled UI's `@/utils/is-react-component` import.
+ *
+ * Distinguishes a component passed as a prop (an icon `FC`, class component, or
+ * `forwardRef` object you instantiate) from an already-rendered element
+ * (handled via React's `isValidElement`). Untitled UI icon props accept either
+ * form; these guards select the "render it yourself" branch.
+ *
+ * Pure JS with no DOM dependency — works on web (PostCSS) and React Native
+ * (NativeWind). Imported by components as
+ * `@flipdish/ui-library/utilities/isReactComponent`.
+ */
+/** Checks if a given value is a function component. */
+// biome-ignore lint/suspicious/noExplicitAny: required for React component type guard
+const isFunctionComponent = (component) => {
+    return typeof component === 'function';
+};
+/** Checks if a given value is a class component. */
+// biome-ignore lint/suspicious/noExplicitAny: required for React component type guard
+const isClassComponent = (component) => {
+    return typeof component === 'function' && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+/** Checks if a given value is a forward ref component. */
+// biome-ignore lint/suspicious/noExplicitAny: required for React component type guard
+const isForwardRefComponent = (component) => {
+    return typeof component === 'object' && component !== null && component.$$typeof?.toString() === 'Symbol(react.forward_ref)';
+};
+/** Checks if a given value is a valid React component (FC, class, or forwardRef). */
+// biome-ignore lint/suspicious/noExplicitAny: required for React component type guard
+const isReactComponent = (component) => {
+    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};
+
+export { isClassComponent, isForwardRefComponent, isFunctionComponent, isReactComponent };
+//# sourceMappingURL=index.js.map

package/dist/native/utilities/isReactComponent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/utilities/isReactComponent/index.ts"],"sourcesContent":[null],"names":[],"mappings":"AAMA;;;;;;;;;;;AAWG;AAEH;AACA;AACO,MAAM,mBAAmB,GAAG,CAAC,SAAc,KAAgC;AAChF,IAAA,OAAO,OAAO,SAAS,KAAK,UAAU;AACxC;AAEA;AACA;AACO,MAAM,gBAAgB,GAAG,CAAC,SAAc,KAAiD;IAC9F,OAAO,OAAO,SAAS,KAAK,UAAU,IAAI,SAAS,CAAC,SAAS,KAAK,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,gBAAgB,IAAI,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC;AAC3I;AAEA;AACA;AACO,MAAM,qBAAqB,GAAG,CAAC,SAAc,KAAuD;AACzG,IAAA,OAAO,OAAO,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,IAAI,IAAI,SAAS,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,2BAA2B;AAC9H;AAEA;AACA;AACO,MAAM,gBAAgB,GAAG,CAAC,SAAc,KAAiC;AAC9E,IAAA,OAAO,mBAAmB,CAAC,SAAS,CAAC,IAAI,qBAAqB,CAAC,SAAS,CAAC,IAAI,gBAAgB,CAAC,SAAS,CAAC;AAC1G;;;;"}

package/dist/native/utilities/localStorageUtils/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `localStorageUtils` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/utilities/localStorageUtils` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `localStorageUtils` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/utilities/renderUtils/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `renderUtils` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/utilities/renderUtils` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `renderUtils` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/utilities/sessionStorageUtils/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * `sessionStorageUtils` has no React Native implementation.
+ *
+ * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
+ * that importing `@flipdish/ui-library/utilities/sessionStorageUtils` from React Native fails at
+ * compile time rather than resolving to the web build's types. There is no
+ * matching `index.js`, so Metro cannot bundle this module either.
+ *
+ * To make `sessionStorageUtils` available on React Native, add an `index.native.tsx` beside
+ * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ */
+export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;

package/dist/native/utilities/testIdUtils/index.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Test-id convention for `@flipdish/ui-library`.
+ *
+ * Every component exposes an overridable `data-testid`. When omitted, a default
+ * is derived so automated tests always have a stable hook:
+ *
+ * - Root components default to `fd-<kebab-name>` (e.g. `fd-sidebar-navigation`).
+ * - Nested components inherit the ancestor's *resolved* testid as their prefix
+ *   and append `--<segment>`, so the `fd-` prefix appears exactly once at the
+ *   front: `fd-sidebar-navigation--nav-item-orders`.
+ * - A consumer-provided `data-testid` always wins and re-roots the prefix for
+ *   everything beneath it.
+ *
+ * Pure React (no DOM / react-aria dependency), so it is safe to import from any
+ * layer. Consumed as `@flipdish/ui-library/utilities/testIdUtils`.
+ */
+/** Namespace prepended to every root-level testid. */
+export declare const TEST_ID_PREFIX = "fd";
+/** Separator placed between hierarchy levels (within a segment, use single `-`). */
+export declare const TEST_ID_SEPARATOR = "--";
+/** Convert an arbitrary string into a kebab-case, testid-safe segment. */
+export declare const slugifyTestId: (value: string) => string;
+/** Build a root-level testid, e.g. `rootTestId('sidebar-navigation')` -> `fd-sidebar-navigation`. */
+export declare const rootTestId: (kebabName: string) => string;
+/** Append a child segment to a parent testid, e.g. `joinTestId('fd-x', 'nav-item-orders')` -> `fd-x--nav-item-orders`. */
+export declare const joinTestId: (prefix: string, segment: string) => string;
+/** Return the override when provided, otherwise the fallback (explicit-child case). */
+export declare const resolveTestId: (override: string | undefined, fallback: string) => string;
+/**
+ * Spread helper for the resolved testid. Returns `{ 'data-testid': value }` when
+ * a value is present, otherwise an empty object. Centralising this keeps the
+ * emitted attribute name in one place (a React Native sibling can map it to
+ * `testID` in a follow-up without touching call sites).
+ */
+export declare const testIdProps: (testId: string | undefined) => {
+    "data-testid"?: string;
+};
+/** Context carrying the current resolved testid, used as the prefix for descendant components. */
+export declare const TestIdContext: import("react").Context<string | undefined>;
+/** Provides a resolved testid as the prefix for descendant library components. */
+export declare const TestIdProvider: import("react").Provider<string | undefined>;
+/** Read the testid prefix contributed by an ancestor component (`undefined` at the root). */
+export declare const useTestIdPrefix: () => string | undefined;
+export interface UseResolvedTestIdOptions {
+    /** Consumer-provided override; wins over any derived value. */
+    testId?: string;
+    /** Segment appended to the inherited prefix when nested. */
+    segment: string;
+    /** Kebab component name used to build the root default when not nested. */
+    rootName: string;
+}
+/**
+ * Resolve a component's testid: an explicit override wins; otherwise derive
+ * `<ancestorPrefix>--<segment>` when nested, or `fd-<rootName>` at the root.
+ */
+export declare const useResolvedTestId: ({ testId, segment, rootName }: UseResolvedTestIdOptions) => string;
+//# sourceMappingURL=index.d.ts.map

package/dist/native/utilities/testIdUtils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/utilities/testIdUtils/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,sDAAsD;AACtD,eAAO,MAAM,cAAc,OAAO,CAAC;AAEnC,oFAAoF;AACpF,eAAO,MAAM,iBAAiB,OAAO,CAAC;AAEtC,0EAA0E;AAC1E,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAKlB,CAAC;AAE7B,qGAAqG;AACrG,eAAO,MAAM,UAAU,GAAI,WAAW,MAAM,KAAG,MAA0C,CAAC;AAE1F,0HAA0H;AAC1H,eAAO,MAAM,UAAU,GAAI,QAAQ,MAAM,EAAE,SAAS,MAAM,KAAG,MAAmD,CAAC;AAEjH,uFAAuF;AACvF,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,GAAG,SAAS,EAAE,UAAU,MAAM,KAAG,MAA8B,CAAC;AAE9G;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,QAAQ,MAAM,GAAG,SAAS,KAAG;IAAE,aAAa,CAAC,EAAE,MAAM,CAAA;CAA+C,CAAC;AAEjI,kGAAkG;AAClG,eAAO,MAAM,aAAa,6CAA+C,CAAC;AAE1E,kFAAkF;AAClF,eAAO,MAAM,cAAc,8CAAyB,CAAC;AAErD,6FAA6F;AAC7F,eAAO,MAAM,eAAe,QAAO,MAAM,GAAG,SAAsC,CAAC;AAEnF,MAAM,WAAW,wBAAwB;IACvC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,+BAA+B,wBAAwB,KAAG,MAG3F,CAAC"}

package/dist/native/utilities/testIdUtils/index.js

@@ -0,0 +1,58 @@
+import { createContext, useContext } from 'react';
+
+/**
+ * Test-id convention for `@flipdish/ui-library`.
+ *
+ * Every component exposes an overridable `data-testid`. When omitted, a default
+ * is derived so automated tests always have a stable hook:
+ *
+ * - Root components default to `fd-<kebab-name>` (e.g. `fd-sidebar-navigation`).
+ * - Nested components inherit the ancestor's *resolved* testid as their prefix
+ *   and append `--<segment>`, so the `fd-` prefix appears exactly once at the
+ *   front: `fd-sidebar-navigation--nav-item-orders`.
+ * - A consumer-provided `data-testid` always wins and re-roots the prefix for
+ *   everything beneath it.
+ *
+ * Pure React (no DOM / react-aria dependency), so it is safe to import from any
+ * layer. Consumed as `@flipdish/ui-library/utilities/testIdUtils`.
+ */
+/** Namespace prepended to every root-level testid. */
+const TEST_ID_PREFIX = 'fd';
+/** Separator placed between hierarchy levels (within a segment, use single `-`). */
+const TEST_ID_SEPARATOR = '--';
+/** Convert an arbitrary string into a kebab-case, testid-safe segment. */
+const slugifyTestId = (value) => value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+/** Build a root-level testid, e.g. `rootTestId('sidebar-navigation')` -> `fd-sidebar-navigation`. */
+const rootTestId = (kebabName) => `${TEST_ID_PREFIX}-${kebabName}`;
+/** Append a child segment to a parent testid, e.g. `joinTestId('fd-x', 'nav-item-orders')` -> `fd-x--nav-item-orders`. */
+const joinTestId = (prefix, segment) => `${prefix}${TEST_ID_SEPARATOR}${segment}`;
+/** Return the override when provided, otherwise the fallback (explicit-child case). */
+const resolveTestId = (override, fallback) => override ?? fallback;
+/**
+ * Spread helper for the resolved testid. Returns `{ 'data-testid': value }` when
+ * a value is present, otherwise an empty object. Centralising this keeps the
+ * emitted attribute name in one place (a React Native sibling can map it to
+ * `testID` in a follow-up without touching call sites).
+ */
+const testIdProps = (testId) => (testId ? { 'data-testid': testId } : {});
+/** Context carrying the current resolved testid, used as the prefix for descendant components. */
+const TestIdContext = createContext(undefined);
+/** Provides a resolved testid as the prefix for descendant library components. */
+const TestIdProvider = TestIdContext.Provider;
+/** Read the testid prefix contributed by an ancestor component (`undefined` at the root). */
+const useTestIdPrefix = () => useContext(TestIdContext);
+/**
+ * Resolve a component's testid: an explicit override wins; otherwise derive
+ * `<ancestorPrefix>--<segment>` when nested, or `fd-<rootName>` at the root.
+ */
+const useResolvedTestId = ({ testId, segment, rootName }) => {
+    const prefix = useTestIdPrefix();
+    return testId ?? (prefix ? joinTestId(prefix, segment) : rootTestId(rootName));
+};
+
+export { TEST_ID_PREFIX, TEST_ID_SEPARATOR, TestIdContext, TestIdProvider, joinTestId, resolveTestId, rootTestId, slugifyTestId, testIdProps, useResolvedTestId, useTestIdPrefix };
+//# sourceMappingURL=index.js.map

package/dist/native/utilities/testIdUtils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/utilities/testIdUtils/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;;;;;;;;;;;;;;;AAeG;AAEH;AACO,MAAM,cAAc,GAAG;AAE9B;AACO,MAAM,iBAAiB,GAAG;AAEjC;MACa,aAAa,GAAG,CAAC,KAAa,KACzC;AACG,KAAA,WAAW;AACX,KAAA,IAAI;AACJ,KAAA,OAAO,CAAC,aAAa,EAAE,GAAG;AAC1B,KAAA,OAAO,CAAC,UAAU,EAAE,EAAE;AAE3B;AACO,MAAM,UAAU,GAAG,CAAC,SAAiB,KAAa,CAAA,EAAG,cAAc,CAAA,CAAA,EAAI,SAAS;AAEvF;AACO,MAAM,UAAU,GAAG,CAAC,MAAc,EAAE,OAAe,KAAa,GAAG,MAAM,CAAA,EAAG,iBAAiB,CAAA,EAAG,OAAO;AAE9G;AACO,MAAM,aAAa,GAAG,CAAC,QAA4B,EAAE,QAAgB,KAAa,QAAQ,IAAI;AAErG;;;;;AAKG;AACI,MAAM,WAAW,GAAG,CAAC,MAA0B,MAAkC,MAAM,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE;AAE/H;MACa,aAAa,GAAG,aAAa,CAAqB,SAAS;AAExE;AACO,MAAM,cAAc,GAAG,aAAa,CAAC;AAE5C;AACO,MAAM,eAAe,GAAG,MAA0B,UAAU,CAAC,aAAa;AAWjF;;;AAGG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAA4B,KAAY;AACnG,IAAA,MAAM,MAAM,GAAG,eAAe,EAAE;IAChC,OAAO,MAAM,KAAK,MAAM,GAAG,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;AAChF;;;;"}

package/dist/styles.css

@@ -30,6 +30,16 @@
  */
 @source ".";
 
+/*
+ * ...but not the React Native tree. Without these, a class used only by a `.native`
+ * component generates a utility in every web app's CSS — the one way native code can
+ * cost web consumers bytes, since the native JS itself is unreachable through the
+ * `exports` map. Two exclusions because the scan root differs: `native` is the built
+ * tree an installed consumer sees, `*.native.tsx` the sources scanned in dev/Storybook.
+ */
+@source not "./native";
+@source not "./**/*.native.tsx";
+
 /*
  * Untitled UI runtime plugins (per https://www.untitledui.com/react/integrations/vite).
  */

package/dist/styles.native.css

@@ -0,0 +1,41 @@
+/*
+ * React Native Tailwind runtime for `@flipdish/ui-library`, compiled by NativeWind.
+ *
+ * Consumed by an Expo / React Native app's global CSS entry via:
+ *
+ *   @import "@flipdish/ui-library/styles.native";
+ *
+ * Deliberately NOT `styles.css`. That file is the web runtime and is mostly
+ * inapplicable here — it declares `@plugin "tailwindcss-animate"` and
+ * `@plugin "tailwindcss-react-aria-components"` (both web-only), an `@utility`
+ * built on `::-webkit-scrollbar`, an `@layer base` block of `html`/`input`
+ * resets, and the Shiki syntax-highlighting overrides. Its `@source "."` would
+ * also scan the web JS output in `dist/`, generating utilities React Native can
+ * never use.
+ *
+ * A separate subpath rather than a `react-native` export condition on `./styles`:
+ * `@import` is resolved by Tailwind's CSS resolver, which applies the `style` /
+ * `default` conditions — not `react-native`.
+ *
+ * Tokens live separately; import them alongside this file:
+ *
+ *   @import "tailwindcss";
+ *   @import "@flipdish/ui-tokens/css";
+ *   @import "@flipdish/ui-library/styles.native";
+ *
+ * Dark mode is intentionally left to NativeWind's default, which follows the
+ * device colour scheme via `useColorScheme`. The web runtime remaps `dark:` onto
+ * `[data-theme="dark"]`; replicating that here would break RN dark mode, since
+ * there is no DOM attribute to cascade from.
+ */
+
+/*
+ * Scan only the native build output. Resolves relative to this file's real
+ * location, which is `dist/` once shipped — so this is `dist/native`, the tree
+ * built by rollup.native.config.js, and never the web output beside it. There is
+ * no in-repo dev equivalent: native variants aren't previewed in Storybook, so
+ * this file is only ever consumed from the published package. A bare directory
+ * source avoids brace globs, which Tailwind's CSS parser rejects — even in a
+ * comment, so don't reintroduce one.
+ */
+@source "./native";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.12.4",
+  "version": "0.13.1",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "sideEffects": [
@@ -19,37 +19,66 @@
   },
   "exports": {
     "./styles": "./dist/styles.css",
+    "./styles.native": "./dist/styles.native.css",
     "./components/atoms/*": {
+      "react-native": {
+        "types": "./dist/native/components/atoms/*/index.d.ts",
+        "default": "./dist/native/components/atoms/*/index.js"
+      },
       "types": "./dist/components/atoms/*/index.d.ts",
       "import": "./dist/components/atoms/*/index.js",
       "require": "./dist/components/atoms/*/index.cjs"
     },
     "./components/molecules/*": {
+      "react-native": {
+        "types": "./dist/native/components/molecules/*/index.d.ts",
+        "default": "./dist/native/components/molecules/*/index.js"
+      },
       "types": "./dist/components/molecules/*/index.d.ts",
       "import": "./dist/components/molecules/*/index.js",
       "require": "./dist/components/molecules/*/index.cjs"
     },
     "./components/organisms/*": {
+      "react-native": {
+        "types": "./dist/native/components/organisms/*/index.d.ts",
+        "default": "./dist/native/components/organisms/*/index.js"
+      },
       "types": "./dist/components/organisms/*/index.d.ts",
       "import": "./dist/components/organisms/*/index.js",
       "require": "./dist/components/organisms/*/index.cjs"
     },
     "./components/templates/*": {
+      "react-native": {
+        "types": "./dist/native/components/templates/*/index.d.ts",
+        "default": "./dist/native/components/templates/*/index.js"
+      },
       "types": "./dist/components/templates/*/index.d.ts",
       "import": "./dist/components/templates/*/index.js",
       "require": "./dist/components/templates/*/index.cjs"
     },
     "./providers/*": {
+      "react-native": {
+        "types": "./dist/native/providers/*/index.d.ts",
+        "default": "./dist/native/providers/*/index.js"
+      },
       "types": "./dist/providers/*/index.d.ts",
       "import": "./dist/providers/*/index.js",
       "require": "./dist/providers/*/index.cjs"
     },
     "./hooks/*": {
+      "react-native": {
+        "types": "./dist/native/hooks/*/index.d.ts",
+        "default": "./dist/native/hooks/*/index.js"
+      },
       "types": "./dist/hooks/*/index.d.ts",
       "import": "./dist/hooks/*/index.js",
       "require": "./dist/hooks/*/index.cjs"
     },
     "./utilities/*": {
+      "react-native": {
+        "types": "./dist/native/utilities/*/index.d.ts",
+        "default": "./dist/native/utilities/*/index.js"
+      },
       "types": "./dist/utilities/*/index.d.ts",
       "import": "./dist/utilities/*/index.js",
       "require": "./dist/utilities/*/index.cjs"
@@ -69,6 +98,7 @@
     "@flipdish/ui-icons": "^0.3.2"
   },
   "peerDependencies": {
+    "@expo/metro-config": ">=54.0.0",
     "@react-native-aria/focus": ">=0.2.7",
     "@react-native-aria/interactions": ">=0.2.7",
     "@tiptap/core": "^3.27.1",
@@ -83,8 +113,9 @@
     "embla-carousel-react": "^8.6.0",
     "hast-util-to-jsx-runtime": "^2.3.6",
     "input-otp": "^1.4.2",
+    "lightningcss": ">=1.27.0 <1.30.2",
     "motion": "^12.40.0",
-    "nativewind": "^4.1.0",
+    "nativewind": "^5.0.0-preview.4",
     "postcss-prefix-selector": "^2.1.1",
     "qr-code-styling": "^1.9.2",
     "react": "^19.0.0",
@@ -92,7 +123,8 @@
     "react-aria-components": "^1.18.0",
     "react-dom": "^19.0.0",
     "react-hotkeys-hook": "^5.3.2",
-    "react-native": ">=0.79.0",
+    "react-native": ">=0.81.0",
+    "react-native-css": "^3.0.7",
     "react-router": "^7.0.0",
     "recharts": "^3.8.1",
     "shiki": "^4.2.0",
@@ -100,6 +132,9 @@
     "tailwind-variants": "^3.2.2"
   },
   "peerDependenciesMeta": {
+    "@expo/metro-config": {
+      "optional": true
+    },
     "@react-native-aria/focus": {
       "optional": true
     },
@@ -139,6 +174,9 @@
     "input-otp": {
       "optional": true
     },
+    "lightningcss": {
+      "optional": true
+    },
     "motion": {
       "optional": true
     },
@@ -166,6 +204,9 @@
     "react-native": {
       "optional": true
     },
+    "react-native-css": {
+      "optional": true
+    },
     "react-router": {
       "optional": true
     },
@@ -208,6 +249,7 @@
     "input-otp": "^1.4.2",
     "jsdom": "^29.1.1",
     "motion": "^12.40.0",
+    "nativewind": "^5.0.0-preview.4",
     "playwright": "^1.61.1",
     "qr-code-styling": "^1.9.2",
     "react": "^19.0.0",
@@ -215,6 +257,7 @@
     "react-aria-components": "^1.18.0",
     "react-dom": "^19.0.0",
     "react-hotkeys-hook": "^5.3.2",
+    "react-native-css": "^3.0.7",
     "react-router": "^7.17.0",
     "recharts": "^3.8.1",
     "remark-gfm": "^4.0.1",
@@ -228,7 +271,9 @@
     "vitest": "^4.1.10"
   },
   "scripts": {
-    "build": "rimraf dist && rollup -c && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && pnpm build:web && pnpm build:native && node scripts/verify-build.mjs && node scripts/check-exports-resolution.mjs",
+    "build:web": "rollup -c && tsc -p tsconfig.build.json",
+    "build:native": "rollup -c rollup.native.config.js && tsc -p tsconfig.build.native.json && node scripts/finalise-native-types.mjs && node scripts/emit-native-stubs.mjs",
     "lint:imports": "node scripts/check-deep-imports.mjs",
     "typecheck": "tsc --noEmit",
     "test": "vitest run --project unit",
@@ -236,7 +281,7 @@
     "test:storybook": "vitest run --project storybook",
     "test:storybook:watch": "vitest --project storybook",
     "test:storybook:coverage": "vitest run --project storybook --coverage",
-    "typecheck:native": "tsc --noEmit -p tsconfig.native.json",
+    "typecheck:native": "node scripts/typecheck-native.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes",