@inkorange/space-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chris West
+
+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/dist/components/AlertDialog.d.ts

@@ -0,0 +1,8 @@
+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;

package/dist/components/Badge.d.ts

@@ -0,0 +1,42 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type SpacingProps } from "./propShared";
+/**
+ * Roles whose colour carries meaning — status and emphasis.
+ */
+export type BadgeSemanticColor = "muted" | "primary" | "success" | "warning" | "danger";
+/**
+ * Categorical hues for telling data apart — star classes, planet types — where
+ * the colour distinguishes rather than signals. These deliberately keep hue
+ * names: for a categorical scale the hue IS the identity, and calling one
+ * "tertiary" would imply a ranking that does not exist.
+ */
+export type BadgeCategoricalColor = "cyan" | "purple" | "orange" | "yellow" | "accent";
+export type BadgeColor = BadgeSemanticColor | BadgeCategoricalColor;
+export interface BadgeProps extends SpacingProps, Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+    /** Semantic role or categorical hue. Roles carry meaning — pick one
+     *  that matches the state, not the look you want.
+     */
+    color?: BadgeColor;
+    /** `soft` is a tinted wash for dense lists; `solid` is a filled chip
+     *  for a badge that must win attention.
+     */
+    variant?: "soft" | "solid";
+    /** 1 is the default chip; 2 is for standalone use away from body text. */
+    size?: "1" | "2";
+    /** Badges are single-line by default (Radix parity). Long free-text
+     *  content — e.g. user-named star systems on planet cards — opts into
+     *  wrapping so it can't overflow its card. */
+    wrap?: boolean;
+    /** Label text. Keep it short — a badge that wraps stops reading as one. */
+    children?: ReactNode;
+}
+/**
+ * A compact status label. Colour is the message, so choose it for meaning:
+ * the semantic roles say safe, pending or destructive, while the categorical
+ * hues only tell one kind of thing from another and carry no judgement.
+ *
+ * Single-line by default, since a badge that wraps stops reading as a badge.
+ * Opt into `wrap` for free text you do not control.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Box.d.ts

@@ -0,0 +1,15 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type SpacingProps } from "./propShared";
+export interface BoxProps extends SpacingProps, React.HTMLAttributes<HTMLDivElement> {
+    /** Anything. Box adds no styling of its own. */
+    children?: ReactNode;
+}
+/**
+ * A plain div that understands the spacing scale. The escape hatch for when
+ * you need margin or padding on the grid but no layout behaviour with it.
+ *
+ * Renders nothing of its own — no class, no styling — so it never interferes
+ * with whatever you put inside.
+ */
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Button.d.ts

@@ -0,0 +1,20 @@
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Circular, icon-only sizing (e.g. the share glyph). */
+    iconOnly?: boolean;
+    /** Warm red-dwarf rim for destructive-ish actions (e.g. Clear). */
+    ember?: boolean;
+    /** md = default. lg = hero CTAs. sm = compact dialog actions. micro = tiny steppers (no stars/glint). */
+    size?: "sm" | "md" | "lg" | "micro";
+    /** Stretch to the container width (sticky footers). */
+    fullWidth?: boolean;
+    /** Ambient motion: the orbiting rim, the glint sweep, and the twinkling
+     *  stars. Set false for dense UI or long lists where the movement
+     *  distracts. The glass look itself is not optional. Default true. */
+    animated?: boolean;
+}
+/**
+ * "Limb-lit glass" button: cosmic glass capsule whose rim glows like a planet's
+ * sunlit atmosphere limb, with twinkling stars inside and a periodic glint
+ * sweep. Plain <button>, so it composes with Radix Dialog.Trigger (Slot).
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Card.d.ts

@@ -0,0 +1,13 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type SpacingProps } from "./propShared";
+export interface CardProps extends SpacingProps, React.HTMLAttributes<HTMLDivElement> {
+    /** The card's contents. */
+    children?: ReactNode;
+}
+/**
+ * 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.
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Dialog.d.ts

@@ -0,0 +1,81 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type HeadingProps } from "./Heading";
+import { type TextProps } from "./Text";
+export interface DialogCtx {
+    open: boolean;
+    setOpen: (o: boolean) => void;
+    titleId: string;
+    descId: string;
+    /** alert dialogs: no backdrop light-dismiss */
+    alert?: boolean;
+    /** whether a Description is currently mounted (drives aria-describedby) */
+    hasDesc: boolean;
+    setHasDesc: (v: boolean) => void;
+}
+export declare const useDialog: () => DialogCtx;
+export interface RootProps {
+    /** 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. */
+    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;
+/**
+ * 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
+ * whatever it already was, button or otherwise.
+ */
+export declare function Trigger({ children, }: {
+    /** The control that opens the dialog. Its own onClick still fires. */
+    children?: ReactNode;
+}): React.JSX.Element;
+/**
+ * Closes the dialog. Same shape as Trigger: wraps its child, adds a close on
+ * click, and adds no markup.
+ */
+export declare function Close({ children, }: {
+    /** The control that closes the dialog. Its own onClick still fires. */
+    children?: ReactNode;
+}): React.JSX.Element;
+export interface ContentProps extends React.HTMLAttributes<HTMLDialogElement> {
+    /** Padding and radius step. 4 is roomier, for dialogs carrying a form. */
+    size?: "3" | "4";
+    /** Caps the dialog's width, e.g. "480px". Without it the dialog uses its
+     *  own default and grows with its content. */
+    maxWidth?: string;
+    /** Dialog contents. Include a Title — it is the accessible name. */
+    children?: ReactNode;
+}
+/**
+ * The dialog surface. Built on the native `<dialog>` element, so the browser
+ * supplies the top layer, focus trapping and Escape handling rather than the
+ * library reimplementing them.
+ *
+ * Dismissible by Escape or a click on the backdrop; AlertDialog's Content
+ * deliberately is not.
+ */
+export declare function Content({ size, maxWidth, className, style, children, ...rest }: ContentProps): React.JSX.Element;
+/**
+ * The dialog's accessible name. Wire one up for every dialog — it is what a
+ * screen reader announces when the dialog opens.
+ */
+export declare function Title({ className, ...rest }: HeadingProps): React.JSX.Element;
+/**
+ * Supporting copy beneath the title, registered as the dialog's accessible
+ * description. Optional, and only announced when present.
+ */
+export declare function Description(props: TextProps): React.JSX.Element;

package/dist/components/DropdownMenu.d.ts

@@ -0,0 +1,62 @@
+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, }: {
+    /** 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. */
+    children?: ReactNode;
+}): 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, }: {
+    /** Heading text for the group beneath it. Not focusable. */
+    children?: ReactNode;
+}): React.JSX.Element;
+export interface ItemProps {
+    /** Render the child element instead of the default item — for a link that
+     *  should stay an anchor rather than becoming a button. */
+    asChild?: boolean;
+    /** Marks a destructive action, so it reads differently before it is
+     *  chosen rather than after. */
+    color?: "danger";
+    /** Runs when the item is chosen; the menu closes either way. */
+    onSelect?: () => void | Promise<void>;
+    /** The item's label. */
+    children?: ReactNode;
+}
+/**
+ * One menu action. `onSelect` fires and the menu closes.
+ *
+ * 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;
+/**
+ * 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;

package/dist/components/Flex.d.ts

@@ -0,0 +1,29 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type SpacingProps } from "./propShared";
+export interface FlexProps extends SpacingProps, React.HTMLAttributes<HTMLDivElement> {
+    /** Render the single child element instead of a wrapper div, merging
+     *  the flex styling onto it. Avoids a redundant layer in the DOM. */
+    asChild?: boolean;
+    /** Gap step: 1=4px, 2=8px, 3=12px, 4=16px, 5=24px, 6=32px. Note step 3
+     *  is 12px — off the 8pt grid, kept for parity with the shipped app. */
+    gap?: "1" | "2" | "3" | "4" | "5" | "6";
+    /** Main axis. Default `row`. */
+    direction?: "row" | "column";
+    /** Cross-axis alignment (`align-items`). */
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    /** Main-axis distribution (`justify-content`). */
+    justify?: "start" | "center" | "end" | "between";
+    /** Wrapping behaviour. Default is the browser's `nowrap`. */
+    wrap?: "wrap" | "nowrap";
+    /** The items to lay out. */
+    children?: ReactNode;
+}
+/**
+ * A flex row or column whose gap comes from the spacing scale, so layouts
+ * inherit the 8pt grid instead of restating it in pixels.
+ *
+ * `asChild` merges the layout onto its only child rather than adding a
+ * wrapper, for when an extra div would break a grid or a selector.
+ */
+export declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Grid.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type SpacingProps } from "./propShared";
+type Cols = "1" | "2" | "3";
+export interface GridProps extends SpacingProps, React.HTMLAttributes<HTMLDivElement> {
+    /** Column count, 1–3. Pass an object for responsive counts:
+     *  `{ initial: "1", sm: "2", md: "3" }` — `initial` applies below the
+     *  first breakpoint. */
+    columns?: Cols | {
+        initial?: Cols;
+        sm?: Cols;
+        md?: Cols;
+    };
+    /** Gap step: 1=4px, 2=8px, 3=12px, 4=16px, 5=24px, 6=32px. Same scale
+     *  as Flex. */
+    gap?: "1" | "2" | "3" | "4" | "5" | "6";
+    /** The cells. */
+    children?: ReactNode;
+}
+/**
+ * A simple column grid, 1-3 wide, with the same gap scale as Flex. Pass an
+ * object to `columns` for responsive counts.
+ *
+ * Deliberately narrow: anything more elaborate is a job for CSS grid directly
+ * rather than a prop API that would end up reinventing it.
+ */
+export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Heading.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type SpacingProps } from "./propShared";
+export interface HeadingProps extends SpacingProps, Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"> {
+    /** Heading level to render. Default `h2`. Independent of `size`, so
+     *  document outline stays correct without dictating appearance. */
+    as?: "h1" | "h2" | "h3" | "h4";
+    /** Font size step: 4=18px, 5=20px, 6=24px, 7=28px, 8=35px, 9=60px.
+     *  Shares steps 4–6 with Text, so a Heading and Text can sit on the
+     *  same line and match. */
+    size?: "4" | "5" | "6" | "7" | "8" | "9";
+    /** Semantic colour role. Omit for primary heading colour. */
+    color?: "muted" | "danger";
+    /** Centres the text. There is no `left`/`right` — headings are
+     *  start-aligned unless deliberately centred. */
+    align?: "center";
+    /** The heading text. */
+    children?: ReactNode;
+}
+/**
+ * A section heading. `as` sets the heading level and `size` sets the
+ * appearance, deliberately apart — so a visually small heading can still be
+ * an h2 where the document structure calls for one.
+ *
+ * Shares size steps 4-6 with Text, so a heading and body copy on the same
+ * line align.
+ */
+export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/IconToggle.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+export interface IconToggleOption<V extends string> {
+    value: V;
+    icon: ReactNode;
+    /** Used for aria-label and the hover tooltip. */
+    label: string;
+}
+/**
+ * A segmented icon toggle: every option is always visible in one pill, the
+ * selected one reads as active, clicking any option selects it. Built for the
+ * scene view switcher (planet / orrery / surface), where the old pattern —
+ * showing only the views you are NOT on and swapping icons on click — made
+ * the control's meaning flip under the cursor (owner: both icons should be
+ * "always visible, the selected one is the active one"). Generic over the
+ * option set so other icon-mode switchers can reuse it.
+ */
+export declare function IconToggle<V extends string>({ options, value, onValueChange, className, }: {
+    /** The segments, in display order. Every option is always visible —
+     *  this is a segmented control, not a menu.
+     */
+    options: IconToggleOption<V>[];
+    /** The selected option's value. Fully controlled. */
+    value: V;
+    /** Called with the newly selected value. Not called when the already
+     *  selected option is clicked. */
+    onValueChange(next: V): void;
+    /** Merged onto the group wrapper. */
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Link.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+import { type SpacingProps } from "./propShared";
+export interface LinkProps extends SpacingProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "color"> {
+    /** Render the single child element instead of an `<a>`, merging link
+     *  styling onto it. For wrapping a router's own Link component without
+     *  nesting two anchors. */
+    asChild?: boolean;
+    /** Font size step: 1=12px, 2=14px, 3=16px. Matches Text's first three
+     *  steps so inline links sit flush with surrounding copy. */
+    size?: "1" | "2" | "3";
+    /** Link text. With `asChild`, the single element to style as a link. */
+    children?: ReactNode;
+}
+/**
+ * An inline anchor, styled to sit inside running text without disturbing its
+ * rhythm. Sizes match Text's first three steps.
+ *
+ * Use `asChild` to wrap a router's own link component rather than nesting two
+ * anchors, which is invalid and breaks keyboard navigation.
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/components/Loader.d.ts

@@ -0,0 +1,15 @@
+export interface LoaderProps {
+    /** sm = inline/compact spots. md = default. lg = full-panel takeovers. */
+    size?: "sm" | "md" | "lg";
+    /** Visible caption under the spinner; also doubles as the accessible name. */
+    label?: string;
+    /** Merged onto the wrapper. */
+    className?: string;
+}
+/**
+ * Orbital spinner: a small pulsing "planet" disc at the center of a static
+ * ring, with a "moon" dot traveling the ring. Dependency-free CSS animation
+ * so it composes cleanly wherever a lazy chunk or async panel needs a
+ * space-themed loading state (see SurfaceView's dynamic-import loader).
+ */
+export declare function Loader({ size, label, className }: LoaderProps): import("react").JSX.Element;

package/dist/components/Progress.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Current progress, clamped between 0 and `max`. */
+    value: number;
+    /** The value representing complete. */
+    max?: number;
+}
+/**
+ * A determinate bar for work you can measure — use Loader when you cannot.
+ *
+ * Speaks the same visual language as Slider, because a progress bar and a
+ * slider track are the same object: one you watch, one you drag.
+ */
+export declare function Progress({ value, max, className, style, ...rest }: ProgressProps): React.JSX.Element;

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,32 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+export interface RootProps {
+    /** The selected item's value. Fully controlled. */
+    value: string;
+    /** Called with the newly selected value. */
+    onValueChange: (v: string) => void;
+    /** Disables every item at once. */
+    disabled?: boolean;
+    /** Merged onto the group wrapper. */
+    className?: string;
+    /** The Items. */
+    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 {
+    /** Reported to the group's onValueChange when chosen. */
+    value: string;
+    /** Disables this option only. */
+    disabled?: boolean;
+    /** 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;

package/dist/components/ScrollArea.d.ts

@@ -0,0 +1,14 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The scrollable content. */
+    children?: ReactNode;
+}
+/**
+ * A region that scrolls independently of the page, with the scrollbar styled
+ * to match the dark surface rather than the browser default.
+ *
+ * Needs a bounded height from its parent or its context — without one there
+ * is nothing to scroll against.
+ */
+export declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Select.d.ts

@@ -0,0 +1,70 @@
+import type * as React from "react";
+import { type ReactNode } from "react";
+export interface RootProps {
+    /** 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.
+     */
+    placeholder?: string;
+    /** Ambient motion: the lit arc orbiting the rim. The glass skin itself
+     *  is always applied. Default true. */
+    animated?: boolean;
+}
+/**
+ * The closed state of the Select, showing the selected item's own content.
+ *
+ * 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.
+ */
+export declare function Content({ className, position: _position, animated, children }: ContentProps): React.JSX.Element;
+export interface ItemProps {
+    /** Reported to onValueChange when chosen. */
+    value: string;
+    /** Skipped by keyboard navigation and not selectable. Still contributes
+     *  its width to the trigger's sizing. */
+    disabled?: boolean;
+    /** Shown in the panel and, once selected, in the trigger — 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.
+ */
+export declare function Item({ value, disabled, children }: ItemProps): React.JSX.Element;

package/dist/components/Separator.d.ts

@@ -0,0 +1,11 @@
+import type * as React from "react";
+export interface SeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Length of the rule, 1 (shortest) to 4 (full width of its container). */
+    size?: "1" | "2" | "3" | "4";
+}
+/**
+ * A hairline rule for dividing content within a surface, where a full panel
+ * boundary would be too heavy. Exposed as `role="separator"`, so assistive
+ * technology hears the division too.
+ */
+export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Slider.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+export interface SliderProps {
+    /** Current value, as a single-element array. Fully controlled. */
+    value: number[];
+    /** Called with the new value array as the thumb moves. */
+    onValueChange: (v: number[]) => void;
+    /** Lower bound. */
+    min: number;
+    /** Upper bound. */
+    max: number;
+    /** Smallest increment the thumb can move by. */
+    step: number;
+    /** Blocks interaction and removes it from the tab order. */
+    disabled?: boolean;
+    /** Merged onto the wrapper. */
+    className?: string;
+    /** Accessible name. Required unless a visible label references it,
+     *  since a slider has no text of its own.
+     */
+    "aria-label"?: string;
+}
+/**
+ * A range control for a continuous value.
+ *
+ * Takes and returns an array so multiple thumbs can be added later without a
+ * breaking change, even though it renders one today.
+ */
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLInputElement>>;