@nizivo/react 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,89 @@
+import { RenderProp } from "../contracts/render.js";
+import { ButtonVariant, ControlSize } from "../augment.js";
+import { Align } from "../contracts/state.js";
+import { TooltipSide } from "../tooltip/tooltip.contract.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/icon-button/icon-button.contract.d.ts
+export interface IconButtonState {
+  variant: ButtonVariant;
+  size: ControlSize;
+  pending: boolean;
+  disabled: boolean;
+  /** `true` or `false` for a toggle (`pressed` given); `undefined` for a plain action. */
+  pressed: boolean | undefined;
+}
+/** Where the tooltip goes and when it opens; `tooltip={{ side: 'bottom' }}`. */
+export interface IconButtonTooltipOptions {
+  /** @default 'top' */
+  side?: TooltipSide;
+  /** @default 'center' */
+  align?: Align;
+  /** Hover delay in ms; keyboard focus opens it at once. @default 400 */
+  delay?: number;
+}
+export interface IconButtonProps extends Omit<ComponentPropsWithRef<"button">, "children" | "aria-label" | "aria-pressed"> {
+  /**
+   * The action, in words: the button's accessible name (`aria-label`) and the tooltip text. Required,
+   * because the glyph alone names nothing. Keep it constant for a toggle (`"Bold"`, not "Bold on");
+   * `pressed` carries the state. An `aria-labelledby` you pass names the button instead, and the
+   * tooltip still shows `label`.
+   */
+  label: string;
+  /** The glyph, decorative (`aria-hidden`): 16 px at `sm`, 20 px at `md`, 24 px at `lg`. */
+  icon: ReactNode;
+  /** Figma "Variant". @default 'secondary' */
+  variant?: ButtonVariant;
+  /** 32 / 40 / 48 px square. @default 'md' */
+  size?: ControlSize;
+  /**
+   * Makes it a toggle button: `aria-pressed` is written as given, so `false` is an unpressed toggle.
+   * Leave it out for a plain action.
+   */
+  pressed?: boolean;
+  /**
+   * An action is in flight: the spinner replaces the glyph, and the button stays focusable with
+   * `aria-disabled` and swallows clicks. The spinner turns once per `--nz-duration-spin` and stops
+   * under Reduced motion; an icon-only button has no room for the "Loading…" text Button shows then,
+   * so show the progress in words next to it when the wait is long (for example a status line).
+   * @default false
+   */
+  pending?: boolean;
+  /** Replaces the internal spinner glyph. */
+  pendingIndicator?: ReactNode;
+  /**
+   * Pairs the button with a Tooltip that shows `label` ("Icon-only buttons have an aria-label and a
+   * Tooltip", Figma). The tooltip is a client leaf; `false` renders the button with no client code
+   * running. Pass options to place it. Where visible text already names the action and the page
+   * should ship no JavaScript for the button, use `IconButtonStatic`: under Turbopack and `next dev`
+   * this module's import of the leaf ships the tooltip chain even with `tooltip={false}`.
+   * @default true
+   */
+  tooltip?: boolean | IconButtonTooltipOptions;
+  /**
+   * A keyboard shortcut shown in the tooltip after the label, with `Kbd` (`"mod+b"` is ⌘B on Apple
+   * platforms, Ctrl+B elsewhere). The app implements the shortcut; the button announces it through
+   * `aria-keyshortcuts` (`"Meta+B Control+B"`), with or without the tooltip.
+   */
+  shortcut?: string;
+  /** Composition, for example `render={<Link href="/settings" />}`. */
+  render?: RenderProp<IconButtonState>;
+}
+/**
+ * IconButtonStatic's props: IconButton's, without the tooltip. `aria-label` is always required; an
+ * `aria-labelledby` pointing at visible text may be added, and then names the button, with
+ * `aria-label` as the fallback.
+ */
+export interface IconButtonStaticProps extends Omit<IconButtonProps, "label" | "tooltip" | "shortcut"> {
+  /** The action, in words: the button's accessible name. Required, because the glyph alone names nothing. */
+  "aria-label": string;
+  /** IconButtonStatic has no tooltip and no `label`: name it with `aria-label`. */
+  label?: never;
+  /** IconButtonStatic has no tooltip: use `IconButton` for one. */
+  tooltip?: never;
+  /**
+   * IconButtonStatic has no tooltip to show a shortcut in: pass `aria-keyshortcuts`
+   * (`"Meta+B Control+B"`) to announce one, or use `IconButton` with `shortcut`.
+   */
+  shortcut?: never;
+}
+//#endregion

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

@@ -0,0 +1,5 @@
+import { IconButtonProps } from "./icon-button.contract.js";
+import { ReactElement } from "react";
+//#region src/icon-button/icon-button.d.ts
+export declare function IconButton({ tooltip, shortcut, ...props }: IconButtonProps): ReactElement;
+//#endregion

package/dist/icon-button/icon-button.js

@@ -0,0 +1,21 @@
+import { ariaKeyShortcuts } from "../_internal/keys.js";
+import { iconButtonElement, warnUnnamed } from "./icon-button-static.js";
+import { IconButtonTooltip } from "./icon-button.client.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/icon-button/icon-button.tsx
+function IconButton({ tooltip = true, shortcut, ...props }) {
+	warnUnnamed(props.label, props["aria-labelledby"]);
+	const keyshortcuts = shortcut === void 0 ? void 0 : ariaKeyShortcuts(shortcut);
+	const button = keyshortcuts === void 0 || props["aria-keyshortcuts"] !== void 0 ? props : {
+		...props,
+		"aria-keyshortcuts": keyshortcuts
+	};
+	if (tooltip === false) return iconButtonElement(button);
+	return /* @__PURE__ */ jsx(IconButtonTooltip, {
+		...button,
+		tooltip: tooltip === true ? {} : tooltip,
+		...shortcut === void 0 ? {} : { shortcut }
+	});
+}
+//#endregion
+export { IconButton };

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

@@ -0,0 +1,4 @@
+import { IconButtonProps, IconButtonState, IconButtonStaticProps, IconButtonTooltipOptions } from "./icon-button.contract.js";
+import { IconButton } from "./icon-button.js";
+import { IconButtonStatic } from "./icon-button-static.js";
+export { IconButton, type IconButtonProps, type IconButtonState, IconButtonStatic, type IconButtonStaticProps, type IconButtonTooltipOptions };

package/dist/icon-button/index.js

@@ -0,0 +1,3 @@
+import { IconButtonStatic } from "./icon-button-static.js";
+import { IconButton } from "./icon-button.js";
+export { IconButton, IconButtonStatic };

package/dist/image/image.d.ts

@@ -0,0 +1,28 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/image/image.d.ts
+/** Aspect-ratio presets, emitted as `data-ratio` and cropped with `object-fit` (§14.3). */
+export type ImageRatio = "1/1" | "4/5" | "3/2" | "16/9";
+export interface ImageState {
+  ratio: ImageRatio | undefined;
+  priority: boolean;
+}
+export interface ImageProps extends Omit<ComponentPropsWithRef<"img">, "src" | "alt" | "width" | "height" | "children"> {
+  src: string;
+  /** Required. `alt=""` marks a decorative image. */
+  alt: string;
+  /** Intrinsic width in px. Required with `height`, so the box is reserved before the image loads. */
+  width: number;
+  height: number;
+  ratio?: ImageRatio;
+  /** An above-the-fold image: eager loading and `fetchpriority="high"`. @default false */
+  priority?: boolean;
+  /**
+   * A framework image component, for example `render={<NextImage src={hero} alt="" />}`; it receives
+   * every prop, including `className` and `data-slot`.
+   */
+  render?: RenderProp<ImageState>;
+}
+/** An `<img>` that never writes an inline `style`, so it renders under a strict CSP (§19.3). */
+export declare function Image({ src, alt, width, height, ratio, priority, loading, fetchPriority, decoding, render, className, ...rest }: ImageProps): ReactElement;
+//#endregion

package/dist/image/image.js

@@ -0,0 +1,24 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/image/image.tsx
+/** An `<img>` that never writes an inline `style`, so it renders under a strict CSP (§19.3). */
+function Image({ src, alt, width, height, ratio, priority = false, loading, fetchPriority, decoding, render, className, ...rest }) {
+	return renderElement("img", render, {
+		ratio,
+		priority
+	}, {
+		"data-slot": "image",
+		"data-ratio": ratio,
+		...rest,
+		className: cx("nz-image", className),
+		src,
+		alt,
+		width,
+		height,
+		loading: priority ? "eager" : loading ?? "lazy",
+		fetchPriority: priority ? "high" : fetchPriority,
+		decoding: decoding ?? "async"
+	});
+}
+//#endregion
+export { Image };

package/dist/image/index.d.ts

@@ -0,0 +1,2 @@
+import { Image, ImageProps, ImageRatio, ImageState } from "./image.js";
+export { Image, type ImageProps, type ImageRatio, type ImageState };

package/dist/image/index.js

@@ -0,0 +1 @@
+export { Image } from "./image.js";

package/dist/index.d.ts

@@ -0,0 +1,95 @@
+import { Alert, AlertProps, AlertState, AlertTone } from "./alert/alert.js";
+import { AlertDismiss, AlertDismissLabels, AlertDismissProps } from "./alert/alert-dismiss.client.js";
+import "./alert/index.js";
+import { Badge, BadgeProps, BadgeState, BadgeTone } from "./badge/badge.js";
+import "./badge/index.js";
+import { Button, ButtonLabels, ButtonProps, ButtonState } from "./button/button.js";
+import "./button/index.js";
+import { CardAction, CardActionProps, CardBody, CardBodyProps, CardDescription, CardDescriptionProps, CardElevation, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardPadding, CardRoot, CardRootProps, CardRootState, CardTitle, CardTitleLevel, CardTitleProps, CardTone } from "./card/card.js";
+import { card_parts_d_exports } from "./card/card.parts.js";
+import "./card/index.js";
+import { OpenReason } from "./contracts/details.js";
+import { Checkbox, CheckboxChangeReason, CheckboxCheckedState, CheckboxProps, CheckboxState } from "./checkbox/checkbox.client.js";
+import "./checkbox/index.js";
+import { Container, ContainerProps } from "./container/container.js";
+import "./container/index.js";
+import { Delta, DeltaProps, DeltaState, DeltaTone, DeltaTrend } from "./delta/delta.js";
+import "./delta/index.js";
+import { DialogBodyProps, DialogCloseProps, DialogCloseState, DialogDescriptionProps, DialogFooterProps, DialogLabels, DialogPopupProps, DialogPopupState, DialogRole, DialogRootProps, DialogSize, DialogTitleLevel, DialogTitleProps, DialogTriggerProps, DialogTriggerState } from "./dialog/dialog.contract.js";
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog/dialog.client.js";
+import { dialog_parts_d_exports } from "./dialog/dialog.parts.js";
+import "./dialog/index.js";
+import { EmptyState, EmptyStateProps, EmptyStateTitleLevel } from "./empty-state/empty-state.js";
+import "./empty-state/index.js";
+import { FieldControlProps, FieldIds, FieldProps, FieldState, FieldStatic, FieldStaticProps, FieldStaticWiring, FieldValidateOn, FieldValidityKey } from "./field/field-static.js";
+import { Field } from "./field/field.js";
+import { FieldControl, FieldControlElementProps, FieldControlOptions, FieldValidatable, useFieldControl } from "./field/field-scope.client.js";
+import "./field/index.js";
+import { Fieldset, FieldsetProps, FieldsetState } from "./fieldset/fieldset.js";
+import "./fieldset/index.js";
+import { LayoutGap, Stack, StackProps, StackState } from "./stack/stack.js";
+import { Grid, GridItem, GridItemProps, GridItemState, GridProps, GridResponsiveSpan, GridSpan, GridState } from "./grid/grid.js";
+import "./grid/index.js";
+import { Text, TextProps, TextState, TextTone, TextVariant } from "./text/text.js";
+import { Heading, HeadingLevel, HeadingProps, HeadingState, HeadingVariant } from "./heading/heading.js";
+import "./heading/index.js";
+import { TooltipLabels, TooltipPopupProps, TooltipPopupState, TooltipRootProps, TooltipSide, TooltipTriggerProps, TooltipTriggerState } from "./tooltip/tooltip.contract.js";
+import { IconButtonProps, IconButtonState, IconButtonStaticProps, IconButtonTooltipOptions } from "./icon-button/icon-button.contract.js";
+import { IconButton } from "./icon-button/icon-button.js";
+import { IconButtonStatic } from "./icon-button/icon-button-static.js";
+import "./icon-button/index.js";
+import { Image, ImageProps, ImageRatio, ImageState } from "./image/image.js";
+import "./image/index.js";
+import { Inline, InlineProps, InlineState } from "./inline/inline.js";
+import "./inline/index.js";
+import { InlineError, InlineErrorProps } from "./inline-error/inline-error.js";
+import "./inline-error/index.js";
+import { Input, InputProps, InputState, InputType } from "./input/input.client.js";
+import "./input/index.js";
+import { Kbd, KbdPlatform, KbdProps } from "./kbd/kbd.js";
+import "./kbd/index.js";
+import { MenuCheckboxItemProps, MenuCheckedReason, MenuGroupLabelProps, MenuGroupProps, MenuItemProps, MenuItemState, MenuItemTone, MenuLabels, MenuPopupProps, MenuPopupState, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, MenuTriggerState } from "./menu/menu.contract.js";
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from "./menu/menu.client.js";
+import { menu_parts_d_exports } from "./menu/menu.parts.js";
+import "./menu/index.js";
+import { Meter, MeterProps, MeterState, MeterTone } from "./meter/meter.js";
+import "./meter/index.js";
+import { NativeSelect, NativeSelectProps, NativeSelectState } from "./native-select/native-select.js";
+import "./native-select/index.js";
+import { ProgressBar, ProgressBarProps, ProgressBarState, ProgressBarTone } from "./progress-bar/progress-bar.js";
+import "./progress-bar/index.js";
+import { ProgressRing, ProgressRingProps, ProgressRingSize, ProgressRingState, ProgressRingTone } from "./progress-ring/progress-ring.js";
+import "./progress-ring/index.js";
+import { RadioGroup, RadioGroupChangeReason, RadioGroupProps } from "./radio-group/radio-group.js";
+import { Radio, RadioProps, RadioState } from "./radio-group/radio-group.client.js";
+import "./radio-group/index.js";
+import { SegmentedControlChangeReason, SegmentedControlItem, SegmentedControlItemProps, SegmentedControlItemState, SegmentedControlRoot, SegmentedControlRootProps, SegmentedControlRootState } from "./segmented-control/segmented-control.client.js";
+import { segmented_control_parts_d_exports } from "./segmented-control/segmented-control.parts.js";
+import "./segmented-control/index.js";
+import { SelectGroupLabelProps, SelectGroupProps, SelectItemProps, SelectItemState, SelectLabels, SelectPopupProps, SelectPopupState, SelectRootProps, SelectRootState, SelectSeparatorProps, SelectTriggerProps, SelectTriggerState, SelectValueProps, SelectValueReason, SelectValueState } from "./select/select.contract.js";
+import { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./select/select.client.js";
+import { select_parts_d_exports } from "./select/select.parts.js";
+import "./select/index.js";
+import { Separator, SeparatorProps, SeparatorState } from "./separator/separator.js";
+import "./separator/index.js";
+import { Skeleton, SkeletonProps, SkeletonShape, SkeletonState } from "./skeleton/skeleton.js";
+import "./skeleton/index.js";
+import "./stack/index.js";
+import { Switch, SwitchChangeReason, SwitchProps, SwitchState } from "./switch/switch.client.js";
+import "./switch/index.js";
+import { TabNavLink, TabNavLinkProps, TabNavLinkState, TabNavRoot, TabNavRootProps } from "./tab-nav/tab-nav.js";
+import { tab_nav_parts_d_exports } from "./tab-nav/tab-nav.parts.js";
+import "./tab-nav/index.js";
+import { TabsActivationMode, TabsListProps, TabsListState, TabsPanelProps, TabsPanelState, TabsRootProps, TabsRootState, TabsTabProps, TabsTabState, TabsValueReason } from "./tabs/tabs.contract.js";
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs/tabs.client.js";
+import { tabs_parts_d_exports } from "./tabs/tabs.parts.js";
+import "./tabs/index.js";
+import "./text/index.js";
+import { Textarea, TextareaProps } from "./textarea/textarea.client.js";
+import "./textarea/index.js";
+import { ThemeScript, ThemeScriptProps, themeScript } from "./theme-script/theme-script.js";
+import "./theme-script/index.js";
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip/tooltip.client.js";
+import { tooltip_parts_d_exports } from "./tooltip/tooltip.parts.js";
+import "./tooltip/index.js";
+export { Alert, AlertDismiss, type AlertDismissLabels, type AlertDismissProps, type AlertProps, type AlertState, type AlertTone, Badge, type BadgeProps, type BadgeState, type BadgeTone, Button, type ButtonLabels, type ButtonProps, type ButtonState, card_parts_d_exports as Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, type CardElevation, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, CardRoot, type CardRootProps, type CardRootState, CardTitle, type CardTitleLevel, type CardTitleProps, type CardTone, Checkbox, type CheckboxChangeReason, type CheckboxCheckedState, type CheckboxProps, type CheckboxState, Container, type ContainerProps, Delta, type DeltaProps, type DeltaState, type DeltaTone, type DeltaTrend, dialog_parts_d_exports as Dialog, DialogBody, type DialogBodyProps, DialogClose, type DialogCloseProps, type DialogCloseState, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, type DialogLabels, DialogPopup, type DialogPopupProps, type DialogPopupState, type DialogRole, DialogRoot, type DialogRootProps, type DialogSize, DialogTitle, type DialogTitleLevel, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, type DialogTriggerState, EmptyState, type EmptyStateProps, type EmptyStateTitleLevel, Field, type FieldControl, type FieldControlElementProps, type FieldControlOptions, type FieldControlProps, type FieldIds, type FieldProps, type FieldState, FieldStatic, type FieldStaticProps, type FieldStaticWiring, type FieldValidatable, type FieldValidateOn, type FieldValidityKey, Fieldset, type FieldsetProps, type FieldsetState, Grid, GridItem, type GridItemProps, type GridItemState, type GridProps, type GridResponsiveSpan, type GridSpan, type GridState, Heading, type HeadingLevel, type HeadingProps, type HeadingState, type HeadingVariant, IconButton, type IconButtonProps, type IconButtonState, IconButtonStatic, type IconButtonStaticProps, type IconButtonTooltipOptions, Image, type ImageProps, type ImageRatio, type ImageState, Inline, InlineError, type InlineErrorProps, type InlineProps, type InlineState, Input, type InputProps, type InputState, type InputType, Kbd, type KbdPlatform, type KbdProps, type LayoutGap, menu_parts_d_exports as Menu, MenuCheckboxItem, type MenuCheckboxItemProps, type MenuCheckedReason, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, MenuItem, type MenuItemProps, type MenuItemState, type MenuItemTone, type MenuLabels, MenuPopup, type MenuPopupProps, type MenuPopupState, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuRoot, type MenuRootProps, MenuSeparator, type MenuSeparatorProps, type MenuSide, MenuTrigger, type MenuTriggerProps, type MenuTriggerState, Meter, type MeterProps, type MeterState, type MeterTone, NativeSelect, type NativeSelectProps, type NativeSelectState, type OpenReason, ProgressBar, type ProgressBarProps, type ProgressBarState, type ProgressBarTone, ProgressRing, type ProgressRingProps, type ProgressRingSize, type ProgressRingState, type ProgressRingTone, Radio, RadioGroup, type RadioGroupChangeReason, type RadioGroupProps, type RadioProps, type RadioState, segmented_control_parts_d_exports as SegmentedControl, type SegmentedControlChangeReason, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlItemState, SegmentedControlRoot, type SegmentedControlRootProps, type SegmentedControlRootState, select_parts_d_exports as Select, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, type SelectItemState, type SelectLabels, SelectPopup, type SelectPopupProps, type SelectPopupState, SelectRoot, type SelectRootProps, type SelectRootState, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerState, SelectValue, type SelectValueProps, type SelectValueReason, type SelectValueState, Separator, type SeparatorProps, type SeparatorState, Skeleton, type SkeletonProps, type SkeletonShape, type SkeletonState, Stack, type StackProps, type StackState, Switch, type SwitchChangeReason, type SwitchProps, type SwitchState, tab_nav_parts_d_exports as TabNav, TabNavLink, type TabNavLinkProps, type TabNavLinkState, TabNavRoot, type TabNavRootProps, tabs_parts_d_exports as Tabs, type TabsActivationMode, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, TabsRoot, type TabsRootProps, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsValueReason, Text, type TextProps, type TextState, type TextTone, type TextVariant, Textarea, type TextareaProps, ThemeScript, type ThemeScriptProps, tooltip_parts_d_exports as Tooltip, type TooltipLabels, TooltipPopup, type TooltipPopupProps, type TooltipPopupState, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, type TooltipTriggerState, themeScript, useFieldControl };

package/dist/index.js

@@ -0,0 +1,51 @@
+import { Alert } from "./alert/alert.js";
+import { AlertDismiss } from "./alert/alert-dismiss.client.js";
+import { Badge } from "./badge/badge.js";
+import { Button } from "./button/button.js";
+import { CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle } from "./card/card.js";
+import { card_parts_exports } from "./card/card.parts.js";
+import { InlineError } from "./inline-error/inline-error.js";
+import { FieldStatic } from "./field/field-static.js";
+import { useFieldControl } from "./field/field-scope.client.js";
+import { Checkbox } from "./checkbox/checkbox.client.js";
+import { Container } from "./container/container.js";
+import { Delta } from "./delta/delta.js";
+import { DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger } from "./dialog/dialog.client.js";
+import { dialog_parts_exports } from "./dialog/dialog.parts.js";
+import { EmptyState } from "./empty-state/empty-state.js";
+import { Field } from "./field/field.js";
+import { Fieldset } from "./fieldset/fieldset.js";
+import { Grid, GridItem } from "./grid/grid.js";
+import { Heading } from "./heading/heading.js";
+import { Kbd } from "./kbd/kbd.js";
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip/tooltip.client.js";
+import { IconButtonStatic } from "./icon-button/icon-button-static.js";
+import { IconButton } from "./icon-button/icon-button.js";
+import { Image } from "./image/image.js";
+import { Inline } from "./inline/inline.js";
+import { Input } from "./input/input.client.js";
+import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger } from "./menu/menu.client.js";
+import { menu_parts_exports } from "./menu/menu.parts.js";
+import { Meter } from "./meter/meter.js";
+import { NativeSelect } from "./native-select/native-select.js";
+import { ProgressBar } from "./progress-bar/progress-bar.js";
+import { ProgressRing } from "./progress-ring/progress-ring.js";
+import { Radio } from "./radio-group/radio-group.client.js";
+import { RadioGroup } from "./radio-group/radio-group.js";
+import { SegmentedControlItem, SegmentedControlRoot } from "./segmented-control/segmented-control.client.js";
+import { segmented_control_parts_exports } from "./segmented-control/segmented-control.parts.js";
+import { SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue } from "./select/select.client.js";
+import { select_parts_exports } from "./select/select.parts.js";
+import { Separator } from "./separator/separator.js";
+import { Skeleton } from "./skeleton/skeleton.js";
+import { Stack } from "./stack/stack.js";
+import { Switch } from "./switch/switch.client.js";
+import { TabNavLink, TabNavRoot } from "./tab-nav/tab-nav.js";
+import { tab_nav_parts_exports } from "./tab-nav/tab-nav.parts.js";
+import { TabsList, TabsPanel, TabsRoot, TabsTab } from "./tabs/tabs.client.js";
+import { tabs_parts_exports } from "./tabs/tabs.parts.js";
+import { Text } from "./text/text.js";
+import { Textarea } from "./textarea/textarea.client.js";
+import { ThemeScript, themeScript } from "./theme-script/theme-script.js";
+import { tooltip_parts_exports } from "./tooltip/tooltip.parts.js";
+export { Alert, AlertDismiss, Badge, Button, card_parts_exports as Card, CardAction, CardBody, CardDescription, CardFooter, CardHeader, CardRoot, CardTitle, Checkbox, Container, Delta, dialog_parts_exports as Dialog, DialogBody, DialogClose, DialogDescription, DialogFooter, DialogPopup, DialogRoot, DialogTitle, DialogTrigger, EmptyState, Field, FieldStatic, Fieldset, Grid, GridItem, Heading, IconButton, IconButtonStatic, Image, Inline, InlineError, Input, Kbd, menu_parts_exports as Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuRoot, MenuSeparator, MenuTrigger, Meter, NativeSelect, ProgressBar, ProgressRing, Radio, RadioGroup, segmented_control_parts_exports as SegmentedControl, SegmentedControlItem, SegmentedControlRoot, select_parts_exports as Select, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Stack, Switch, tab_nav_parts_exports as TabNav, TabNavLink, TabNavRoot, tabs_parts_exports as Tabs, TabsList, TabsPanel, TabsRoot, TabsTab, Text, Textarea, ThemeScript, tooltip_parts_exports as Tooltip, TooltipPopup, TooltipRoot, TooltipTrigger, themeScript, useFieldControl };

package/dist/inline/index.d.ts

@@ -0,0 +1,2 @@
+import { Inline, InlineProps, InlineState } from "./inline.js";
+export { Inline, type InlineProps, type InlineState };

package/dist/inline/index.js

@@ -0,0 +1 @@
+export { Inline } from "./inline.js";

package/dist/inline/inline.d.ts

@@ -0,0 +1,16 @@
+import { RenderProp } from "../contracts/render.js";
+import { LayoutGap } from "../stack/stack.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/inline/inline.d.ts
+export interface InlineState {
+  gap: LayoutGap | undefined;
+}
+export interface InlineProps extends ComponentPropsWithRef<"div"> {
+  /** Space between children, on both axes when they wrap. Absent, there is none. */
+  gap?: LayoutGap;
+  /** Another element, for example `render={<ul />}` for a list. */
+  render?: RenderProp<InlineState>;
+}
+/** Children in a row, centred on the cross axis, wrapping onto new lines when they do not fit. */
+export declare function Inline({ gap, render, className, ...rest }: InlineProps): ReactElement;
+//#endregion

package/dist/inline/inline.js

@@ -0,0 +1,14 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/inline/inline.tsx
+/** Children in a row, centred on the cross axis, wrapping onto new lines when they do not fit. */
+function Inline({ gap, render, className, ...rest }) {
+	return renderElement("div", render, { gap }, {
+		"data-slot": "inline",
+		"data-gap": gap,
+		...rest,
+		className: cx("nz-inline", className)
+	});
+}
+//#endregion
+export { Inline };

package/dist/inline-error/index.d.ts

@@ -0,0 +1,2 @@
+import { InlineError, InlineErrorProps } from "./inline-error.js";
+export { InlineError, type InlineErrorProps };

package/dist/inline-error/index.js

@@ -0,0 +1 @@
+export { InlineError } from "./inline-error.js";

package/dist/inline-error/inline-error.d.ts

@@ -0,0 +1,17 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/inline-error/inline-error.d.ts
+export interface InlineErrorProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * The error mark, decorative: the message carries the meaning, and the mark keeps the error from
+   * being colour-only (§15.1). Defaults to the internal `circle-x` glyph; pass your icon set's glyph
+   * to replace it.
+   */
+  icon?: ReactNode;
+  /** A recovery control after the message, for example `<Button size="sm">Retry</Button>` (§16.5). */
+  action?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+/** One error look for fields and data widgets: icon + text, never colour alone. Not a live region. */
+export declare function InlineError({ icon, action, render, className, children, ...rest }: InlineErrorProps): ReactElement;
+//#endregion

package/dist/inline-error/inline-error.js

@@ -0,0 +1,33 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { CircleXGlyph } from "../_internal/glyphs.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/inline-error/inline-error.tsx
+/** One error look for fields and data widgets: icon + text, never colour alone. Not a live region. */
+function InlineError({ icon, action, render, className, children, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "inline-error",
+		...rest,
+		className: cx("nz-inline-error", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-inline-error-icon",
+				"data-slot": "inline-error-icon",
+				"aria-hidden": "true",
+				children: icon ?? /* @__PURE__ */ jsx(CircleXGlyph, {})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-inline-error-message",
+				"data-slot": "inline-error-message",
+				children
+			}),
+			action != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-inline-error-action",
+				"data-slot": "inline-error-action",
+				children: action
+			})
+		] })
+	});
+}
+//#endregion
+export { InlineError };

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+import { Input, InputProps, InputState, InputType } from "./input.client.js";
+export { Input, type InputProps, type InputState, type InputType };

package/dist/input/index.js

@@ -0,0 +1 @@
+export { Input } from "./input.client.js";

package/dist/input/input.client.d.ts

@@ -0,0 +1,39 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+//#region src/input/input.client.d.ts
+/** Text-like input types; the others (checkbox, file, date, …) are other components. */
+export type InputType = "text" | "email" | "search" | "password" | "number" | "tel" | "url";
+export interface InputState {
+  size: ControlSize;
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+}
+export interface InputProps extends Omit<ComponentPropsWithRef<"input">, "type" | "size" | "prefix" | "children"> {
+  /** @default 'text' */
+  type?: InputType;
+  /** 32 / 40 / 48 px, as Button and Select. @default 'md' */
+  size?: ControlSize;
+  /**
+   * An error message is presented for this input (§8.3). Inside a Field, the Field sets it; an
+   * explicit value here wins.
+   */
+  invalid?: boolean;
+  /** Decorative icon before the value (`aria-hidden`). */
+  leadingIcon?: ReactNode;
+  /** Decorative icon after the value (`aria-hidden`). */
+  trailingIcon?: ReactNode;
+  /** Text before the value, such as a currency sign; joined to the input's `aria-describedby`. */
+  prefix?: ReactNode;
+  /** Text after the value, such as a unit; joined to the input's `aria-describedby`. */
+  suffix?: ReactNode;
+  /**
+   * Composition of the root, the bordered box around the native `<input>`. `className` and `style`
+   * go on the root too; every other prop, `ref` included, goes on the `<input>`.
+   */
+  render?: RenderProp<InputState>;
+}
+export declare function Input({ type, size, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, leadingIcon, trailingIcon, prefix, suffix, render, className, style, ...rest }: InputProps): JSX.Element;
+//#endregion

package/dist/input/input.client.js

@@ -0,0 +1,82 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { stateAttrs } from "../contracts/state.js";
+import { joinIds } from "../_internal/field.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/input/input.client.tsx
+function Input({ type = "text", size = "md", id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, leadingIcon, trailingIcon, prefix, suffix, render, className, style, ...rest }) {
+	const affix = useId();
+	const prefixId = prefix == null ? void 0 : `${affix}-prefix`;
+	const suffixId = suffix == null ? void 0 : `${affix}-suffix`;
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid: invalid ?? (ariaInvalid === true || ariaInvalid === "true" ? true : void 0),
+		"aria-describedby": joinIds(describedBy, prefixId, suffixId)
+	});
+	const state = {
+		size,
+		invalid: field.invalid,
+		disabled: field.disabled,
+		readOnly: field.readOnly
+	};
+	return renderElement("span", render, state, {
+		"data-slot": "input",
+		"data-size": size,
+		...stateAttrs({
+			invalid: state.invalid,
+			disabled: state.disabled,
+			readOnly: state.readOnly
+		}),
+		className: cx("nz-input", className),
+		style,
+		onMouseDown: focusInput,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			leadingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-input-icon",
+				"data-slot": "input-icon",
+				"aria-hidden": "true",
+				children: leadingIcon
+			}),
+			prefix != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-input-prefix",
+				"data-slot": "input-prefix",
+				id: prefixId,
+				children: prefix
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(field.controlProps, rest),
+				type,
+				className: "nz-input-control",
+				"data-slot": "input-control"
+			}),
+			suffix != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-input-suffix",
+				"data-slot": "input-suffix",
+				id: suffixId,
+				children: suffix
+			}),
+			trailingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-input-icon",
+				"data-slot": "input-icon",
+				"aria-hidden": "true",
+				children: trailingIcon
+			})
+		] })
+	});
+}
+function focusInput(event) {
+	const input = event.currentTarget.querySelector(":scope > .nz-input-control");
+	if (input === null || event.target === input || input.disabled) return;
+	event.preventDefault();
+	input.focus();
+}
+//#endregion
+export { Input };

package/dist/kbd/index.d.ts

@@ -0,0 +1,2 @@
+import { Kbd, KbdPlatform, KbdProps } from "./kbd.js";
+export { Kbd, type KbdPlatform, type KbdProps };

package/dist/kbd/index.js

@@ -0,0 +1 @@
+export { Kbd } from "./kbd.js";

package/dist/kbd/kbd.d.ts

@@ -0,0 +1,19 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/kbd/kbd.d.ts
+/** The `data-platform` values of the glyph spans; they match `data-nz-platform` (§8.3). */
+export type KbdPlatform = "apple" | "other";
+export interface KbdProps extends ComponentPropsWithRef<"kbd"> {
+  /**
+   * A shortcut such as `"mod+k"` or `"mod+shift+d"`, drawn for both platforms (`⌘⇧D` and
+   * `Ctrl+Shift+D`); CSS shows the one `data-nz-platform` names, and `other` when no ancestor sets it.
+   * `mod` is ⌘ on Apple platforms and Ctrl elsewhere; the plus key is `plus` (`"mod+plus"`, or
+   * `"mod++"`). Replaces `children`.
+   */
+  keys?: string;
+  /** Literal key text, for example `<Kbd>esc</Kbd>` or `<Kbd>↑↓</Kbd>`. */
+  children?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+export declare function Kbd({ keys, render, className, children, ...rest }: KbdProps): ReactElement;
+//#endregion