@inkorange/space-ui 1.0.4 → 1.1.0

package/README.md

@@ -3,8 +3,8 @@
 <!-- badges:start -->
 
 [![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)
+![coverage](https://img.shields.io/badge/coverage-82%25-green)
+![minzip](https://img.shields.io/badge/minzip-21.7%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)
 
@@ -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

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/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/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 {};