@oxyhq/bloom 0.6.24 → 0.7.1

package/lib/typescript/module/theme/color-scope/style-builder.d.ts

@@ -1,16 +1,48 @@
+import type React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import type { AppColorName } from '../color-presets';
+/**
+ * Component that provides inline CSS variables to a subtree via NativeWind's
+ * (react-native-css's) real `VariableContext`. The runtime strips the leading
+ * `--` from each key internally, so we feed it the full `--name -> value`
+ * record produced by `buildScopeVars`.
+ */
+export type VariableContextProviderComponent = React.ComponentType<{
+    value: Record<string, string>;
+    children: React.ReactNode;
+}>;
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
  * subtree. Always includes the resolved `--color-*` vars so Tailwind v4
  * `@theme` utilities (e.g. `bg-background`) honour the scope.
  */
 export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
+/**
+ * Resolve NativeWind's `VariableContextProvider` — the canonical, non-deprecated
+ * react-native-css v3 API for providing inline CSS variables to a subtree. It
+ * reads the same `VariableContext` that interop className components consume, so
+ * descendants resolve `var(--primary)` etc. correctly. Returns `null` on web or
+ * when `nativewind` is not installed.
+ *
+ * This replaces the deprecated `vars()`-on-a-plain-`<View>`-style mechanism:
+ * under react-native-css@3, `vars()` returns an inline-vars marker that is only
+ * propagated to children when the host element matches className style rules
+ * (`usesVariables`/`variables`). A plain `<View>` with no `className` drops the
+ * vars silently, so the subtree renders without the preset palette.
+ */
+export declare function getVariableContextProvider(): VariableContextProviderComponent | null;
 /**
  * Build a native style object carrying every CSS var of the preset, using
  * NativeWind's `vars()` when available. Returns `undefined` on web (where the
  * provider writes vars to `documentElement` instead) or when `nativewind` is
  * not installed.
+ *
+ * @deprecated Under react-native-css@3, `vars()` only propagates to a subtree
+ * when applied to an interop className component (the runtime gates propagation
+ * on matched className style rules). Applied to a plain `<View>` the vars are
+ * dropped silently. Prefer wrapping children in `getVariableContextProvider()`.
+ * Retained only as the escape-hatch contract of `useColorScopeStyle`, where the
+ * caller owns the host element and is expected to be a className component.
  */
 export declare function buildNativePresetStyle(colorPreset: AppColorName, mode: 'light' | 'dark'): StyleProp<ViewStyle>;
 //# sourceMappingURL=style-builder.d.ts.map

package/lib/typescript/module/theme/color-scope/style-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AASrD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}
+{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,MAAM,gCAAgC,GAAG,KAAK,CAAC,aAAa,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AASH;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,0BAA0B,IAAI,gCAAgC,GAAG,IAAI,CAKpF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}

package/lib/typescript/module/theme/native-root-vars.d.ts

@@ -0,0 +1,89 @@
+import { type AppColorName } from './color-presets';
+/**
+ * Publish the active color preset's CSS custom properties into react-native-css's
+ * GLOBAL root-variable family so they reach the ENTIRE native app tree — including
+ * content rendered outside the React subtree of `BloomThemeProvider`: expo-router
+ * navigator screens, `Portal`s, `Dialog`/`BottomSheet` overlays, and any other host
+ * that paints through a separate React root.
+ *
+ * Why a global write is required (native only)
+ * --------------------------------------------
+ * react-native-css resolves a `var(--x)` reference (its `varResolver`) in this order:
+ *   1. `name in inheritedVariables`  — the React-context-inherited vars. This is what
+ *      `VariableContextProvider` populates, but it is React-context-scoped, so it only
+ *      reaches *direct descendants* of the provider in the React tree.
+ *   2. `inlineVariables[name]`        — same-component inline vars.
+ *   3. `variables[name]`             — resolved inherited vars.
+ *   4. `universalVariables(name)`    — a GLOBAL observable family.
+ *   5. `rootVariables(name)`         — a GLOBAL observable family.
+ *   6. the declared fallback.
+ *
+ * `BloomThemeProvider`'s `VariableContextProvider` only feeds path #1, so the navigator
+ * host and every portal/modal — which render outside that subtree — never see the
+ * preset vars and fall through to `rootVariables`/`universalVariables`. By default those
+ * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
+ * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
+ * triples themselves — those are injected at runtime), so the whole tree below the
+ * navigator renders monochrome. Writing the triples into `rootVariables` here is the
+ * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
+ * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
+ * content resolves the palette identically regardless of React-tree position.
+ *
+ * Why a STATIC `import`, not a runtime `require` (critical)
+ * ---------------------------------------------------------
+ * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and
+ * Metro bundles BOTH. In `native-internal/root.js` the variable families are plain
+ * module-local consts — NOT `globalThis`-guarded the way `StyleCollection` is — so the
+ * commonjs `root.js` and the module `root.js` each instantiate their OWN separate
+ * `rootVariables` family. The react-native-css renderer (`react-native-css/src/components/View.tsx`
+ * → `varResolver`) imports its `root.js` via ESM `import`, i.e. the MODULE build. A
+ * runtime `require('react-native-css/native-internal')` resolves the package's `require`
+ * export condition → the COMMONJS build → a DIFFERENT family the renderer never
+ * subscribes to, so the writes are a silent no-op on device. A static top-level
+ * `import` resolves the `import` condition → the MODULE build → the renderer's instance.
+ *
+ * This plain file is the NATIVE/default variant (Metro selects it on iOS/Android,
+ * which have no `.native` override here); the web variant lives in the sibling
+ * `native-root-vars.web.ts` no-op, which web bundlers pick over this one. So the
+ * static `react-native-css/native-internal` import below is never pulled into a web
+ * bundle — only into native. This mirrors Bloom's existing platform-split convention
+ * (`color-scope/index.tsx` + `color-scope/index.web.tsx`, `FontLoader.native.tsx`).
+ *
+ * Keying contract (verified against react-native-css@3.0.7)
+ * ---------------------------------------------------------
+ * The `rootVariables` family is keyed by the BARE variable name, WITHOUT the leading
+ * `--`. The compiler strips it uniformly: a `:root { --primary: ... }` declaration is
+ * stored via `rule.v.push([property.slice(2), value])` then routed into
+ * `shared.rootVariables[name]`, and `@property --x` goes through
+ * `name.startsWith("--") ? name.slice(2) : name`. The lookup side matches: a `var(--x)`
+ * reference compiles to `[{}, "var", ident.slice(2)]`, so `varResolver` looks up the
+ * bare name. `buildScopeVars` returns keys WITH the `--` prefix, so we strip it before
+ * writing each entry.
+ *
+ * Value shape
+ * -----------
+ * Each entry is a `VariableValue[]` — an array of `[value, mediaCondition?]` tuples.
+ * Bloom's preset vars are unconditional, so each is a single-element `[[value]]`, e.g.
+ * `rootVariables('primary').set([['205 87% 53%']])`. This is the same shape the compiler
+ * emits for unconditional `:root` vars.
+ *
+ * This is native-only and additive: the `VariableContextProvider` wrapper stays (it is
+ * the correct, scoped mechanism for `BloomColorScope` subtree overrides and harmlessly
+ * covers direct descendants). The web fork (`native-root-vars.web.ts`) no-ops — web
+ * writes the same vars to `document.documentElement` via `applyColorPresetVars`.
+ */
+/**
+ * Write the preset's CSS vars to react-native-css's global `rootVariables` family
+ * so the whole native tree (navigator screens + portals/modals/bottom-sheets)
+ * resolves the active palette.
+ *
+ * Each `.set` notifies its own observers synchronously (react-native-css only
+ * batches notifications inside its own `StyleCollection.inject`; outside it,
+ * `observableBatch.current` is unset so every `.set` runs observers immediately),
+ * so sequential writes correctly trigger a re-render when the preset/mode changes.
+ *
+ * Defensive guard: if a host ships a react-native-css build that doesn't expose
+ * `rootVariables` as a callable (it always does on @3), we bail rather than throw.
+ */
+export declare function applyNativeRootVars(colorPreset: AppColorName, mode: 'light' | 'dark'): void;
+//# sourceMappingURL=native-root-vars.d.ts.map

package/lib/typescript/module/theme/native-root-vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}

package/lib/typescript/module/theme/native-root-vars.web.d.ts

@@ -0,0 +1,20 @@
+import { type AppColorName } from './color-presets';
+/**
+ * Web fork of `applyNativeRootVars` — a no-op.
+ *
+ * On web, `BloomThemeProvider` already writes the active preset's CSS vars to
+ * `document.documentElement` via `applyColorPresetVars`, which the browser /
+ * react-native-web resolve natively. The native/default variant — the plain
+ * sibling `native-root-vars.ts` — instead publishes those vars into
+ * react-native-css's GLOBAL `rootVariables` family.
+ *
+ * Keeping the native variant's `react-native-css/native-internal` import out of
+ * the web bundle is the whole reason this is a platform-split module: web (and
+ * any non-NativeWind host) picks this `.web` fork over the plain file and so
+ * never statically pulls react-native-css internals.
+ *
+ * The signature is intentionally identical to the plain variant so the import
+ * site in `BloomThemeProvider` is platform-agnostic.
+ */
+export declare function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark'): void;
+//# sourceMappingURL=native-root-vars.web.d.ts.map

package/lib/typescript/module/theme/native-root-vars.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-root-vars.web.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAE7F"}

package/lib/typescript/module/theme/preset-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiC1F,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAqCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}
+{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiC1F,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAwCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.6.24",
+  "version": "0.7.1",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -431,6 +431,136 @@
         "default": "./lib/commonjs/context-menu/index.js"
       }
     },
+    "./popover": {
+      "react-native": "./src/popover/index.tsx",
+      "browser": {
+        "types": "./lib/typescript/module/popover/index.web.d.ts",
+        "import": "./lib/module/popover/index.web.js",
+        "require": "./lib/commonjs/popover/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/popover/index.d.ts",
+        "default": "./lib/module/popover/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/popover/index.d.ts",
+        "default": "./lib/commonjs/popover/index.js"
+      }
+    },
+    "./alert-dialog": {
+      "react-native": "./src/alert-dialog/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/alert-dialog/index.web.d.ts",
+        "import": "./lib/module/alert-dialog/index.web.js",
+        "require": "./lib/commonjs/alert-dialog/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/alert-dialog/index.d.ts",
+        "default": "./lib/module/alert-dialog/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/alert-dialog/index.d.ts",
+        "default": "./lib/commonjs/alert-dialog/index.js"
+      }
+    },
+    "./combobox": {
+      "react-native": "./src/combobox/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/combobox/index.web.d.ts",
+        "import": "./lib/module/combobox/index.web.js",
+        "require": "./lib/commonjs/combobox/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/combobox/index.d.ts",
+        "default": "./lib/module/combobox/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/combobox/index.d.ts",
+        "default": "./lib/commonjs/combobox/index.js"
+      }
+    },
+    "./command": {
+      "react-native": "./src/command/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/command/index.web.d.ts",
+        "import": "./lib/module/command/index.web.js",
+        "require": "./lib/commonjs/command/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/command/index.d.ts",
+        "default": "./lib/module/command/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/command/index.d.ts",
+        "default": "./lib/commonjs/command/index.js"
+      }
+    },
+    "./label": {
+      "react-native": "./src/label/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/label/index.d.ts",
+        "default": "./lib/module/label/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/label/index.d.ts",
+        "default": "./lib/commonjs/label/index.js"
+      }
+    },
+    "./kbd": {
+      "react-native": "./src/kbd/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/kbd/index.d.ts",
+        "default": "./lib/module/kbd/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/kbd/index.d.ts",
+        "default": "./lib/commonjs/kbd/index.js"
+      }
+    },
+    "./item": {
+      "react-native": "./src/item/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/item/index.d.ts",
+        "default": "./lib/module/item/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/item/index.d.ts",
+        "default": "./lib/commonjs/item/index.js"
+      }
+    },
+    "./field": {
+      "react-native": "./src/field/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/field/index.d.ts",
+        "default": "./lib/module/field/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/field/index.d.ts",
+        "default": "./lib/commonjs/field/index.js"
+      }
+    },
+    "./input-group": {
+      "react-native": "./src/input-group/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/input-group/index.d.ts",
+        "default": "./lib/module/input-group/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/input-group/index.d.ts",
+        "default": "./lib/commonjs/input-group/index.js"
+      }
+    },
+    "./slider": {
+      "react-native": "./src/slider/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/slider/index.d.ts",
+        "default": "./lib/module/slider/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/slider/index.d.ts",
+        "default": "./lib/commonjs/slider/index.js"
+      }
+    },
     "./card": {
       "react-native": "./src/card/index.ts",
       "import": {
@@ -594,6 +724,16 @@
     "accordion",
     "code",
     "fonts",
+    "popover",
+    "command",
+    "combobox",
+    "alert-dialog",
+    "slider",
+    "field",
+    "input-group",
+    "label",
+    "kbd",
+    "item",
     "ai"
   ],
   "repository": {

package/src/__tests__/Field.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Field } from '../field';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('Field', () => {
+  it('renders label, children and description', () => {
+    const { getByText } = renderWithTheme(
+      <Field label="Username" description="Pick something unique">
+        <Text>input</Text>
+      </Field>,
+    );
+    expect(getByText('Username')).toBeTruthy();
+    expect(getByText('input')).toBeTruthy();
+    expect(getByText('Pick something unique')).toBeTruthy();
+  });
+
+  it('renders the error and hides the description when invalid', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <Field label="Email" description="We never share it" error="Invalid email">
+        <Text>input</Text>
+      </Field>,
+    );
+    expect(getByText('Invalid email')).toBeTruthy();
+    expect(queryByText('We never share it')).toBeNull();
+  });
+
+  it('marks the error message with the alert role', () => {
+    const { getByText } = renderWithTheme(
+      <Field label="Email" error="Required">
+        <Text>input</Text>
+      </Field>,
+    );
+    expect(getByText('Required').props.accessibilityRole).toBe('alert');
+  });
+
+  it('renders the required marker through the label', () => {
+    const { getByLabelText } = renderWithTheme(
+      <Field label="Email" required>
+        <Text>input</Text>
+      </Field>,
+    );
+    expect(getByLabelText('required')).toBeTruthy();
+  });
+});

package/src/__tests__/InputGroup.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { InputGroup } from '../input-group';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('InputGroup', () => {
+  it('renders addons and the input', () => {
+    const { getByText } = renderWithTheme(
+      <InputGroup>
+        <InputGroup.Addon>https://</InputGroup.Addon>
+        <Text>field</Text>
+        <InputGroup.Addon divider>
+          <Text>Go</Text>
+        </InputGroup.Addon>
+      </InputGroup>,
+    );
+    expect(getByText('https://')).toBeTruthy();
+    expect(getByText('field')).toBeTruthy();
+    expect(getByText('Go')).toBeTruthy();
+  });
+
+  it('exposes Addon as a static member', () => {
+    expect(InputGroup.Addon).toBeTruthy();
+  });
+
+  it('marks disabled state for accessibility', () => {
+    const { getByTestId } = renderWithTheme(
+      <InputGroup disabled testID="group">
+        <Text>field</Text>
+      </InputGroup>,
+    );
+    expect(getByTestId('group').props.accessibilityState).toEqual({ disabled: true });
+  });
+});

package/src/__tests__/Item.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Item } from '../item';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('Item', () => {
+  it('renders title and subtitle', () => {
+    const { getByText } = renderWithTheme(
+      <Item title="Profile" subtitle="Manage your details" />,
+    );
+    expect(getByText('Profile')).toBeTruthy();
+    expect(getByText('Manage your details')).toBeTruthy();
+  });
+
+  it('renders custom children in place of the text column', () => {
+    const { getByText, queryByText } = renderWithTheme(
+      <Item title="ignored">
+        <Text>Custom body</Text>
+      </Item>,
+    );
+    expect(getByText('Custom body')).toBeTruthy();
+    expect(queryByText('ignored')).toBeNull();
+  });
+
+  it('is pressable when onPress is provided and fires the handler', () => {
+    const onPress = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Item title="Tap me" onPress={onPress} />,
+    );
+    fireEvent.press(getByText('Tap me'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('marks the disabled state for accessibility and strips the press handler', () => {
+    const onPress = jest.fn();
+    const { getByLabelText } = renderWithTheme(
+      <Item title="Disabled" onPress={onPress} disabled accessibilityLabel="Disabled" />,
+    );
+    const node = getByLabelText('Disabled');
+    expect(node.props.accessibilityState).toEqual({ disabled: true, selected: false });
+    // The Pressable receives no press handler while disabled.
+    expect(node.props.onPress).toBeUndefined();
+  });
+
+  it('uses button role by default when pressable', () => {
+    const { getByLabelText } = renderWithTheme(
+      <Item title="Row" onPress={() => {}} accessibilityLabel="Row" />,
+    );
+    expect(getByLabelText('Row').props.accessibilityRole).toBe('button');
+  });
+
+  it('renders leading and trailing slots', () => {
+    const { getByText } = renderWithTheme(
+      <Item
+        title="With slots"
+        leading={<Text>L</Text>}
+        trailing={<Text>R</Text>}
+      />,
+    );
+    expect(getByText('L')).toBeTruthy();
+    expect(getByText('R')).toBeTruthy();
+  });
+});

package/src/__tests__/Kbd.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Kbd } from '../kbd';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('Kbd', () => {
+  it('renders the key label', () => {
+    const { getByText } = renderWithTheme(<Kbd>K</Kbd>);
+    expect(getByText('K')).toBeTruthy();
+  });
+
+  it('renders both sizes', () => {
+    const sm = renderWithTheme(<Kbd size="sm">Esc</Kbd>);
+    expect(sm.getByText('Esc')).toBeTruthy();
+    const md = renderWithTheme(<Kbd size="md">⌘</Kbd>);
+    expect(md.getByText('⌘')).toBeTruthy();
+  });
+});

package/src/__tests__/Label.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Label } from '../label';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('Label', () => {
+  it('renders its text', () => {
+    const { getByText } = renderWithTheme(<Label>Email</Label>);
+    expect(getByText('Email')).toBeTruthy();
+  });
+
+  it('renders a required marker when required', () => {
+    const { getByLabelText } = renderWithTheme(<Label required>Email</Label>);
+    expect(getByLabelText('required')).toBeTruthy();
+  });
+
+  it('does not render a required marker by default', () => {
+    const { queryByLabelText } = renderWithTheme(<Label>Email</Label>);
+    expect(queryByLabelText('required')).toBeNull();
+  });
+});

package/src/__tests__/Slider.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { Slider } from '../slider';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+describe('Slider', () => {
+  it('renders with the adjustable accessibility role and value', () => {
+    const { getByTestId } = renderWithTheme(
+      <Slider value={40} min={0} max={100} onValueChange={() => {}} testID="slider" />,
+    );
+    const node = getByTestId('slider');
+    expect(node.props.accessibilityRole).toBe('adjustable');
+    expect(node.props.accessibilityValue).toEqual({ min: 0, max: 100, now: 40 });
+  });
+
+  it('reflects the disabled state', () => {
+    const { getByTestId } = renderWithTheme(
+      <Slider value={0} onValueChange={() => {}} disabled testID="slider" />,
+    );
+    expect(getByTestId('slider').props.accessibilityState).toEqual({ disabled: true });
+  });
+
+  it('renders without crashing for fractional steps', () => {
+    const { getByTestId } = renderWithTheme(
+      <Slider value={0.5} min={0} max={1} step={0.1} onValueChange={() => {}} testID="slider" />,
+    );
+    expect(getByTestId('slider')).toBeTruthy();
+  });
+});