@webority-technologies/mobile-ui 0.0.1

package/lib/module/utils/hapticUtils.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import { Platform, Vibration } from 'react-native';
+let hapticImpl = null;
+const tryLoadOptional = () => {
+  if (hapticImpl) {
+    return;
+  }
+  try {
+    // Lazily try to load the user's optional haptic dep without making it a hard requirement.
+    const haptic = require('react-native-haptic-feedback');
+    const trigger = haptic.default?.trigger ?? haptic.trigger;
+    if (typeof trigger === 'function') {
+      hapticImpl = type => trigger(type, {
+        enableVibrateFallback: true
+      });
+    }
+  } catch {
+    // Ignored: not installed; fall back to Vibration on Android, no-op on iOS.
+  }
+};
+const fallback = type => {
+  if (Platform.OS === 'android') {
+    const map = {
+      selection: 5,
+      impactLight: 10,
+      impactMedium: 20,
+      impactHeavy: 30,
+      notificationSuccess: 15,
+      notificationWarning: 25,
+      notificationError: 40
+    };
+    Vibration.vibrate(map[type] ?? 10);
+  }
+};
+export const triggerHaptic = (type = 'selection') => {
+  tryLoadOptional();
+  if (hapticImpl) {
+    try {
+      hapticImpl(type);
+      return;
+    } catch {
+      /* ignore */
+    }
+  }
+  fallback(type);
+};
+export const setHapticImplementation = impl => {
+  hapticImpl = impl;
+};
+
+/**
+ * Resolves a component's `haptic` prop to the type that should fire, or null
+ * when haptics are off. `false` disables; a `HapticType` overrides; `undefined`
+ * falls back to the component's sensible default. Pair with `triggerHaptic`:
+ *   const h = resolveHaptic(haptic, 'selection');
+ *   if (h) triggerHaptic(h);
+ */
+export const resolveHaptic = (haptic, fallbackType) => haptic === false ? null : haptic ?? fallbackType;
+//# sourceMappingURL=hapticUtils.js.map

package/lib/module/utils/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+export { configureFeedback, feedback, hapticForIntent, isFeedbackEnabled } from "./feedback.js";
+export { resolveHaptic, setHapticImplementation, triggerHaptic } from "./hapticUtils.js";
+export { Breakpoints, isScreenSize, isTablet, Responsive, ScreenDimensions } from "./responsive.js";
+export { shadowStyle } from "./shadows.js";
+export { Margin, Padding, Spacing } from "./spacing.js";
+export { warnUnknownProps } from "./warnUnknownProps.js";
+//# sourceMappingURL=index.js.map

package/lib/module/utils/responsive.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { Dimensions, PixelRatio, Platform } from 'react-native';
+const BASE_WIDTH = 390;
+const BASE_HEIGHT = 844;
+const {
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT
+} = Dimensions.get('window');
+export const ScreenDimensions = {
+  width: SCREEN_WIDTH,
+  height: SCREEN_HEIGHT,
+  pixelRatio: PixelRatio.get(),
+  fontScale: PixelRatio.getFontScale()
+};
+export const Breakpoints = {
+  xs: 0,
+  sm: 360,
+  md: 414,
+  lg: 768,
+  xl: 1024
+};
+export const isScreenSize = size => {
+  return SCREEN_WIDTH >= Breakpoints[size];
+};
+export const isTablet = () => SCREEN_WIDTH >= Breakpoints.lg;
+const widthScale = SCREEN_WIDTH / BASE_WIDTH;
+const heightScale = SCREEN_HEIGHT / BASE_HEIGHT;
+const minScale = Math.min(widthScale, heightScale);
+export const Responsive = {
+  width: size => Math.round(size * widthScale),
+  height: size => Math.round(size * heightScale),
+  size: size => Math.round(size * minScale),
+  font: size => {
+    const scaled = size * minScale;
+    if (Platform.OS === 'ios') {
+      return Math.round(PixelRatio.roundToNearestPixel(scaled));
+    }
+    return Math.round(PixelRatio.roundToNearestPixel(scaled)) - 1;
+  }
+};
+//# sourceMappingURL=responsive.js.map

package/lib/module/utils/shadows.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export const shadowStyle = (shadows, level) => {
+  const def = shadows[level];
+  return def;
+};
+//# sourceMappingURL=shadows.js.map

package/lib/module/utils/spacing.js

@@ -0,0 +1,82 @@
+"use strict";
+
+import { getTheme } from "../theme/index.js";
+export const Spacing = {
+  get none() {
+    return getTheme().spacing.none;
+  },
+  get xxs() {
+    return getTheme().spacing.xxs;
+  },
+  get xs() {
+    return getTheme().spacing.xs;
+  },
+  get sm() {
+    return getTheme().spacing.sm;
+  },
+  get md() {
+    return getTheme().spacing.md;
+  },
+  get lg() {
+    return getTheme().spacing.lg;
+  },
+  get xl() {
+    return getTheme().spacing.xl;
+  },
+  get '2xl'() {
+    return getTheme().spacing['2xl'];
+  },
+  get '3xl'() {
+    return getTheme().spacing['3xl'];
+  },
+  get '4xl'() {
+    return getTheme().spacing['4xl'];
+  }
+};
+export const Padding = {
+  all: token => ({
+    padding: getTheme().spacing[token]
+  }),
+  horizontal: token => ({
+    paddingHorizontal: getTheme().spacing[token]
+  }),
+  vertical: token => ({
+    paddingVertical: getTheme().spacing[token]
+  }),
+  top: token => ({
+    paddingTop: getTheme().spacing[token]
+  }),
+  bottom: token => ({
+    paddingBottom: getTheme().spacing[token]
+  }),
+  left: token => ({
+    paddingLeft: getTheme().spacing[token]
+  }),
+  right: token => ({
+    paddingRight: getTheme().spacing[token]
+  })
+};
+export const Margin = {
+  all: token => ({
+    margin: getTheme().spacing[token]
+  }),
+  horizontal: token => ({
+    marginHorizontal: getTheme().spacing[token]
+  }),
+  vertical: token => ({
+    marginVertical: getTheme().spacing[token]
+  }),
+  top: token => ({
+    marginTop: getTheme().spacing[token]
+  }),
+  bottom: token => ({
+    marginBottom: getTheme().spacing[token]
+  }),
+  left: token => ({
+    marginLeft: getTheme().spacing[token]
+  }),
+  right: token => ({
+    marginRight: getTheme().spacing[token]
+  })
+};
+//# sourceMappingURL=spacing.js.map

package/lib/module/utils/warnUnknownProps.js

@@ -0,0 +1,42 @@
+"use strict";
+
+import { Logger } from '@webority-technologies/mobile-core';
+
+/**
+ * Dev-time warning for props a component does not accept.
+ *
+ * This exists for a class of bug that nothing in a JS consumer's toolchain
+ * objects to. A component destructures the props it knows and ignores the rest,
+ * so a renamed or mistyped prop is simply dropped — silently, at every call
+ * site. The web library hit this three times in one day: `body` instead of
+ * `message` left nine destructive confirm dialogs with no explanatory text, and
+ * `name` instead of `icon` emptied an entire actions column across 23 call
+ * sites. Neither failed a build, a lint or a test.
+ *
+ * Our components are TypeScript, so a TS consumer is already protected at
+ * compile time. Several apps in the fleet are plain JS, and they get nothing —
+ * which is who this is for. The check therefore has to be a runtime one, and it
+ * has to run where the mistake is made: the consumer's dev server.
+ *
+ * DEV ONLY — the `__DEV__` guard means it costs a release build nothing.
+ */
+export const warnUnknownProps = (componentName, rest) => {
+  if (!__DEV__ || !rest) {
+    return;
+  }
+  const unknown = Object.keys(rest).filter(key => !isAllowed(key));
+  if (unknown.length === 0) {
+    return;
+  }
+  Logger.warn(`[${componentName}] received prop(s) it does not accept: ${unknown.join(', ')}. ` + "They were ignored — check for a rename or a typo against the component's props.");
+};
+
+/**
+ * Keys that legitimately arrive through `...rest` and must never warn. The list
+ * is deliberately generous: a false positive fires on correct code, and a
+ * warning people learn to ignore is worse than no warning at all.
+ */
+const ALLOWED_EXACT = new Set(['children', 'key', 'ref', 'style', 'testID', 'collapsable', 'nativeID', 'pointerEvents', 'removeClippedSubviews', 'renderToHardwareTextureAndroid', 'shouldRasterizeIOS', 'needsOffscreenAlphaCompositing', 'hitSlop', 'onLayout', 'importantForAccessibility', 'role']);
+const ALLOWED_PREFIXES = ['accessibility', 'aria-', 'on', 'data-'];
+const isAllowed = key => ALLOWED_EXACT.has(key) || ALLOWED_PREFIXES.some(p => key.startsWith(p));
+//# sourceMappingURL=warnUnknownProps.js.map

package/lib/typescript/commonjs/components/Accordion/Accordion.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+export type AccordionVariant = 'plain' | 'card';
+export interface AccordionProps {
+    title: string;
+    children: React.ReactNode;
+    id?: string;
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+    onChange?: (expanded: boolean) => void;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    variant?: AccordionVariant;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    headerStyle?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the animated wrapper around the expandable content. */
+    contentWrapperStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the outermost container View. */
+    containerStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+    /**
+     * When true, renders the accordion as its authored skeleton placeholder
+     * shape (header row, collapsed body). Footprint matches the closed live
+     * accordion so the layout doesn't shift when data arrives.
+     */
+    loading?: boolean;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+}
+export interface AccordionGroupProps {
+    children: React.ReactNode;
+    allowMultiple?: boolean;
+    defaultExpandedKeys?: string[];
+    expandedKeys?: string[];
+    onChange?: (keys: string[]) => void;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const AccordionGroup: React.FC<AccordionGroupProps>;
+declare const Accordion: React.FC<AccordionProps> & {
+    Skeleton: React.FC<AccordionProps>;
+};
+export { Accordion, AccordionGroup };
+export default Accordion;
+//# sourceMappingURL=Accordion.d.ts.map

package/lib/typescript/commonjs/components/Accordion/index.d.ts

@@ -0,0 +1,3 @@
+export type { AccordionGroupProps, AccordionProps, AccordionVariant } from './Accordion';
+export { Accordion, AccordionGroup, default } from './Accordion';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/AnimatePresence/AnimatePresence.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export type PresencePreset = 'fade' | 'scale' | 'slide-up' | 'slide-down';
+export interface AnimatePresenceProps {
+    /**
+     * Render conditionally. When this goes null / undefined / false the exit
+     * animation plays before the content unmounts; when it returns the enter
+     * animation plays. Drive it like `{visible ? <Panel /> : null}`.
+     */
+    children?: React.ReactNode;
+    /** Enter/exit preset. Default `'fade'`. */
+    preset?: PresencePreset;
+    /** Animation duration (ms). Defaults to `theme.motion.duration.base`. */
+    duration?: number;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * Animates a single child in on mount and out on unmount. Thin, theme-aware
+ * wrapper over Reanimated's `entering`/`exiting` — Reanimated keeps the view
+ * alive to play the exit, so the parent only toggles a condition. Honors the OS
+ * Reduce Motion setting (renders instantly when reduced).
+ *
+ * For animating items inside a list, use Reanimated's `itemLayoutAnimation`
+ * on `Animated.FlatList` instead — this wrapper targets single conditional nodes.
+ */
+declare const AnimatePresence: React.FC<AnimatePresenceProps>;
+export { AnimatePresence };
+export default AnimatePresence;
+//# sourceMappingURL=AnimatePresence.d.ts.map

package/lib/typescript/commonjs/components/AnimatePresence/index.d.ts

@@ -0,0 +1,3 @@
+export type { AnimatePresenceProps, PresencePreset } from './AnimatePresence';
+export { AnimatePresence } from './AnimatePresence';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/AppBar/AppBar.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import { Animated } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+export type AppBarVariant = 'default' | 'large' | 'compact';
+export type AppBarTitleAlignment = 'left' | 'center';
+export interface AppBarAction {
+    icon: React.ReactNode;
+    onPress: () => void;
+    accessibilityLabel?: string;
+    testID?: string;
+}
+export interface AppBarRightAction extends AppBarAction {
+    badge?: number | string;
+}
+export interface AppBarProps {
+    title?: string;
+    subtitle?: string;
+    titleAlignment?: AppBarTitleAlignment;
+    leftAction?: AppBarAction;
+    rightActions?: AppBarRightAction[];
+    variant?: AppBarVariant;
+    transparent?: boolean;
+    /**
+     * Optional ScrollView vertical offset (Animated.Value) used to drive the
+     * "collapsing app bar" effect when `variant='large'`. As `scrollY` moves
+     * from 0 → 60, the large title shrinks/translates into the compact bar
+     * area and a bottom hairline border fades in.
+     */
+    scrollY?: Animated.Value | Animated.AnimatedInterpolation<number>;
+    style?: StyleProp<ViewStyle>;
+    /** Alias for `style` applied to the outer container (animated when collapsing). */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the title Animated.Text. */
+    titleStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the subtitle Animated.Text. */
+    subtitleStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the right-action badge bubble. */
+    badgeStyle?: StyleProp<ViewStyle>;
+    /**
+     * Haptic feedback for interactions. Pass false to disable; pass a HapticType
+     * to override the default.
+     */
+    haptic?: HapticType | false;
+    testID?: string;
+}
+declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & React.RefAttributes<RNView>>;
+export { AppBar };
+export default AppBar;
+//# sourceMappingURL=AppBar.d.ts.map

package/lib/typescript/commonjs/components/AppBar/index.d.ts

@@ -0,0 +1,3 @@
+export type { AppBarAction, AppBarProps, AppBarRightAction, AppBarTitleAlignment, AppBarVariant } from './AppBar';
+export { AppBar, default } from './AppBar';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/AsyncBlock/AsyncBlock.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface AsyncBlockProps {
+    /** Show the placeholder instead of content. */
+    loading?: boolean;
+    /** An error to show in place of content. Falsy means no error. */
+    error?: string | React.ReactNode;
+    /** The fetch succeeded with nothing to show. */
+    empty?: boolean;
+    /** Retry affordance on the error state. Omit to render the error without one. */
+    onRetry?: () => void;
+    /** Placeholder shaped like the content. Falls back to a centred Spinner. */
+    skeleton?: React.ReactNode;
+    /** Copy for the empty state. */
+    emptyTitle?: string;
+    emptyDescription?: string;
+    emptyIcon?: React.ReactNode;
+    /** Copy for the error state. `error` itself is used as the description when it is a string. */
+    errorTitle?: string;
+    retryLabel?: string;
+    /** Rendered once loaded, error-free and non-empty. */
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * The loading / error / empty / content switcher every screen that fetches data
+ * needs. Without it each screen re-implements the same four-way branch and they
+ * disagree — one shows a spinner over stale rows, the next flashes an empty
+ * state mid-fetch.
+ *
+ * Precedence is fixed: `loading` wins over everything, then `error`, then
+ * `empty`, then `children`. A fetch that is both in flight and holding a stale
+ * error shows only the loading state, which is the least surprising reading of
+ * "still in flight".
+ */
+export declare const AsyncBlock: React.FC<AsyncBlockProps>;
+export default AsyncBlock;
+//# sourceMappingURL=AsyncBlock.d.ts.map

package/lib/typescript/commonjs/components/AsyncBlock/index.d.ts

@@ -0,0 +1,3 @@
+export type { AsyncBlockProps } from './AsyncBlock';
+export { AsyncBlock, default } from './AsyncBlock';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils';
+import type { InputSize, InputVariant } from '../Input';
+export interface AutocompleteProps<T = string> {
+    /** Candidate options to filter. */
+    options: ReadonlyArray<T>;
+    /** Controlled input text. */
+    value?: string;
+    /** Uncontrolled initial text. */
+    defaultValue?: string;
+    onChangeText?: (text: string) => void;
+    /** Fired when a suggestion is chosen. */
+    onSelect: (option: T) => void;
+    /** Read a display label from an option. Defaults to the option itself for strings. */
+    getOptionLabel?: (option: T) => string;
+    /** Stable React key per option. Defaults to label + index. */
+    getOptionKey?: (option: T) => string;
+    /** Custom match predicate. Defaults to a case-insensitive substring match on the label. */
+    filter?: (option: T, query: string) => boolean;
+    /** Minimum characters before suggestions appear. Default 1. */
+    minChars?: number;
+    /** Cap the number of suggestions shown. Default 8. */
+    maxResults?: number;
+    /** Text shown when nothing matches. Default "No matches". */
+    emptyText?: string;
+    /** Show a loading spinner in the dropdown — e.g. while fetching remote results. */
+    loading?: boolean;
+    /** `'client'` filters `options` locally; `'none'` shows them as-is (for server-side search). Default `'client'`. */
+    filterMode?: 'client' | 'none';
+    /** Text beside the loading spinner. Default "Searching…". */
+    loadingText?: string;
+    placeholder?: string;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    disabled?: boolean;
+    size?: InputSize;
+    variant?: InputVariant;
+    /** Haptic on select. Default `'selection'`. */
+    haptic?: HapticType | false;
+    style?: StyleProp<ViewStyle>;
+    listStyle?: StyleProp<ViewStyle>;
+    optionTextStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare function Autocomplete<T = string>(props: AutocompleteProps<T>): React.JSX.Element;
+declare namespace Autocomplete {
+    var displayName: string;
+}
+export { Autocomplete };
+export default Autocomplete;
+//# sourceMappingURL=Autocomplete.d.ts.map

package/lib/typescript/commonjs/components/Autocomplete/index.d.ts

@@ -0,0 +1,3 @@
+export type { AutocompleteProps } from './Autocomplete';
+export { Autocomplete } from './Autocomplete';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Avatar/Avatar.d.ts

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { ImageSourcePropType, ImageStyle, View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+/**
+ * Props passed to a custom {@link AvatarProps.ImageComponent}. They mirror what
+ * the built-in `<Image>` receives, so a plain RN `Image` is a valid drop-in.
+ * Supply a custom component to render images that need authenticated fetching,
+ * caching, or token refresh (the library stays auth-agnostic).
+ */
+export interface AvatarImageProps {
+    source: ImageSourcePropType;
+    style: StyleProp<ImageStyle>;
+    resizeMode: 'cover';
+    onError: () => void;
+    accessibilityIgnoresInvertColors?: boolean;
+}
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+export type AvatarShape = 'circle' | 'square' | 'rounded';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | null;
+export type AvatarStatusPosition = 'topRight' | 'bottomRight';
+export interface AvatarProps {
+    source?: ImageSourcePropType;
+    /**
+     * Custom component used to render the image instead of the built-in `<Image>`.
+     * Receives {@link AvatarImageProps}. Use this when `source` points at a secured
+     * endpoint that needs auth headers / token refresh / caching — plug in the
+     * app's authenticated image loader. On error it should call `onError`, which
+     * triggers the initials fallback. When omitted, a plain RN `<Image>` is used.
+     */
+    ImageComponent?: React.ComponentType<AvatarImageProps>;
+    name?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    status?: AvatarStatus;
+    statusPosition?: AvatarStatusPosition;
+    backgroundColor?: string;
+    color?: string;
+    /**
+     * Per-instance initials font size in pixels. Wins over theme tokens
+     * (`avatar.fontSize` and `avatar.fontSizeRatio`) and the size-derived default.
+     */
+    fontSize?: number;
+    /**
+     * When true, renders the component as its authored skeleton placeholder shape.
+     * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
+     * when data arrives. Use this while the data driving the component is being fetched.
+     */
+    loading?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<AvatarProps>;
+};
+export type AvatarGroupSpacing = 'tight' | 'normal' | 'loose';
+export type AvatarGroupOverflowVariant = 'count' | 'plus';
+export interface AvatarGroupProps {
+    children: React.ReactElement<AvatarProps>[];
+    max?: number;
+    size?: AvatarSize;
+    spacing?: AvatarGroupSpacing;
+    overflowVariant?: AvatarGroupOverflowVariant;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const AvatarGroup: React.FC<AvatarGroupProps>;
+type AvatarComponent = typeof Avatar & {
+    Group: typeof AvatarGroup;
+};
+declare const AvatarWithGroup: AvatarComponent;
+export { Avatar, AvatarGroup };
+export default AvatarWithGroup;
+//# sourceMappingURL=Avatar.d.ts.map

package/lib/typescript/commonjs/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export type { AvatarGroupOverflowVariant, AvatarGroupProps, AvatarGroupSpacing, AvatarImageProps, AvatarProps, AvatarShape, AvatarSize, AvatarStatus, AvatarStatusPosition } from './Avatar';
+export { Avatar, AvatarGroup, default } from './Avatar';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Badge/Badge.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { View as RNView, StyleProp, TextStyle, ViewStyle } from 'react-native';
+export type BadgeVariant = 'standard' | 'dot';
+export type BadgeTone = 'primary' | 'success' | 'warning' | 'error' | 'neutral' | 'info';
+export type BadgeSize = 'sm' | 'md';
+export type BadgeAnchor = 'topRight' | 'topLeft' | 'bottomRight' | 'bottomLeft';
+export interface BadgeProps {
+    value?: number | string;
+    max?: number;
+    variant?: BadgeVariant;
+    tone?: BadgeTone;
+    size?: BadgeSize;
+    invisible?: boolean;
+    /**
+     * When true, renders the component as its authored skeleton placeholder shape.
+     * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
+     * when data arrives. Use this while the data driving the component is being fetched.
+     */
+    loading?: boolean;
+    children?: React.ReactNode;
+    anchor?: BadgeAnchor;
+    pulse?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    badgeStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    testID?: string;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<BadgeProps>;
+};
+export { Badge };
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/lib/typescript/commonjs/components/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export type { BadgeAnchor, BadgeProps, BadgeSize, BadgeTone, BadgeVariant } from './Badge';
+export { Badge, default } from './Badge';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/commonjs/components/Banner/Banner.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native';
+import type { HapticType } from '../../utils/hapticUtils';
+export type BannerVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+export interface BannerAction {
+    label: string;
+    onPress: () => void;
+    tone?: 'primary' | 'neutral';
+}
+export interface BannerProps {
+    title?: string;
+    message: string | React.ReactNode;
+    variant?: BannerVariant;
+    icon?: React.ReactNode | false;
+    actions?: BannerAction[];
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    /** Haptic feedback for interactions. Pass false to disable; pass a HapticType to override the default. */
+    haptic?: HapticType | false;
+    visible?: boolean;
+    animateMount?: boolean;
+    /**
+     * When true, renders the component as its authored skeleton placeholder shape.
+     * The placeholder mirrors the real layout's footprint so the UI doesn't reflow
+     * when data arrives. Use this while the data driving the component is being fetched.
+     */
+    loading?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    /** Alias for `style` — applied to the outer animated container. */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the auto-rendered icon circle (when no custom `icon` is provided). */
+    iconCircleStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the leading tint bar. */
+    tintBarStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the dismiss/close button. */
+    closeButtonStyle?: StyleProp<ViewStyle>;
+    /** Style applied to each action button (Pressable). */
+    actionButtonStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<RNView>> & {
+    Skeleton: React.FC<BannerProps>;
+};
+export { Banner };
+export default Banner;
+//# sourceMappingURL=Banner.d.ts.map