@3gs/ui 0.1.0

package/dist/components/PageControl/index.d.ts

@@ -0,0 +1,2 @@
+export { PageControl } from './PageControl';
+export type { PageControlProps, PageControlSize } from './PageControl';

package/dist/components/Picker/Picker.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface PickerOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface PickerColumn {
+    /** Identifies the column; the key under which its value is reported. */
+    key: string;
+    options: PickerOption[];
+    /** `aria-label` for the drum. Defaults to `key`. */
+    label?: string;
+    /** CSS width of the column. Without it, columns share the width equally. */
+    width?: number | string;
+    /** Text alignment inside the drum. Default `center`. */
+    align?: "left" | "center" | "right";
+}
+/** `{ [column.key]: option.value }` */
+export type PickerValue = Record<string, string>;
+export interface PickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    columns: PickerColumn[];
+    /** Controlled selection. */
+    value?: PickerValue;
+    /** Uncontrolled initial selection; missing keys default to the first (enabled) option. */
+    defaultValue?: PickerValue;
+    onChange?: (value: PickerValue, changed: {
+        key: string;
+        value: string;
+    }) => void;
+    /** Visible rows per drum (44 px each). Default `5`. */
+    rows?: 3 | 5 | 7;
+    /** `aria-label` for the whole picker. */
+    label?: string;
+    disabled?: boolean;
+}
+/**
+ * The iOS 3 spinning wheel (`UIPickerView`): one drum per column inside black
+ * chrome, each showing `rows` 44 px rows shaded into darkness toward the top
+ * and bottom edges to fake a cylinder, with a translucent blue-glass bar over
+ * the middle row. Flick a drum and it snaps to a row; click a row to select it.
+ *
+ * Keyboard (on a focused drum): Up/Down one row, PageUp/PageDown a screenful,
+ * Home/End first/last — disabled rows are skipped.
+ */
+export declare const Picker: import('react').ForwardRefExoticComponent<PickerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Picker/index.d.ts

@@ -0,0 +1,2 @@
+export { Picker } from './Picker';
+export type { PickerProps, PickerColumn, PickerOption, PickerValue } from './Picker';

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type PopoverPlacement = "top" | "bottom" | "left" | "right";
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+    open: boolean;
+    /**
+     * The element the arrow points at — pass `ref.current`. Re-measured on
+     * open, on window resize and on any scroll.
+     */
+    anchor: HTMLElement | null;
+    /** Called on Escape and on an outside click / tap (when `dismissOnOutside`). */
+    onClose?: () => void;
+    /** Preferred side. Default `"bottom"`; flips to the opposite side when there is no room. */
+    placement?: PopoverPlacement;
+    /**
+     * Panel width (the box inside the 8 px rim). Default `240` — iPad popovers
+     * were 320, a phone screen wants narrower.
+     */
+    width?: number | string;
+    /**
+     * Default `false` → portal to `document.body`, `position: fixed`, viewport
+     * coordinates. `true` → render in place with `position: absolute`,
+     * coordinates relative to the nearest positioned ancestor's padding box
+     * (e.g. a phone screen in a showcase) and clamped within it.
+     */
+    contained?: boolean;
+    /** Default `true` — a click outside the panel closes it. */
+    dismissOnOutside?: boolean;
+    /** `aria-label` for the `role="dialog"` panel when there is no heading inside. Default `strings.dialog`. */
+    label?: string;
+    children: ReactNode;
+}
+/**
+ * The iOS 3.2 popover (`UIPopoverController`): a dark navy-black bubble with
+ * a thick translucent rim and a triangular arrow pointing at its anchor, used
+ * for menus and dropdowns. Positioned on the preferred side of the anchor
+ * (flipping when there is no room), centred on it and clamped inside the
+ * container; the arrow keeps pointing at the anchor after clamping. Renders
+ * nothing while `open` is false. The ref points at the panel.
+ */
+export declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverPlacement } from './Popover';

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,37 @@
+import { HTMLAttributes } from 'react';
+export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** `0..max`. Omit for an indeterminate bar (a gel segment sliding back and forth). */
+    value?: number;
+    /** Default 100. */
+    max?: number;
+    /** Track height: `sm` 9 px (default) or `md` 12 px. */
+    size?: "sm" | "md";
+    /** Show the percentage ("42 %") to the right of the track. */
+    showValue?: boolean;
+    /** Accessible name (`aria-label`). */
+    label?: string;
+    /** Fill gel: `blue` (App Store, default) or the silver iPod scrubber. */
+    tint?: "blue" | "gray";
+}
+/**
+ * A thin sunken pill track (inset shadow, black outline) holding a blue gel
+ * fill with its own hard 50 % highlight — the App Store download bar.
+ * Without `value` it is indeterminate: a 35 % segment slides left and right.
+ */
+export declare const ProgressBar: import('react').ForwardRefExoticComponent<ProgressBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface ActivityIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Diameter in px. 20 (default) is the "white" / "gray" style, 37 the "whiteLarge" style. */
+    size?: number;
+    /** Spoke colour: `white` (default, for dark surfaces) or `gray`. */
+    tone?: "white" | "gray";
+    /** Accessible name, announced via `role="status"`. Default `strings.loading` ("Loading"). */
+    label?: string;
+    /** `false` renders nothing — `hidesWhenStopped`. Default `true`. */
+    animating?: boolean;
+}
+/**
+ * The 12-spoke spinner. The fading spokes are static; the whole wheel turns
+ * 360° in 12 discrete 30° steps per second, exactly like the frame-stepped
+ * original — a smooth rotation would give it away.
+ */
+export declare const ActivityIndicator: import('react').ForwardRefExoticComponent<ActivityIndicatorProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressBar, ActivityIndicator } from './Progress';
+export type { ProgressBarProps, ActivityIndicatorProps } from './Progress';

package/dist/components/SearchBar/SearchBar.d.ts

@@ -0,0 +1,61 @@
+import { HTMLAttributes, InputHTMLAttributes } from 'react';
+import { NavigationBarTint } from '../NavigationBar';
+/** One scope button under the field. */
+export interface SearchScope {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SearchBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Controlled query. */
+    value?: string;
+    /** Uncontrolled initial query. */
+    defaultValue?: string;
+    /** Fires on every keystroke, on ⓧ and on Cancel (with `""`). */
+    onChange?: (query: string) => void;
+    /** Enter key — the keyboard's "Search". */
+    onSearch?: (query: string) => void;
+    /**
+     * Cancel tapped. The bar clears the query (reports `onChange("")` when
+     * controlled — keep your `value` to override) and gives up focus first.
+     */
+    onCancel?: () => void;
+    /** Defaults to the SearchField's placeholder (`strings.search`, "Search"). */
+    placeholder?: string;
+    /** When given, a `SegmentedControl size="sm" block` row of scope buttons appears under the field. */
+    scopes?: SearchScope[];
+    /** Controlled scope. */
+    scope?: string;
+    /** Uncontrolled initial scope; falls back to the first one. */
+    defaultScope?: string;
+    onScopeChange?: (scope: string) => void;
+    /** `always` (default) or fold the scope row open only while editing. */
+    showsScopeBar?: "always" | "whileEditing";
+    /**
+     * `whileEditing` (default): Cancel slides in while the field is focused
+     * or has text. `always` keeps it; `never` drops it.
+     */
+    showsCancel?: "whileEditing" | "always" | "never";
+    /** Default `strings.cancel` ("Cancel"). */
+    cancelLabel?: string;
+    /** `black` glass (default) or the classic blue-gray bar — like NavigationBar. */
+    tint?: NavigationBarTint;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    /** `aria-label` of the search landmark (and the input). Default `strings.search` ("Search"). */
+    label?: string;
+    /** Escape hatch for the inner `<input>`; `onChange` / `onKeyDown` given here are called too. */
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}
+/**
+ * UISearchBar: the strip of bar glass above a table — the pill search field,
+ * a gel Cancel button that slides in while editing, and optional scope
+ * buttons underneath. Same chrome as the NavigationBar, so it stacks straight
+ * under one.
+ *
+ * "Editing" = focus is somewhere inside the bar (input, Cancel or a scope
+ * button) or the field has text. Focus is tracked on the bar rather than the
+ * input alone, so tabbing from the input to Cancel — or into the scope row —
+ * doesn't fold those controls away from under the focus.
+ */
+export declare const SearchBar: import('react').ForwardRefExoticComponent<SearchBarProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/SearchBar/index.d.ts

@@ -0,0 +1,2 @@
+export { SearchBar } from './SearchBar';
+export type { SearchBarProps, SearchScope } from './SearchBar';

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,50 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export type SegmentedControlSize = 
+/** 30 px tall, 13 px text — fits inside a NavigationBar */
+"sm"
+/** 44 px tall, 15 px text — the standard touch target (default) */
+ | "md";
+export type SegmentedControlTint = 
+/** dark gel (default) */
+"dark"
+/** the blue-gray gel used inside a `tint="blue"` NavigationBar */
+ | "blue";
+export interface SegmentedControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Controlled selected segment. */
+    value?: string;
+    /** Uncontrolled initial segment. Defaults to the first one — a segmented control always has a selection. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    size?: SegmentedControlSize;
+    tint?: SegmentedControlTint;
+    /** `aria-label` for the group. Default `strings.segments` ("Segments"). */
+    label?: string;
+    /** Stretch to the container width. Default: intrinsic — every segment as wide as the widest. */
+    block?: boolean;
+    /** `<Segment>`s. */
+    children: ReactNode;
+}
+/**
+ * The iOS 3 segmented control (`UISegmentedControlStyleBar`): one rounded gel
+ * bar cut into equal segments by 1 px black dividers. The selected segment is
+ * pressed in — sunken, blue-black gel — while the others stay raised glass.
+ *
+ * Keyboard: Left/Right (and Home/End) move focus *and* select, skipping
+ * disabled segments — roving tabindex, so the control is a single Tab stop.
+ */
+export declare const SegmentedControl: import('react').ForwardRefExoticComponent<SegmentedControlProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface SegmentProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    /** Identifies the segment; what `SegmentedControl` reports through `onChange`. */
+    value: string;
+    /** Any `lucide-react` icon, rendered flat in white before the text — or alone. */
+    icon?: LucideIcon;
+    /**
+     * Accessible name. Required for an icon-only segment (it becomes the
+     * `aria-label`); without an icon or `children` it is the visible text.
+     */
+    label?: string;
+    /** The visible text. */
+    children?: ReactNode;
+}
+export declare const Segment: import('react').ForwardRefExoticComponent<SegmentProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl, Segment } from './SegmentedControl';
+export type { SegmentedControlProps, SegmentProps } from './SegmentedControl';

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,39 @@
+import { InputHTMLAttributes } from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size" | "type" | "min" | "max" | "step"> {
+    /** Controlled value. Leave undefined to let the slider manage its own state. */
+    value?: number;
+    /** Initial value when uncontrolled. Default: `min`. */
+    defaultValue?: number;
+    /** Fires continuously while dragging (and on every key press). */
+    onChange?: (value: number) => void;
+    /** Fires when the value is committed — pointer release / key release (the native `change` event). */
+    onChangeEnd?: (value: number) => void;
+    /** Default `0`. */
+    min?: number;
+    /** Default `100`. */
+    max?: number;
+    /** Default `1`. */
+    step?: number;
+    disabled?: boolean;
+    /** Accessible name (`aria-label`). Required unless `aria-labelledby` is passed. */
+    label?: string;
+    /** Small flat gray icon left of the track (e.g. `Volume`, `Sun`). */
+    minIcon?: LucideIcon;
+    /** Larger flat gray icon right of the track (e.g. `Volume2`, `Sun`). */
+    maxIcon?: LucideIcon;
+    /** Renders the numeric value right of the track. */
+    showValue?: boolean;
+    /** `className` goes to the `<input>`; this one to the outer wrapper. */
+    wrapperClassName?: string;
+}
+/**
+ * The iOS 3 volume / brightness slider: a thin sunken track, blue gel fill to
+ * the left of the knob, dark inset to the right, and a round silver gel knob
+ * (the Switch's) with a black outline. Optional flat icons at each end.
+ *
+ * Built on a native `<input type="range">` so keyboard, touch, forms and
+ * assistive tech come for free; the ref points at that input. The blue fill
+ * is driven by the `--gs-slider-pct` custom property on the wrapper.
+ */
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';

package/dist/components/StatusBar/StatusBar.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+export type StatusBarNetwork = "3G" | "E" | "wifi" | "none";
+export interface StatusBarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Clock text, e.g. "3:53 PM". */
+    time?: string;
+    /** Signal strength 0–5 bars. */
+    signal?: 0 | 1 | 2 | 3 | 4 | 5;
+    /** Data indicator right of the signal bars. */
+    network?: StatusBarNetwork;
+    /** Carrier name instead of the signal bars' implicit "iPhone" — rendered after the network glyph. */
+    carrier?: string;
+    /** Battery level 0–100. */
+    battery?: number;
+    charging?: boolean;
+    bluetooth?: boolean;
+    /** Black glass (default) or the translucent gray used over photos. */
+    tint?: "black" | "gray";
+}
+/**
+ * The 20 px iOS 3 status bar: signal bars, network glyph, bold clock, Bluetooth
+ * and battery. Purely presentational (`aria-hidden` by default — pass
+ * `aria-hidden={false}` and a `role` if the values matter to assistive tech).
+ */
+export declare const StatusBar: import('react').ForwardRefExoticComponent<StatusBarProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/StatusBar/index.d.ts

@@ -0,0 +1,2 @@
+export { StatusBar } from './StatusBar';
+export type { StatusBarProps, StatusBarNetwork } from './StatusBar';

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,55 @@
+import { HTMLAttributes } from 'react';
+export type StepperSize = 
+/** 30 px tall — fits a 44 px list row (default) */
+"sm"
+/** 44 px tall — the standard touch target */
+ | "md";
+export type StepperTint = 
+/** the bar-button gel of the current theme (default) */
+"dark"
+/** the blue-gray gel of a `tint="blue"` NavigationBar, in either theme */
+ | "blue";
+export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Controlled value. */
+    value?: number;
+    /** Uncontrolled initial value. Defaults to `min`. */
+    defaultValue?: number;
+    /** Fires with the new value on every step (click, hold, key). */
+    onChange?: (value: number) => void;
+    /** Default `0`. */
+    min?: number;
+    /** Default `100`. */
+    max?: number;
+    /** Default `1`. Values are rounded to the step's decimal precision. */
+    step?: number;
+    /** At the bounds the button disables (default); `true` wraps around instead. */
+    wraps?: boolean;
+    /** Hold a button to repeat: 500 ms delay, then every 100 ms, every 50 ms after 2 s. Default `true`. */
+    autoRepeat?: boolean;
+    /** Show the value in a sunken well on the inline-start side of the buttons. */
+    showValue?: boolean;
+    /** Formats the shown value, e.g. `(v) => v + " %"`. */
+    formatValue?: (value: number) => string;
+    /** 30 px (fits a 44 px list row) or 44 px. Default `"sm"`. */
+    size?: StepperSize;
+    /** The bar-button gel of the theme, or the blue-gray gel of a blue NavigationBar. Default `"dark"`. */
+    tint?: StepperTint;
+    /** Dims the whole control; both buttons disable. */
+    disabled?: boolean;
+    /** `aria-label` for the group, e.g. `"Quantity"`. */
+    label?: string;
+    /** `aria-label` of the − button. Default `"Decrease"`. */
+    decrementLabel?: string;
+    /** `aria-label` of the + button. Default `"Increase"`. */
+    incrementLabel?: string;
+}
+/**
+ * The joined "− | +" gel control (`UIStepper`) for a list row: two glass
+ * segments cut by a 1 px black divider, like a two-segment SegmentedControl,
+ * with an optional sunken value well beside them.
+ *
+ * The buttons are ordinary buttons (Tab / Enter / Space); on either one
+ * ArrowUp/ArrowRight increment, ArrowDown/ArrowLeft decrement and Home/End
+ * jump to the bounds. Holding a button repeats.
+ */
+export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper';
+export type { StepperProps, StepperSize, StepperTint } from './Stepper';

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "value"> {
+    /** Controlled state. Leave undefined to let the switch manage its own state. */
+    checked?: boolean;
+    /** Initial state when uncontrolled. */
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /** Text on the blue half. Default `strings.on` ("ON"). */
+    onLabel?: string;
+    /** Text on the dark half. Default `strings.off` ("OFF"). */
+    offLabel?: string;
+    /** Accessible name (`aria-label`) when there is no visible label. */
+    label?: string;
+    /** When set, a hidden `<input type="checkbox">` carries the value in form submissions. */
+    name?: string;
+}
+/**
+ * The iOS 3 ON/OFF slider: a 94×27 gel pill whose two-tone strip (blue "ON",
+ * dark "OFF") slides under a silver gel knob.
+ *
+ * Rendered as `<button role="switch">`. Space and Enter already dispatch
+ * `click` on a native button, so a single click handler covers pointer and
+ * keyboard activation.
+ */
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './Switch';

package/dist/components/TabBar/TabBar.d.ts

@@ -0,0 +1,33 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface TabBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Controlled selected tab. */
+    value?: string;
+    /** Uncontrolled initial tab. Defaults to the first item — an iOS tab bar always has a selection. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** `aria-label` for the tablist. Default `strings.tabs` ("Tabs"). */
+    label?: string;
+    /** `<TabBarItem>`s. */
+    children: ReactNode;
+}
+/**
+ * The 49 px black-glass bottom bar (`UITabBar`, `UIBarStyleBlack`): evenly
+ * spaced items, each a gray gel icon over a tiny bold label; the selected one
+ * turns blue on a subtly lighter, slightly sunken rounded rectangle.
+ *
+ * Keyboard: Left/Right (and Home/End) move focus *and* select — roving
+ * tabindex, so the bar is a single Tab stop.
+ */
+export declare const TabBar: import('react').ForwardRefExoticComponent<TabBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface TabBarItemProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    /** Identifies the tab; what `TabBar` reports through `onChange`. */
+    value: string;
+    /** Any `lucide-react` icon — gray glass when idle, blue glass when selected. */
+    icon: LucideIcon;
+    /** The 10 px bold caption under the icon. */
+    label: string;
+    /** Red gel badge on the icon's top-right corner (`43`, `"New"`; numbers > 99 render `99+`). */
+    badge?: number | string;
+}
+export declare const TabBarItem: import('react').ForwardRefExoticComponent<TabBarItemProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/TabBar/index.d.ts

@@ -0,0 +1,2 @@
+export { TabBar, TabBarItem } from './TabBar';
+export type { TabBarProps, TabBarItemProps } from './TabBar';

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,38 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** Bold inline label on the left of the well — the iOS grouped-form "Name | value" pattern. */
+    label?: ReactNode;
+    /** Secondary hint under the field. */
+    helper?: ReactNode;
+    /** Error message under the field; also tints the rim red and sets `aria-invalid`. */
+    error?: ReactNode;
+    /** Shows the gray ⓧ button while the field has a value. Clearing fires `onChange` (empty) and `onClear`. */
+    clearable?: boolean;
+    onClear?: () => void;
+    /** Flat gray lucide icon on the left. */
+    leadingIcon?: LucideIcon;
+    /** 44 px (default) or 50 px tall. */
+    size?: "md" | "lg";
+    /** `className` goes to the `<input>`; this one to the outer wrapper. */
+    wrapperClassName?: string;
+}
+/**
+ * Sunken text input. Unlike the raised gel buttons, iOS 3 text fields were
+ * pressed *into* the surface: dark well, inset shadow, hairline black edge.
+ * Controlled (`value`) and uncontrolled (`defaultValue`) both work; the
+ * clear button clears either way and reports through `onChange`.
+ */
+export declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export interface SearchFieldProps extends Omit<TextFieldProps, "label" | "leadingIcon" | "size"> {
+    /** Renders the small dark-gel "Cancel" button to the right of the pill. */
+    showCancel?: boolean;
+    /** Default `strings.cancel` ("Cancel"). */
+    cancelLabel?: string;
+    onCancel?: () => void;
+}
+/**
+ * The iOS 3 search bar: a short pill well with a magnifier, a ⓧ once you type,
+ * and an optional gel "Cancel" button beside it.
+ */
+export declare const SearchField: import('react').ForwardRefExoticComponent<SearchFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { TextField, SearchField } from './TextField';
+export type { TextFieldProps, SearchFieldProps } from './TextField';

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,58 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export type ToolbarTint = 
+/** black glass — `UIBarStyleBlack` (default) */
+"black"
+/** the classic iOS 3 blue-gray bar */
+ | "blue";
+export type ToolbarPosition = 
+/** pinned under the content: 1 px black top edge + light rim (default) */
+"bottom"
+/** pinned above the content: 1 px black bottom edge, like a nav bar */
+ | "top";
+export interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /** `black` glass (default) or the classic blue-gray bar. */
+    tint?: ToolbarTint;
+    /** Which edge of the screen the bar sits on — decides where the 1 px black outline goes. */
+    position?: ToolbarPosition;
+    /** `aria-label` for the toolbar. Default `strings.toolbar` ("Toolbar"). */
+    label?: string;
+    /** `<ToolbarButton>`s, `<ToolbarSpacer>`s, a `<ToolbarTitle>`, or `<BarButton>`s when an action needs a label. */
+    children: ReactNode;
+}
+/**
+ * The 44 px black-glass bottom bar of Safari / Mail (`UIToolbar`,
+ * `UIBarStyleBlack`): a flex row of plain glossy icon buttons, flexible
+ * spacers and an optional centred status text. Gel `<BarButton>`s drop
+ * straight in when an action needs a label ("Edit", "Done").
+ */
+export declare const Toolbar: import('react').ForwardRefExoticComponent<ToolbarProps & import('react').RefAttributes<HTMLDivElement>>;
+/** Takes up all free width; put one on each side of an item to centre it. */
+export declare function ToolbarSpacer(): import("react").JSX.Element;
+export interface ToolbarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Any `lucide-react` icon — gray glass when idle, blue glass when `active`. */
+    icon: LucideIcon;
+    /** Accessible name for the icon-only button; also shown as the native `title` tooltip. */
+    label: string;
+    /** Blue glass — the current page, a bookmarked item… Pass `aria-pressed` yourself for real toggles. */
+    active?: boolean;
+    /** Red gel badge on the icon's top-right corner (`3`, `"New"`; numbers > 99 render `99+`). */
+    badge?: number | string;
+}
+/**
+ * The 44 × 44 tappable icon in a toolbar. There is no button chrome: the
+ * icon itself is the glass. Pressing darkens it and sinks it by 1 px.
+ */
+export declare const ToolbarButton: import('react').ForwardRefExoticComponent<ToolbarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export interface ToolbarTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /** Primary line, e.g. `"5 Unread"`. */
+    children: ReactNode;
+    /** Small second line, e.g. `"Updated 9/21/26 9:41 AM"`. */
+    subtitle?: ReactNode;
+}
+/**
+ * Bold 12 px gray text centred between the toolbar's items (flank it with
+ * `<ToolbarSpacer>`s). With a `subtitle` it becomes the Mail two-liner: the
+ * main line turns white, the subtitle stays small and gray. Never interactive.
+ */
+export declare const ToolbarTitle: import('react').ForwardRefExoticComponent<ToolbarTitleProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { Toolbar, ToolbarButton, ToolbarSpacer, ToolbarTitle } from './Toolbar';
+export type { ToolbarProps, ToolbarButtonProps, ToolbarTitleProps } from './Toolbar';