@nim.zone/ui 0.6.0

package/dist/components/field.d.ts

@@ -0,0 +1,47 @@
+import { InputHTMLAttributes, ReactNode, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { IconName } from './icon';
+export interface FieldShellProps {
+    children: (ids: {
+        control: string;
+        describedBy?: string;
+    }) => ReactNode;
+    className?: string;
+    error?: string;
+    hint?: string;
+    id?: string;
+    label?: string;
+    required?: boolean;
+}
+/**
+ * Every nim form control shares this frame, which is what guarantees that a
+ * label, a hint, and an error are wired to the control with the right ids on
+ * every screen — the part teams most often get wrong by hand.
+ */
+export declare function FieldShell({ children, className, error, hint, id, label, required }: FieldShellProps): import("react").JSX.Element;
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    error?: string;
+    hint?: string;
+    iconEnd?: IconName;
+    iconStart?: IconName;
+    label?: string;
+}
+export declare function Input({ className, error, hint, iconEnd, iconStart, id, label, required, ...props }: InputProps): import("react").JSX.Element;
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: string;
+    hint?: string;
+    label?: string;
+}
+export declare function Textarea({ className, error, hint, id, label, required, rows, ...props }: TextareaProps): import("react").JSX.Element;
+export interface SelectOption {
+    disabled?: boolean;
+    label: string;
+    value: string;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+    error?: string;
+    hint?: string;
+    label?: string;
+    options: SelectOption[];
+    placeholder?: string;
+}
+export declare function Select({ className, error, hint, id, label, options, placeholder, required, ...props }: SelectProps): import("react").JSX.Element;

package/dist/components/icon-button.d.ts

@@ -0,0 +1,12 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IconName } from './icon';
+export type IconButtonSize = 'sm' | 'md' | 'lg';
+export type IconButtonVariant = 'ghost' | 'outline' | 'solid';
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Required: an icon-only control has no other accessible name. */
+    label: string;
+    name: IconName;
+    size?: IconButtonSize;
+    variant?: IconButtonVariant;
+}
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/icon.d.ts

@@ -0,0 +1,72 @@
+import { SVGProps } from 'react';
+/**
+ * Icons are addressed by role, not by vendor name. The registry is the whole
+ * point: it keeps the icon set finite and reviewable, it stops two screens
+ * meaning "delete" with two different glyphs, and it means swapping icon
+ * libraries later is one file rather than a codebase sweep.
+ */
+declare const REGISTRY: {
+    alert: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'arrow-forward': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    bell: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    bookmark: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    calendar: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    camera: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    check: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'check-circle': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'chevron-back': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'chevron-down': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'chevron-forward': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'chevron-up': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    clock: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    close: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    copy: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    danger: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    document: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    download: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    edit: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    external: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    eye: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    filter: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    heart: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    home: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    info: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    loading: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    menu: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    mic: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    minus: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    moon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    paperclip: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    pause: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    play: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    plus: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    search: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    send: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    settings: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    share: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'sign-out': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    stop: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    sparkle: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    star: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    sun: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    trash: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'trend-down': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    'trend-up': import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    upload: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    video: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    user: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+    wallet: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+};
+export type IconName = keyof typeof REGISTRY;
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type IconTone = 'accent' | 'danger' | 'default' | 'muted' | 'success' | 'warning';
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'ref'> {
+    /** Give a label only when the icon is the sole carrier of meaning. */
+    label?: string;
+    name: IconName;
+    size?: IconSize;
+    tone?: IconTone;
+}
+export declare function Icon({ className, label, name, size, tone, ...props }: IconProps): import("react").JSX.Element;
+export declare const iconNames: IconName[];
+export {};

package/dist/components/layout.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from 'react';
+interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** The mobile app viewport, centred on a desktop screen. */
+export declare function AppFrame({ children, className, ...props }: BoxProps): import("react").JSX.Element;
+/** Vertical rhythm. Spacing between components belongs to the page, not to
+    the components, and this is where the page expresses it. */
+export declare function Stack({ children, className, gap, ...props }: BoxProps & {
+    gap?: 'loose' | 'md' | 'tight';
+}): import("react").JSX.Element;
+export declare function Inline({ children, className, ...props }: BoxProps): import("react").JSX.Element;
+export {};

package/dist/components/list.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Drops the surrounding plate and keeps only the dividers. */
+    plain?: boolean;
+}
+export declare function List({ children, className, plain, ...props }: ListProps): import("react").JSX.Element;
+export interface ListRowProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Renders the row as a link. Mutually exclusive with `onClick`. */
+    href?: string;
+    leading?: ReactNode;
+    subtitle?: ReactNode;
+    title: ReactNode;
+    trailing?: ReactNode;
+}
+export declare function ListRow({ className, href, leading, onClick, subtitle, title, trailing, ...props }: ListRowProps): import("react").JSX.Element;

package/dist/components/menu.d.ts

@@ -0,0 +1,56 @@
+import { ReactElement, ReactNode, Ref, RefObject } from 'react';
+import { IconName } from './icon';
+export interface MenuAction {
+    danger?: boolean;
+    disabled?: boolean;
+    icon?: IconName;
+    kind?: 'action';
+    label: string;
+    onSelect: () => void;
+    /** Rendered in the mono, on the trailing edge — a hint, never a binding. */
+    shortcut?: string;
+}
+export interface MenuHeading {
+    kind: 'heading';
+    label: string;
+}
+export interface MenuSeparator {
+    kind: 'separator';
+}
+export type MenuItem = MenuAction | MenuHeading | MenuSeparator;
+export interface MenuProps {
+    /** The trigger is the caller's, so the menu has no opinion about what opens
+        it — it only needs the ref to anchor against. */
+    children: (props: {
+        open: boolean;
+        ref: Ref<HTMLButtonElement>;
+        toggle: () => void;
+    }) => ReactElement;
+    className?: string;
+    items: MenuItem[];
+    label: string;
+}
+/**
+ * A list of actions, dismissed by choosing one. A menu holds actions and never
+ * inputs — something the viewer types into is a Popover.
+ *
+ * The trigger is supplied by the caller as a render prop so the menu never has
+ * an opinion about what opens it; it only needs the ref to anchor against.
+ * Arrow keys move a roving active item, Enter and Space choose it, Escape and
+ * an outside click dismiss, and focus returns to the trigger either way.
+ */
+export declare function Menu({ children, className, items, label }: MenuProps): import("react").JSX.Element;
+export interface PopoverProps {
+    children: ReactNode;
+    className?: string;
+    label: string;
+    onClose: () => void;
+    open: boolean;
+    /** The element the panel is placed against. */
+    triggerRef: RefObject<HTMLElement | null>;
+}
+/**
+ * A menu's geometry with a form's contents. Unlike a menu it does not close on
+ * a click inside, because the thing inside is what the viewer came for.
+ */
+export declare function Popover({ children, className, label, onClose, open, triggerRef }: PopoverProps): import('react').ReactPortal | null;

package/dist/components/onboarding.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+export interface OnboardingSlide {
+    /** Illustration, video, or anything else. Sized by the caller. */
+    art?: ReactNode;
+    body?: ReactNode;
+    id: string;
+    /** The chip above the title — the promise, in three or four words. */
+    label?: string;
+    /** A caption card under the art: a headline and its supporting points. */
+    proof?: {
+        icon?: ReactNode;
+        points?: string[];
+        title: ReactNode;
+    };
+    title: ReactNode;
+}
+export interface OnboardingProps {
+    className?: string;
+    /** Label for the button on the last slide. */
+    finishLabel: string;
+    /** Label for the button on every other slide. */
+    nextLabel: string;
+    /** Reached from the finish button, or from skip. */
+    onDone: () => void;
+    onSkip?: () => void;
+    /** Notified on every slide change, including from a dot. */
+    onStep?: (index: number) => void;
+    slides: OnboardingSlide[];
+    skipLabel?: string;
+    /** Version string, support line — whatever sits under the CTA. */
+    footnote?: ReactNode;
+    /** Brand mark in the top bar. */
+    brand?: ReactNode;
+    /** Accessible names for the controls. */
+    labels?: {
+        back: string;
+        dot: (index: number) => string;
+    };
+}
+/**
+ * The three-screen intro a product opens with: art, a promise, a body, and one
+ * CTA that advances.
+ *
+ * State is the component's, because a first-run carousel is never resumed from
+ * a URL — `onStep` reports it for analytics and `onDone` fires when the viewer
+ * either finishes or skips, so the caller routes in one place instead of two.
+ * Slides are announced through a live region rather than by moving focus,
+ * which would yank a screen reader out of the CTA it is already on.
+ */
+export declare function Onboarding({ brand, className, finishLabel, footnote, labels, nextLabel, onDone, onSkip, onStep, skipLabel, slides, }: OnboardingProps): import("react").JSX.Element;

package/dist/components/otp-input.d.ts

@@ -0,0 +1,29 @@
+export interface OtpInputProps {
+    /** Fires as soon as the last box is filled — by typing, pasting, or SMS
+        autofill. The caller does not need to watch `value.length` itself. */
+    autoFocus?: boolean;
+    className?: string;
+    error?: string;
+    label: string;
+    length?: number;
+    onChange: (value: string) => void;
+    onComplete?: (value: string) => void;
+    /** Per-box accessible name, e.g. `(i) => `Digit ${i + 1}``. */
+    digitLabel?: (index: number) => string;
+    /** The code so far, ASCII digits only, shorter than `length` while typing. */
+    value: string;
+}
+/**
+ * The boxed one-time code.
+ *
+ * One `<input>` per digit, but the string is the caller's: the component never
+ * holds a per-box array, so a paste, an SMS autofill, and a keystroke all take
+ * the same path and cannot disagree. The row is pinned `dir="ltr"` even inside
+ * a Persian page — a code is a number, and the first digit belongs on the left
+ * in every script. Input is normalised through `toAsciiDigits`, so ۱۲۳۴۵ typed
+ * on a Persian keyboard arrives as `12345`.
+ *
+ * `autocomplete="one-time-code"` on the first box is what lets iOS and Android
+ * offer the code from the SMS itself.
+ */
+export declare function OtpInput({ autoFocus, className, digitLabel, error, label, length, onChange, onComplete, value, }: OtpInputProps): import("react").JSX.Element;

package/dist/components/pagination.d.ts

@@ -0,0 +1,12 @@
+export interface PaginationProps {
+    className?: string;
+    label?: string;
+    nextLabel?: string;
+    onChange: (page: number) => void;
+    page: number;
+    pageCount: number;
+    previousLabel?: string;
+    /** Free text on the leading edge — "Showing 1–6 of 84". */
+    summary?: string;
+}
+export declare function Pagination({ className, label, nextLabel, onChange, page, pageCount, previousLabel, summary, }: PaginationProps): import("react").JSX.Element;

package/dist/components/password-field.d.ts

@@ -0,0 +1,33 @@
+import { InputHTMLAttributes } from 'react';
+export type PasswordStrength = 'fair' | 'good' | 'strong' | 'weak';
+export interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    error?: string;
+    hint?: string;
+    label?: string;
+    /** Draws the meter. Omit on a sign-in field: scoring a password someone
+        already has tells them nothing they can act on. */
+    strength?: PasswordStrength;
+    /** Accessible names for the reveal toggle and the meter. */
+    labels?: {
+        hide: string;
+        show: string;
+        strength: (level: PasswordStrength) => string;
+    };
+}
+/**
+ * A password input with a reveal toggle and an optional strength meter.
+ *
+ * Revealing is a real `type` swap rather than a font trick, so a password
+ * manager still sees a password field, and the toggle is a button with a
+ * label — an icon that changes silently leaves a screen reader unable to tell
+ * whether the characters are showing.
+ *
+ * Scoring is the caller's: strength depends on the policy being enforced, and
+ * a meter that disagrees with the server's rules is worse than none.
+ */
+export declare function PasswordField({ className, error, hint, id, label, labels, required, strength, ...props }: PasswordFieldProps): import("react").JSX.Element;
+/**
+ * A default score for products without a policy of their own: length first,
+ * then variety. Deliberately blunt — it is a hint, never a gate.
+ */
+export declare function scorePassword(password: string): PasswordStrength;

package/dist/components/phone-field.d.ts

@@ -0,0 +1,44 @@
+export interface PhoneFieldProps {
+    className?: string;
+    /** ISO 3166-1 alpha-2 of the selected country, e.g. `IR`. */
+    country: string;
+    error?: string;
+    hint?: string;
+    id?: string;
+    label?: string;
+    /** Locale the country names are shown in. Defaults to the document's. */
+    locale?: string;
+    onChange: (value: string) => void;
+    onCountryChange: (iso2: string) => void;
+    onSubmit?: () => void;
+    placeholder?: string;
+    /** Countries to float above the alphabetical list — the ones most viewers
+        of this product will pick. */
+    priority?: string[];
+    required?: boolean;
+    /** Accessible names for the picker. */
+    labels?: {
+        pickCountry: string;
+        search: string;
+        noMatch: string;
+    };
+    /** The national number, ASCII digits only, without the dialling code. */
+    value: string;
+}
+/**
+ * Phone number entry: a country picker welded to a number input.
+ *
+ * The two halves are separate props on purpose. A field that owns one E.164
+ * string has to re-parse it on every keystroke to know which flag to draw, and
+ * gets it wrong the moment someone types a `+` themselves; keeping the country
+ * and the national digits apart means `+${dial}${value}` is the whole
+ * serialisation and there is nothing to guess.
+ *
+ * The picker lists every ISO country, named in the viewer's locale, searchable
+ * by name, code, or ISO letters. The input is `dir="ltr"` in every direction —
+ * a phone number reads left to right in Persian too — and Persian digits are
+ * normalised to ASCII on the way in.
+ */
+export declare function PhoneField({ className, country, error, hint, id, label, labels, locale, onChange, onCountryChange, onSubmit, placeholder, priority, required, value, }: PhoneFieldProps): import("react").JSX.Element;
+/** `+${dial}${national}` — what an auth API actually wants. */
+export declare function toE164(country: string, national: string): string;

package/dist/components/plan-card.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { IconName } from './icon';
+export interface PlanFeature {
+    label: ReactNode;
+    /** `included` is shipped, `pending` is bought but not released yet, and
+        `excluded` is what this plan does not get. All three are worth showing:
+        a plan card that lists only wins tells the viewer nothing to choose on. */
+    state?: 'excluded' | 'included' | 'pending';
+    /** A short status word beside a pending row — "soon", "beta". */
+    note?: string;
+}
+export interface PlanCardProps {
+    /** The one plan being recommended. At most one card in a set. */
+    badge?: string;
+    className?: string;
+    features?: PlanFeature[];
+    icon?: IconName;
+    /** The headline figure, already formatted and localised by the caller. */
+    price: ReactNode;
+    /** What the price buys — "per month", "6 months". */
+    priceCaption?: ReactNode;
+    /** The comparable unit price, so plans of different lengths can be read
+        against each other. */
+    secondary?: {
+        caption: ReactNode;
+        value: ReactNode;
+    };
+    name: ReactNode;
+    onSelect?: () => void;
+    selected?: boolean;
+    tagline?: ReactNode;
+}
+/**
+ * One subscription tier, as a card the viewer chooses.
+ *
+ * The whole card is the control — a radio hidden behind a tap target the size
+ * of a fingernail is the reason plan pickers feel fussy — so it renders as a
+ * `<button>` with `aria-pressed` when selectable, and as a plain plate when it
+ * is only being displayed.
+ *
+ * Prices are `ReactNode` rather than numbers: currency, digit shaping and
+ * grouping are the product's locale decisions, and a kit that formats them
+ * would be wrong in Persian first.
+ */
+export declare function PlanCard({ badge, className, features, icon, name, onSelect, price, priceCaption, secondary, selected, tagline, }: PlanCardProps): import("react").JSX.Element;

package/dist/components/plan-picker.d.ts

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import { PlanCardProps } from './plan-card';
+export interface BillingCycle {
+    id: string;
+    label: string;
+    /** "Save 15%" — the reason to pick the longer commitment. */
+    note?: string;
+}
+export interface PlanOffer extends Omit<PlanCardProps, 'onSelect' | 'price' | 'secondary' | 'selected'> {
+    id: string;
+    /** Price per billing cycle, keyed by cycle id. Already formatted: currency
+        and digit shaping are the product's locale decision, not the kit's. */
+    prices: Record<string, {
+        monthly?: ReactNode;
+        price: ReactNode;
+    }>;
+}
+export interface PlanPickerProps {
+    className?: string;
+    /** Billing periods. One cycle, or none at all, hides the switch. */
+    cycles?: BillingCycle[];
+    cycle?: string;
+    defaultCycle?: string;
+    defaultPlan?: string;
+    labels?: {
+        cycle: string;
+        monthly: string;
+        price: string;
+    };
+    /** Fine print under the action — renewal terms, store rules. */
+    note?: ReactNode;
+    onCycleChange?: (cycle: string) => void;
+    onPlanChange?: (plan: string) => void;
+    /** Fires with the chosen plan and cycle. Payment is the app's business. */
+    onSubmit?: (plan: string, cycle: string) => void;
+    plans: PlanOffer[];
+    plan?: string;
+    submitLabel?: string;
+}
+/**
+ * The subscription screen: billing period, the tiers, and one action.
+ *
+ * Ready to mount — it holds the selection, keeps the cycle and the prices in
+ * step, and hands `onSubmit` the pair the checkout needs. Pass `plan`/`cycle`
+ * to drive it from outside instead, e.g. when a deep link opens the screen on
+ * a specific tier.
+ *
+ * It deliberately does not take a payment handler, a store SDK, or a currency:
+ * a plan picker that also knows how to charge is two screens welded together,
+ * and only one of them is the same across products.
+ */
+export declare function PlanPicker({ className, cycle, cycles, defaultCycle, defaultPlan, labels, note, onCycleChange, onPlanChange, onSubmit, plan, plans, submitLabel, }: PlanPickerProps): import("react").JSX.Element;

package/dist/components/profile-header.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+export interface AvatarRingProps {
+    className?: string;
+    /** What the ring is measuring, for assistive tech. */
+    label: string;
+    /** Initials, or a small caption under them. */
+    caption?: ReactNode;
+    /** Image URL. Falls back to `initials` when absent or broken. */
+    src?: string;
+    initials: string;
+    size?: number;
+    /** 0–100. The ring is the progress; the number belongs in the caption. */
+    value: number;
+}
+/**
+ * An avatar wearing a progress ring: profile completion, a skin score, a
+ * streak — one figure the viewer is meant to want to finish.
+ *
+ * The ring is an SVG arc rather than a conic gradient so it keeps a rounded
+ * cap and stays crisp at any size, and it carries `role="img"` with the label,
+ * because the arc is the only place the value is stated for a sighted viewer.
+ */
+export declare function AvatarRing({ caption, className, initials, label, size, src, value, }: AvatarRingProps): import("react").JSX.Element;
+export interface ProfileHeaderProps {
+    /** The row of quick figures under the identity block. */
+    stats?: {
+        label: ReactNode;
+        value: ReactNode;
+    }[];
+    /** Small pills: plan, skin type, billing cycle. */
+    chips?: ReactNode;
+    actions?: ReactNode;
+    avatar: ReactNode;
+    className?: string;
+    /** The line above the name — "vlora account", the tenant, the role. */
+    eyebrow?: ReactNode;
+    name: ReactNode;
+}
+/**
+ * The plate at the top of a profile: who this is, what they have, and the two
+ * things they should do next.
+ *
+ * It is a header, not a dashboard. Anything that needs a chart or a list goes
+ * in the sections beneath it — this block stays readable at a glance, which is
+ * the only reason it earns the space it takes.
+ */
+export declare function ProfileHeader({ actions, avatar, chips, className, eyebrow, name, stats, }: ProfileHeaderProps): import("react").JSX.Element;

package/dist/components/profile-screen.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { ProfileHeaderProps } from './profile-header';
+import { IconName } from './icon';
+export interface ProfileRow {
+    /** A switch instead of a chevron. With `onToggle` the row is the control. */
+    checked?: boolean;
+    danger?: boolean;
+    href?: string;
+    icon?: IconName;
+    key: string;
+    label: ReactNode;
+    onSelect?: () => void;
+    onToggle?: (next: boolean) => void;
+    subtitle?: ReactNode;
+    /** A badge, a count, a version string. */
+    value?: ReactNode;
+}
+export interface ProfileSection {
+    description?: ReactNode;
+    key: string;
+    rows: ProfileRow[];
+    title?: ReactNode;
+}
+export interface ProfileScreenProps extends ProfileHeaderProps {
+    className?: string;
+    /** Sign out, delete account — whatever ends the session, kept away from the
+        rows above so it is never the thing a thumb reaches by accident. */
+    footer?: ReactNode;
+    sections?: ProfileSection[];
+}
+/**
+ * The account screen: the identity plate, then grouped rows of settings.
+ *
+ * Ready to mount — hand it the header's props and a list of sections and it is
+ * the screen. Rows are declared, not composed, so the whole of a settings page
+ * is data the app already has: a label, an icon, and either somewhere to go or
+ * something to toggle.
+ *
+ * State stays the caller's. A switch here reports the change and redraws from
+ * the prop, because the truth about whether notifications are on lives on a
+ * server, and a row that flips optimistically and then disagrees with it is
+ * worse than one that waits.
+ */
+export declare function ProfileScreen({ className, footer, sections, ...header }: ProfileScreenProps): import("react").JSX.Element;

package/dist/components/resource-meter.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type ResourceMeterTone = 'accent' | 'danger' | 'success' | 'warning';
+export interface ResourceMeterProps extends HTMLAttributes<HTMLDivElement> {
+    /** A concise description of the capacity being measured. */
+    label: ReactNode;
+    /** A readable measurement such as `18.4 / 32 GiB`; formatting stays in the product. */
+    value: ReactNode;
+    /** Optional secondary context, for example a node's one-minute load. */
+    detail?: ReactNode;
+    /** Percentage used, clamped to the meter's valid 0–100 range. Omit for capacity-only data. */
+    percent?: number;
+    tone?: ResourceMeterTone;
+}
+/**
+ * A compact, accessible capacity reading for operator interfaces.
+ *
+ * `Progress` is intentionally unlabelled composition; a resource figure needs
+ * its numerator, denominator, and qualitative state to travel together. The
+ * product supplies formatting because bytes, vCPU, and retention windows do
+ * not share a unit.
+ */
+export declare function ResourceMeter({ className, detail, label, percent, tone, value, ...props }: ResourceMeterProps): import("react").JSX.Element;

package/dist/components/section-header.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    action?: ReactNode;
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    title: ReactNode;
+}
+export declare function SectionHeader({ action, className, description, eyebrow, title, ...props }: SectionHeaderProps): import("react").JSX.Element;

package/dist/components/segmented.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+export interface SegmentedOption<T extends string> {
+    disabled?: boolean;
+    label: string;
+    value: T;
+}
+export interface SegmentedProps<T extends string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    fullWidth?: boolean;
+    label: string;
+    onChange: (value: T) => void;
+    options: SegmentedOption<T>[];
+    value: T;
+}
+/**
+ * A tablist rather than a row of buttons: arrow-key navigation and the
+ * selected state both come from the platform's tab semantics.
+ */
+export declare function Segmented<T extends string>({ className, fullWidth, label, onChange, options, value, ...props }: SegmentedProps<T>): import("react").JSX.Element;