panelui-native 0.7.0 → 0.12.0

package/lib/typescript/src/components/popover/index.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Popover — a panel anchored to the thing that opened it.
+ *
+ * A dialog takes the screen and asks to be dealt with; a popover stays next to
+ * its trigger and keeps the context around it visible. That difference is the
+ * whole reason both exist, and it is why this one is positioned rather than
+ * centred.
+ *
+ * ```tsx
+ * <Popover>
+ *   <Popover.Trigger>
+ *     <Button variant="outline">Options</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content placement="bottom" align="end">
+ *     <Popover.Title>Export</Popover.Title>
+ *     <Popover.Description>Choose a format.</Popover.Description>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ *
+ * Placement is a preference, not a promise. The trigger is measured in window
+ * coordinates when it is pressed, the panel measures itself on its first
+ * layout, and the two are reconciled against the safe area: a panel that would
+ * run off the bottom flips above the trigger, and one that would run off the
+ * side slides back inside. So `placement="bottom"` means *below, if below
+ * fits* — which is the only behaviour that survives a trigger near an edge.
+ *
+ * The first frame is rendered transparent, because the panel's own size is not
+ * known until it has laid out once. Without that it would appear at the origin
+ * and jump into place.
+ */
+import { type ReactElement, type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type TextProps } from '../../primitives/text.js';
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+export type PopoverAlign = 'start' | 'center' | 'end';
+export type PopoverPresentation = 'popover' | 'bottom-sheet';
+export interface PopoverProps {
+    children: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Initial state when uncontrolled. */
+    defaultOpen?: boolean;
+    /**
+     * `popover` is the anchored panel. `bottom-sheet` presents the content in a
+     * draggable sheet instead — better on a small screen, or when the content is
+     * a form rather than a menu. Placement, align and the arrow do not apply to a
+     * sheet.
+     */
+    presentation?: PopoverPresentation;
+}
+declare function PopoverRoot({ children, open, onOpenChange, defaultOpen, presentation, }: PopoverProps): import("react").JSX.Element;
+export interface PopoverTriggerProps {
+    children: ReactElement<{
+        onPress?: (...args: unknown[]) => void;
+    }>;
+}
+/**
+ * Wraps its child and toggles the popover on press.
+ *
+ * The child is wrapped in a view rather than given a ref directly: the ref has
+ * to survive whatever the child is — a Button, a plain Pressable, an icon —
+ * and only a wrapper we own is guaranteed to be measurable.
+ */
+declare function PopoverTrigger({ children }: PopoverTriggerProps): import("react").JSX.Element;
+export interface PopoverContentProps extends ViewProps {
+    className?: string;
+    /** Preferred side of the trigger. Flipped when that side does not fit. */
+    placement?: PopoverPlacement;
+    /** Where the panel sits along the trigger's other axis. */
+    align?: PopoverAlign;
+    /** Gap between the trigger and the panel, in pixels. */
+    offset?: number;
+    /** Nudge along the alignment axis, in pixels. */
+    alignOffset?: number;
+    /**
+     * `content-fit` sizes to the content, `trigger` matches the trigger's width,
+     * `full` spans the safe area, and a number is that many pixels.
+     */
+    width?: number | 'trigger' | 'full' | 'content-fit';
+    /**
+     * Floor for the panel's width, in pixels. Worth setting with
+     * `width="trigger"`, where a narrow trigger would otherwise squeeze the
+     * content into a column.
+     */
+    minWidth?: number;
+    /** Tap outside the panel closes it. Default true. */
+    dismissible?: boolean;
+    /**
+     * Frost the background behind the panel instead of dimming it. Uses
+     * `expo-blur` when installed and falls back to the dimmed scrim when it is
+     * not, so it is safe to pass either way.
+     */
+    blur?: boolean;
+    children?: ReactNode;
+}
+declare function PopoverContent({ className, placement, align, offset, alignOffset, width, minWidth, dismissible, blur, children, onLayout: onLayoutProp, style, ...props }: PopoverContentProps): import("react").JSX.Element | null;
+export interface PopoverArrowProps extends ViewProps {
+    className?: string;
+}
+/**
+ * A small square rotated into a diamond, half-buried under the panel so only
+ * the point shows. It needs the panel to have a border for its own two visible
+ * edges to line up with — without one it reads as a floating lozenge.
+ *
+ * It points at the trigger's centre, which the panel resolves and publishes:
+ * when `align` shifts the panel off-centre, or a clamp slides it back on
+ * screen, the arrow stays over the trigger rather than over the panel's middle.
+ */
+declare function PopoverArrow({ className, style, ...props }: PopoverArrowProps): import("react").JSX.Element | null;
+export interface PopoverCloseProps {
+    children: ReactElement<{
+        onPress?: (...args: unknown[]) => void;
+    }>;
+}
+/** Wraps its child and closes the popover on press. */
+declare function PopoverClose({ children }: PopoverCloseProps): ReactElement<{
+    onPress?: (...args: unknown[]) => void;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const Popover: typeof PopoverRoot & {
+    Trigger: typeof PopoverTrigger;
+    Content: typeof PopoverContent;
+    Arrow: typeof PopoverArrow;
+    Title: {
+        ({ className, ...props }: TextProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ className, ...props }: TextProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Close: typeof PopoverClose;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/popover/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/progress/index.d.ts

@@ -35,6 +35,8 @@ declare const progressVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
+    root: string;
+    header: string;
     track: string;
     indicator: string;
 }, undefined, {
@@ -72,6 +74,8 @@ declare const progressVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
+    root: string;
+    header: string;
     track: string;
     indicator: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -109,6 +113,8 @@ declare const progressVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
+    root: string;
+    header: string;
     track: string;
     indicator: string;
 }, undefined, unknown, unknown, undefined>>;
@@ -121,11 +127,38 @@ export interface ProgressProps extends Omit<ViewProps, 'children'>, ProgressVari
     indeterminate?: boolean;
     /** Extra classes for the moving indicator. */
     indicatorClassName?: string;
+    /**
+     * Caption drawn above the track, on the left. Supplying it (or
+     * `showValueLabel`) wraps the bar in a header row; the track alone renders
+     * otherwise.
+     */
+    label?: string;
+    /**
+     * Draw the percentage above the track, on the right. Hidden while
+     * `indeterminate` — there is nothing meaningful to show.
+     */
+    showValueLabel?: boolean;
+    /**
+     * Text for the value label. Overrides the formatted percentage — use it for
+     * a byte count, a step tally, anything that is not a bare percent.
+     */
+    valueLabel?: string;
+    /**
+     * Format the value label as a fraction of the whole with `Intl.NumberFormat`
+     * — e.g. `{ style: 'currency', currency: 'USD' }`. Falls back to a rounded
+     * percent when omitted.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /** Extra classes for the label + value-label row. */
+    headerClassName?: string;
 }
 /**
  * Determinate or indeterminate progress bar. The fill width (determinate) and
  * the sliding bar (indeterminate) are both driven on the UI thread, so updates
  * never re-render past the value change itself.
+ *
+ * Pass `label` or `showValueLabel` to caption the bar with a header row; the
+ * bare track renders when neither is set, so existing call sites are untouched.
  */
 export declare const Progress: import("react").ForwardRefExoticComponent<ProgressProps & import("react").RefAttributes<View>>;
 export {};

package/lib/typescript/src/components/progress/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/progress/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAW5E,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAM1D,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAuBpB,CAAC;AAEH,KAAK,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAElE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EACjC,oBAAoB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AASD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,gGA2EpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/progress/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAA0B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAW5E,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAQ1D,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAyBpB,CAAC;AAEH,KAAK,oBAAoB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAElE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,EACjC,oBAAoB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8CAA8C;IAC9C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC;IACzC,qDAAqD;IACrD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AA0BD;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,gGA2GpB,CAAC"}

package/lib/typescript/src/components/radio-group/index.d.ts

@@ -1,20 +1,59 @@
+/**
+ * RadioGroup — one choice from a set.
+ *
+ * The group owns the value and hands each item its selected state through
+ * context, so an item is a thin pressable that reports its own value up and
+ * reads selection back down.
+ *
+ * Two shapes, chosen on the group and inherited by every item: `dot` is the
+ * classic label-beside-a-disc row; `card` turns the whole surface into the
+ * target — for pickable options where the disc is a confirmation rather than
+ * the thing you aim at. The card is the same treatment `Checkbox` offers, so a
+ * form mixing single- and multi-select choices reads as one family.
+ *
+ * ```tsx
+ * <RadioGroup value={plan} onValueChange={setPlan} variant="card">
+ *   <RadioGroup.Item value="pro" label="Pro" description="For growing teams" />
+ *   <RadioGroup.Item value="max" label="Max" description="Everything, uncapped" />
+ * </RadioGroup>
+ * ```
+ */
 import { type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
+type RadioVariant = 'dot' | 'card';
+type RadioOrientation = 'vertical' | 'horizontal';
 export interface RadioGroupProps extends ViewProps {
     className?: string;
     value?: string;
     onValueChange: (value: string) => void;
     disabled?: boolean;
+    /**
+     * `dot` is the label-beside-a-disc row. `card` makes the whole surface the
+     * target and highlights the selected option — for a plan picker or a
+     * settings choice where each option carries a description.
+     */
+    variant?: RadioVariant;
+    /**
+     * `horizontal` lays the options out along a row that wraps — for two or
+     * three short choices, where a stacked list wastes the width and reads as
+     * longer than it is.
+     */
+    orientation?: RadioOrientation;
     children: ReactNode;
 }
 export interface RadioGroupItemProps {
     className?: string;
     value: string;
     label?: string;
+    /** Secondary line under the label. Most at home in the `card` variant. */
+    description?: string;
     disabled?: boolean;
+    /** Hide the disc entirely — for a card whose selected fill is enough. */
+    hideIndicator?: boolean;
     children?: ReactNode;
 }
 export declare const RadioGroup: import("react").ForwardRefExoticComponent<RadioGroupProps & import("react").RefAttributes<View>> & {
     Item: import("react").ForwardRefExoticComponent<RadioGroupItemProps & import("react").RefAttributes<View>>;
 };
+export type { RadioVariant };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/radio-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/radio-group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAkB/D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAyBD,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAoDD,eAAO,MAAM,UAAU;;CAErB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/radio-group/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAa,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAW/D,KAAK,YAAY,GAAG,KAAK,GAAG,MAAM,CAAC;AACnC,KAAK,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAC;AA2DlD,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AA6CD,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+ED,eAAO,MAAM,UAAU;;CAErB,CAAC;AAEH,YAAY,EAAE,YAAY,EAAE,CAAC"}

package/lib/typescript/src/components/section-rail/index.d.ts

@@ -0,0 +1,115 @@
+/**
+ * SectionRail — a floating navigator for a long screen.
+ *
+ * A stack of short bars pinned to one edge, one per section, that expands into
+ * a labelled panel when you touch it. Collapsed it is a position indicator you
+ * can read at a glance without giving up any content width; expanded it is a
+ * list you can jump from.
+ *
+ * The bars are deliberately unlabelled. A permanent list of section titles
+ * down the side of a phone screen is either too small to read or too wide to
+ * keep — the bars carry only the two things that survive at that size, which
+ * section you are in and roughly how deep it sits.
+ *
+ * ```tsx
+ * <SectionRail value={active} onValueChange={scrollTo}>
+ *   <SectionRail.Trigger>
+ *     <SectionRail.Bar value="intro" />
+ *     <SectionRail.Bar value="setup" level={1} />
+ *   </SectionRail.Trigger>
+ *   <SectionRail.Content>
+ *     <SectionRail.Item value="intro">Introduction</SectionRail.Item>
+ *     <SectionRail.Item value="setup" level={1}>Setup</SectionRail.Item>
+ *   </SectionRail.Content>
+ * </SectionRail>
+ * ```
+ *
+ * It floats: the root is absolutely positioned and lets touches through
+ * everywhere it is not drawing, so the content underneath still scrolls.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+export type SectionRailPlacement = 'left' | 'right';
+export type SectionRailAlign = 'center' | 'top' | 'bottom';
+export interface SectionRailProps extends ViewProps {
+    className?: string;
+    /** Which edge the rail sits against. */
+    placement?: SectionRailPlacement;
+    /**
+     * Where along that edge it sits. `bottom` puts it in a corner, out of the
+     * way of the text — the panel then opens upward from the rail rather than
+     * centred on the screen.
+     */
+    align?: SectionRailAlign;
+    /**
+     * Tick under the finger on every change of section, however it was made —
+     * tapped in the panel, or scrolled past. Needs the optional `expo-haptics`
+     * package; without it this does nothing.
+     */
+    haptics?: boolean;
+    /** Active section id. Controlled — usually driven by a scroll handler. */
+    value?: string;
+    /** Starting section when uncontrolled. */
+    defaultValue?: string;
+    /** Fires when a section is chosen from the expanded panel. */
+    onValueChange?: (value: string) => void;
+    /** Controlled expansion. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How long the panel stays up after a choice, so a mis-tap can be corrected
+     * without opening it again. Set 0 to close immediately.
+     */
+    closeDelay?: number;
+    /** Gap between the rail and the edge of the safe area. */
+    offset?: number;
+    children: ReactNode;
+}
+declare function SectionRailRoot({ className, placement, align, haptics, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, closeDelay, offset, children, ...props }: SectionRailProps): import("react").JSX.Element;
+export interface SectionRailTriggerProps extends ViewProps {
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * The collapsed rail. Wraps the bars and opens the panel on press — one target
+ * over the whole stack rather than one per bar, because a 3px bar is not
+ * something anyone can hit.
+ */
+declare function SectionRailTrigger({ className, children, ...props }: SectionRailTriggerProps): import("react").JSX.Element;
+export interface SectionRailBarProps {
+    className?: string;
+    /** Section this bar stands for. Matches the root's `value`. */
+    value: string;
+    /** Nesting depth. Deeper levels draw a shorter bar. */
+    level?: number;
+}
+/** One section, drawn as a bar. Widens and brightens when it is the active one. */
+declare function SectionRailBar({ className, value, level }: SectionRailBarProps): import("react").JSX.Element;
+export interface SectionRailContentProps extends ViewProps {
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * The expanded panel. Mounted through a portal so it floats over everything,
+ * and unmounted after it fades out rather than left behind hidden.
+ */
+declare function SectionRailContent({ className, children, ...props }: SectionRailContentProps): import("react").JSX.Element | null;
+export interface SectionRailItemProps {
+    className?: string;
+    /** Section this row jumps to. Matches the root's `value`. */
+    value: string;
+    /** Nesting depth. Indents the row to match its bar. */
+    level?: number;
+    children: ReactNode;
+}
+/** A labelled row in the expanded panel. */
+declare function SectionRailItem({ className, value, level, children }: SectionRailItemProps): import("react").JSX.Element;
+export declare const SectionRail: typeof SectionRailRoot & {
+    Trigger: typeof SectionRailTrigger;
+    Bar: typeof SectionRailBar;
+    Content: typeof SectionRailContent;
+    Item: typeof SectionRailItem;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/section-rail/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/section-rail/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AA0B3E,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AA6B3D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,4BAA4B;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,SAAmB,EACnB,KAAgB,EAChB,OAAe,EACf,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,IAAI,EAAE,QAAQ,EACd,WAAmB,EACnB,YAAY,EACZ,UAAgB,EAChB,MAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAsGlB;AAED,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAqBrF;AAED,MAAM,WAAW,mBAAmB;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,mFAAmF;AACnF,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAS,EAAE,EAAE,mBAAmB,+BAiC3E;AAED,MAAM,WAAW,uBAAwB,SAAQ,SAAS;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,sCAuCrF;AAwCD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,4CAA4C;AAC5C,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAS,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BA0BvF;AAED,eAAO,MAAM,WAAW;;;;;CAKtB,CAAC"}

package/lib/typescript/src/components/select/index.d.ts

@@ -1,26 +1,65 @@
+/**
+ * Select — a picker with one trigger and three ways of showing its options.
+ *
+ * Which one is right depends on what surrounds the trigger, not on what the
+ * options are, which is why it is a prop rather than three components:
+ *
+ * - `sheet` (default) takes the bottom of the screen. Best for a long list, or
+ *   on a small screen where an anchored panel would cover the thing you are
+ *   choosing for.
+ * - `inline` expands the list in normal layout flow. Everything below moves
+ *   down. Right inside a settings list, where that reads as the row growing;
+ *   wrong anywhere the shift is jarring.
+ * - `overlay` floats the list above the page through a portal, anchored to the
+ *   trigger and flipped above it when there is no room below. Nothing else on
+ *   the screen moves.
+ *
+ * ```tsx
+ * <Select value={region} onValueChange={setRegion} presentation="overlay">
+ *   <Select.Item value="us" label="United States" />
+ *   <Select.Item value="eu" label="Europe" />
+ * </Select>
+ * ```
+ */
 import { type ReactNode } from 'react';
+export type SelectPresentation = 'sheet' | 'inline' | 'overlay';
 export interface SelectItemProps {
     value: string;
     label: string;
 }
-/** Declarative option. Rendered inside the picker sheet. */
+/** Declarative option. Rendered inside whichever surface is presenting. */
 declare function SelectItem({ value, label }: SelectItemProps): import("react").JSX.Element;
 export interface SelectProps {
     className?: string;
     value?: string;
     onValueChange: (value: string) => void;
     placeholder?: string;
-    /** Sheet title shown above the options. */
-    title?: string;
     disabled?: boolean;
     /**
-     * Render the platform's own picker instead of the trigger-and-sheet pair.
+     * Where the options appear. `sheet` takes the bottom of the screen, `inline`
+     * expands the list in layout flow, `overlay` floats it above the page
+     * anchored to the trigger.
+     */
+    presentation?: SelectPresentation;
+    /** Sheet title shown above the options. `sheet` presentation only. */
+    title?: string;
+    /**
+     * Width of the floating list. `trigger` matches the trigger, `content` sizes
+     * to the longest option, or pass a pixel value. `overlay` only.
+     */
+    contentWidth?: 'trigger' | 'content' | number;
+    /** Gap between the trigger and the floating list. `overlay` only. */
+    offset?: number;
+    /** Called when the options open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Render the platform's own picker instead of the trigger-and-list pair.
      * Requires the optional `@expo/ui` package; without it this prop does
      * nothing.
      *
      * **Theme tokens do not apply** — the platform draws the picker, so
-     * `className` and `title` are ignored. `Select.Item` children still declare
-     * the options.
+     * `className`, `title` and `presentation` are ignored. `Select.Item`
+     * children still declare the options.
      */
     native?: boolean;
     /**
@@ -30,7 +69,7 @@ export interface SelectProps {
     nativeAppearance?: 'menu' | 'wheel';
     children: ReactNode;
 }
-declare function SelectRoot({ className, value, onValueChange, placeholder, title, disabled, native, nativeAppearance, children, }: SelectProps): import("react").JSX.Element;
+declare function SelectRoot({ className, value, onValueChange, placeholder, disabled, presentation, title, contentWidth, offset, onOpenChange, native, nativeAppearance, children, }: SelectProps): import("react").JSX.Element;
 export declare const Select: typeof SelectRoot & {
     Item: typeof SelectItem;
 };

package/lib/typescript/src/components/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAoCf,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,4DAA4D;AAC5D,iBAAS,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,+BA4BpD;AAED,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,aAAa,EACb,WAAgC,EAChC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,gBAAyB,EACzB,QAAQ,GACT,EAAE,WAAW,+BA+Fb;AAED,eAAO,MAAM,MAAM;;CAEjB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAsDf,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAiBhE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,2EAA2E;AAC3E,iBAAS,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,+BA4BpD;AAUD,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC9C,qEAAqE;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,KAAK,EACL,aAAa,EACb,WAAgC,EAChC,QAAQ,EACR,YAAsB,EACtB,KAAK,EACL,YAAwB,EACxB,MAAU,EACV,YAAY,EACZ,MAAM,EACN,gBAAyB,EACzB,QAAQ,GACT,EAAE,WAAW,+BA8Nb;AAED,eAAO,MAAM,MAAM;;CAEjB,CAAC"}

package/lib/typescript/src/components/separator/index.d.ts

@@ -0,0 +1,47 @@
+import { View, type ViewProps } from 'react-native';
+import { type VariantProps } from 'tailwind-variants';
+declare const separatorVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        thin: string;
+        thick: string;
+    };
+}, undefined, "bg-border", {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        thin: string;
+        thick: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    variant: {
+        thin: string;
+        thick: string;
+    };
+}, undefined, "bg-border", unknown, unknown, undefined>>;
+export interface SeparatorProps extends ViewProps, VariantProps<typeof separatorVariants> {
+    className?: string;
+    /**
+     * Thickness in pixels, overriding the variant. Sets the height of a
+     * horizontal separator and the width of a vertical one.
+     */
+    thickness?: number;
+    /**
+     * Whether the separator is only visual. A decorative separator is skipped by
+     * screen readers; set false when the split itself carries meaning — between
+     * two groups of menu items, say — and it is announced instead.
+     */
+    decorative?: boolean;
+}
+export declare const Separator: import("react").ForwardRefExoticComponent<SeparatorProps & import("react").RefAttributes<View>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/separator/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/separator/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAwBrB,CAAC;AAEH,MAAM,WAAW,cACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,iGA6BrB,CAAC"}