@laconius/ui 0.1.0

package/lib/typescript/src/quantity-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quantity-stepper.d.ts","sourceRoot":"","sources":["../../../src/quantity-stepper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhG,OAAO,EAAsB,KAAK,sBAAsB,EAAE,MAAM,2BAAwB,CAAC;AAIzF,MAAM,MAAM,oBAAoB,GAAG,sBAAsB,GAAG;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE;QACP,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;QAC7B,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;KAC/B,CAAC;CACH,CAAC;AAcF,wBAAgB,eAAe,CAAC,EAC9B,QAAgB,EAChB,KAAK,EACL,MAAM,EAAE,KAAK,EACb,GAAG,OAAO,EACX,EAAE,oBAAoB,+BAiCtB"}

package/lib/typescript/src/store.d.ts

@@ -0,0 +1,27 @@
+import type { ColorSchemePreference } from './theme.js';
+export type ThemeState = {
+    /** Unset means "whatever `ui.defaultTheme` says". */
+    activeThemeId?: string;
+    /** Unset means "whatever `ui.colorScheme` says". */
+    colorScheme?: ColorSchemePreference;
+    setTheme: (themeId: string) => void;
+    setColorScheme: (scheme: ColorSchemePreference) => void;
+};
+/**
+ * The runtime half of Spartacus' two-layer theming. React Native has no build-time SCSS swap, so
+ * the choice is state, and it survives a restart like any other preference.
+ */
+export declare const useThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeState>, "setState" | "persist"> & {
+    setState(partial: ThemeState | Partial<ThemeState> | ((state: ThemeState) => ThemeState | Partial<ThemeState>), replace?: false | undefined): unknown;
+    setState(state: ThemeState | ((state: ThemeState) => ThemeState), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ThemeState) => void) => () => void;
+        onFinishHydration: (fn: (state: ThemeState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown, unknown>>;
+    };
+}>;
+//# sourceMappingURL=store.d.ts.map

package/lib/typescript/src/store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../src/store.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG;IACvB,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oDAAoD;IACpD,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,cAAc,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;EAezB,CAAC"}

package/lib/typescript/src/text.d.ts

@@ -0,0 +1,15 @@
+import { type TextProps as RNTextProps } from 'react-native';
+import type { TypographyRole } from './theme.js';
+/**
+ * Primitives extend the platform prop type and spread the rest: a closed prop set broke on the
+ * first `numberOfLines` written in an app file.
+ */
+export type TextProps = RNTextProps & {
+    variant?: TypographyRole;
+    muted?: boolean;
+    /** For text sitting on `colors.primary`. */
+    inverse?: boolean;
+    color?: string;
+};
+export declare function Text({ variant, muted, inverse, color, style, ...rest }: TextProps): import("react").JSX.Element;
+//# sourceMappingURL=text.d.ts.map

package/lib/typescript/src/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAGzF,OAAO,KAAK,EAAS,cAAc,EAAE,MAAM,YAAS,CAAC;AAErD;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG;IACpC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAeF,wBAAgB,IAAI,CAAC,EACnB,OAAgB,EAChB,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,GAAG,IAAI,EACR,EAAE,SAAS,+BAWX"}

package/lib/typescript/src/theme.d.ts

@@ -0,0 +1,71 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+export type ThemeColors = {
+    background: string;
+    surface: string;
+    surfaceMuted: string;
+    text: string;
+    textMuted: string;
+    textInverse: string;
+    border: string;
+    primary: string;
+    onPrimary: string;
+    danger: string;
+    success: string;
+};
+export type TypographyRole = 'display' | 'heading' | 'subheading' | 'body' | 'label' | 'caption';
+export type TypographyToken = Pick<TextStyle, 'fontSize' | 'lineHeight' | 'fontWeight' | 'letterSpacing'>;
+/** Roles only, no numeric palette: the brand already has one and remapping it is work nobody asked for. */
+export type Theme = {
+    colors: ThemeColors;
+    spacing: {
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        xxl: number;
+    };
+    typography: Record<TypographyRole, TypographyToken>;
+    radii: {
+        sm: number;
+        md: number;
+        pill: number;
+    };
+    /** Two levels. `shadow*` on iOS, `elevation` on Android; both are set on each. */
+    elevation: {
+        card: ViewStyle;
+        modal: ViewStyle;
+    };
+    media: {
+        aspectRatio: {
+            product: number;
+            banner: number;
+            thumbnail: number;
+        };
+    };
+    fontFamily?: {
+        regular: string;
+        medium: string;
+        bold: string;
+    };
+};
+/** One theme, two schemes. `dark` is optional and falls back to `light`. */
+export type ThemeEntry = {
+    name: string;
+    light: Theme;
+    dark?: Theme;
+};
+export type ColorSchemePreference = 'system' | 'light' | 'dark';
+/**
+ * A complete theme, inheriting nothing. The compiler enumerates what is missing, which is why
+ * this is a separate function rather than a flag on `extendTheme`.
+ */
+export declare function defineTheme(theme: Theme): Theme;
+/** Deep merge onto an existing theme. */
+export declare function extendTheme(base: Theme, overrides: ThemeOverrides): Theme;
+export type ThemeOverrides = {
+    [K in keyof Theme]?: Theme[K] extends object ? {
+        [P in keyof Theme[K]]?: Partial<Theme[K][P]> | Theme[K][P];
+    } : Theme[K];
+};
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/src/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,cAAc,GACtB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,MAAM,GACN,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,MAAM,eAAe,GAAG,IAAI,CAChC,SAAS,EACT,UAAU,GAAG,YAAY,GAAG,YAAY,GAAG,eAAe,CAC3D,CAAC;AAEF,2GAA2G;AAC3G,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACrF,UAAU,EAAE,MAAM,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;IACpD,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,kFAAkF;IAClF,SAAS,EAAE;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,CAAC;IACjD,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAC;YAAC,SAAS,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC;IAC/E,UAAU,CAAC,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CAChE,CAAC;AAEF,4EAA4E;AAC5E,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEtE,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhE;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAE/C;AAED,yCAAyC;AACzC,wBAAgB,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,GAAG,KAAK,CAEzE;AAED,MAAM,MAAM,cAAc,GAAG;KAC1B,CAAC,IAAI,MAAM,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,MAAM,GACxC;SAAG,CAAC,IAAI,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAAE,GAC9D,KAAK,CAAC,CAAC,CAAC;CACb,CAAC"}

package/lib/typescript/src/translations.d.ts

@@ -0,0 +1,13 @@
+/** English strings for the defaults in this package. Other languages are the app's. */
+export declare const defaultUiTranslations: {
+    en: {
+        ui: {
+            quantity: {
+                label: string;
+                increase: string;
+                decrease: string;
+            };
+        };
+    };
+};
+//# sourceMappingURL=translations.d.ts.map

package/lib/typescript/src/translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAAA,uFAAuF;AACvF,eAAO,MAAM,qBAAqB;;;;;;;;;;CAUjC,CAAC"}

package/lib/typescript/src/use-gallery.d.ts

@@ -0,0 +1,13 @@
+import { type ImageGroup, type Images } from '@laconius/core';
+export type GalleryApi = {
+    /** One entry per slide, each a group keyed by format code. */
+    items: ImageGroup[];
+    index: number;
+    selected: ImageGroup | undefined;
+    select: (index: number) => void;
+    next: () => void;
+    previous: () => void;
+};
+/** The selected slide — the only state a gallery owns. Paging is the caller's layout decision. */
+export declare function useGallery(images: Images | undefined): GalleryApi;
+//# sourceMappingURL=use-gallery.d.ts.map

package/lib/typescript/src/use-gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-gallery.d.ts","sourceRoot":"","sources":["../../../src/use-gallery.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAE,KAAK,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAGhF,MAAM,MAAM,UAAU,GAAG;IACvB,8DAA8D;IAC9D,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;IACjC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,kGAAkG;AAClG,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAoBjE"}

package/lib/typescript/src/use-product-card.d.ts

@@ -0,0 +1,24 @@
+import { type MediaContainer, type Price, type Product } from '@laconius/core';
+/**
+ * Semantic, not a translation key: the key space belongs to `@laconius/product`, and this hook
+ * lives in the UI kit, which never reaches into a feature package's namespace.
+ */
+export type ProductCardBadge = 'outOfStock' | 'lowStock';
+export type ProductCardView = {
+    code?: string;
+    title: string;
+    price?: Price;
+    media: MediaContainer;
+    badge?: ProductCardBadge;
+    averageRating?: number;
+    numberOfReviews?: number;
+};
+/**
+ * Derivation only — no fetch, no navigation. A card is rendered by the row of a `FlatList`, so
+ * everything it needs comes off the product it was handed.
+ *
+ * `priceRange.minPrice` covers the multidimensional products whose `price` is absent, which is
+ * what the search endpoint returns for apparel.
+ */
+export declare function useProductCard(product: Product | undefined): ProductCardView;
+//# sourceMappingURL=use-product-card.d.ts.map

package/lib/typescript/src/use-product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-product-card.d.ts","sourceRoot":"","sources":["../../../src/use-product-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,cAAc,EAAE,KAAK,KAAK,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGhG;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,YAAY,GAAG,UAAU,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AASF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,GAAG,eAAe,CAa5E"}

package/lib/typescript/src/use-quantity-stepper.d.ts

@@ -0,0 +1,18 @@
+export type QuantityStepperOptions = {
+    value: number;
+    /** Defaults to 1: zero quantity is a removal, which is the cart's decision, not the stepper's. */
+    min?: number;
+    max?: number;
+    onChange: (value: number) => void;
+};
+export type QuantityStepperApi = {
+    value: number;
+    canIncrement: boolean;
+    canDecrement: boolean;
+    increment: () => void;
+    decrement: () => void;
+    setValue: (value: number) => void;
+};
+/** Clamping and the disabled edges — the only state a stepper owns. It does not know what a cart is. */
+export declare function useQuantityStepper({ value, min, max, onChange, }: QuantityStepperOptions): QuantityStepperApi;
+//# sourceMappingURL=use-quantity-stepper.d.ts.map

package/lib/typescript/src/use-quantity-stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-quantity-stepper.d.ts","sourceRoot":"","sources":["../../../src/use-quantity-stepper.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,wGAAwG;AACxG,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,GAAO,EACP,GAAG,EACH,QAAQ,GACT,EAAE,sBAAsB,GAAG,kBAAkB,CAW7C"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@laconius/ui",
+  "version": "0.1.0",
+  "description": "Laconius UI kit: the Kratos theme, runtime theming hooks, the component registry and the eight primitives.",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "!**/*.test.*"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@laconius/core": "0.1.0",
+    "expo": "*",
+    "expo-image": "*",
+    "expo-sqlite": "*",
+    "react": ">=19.0.0",
+    "react-native": "*",
+    "zustand": "^5"
+  },
+  "devDependencies": {
+    "@laconius/core": "0.1.0",
+    "@types/react": "~19.2.2",
+    "expo": "^57.0.18",
+    "expo-image": "^57.0.3",
+    "expo-sqlite": "^57.0.2",
+    "react": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-builder-bob": "^0.43.0",
+    "typescript": "~6.0.3",
+    "vitest": "^3.2.4",
+    "zustand": "^5.0.15"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ],
+    "exclude": "**/*.test.{ts,tsx}"
+  },
+  "scripts": {
+    "build": "bob build",
+    "clean": "rm -rf lib",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}

package/src/button.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { useStyles, useTheme, useUiComponent } from './hooks';
+import { Text } from './text';
+import type { Theme } from './theme';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+
+export type ButtonProps = Omit<PressableProps, 'style' | 'children'> & {
+  title?: string;
+  variant?: ButtonVariant;
+  loading?: boolean;
+  /** Root style. */
+  style?: StyleProp<ViewStyle>;
+  /** Named inner parts — public, versioned API. */
+  styles?: { container?: StyleProp<ViewStyle>; label?: StyleProp<TextStyle> };
+  children?: ReactNode;
+};
+
+const createStyles = (theme: Theme) =>
+  StyleSheet.create({
+    base: {
+      minHeight: 44,
+      paddingHorizontal: theme.spacing.lg,
+      paddingVertical: theme.spacing.sm,
+      borderRadius: theme.radii.md,
+      borderWidth: StyleSheet.hairlineWidth,
+      borderColor: 'transparent',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: theme.spacing.sm,
+    },
+    primary: { backgroundColor: theme.colors.primary },
+    secondary: {
+      backgroundColor: theme.colors.surface,
+      borderColor: theme.colors.border,
+    },
+    ghost: { backgroundColor: 'transparent' },
+    pressed: { opacity: 0.7 },
+    disabled: { opacity: 0.5 },
+  });
+
+export function Button({
+  title,
+  variant = 'primary',
+  loading = false,
+  disabled = false,
+  style,
+  styles: parts,
+  children,
+  ...rest
+}: ButtonProps) {
+  const theme = useTheme();
+  const styles = useStyles(createStyles);
+  const Label = useUiComponent('Text', Text);
+  const isDisabled = disabled || loading;
+  const color = variant === 'primary' ? theme.colors.onPrimary : theme.colors.primary;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={title}
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      disabled={isDisabled}
+      hitSlop={8}
+      style={({ pressed }) => [
+        styles.base,
+        styles[variant],
+        pressed && !isDisabled ? styles.pressed : null,
+        isDisabled ? styles.disabled : null,
+        parts?.container,
+        style,
+      ]}
+      {...rest}
+    >
+      {loading ? <ActivityIndicator color={color} size="small" /> : null}
+      {title ? (
+        <Label variant="label" color={color} style={parts?.label}>
+          {title}
+        </Label>
+      ) : null}
+      {children}
+    </Pressable>
+  );
+}

package/src/config.ts

@@ -0,0 +1,53 @@
+import type { LaconiusConfigChunk } from '@laconius/core';
+import type { ComponentType } from 'react';
+
+import { kratos } from './kratos';
+import type { ColorSchemePreference, ThemeEntry } from './theme';
+import { defaultUiTranslations } from './translations';
+
+/**
+ * The registry key space, closed and typed — unlike `cms.components`, whose keys are open backend
+ * type codes ([ADR-0007](../../../docs/adr/0007-two-registries-two-contracts.md)). Feature
+ * packages add their own keys by declaration merging:
+ *
+ * ```ts
+ * declare module '@laconius/ui' {
+ *   interface LaconiusUiComponents { ProductCard: unknown }
+ * }
+ * ```
+ *
+ * The values are unused: only the keys are the contract, and the registry stores
+ * `ComponentType<any>` because a replacement is checked against the props it is handed, not here.
+ */
+export interface LaconiusUiComponents {
+  Text: unknown;
+  Button: unknown;
+  Media: unknown;
+  Price: unknown;
+  Divider: unknown;
+  Spinner: unknown;
+  EmptyState: unknown;
+  QuantityStepper: unknown;
+}
+
+export type LaconiusUiComponent = keyof LaconiusUiComponents;
+
+declare module '@laconius/core' {
+  interface LaconiusUiConfig {
+    /** Deep-merged: an app adds a theme without erasing Kratos, and replaces Kratos by key. */
+    themes?: Record<string, ThemeEntry>;
+    defaultTheme?: string;
+    /** `'system'` reads `useColorScheme()`. Overridable at runtime through `useThemeSwitcher`. */
+    colorScheme?: ColorSchemePreference;
+    components?: Partial<Record<LaconiusUiComponent, ComponentType<any>>>;
+  }
+}
+
+export const defaultUiConfig: LaconiusConfigChunk = {
+  ui: {
+    themes: { kratos },
+    defaultTheme: 'kratos',
+    colorScheme: 'system',
+  },
+  i18n: { translations: defaultUiTranslations },
+};

package/src/feedback.tsx

@@ -0,0 +1,95 @@
+import type { ReactNode } from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  type ActivityIndicatorProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+
+import { Button, type ButtonProps } from './button';
+import { useStyles, useTheme, useUiComponent } from './hooks';
+import { Text } from './text';
+import type { Theme } from './theme';
+
+export type DividerProps = ViewProps & { inset?: number };
+
+const createDividerStyles = (theme: Theme) =>
+  StyleSheet.create({
+    root: { height: StyleSheet.hairlineWidth, backgroundColor: theme.colors.border },
+  });
+
+export function Divider({ inset = 0, style, ...rest }: DividerProps) {
+  const styles = useStyles(createDividerStyles);
+  return (
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={[styles.root, inset ? { marginHorizontal: inset } : null, style]}
+      {...rest}
+    />
+  );
+}
+
+export type SpinnerProps = ActivityIndicatorProps;
+
+export function Spinner({ color, ...rest }: SpinnerProps) {
+  const theme = useTheme();
+  return <ActivityIndicator color={color ?? theme.colors.primary} {...rest} />;
+}
+
+export type EmptyStateProps = {
+  title: string;
+  message?: string;
+  /** Rendered as a `Button`; omit it for a purely informational state. */
+  action?: Pick<ButtonProps, 'title' | 'onPress' | 'variant' | 'loading'>;
+  icon?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: {
+    container?: StyleProp<ViewStyle>;
+    title?: StyleProp<TextStyle>;
+    message?: StyleProp<TextStyle>;
+  };
+};
+
+const createEmptyStateStyles = (theme: Theme) =>
+  StyleSheet.create({
+    root: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: theme.spacing.sm,
+      padding: theme.spacing.xl,
+    },
+    text: { textAlign: 'center' },
+    action: { marginTop: theme.spacing.sm },
+  });
+
+export function EmptyState({
+  title,
+  message,
+  action,
+  icon,
+  style,
+  styles: parts,
+}: EmptyStateProps) {
+  const styles = useStyles(createEmptyStateStyles);
+  const Label = useUiComponent('Text', Text);
+  const Action = useUiComponent('Button', Button);
+  return (
+    <View style={[styles.root, parts?.container, style]}>
+      {icon}
+      <Label variant="subheading" style={[styles.text, parts?.title]}>
+        {title}
+      </Label>
+      {message ? (
+        <Label muted style={[styles.text, parts?.message]}>
+          {message}
+        </Label>
+      ) : null}
+      {action ? <Action variant="secondary" style={styles.action} {...action} /> : null}
+    </View>
+  );
+}

package/src/hooks.ts

@@ -0,0 +1,130 @@
+import { useLaconiusConfig, type LaconiusConfig } from '@laconius/core';
+import type { ComponentType } from 'react';
+import { useColorScheme } from 'react-native';
+
+import type { LaconiusUiComponent } from './config';
+import { kratos } from './kratos';
+import { useThemeStore } from './store';
+import type { ColorSchemePreference, Theme, ThemeEntry } from './theme';
+
+const resolved = new WeakMap<LaconiusConfig, Map<string, Theme>>();
+const warned = new Set<string>();
+
+function warnOnce(message: string): void {
+  if (process.env.NODE_ENV === 'production' || warned.has(message)) return;
+  warned.add(message);
+  console.warn(`[laconius] ${message}`);
+}
+
+/**
+ * Cached per config and per `themeId:scheme`, because `useStyles` memoizes on theme *identity*:
+ * a theme rebuilt on every render would rebuild every `StyleSheet` with it.
+ */
+function resolveTheme(
+  config: LaconiusConfig,
+  themeId: string,
+  scheme: 'light' | 'dark',
+): Theme {
+  let cache = resolved.get(config);
+  if (!cache) {
+    cache = new Map();
+    resolved.set(config, cache);
+  }
+  const key = `${themeId}:${scheme}`;
+  const hit = cache.get(key);
+  if (hit) return hit;
+
+  const themes = config.ui?.themes;
+  let entry: ThemeEntry | undefined = themes?.[themeId];
+  if (!entry) {
+    warnOnce(`Unknown theme "${themeId}"; falling back to the first configured theme.`);
+    entry = themes ? Object.values(themes)[0] : undefined;
+  }
+  const resolvedEntry = entry ?? kratos;
+  const theme = (scheme === 'dark' ? resolvedEntry.dark : undefined) ?? resolvedEntry.light;
+  cache.set(key, theme);
+  return theme;
+}
+
+function useActiveScheme(): 'light' | 'dark' {
+  const config = useLaconiusConfig();
+  const system = useColorScheme();
+  const override = useThemeStore((state) => state.colorScheme);
+  const preference: ColorSchemePreference = override ?? config.ui?.colorScheme ?? 'system';
+  if (preference === 'system') return system === 'dark' ? 'dark' : 'light';
+  return preference;
+}
+
+function useActiveThemeId(): string {
+  const config = useLaconiusConfig();
+  const activeThemeId = useThemeStore((state) => state.activeThemeId);
+  return activeThemeId ?? config.ui?.defaultTheme ?? 'kratos';
+}
+
+/** The configured theme resolved against the effective colour scheme. */
+export function useTheme(): Theme {
+  const config = useLaconiusConfig();
+  return resolveTheme(config, useActiveThemeId(), useActiveScheme());
+}
+
+const styles = new WeakMap<object, WeakMap<Theme, unknown>>();
+
+/**
+ * Style factories are declared outside the component and memoized per theme identity, so a
+ * `FlatList` of a hundred rows builds one `StyleSheet`, not a hundred.
+ */
+export function useStyles<T>(factory: (theme: Theme) => T): T {
+  const theme = useTheme();
+  let perTheme = styles.get(factory);
+  if (!perTheme) {
+    perTheme = new WeakMap();
+    styles.set(factory, perTheme);
+  }
+  let sheet = perTheme.get(theme) as T | undefined;
+  if (sheet === undefined) {
+    sheet = factory(theme);
+    perTheme.set(theme, sheet);
+  }
+  return sheet;
+}
+
+export type ThemeSwitcher = {
+  themes: { id: string; name: string }[];
+  activeId: string;
+  setTheme: (themeId: string) => void;
+  colorScheme: ColorSchemePreference;
+  setColorScheme: (scheme: ColorSchemePreference) => void;
+};
+
+/**
+ * Laconius ships no `<ThemeSwitcher>` component: picking a theme is one row in an app's settings
+ * screen, and the row belongs to the app.
+ */
+export function useThemeSwitcher(): ThemeSwitcher {
+  const config = useLaconiusConfig();
+  const setTheme = useThemeStore((state) => state.setTheme);
+  const setColorScheme = useThemeStore((state) => state.setColorScheme);
+  const override = useThemeStore((state) => state.colorScheme);
+  return {
+    themes: Object.entries(config.ui?.themes ?? {}).map(([id, entry]) => ({
+      id,
+      name: entry.name,
+    })),
+    activeId: useActiveThemeId(),
+    setTheme,
+    colorScheme: override ?? config.ui?.colorScheme ?? 'system',
+    setColorScheme,
+  };
+}
+
+/**
+ * The registry lookup, used by the components Laconius renders itself. Anything the app mounts
+ * directly it imports directly, and the registry never sees it.
+ */
+export function useUiComponent<P>(
+  key: LaconiusUiComponent,
+  fallback: ComponentType<P>,
+): ComponentType<P> {
+  const config = useLaconiusConfig();
+  return (config.ui?.components?.[key] as ComponentType<P> | undefined) ?? fallback;
+}