@appinternalleads/ui 0.2.0

package/dist/esm/core/platform.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo, Dimensions, Keyboard, Platform } from 'react-native';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+/**
+ * **The NATIVE half of the platform capabilities.** `platform.web.tsx` is the other, and it
+ * imports no safe-area package — a browser has none of these concepts, and that package's entry
+ * drags in Flow-typed native source no web bundler can read.
+ *
+ * They live in `core/` with every other `react-native` import.
+ *
+ * These are not UI — they are the device answering questions — but they touch the same module,
+ * and the invariant is about the import, not about whether the thing draws. Keeping them here is
+ * what leaves `ds/` and `fields/` free of `react-native` entirely.
+ */
+/**
+ * **How much of the screen the software keyboard is covering.**
+ *
+ * Reported on BOTH platforms, and the caller pays for it on both. Android 15+ is edge-to-edge by
+ * default and `adjustResize` no longer resizes the window — the IME arrives as an inset the app
+ * must consume itself, and the system quietly ignores the manifest. The symptom is nothing like a
+ * crash: the composer sits at the bottom of a window that never shrank, so **the keyboard covers
+ * the field you are typing into.**
+ *
+ * iOS listens to `keyboardWillShow` so padding moves on the same frame the keyboard does; Android
+ * has no `will` events, and `did` is the only honest signal there.
+ */
+export function useKeyboardOverlap() {
+    const [overlap, setOverlap] = useState({ height: 0, shown: false });
+    useEffect(() => {
+        const ios = Platform.OS === 'ios';
+        const subs = [
+            Keyboard.addListener(ios ? 'keyboardWillShow' : 'keyboardDidShow', e => setOverlap({ height: e.endCoordinates.height, shown: true })),
+            Keyboard.addListener(ios ? 'keyboardWillHide' : 'keyboardDidHide', () => setOverlap({ height: 0, shown: false })),
+        ];
+        /**
+         * **iOS also follows the keyboard's frame while it is up** (14 Sep 2026, measured with the Padki keyboard on an iPhone).
+         * A custom keyboard resizes itself without hiding — Padki's grows when an automation form opens over its keys — and
+         * `keyboardWillShow` alone kept the first height, so a field padded by it ended up under the taller keyboard. The
+         * overlap is read from where the keyboard's top edge lands, not its height: a frame sliding off-screen measures 0.
+         */
+        if (ios) {
+            subs.push(Keyboard.addListener('keyboardWillChangeFrame', e => {
+                const height = Math.max(0, Dimensions.get('screen').height - e.endCoordinates.screenY);
+                setOverlap({ height, shown: height > 0 });
+            }));
+        }
+        return () => subs.forEach(s => s.remove());
+    }, []);
+    return overlap;
+}
+/**
+ * The system's Reduce Motion setting.
+ *
+ * **Every animation in the system is required to honour it.** A hook rather than a one-off read
+ * because the setting can change while the app is open, and an animation that only checked at
+ * mount would keep moving after the user turned it off.
+ */
+export function useReduceMotion() {
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        let alive = true;
+        /**
+         * **Both calls are guarded, because `react-native-web` does not implement either the same
+         * way.** `addEventListener` returns `undefined` there rather than a subscription, so an
+         * unguarded `sub.remove()` throws on unmount — and since this hook now runs inside `Icon`,
+         * that was every icon on every screen. It surfaced the moment a web test rendered one.
+         */
+        void AccessibilityInfo.isReduceMotionEnabled?.()
+            ?.then(v => {
+            if (alive)
+                setReduced(v);
+        })
+            .catch(() => { });
+        const sub = AccessibilityInfo.addEventListener?.('reduceMotionChanged', setReduced);
+        return () => {
+            alive = false;
+            sub?.remove?.();
+        };
+    }, []);
+    return reduced;
+}
+export function useInsets() {
+    return useSafeAreaInsets();
+}
+/** The safe area, as a container. Applies its insets as padding rather than as a clip. */
+export function SafeArea({ children, edges = ['top', 'left', 'right'] }) {
+    return _jsx(SafeAreaView, { style: { flex: 1 }, edges: edges, children: children });
+}
+//# sourceMappingURL=platform.js.map

package/dist/esm/core/platform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.js","sourceRoot":"","sources":["../../../src/core/platform.tsx"],"names":[],"mappings":"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"}

package/dist/esm/core/platform.types.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export type KeyboardOverlap = {
+    height: number;
+    shown: boolean;
+};
+export type Insets = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type SafeAreaProps = {
+    children?: ReactNode;
+    edges?: ('top' | 'bottom' | 'left' | 'right')[];
+};
+//# sourceMappingURL=platform.types.d.ts.map

package/dist/esm/core/platform.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.types.d.ts","sourceRoot":"","sources":["../../../src/core/platform.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,eAAe,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,CAAC;AACjE,MAAM,MAAM,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAClF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,CAAC,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,EAAE,CAAC;CACjD,CAAC"}

package/dist/esm/core/platform.types.js

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

package/dist/esm/core/platform.types.js.map

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

package/dist/esm/core/platform.web.d.ts

@@ -0,0 +1,22 @@
+import type { Insets, KeyboardOverlap, SafeAreaProps } from './platform.types';
+export type { Insets, KeyboardOverlap, SafeAreaProps };
+/**
+ * **The web half of the platform capabilities — and it imports no safe-area package at all.**
+ *
+ * `react-native-safe-area-context`'s entry pulls in its native spec, which imports
+ * `react-native/Libraries/Utilities/codegenNativeComponent` — Flow-typed source that no web
+ * bundler can parse. Aliasing around that is a running battle; a browser simply has none of these
+ * concepts, so the honest answer is a separate file rather than a shim.
+ *
+ * The one thing here that is genuinely BETTER than the native path is Reduce Motion:
+ * `prefers-reduced-motion` is the real web signal, where RN's `AccessibilityInfo` on
+ * `react-native-web` returns an undefined subscription and no value.
+ */
+/** A browser has no notch and no home indicator. */
+export declare function useInsets(): Insets;
+/** Nothing to avoid: a software keyboard on the web does not overlay the viewport. */
+export declare function useKeyboardOverlap(): KeyboardOverlap;
+export declare function useReduceMotion(): boolean;
+/** No insets to apply, so this is the container and nothing more. */
+export declare function SafeArea({ children }: SafeAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=platform.web.d.ts.map

package/dist/esm/core/platform.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.web.d.ts","sourceRoot":"","sources":["../../../src/core/platform.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE/E,YAAY,EAAE,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAEvD;;;;;;;;;;;GAWG;AAEH,oDAAoD;AACpD,wBAAgB,SAAS,IAAI,MAAM,CAElC;AAED,sFAAsF;AACtF,wBAAgB,kBAAkB,IAAI,eAAe,CAEpD;AAED,wBAAgB,eAAe,IAAI,OAAO,CAWzC;AAED,qEAAqE;AACrE,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAEnD"}

package/dist/esm/core/platform.web.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { View } from 'react-native';
+/**
+ * **The web half of the platform capabilities — and it imports no safe-area package at all.**
+ *
+ * `react-native-safe-area-context`'s entry pulls in its native spec, which imports
+ * `react-native/Libraries/Utilities/codegenNativeComponent` — Flow-typed source that no web
+ * bundler can parse. Aliasing around that is a running battle; a browser simply has none of these
+ * concepts, so the honest answer is a separate file rather than a shim.
+ *
+ * The one thing here that is genuinely BETTER than the native path is Reduce Motion:
+ * `prefers-reduced-motion` is the real web signal, where RN's `AccessibilityInfo` on
+ * `react-native-web` returns an undefined subscription and no value.
+ */
+/** A browser has no notch and no home indicator. */
+export function useInsets() {
+    return { top: 0, right: 0, bottom: 0, left: 0 };
+}
+/** Nothing to avoid: a software keyboard on the web does not overlay the viewport. */
+export function useKeyboardOverlap() {
+    return { height: 0, shown: false };
+}
+export function useReduceMotion() {
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        const mq = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+        if (!mq)
+            return;
+        setReduced(mq.matches);
+        const on = (e) => setReduced(e.matches);
+        mq.addEventListener('change', on);
+        return () => mq.removeEventListener('change', on);
+    }, []);
+    return reduced;
+}
+/** No insets to apply, so this is the container and nothing more. */
+export function SafeArea({ children }) {
+    return _jsx(View, { style: { flex: 1 }, children: children });
+}
+//# sourceMappingURL=platform.web.js.map

package/dist/esm/core/platform.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.web.js","sourceRoot":"","sources":["../../../src/core/platform.web.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAKpC;;;;;;;;;;;GAWG;AAEH,oDAAoD;AACpD,MAAM,UAAU,SAAS;IACvB,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;AAClD,CAAC;AAED,sFAAsF;AACtF,MAAM,UAAU,kBAAkB;IAChC,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC;QACnE,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;QACvB,MAAM,EAAE,GAAG,CAAC,CAAsB,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC7D,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAClC,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACpD,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,qEAAqE;AACrE,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAiB;IAClD,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAAG,QAAQ,GAAQ,CAAC;AACrD,CAAC"}

package/dist/esm/core/roles.d.ts

@@ -0,0 +1,47 @@
+import type { Colors, Kind, Status } from '../tokens';
+import { radii, widgetPart } from '../tokens';
+/**
+ * **The palette, partitioned by role — and this is the load-bearing idea in the core.**
+ *
+ * SPEC §5.2 makes colour resolution role-scoped so that a generator cannot put a ground token on
+ * a text colour. Expressing the partition as a TYPE moves the same guarantee to hand-written
+ * code, which the generator's resolver could never reach.
+ *
+ * The rule it enforces is the widget contract's one ⚠ hard rule, locked decision 79:
+ *
+ * > `#C1502E` is 3.1:1 on white and **fails as text**. Every numeral, label and value rendered
+ * > in accent takes `#A8421F`. The fill is for backgrounds and bars only.
+ *
+ * `accentFill` is a GROUND. It is absent from `InkToken`, so `<Text color="accentFill">` does
+ * not compile — the mistake is unavailable rather than merely reviewable.
+ */
+/** Legal as a text colour. */
+export declare const INK_TOKENS: readonly ["textPrimary", "textSecondary", "textTertiary", "textDisabled", "textOnAccent", "accentInk", "accentOnFill", "brandOnPrimary", "alertInk"];
+/** Legal as a background. */
+export declare const GROUND_TOKENS: readonly ["surfacePage", "surface1", "surface2", "surface3", "surfaceSunken", "band", "accentFill", "accentTint", "accentPressed", "brandPrimary", "brandSubtle", "alertSoft"];
+/** Legal as a hairline or a rule. Never as a fill, never as text. */
+export declare const LINE_TOKENS: readonly ["hairline", "hairlineStrong", "dashed"];
+/**
+ * The dotted forms reach the `Record`-shaped slots — `status.error`, `kind.flow`.
+ *
+ * They exist so a caller never has to drop to `useDs().colors` and pass a resolved string,
+ * which is the hole every escape hatch of this kind leaks through: a resolved string is
+ * indistinguishable from a hex at the prop boundary.
+ */
+export type InkToken = (typeof INK_TOKENS)[number] | `status.${Status}` | `kind.${Kind}` | 'reference' | 'capability';
+export type GroundToken = (typeof GROUND_TOKENS)[number] | `statusBg.${Status}` | `kindBg.${Kind}` | 'referenceBg' | 'capabilityBg';
+export type LineToken = (typeof LINE_TOKENS)[number];
+/** `radii` rungs, plus `widgetPart` under a `part.` prefix. */
+export type RadiusToken = keyof typeof radii | `part.${keyof typeof widgetPart}`;
+export declare function inkFor(colors: Colors, token: InkToken): string;
+export declare function groundFor(colors: Colors, token: GroundToken): string;
+export declare function lineFor(colors: Colors, token: LineToken): string;
+/**
+ * `widgetPart` is checked first, per SPEC §5.1.
+ *
+ * It wins because it exists precisely to stop the drift it was created after — the widget layer
+ * had reached seven radii and eight font sizes before it was introduced. A part of a widget's
+ * interior names its rung through `part.*` and never reaches into `radii` directly.
+ */
+export declare function radiusFor(token: RadiusToken): number;
+//# sourceMappingURL=roles.d.ts.map

package/dist/esm/core/roles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roles.d.ts","sourceRoot":"","sources":["../../../src/core/roles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;;;;;;;;;;;GAcG;AAEH,8BAA8B;AAC9B,eAAO,MAAM,UAAU,sJAGb,CAAC;AAEX,6BAA6B;AAC7B,eAAO,MAAM,aAAa,gLAGhB,CAAC;AAEX,qEAAqE;AACrE,eAAO,MAAM,WAAW,mDAAoD,CAAC;AAE7E;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAChB,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,GAC3B,UAAU,MAAM,EAAE,GAClB,QAAQ,IAAI,EAAE,GACd,WAAW,GACX,YAAY,CAAC;AAEjB,MAAM,MAAM,WAAW,GACnB,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,GAC9B,YAAY,MAAM,EAAE,GACpB,UAAU,IAAI,EAAE,GAChB,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,+DAA+D;AAC/D,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,GAAG,QAAQ,MAAM,OAAO,UAAU,EAAE,CAAC;AAEjF,wBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,GAAG,MAAM,CAM9D;AAED,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,MAAM,CAMpE;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,GAAG,MAAM,CAEhE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,MAAM,CAKpD"}

package/dist/esm/core/roles.js

@@ -0,0 +1,67 @@
+import { radii, widgetPart } from '../tokens';
+/**
+ * **The palette, partitioned by role — and this is the load-bearing idea in the core.**
+ *
+ * SPEC §5.2 makes colour resolution role-scoped so that a generator cannot put a ground token on
+ * a text colour. Expressing the partition as a TYPE moves the same guarantee to hand-written
+ * code, which the generator's resolver could never reach.
+ *
+ * The rule it enforces is the widget contract's one ⚠ hard rule, locked decision 79:
+ *
+ * > `#C1502E` is 3.1:1 on white and **fails as text**. Every numeral, label and value rendered
+ * > in accent takes `#A8421F`. The fill is for backgrounds and bars only.
+ *
+ * `accentFill` is a GROUND. It is absent from `InkToken`, so `<Text color="accentFill">` does
+ * not compile — the mistake is unavailable rather than merely reviewable.
+ */
+/** Legal as a text colour. */
+export const INK_TOKENS = [
+    'textPrimary', 'textSecondary', 'textTertiary', 'textDisabled', 'textOnAccent',
+    'accentInk', 'accentOnFill', 'brandOnPrimary', 'alertInk',
+];
+/** Legal as a background. */
+export const GROUND_TOKENS = [
+    'surfacePage', 'surface1', 'surface2', 'surface3', 'surfaceSunken', 'band',
+    'accentFill', 'accentTint', 'accentPressed', 'brandPrimary', 'brandSubtle', 'alertSoft',
+];
+/** Legal as a hairline or a rule. Never as a fill, never as text. */
+export const LINE_TOKENS = ['hairline', 'hairlineStrong', 'dashed'];
+export function inkFor(colors, token) {
+    if (token === 'reference')
+        return colors.reference.fg;
+    if (token === 'capability')
+        return colors.capability.fg;
+    if (token.startsWith('status.'))
+        return colors.status[token.slice(7)];
+    if (token.startsWith('kind.'))
+        return colors.kind[token.slice(5)].fg;
+    return colors[token];
+}
+export function groundFor(colors, token) {
+    if (token === 'referenceBg')
+        return colors.reference.bg;
+    if (token === 'capabilityBg')
+        return colors.capability.bg;
+    if (token.startsWith('statusBg.'))
+        return colors.statusBg[token.slice(9)];
+    if (token.startsWith('kindBg.'))
+        return colors.kind[token.slice(7)].bg;
+    return colors[token];
+}
+export function lineFor(colors, token) {
+    return colors[token];
+}
+/**
+ * `widgetPart` is checked first, per SPEC §5.1.
+ *
+ * It wins because it exists precisely to stop the drift it was created after — the widget layer
+ * had reached seven radii and eight font sizes before it was introduced. A part of a widget's
+ * interior names its rung through `part.*` and never reaches into `radii` directly.
+ */
+export function radiusFor(token) {
+    if (typeof token === 'string' && token.startsWith('part.')) {
+        return widgetPart[token.slice(5)];
+    }
+    return radii[token];
+}
+//# sourceMappingURL=roles.js.map

package/dist/esm/core/roles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roles.js","sourceRoot":"","sources":["../../../src/core/roles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;;;;;;;;;;;GAcG;AAEH,8BAA8B;AAC9B,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,aAAa,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc;IAC9E,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,UAAU;CACjD,CAAC;AAEX,6BAA6B;AAC7B,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM;IAC1E,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW;CAC/E,CAAC;AAEX,qEAAqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAU,EAAE,gBAAgB,EAAE,QAAQ,CAAU,CAAC;AA4B7E,MAAM,UAAU,MAAM,CAAC,MAAc,EAAE,KAAe;IACpD,IAAI,KAAK,KAAK,WAAW;QAAE,OAAO,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;IACtD,IAAI,KAAK,KAAK,YAAY;QAAE,OAAO,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC;IACxD,IAAI,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC;QAAE,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;IAChF,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;QAAE,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAS,CAAC,CAAC,EAAE,CAAC;IAC7E,OAAO,MAAM,CAAC,KAAoC,CAAC,CAAC;AACtD,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,MAAc,EAAE,KAAkB;IAC1D,IAAI,KAAK,KAAK,aAAa;QAAE,OAAO,MAAM,CAAC,SAAS,CAAC,EAAE,CAAC;IACxD,IAAI,KAAK,KAAK,cAAc;QAAE,OAAO,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC;IAC1D,IAAI,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC;QAAE,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;IACpF,IAAI,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC;QAAE,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAS,CAAC,CAAC,EAAE,CAAC;IAC/E,OAAO,MAAM,CAAC,KAAuC,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,KAAgB;IACtD,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CAAC,KAAkB;IAC1C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,CAAC;QAC3D,OAAO,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAA4B,CAAC,CAAC;IAC/D,CAAC;IACD,OAAO,KAAK,CAAC,KAA2B,CAAC,CAAC;AAC5C,CAAC"}

package/dist/esm/ds/Banner.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+/**
+ * A line across the top of a screen saying what is wrong, or what is happening.
+ *
+ * **Cached rows stay undimmed underneath it.** The banner reports a condition; it does not claim
+ * the content below became untrue. Dimming would say the opposite.
+ *
+ * `progress` renders a determinate 3px hairline — omitted entirely rather than shown at zero,
+ * because a bar sitting at zero reads as stuck rather than as not-started.
+ */
+export declare function Banner({ tone, title, meta, progress, action, actionPlacement, style, }: {
+    /** `needsUser` (D3) — waiting on the user (reconnect a toolkit, fill a field), not a failure. */
+    tone?: 'error' | 'sync' | 'info' | 'needsUser';
+    title: string;
+    meta?: string;
+    /** 0–1. */
+    progress?: number;
+    action?: ReactNode;
+    /**
+     * `trailing` (default) puts the action beside the text — right for one short control. `below` puts it under the text,
+     * aligned with it: needed when the action is wide (two buttons, a long label), because beside the text it takes the
+     * whole row and the title and meta collapse to nothing (keyShort's keyboard-setup banner showed only its icon and
+     * buttons, 25 Sep 2026). Optional and default-unchanged for every other app.
+     */
+    actionPlacement?: 'trailing' | 'below';
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+/**
+ * A small selectable label.
+ *
+ * **Mono by default**, because most chips here carry a machine string — a trigger, a slug, a
+ * field name. `quiet` drops the label to tertiary ink for a set where some members matter less
+ * than others, so the distinction is legible in the row rather than only in a count above it.
+ */
+export declare function Chip({ children, selected, mono, tone, onPress, }: {
+    children: string;
+    selected?: boolean;
+    mono?: boolean;
+    tone?: 'default' | 'quiet';
+    onPress?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/esm/ds/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/ds/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzD;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAa,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,eAA4B,EAAE,KAAK,GAClF,EAAE;IACD,iGAAiG;IACjG,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,+BAmDA;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EAAE,QAAgB,EAAE,IAAW,EAAE,IAAgB,EAAE,OAAO,GACnE,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,+BAcA"}

package/dist/esm/ds/Banner.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon, Pressable, Text } from '../core';
+import { useDs } from '../tokens';
+/**
+ * A line across the top of a screen saying what is wrong, or what is happening.
+ *
+ * **Cached rows stay undimmed underneath it.** The banner reports a condition; it does not claim
+ * the content below became untrue. Dimming would say the opposite.
+ *
+ * `progress` renders a determinate 3px hairline — omitted entirely rather than shown at zero,
+ * because a bar sitting at zero reads as stuck rather than as not-started.
+ */
+export function Banner({ tone = 'info', title, meta, progress, action, actionPlacement = 'trailing', style, }) {
+    const { colors } = useDs();
+    const ink = tone === 'error' ? 'status.error'
+        : tone === 'sync' ? 'accentInk'
+            : tone === 'needsUser' ? 'status.needsUser'
+                : 'textPrimary';
+    /**
+     * **A banner carries its tone in three places, not only in its title's ink** (14 Sep 2026, product ask: the app read
+     * plain). A tinted ground from the same family, a 3pt edge in the tone's own colour and a leading mark — so the kind of
+     * notice is legible before a word of it is read. `info` takes Solarium's sky (`reference`), which is neither the
+     * accent's live nor a status.
+     */
+    const skin = tone === 'error' ? { ground: colors.statusBg.error, edge: colors.status.error, icon: 'alert' }
+        : tone === 'sync' ? { ground: colors.accentTint, edge: colors.accentFill, icon: 'refresh' }
+            : tone === 'needsUser' ? { ground: colors.statusBg.needsUser, edge: colors.status.needsUser, icon: 'alert' }
+                : { ground: colors.reference.bg, edge: colors.reference.fg, icon: 'info' };
+    /* Centred only when there is one line and nothing beside it; anything more wants the text to
+       start at the top so the block reads as a paragraph rather than as a floating label. */
+    const below = actionPlacement === 'below' && action != null;
+    const align = progress === undefined && !meta && (!action || below) ? 'center' : 'flex-start';
+    return (_jsxs(Box, { bg: "surface1", lift: 1, radius: "row", mx: "s5", mb: "s3", style: [{ backgroundColor: skin.ground, borderLeftWidth: 3, borderLeftColor: skin.edge, overflow: 'hidden' }, style], children: [_jsxs(Box, { row: true, align: align, justify: "space-between", gap: "s3", py: "s3", px: "s4", children: [_jsxs(Box, { row: true, flex: 1, gap: "s3", align: align, children: [_jsx(Box, { pt: align === 'center' ? undefined : 's1', children: _jsx(Icon, { name: skin.icon, size: 16, color: skin.edge }) }), _jsxs(Box, { flex: 1, gap: "s1", children: [_jsx(Text, { variant: "label", color: ink, style: { fontWeight: '600' }, children: title }), meta ? _jsx(Text, { variant: "caption", color: "textSecondary", children: meta }) : null, below ? _jsx(Box, { pt: "s2", children: action }) : null] })] }), below ? null : action] }), progress === undefined ? null : (_jsx(Box, { height: 3, bg: "surfaceSunken", style: { overflow: 'hidden' }, children: _jsx(Box, { height: 3, bg: "accentFill", width: `${Math.round(Math.min(1, Math.max(0, progress)) * 100)}%` }) }))] }));
+}
+/**
+ * A small selectable label.
+ *
+ * **Mono by default**, because most chips here carry a machine string — a trigger, a slug, a
+ * field name. `quiet` drops the label to tertiary ink for a set where some members matter less
+ * than others, so the distinction is legible in the row rather than only in a count above it.
+ */
+export function Chip({ children, selected = false, mono = true, tone = 'default', onPress, }) {
+    const ink = selected ? 'accentInk' : tone === 'quiet' ? 'textTertiary' : 'textSecondary';
+    const body = (_jsx(Box, { alignSelf: "flex-start", bg: selected ? 'accentTint' : 'surfaceSunken', radius: "part.pill", px: "s3", py: "s1", children: _jsx(Text, { variant: "caption", mono: mono, color: ink, children: children }) }));
+    if (!onPress)
+        return body;
+    return _jsx(Pressable, { onPress: onPress, alignSelf: "flex-start", "aria-label": children, children: body });
+}
+//# sourceMappingURL=Banner.js.map

package/dist/esm/ds/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../../src/ds/Banner.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ds/BrandPreview.d.ts

@@ -0,0 +1,25 @@
+/**
+ * **Preview well — five mini mocks of where a brand kit lands (onboarding handoff B10).**
+ *
+ * `appbar` (a workspace's top bar) · `email` (a newsletter header) · `login` (a portal sign-in) ·
+ * `invoice` (an invoice header) · `ticket` (a ticket with its stub and a QR slot).
+ *
+ * **The user's colours appear only inside this well** — that is the handoff's rule, and the reason
+ * this is a block: every other surface in the component stays Solarium. Text laid on a user colour
+ * picks white or ink by `contrast()`, so an unreadable brand colour still produces a readable
+ * preview. The mock cross-fades (M4) whenever what it shows changes.
+ */
+export type BrandPreviewKind = 'appbar' | 'email' | 'login' | 'invoice' | 'ticket';
+export type BrandPreviewProps = {
+    kind: BrandPreviewKind;
+    brandName: string;
+    /** Valid `#RRGGBB` colours — the primary, and optionally a second (accent / button / link / stub). */
+    colors: string[];
+    /** A font family name — the brand name is set in it. */
+    font?: string;
+    /** An image URI for the logo; without it the brand's initials are drawn. */
+    logoUri?: string;
+};
+export declare function initialsOf(name: string): string;
+export declare function BrandPreview({ kind, brandName, colors: brand, font, logoUri }: BrandPreviewProps): import("react").JSX.Element;
+//# sourceMappingURL=BrandPreview.d.ts.map

package/dist/esm/ds/BrandPreview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandPreview.d.ts","sourceRoot":"","sources":["../../../src/ds/BrandPreview.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,gBAAgB,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,sGAAsG;IACtG,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/C;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,iBAAiB,+BA6HhG"}

package/dist/esm/ds/BrandPreview.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Icon, Image, MotionView, Text, useSwap } from '../core';
+import { blockRadii, contrast, useDs } from '../tokens';
+export function initialsOf(name) {
+    return name.split(/\s+/).filter(Boolean).slice(0, 2).map(w => w[0].toUpperCase()).join('');
+}
+export function BrandPreview({ kind, brandName, colors: brand, font, logoUri }) {
+    const { colors } = useDs();
+    const primary = brand[0] ?? colors.textPrimary;
+    const second = brand[1] ?? primary;
+    /* White or ink on a user colour — whichever reads better. */
+    const on = (bg) => (contrast(colors.surface1, bg) >= contrast(colors.textPrimary, bg) ? colors.surface1 : colors.textPrimary);
+    const fade = useSwap(`${kind}|${brand.join(',')}|${font ?? ''}|${logoUri ?? ''}`);
+    const nameStyle = { fontFamily: font, fontWeight: '700' };
+    const Logo = ({ size, ground }) => (_jsx(Box, { width: size, height: size, align: "center", justify: "center", style: { borderRadius: blockRadii.key, backgroundColor: logoUri ? colors.surface1 : ground, overflow: 'hidden' }, children: logoUri
+            ? _jsx(Image, { source: { uri: logoUri }, width: size, height: size, resizeMode: "contain", alt: "" })
+            : _jsx(Text, { style: { fontSize: Math.round(size * 0.42), fontWeight: '700', color: on(ground) }, children: initialsOf(brandName) }) }));
+    const Bar = ({ w, tone = colors.band }) => (_jsx(Box, { height: 6, radius: "pill", width: w, style: { backgroundColor: tone } }));
+    const Pill = ({ bg, label }) => (_jsx(Box, { alignSelf: "flex-start", px: "s3", py: "s1", style: { borderRadius: 6, backgroundColor: bg }, children: _jsx(Text, { style: { fontSize: 11, fontWeight: '600', color: on(bg), fontFamily: font }, children: label }) }));
+    const Paper = ({ children }) => (_jsx(Box, { style: { borderRadius: blockRadii.inset, backgroundColor: colors.surface1, borderWidth: 1, borderColor: colors.hairline, overflow: 'hidden' }, children: children }));
+    let mock;
+    if (kind === 'appbar') {
+        mock = (_jsxs(Paper, { children: [_jsxs(Box, { row: true, align: "center", gap: "s2", style: { backgroundColor: primary, paddingHorizontal: 12, paddingVertical: 10 }, children: [_jsx(Logo, { size: 22, ground: second }), _jsx(Text, { numberOfLines: 1, style: { ...nameStyle, fontSize: 13, color: on(primary), flexShrink: 1 }, children: brandName }), _jsx(Box, { flex: 1 }), _jsx(Box, { width: 20, height: 20, radius: "pill", style: { backgroundColor: on(primary), opacity: 0.25 } })] }), _jsxs(Box, { p: "s3", gap: "s2", children: [_jsx(Bar, { w: "62%", tone: colors.hairlineStrong }), _jsx(Bar, { w: "44%" }), _jsx(Box, { pt: "s1", children: _jsx(Pill, { bg: second, label: "New project" }) })] })] }));
+    }
+    else if (kind === 'email') {
+        mock = (_jsxs(Paper, { children: [_jsxs(Box, { align: "center", gap: "s1", style: { backgroundColor: primary, paddingVertical: 14 }, children: [_jsx(Logo, { size: 26, ground: second }), _jsx(Text, { numberOfLines: 1, style: { ...nameStyle, fontSize: 14, color: on(primary) }, children: brandName })] }), _jsxs(Box, { p: "s3", gap: "s2", children: [_jsx(Bar, { w: "80%", tone: colors.hairlineStrong }), _jsx(Bar, { w: "92%" }), _jsx(Bar, { w: "70%" }), _jsx(Box, { pt: "s1", children: _jsx(Pill, { bg: second, label: "Read the issue" }) })] })] }));
+    }
+    else if (kind === 'login') {
+        mock = (_jsx(Box, { align: "center", style: { paddingVertical: 6 }, children: _jsx(Box, { style: { width: '78%', maxWidth: 260 }, children: _jsx(Paper, { children: _jsxs(Box, { p: "s3", gap: "s2", align: "center", children: [_jsx(Logo, { size: 28, ground: primary }), _jsx(Text, { numberOfLines: 1, style: { ...nameStyle, fontSize: 13, color: colors.textPrimary }, children: brandName }), _jsx(Box, { height: 18, alignSelf: "stretch", style: { borderRadius: 4, borderWidth: 1, borderColor: colors.hairlineStrong } }), _jsx(Box, { height: 18, alignSelf: "stretch", style: { borderRadius: 4, borderWidth: 1, borderColor: colors.hairlineStrong } }), _jsx(Box, { alignSelf: "stretch", align: "center", py: "s1", style: { borderRadius: 6, backgroundColor: primary }, children: _jsx(Text, { style: { fontSize: 11, fontWeight: '600', color: on(primary), fontFamily: font }, children: "Sign in" }) }), _jsx(Text, { style: { fontSize: 11, color: second, fontFamily: font, textDecorationLine: 'underline' }, children: "Forgot password?" })] }) }) }) }));
+    }
+    else if (kind === 'invoice') {
+        mock = (_jsx(Paper, { children: _jsxs(Box, { p: "s3", gap: "s2", children: [_jsxs(Box, { row: true, align: "center", gap: "s2", children: [_jsx(Logo, { size: 24, ground: primary }), _jsx(Text, { numberOfLines: 1, style: { ...nameStyle, fontSize: 13, color: colors.textPrimary, flexShrink: 1 }, children: brandName }), _jsx(Box, { flex: 1 }), _jsx(Text, { style: { fontSize: 11, fontWeight: '700', letterSpacing: 1, color: primary, fontFamily: font }, children: "INVOICE" })] }), _jsx(Box, { height: 2, style: { backgroundColor: primary, borderRadius: 1 } }), _jsxs(Box, { row: true, justify: "space-between", children: [_jsx(Bar, { w: "46%" }), _jsx(Bar, { w: 36 })] }), _jsxs(Box, { row: true, justify: "space-between", children: [_jsx(Bar, { w: "38%" }), _jsx(Bar, { w: 30 })] }), _jsxs(Box, { row: true, justify: "space-between", align: "center", children: [_jsx(Text, { style: { fontSize: 11, fontWeight: '600', color: colors.textPrimary, fontFamily: font }, children: "Total" }), _jsx(Text, { numeric: true, style: { fontSize: 12, fontWeight: '700', color: primary, fontFamily: font }, children: "$4,280.00" })] })] }) }));
+    }
+    else {
+        mock = (_jsxs(Box, { row: true, style: { borderRadius: blockRadii.inset, overflow: 'hidden' }, children: [_jsxs(Box, { flex: 1, gap: "s1", style: { backgroundColor: primary, padding: 12, minWidth: 0 }, children: [_jsx(Logo, { size: 22, ground: second }), _jsx(Text, { numberOfLines: 1, style: { ...nameStyle, fontSize: 14, color: on(primary) }, children: brandName }), _jsx(Text, { style: { fontSize: 11, color: on(primary), fontFamily: font }, children: "Sat 14 Nov \u00B7 Gate 2" })] }), _jsxs(Box, { width: 92, align: "center", justify: "center", gap: "s1", style: { backgroundColor: second, borderLeftWidth: 2, borderLeftColor: colors.surface1, borderStyle: 'dashed', padding: 8 }, children: [_jsx(Box, { width: 40, height: 40, align: "center", justify: "center", style: { borderRadius: 4, backgroundColor: colors.surface1 }, children: _jsx(Icon, { name: "qr", size: 28, color: colors.textPrimary }) }), _jsx(Text, { style: { fontSize: 10, fontWeight: '600', color: on(second), fontFamily: font }, children: "ADMIT ONE" })] })] }));
+    }
+    return (_jsx(Box, { role: "img", "aria-label": `Preview: ${brandName}, ${kind}`, style: { borderRadius: blockRadii.mid, backgroundColor: colors.surfaceSunken, padding: 12 }, children: _jsx(MotionView, { style: { opacity: fade }, children: mock }) }));
+}
+//# sourceMappingURL=BrandPreview.js.map

package/dist/esm/ds/BrandPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandPreview.js","sourceRoot":"","sources":["../../../src/ds/BrandPreview.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ds/Button.d.ts

@@ -0,0 +1,56 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { type ReactNode } from 'react';
+import { type Kind, type Status } from '../tokens';
+import { type IconName } from '../core';
+export type ButtonVariant = 'primary' | 'secondary' | 'brand' | 'outline' | 'ghost' | 'danger';
+/** `xsmall` is Solarium's small ghost (28px, 12/600) — Undo, Try again, Copy inside a row. */
+export type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';
+export type ButtonProps = {
+    children: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    leadingGlyph?: IconName;
+    /** Working — an operation this button started is in flight. Announced as `aria-busy`. */
+    busy?: boolean;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+    /** The accessible name when the visible label is not enough on its own — "Connect Outlook"
+        beside two other "Connect" buttons. Defaults to the label. */
+    'aria-label'?: string;
+    /** A disclosure button — "Filters · 2" opening a panel (batch 3's Filter Panel). */
+    'aria-expanded'?: boolean;
+    'aria-controls'?: string;
+};
+export declare function Button({ children, variant, size, fullWidth, disabled, leadingGlyph, busy, onPress, style, 'aria-label': ariaLabel, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, }: ButtonProps): import("react").JSX.Element;
+/**
+ * A line of meta under something.
+ *
+ * **No `warning` tone yet, though the system has one now.** `status.needsUser` exists since D3
+ * (11 Sep 2026), but nothing has asked this component for it — adding the prop belongs to
+ * whichever screen task needs it first, not to the token change that made it possible. Pending
+ * work with nothing to flag is still informational and takes meta ink. `success` is the accent,
+ * which means just-happened.
+ */
+export declare function Caption({ children, tone, }: {
+    children: ReactNode;
+    tone?: 'danger' | 'success';
+}): import("react").JSX.Element;
+/** The status word. **The dot beside it is redundant by design** — the word carries it. */
+export declare function StatusLabel({ status, children, }: {
+    status: Status;
+    children?: string;
+}): import("react").JSX.Element;
+/**
+ * The kind mark — **the one place colour is allowed**, per the contract: *colour lives in the
+ * leading chip and nowhere else*. Rows are never tinted by kind.
+ *
+ * Android renders a circle, iOS a squircle; Solarium is a rounded square on both, because a
+ * circle there would make the one tinted object in a row read as an avatar.
+ */
+export declare function KindChip({ kind, size }: {
+    kind?: Kind;
+    size?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/dist/esm/ds/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ds/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAC0C,KAAK,IAAI,EAAE,KAAK,MAAM,EACtE,MAAM,WAAW,CAAC;AACnB,OAAO,EAAsC,KAAK,QAAQ,EAAiB,MAAM,SAAS,CAAC;AAE3F,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC/F,8FAA8F;AAC9F,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,yFAAyF;IACzF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;qEACiE;IACjE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oFAAoF;IACpF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AA2CF,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EAAE,OAAqB,EAAE,IAAe,EAChD,SAAiB,EAAE,QAAgB,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAChG,eAAe,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,GAC7D,EAAE,WAAW,+BAiDb;AAED;;;;;;;;GAQG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EAAE,IAAI,GACf,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,IAAI,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;CAAE,+BAItD;AAOD,2FAA2F;AAC3F,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EAAE,QAAQ,GACjB,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,+BAIvC;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAa,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAe/E"}