@3gs/ui 0.1.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,43 @@
+# @3gs/ui
+
+React components in the **iPhone 3GS / iOS 3** style — glossy gel
+skeuomorphism, dark by default, with the classic blue-gray light theme one
+attribute away. Icons via [lucide](https://lucide.dev), tinted through an SVG
+gradient so they get the same glass.
+
+```bash
+pnpm add @3gs/ui lucide-react
+```
+
+```tsx
+import "@3gs/ui/styles.css";
+import { NavigationBar, BarButton, List, ListItem, TabBar, TabBarItem, Icon } from "@3gs/ui";
+import { Gamepad2, Star, LayoutGrid } from "lucide-react";
+
+export function Screen() {
+  return (
+    <div className="gs-root">
+      <NavigationBar title="Categories" left={<BarButton variant="back">Featured</BarButton>} />
+      <List>
+        <ListItem iconTile iconTint="red" icon={<Icon icon={Gamepad2} variant="flat" size={18} />} title="Games" accessory="chevron" onClick={…} />
+      </List>
+      <TabBar defaultValue="featured">
+        <TabBarItem value="featured" icon={Star} label="Featured" />
+        <TabBarItem value="categories" icon={LayoutGrid} label="Categories" badge={43} />
+      </TabBar>
+    </div>
+  );
+}
+```
+
+- **Themes:** wrap in `.gs-root` (dark) or `.gs-root[data-theme="light"]`.
+- **Tokens:** every colour, gel gradient, rim, radius and size is a `--gs-*`
+  custom property; override on `.gs-root` to retint.
+- **Components:** Button, Switch, TextField / SearchField, NavigationBar /
+  BarButton, TabBar, List, Alert, SegmentedControl, Slider, ActionSheet,
+  Picker, DatePicker, ProgressBar / ActivityIndicator, StatusBar, Toolbar,
+  PageControl, Popover, HUD, Keyboard, ModalSheet, Stepper, SearchBar,
+  NotificationBanner, plus the `Icon` and `Badge` foundation.
+- **Peer deps:** React 18 or 19.
+
+Showcase, tokens gallery and source: https://github.com/TimonBozzApps/design-system-3gs

package/dist/components/ActionSheet/ActionSheet.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ActionSheetAction {
+    label: string;
+    onClick?: () => void;
+    /** light silver glass with dark text (default) or red gel. */
+    variant?: "default" | "destructive";
+    /**
+     * `true` keeps the sheet open after the click (the caller decides when to
+     * close). Default: the action fires `onClick`, then `onClose`.
+     */
+    keepOpen?: boolean;
+    disabled?: boolean;
+}
+export interface ActionSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    open: boolean;
+    /** Small gray centered text at the top of the sheet. */
+    title?: ReactNode;
+    /** Stacked in order, top to bottom. */
+    actions: ActionSheetAction[];
+    /** Label of the dark Cancel button at the bottom. Default `strings.cancel` ("Cancel"); `null` hides it. */
+    cancelLabel?: string | null;
+    /** Called after any action, on Cancel, on Escape, and on backdrop click when `dismissOnBackdrop`. */
+    onClose?: () => void;
+    /** Default `true` — tapping the dimmed area behind the sheet dismisses it. */
+    dismissOnBackdrop?: boolean;
+    /**
+     * Default `false` → portal to `document.body` with a `position: fixed` backdrop.
+     * `true` → render in place with `position: absolute; inset: 0`, filling the
+     * nearest positioned ancestor (e.g. a phone screen in a showcase).
+     */
+    contained?: boolean;
+}
+/**
+ * The iOS 3 action sheet (`UIActionSheet`): a translucent black-glass sheet
+ * that slides up from the bottom, a small gray title and a stack of full-width
+ * 46 px gel buttons — light silver glass for normal actions, red gel for the
+ * destructive one and a dark "Cancel" at the bottom. Renders nothing while
+ * `open` is false. The ref points at the sheet panel.
+ */
+export declare const ActionSheet: import('react').ForwardRefExoticComponent<ActionSheetProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { ActionSheet } from './ActionSheet';
+export type { ActionSheetProps, ActionSheetAction } from './ActionSheet';

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface AlertAction {
+    label: string;
+    onClick?: () => void;
+    /** dark navy gel (default), light glass (primary — the highlighted "OK") or red gel. */
+    variant?: "default" | "primary" | "destructive";
+    /**
+     * `true` keeps the alert open after the click (the caller decides when to
+     * close). Default: the action fires `onClick`, then `onClose`.
+     */
+    keepOpen?: boolean;
+}
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    open: boolean;
+    title: ReactNode;
+    message?: ReactNode;
+    /** 1..n actions. Exactly two render side by side, any other count stacks. */
+    actions: AlertAction[];
+    /** Called after an action, on Escape, and on backdrop click when `dismissOnBackdrop`. */
+    onClose?: () => void;
+    /** Default `false` — iOS 3 alerts were strictly modal. */
+    dismissOnBackdrop?: boolean;
+    /**
+     * Default `false` → portal to `document.body` with a `position: fixed` backdrop.
+     * `true` → render in place with `position: absolute; inset: 0`, filling the
+     * nearest positioned ancestor (e.g. a phone screen in a showcase).
+     */
+    contained?: boolean;
+}
+/**
+ * The iOS 3 modal alert (`UIAlertView`): a deep-blue glass dialog with a thick
+ * translucent white border, an elliptical top gloss, bold centered white title
+ * and 43 px gel buttons. Pops in with a slight overshoot. Renders nothing while
+ * `open` is false. The ref points at the dialog panel.
+ */
+export declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Alert } from './Alert';
+export type { AlertProps, AlertAction } from './Alert';

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Number or short text. Numbers above `max` render as `max+`. */
+    value?: number | string;
+    max?: number;
+    /** Red gel (default) or the quieter gray used inside list cells. */
+    tone?: "red" | "gray";
+}
+/**
+ * The classic red gel badge (unread counts on tab-bar icons, app icons).
+ * Renders nothing when `value` is `0`, `""` or undefined.
+ */
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

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

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

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,32 @@
+import { ButtonHTMLAttributes } from 'react';
+import { LucideIcon } from 'lucide-react';
+export type ButtonVariant = 
+/** dark gel — the everyday button */
+"default"
+/** blue gel — the "Done" / confirm button */
+ | "primary"
+/** red gel — "Delete Contact", "Sign Out" style */
+ | "destructive";
+export type ButtonSize = 
+/** 30 px tall, 13 px text — nav-bar / toolbar size */
+"sm"
+/** 44 px tall, 17 px text — the standard touch target (default) */
+ | "md"
+/** 50 px tall, 18 px text — prominent CTA */
+ | "lg";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Full width — the grouped-table "Delete Contact" / "Sign Out" style. */
+    block?: boolean;
+    /** Any `lucide-react` icon, rendered flat in white next to the label. */
+    icon?: LucideIcon;
+    /** Which side of the label the icon sits on. Default: `leading`. */
+    iconPosition?: "leading" | "trailing";
+}
+/**
+ * The iOS 3 gel push button: a vertical gradient with a hard highlight split
+ * at 50 %, a 1 px black outline with a light inner rim, and bold white text
+ * with a dark text-shadow. Pressing removes the gloss and sinks the gel.
+ */
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,57 @@
+import { HTMLAttributes } from 'react';
+import { PickerValue } from '../Picker';
+export type DatePickerMode = "date" | "time" | "dateTime";
+export interface DatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** Which `UIDatePicker` preset. Default `date`. */
+    mode?: DatePickerMode;
+    /** Controlled value. */
+    value?: Date;
+    /** Uncontrolled initial value. Default: now, minutes rounded to `minuteInterval`. */
+    defaultValue?: Date;
+    onChange?: (date: Date) => void;
+    /** Step of the minute drum. Default `1`. */
+    minuteInterval?: 1 | 5 | 10 | 15 | 30;
+    /** `h12` (1–12 plus an AM/PM drum, default) or `h23` (0–23). */
+    hourCycle?: "h12" | "h23";
+    /** Years offered by the `date` preset, inclusive. Default `[1970, 2037]`. */
+    yearRange?: [number, number];
+    /** `dateTime` preset: days before and after the initial value in the rolling day drum. Default `365`. */
+    dayRange?: number;
+    /** Intl locale for month, weekday and AM/PM names. Default: the `<GsProvider>` locale, else `en-US`. */
+    locale?: string;
+    /** Visible rows per drum. Default `5`. */
+    rows?: 3 | 5 | 7;
+    disabled?: boolean;
+    /** `aria-label` for the picker. Default: `strings.date` / `time` / `dateTime` per `mode`. */
+    label?: string;
+}
+/** Days in `month` (1–12) of `year`. */
+export declare function daysInMonth(month: number, year: number): number;
+/** Local calendar date as `yyyy-mm-dd` — the stable option value of the rolling day drum. */
+export declare function toISODate(date: Date): string;
+/**
+ * Copy of `date` with seconds zeroed and minutes rounded to the nearest
+ * multiple of `interval` (`:58` at interval 5 carries into the next hour).
+ */
+export declare function roundToInterval(date: Date, interval: number): Date;
+/**
+ * The drum selection that shows `date`:
+ * `date` → `{ month, day, year }` · `time` → `{ hour, minute, period? }` ·
+ * `dateTime` → `{ day: "yyyy-mm-dd", hour, minute, period? }`
+ * (`period` only with `hourCycle="h12"`; numbers are unpadded decimal strings).
+ */
+export declare function dateToValue(date: Date, mode: DatePickerMode, hourCycle: "h12" | "h23"): PickerValue;
+/**
+ * A new `Date` built from a drum selection. Fields the preset has no drum for
+ * are copied from `base`; seconds are zeroed; a day past the end of the month
+ * (Feb 30) is clamped to the month's last day.
+ */
+export declare function valueToDate(value: PickerValue, base: Date, mode: DatePickerMode, hourCycle: "h12" | "h23"): Date;
+/**
+ * `UIDatePicker`: the three date-and-time presets built on `Picker`'s drums —
+ * `date` (Month · Day · Year), `time` (Hour · Minute · AM/PM) and `dateTime`
+ * (a rolling "Today" / "Mon Jun 29" day drum · Hour · Minute · AM/PM). Works
+ * in local time; the day drum shrinks with the selected month and a day that
+ * no longer fits (Feb 30) is clamped and reported.
+ */
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerMode } from './DatePicker';

package/dist/components/HUD/HUD.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type HUDKind = 
+/** 37 px white spinner — "Loading…" (default) */
+"loading"
+/** a gel progress bar driven by `progress` */
+ | "progress"
+/** big white check — "Saved" */
+ | "success"
+/** big white X — "Failed" */
+ | "error"
+/** label only: a compact pill-ish toast — "Copied" */
+ | "text"
+/** your own graphic in the `icon` slot — the volume bell */
+ | "custom";
+export interface HUDProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    open: boolean;
+    /** What the square shows. Default `loading`. */
+    kind?: HUDKind;
+    /** Bold 16 px white label under the graphic ("Loading…", "Saved"). */
+    title?: ReactNode;
+    /** Optional 13 px secondary line. */
+    message?: ReactNode;
+    /** `0..100` for `kind="progress"`. Omit for an indeterminate bar. */
+    progress?: number;
+    /** The graphic for `kind="custom"`, e.g. `<Icon icon={Volume2} variant="flat" size={48} />`. */
+    icon?: ReactNode;
+    /**
+     * Auto-dismiss: calls `onClose` after this many ms. The timer restarts when
+     * `open`, `title` or `kind` change, so a toast that swaps its text stays up
+     * for the full duration again. Typical toast use: 1500.
+     */
+    duration?: number;
+    onClose?: () => void;
+    /** Default `center`; `top` / `bottom` sit 60 px from that edge. */
+    position?: "center" | "top" | "bottom";
+    /**
+     * Default `false`: pointer events pass through the transparent backdrop —
+     * the HUD is a non-modal overlay. `true`: the backdrop absorbs clicks (still
+     * no dimming, HUDs never dimmed) and the box reports `aria-busy`.
+     */
+    blocking?: boolean;
+    /**
+     * Default `false` → portal to `document.body` with a `position: fixed` backdrop.
+     * `true` → render in place with `position: absolute; inset: 0`, filling the
+     * nearest positioned ancestor (e.g. a phone screen in a showcase).
+     */
+    contained?: boolean;
+}
+/**
+ * The iOS 3 progress HUD: a ~140 px rounded translucent black square with a
+ * big spinner, a check mark, a progress bar or a custom glyph and a short
+ * white label — this era's toast ("Loading…", "Saved", the ringer bell).
+ * Non-modal by default, optionally auto-dismissing. Renders nothing while
+ * `open` is false. The ref points at the box.
+ */
+export declare const HUD: import('react').ForwardRefExoticComponent<HUDProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { HUD } from './HUD';
+export type { HUDProps, HUDKind } from './HUD';

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,27 @@
+import { LucideIcon, LucideProps } from 'lucide-react';
+export type IconVariant = 
+/** gray glass — inactive tab icons, list glyphs */
+"gloss"
+/** blue glass — the active/tinted state */
+ | "active"
+/** plain currentColor stroke, no gel treatment */
+ | "flat";
+export interface IconProps extends Omit<LucideProps, "ref"> {
+    /** Any `lucide-react` icon component, e.g. `Star`, `Search`, `Settings`. */
+    icon: LucideIcon;
+    variant?: IconVariant;
+    /** Adds the etched drop-shadow that sits icons into a bar. Default: true for gel variants. */
+    embossed?: boolean;
+    size?: number | string;
+    /** Accessible label. Omit to mark the icon decorative (`aria-hidden`). */
+    label?: string;
+}
+/**
+ * Glossy icon wrapper around lucide-react.
+ *
+ * The iOS 3 "gel" look: a vertical gradient with a hard split at 50% —
+ * lighter on top, deeper below — applied through the icon's stroke.
+ * The `<linearGradient>` is inlined inside every SVG so the component
+ * works without a global defs sheet (identical ids are harmless).
+ */
+export declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+export { Icon } from './Icon';
+export type { IconProps, IconVariant } from './Icon';

package/dist/components/Keyboard/Keyboard.d.ts

@@ -0,0 +1,38 @@
+import { HTMLAttributes } from 'react';
+export type KeyboardLayer = "letters" | "numbers" | "symbols";
+export type KeyboardReturnKey = "return" | "Go" | "Search" | "Done" | "Send" | "Next";
+export interface KeyboardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "autoCapitalize"> {
+    /** High-level binding: the keyboard edits this string (append / backspace) and reports the result. */
+    value?: string;
+    onChange?: (value: string) => void;
+    /** Low-level: a character, `" "` for space, `"\n"` for return. Fired in addition to `onChange`. */
+    onKey?: (key: string) => void;
+    onBackspace?: () => void;
+    onReturn?: () => void;
+    /**
+     * The return key's type (`UIReturnKeyType`). Anything but `"return"` renders as the blue gel key.
+     * The visible text is looked up in the provider strings (`return`, `go`, `search`, `done`, `send`, `next`).
+     */
+    returnKey?: KeyboardReturnKey;
+    /** Controlled layer. Leave undefined to let the keyboard manage its own, starting at `"letters"`. */
+    layer?: KeyboardLayer;
+    onLayerChange?: (layer: KeyboardLayer) => void;
+    /** Start with shift on (sentence start). Default `false`. */
+    defaultShift?: boolean;
+    /** Shift auto-enables on an empty value or after `". "`. Only acts through the `value`/`onChange` binding. */
+    autoCapitalize?: boolean;
+    disabled?: boolean;
+    /** Accessible name (`aria-label`). Default `strings.keyboard` ("Keyboard"). */
+    label?: string;
+}
+/**
+ * The iOS 3 on-screen keyboard in its dark "alert" appearance
+ * (`UIKeyboardAppearanceAlert`): 320×216, dark gel letter keys, darker
+ * function keys, and the enlarged popup bubble above the key being pressed.
+ *
+ * Keys are real buttons. Every key cancels `pointerdown`/`mousedown` so a
+ * focused text field elsewhere on the page keeps its focus (and caret) while
+ * the user types here; the key commits on `click`, so keyboard activation
+ * (Tab + Enter/Space) works too.
+ */
+export declare const Keyboard: import('react').ForwardRefExoticComponent<KeyboardProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { Keyboard } from './Keyboard';
+export type { KeyboardProps, KeyboardLayer, KeyboardReturnKey } from './Keyboard';

package/dist/components/List/List.d.ts

@@ -0,0 +1,55 @@
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+export interface ListProps extends HTMLAttributes<HTMLDivElement> {
+    /** `grouped` (rounded, outlined container on the pinstripe) or `plain` (full-bleed rows). */
+    variant?: "grouped" | "plain";
+    /** Section header above the group — bold gray, etched. */
+    header?: ReactNode;
+    /** Small centered gray text under the group. */
+    footer?: ReactNode;
+    /** `<ListItem>`s. */
+    children: ReactNode;
+}
+/**
+ * The grouped table view: a rounded, black-outlined container of cells sitting
+ * on the pinstripe background, with an optional section header and footer.
+ * `variant="plain"` drops the container for edge-to-edge rows.
+ */
+export declare const List: import('react').ForwardRefExoticComponent<ListProps & import('react').RefAttributes<HTMLDivElement>>;
+export type ListItemAccessory = 
+/** gray disclosure chevron — "tap to drill in" */
+"chevron"
+/** blue check — the chosen option in a picker list */
+ | "checkmark"
+/** blue circled chevron — the detail-disclosure button */
+ | "detail" | "none";
+export interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Anything, typically `<Icon icon={Star} />`; rendered inside a 29 × 29 slot. */
+    icon?: ReactNode;
+    /** Draw the icon slot as a glossy app-icon tile (29 × 29, radius 6, black outline). */
+    iconTile?: boolean;
+    /** Tile gel colour. Default `gray`. */
+    iconTint?: "gray" | "blue" | "red";
+    /** Bold white cell title. Ellipsises. */
+    title: ReactNode;
+    /** Secondary gray line under the title. Ellipsises. */
+    subtitle?: ReactNode;
+    /** Right-aligned blue value text, e.g. "On", "3 items". */
+    detail?: ReactNode;
+    /** A built-in accessory or any node (a `<Switch>`, a `<Badge>`, …). */
+    accessory?: ListItemAccessory | ReactNode;
+    /** Persistent blue highlight — the tapped-row state. */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Renders the row as an `<a>`. */
+    href?: string;
+    /** With `onClick` (and no `href`) the row renders as a `<button>`. */
+    onClick?: MouseEventHandler<HTMLElement>;
+}
+/**
+ * One table cell: optional 29 × 29 icon (or glossy app-icon tile), bold title
+ * with subtitle, right-aligned detail text and an accessory. With `onClick` it
+ * is a `<button>`, with `href` an `<a>`, otherwise a plain `listitem`.
+ * Pressing (or `selected`) floods the cell with the blue gel and turns all
+ * text white — exactly like tapping a row on the 3GS.
+ */
+export declare const ListItem: import('react').ForwardRefExoticComponent<ListItemProps & import('react').RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,2 @@
+export { List, ListItem } from './List';
+export type { ListProps, ListItemProps, ListItemAccessory } from './List';

package/dist/components/ModalSheet/ModalSheet.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { NavigationBarTint } from '../NavigationBar';
+export interface ModalSheetProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    open: boolean;
+    /** Called on Escape and by the default Cancel / Done bar buttons. */
+    onClose?: () => void;
+    /** NavigationBar title. A string also becomes the dialog's accessible name. */
+    title?: ReactNode;
+    /** NavigationBar left slot. Default: a `strings.cancel` ("Cancel") bar button that calls `onClose`; `null` hides it. */
+    left?: ReactNode;
+    /** NavigationBar right slot. Default: a blue `strings.done` ("Done") bar button that calls `onClose`; `null` hides it. */
+    right?: ReactNode;
+    /** Forwarded to the NavigationBar: `black` glass (default) or the blue-gray bar. */
+    tint?: NavigationBarTint;
+    /** Body background: the grouped-table pinstripe (default), plain black or the flat cell surface. */
+    background?: "pinstripe" | "black" | "surface";
+    /** `className` goes to the sheet panel; this one to the scrolling body. */
+    bodyClassName?: string;
+    /**
+     * Default `false` → portal to `document.body` with a `position: fixed` backdrop.
+     * `true` → render in place with `position: absolute; inset: 0`, filling the
+     * nearest positioned ancestor (e.g. a phone screen in a showcase).
+     */
+    contained?: boolean;
+    /** `aria-label` for the dialog when `title` isn't a plain string. Default `strings.dialog`. */
+    label?: string;
+    children: ReactNode;
+}
+/**
+ * The iOS 3 modally presented screen (`UIModalTransitionStyleCoverVertical`):
+ * a full-size panel that slides up from the bottom over the current screen,
+ * with its own navigation bar (Cancel / title / Done) and a scrolling body —
+ * Compose, Add Event, Settings forms. Renders nothing while `open` is false.
+ * The ref points at the sheet panel.
+ */
+export declare const ModalSheet: import('react').ForwardRefExoticComponent<ModalSheetProps & import('react').RefAttributes<HTMLDivElement>>;

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

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

package/dist/components/NavigationBar/NavigationBar.d.ts

@@ -0,0 +1,41 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+export type NavigationBarTint = 
+/** black glass — `UIBarStyleBlack` (default) */
+"black"
+/** the classic iOS 3 blue-gray bar */
+ | "blue";
+export interface NavigationBarProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Bold 20 px white title, centred over the full bar width; ellipsised when too long. */
+    title?: ReactNode;
+    /** Left slot — usually a `<BarButton variant="back">`. */
+    left?: ReactNode;
+    /** Right slot — usually a `<BarButton variant="done">` or a default bar button. */
+    right?: ReactNode;
+    /** `black` glass (default) or the classic blue-gray bar. */
+    tint?: NavigationBarTint;
+}
+/**
+ * The 44 px top bar: a vertical gradient with the hard highlight split at 50 %,
+ * a 1 px light rim on top and a 1 px black bottom edge. The title is centred
+ * over the whole width so it stays put regardless of how wide the buttons are.
+ */
+export declare const NavigationBar: import('react').ForwardRefExoticComponent<NavigationBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export type BarButtonVariant = 
+/** dark gel — the everyday bar button */
+"default"
+/** the left-pointing arrow shape */
+ | "back"
+/** blue gel — the primary action ("Done", "Save") */
+ | "done";
+export interface BarButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: BarButtonVariant;
+    /** Any `lucide-react` icon, rendered flat in white before the label. */
+    icon?: LucideIcon;
+}
+/**
+ * The small 30 px gel button that lives in navigation bars and toolbars.
+ * `variant="back"` draws the pointed pill: two clipped layers (black
+ * silhouette + inset gel) stand in for the border that `clip-path` would cut off.
+ */
+export declare const BarButton: import('react').ForwardRefExoticComponent<BarButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,2 @@
+export { NavigationBar, BarButton } from './NavigationBar';
+export type { NavigationBarProps, BarButtonProps, BarButtonVariant, NavigationBarTint, } from './NavigationBar';

package/dist/components/NotificationBanner/NotificationBanner.d.ts

@@ -0,0 +1,50 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type NotificationBannerTint = "gray" | "blue" | "red" | "green";
+export interface NotificationBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    open: boolean;
+    /** Bold 14 px white line — the app or sender name. */
+    title: ReactNode;
+    /** 13 px line under the title; clamped to two lines with an ellipsis. */
+    message?: ReactNode;
+    /** Glyph for the 29 px app-icon tile, e.g. `<Icon icon={Mail} variant="flat" size={18} />`. */
+    icon?: ReactNode;
+    /** Tile gel colour. Default `gray`. */
+    iconTint?: NotificationBannerTint;
+    /** Small dark gel bar-button on the end side ("Reply"). */
+    actionLabel?: string;
+    /** Fires when the action button is tapped. */
+    onAction?: () => void;
+    /** Fires when the banner body (not the action) is tapped — e.g. open the app. */
+    onClick?: () => void;
+    /**
+     * Auto-dismiss: calls `onClose` after this many ms. Default 4000; `0` keeps
+     * the banner up until it is tapped, swiped or closed. The timer pauses while
+     * the banner is hovered, pressed or keyboard-focused and restarts when
+     * `open`, `duration` or `title` change (new content = new banner).
+     */
+    duration?: number;
+    /**
+     * Called after `duration`, after a swipe-up, after Escape, and after an
+     * action / body tap (see `dismissOnAction`). The caller sets `open` false.
+     */
+    onClose?: () => void;
+    /** Whether an action / body tap also calls `onClose`. Default `true`. */
+    dismissOnAction?: boolean;
+    /**
+     * Default `false` → portal to `document.body` with `position: fixed; top: 0`.
+     * `true` → render in place with `position: absolute; top: 0; inset-inline: 0`
+     * at the top of the nearest positioned ancestor (e.g. a phone screen in a showcase).
+     */
+    contained?: boolean;
+    /** `aria-label` of the status region. Default "Notification". */
+    label?: string;
+}
+/**
+ * The push-notification banner: a 60 px translucent black glass strip that
+ * drops over the status / nav bar with a glossy app-icon tile, a bold title,
+ * a short message, an optional action bar-button and a three-dot grip.
+ * Non-modal and auto-dismissing; tapping the body runs `onClick`, a swipe up
+ * slides it away. Renders nothing while `open` is false. The ref points at
+ * the banner.
+ */
+export declare const NotificationBanner: import('react').ForwardRefExoticComponent<NotificationBannerProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,2 @@
+export { NotificationBanner } from './NotificationBanner';
+export type { NotificationBannerProps, NotificationBannerTint } from './NotificationBanner';

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

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+export type PageControlSize = 
+/** 6 px dots — the home-screen pager (default) */
+"sm"
+/** 8 px dots — photo pagers, larger canvases */
+ | "md";
+export interface PageControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Number of pages. With `hideForSinglePage` (default) nothing renders when this is `<= 1`. */
+    count: number;
+    /** Controlled current page, 0-based. Clamped to `[0, count - 1]`. */
+    value?: number;
+    /** Uncontrolled initial page, 0-based. Default `0`. */
+    defaultValue?: number;
+    onChange?: (page: number) => void;
+    /** `aria-label` for the tablist. Default `strings.pages` ("Pages"). */
+    label?: string;
+    /** Render nothing for 0 or 1 pages (`UIPageControl.hidesForSinglePage`). Default `true`. */
+    hideForSinglePage?: boolean;
+    /** Dot size: `sm` = 6 px (default), `md` = 8 px. */
+    size?: PageControlSize;
+}
+/**
+ * The row of tiny dots under the home screen (`UIPageControl`): the current
+ * page is a solid white dot with a faint gloss, the others translucent white
+ * sunk into the surface with a dark rim.
+ *
+ * Interaction matches the original: tapping the strip's right half goes one
+ * page forward, the left half one back (no wrap); each dot is also a button
+ * that jumps straight to its page. Keyboard: Left/Right (and Home/End) move
+ * focus *and* select — roving tabindex, so the strip is a single Tab stop.
+ */
+export declare const PageControl: import('react').ForwardRefExoticComponent<PageControlProps & import('react').RefAttributes<HTMLDivElement>>;