@inkorange/space-ui 1.0.4 → 1.2.0

package/README.md

@@ -4,7 +4,7 @@
 
 [![npm](https://img.shields.io/npm/v/@inkorange/space-ui)](https://www.npmjs.com/package/@inkorange/space-ui)
 ![coverage](https://img.shields.io/badge/coverage-83%25-green)
-![minzip](https://img.shields.io/badge/minzip-22.1%20kB-blue)
+![minzip](https://img.shields.io/badge/minzip-23.5%20kB-blue)
 ![dependencies](https://img.shields.io/badge/dependencies-0-blue)
 [![docs](https://img.shields.io/badge/docs-live%20gallery-0b7dd6)](https://space-components.vercel.app)
 
@@ -18,7 +18,7 @@ compose and nothing to opt into.
      resolve against the registry rather than the repository. This sheet is a
      screenshot of the real components, shot from the gallery — see
      `pnpm assets`. -->
-<img alt="Stickersheet: Button, Badge, Select, TextField, Slider, Progress, IconToggle, RadioGroup, Loader, Tabs, icons, Text, TextArea, Card and ScrollArea on a dark ground"
+<img alt="Stickersheet: Button, Badge, Select, TextField, Slider, Progress, IconToggle, RadioGroup, Loader, Tabs, icons, Text, TextArea and Card — plain and with an image — and a Message banner on a dark ground"
      src="https://raw.githubusercontent.com/inkorange/space-ui/main/.github/assets/components.jpg"
      width="100%">
 
@@ -75,14 +75,11 @@ screen at once — the kind of interface where someone is adjusting values and
 watching something respond.
 
 ```tsx
-<Select.Root value={star} onValueChange={setStar}>
-  <Select.Trigger />
-  <Select.Content>
-    {types.map((t) => (
-      <Select.Item key={t} value={t}>{t}-type star</Select.Item>
-    ))}
-  </Select.Content>
-</Select.Root>
+<Select value={star} onValueChange={setStar}>
+  {types.map((t) => (
+    <Select.Item key={t} value={t}>{t}-type star</Select.Item>
+  ))}
+</Select>
 ```
 
 The small things are handled so you never have to notice them. That Select
@@ -165,10 +162,10 @@ it exposes.
 | | |
 | --- | --- |
 | **Typography** | [Text](https://space-components.vercel.app/?story=components--typography--text-sizes) · [Link](https://space-components.vercel.app/?story=components--typography--text-sizes) · [Heading](https://space-components.vercel.app/?story=components--typography--headings) · [Badge](https://space-components.vercel.app/?story=components--typography--badges) · [Separator](https://space-components.vercel.app/?story=components--typography--separator) |
-| **Layout** | [Card](https://space-components.vercel.app/?story=components--layout--card) · [Flex](https://space-components.vercel.app/?story=components--layout--flex-and-grid) · [Grid](https://space-components.vercel.app/?story=components--layout--flex-and-grid) · [Box](https://space-components.vercel.app/?story=components--layout--flex-and-grid) · [ScrollArea](https://space-components.vercel.app/?story=components--layout--scroll-area) |
+| **Layout** | [Card](https://space-components.vercel.app/?story=components--layout--card) · [Flex](https://space-components.vercel.app/?story=components--layout--flex-and-grid) · [Grid](https://space-components.vercel.app/?story=components--layout--flex-and-grid) · [Box](https://space-components.vercel.app/?story=components--layout--flex-and-grid) |
 | **Forms** | [TextField](https://space-components.vercel.app/?story=components--forms--text-field) · [TextArea](https://space-components.vercel.app/?story=components--forms--text-area) · [Select](https://space-components.vercel.app/?story=components--forms--select) · [Slider](https://space-components.vercel.app/?story=components--forms--slider) · [RadioGroup](https://space-components.vercel.app/?story=components--forms--radio-group) |
 | **Buttons** | [Button](https://space-components.vercel.app/?story=components--buttons--buttons) · [IconToggle](https://space-components.vercel.app/?story=components--buttons--icon-toggle) |
-| **Feedback** | [Loader](https://space-components.vercel.app/?story=components--buttons--loader) · [Progress](https://space-components.vercel.app/?story=components--buttons--progress) |
+| **Feedback** | [Loader](https://space-components.vercel.app/?story=components--feedback--loader) · [Progress](https://space-components.vercel.app/?story=components--feedback--progress) · [Message](https://space-components.vercel.app/?story=components--feedback--message) |
 | **Overlays** | [Dialog](https://space-components.vercel.app/?story=components--overlays--dialog) · [AlertDialog](https://space-components.vercel.app/?story=components--overlays--alert-dialog) · [DropdownMenu](https://space-components.vercel.app/?story=components--overlays--dropdown-menu) · [Tabs](https://space-components.vercel.app/?story=components--overlays--tabs) · [Tooltip](https://space-components.vercel.app/?story=components--overlays--tooltip) |
 | **Icons** | [20 icons](https://space-components.vercel.app/?story=components--icons--all-icons) |
 | **Foundations** | [Color](https://space-components.vercel.app/?story=foundations--color) · [Spacing](https://space-components.vercel.app/?story=foundations--spacing) · [Type scale](https://space-components.vercel.app/?story=foundations--type-scale) · [Motion](https://space-components.vercel.app/?story=foundations--motion) · [Token usage](https://space-components.vercel.app/?story=foundations--token-usage) |

package/dist/components/AlertDialog.d.ts

@@ -1,8 +1,17 @@
-import { Trigger as DialogTrigger, Close as DialogClose, Content as DialogContent, Title as DialogTitle, Description as DialogDescription } from "./Dialog";
-export declare const Root: ({ open, onOpenChange, children }: import("./Dialog").RootProps) => import("react").JSX.Element;
-export declare const Trigger: typeof DialogTrigger;
-export declare const Content: typeof DialogContent;
-export declare const Title: typeof DialogTitle;
-export declare const Description: typeof DialogDescription;
-export declare const Cancel: typeof DialogClose;
-export declare const Action: typeof DialogClose;
+import { Trigger, Close, Content, Title, Description, type DialogProps } from "./Dialog";
+export type { DialogProps as AlertDialogProps };
+/**
+ * A modal that interrupts to confirm something consequential.
+ *
+ * Unlike a Dialog it has no backdrop dismissal, because dismissing an alert
+ * by missing it is not a decision. Put `Cancel` before `Action` so the safe
+ * choice takes focus when it opens.
+ */
+export declare const AlertDialog: (({ open, onOpenChange, children }: DialogProps) => import("react").JSX.Element) & {
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+    Title: typeof Title;
+    Description: typeof Description;
+    Cancel: typeof Close;
+    Action: typeof Close;
+};

package/dist/components/Card.d.ts

@@ -2,6 +2,15 @@ import type * as React from "react";
 import { type ReactNode } from "react";
 import { type SpacingProps } from "./propShared";
 export interface CardProps extends SpacingProps, React.HTMLAttributes<HTMLDivElement> {
+    /** A media element to sit at the top of the card, full-bleed to its edges.
+     *  Pass whatever your framework renders — a plain `<img>`, a `next/image`,
+     *  a `<video>` — and the card frames it: cropped to fill, top corners
+     *  matched to its own radius, and a reserved box so the layout does not
+     *  jump when it loads.
+     *
+     *  The reserved box is `--sp-card-image-ratio` (default `16 / 10`). Set it
+     *  per card for a different crop. */
+    image?: ReactNode;
     /** The card's contents. */
     children?: ReactNode;
 }
@@ -9,5 +18,9 @@ export interface CardProps extends SpacingProps, React.HTMLAttributes<HTMLDivEle
  * A translucent panel for grouping related content, one step above the page
  * surface. Its 12px inset is a deliberate exception to the 8pt grid, kept for
  * parity with the app this was extracted from.
+ *
+ * Pass `image` for a media card. The image is framed by the card rather than
+ * being an ordinary child, so every card in a row reserves the same box
+ * before its image loads and none of them reflow when it does.
  */
 export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog.d.ts

@@ -14,26 +14,19 @@ export interface DialogCtx {
     setHasDesc: (v: boolean) => void;
 }
 export declare const useDialog: () => DialogCtx;
-export interface RootProps {
+export interface DialogProps {
     /** Controls the dialog. Omit both this and onOpenChange to let the dialog
      *  manage its own state. */
     open?: boolean;
     /** Called whenever the dialog opens or closes, including via Escape or a
      *  backdrop click. */
     onOpenChange?: (o: boolean) => void;
-    /** A Trigger and a Content. */
+    /** A `Trigger` and a `Content`, in any arrangement — this renders
+     *  nothing itself, so they can sit anywhere beneath it. */
     children?: ReactNode;
 }
-/** Shared by Dialog.Root and AlertDialog.Root (alert flag differs). */
-export declare function makeRoot(alert: boolean): ({ open, onOpenChange, children }: RootProps) => React.JSX.Element;
-/**
- * Owns a dialog's open state. Works controlled via `open`/`onOpenChange`, or
- * uncontrolled if you pass neither.
- *
- * Renders nothing itself — it only provides context, so Trigger and Content
- * can sit anywhere beneath it in the tree.
- */
-export declare const Root: ({ open, onOpenChange, children }: RootProps) => React.JSX.Element;
+/** Shared by Dialog and AlertDialog; only the alert flag differs. */
+export declare function makeRoot(alert: boolean): ({ open, onOpenChange, children }: DialogProps) => React.JSX.Element;
 /**
  * Opens the dialog. Chains onto its child's existing click handler rather
  * than replacing it, and renders no element of its own — so the child stays
@@ -79,3 +72,10 @@ export declare function Title({ className, ...rest }: HeadingProps): React.JSX.E
  * description. Optional, and only announced when present.
  */
 export declare function Description(props: TextProps): React.JSX.Element;
+export declare const Dialog: (({ open, onOpenChange, children }: DialogProps) => React.JSX.Element) & {
+    Trigger: typeof Trigger;
+    Close: typeof Close;
+    Content: typeof Content;
+    Title: typeof Title;
+    Description: typeof Description;
+};

package/dist/components/DropdownMenu.d.ts

@@ -1,42 +1,38 @@
 import type * as React from "react";
 import { type ReactNode } from "react";
-/**
- * Owns a menu's open state and closes it on an outside click or Escape.
- * Renders nothing of its own.
- */
-export declare function Root({ children, }: {
-    /** A Trigger and a Content. */
-    children?: ReactNode;
-}): React.JSX.Element;
-/**
- * The control that opens the menu, and the element the menu is positioned
- * against. Wraps its child rather than rendering a button of its own.
- */
-export declare function Trigger({ children, }: {
-    /** The control that opens the menu, and what the menu anchors to. */
-    children?: ReactNode;
-}): React.ReactElement<Record<string, unknown>, string | React.JSXElementConstructor<any>> | null;
-/**
- * The menu surface, anchored to the trigger and aligned to its start or end
- * edge. Owns the keyboard model: arrows move between items, Escape closes and
- * returns focus to the trigger.
- */
-export declare function Content({ align, children, }: {
+import { type ButtonProps } from "./Button";
+export interface DropdownMenuProps extends Omit<ButtonProps, "children"> {
+    /** The trigger's content. The trigger is always a Button, so this is what
+     *  goes inside it — text, or an icon with `iconOnly`. */
+    label: ReactNode;
     /** Which edge of the trigger the menu lines up with. Use `end` when the
      *  trigger sits near the right edge and the menu would overflow. */
     align?: "start" | "end";
-    /** Items, Labels and Separators. */
+    /** `DropdownMenu.Item`, `.Separator` and `.Label`, in any order. */
     children?: ReactNode;
-}): React.JSX.Element;
+}
+/**
+ * A menu of actions hung off a button.
+ *
+ * The trigger is built in and is always a Button — a dropdown whose trigger
+ * looked like anything else was never a shape worth supporting, and making it
+ * arbitrary cost a `cloneElement` that had to graft aria wiring and a click
+ * handler onto someone else's element.
+ *
+ * The menu rides the platform's top layer via `popover`, so click-outside
+ * dismissal and stacking come from the browser rather than an approximation.
+ * Arrows move between items, Escape closes and returns focus to the trigger.
+ */
+declare function DropdownMenuRoot({ label, align, children, ...buttonProps }: DropdownMenuProps): React.JSX.Element;
 /**
  * A non-interactive heading for a group of items. Skipped by arrow-key
  * navigation, since there is nothing to activate.
  */
-export declare function Label({ children, }: {
+declare function Label({ children, }: {
     /** Heading text for the group beneath it. Not focusable. */
     children?: ReactNode;
 }): React.JSX.Element;
-export interface ItemProps {
+export interface DropdownMenuItemProps {
     /** Render the child element instead of the default item — for a link that
      *  should stay an anchor rather than becoming a button. */
     asChild?: boolean;
@@ -54,9 +50,15 @@ export interface ItemProps {
  * Pass `color="danger"` for a destructive action so it reads differently from
  * its neighbours before it is chosen, not after.
  */
-export declare function Item({ asChild, color, onSelect, children }: ItemProps): React.JSX.Element;
+declare function Item({ asChild, color, onSelect, children }: DropdownMenuItemProps): React.JSX.Element;
 /**
  * A rule between groups of items — for separating a destructive action from
  * routine ones, so the two are not adjacent to a moving cursor.
  */
-export declare function Separator(): React.JSX.Element;
+declare function Separator(): React.JSX.Element;
+export declare const DropdownMenu: typeof DropdownMenuRoot & {
+    Item: typeof Item;
+    Separator: typeof Separator;
+    Label: typeof Label;
+};
+export {};

package/dist/components/Message.d.ts

@@ -0,0 +1,33 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+export type MessageVariant = "info" | "warning" | "alert";
+export interface MessageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Which message this is. `info` states something, `warning` flags a risk
+     *  worth acting on, `alert` reports something already wrong. Default
+     *  `info`. */
+    variant?: MessageVariant;
+    /** An optional bold line above the body. Omit for a single-line message —
+     *  a title that merely restates the body is noise.
+     *
+     *  This shadows the HTML `title` attribute, which took a string and showed
+     *  a browser tooltip. A tooltip on a banner nobody hovers was never the
+     *  useful reading of the name. */
+    title?: ReactNode;
+    /** Replaces the variant's own glyph. Pass `null` for no icon at all. */
+    icon?: ReactNode;
+    /** The message. */
+    children?: ReactNode;
+}
+/**
+ * A banner that tells the reader something about the state of the page — a
+ * risk, a result, a failure.
+ *
+ * The three variants do not merely change hue. `info` is lit like the rest of
+ * the system, cool and calm; `warning` warms the rim to amber; `alert` uses
+ * the ember treatment, the same warm limb the destructive Button wears. Each
+ * carries its own glyph so the kind of message reads before the words do.
+ *
+ * For a decision the reader must make, reach for `AlertDialog` instead — a
+ * message states, it does not ask.
+ */
+export declare const Message: React.ForwardRefExoticComponent<MessageProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/RadioGroup.d.ts

@@ -1,6 +1,6 @@
 import type * as React from "react";
 import { type ReactNode } from "react";
-export interface RootProps {
+export interface RadioGroupProps {
     /** The selected item's value. Fully controlled. */
     value: string;
     /** Called with the newly selected value. */
@@ -9,15 +9,15 @@ export interface RootProps {
     disabled?: boolean;
     /** Merged onto the group wrapper. */
     className?: string;
-    /** The Items. */
+    /** One or more `RadioGroup.Item`. */
     children?: ReactNode;
 }
 /**
  * A single-choice control for short lists, where seeing every option at once
  * matters more than saving space. Reach for Select when it does not.
  */
-export declare function Root({ value, onValueChange, disabled, className, children }: RootProps): React.JSX.Element;
-export interface ItemProps {
+declare function RadioGroupRoot({ value, onValueChange, disabled, className, children }: RadioGroupProps): React.JSX.Element;
+export interface RadioGroupItemProps {
     /** Reported to the group's onValueChange when chosen. */
     value: string;
     /** Disables this option only. */
@@ -25,8 +25,16 @@ export interface ItemProps {
     /** The option's label. Part of the click target, not merely beside it. */
     children?: ReactNode;
 }
-/** With children: self-labeling (<label> wraps input+orb+children) — the
- *  SaveShareDialog pattern. Without children: emits a bare span so an
- *  OUTER label (ConfigurationPanel's <Text as="label">) owns association —
- *  nesting labels would be invalid HTML. */
-export declare function Item({ value, disabled, children }: ItemProps): React.JSX.Element;
+/**
+ * One option.
+ *
+ * With children it labels itself: a <label> wraps the input, the orb and the
+ * children, so the text is part of the click target. Without children it
+ * emits a bare span instead, so an OUTER label can own the association —
+ * nesting one label inside another is invalid HTML.
+ */
+declare function Item({ value, disabled, children }: RadioGroupItemProps): React.JSX.Element;
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Item: typeof Item;
+};
+export {};

package/dist/components/Select.d.ts

@@ -1,70 +1,53 @@
 import type * as React from "react";
 import { type ReactNode } from "react";
-export interface RootProps {
+export interface SelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "children" | "onChange"> {
     /** The selected item's value. Fully controlled. */
     value: string;
     /** Called with the newly selected value. */
     onValueChange: (v: string) => void;
     /** Blocks the trigger and removes it from the tab order. */
     disabled?: boolean;
-    /** A Trigger and a Content. */
-    children?: ReactNode;
-}
-/**
- * A single-choice menu for lists too long to show inline. Fully controlled.
- *
- * Reads its options at render time rather than through effects, so the
- * trigger shows the right label on first paint and under SSR.
- */
-export declare function Root({ value, onValueChange, disabled, children }: RootProps): React.JSX.Element;
-export interface TriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
-    /** Shown when nothing is selected. Counts toward the trigger's width,
-     *  so selecting an option never resizes it.
-     */
+    /** Shown when nothing is selected. Counts toward the control's width, so
+     *  selecting an option never resizes it. */
     placeholder?: string;
-    /** Ambient motion: the lit arc orbiting the rim. The glass skin itself
-     *  is always applied. Default true. */
+    /** Ambient motion: the lit arc orbiting the rim. The glass skin itself is
+     *  always applied. Default true. */
     animated?: boolean;
+    /** One or more `Select.Item`. Anything else is ignored for selection but
+     *  still rendered in the panel. */
+    children?: ReactNode;
 }
 /**
- * The closed state of the Select, showing the selected item's own content.
+ * A single-choice menu for lists too long to show inline. Fully controlled.
  *
- * Sizes itself to its widest option, so it never changes width as you select
- * — capped by `--sp-select-trigger-max-width`, past which the label
+ * The control sizes itself to its widest option, so it never changes width as
+ * you select — capped by `--sp-select-trigger-max-width`, past which the label
  * ellipsizes.
- */
-export declare function Trigger({ placeholder, animated, className, ...rest }: TriggerProps): React.JSX.Element;
-export interface ContentProps {
-    /** Merged with the panel's own classes. */
-    className?: string;
-    /** Accepted for Radix call-site compatibility ("popper" everywhere);
-     *  our listbox is always trigger-anchored. */
-    position?: string;
-    /** Ambient motion on the panel rim. Default true. */
-    animated?: boolean;
-    /** The Items. */
-    children?: ReactNode;
-}
-/**
- * The option panel. Always mounted but hidden while closed, so the trigger
- * can read its labels for sizing.
  *
- * Never narrower than the trigger, and grows to fit the longest option so
- * labels only wrap when they truly must.
+ * Reads its options at render time rather than through effects, so the right
+ * label shows on first paint and under SSR.
+ *
+ * Every prop other than the ones listed lands on the trigger button, which is
+ * the focusable control — so `aria-label`, `id`, `name` and `onBlur` go where
+ * you would expect.
  */
-export declare function Content({ className, position: _position, animated, children }: ContentProps): React.JSX.Element;
-export interface ItemProps {
+declare function SelectRoot({ value, onValueChange, disabled, placeholder, animated, className, children, ...rest }: SelectProps): React.JSX.Element;
+export interface SelectItemProps {
     /** Reported to onValueChange when chosen. */
     value: string;
-    /** Skipped by keyboard navigation and not selectable. Still contributes
-     *  its width to the trigger's sizing. */
+    /** Skipped by keyboard navigation and not selectable. Still contributes its
+     *  width to the control's sizing. */
     disabled?: boolean;
-    /** Shown in the panel and, once selected, in the trigger — so it has to
-     *  read correctly in both places. */
+    /** Shown in the panel and, once selected, in the closed control — so it has
+     *  to read correctly in both places. */
     children?: ReactNode;
 }
 /**
- * One option. Its children are what the trigger displays once selected, so
- * anything rendered here has to read correctly in both places.
+ * One option. Its children are what the closed control displays once
+ * selected, so anything rendered here has to read correctly in both places.
  */
-export declare function Item({ value, disabled, children }: ItemProps): React.JSX.Element;
+declare function Item({ value, disabled, children }: SelectItemProps): React.JSX.Element;
+export declare const Select: typeof SelectRoot & {
+    Item: typeof Item;
+};
+export {};

package/dist/components/Tabs.d.ts

@@ -1,23 +1,24 @@
 import type * as React from "react";
 import { type ReactNode } from "react";
-/**
- * Wraps a tab set and owns which tab is showing. Fully controlled — pass
- * `value` and `onValueChange`; there is no uncontrolled mode.
- *
- * Renders a plain div, so it imposes no layout of its own. It also mints the
- * id that pairs each Trigger with its Content, which is why every part has to
- * sit inside a Root rather than being usable on its own.
- */
-export declare function Root({ value, onValueChange, className, children }: {
+export interface TabsProps {
     /** The selected tab's value. Fully controlled — there is no default. */
     value: string;
     /** Called with the newly selected tab's value. */
     onValueChange: (v: string) => void;
     /** Merged onto the wrapper div, which is otherwise unstyled. */
     className?: string;
-    /** A List and the Contents it switches between. */
+    /** A `Tabs.List` and the `Tabs.Content`s it switches between. */
     children?: ReactNode;
-}): React.JSX.Element;
+}
+/**
+ * Wraps a tab set and owns which tab is showing. Fully controlled — pass
+ * `value` and `onValueChange`; there is no uncontrolled mode.
+ *
+ * Renders a plain div, so it imposes no layout of its own. It also mints the
+ * id that pairs each Trigger with its Content, which is why every part has to
+ * sit inside it rather than being usable on its own.
+ */
+declare function TabsRoot({ value, onValueChange, className, children }: TabsProps): React.JSX.Element;
 /**
  * The row of triggers, and the keyboard model for the set: arrow keys move
  * between tabs, Home and End jump to the ends, each moving focus and
@@ -26,7 +27,7 @@ export declare function Root({ value, onValueChange, className, children }: {
  * Bottom-aligns its children, so an active tab that grows taller rises above
  * its neighbours instead of pushing the row down — the folder-tab effect.
  */
-export declare function List({ children, }: {
+declare function List({ children, }: {
     /** The Triggers. Their order is the tab order. */
     children?: ReactNode;
 }): React.JSX.Element;
@@ -37,7 +38,7 @@ export declare function List({ children, }: {
  * Emits `data-state="active" | "inactive"`, which is the hook the active
  * styling keys off — useful if you are restyling tabs from outside.
  */
-export declare function Trigger({ value, className, children, ...rest }: {
+declare function Trigger({ value, className, children, ...rest }: {
     /** Selects this value. Must match the Content it reveals. */
     value: string;
     /** Merged with the tab's own classes rather than replacing them. */
@@ -53,9 +54,15 @@ export declare function Trigger({ value, className, children, ...rest }: {
  * Carries no styling: the surface a tab set seats onto is the consumer's, and
  * should match `--sp-tabs-surface-color` so the active tab connects to it.
  */
-export declare function Content({ value, children, }: {
+declare function Content({ value, children, }: {
     /** Shown while this matches the Root's value. Must match a Trigger. */
     value: string;
     /** Panel contents. Unmounted while another tab is selected. */
     children?: ReactNode;
 }): React.JSX.Element | null;
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof List;
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+};
+export {};

package/dist/components/TextField.d.ts

@@ -1,6 +1,6 @@
 import type * as React from "react";
 import { type ReactNode } from "react";
-export interface RootProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style"> {
+export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style"> {
     /** Merged onto the field wrapper, not the inner input. */
     className?: string;
     /** Ambient motion on the rim. The glass skin is always applied.
@@ -11,20 +11,16 @@ export interface RootProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
     /** Slots rendered inside the field, alongside the input. */
     children?: ReactNode;
 }
-/**
- * Single-line text entry. Composed as a Root so slots can sit alongside the
- * input inside the same field surface.
- *
- * Props land on the inner input, so `value`, `onChange` and the rest behave
- * as they would on a bare input.
- */
-export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLInputElement>>;
 /**
  * A fixed element inside the field, before or after the input — an icon, a
  * unit, a short affordance. Sits within the field's surface rather than
  * beside it, and does not shrink as the input fills.
  */
-export declare function Slot({ children, }: {
+declare function Slot({ children, }: {
     /** The slot's contents — an icon, a unit, a short affordance. */
     children?: ReactNode;
 }): React.JSX.Element;
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>> & {
+    Slot: typeof Slot;
+};
+export {};

package/dist/components/icons.d.ts

@@ -25,3 +25,6 @@ export declare function ChevronLeftIcon(props: IconProps): React.JSX.Element;
 export declare function BookmarkIcon(props: IconProps): React.JSX.Element;
 /** Dialog dismiss glyph — a plain X, used by Dialog.Content's corner button. */
 export declare function XIcon(props: IconProps): React.JSX.Element;
+export declare function InfoCircledIcon(props: IconProps): React.JSX.Element;
+export declare function ExclamationTriangleIcon(props: IconProps): React.JSX.Element;
+export declare function CrossCircledIcon(props: IconProps): React.JSX.Element;