@isoline-ui/react-native 0.0.0-stage → 0.1.0-alpha.3

package/LICENSE

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

package/NOTICE.md

@@ -0,0 +1,12 @@
+# Source notices
+
+The initial primitives were extracted with the owner's authorisation from the
+UI code maintained for Yours, Inboki and Atlas. Product data, credentials,
+artwork and feature code are not included.
+
+The existing MIT notice for 650 Industries, Inc. (Expo) is retained in LICENSE.
+Isoline-specific functional glyphs use simple original SVG paths. App-specific
+Material Symbols icon collections and brand fonts are not bundled.
+
+Runtime packages remain subject to their respective licences. Apps consuming
+Isoline should regenerate their dependency licence notices after integration.

package/README.md

@@ -1,3 +1,104 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @isoline-ui/react-native
+
+Expressive shared UI with platform-aware interaction. Initial alpha distributed through GitHub Releases; not published to npm. The package name does not reserve the npm organisation.
+
+## Install the test release
+
+```sh
+npm install https://github.com/isoline-ui/isoline-ui/releases/download/v0.1.0-alpha.0/isoline-ui-react-native-0.1.0-alpha.0.tgz
+```
+
+The URL is versioned and the package imports as `@isoline-ui/react-native`.
+
+## Consumer setup
+
+Install the package and the peer dependencies
+matching your Expo SDK. Use `npx expo install` for native peers; do not install
+a second React or React Native runtime.
+
+Keep the usual NativeWind Babel/Metro configuration. Add the Isoline preset and
+package source to Tailwind's content scan:
+
+```js
+const path = require('node:path');
+const ui = path.dirname(require.resolve('@isoline-ui/react-native/package.json'));
+
+module.exports = {
+  presets: [require('@isoline-ui/react-native/nativewind')],
+  content: ['./app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}', path.join(ui, 'src/**/*.{ts,tsx}')],
+};
+```
+
+Do not overwrite an app's custom fonts or additional semantic roles; extend
+the preset in the consumer. Atlas loads its fonts itself.
+
+```tsx
+import { IsolineProvider, Button, themes } from '@isoline-ui/react-native';
+
+export function App() {
+  return (
+    <IsolineProvider theme={themes.violet.light} labels={{ close: 'Schließen' }}>
+      <Button
+        label="Speichern"
+        onPress={() => {
+          /* app action */
+        }}
+      />
+    </IsolineProvider>
+  );
+}
+```
+
+Place the provider inside the app's SafeAreaProvider and GestureHandlerRootView.
+It paints CSS roles for NativeWind and supplies matching colours for native/SVG
+props. Use a theme matching the app's light/dark preference.
+
+`extendTheme` returns a new theme from token and typography overrides. Token
+values are HSL channel triplets, not full CSS colour expressions. Dynamic
+Material You roles and Yours' text preferences still require app adapters.
+
+Haptics are opt-in: pass `haptics={{ selectionHaptic, impactHaptic }}` from the
+app so its saved preference is honoured. Labels are similarly supplied from
+the app's translations. There is no navigation or persistence dependency.
+
+## Packaging
+
+`react-native` and default exports point to TypeScript source for Metro.
+`types` point to generated declarations. This is a React Native/Metro package;
+plain Node/browser UI imports are not a supported distribution target.
+Pure helpers can be imported from `@isoline-ui/react-native/tokens`.
+
+The package intentionally does not install Expo, native runtimes, app fonts
+or native model/scanner integrations. Native dependency changes require a
+new native app build, not only an OTA update.
+
+## iOS, Android and browsers
+
+Controls follow the native OS automatically. The `platform="ios" | "android"`
+provider prop selects a browser preview style and is inherited by nested providers;
+it never changes the native device platform. Use Expo web with React Native Web,
+React DOM, NativeWind and the normal native peers. The repository showcase includes
+`npm run web --workspace isoline-showcase` and `export:web`.
+
+Register `surfaceComponent={MaterialSurface}` and
+`surfaceGroupComponent={MaterialGroup}` on `IsolineProvider` using the optional
+`@isoline-ui/native` adapters. Core UI works without Expo using solid fallbacks.
+
+The shared `MaterialOptions` contract (`material`, `glassStyle`, `tintColor`,
+`fallbackColor`, `interactive`) supports buttons/icon buttons, search, segmented
+controls, pickers, floating/split actions, toolbars, navigation, tabs, popovers,
+context menus and optional overlay surfaces. `TabBar` is controlled; routing
+remains in the app. `Popover` anchors, flips and clamps a scrollable panel.
+Context menus and pickers support disabled and selected options. Action menus
+also support destructive actions.
+
+Navigation and anchored menus default to automatic material. Form/action controls,
+dialogs, sheets and snackbars default to solid; opt in per surface. Android stays
+solid Material UI. iOS uses native glass where available and respects Reduce
+Transparency. `SurfaceGroup` uses native `GlassContainer` to blend nearby glass
+surfaces and can animate `gap`, respecting reduced motion. Browser groups animate
+spacing only: CSS backdrop blur approximates glass without native merging or
+refraction. Use a contrasting background to make translucency visible.
+
+The new controls require native/device verification in consumer builds; browser
+checks and Metro exports do not verify UIKit rendering or accessibility.

package/dist/amount.d.ts

@@ -0,0 +1,3 @@
+/** Parse a locale-formatted editing value; invalid/partial input stays null. */
+export declare function parseLocalizedAmount(input: string, locale?: string): number | null;
+export declare function formatLocalizedAmount(value: number, locale?: string, fractionDigits?: number): string;

package/dist/calendar.d.ts

@@ -0,0 +1,7 @@
+/** Gregorian local-date values. UTC arithmetic avoids DST changes and host time zones. */
+export declare function validDate(value: string): boolean;
+export declare function addDays(value: string, amount: number): string;
+export declare function addMonths(month: string, amount: number): string;
+export declare function monthDays(month: string, firstDayOfWeek?: number): string[];
+export declare function formatCalendarDate(date: string, locale?: string, options?: Intl.DateTimeFormatOptions): string;
+export declare function validTime(value: string): boolean;

package/dist/components/action-chip.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type ButtonProps } from './button.tsx';
+import type { IconProps } from './icons.tsx';
+export interface ActionChipProps extends Omit<ButtonProps, 'children' | 'icon' | 'label' | 'variant' | 'size'> {
+    label: string;
+    icon?: React.ComponentType<IconProps>;
+    tone?: 'neutral' | 'primary' | 'secondary' | 'tertiary';
+}
+export declare function ActionChip({ label, icon: Icon, tone, style, ...props }: ActionChipProps): React.JSX.Element;

package/dist/components/amount-field.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { TextInput } from 'react-native';
+import { type TextFieldProps } from './text-field.tsx';
+export interface AmountFieldProps extends Omit<TextFieldProps, 'value' | 'onChangeText'> {
+    value: string;
+    onChangeText: (value: string) => void;
+    onAmountChange?: (amount: number | null) => void;
+    currency?: string | null;
+    locale?: string;
+}
+/** Preserve the editing string, including incomplete decimals; report numeric units separately. */
+export declare const AmountField: React.ForwardRefExoticComponent<AmountFieldProps & React.RefAttributes<React.ElementRef<typeof TextInput>>>;

package/dist/components/avatar.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+export interface AvatarProps {
+    accessibilityLabel: string;
+    initials?: string;
+    source?: ImageSourcePropType;
+    size?: number;
+    color?: string;
+    foregroundColor?: string;
+    accent?: string;
+    badge?: React.ReactNode;
+    renderImage?: (size: number, onError: () => void) => React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    className?: string;
+}
+/** Image rendering and initials only: no address book, network lookup or app preference. */
+export declare function Avatar({ accessibilityLabel, initials, source, size, color, foregroundColor, accent, badge, renderImage, style, className, }: AvatarProps): React.JSX.Element;

package/dist/components/back-button.d.ts

@@ -0,0 +1,12 @@
+export interface BackButtonProps {
+    onPress: () => void;
+    /** What the row leads back to, e.g. "Inbox", "Settings". Defaults to "Back". */
+    label?: string;
+}
+/**
+ * The `< Back` row every screen opens with.
+ *
+ * The arrow is drawn at the header icon size, so it matches the bare back
+ * arrow of the screens that use a top bar instead (the reader, compose).
+ */
+export declare function BackButton({ onPress, label }: BackButtonProps): import("react").JSX.Element;

package/dist/components/back-icon.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from './icons.tsx';
+/** Navigation uses the iOS chevron; directional/content arrows stay unchanged. */
+export declare function BackIcon({ size, color, style, ...props }: IconProps): import("react").JSX.Element;

package/dist/components/badge.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface BadgeProps {
+    label: string;
+    /**
+     * Tints the pill and its text, for a badge that stands for something with a
+     * colour of its own — a tag. Left unset, the badge is the neutral container
+     * colour a folder name gets.
+     */
+    color?: string;
+    className?: string;
+}
+/** A small pill label, such as a folder name sitting beside a message count. */
+export declare function Badge({ label, color, className }: BadgeProps): React.JSX.Element;

package/dist/components/banner.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type IconProps } from './icons.tsx';
+export interface BannerProps {
+    message: string;
+    title?: string;
+    tone?: 'neutral' | 'info' | 'error';
+    icon?: React.ComponentType<IconProps>;
+    actionLabel?: string;
+    onAction?: () => void;
+    onDismiss?: () => void;
+    dismissLabel?: string;
+}
+export declare function Banner({ message, title, tone, icon: Icon, actionLabel, onAction, onDismiss, dismissLabel, }: BannerProps): React.JSX.Element;
+export declare const InlineNotice: typeof Banner;

package/dist/components/bottom-sheet-native.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type DimensionValue } from 'react-native';
+import { type MaterialOptions } from '../provider.tsx';
+export interface BottomSheetProps extends MaterialOptions {
+    visible: boolean;
+    onClose: () => void;
+    maxHeight?: DimensionValue;
+    onShow?: () => void;
+    children: React.ReactNode;
+}
+export declare function BottomSheet({ visible, onClose, maxHeight, onShow, children, ...materialOptions }: BottomSheetProps): React.JSX.Element;

package/dist/components/bottom-sheet-web.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type DimensionValue } from 'react-native';
+import { type MaterialOptions } from '../provider.tsx';
+export interface BottomSheetProps extends MaterialOptions {
+    visible: boolean;
+    onClose: () => void;
+    /** Caps long lists; the default leaves space for the status bar. */
+    maxHeight?: DimensionValue;
+    /** Runs once the sheet is on screen, e.g. to focus an input. */
+    onShow?: () => void;
+    children: React.ReactNode;
+}
+/**
+ * One branded sheet on both platforms. The handle owns the dismiss gesture
+ * so it cannot steal scrolling, calendar swipes or drags inside the content.
+ * On iOS the panel also follows the keyboard and supports VoiceOver Escape.
+ */
+export declare function BottomSheet({ visible, onClose, maxHeight, onShow, children, material, glassStyle, tintColor, fallbackColor, interactive, }: BottomSheetProps): React.JSX.Element;

package/dist/components/bottom-sheet.d.ts

@@ -0,0 +1,3 @@
+import { type BottomSheetProps } from './bottom-sheet-native.tsx';
+export type { BottomSheetProps };
+export declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;

package/dist/components/button-group.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type MaterialOptions } from '../provider.tsx';
+export interface ButtonGroupItem<T extends string> {
+    id: T;
+    disabled?: boolean;
+    label: string;
+    icon?: React.ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
+    /** Optional trailing count, e.g. unread mail in that view. */
+    badge?: number;
+}
+export interface ButtonGroupProps<T extends string> extends MaterialOptions {
+    items: ButtonGroupItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    className?: string;
+    /**
+     * Drop the label on unselected buttons, leaving icon + badge. Meant for
+     * groups where every item carries a badge, so the count alone still
+     * identifies it — the selected button keeps the only visible label.
+     */
+    compact?: boolean;
+}
+export declare function ButtonGroup<T extends string>({ items, value, onChange, className, compact, material, glassStyle, tintColor, fallbackColor, interactive, }: ButtonGroupProps<T>): React.JSX.Element;

package/dist/components/button.d.ts

@@ -0,0 +1,48 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { type MaterialOptions } from '../provider.tsx';
+import type { IconProps } from './icons.tsx';
+import { Pressable } from './pressable.tsx';
+/**
+ * Material 3 Expressive button.
+ *
+ * Colour still carries emphasis — Filled for the one action that matters,
+ * Tonal below it, Outlined and Text lower again — but Expressive added two
+ * dimensions on top of that:
+ *
+ * - **Size as hierarchy.** Five sizes from XS to XL, so a primary action can
+ *   be made important by being *large*, not just by being coloured. The larger
+ *   sizes are meant to be used; a screen where every button is medium is the
+ *   thing this is trying to fix.
+ * - **Shape as feedback.** Every button morphs between round and square while
+ *   pressed. The shape change is felt more than it is seen, and it survives on
+ *   a filled button where a ripple over a saturated fill barely registers.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "tertiary" | "outline" | "secondary" | "tonal" | "ghost" | "destructive" | null | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xl" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const labelVariants: (props?: ({
+    variant?: "default" | "tertiary" | "outline" | "secondary" | "tonal" | "ghost" | "destructive" | null | undefined;
+    size?: "s" | "xs" | "m" | "l" | "xl" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonProps = Omit<React.ComponentProps<typeof Pressable>, 'children'> & VariantProps<typeof buttonVariants> & MaterialOptions & {
+    children?: React.ComponentProps<typeof Pressable>['children'];
+    pressableClassName?: string;
+    label?: string;
+    /** A leading symbol, drawn in the label's color. */
+    icon?: React.ComponentType<IconProps>;
+    /** Resting shape. Pressing morphs to the other one and back. */
+    shape?: 'round' | 'square';
+    /** Fires a selection tick on press. Off for destructive-adjacent actions. */
+    haptic?: boolean;
+};
+/**
+ * Pressable with a spring shape-and-scale morph on touch.
+ *
+ * The press feedback runs on the UI thread through Reanimated rather than
+ * through React state, so it stays at 60fps while the JS thread is busy
+ * ingesting a sync batch.
+ */
+export declare function Button({ className, material, glassStyle, tintColor, fallbackColor, interactive, pressableClassName, style, variant, size, label, icon: Icon, shape, haptic, children, onPressIn, onPressOut, onPress, ...props }: ButtonProps): React.JSX.Element;
+export { buttonVariants, labelVariants };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface CheckboxProps {
+    checked: boolean | 'mixed';
+    onCheckedChange: (checked: boolean) => void;
+    accessibilityLabel: string;
+    label?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/** Controlled selection; storage and selection of a collection remain caller-owned. */
+export declare function Checkbox({ checked, onCheckedChange, accessibilityLabel, label, disabled, style, }: CheckboxProps): React.JSX.Element;

package/dist/components/color-picker.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type MaterialOptions } from '../provider.tsx';
+export interface ColorSwatch {
+    value: string;
+    label: string;
+    color?: string;
+    disabled?: boolean;
+}
+export interface ColorSwatchPickerProps {
+    value: string | null;
+    onChange: (value: string) => void;
+    swatches: ColorSwatch[];
+    accessibilityLabel: string;
+}
+export declare function ColorSwatchPicker({ value, onChange, swatches, accessibilityLabel, }: ColorSwatchPickerProps): React.JSX.Element;
+export interface ColorPickerSheetProps extends ColorSwatchPickerProps, MaterialOptions {
+    visible: boolean;
+    onClose: () => void;
+    title: string;
+}
+export declare function ColorPickerSheet({ visible, onClose, title, material, glassStyle, tintColor, fallbackColor, interactive, ...props }: ColorPickerSheetProps): React.JSX.Element;

package/dist/components/context-menu.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { MaterialOptions } from '../material.ts';
+import { type IconProps } from './icons.tsx';
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    onPress: () => void;
+    icon?: React.ComponentType<IconProps>;
+    disabled?: boolean;
+    destructive?: boolean;
+    selected?: boolean;
+}
+export interface ContextMenuProps extends MaterialOptions {
+    children: React.ReactNode;
+    accessibilityLabel: string;
+    items: ContextMenuItem[];
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: 'top' | 'bottom';
+}
+/** Shared anchored menu, not a UIKit context-menu controller or an application router. */
+export declare function ContextMenu({ children, accessibilityLabel, items, disabled, onOpenChange, placement, ...material }: ContextMenuProps): React.JSX.Element;
+export declare function ContextMenuRows({ items, onClose, }: {
+    items: ContextMenuItem[];
+    onClose: () => void;
+}): React.JSX.Element;

package/dist/components/date-picker.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { type MaterialOptions } from '../provider.tsx';
+export interface CalendarLabels {
+    previousMonth: string;
+    nextMonth: string;
+}
+export interface CalendarMark {
+    label: string;
+    count?: number;
+    color?: string;
+}
+export interface MonthCalendarProps {
+    value: string | null;
+    onChange: (date: string) => void;
+    today: string;
+    locale?: string;
+    month?: string;
+    onMonthChange?: (month: string) => void;
+    firstDayOfWeek?: number;
+    minDate?: string;
+    maxDate?: string;
+    disabledDates?: readonly string[];
+    marks?: Record<string, CalendarMark>;
+    labels: CalendarLabels;
+    range?: {
+        start: string;
+        end: string;
+    } | null;
+    renderDayAccessory?: (date: string, selected: boolean) => React.ReactNode;
+}
+/** Date arithmetic and marks are independent from agenda repositories or app clocks. */
+export declare function MonthCalendar({ value, onChange, today, locale, month: controlledMonth, onMonthChange, firstDayOfWeek, minDate, maxDate, disabledDates, marks, labels, range, renderDayAccessory, }: MonthCalendarProps): React.JSX.Element;
+export interface WeekStripProps extends Pick<MonthCalendarProps, 'value' | 'onChange' | 'today' | 'locale' | 'marks' | 'minDate' | 'maxDate'> {
+    startDate: string;
+    renderDayAccessory?: MonthCalendarProps['renderDayAccessory'];
+}
+export declare function WeekStrip({ startDate, value, onChange, today, locale, marks, minDate, maxDate, renderDayAccessory, }: WeekStripProps): React.JSX.Element;
+export interface QuickDateOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface DayPickerProps extends MonthCalendarProps, MaterialOptions {
+    quickDates?: QuickDateOption[];
+    onClear?: () => void;
+    clearLabel?: string;
+}
+export declare function DayPicker({ quickDates, onClear, clearLabel, ...calendar }: DayPickerProps): React.JSX.Element;
+export interface DatePickerSheetProps extends MonthCalendarProps, MaterialOptions {
+    visible: boolean;
+    onClose: () => void;
+    title: string;
+    quickDates?: QuickDateOption[];
+    onClear?: () => void;
+    clearLabel?: string;
+}
+export declare function DatePickerSheet({ visible, onClose, title, quickDates, onClear, clearLabel, material, glassStyle, tintColor, fallbackColor, interactive, ...calendar }: DatePickerSheetProps): React.JSX.Element;
+export interface DateFieldProps extends Omit<DatePickerSheetProps, 'visible' | 'onClose' | 'title' | 'onChange' | 'onClear'> {
+    label: string;
+    emptyLabel: string;
+    onChange: (date: string | null) => void;
+    disabled?: boolean;
+}
+export declare function DateField({ label, emptyLabel, onChange, disabled, ...props }: DateFieldProps): React.JSX.Element;

package/dist/components/dialog-context.d.ts

@@ -0,0 +1,2 @@
+/** Keeps iOS alert actions styled together without changing normal buttons. */
+export declare const DialogActionContext: import("react").Context<boolean>;

package/dist/components/dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type MaterialOptions } from '../provider.tsx';
+export interface DialogProps extends MaterialOptions {
+    visible: boolean;
+    onClose: () => void;
+    /** Runs once the dialog is actually on screen — for one that focuses an input. */
+    onShow?: () => void;
+    children: React.ReactNode;
+}
+/**
+ * The app's Material 3 dialog: a scrim, and a panel centred on screen that
+ * scales up into place. Used for a short, focused decision — naming
+ * something, confirming an action — where a bottom sheet's list-of-options
+ * shape would be the wrong read.
+ */
+export declare function Dialog({ visible, onClose, onShow, children, material, glassStyle, tintColor, fallbackColor, interactive, }: DialogProps): React.JSX.Element;
+/** A dialog's row of text actions, right-aligned per M3. */
+export declare function DialogActions({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/empty-state.d.ts

@@ -0,0 +1,15 @@
+import type * as React from 'react';
+import { type ExpressiveShapeName } from './expressive-shape.tsx';
+import type { IconProps } from './icons.tsx';
+/**
+ * An empty list's one thing to look at: a large Expressive shape with the
+ * symbol of what would be here, a line saying so, and a line saying how to
+ * change it.
+ */
+export declare function EmptyState({ icon: Icon, shape, title, body, tone, }: {
+    icon: React.ComponentType<IconProps>;
+    shape: ExpressiveShapeName;
+    title: string;
+    body?: string;
+    tone?: 'primary' | 'tertiary';
+}): React.JSX.Element;

package/dist/components/expand-indicator.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+/** One size for every disclosure chevron, so no two sections look differently foldable. */
+export declare const EXPAND_INDICATOR_SIZE = 20;
+export interface ExpandIndicatorProps {
+    expanded: boolean;
+    /** Defaults to `onSurfaceVariant`; a chip in its selected tone passes its own. */
+    color?: string;
+}
+/**
+ * The chevron on anything that opens in place — a message card, its details,
+ * the Cc/Bcc fields.
+ *
+ * Every one of those used to draw its own `ChevronDown` at whatever size
+ * suited the spot: 16 on a card, 12 on the details line beneath it, so two
+ * disclosures a finger's width apart looked like different kinds of thing.
+ * This is the one they share.
+ *
+ * It turns on the fast spatial spring rather than flipping, and overshoots a
+ * little on the way: the Expressive cue that the section is a thing being
+ * opened, not a picture being swapped. Reanimated drops the spring for
+ * "Remove animations" on its own, and the chevron still ends up pointing the
+ * right way — the state is carried by where it ends, not by the movement.
+ *
+ * Decorative to a screen reader: whatever it sits in owns the tap and says
+ * `expanded` itself.
+ */
+export declare function ExpandIndicator({ expanded, color }: ExpandIndicatorProps): React.JSX.Element;

package/dist/components/expressive-shape.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * A still member of the Expressive shape library, with something inside it.
+ *
+ * Expressive leans on a small set of characterful shapes — the 4-leaf clover,
+ * the scalloped cookie — to mark the one thing on a screen worth looking at
+ * first: an empty state's symbol, a step in a flow. Drawn from the same radial
+ * maths the loading indicator morphs (`~/lib/shape`), so the app's shapes are
+ * one family.
+ */
+export { type ExpressiveShapeName } from '../expressive-shapes.ts';
+import { type ExpressiveShapeName } from '../expressive-shapes.ts';
+export declare function ExpressiveShape({ shape, size, color, children, }: {
+    shape: ExpressiveShapeName;
+    size: number;
+    color: string;
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/fab-menu-legacy.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { type IconProps } from './icons.tsx';
+export interface FabMenuAction {
+    disabled?: boolean;
+    destructive?: boolean;
+    id: string;
+    label: string;
+    icon: React.ComponentType<IconProps>;
+    run: () => void;
+}
+export interface FabMenuProps {
+    bottom: number;
+    label: string;
+    actions: FabMenuAction[];
+}
+/**
+ * The button's closed size: the height of the floating navigation bar it
+ * sits beside, so the two read as one row — and round, as the bar is.
+ */
+export declare const FAB_MENU_SIZE = 64;
+/**
+ * The capture button, as an Expressive FAB menu.
+ *
+ * Closed, it is the one tinted circle beside the navigation bar (or, in a
+ * collection, in the corner). Open, it shrinks into a smaller close button
+ * while the ways in — link or text, file, scan, camera — unfold above it one after
+ * another, each a full-width pill with its name on it. Everything else dims;
+ * nothing about capturing asks where a thing goes. Only ways in: a list is
+ * written, not captured, and is started from Collections or a collection's menu.
+ */
+export declare function LegacyFabMenu({ bottom, label, actions }: FabMenuProps): React.JSX.Element;

package/dist/components/fab-menu.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type IconProps } from './icons.tsx';
+import { type MaterialOptions } from '../provider.tsx';
+export interface FabMenuAction {
+    id: string;
+    label: string;
+    icon: React.ComponentType<IconProps>;
+    run: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+}
+export interface FabMenuProps extends MaterialOptions {
+    /** Material of the anchored menu, independent of the floating trigger. */
+    menuMaterial?: MaterialOptions['material'];
+    bottom: number;
+    label: string;
+    actions: FabMenuAction[];
+}
+export declare const FAB_MENU_SIZE = 64;
+/** Floating primary action with a safe, anchored overflow surface on native and web. */
+export declare function FabMenu({ bottom, label, actions, material, menuMaterial, glassStyle, tintColor, fallbackColor, interactive, }: FabMenuProps): React.JSX.Element;