@entropix/react-native 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,465 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { tokens as tokens$1 } from '@entropix/tokens/native';
+import { tokens } from '@entropix/tokens/native/light';
+import { AccessibilityProps, UseDialogOptions, UseTabsOptions, UseAccordionOptions, UseMenuOptions } from '@entropix/core';
+import { AccessibilityRole, AccessibilityState, AccessibilityValue, PressableProps, StyleProp, ViewStyle, TextStyle, ViewProps, TextProps } from 'react-native';
+
+type EntropixTheme = typeof tokens;
+type ThemeMode = "light" | "dark";
+interface ThemeContextValue {
+    mode: ThemeMode;
+    tokens: EntropixTheme;
+    baseTokens: typeof tokens$1;
+}
+interface EntropixProviderProps {
+    /** Theme mode: "light" or "dark". Default: "light" */
+    mode?: ThemeMode;
+    children: React.ReactNode;
+}
+/**
+ * EntropixProvider — Provides theme tokens to all Entropix components.
+ *
+ * Wrap your app root with this provider. All Entropix components will
+ * automatically pick up the current theme tokens.
+ *
+ * ```tsx
+ * <EntropixProvider mode="dark">
+ *   <App />
+ * </EntropixProvider>
+ * ```
+ */
+declare function EntropixProvider({ mode, children, }: EntropixProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * useTheme — Access current Entropix theme tokens.
+ *
+ * Returns the resolved token values for the current theme (light or dark).
+ * Must be used within an EntropixProvider.
+ */
+declare function useTheme(): ThemeContextValue;
+
+/**
+ * The RN accessibility props that mapAccessibilityToRN produces.
+ * These spread directly onto Pressable/View/Text components.
+ */
+interface RNAccessibilityProps {
+    accessible?: boolean;
+    accessibilityRole?: AccessibilityRole;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    accessibilityLabelledBy?: string | string[];
+    accessibilityState?: AccessibilityState;
+    accessibilityValue?: AccessibilityValue;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive";
+    accessibilityElementsHidden?: boolean;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants";
+}
+
+/**
+ * Maps platform-neutral AccessibilityProps from @entropix/core
+ * to React Native accessibility props.
+ *
+ * Key differences from the web adapter:
+ * - Boolean states aggregated into accessibilityState object
+ * - Value props aggregated into accessibilityValue object
+ * - describedBy maps to accessibilityHint (closest RN equivalent)
+ * - hidden maps to both iOS (accessibilityElementsHidden) and Android (importantForAccessibility)
+ * - modal, hasPopup, controls, owns, tabIndex, pressed are silently dropped (no RN equivalent)
+ */
+declare function mapAccessibilityToRN(props: AccessibilityProps): RNAccessibilityProps;
+
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
+    /** Called when the button is pressed */
+    onPress?: () => void;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button is in a loading state */
+    loading?: boolean;
+    /** Visual variant. Default: "primary" */
+    variant?: ButtonVariant;
+    /** Size. Default: "md" */
+    size?: ButtonSize;
+    /** Override container style */
+    style?: StyleProp<ViewStyle>;
+    /** Override label text style */
+    textStyle?: TextStyle;
+    children?: React.ReactNode;
+}
+/**
+ * Button — styled React Native button with variant and size support.
+ *
+ * ```tsx
+ * <Button variant="primary" size="md" onPress={handlePress}>
+ *   Save Changes
+ * </Button>
+ * ```
+ */
+declare function Button({ onPress, disabled, loading, variant, size, style, textStyle, children, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Default checked state for uncontrolled mode */
+    defaultChecked?: boolean;
+    /** Called when checked state changes */
+    onChange?: (checked: boolean) => void;
+    /** Whether the toggle is disabled */
+    disabled?: boolean;
+    /** Accessible label */
+    label?: string;
+    /** Override container style */
+    style?: StyleProp<ViewStyle>;
+    /** Override label text style */
+    textStyle?: TextStyle;
+    children?: React.ReactNode;
+}
+/**
+ * Toggle — styled checkbox toggle.
+ *
+ * Renders as a bordered pill that fills blue when checked.
+ *
+ * ```tsx
+ * <Toggle onChange={setChecked}>Accept Terms</Toggle>
+ * ```
+ */
+declare function Toggle(props: ToggleProps): react_jsx_runtime.JSX.Element;
+
+interface SwitchProps extends Omit<PressableProps, "disabled" | "onPress" | "style" | "children"> {
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Default checked state for uncontrolled mode */
+    defaultChecked?: boolean;
+    /** Called when checked state changes */
+    onChange?: (checked: boolean) => void;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Accessible label */
+    label?: string;
+    /** Override track style */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Switch — styled toggle with track + sliding thumb.
+ *
+ * ```tsx
+ * <Switch checked={isOn} onChange={setIsOn} label="Notifications" />
+ * ```
+ */
+declare function Switch({ checked, defaultChecked, onChange, disabled, label, style, ...rest }: SwitchProps): react_jsx_runtime.JSX.Element;
+
+interface DialogProps extends UseDialogOptions {
+    children: React.ReactNode;
+}
+/**
+ * Dialog root — provides dialog state to compound sub-components.
+ * Renders no UI of its own.
+ */
+declare function Dialog({ children, isOpen, defaultOpen, onOpenChange, closeOnOverlayPress, closeOnEscape, modal, role, }: DialogProps): react_jsx_runtime.JSX.Element;
+
+interface DialogTriggerProps extends Omit<PressableProps, "onPress" | "style"> {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * DialogTrigger — Pressable that opens/closes the dialog.
+ */
+declare function DialogTrigger({ children, style, ...rest }: DialogTriggerProps): react_jsx_runtime.JSX.Element;
+
+interface DialogContentProps extends Omit<ViewProps, "style"> {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /** Style for the inner card. */
+    cardStyle?: StyleProp<ViewStyle>;
+    /** Modal animation type. Default: "fade" */
+    animationType?: "none" | "slide" | "fade";
+    /** Whether the modal background is transparent. Default: true */
+    transparent?: boolean;
+}
+/**
+ * DialogContent — wraps children in RN's Modal component.
+ *
+ * Modal provides native focus trapping for screen readers.
+ * onRequestClose handles Android back button (maps to core's "dismiss" intent).
+ */
+declare function DialogContent({ children, style, cardStyle, animationType, transparent, ...rest }: DialogContentProps): react_jsx_runtime.JSX.Element;
+
+interface DialogTitleProps extends Omit<TextProps, "style"> {
+    children?: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+/**
+ * DialogTitle — Text element with nativeID for accessibility linking.
+ * Uses accessibilityRole="header" for screen reader heading semantics.
+ */
+declare function DialogTitle({ children, style, ...rest }: DialogTitleProps): react_jsx_runtime.JSX.Element;
+
+interface DialogDescriptionProps extends Omit<TextProps, "style"> {
+    children?: React.ReactNode;
+    style?: StyleProp<TextStyle>;
+}
+/**
+ * DialogDescription — Text element with nativeID for accessibility linking.
+ */
+declare function DialogDescription({ children, style, ...rest }: DialogDescriptionProps): react_jsx_runtime.JSX.Element;
+
+interface DialogCloseProps extends Omit<PressableProps, "onPress" | "style"> {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * DialogClose — Pressable that closes the dialog.
+ * Renders as a positioned "✕" button by default if no children provided.
+ */
+declare function DialogClose({ children, style, ...rest }: DialogCloseProps): react_jsx_runtime.JSX.Element;
+
+interface DialogOverlayProps {
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+/**
+ * DialogOverlay — backdrop element behind dialog content.
+ * Note: With the self-styled DialogContent, the overlay is built into the
+ * Modal wrapper. This component is kept for consumers who need a separate
+ * overlay element (e.g., custom dismiss-on-tap behavior outside DialogContent).
+ */
+declare function DialogOverlay({ style, testID }: DialogOverlayProps): react_jsx_runtime.JSX.Element | null;
+
+interface TabsProps extends UseTabsOptions {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Tabs({ children, style, ...options }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface TabListProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function TabList({ children, style }: TabListProps): react_jsx_runtime.JSX.Element;
+
+interface TabProps extends Omit<PressableProps, "onPress" | "style" | "children"> {
+    value: string;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: TextStyle;
+}
+declare function Tab({ value, children, style, textStyle, ...rest }: TabProps): react_jsx_runtime.JSX.Element;
+
+interface TabPanelProps {
+    value: string;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function TabPanel({ value, children, style }: TabPanelProps): react_jsx_runtime.JSX.Element | null;
+
+interface AccordionProps extends UseAccordionOptions {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function Accordion({ children, style, ...options }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+interface AccordionItemProps {
+    value: string;
+    /** Whether this is the last item (hides bottom border). Auto-detected if omitted. */
+    isLast?: boolean;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function AccordionItem({ value, isLast, children, style, }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+
+interface AccordionTriggerProps extends Omit<PressableProps, "onPress" | "style" | "children"> {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: TextStyle;
+}
+declare function AccordionTrigger({ children, style, textStyle, ...rest }: AccordionTriggerProps): react_jsx_runtime.JSX.Element;
+
+interface AccordionPanelProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function AccordionPanel({ children, style }: AccordionPanelProps): react_jsx_runtime.JSX.Element | null;
+
+interface MenuProps extends UseMenuOptions {
+    children: React.ReactNode;
+}
+declare function Menu({ children, ...options }: MenuProps): react_jsx_runtime.JSX.Element;
+
+interface MenuTriggerProps extends Omit<PressableProps, "onPress" | "style"> {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+declare function MenuTrigger({ children, style, ...rest }: MenuTriggerProps): react_jsx_runtime.JSX.Element;
+
+interface MenuContentProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+}
+declare function MenuContent({ children, style, testID }: MenuContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface MenuItemProps extends Omit<PressableProps, "onPress" | "disabled" | "style"> {
+    index: number;
+    onSelect?: () => void;
+    disabled?: boolean;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: TextStyle;
+}
+declare function MenuItem({ index, onSelect, disabled, children, style, textStyle, ...rest }: MenuItemProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Breakpoint values in pixels, matching @entropix/tokens breakpoint primitives.
+ */
+declare const BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly "2xl": 1536;
+};
+type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
+/**
+ * Returns the current breakpoint name based on screen width.
+ * Uses React Native's Dimensions API and listens for screen size changes
+ * (orientation changes, split-screen, etc.).
+ *
+ * - `"base"` — <640px (phones portrait)
+ * - `"sm"` — ≥640px (phones landscape)
+ * - `"md"` — ≥768px (tablets portrait)
+ * - `"lg"` — ≥1024px (tablets landscape)
+ * - `"xl"` — ≥1280px (large tablets / desktop)
+ * - `"2xl"` — ≥1536px (wide screens)
+ *
+ * ```tsx
+ * const breakpoint = useBreakpoint();
+ * const isMobile = breakpoint === "base" || breakpoint === "sm";
+ * ```
+ */
+declare function useBreakpoint(): Breakpoint;
+/**
+ * Returns true if the current screen width is at or above the given breakpoint.
+ *
+ * ```tsx
+ * const isTablet = useBreakpointValue("md");
+ * // true when screen ≥768px (tablet portrait and up)
+ * ```
+ */
+declare function useBreakpointValue(breakpoint: Exclude<Breakpoint, "base">): boolean;
+/**
+ * Returns the current screen dimensions, updating on orientation/size changes.
+ *
+ * ```tsx
+ * const { width, height } = useScreenDimensions();
+ * ```
+ */
+declare function useScreenDimensions(): {
+    width: number;
+    height: number;
+};
+
+type SpacingSize$1 = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface StackProps extends ViewProps {
+    /** Gap between children. Default uses space.layout.stack token (16px) */
+    gap?: SpacingSize$1;
+    /** Cross-axis alignment */
+    align?: "start" | "center" | "end" | "stretch";
+    /** Whether to take full width */
+    fullWidth?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Stack — vertical flex layout primitive for React Native.
+ *
+ * Uses the `space.layout.stack` token (16px) as default gap.
+ *
+ * ```tsx
+ * <Stack gap="lg" align="center">
+ *   <Button>First</Button>
+ *   <Button>Second</Button>
+ * </Stack>
+ * ```
+ */
+declare function Stack({ gap, align, fullWidth, style, children, ...rest }: StackProps): react_jsx_runtime.JSX.Element;
+
+type SpacingSize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface InlineProps extends ViewProps {
+    /** Gap between children. Default uses space.layout.inline token (12px) */
+    gap?: SpacingSize;
+    /** Cross-axis alignment */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Main-axis justification */
+    justify?: "start" | "center" | "end" | "between" | "around";
+    /** Whether to wrap children */
+    wrap?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Inline — horizontal flex layout primitive for React Native.
+ *
+ * Uses the `space.layout.inline` token (12px) as default gap.
+ *
+ * ```tsx
+ * <Inline gap="sm" justify="between" wrap>
+ *   <Button variant="primary">Save</Button>
+ *   <Button variant="ghost">Cancel</Button>
+ * </Inline>
+ * ```
+ */
+declare function Inline({ gap, align, justify, wrap, style, children, ...rest }: InlineProps): react_jsx_runtime.JSX.Element;
+
+type ContainerSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+interface ContainerProps extends ViewProps {
+    /** Maximum width constraint. Default: "lg" (1024px). On mobile this mainly affects tablet/web. */
+    maxWidth?: ContainerSize;
+    /** Whether to center children horizontally */
+    center?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Container — responsive page-level wrapper with adaptive horizontal padding.
+ *
+ * Padding scales with screen size using breakpoint tokens:
+ * - Mobile (<768px): `space.layout.page-margin` (24px)
+ * - Tablet (≥768px): `space.layout.page-margin-md` (32px)
+ * - Desktop (≥1024px): `space.layout.page-margin-lg` (40px)
+ *
+ * ```tsx
+ * <Container maxWidth="lg">
+ *   <Stack gap="xl">
+ *     <Text>Page content</Text>
+ *   </Stack>
+ * </Container>
+ * ```
+ */
+declare function Container({ maxWidth, center, style, children, ...rest }: ContainerProps): react_jsx_runtime.JSX.Element;
+
+interface DividerProps extends ViewProps {
+    /** Orientation of the divider */
+    orientation?: "horizontal" | "vertical";
+    /** Spacing above and below (or left and right for vertical) */
+    spacing?: "sm" | "md" | "lg";
+}
+/**
+ * Divider — visual separator line for React Native.
+ *
+ * Uses the `color.border.default` token for line color.
+ *
+ * ```tsx
+ * <Stack>
+ *   <Text>Section A</Text>
+ *   <Divider spacing="md" />
+ *   <Text>Section B</Text>
+ * </Stack>
+ *
+ * <Inline>
+ *   <Text>Left</Text>
+ *   <Divider orientation="vertical" spacing="sm" />
+ *   <Text>Right</Text>
+ * </Inline>
+ * ```
+ */
+declare function Divider({ orientation, spacing, style, ...rest }: DividerProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BREAKPOINTS, type Breakpoint, Button, type ButtonProps, Container, type ContainerProps, type ContainerSize, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerProps, EntropixProvider, type EntropixProviderProps, type EntropixTheme, Inline, type InlineProps, Menu, MenuContent, type MenuContentProps, MenuItem, type MenuItemProps, type MenuProps, MenuTrigger, type MenuTriggerProps, type RNAccessibilityProps, type SpacingSize$1 as SpacingSize, Stack, type StackProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, type ThemeMode, Toggle, type ToggleProps, mapAccessibilityToRN, useBreakpoint, useBreakpointValue, useScreenDimensions, useTheme };