panelize 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1815 @@
+// Generated by dts-bundle-generator v9.5.1
+
+import { ComponentPropsWithRef, ComponentPropsWithoutRef, ReactNode } from 'react';
+
+export declare const panelVariants: readonly [
+	"muted",
+	"base",
+	"highlighted"
+];
+export type PanelVariant = (typeof panelVariants)[number];
+/** Type roles on a panel surface. Brand and status chromas are global, not per variant. */
+export declare const panelTextRoles: readonly [
+	"base",
+	"muted",
+	"highlighted"
+];
+export type PanelTextRole = (typeof panelTextRoles)[number];
+export type PanelTextColors = Record<PanelTextRole, string>;
+export type PanelColors = {
+	background: string;
+	text: PanelTextColors;
+	border: string;
+};
+export type AppColors = {
+	background?: string;
+	text?: string;
+};
+type ThemeColors = Record<PanelVariant, PanelColors> & {
+	app?: AppColors;
+};
+/** Runtime / authoring schemes. Surfaces stay `muted` / `base` / `highlighted`. */
+export declare const colorSchemeTokens: readonly [
+	"dark",
+	"light"
+];
+export type ColorScheme = (typeof colorSchemeTokens)[number];
+export type ColorSchemes = Record<ColorScheme, ThemeColors>;
+/** App brand chromas. Use on `Text` as `color="primary"`. Not panel variants. */
+export declare const brandTokens: readonly [
+	"primary",
+	"secondary",
+	"accent"
+];
+export type BrandToken = (typeof brandTokens)[number];
+/** Meaning chromas. Shared across schemes. Not brand. No `subtle` — mix into `--panelize-bg`. */
+export declare const statusTokens: readonly [
+	"danger",
+	"warning",
+	"success",
+	"info"
+];
+export type StatusToken = (typeof statusTokens)[number];
+export declare const brandStateTokens: readonly [
+	"base",
+	"hover",
+	"active"
+];
+export type BrandStateToken = (typeof brandStateTokens)[number];
+/** Resolved brand slot. `color="primary"` uses `base`. */
+export type BrandState = Record<BrandStateToken, string>;
+/** Same `{ base, hover, active }` as brand. Status uses this too. */
+export type ChromaState = BrandState;
+export type BrandColors = Record<BrandToken, ChromaState>;
+/** Hex (`#ff9f2e`) expands to base/hover/active, or set those keys. */
+export type BrandSlotOverride = string | Partial<BrandState>;
+export type BrandOverrides = Partial<Record<BrandToken, BrandSlotOverride>>;
+export type StatusColors = Record<StatusToken, ChromaState>;
+export type StatusOverrides = Partial<Record<StatusToken, BrandSlotOverride>>;
+/** Brand (`primary`), status (`danger`), or raw CSS. Token → that slot’s `.base`. */
+export type ColorValue = BrandToken | StatusToken | (string & {});
+export declare const spaceTokens: readonly [
+	"none",
+	"extraSmall",
+	"small",
+	"base",
+	"large",
+	"extraLarge"
+];
+export type SpaceToken = (typeof spaceTokens)[number];
+export type SpaceScale = Record<SpaceToken, string>;
+/** A space token (`small`), `auto`, or a raw CSS length (`1rem`, `100%`). */
+export type SpaceValue = SpaceToken | (string & {});
+type SpacingDefaults = {
+	padding: SpaceToken;
+	margin: SpaceToken;
+};
+type LayoutDefaults = SpacingDefaults & {
+	borderWidth: SpaceToken;
+	borderRadius: SpaceToken;
+};
+type RowDefaults = LayoutDefaults & {
+	height: SpaceValue;
+};
+type ColDefaults = LayoutDefaults & {
+	width: SpaceValue;
+};
+export declare const alignValues: readonly [
+	"start",
+	"end",
+	"center",
+	"stretch",
+	"baseline",
+	"space-between",
+	"space-around",
+	"space-evenly"
+];
+export type AlignValue = (typeof alignValues)[number];
+export declare const scrollValues: readonly [
+	"vertical",
+	"horizontal",
+	"both"
+];
+export type ScrollValue = (typeof scrollValues)[number];
+type FlexDefaults = SpacingDefaults & {
+	gap: SpaceToken;
+	alignX: AlignValue;
+	alignY: AlignValue;
+};
+type PanelsDefaults = SpacingDefaults & {
+	gap: SpaceToken;
+};
+type ThemeDefaults = {
+	panel: LayoutDefaults;
+	/** Spacing and gap. Align is instance-only because `Panels` is row or column. */
+	panels: PanelsDefaults;
+	rows: FlexDefaults;
+	row: RowDefaults;
+	cols: FlexDefaults;
+	col: ColDefaults;
+	/** Gap and item align (`stretch` / `stretch`). Track counts are instance-only (`numCols` / `numRows`). */
+	grid: FlexDefaults;
+	cell: LayoutDefaults;
+	div: LayoutDefaults;
+	text: TextDefaults;
+	heading: HeadingDefaults;
+	textLink: TextLinkDefaults;
+	button: ButtonDefaults;
+	chip: ChipDefaults;
+	input: InputDefaults;
+	textarea: TextareaDefaults;
+	select: SelectDefaults;
+	switch: SwitchDefaults;
+	checkbox: CheckboxDefaults;
+	radio: RadioDefaults;
+};
+export declare const breakpointTokens: readonly [
+	"sm",
+	"md",
+	"lg"
+];
+export type BreakpointToken = (typeof breakpointTokens)[number];
+export type BreakpointScale = Record<BreakpointToken, string>;
+/** A breakpoint token (`sm`) or a raw CSS length (`40rem`). */
+export type StackValue = BreakpointToken | (string & {});
+export declare const fontSizeTokens: readonly [
+	"extraSmall",
+	"small",
+	"base",
+	"large",
+	"extraLarge"
+];
+export type FontSizeToken = (typeof fontSizeTokens)[number];
+export type FontSizeScale = Record<FontSizeToken, string>;
+/** A font size token (`small`) or a raw CSS size (`1.125rem`). */
+export type FontSizeValue = FontSizeToken | (string & {});
+export declare const fontWeightTokens: readonly [
+	"thin",
+	"base",
+	"bold",
+	"heavy"
+];
+export type FontWeightToken = (typeof fontWeightTokens)[number];
+export type FontWeightScale = Record<FontWeightToken, string>;
+/** A font weight token (`thin` / `base` / `bold` / `heavy`) or a raw CSS weight (`600`). */
+export type FontWeightValue = FontWeightToken | (string & {});
+export declare const fontFamilyTokens: readonly [
+	"base",
+	"display",
+	"mono"
+];
+export type FontFamilyToken = (typeof fontFamilyTokens)[number];
+export type FontFamilyScale = Record<FontFamilyToken, string>;
+type TextDefaults = {
+	size: FontSizeToken;
+	/** Default `base` (`400`) so `Text` does not inherit a parent’s weight. */
+	weight: FontWeightToken;
+};
+export declare const headingLevels: readonly [
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+];
+export type HeadingLevel = (typeof headingLevels)[number];
+/** UA-like `h1`–`h6` sizes (`2rem` … `0.67rem`). Instance `size` overrides. */
+export type HeadingSizeScale = Record<HeadingLevel, string>;
+export type HeadingDefaults = {
+	size: HeadingSizeScale;
+	/** Default `bold` (browser headings). */
+	weight: FontWeightToken;
+	/** Default `display`. Instance `family` overrides. */
+	family: FontFamilyToken;
+};
+/** `hover: 'primary'` with rest `primary` uses that slot’s `.hover`. `inherit` = panel `text.base`. */
+export type TextLinkHoverValue = ColorValue | "inherit";
+export type TextLinkDefaults = {
+	/** Rest color. Default `primary` (that slot’s `.base`). */
+	color: ColorValue;
+	/** Hover color. Default `primary` (that slot’s `.hover` when rest is also `primary`). */
+	hover: TextLinkHoverValue;
+	/** Underline on `:hover`. Default `false`. Rest `underlined` still stays underlined on hover. */
+	hoverUnderline: boolean;
+};
+/**
+ * Filled hover paints. Instance `color` owns chroma (`.hover` / `.active`).
+ * `background` is only a raw CSS override for the filled hover fill.
+ */
+export type ButtonHoverDefaults = {
+	/** Filled hover/active label. Brand/status token → that slot’s `.base`. Default `palette.black`. */
+	color: ColorValue;
+	/** Omit = instance slot `.hover`. Raw CSS replaces filled hover/active fill. Brand/status tokens are ignored. */
+	background?: string;
+};
+/** Badge chrome. Fill is `color-mix` of chroma into `--panelize-bg` at `tint`. */
+export type ChipDefaults = {
+	/** Brand or status slot. Default `primary`. */
+	color: ColorValue;
+	/** Default `extraSmall` (`0.75rem`). */
+	size: FontSizeValue;
+	weight: FontWeightToken;
+	/** Share of chroma in `color-mix` against the panel background. Default `12%`. */
+	tint: string;
+	paddingX: SpaceValue;
+	paddingY: SpaceValue;
+	gap: SpaceValue;
+	/** Capsule. Default `999px`. */
+	borderRadius: SpaceValue;
+	/** Default `true`. */
+	uppercase: boolean;
+};
+/** Chrome for `Input` / `NumberInput`. Rest is panel vars; `color` is focus chroma (not ink). */
+export type InputDefaults = {
+	/** Brand or status slot for focus border, glow, and caret. Default `primary`. */
+	color: ColorValue;
+	size: FontSizeToken;
+	/** Default `base` (`400`). */
+	weight: FontWeightToken;
+	paddingX: SpaceValue;
+	paddingY: SpaceValue;
+	borderWidth: SpaceToken;
+	borderRadius: SpaceToken;
+};
+/** Chrome for `Textarea`. Field keys inherit merged `defaults.input` unless overridden here. */
+export type TextareaDefaults = InputDefaults & {
+	/** Vertical resize handle. Default `false`. */
+	resize: boolean;
+	/** Native `rows`. Default `3`. */
+	rows: number;
+};
+/** Chrome for `Select`. Field keys inherit merged `defaults.input` unless overridden here. */
+export type SelectDefaults = InputDefaults & {
+	/** Menu max height (CSS). Default `16rem`. */
+	listMaxHeight: string;
+	/** Gap between trigger and menu. Default `extraSmall`. */
+	listOffset: SpaceToken;
+	/** Option row padding X. Default `base`. */
+	optionPaddingX: SpaceToken;
+	/** Option row padding Y. Default `extraSmall`. */
+	optionPaddingY: SpaceToken;
+	/** Menu stacking order. Default `1100`. */
+	listZIndex: number;
+	/** Menu drop shadow. Default `0 8px 24px rgb(0 0 0 / 35%)`. */
+	listShadow: string;
+};
+/** Chrome for `Switch`. Track height is type size × `lineHeight`. */
+export type SwitchDefaults = {
+	/** Brand or status slot for the on track. Default `primary`. */
+	color: ColorValue;
+	/** Type size the track is built for. Default `base`. */
+	size: FontSizeToken;
+	/** Thumb fill. Default `palette.white`. */
+	ink: string;
+	/** Track width as a multiple of the type size. Default `2`. */
+	widthFactor: number;
+	/** Inset on every edge as a multiple of the type size. Default `0.2`. Thumb is height − 2×this. */
+	insetFactor: number;
+	/** Track radius. Default `999px` (capsule). Instance `borderRadius` overrides. Thumb follows `min(this, 50%)`. */
+	borderRadius: SpaceValue;
+};
+/** Chrome for `Checkbox`. Box is the type size (`1em`), square. */
+export type CheckboxDefaults = {
+	/** Brand or status slot for the on fill. Default `primary`. */
+	color: ColorValue;
+	/** Type size the box is built for. Default `base`. */
+	size: FontSizeToken;
+	/** Check / dash on the on fill. Default `palette.black` (same as filled `Button`). */
+	ink: string;
+	/** Rest stroke. Default `extraSmall` (`1px`). */
+	borderWidth: SpaceToken;
+	/** Box radius. Default `small`. */
+	borderRadius: SpaceValue;
+};
+/** Chrome for `Radio`. Box is the type size (`1em`), circle. */
+export type RadioDefaults = {
+	/** Brand or status slot for the checked ring and inner disc. Default `primary`. */
+	color: ColorValue;
+	/** Type size the box is built for. Default `base`. */
+	size: FontSizeToken;
+	/** Rest stroke. Default `extraSmall` (`1px`). */
+	borderWidth: SpaceToken;
+	/** Box radius. Default `999px` (circle). Instance `borderRadius` overrides. Inner disc follows `min(this, 50%)`. */
+	borderRadius: SpaceValue;
+	/** Gap from the inner edge of the ring to the disc, as a multiple of the type size. Default `0.22`. */
+	insetFactor: number;
+};
+/** Chrome for `Button`. `color` is the chroma slot; `ink` is the filled rest label. */
+export type ButtonDefaults = {
+	/** Brand or status slot. Default `primary`. */
+	color: ColorValue;
+	size: FontSizeToken;
+	weight: FontWeightToken;
+	/** Filled rest label. Outline rest uses the chroma slot instead. Default `palette.black`. */
+	ink: string;
+	hover: ButtonHoverDefaults;
+	paddingX: SpaceValue;
+	paddingY: SpaceValue;
+	/** Flex gap between children (icon + label). Default `extraSmall`. */
+	gap: SpaceValue;
+	borderWidth: SpaceValue;
+	borderRadius: SpaceValue;
+};
+export type PanelizeTheme = {
+	/** Active scheme. Default `dark`. Set on `PanelizeProvider`, not in `createPanelizeTheme`. */
+	mode: ColorScheme;
+	/** Both scheme maps. Input is `createPanelizeTheme({ colors: { dark, light } })`. */
+	colorSchemes: ColorSchemes;
+	/**
+	 * Active surfaces only (`muted` / `base` / `highlighted` / `app`). Not `{ dark, light }`.
+	 * `Panel` / `usePanelizeTheme().colors` read this. Both maps are `colorSchemes`.
+	 */
+	colors: ThemeColors;
+	/** Global brand chromas. Shared across schemes. `Text` `color="primary"` reads `brand.primary.base`. */
+	brand: BrandColors;
+	/** Meaning chromas. Shared across schemes. `Text` `color="danger"` reads `status.danger.base`. */
+	status: StatusColors;
+	space: SpaceScale;
+	borderWidths: SpaceScale;
+	radii: SpaceScale;
+	breakpoints: BreakpointScale;
+	fontSizes: FontSizeScale;
+	fontWeights: FontWeightScale;
+	fontFamilies: FontFamilyScale;
+	/**
+	 * Unitless `line-height` on `Text` (`font-size × this`). Default `1.2`.
+	 * `Checkbox` / `Radio` use the type size (`1em`), not this. `Switch` track height is type × this.
+	 */
+	lineHeight: number | string;
+	defaults: ThemeDefaults;
+};
+type DeepPartial<T> = {
+	[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+/** `createPanelizeTheme` input. `colors.dark` / `colors.light` are scheme maps. `mode` is a provider prop. */
+export type PanelizeThemeOverrides = Omit<DeepPartial<PanelizeTheme>, "brand" | "status" | "colors" | "colorSchemes" | "mode"> & {
+	brand?: BrandOverrides;
+	status?: StatusOverrides;
+	/**
+	 * Scheme maps (`dark` / `light`), each with `muted` / `base` / `highlighted` / `app`.
+	 * Top-level `muted` (old shape) is ignored. `dark` here is a scheme, not a panel variant.
+	 */
+	colors?: Partial<Record<ColorScheme, DeepPartial<ThemeColors>>>;
+};
+export declare const defaultBorderWidths: SpaceScale;
+export declare const defaultRadii: SpaceScale;
+/**
+ * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`),
+ * or raw CSS. `base` is the panel `base` surface, not a brand slot.
+ */
+export type PaintValue = PanelVariant | BrandToken | StatusToken | (string & {});
+/** Same tokens as `PaintValue`. `base` is the panel `base` border, not a brand slot. */
+export type BorderColorValue = PaintValue;
+/** Token/CSS for every step, or per-step overrides. Omitted keys fall through to the control default. */
+export type PaintSteps = PaintValue | Partial<Record<BrandStateToken, PaintValue>>;
+/** Width cascade: `borderWidth` → `borderX` / `borderY` → `borderTop` / … Same tokens as `borderWidth`. */
+export type DirectionalBorderProps = {
+	/** All sides. Token (`extraSmall` = 1px) or CSS. Theme default `none`. */
+	borderWidth?: SpaceValue;
+	/** Left and right. Overrides `borderWidth`. */
+	borderX?: SpaceValue;
+	/** Top and bottom. Overrides `borderWidth`. */
+	borderY?: SpaceValue;
+	/** Overrides `borderWidth` and `borderY` on this side. */
+	borderTop?: SpaceValue;
+	/** Overrides `borderWidth` and `borderX` on this side. */
+	borderRight?: SpaceValue;
+	/** Overrides `borderWidth` and `borderY` on this side. */
+	borderBottom?: SpaceValue;
+	/** Overrides `borderWidth` and `borderX` on this side. */
+	borderLeft?: SpaceValue;
+};
+/** Tailwind `sm` / `md` / `lg` widths, in rem (16px root). */
+export declare const defaultBreakpoints: BreakpointScale;
+/** Named aliases on the 7-step ramp. Same names as later hue ramps (`palette.red.dark`, …). */
+export declare const grayTokens: readonly [
+	"extraDark",
+	"dark",
+	"base",
+	"light",
+	"extraLight"
+];
+export type GrayToken = (typeof grayTokens)[number];
+/** Even-L* grayscale including black (`0`) and white (`6`). */
+export declare const grayRampTokens: readonly [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6
+];
+export type GrayRampToken = (typeof grayRampTokens)[number];
+export type GrayScale = Record<GrayToken | GrayRampToken, string>;
+/**
+ * Importable color bank. Not a `createPanelizeTheme` key.
+ * `palette.gray[0]`–`[6]` is the CVD-spaced ramp. Names alias those steps.
+ * Adjacent steps are not a text-on-fill pair — skip at least one.
+ */
+export declare const palette: {
+	readonly black: "#000000";
+	readonly white: "#ffffff";
+	readonly gray: {
+		0: "#000000";
+		1: "#292929";
+		2: "#4e4e4e";
+		3: "#777777";
+		4: "#a2a2a2";
+		5: "#d0d0d0";
+		6: "#ffffff";
+		extraDark: "#292929";
+		dark: "#4e4e4e";
+		base: "#777777";
+		light: "#a2a2a2";
+		extraLight: "#d0d0d0";
+	};
+};
+export type Palette = typeof palette;
+export declare const defaultTheme: PanelizeTheme;
+/**
+ * Merge overrides onto library defaults. Author `colors.dark` / `colors.light`.
+ * The returned `colors` is the **dark slice**; both maps are `colorSchemes`.
+ * Pass `mode` to `PanelizeProvider`, not here. Export a stable object and wrap with
+ * `PanelizeProvider`. Full keys: `examples/panelize.theme.md`.
+ */
+export declare function createPanelizeTheme(overrides?: PanelizeThemeOverrides): PanelizeTheme;
+export type GridAlignProps = {
+	/**
+	 * Left–right alignment of items in their cells (`justify-items`).
+	 * Omitted: `stretch` (theme `defaults.grid`). Not flex packing — `space-*` does not apply.
+	 */
+	alignX?: AlignValue;
+	/**
+	 * Top–bottom alignment of items in their cells (`align-items`).
+	 * Omitted: `stretch` (theme `defaults.grid`). Not flex packing — `space-*` does not apply.
+	 */
+	alignY?: AlignValue;
+};
+export type SelfAlignProps = {
+	/**
+	 * Left–right alignment of this box in its parent track (`align-self` in a column flex /
+	 * `justify-self` on a grid). Omitted: inherit. No-op in a row flex (`Cols`, `horizontal` `Panels`).
+	 * `space-*` does not apply.
+	 */
+	alignX?: AlignValue;
+	/**
+	 * Top–bottom alignment of this box in its parent track (`align-self` in a row flex /
+	 * `align-self` on a grid). Omitted: inherit. No-op in a column flex (`Rows`, default `Panels`).
+	 * `space-*` does not apply.
+	 */
+	alignY?: AlignValue;
+};
+type FlexAlignProps = {
+	/**
+	 * Left–right alignment. Same meaning on `Panels`, `Rows`, and `Cols`.
+	 * Omitted: cross-axis `stretch`, main-axis `start` (CSS flex initials for this direction).
+	 * `Rows` / `Cols` load that pair from `defaults.rows` / `defaults.cols`.
+	 * `Panels` uses the same initials for the current direction (column vs `horizontal`).
+	 * `space-*` only does something when X is the main axis (`horizontal` `Panels` / `Cols`).
+	 * `baseline` only does something when X is the cross axis (default `Panels` / `Rows`).
+	 */
+	alignX?: AlignValue;
+	/**
+	 * Top–bottom alignment. Same meaning on `Panels`, `Rows`, and `Cols`.
+	 * Omitted: same initials as `alignX` (cross `stretch`, main `start`).
+	 * `space-*` only does something when Y is the main axis (default `Panels` / `Rows`).
+	 * `baseline` only does something when Y is the cross axis (`horizontal` `Panels` / `Cols`).
+	 */
+	alignY?: AlignValue;
+};
+/** Tailwind-adjacent rem scale (16px root). */
+export declare const defaultFontSizes: FontSizeScale;
+/** CSS `font-weight`. `Text` defaults to `base` so parent weight does not leak. Host must load `thin` (100). */
+export declare const defaultFontWeights: FontWeightScale;
+/** Host apps must load these files. The library only sets `font-family`. */
+export declare const defaultFontFamilies: FontFamilyScale;
+/** Unitless UI leading (`font-size × this`). Tight so flex centers the glyphs, not extra leading. */
+export declare const defaultLineHeight = 1.2;
+type ScrollProps = {
+	/**
+	 * Scroll this box when content overflows. Opt in on `Panels` and `Panel` only
+	 * (`Rows` / `Cols` are stacks, not scrollports).
+	 * `vertical` / `horizontal` / `both`. Omit for no clip.
+	 * Horizontal still needs inner content wider than this box (`width` / `minWidth` on children).
+	 */
+	scroll?: ScrollValue;
+};
+export declare const appCssVars: {
+	readonly background: "--panelize-app-bg";
+	readonly text: "--panelize-app-text";
+};
+/**
+ * Puts the theme on the tree. Wrap the host once. Does not replace the host’s styled-components
+ * `ThemeProvider`. Does not set `html` / `body`. `mode` selects `dark` / `light`.
+ *
+ * @example
+ * ```tsx
+ * <PanelizeProvider theme={panelizeTheme} mode={mode}>
+ *   <App />
+ * </PanelizeProvider>
+ * ```
+ */
+export declare function PanelizeProvider({ theme, mode, children, }: {
+	theme?: PanelizeTheme | PanelizeThemeOverrides;
+	/**
+	 * Active color scheme. Default `dark`. Hosts toggle by passing the other value.
+	 * Sets CSS `color-scheme` on the canvas wrapper (native scrollbars / form controls).
+	 */
+	mode?: ColorScheme;
+	children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Active theme for views and custom components. `.colors` is the current scheme’s surfaces
+ * (`muted` / `base` / `highlighted` / `app`), not `{ dark, light }`. `.mode` is the scheme name.
+ * `.brand` / `.status` are shared. Prefer inheriting `--panelize-*` from the nearest `Panel`
+ * when you only need surface paint.
+ *
+ * @example
+ * ```tsx
+ * const { colors, space } = usePanelizeTheme()
+ * ```
+ */
+export declare function usePanelizeTheme(): PanelizeTheme;
+export declare const defaultSpace: SpaceScale;
+export type DirectionalSpacingProps = {
+	/** Horizontal padding (left and right). Overrides `padding`. */
+	paddingX?: SpaceValue;
+	/** Vertical padding (top and bottom). Overrides `padding`. */
+	paddingY?: SpaceValue;
+	/** Overrides `padding` and `paddingY` on this side. */
+	paddingTop?: SpaceValue;
+	/** Overrides `padding` and `paddingX` on this side. */
+	paddingRight?: SpaceValue;
+	/** Overrides `padding` and `paddingY` on this side. */
+	paddingBottom?: SpaceValue;
+	/** Overrides `padding` and `paddingX` on this side. */
+	paddingLeft?: SpaceValue;
+	/** Horizontal margin (left and right). Overrides `margin`. */
+	marginX?: SpaceValue;
+	/** Vertical margin (top and bottom). Overrides `margin`. */
+	marginY?: SpaceValue;
+	/** Overrides `margin` and `marginY` on this side. */
+	marginTop?: SpaceValue;
+	/** Overrides `margin` and `marginX` on this side. */
+	marginRight?: SpaceValue;
+	/** Overrides `margin` and `marginY` on this side. */
+	marginBottom?: SpaceValue;
+	/** Overrides `margin` and `marginX` on this side. */
+	marginLeft?: SpaceValue;
+};
+export type BoxSpacingProps = DirectionalSpacingProps & {
+	/** Padding on all sides. Space token or CSS length. Theme default if omitted. */
+	padding?: SpaceValue;
+	/** Margin on all sides. Space token or CSS length. Theme default if omitted. */
+	margin?: SpaceValue;
+};
+export type SizeLimitProps = {
+	/** Minimum width. Space token or CSS. Omitted means no min. */
+	minWidth?: SpaceValue;
+	/** Maximum width. Space token or CSS. Omitted means no max. */
+	maxWidth?: SpaceValue;
+	/** Minimum height. Space token or CSS. Omitted means no min. */
+	minHeight?: SpaceValue;
+	/** Maximum height. Space token or CSS. Omitted means no max. */
+	maxHeight?: SpaceValue;
+};
+export type SizeProps = SizeLimitProps & {
+	/**
+	 * Width. Space token or CSS (`auto`, `4rem`, `100%`). Omitted: unset, except `Col` uses
+	 * theme `defaults.col.width` (`auto`). Overrides `fill` on this axis. Not on `Cell`.
+	 */
+	width?: SpaceValue;
+	/**
+	 * Height. Space token or CSS (`auto`, `4rem`, `100%`). Omitted: unset, except `Row` uses
+	 * theme `defaults.row.height` (`auto`). Overrides `fill` on this axis. Not on `Cell`.
+	 */
+	height?: SpaceValue;
+};
+export type ButtonProps = ComponentPropsWithoutRef<"button"> & {
+	/**
+	 * Brand (`primary` / `secondary` / `accent`), status (`danger` / `warning` / `success` / `info`), or raw CSS.
+	 * Theme default `primary`. Rest, hover, and active stay on that slot.
+	 */
+	color?: ColorValue;
+	/** Border + slot label, panel shows through. Omit = filled. */
+	outline?: boolean;
+	/** Font size token (`small`) or CSS — not the control box. Theme default `small`. Stretch with `fill`. */
+	size?: FontSizeValue;
+	/** Font weight token (`thin` / `base` / `bold` / `heavy`) or CSS. Theme default `bold`. */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Omit uses `base`. */
+	family?: FontFamilyToken;
+	/** Italic. Default off. */
+	italic?: boolean;
+	/** `text-transform: uppercase`. Default off. */
+	uppercase?: boolean;
+	/**
+	 * Width and height 100% of the parent. Height `%` only applies when the parent has a
+	 * definite height. Same idea as layout `fill`.
+	 */
+	fill?: boolean;
+	/**
+	 * Visible caption. Preferred over a string as `children`.
+	 * Custom insides (`Cols` / `Text` / host icons) go in `children`; those win if both are set.
+	 * No visible text: set `aria-label`.
+	 */
+	label?: string;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+	/** Padding on all axes. Space token or CSS. Overrides theme `paddingX` / `paddingY` until those props are set. */
+	padding?: SpaceValue;
+	/** Horizontal padding. Space token or CSS. Overrides `padding` and theme `paddingX`. */
+	paddingX?: SpaceValue;
+	/** Vertical padding. Space token or CSS. Overrides `padding` and theme `paddingY`. */
+	paddingY?: SpaceValue;
+	/** Border width token or CSS. Theme default `extraSmall`. */
+	borderWidth?: SpaceValue;
+	/** Border radius token or CSS. Theme default `base`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Fill. Token/CSS → all steps (`.base`). `{ base, hover, active }` for a one-off; omitted keys
+	 * keep the `color` slot (filled) or stay transparent (`outline`). Passing this on `outline` opts in to fill.
+	 */
+	background?: PaintSteps;
+	/**
+	 * Label. Token/CSS → all steps (`.base`). `{ base, hover, active }` for a one-off; omitted keys
+	 * keep filled `defaults.button.ink` / hover label, or the `color` slot on `outline`.
+	 */
+	ink?: PaintSteps;
+};
+/**
+ * Control (`<button>`). Caption: `label` (preferred); `children` win. Place it in a `Col` /
+ * `Row` / `Panel` — the wrapper positions it. `fill` stretches the button, not a panel.
+ *
+ * @example
+ * ```tsx
+ * <Cols gap='small'>
+ *   <Col>
+ *     <Button label='Save' />
+ *   </Col>
+ *   <Col>
+ *     <Button outline label='Cancel' />
+ *   </Col>
+ * </Cols>
+ * ```
+ */
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
+export type ChipProps = ComponentPropsWithoutRef<"span"> & {
+	/**
+	 * Brand (`primary` / `secondary` / `accent`), status (`danger` / …), or raw CSS.
+	 * Omit `ink` = this chroma on the label. Omit `background` = 12% mix into `--panelize-bg`.
+	 * Theme default `primary`.
+	 */
+	color?: ColorValue;
+	/** Font size token or CSS. Theme default `extraSmall`. */
+	size?: FontSizeValue;
+	/** Font weight token or CSS. Theme default `bold`. */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Omit uses `base`. */
+	family?: FontFamilyToken;
+	/** `text-transform: uppercase`. Theme default `true`. */
+	uppercase?: boolean;
+	/**
+	 * Visible caption. Preferred over a string as `children`.
+	 * Custom insides go in `children`; those win if both are set.
+	 */
+	label?: string;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+	/** Padding on all axes. Space token or CSS. Overrides theme until `paddingX` / `paddingY`. */
+	padding?: SpaceValue;
+	/** Horizontal padding. Overrides `padding`. */
+	paddingX?: SpaceValue;
+	/** Vertical padding. Overrides `padding`. */
+	paddingY?: SpaceValue;
+	/** Border width token or CSS. Theme default `none` (no stroke). */
+	borderWidth?: SpaceValue;
+	/** Border radius token or CSS. Theme default `999px` (capsule). */
+	borderRadius?: SpaceValue;
+	/**
+	 * Rest fill. Surface, brand, status, or CSS. Omit = tint of `color` into `--panelize-bg`.
+	 */
+	background?: PaintValue;
+	/**
+	 * Label ink. Surface, brand, status, or CSS. Omit = `color` chroma (`.base`).
+	 */
+	ink?: PaintValue;
+	/**
+	 * Rest border. Surface, brand, status, or CSS. Omit = label chroma. Invisible until `borderWidth`.
+	 */
+	borderColor?: PaintValue;
+};
+/**
+ * Badge (`<span>`), not a button. Label uses the chroma slot until `ink`. Place it with layout
+ * — no hover, no `alignX`.
+ *
+ * @example
+ * ```tsx
+ * <Chip color='accent' label='New' />
+ * ```
+ */
+export declare function Chip(props: ChipProps): import("react").JSX.Element;
+export type CheckboxProps = Omit<ComponentPropsWithRef<"input">, "size" | "type"> & {
+	/**
+	 * Brand (`primary` / `secondary` / `accent`), status (`danger` / …), or raw CSS.
+	 * Theme default `primary`. Checked / indeterminate fill uses this slot’s `.base` / `.hover` /
+	 * `.active` (same steps as `Button`). Empty rest / hover / active stroke is `currentColor`
+	 * (wrapping `Label` ink, else panel `text.base`) until `borderColor`.
+	 */
+	color?: ColorValue;
+	/**
+	 * Type size token or CSS. Box is this size (`1em`), square. Theme default `base`. Native HTML
+	 * `size` is omitted. Use the same `size` on the paired `Label`.
+	 */
+	size?: FontSizeValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+	/**
+	 * Rest fill. Surface, brand, status, or CSS. Omit = transparent (panel shows through).
+	 */
+	background?: PaintValue;
+	/**
+	 * Check / dash. Token/CSS → `.base` (same as filled `Button` `ink`). `{ base, hover, active }`
+	 * for a one-off; omitted keys keep `defaults.checkbox.ink`. Hover/active are unused (no hover
+	 * on the mark). Theme default `palette.black`.
+	 */
+	ink?: PaintSteps;
+	/**
+	 * Rest (empty) border. Surface, brand, status, or CSS. Omit = `currentColor` (same as the
+	 * wrapping `Label`, else panel `text.base`). Checked stroke follows the fill.
+	 */
+	borderColor?: PaintValue;
+	/** Border width token or CSS. Theme default `extraSmall` (`1px`). */
+	borderWidth?: SpaceValue;
+	/** Box radius. Space token or CSS. Theme default `small`. */
+	borderRadius?: SpaceValue;
+	/** Box width. Space token or CSS (not `fontSizes`). Overrides `size` on this axis. */
+	width?: SpaceValue;
+	/** Box height. Space token or CSS (not `fontSizes`). Overrides `size` on this axis. */
+	height?: SpaceValue;
+	/**
+	 * Native `indeterminate` property (dash). Not an HTML attribute. Host owns it. Does not set
+	 * `checked`. The dash still draws when `hideCheckIcon`.
+	 */
+	indeterminate?: boolean;
+	/**
+	 * Hide the check glyph when `checked`. Default `false`. `true` = fill-only (chroma well, no
+	 * check). Does not hide the indeterminate dash.
+	 */
+	hideCheckIcon?: boolean;
+};
+/**
+ * Native checkbox. `color` is the checked fill. Empty stroke follows wrapping `Label`
+ * (`currentColor`). Wrap with `Label` (same `size`).
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='email' label='Email' />
+ * <Checkbox id='email' checked={on} onChange={(e) => setOn(e.target.checked)} />
+ * ```
+ */
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
+export declare namespace Checkbox {
+	var displayName: string;
+}
+export type InputProps = Omit<ComponentPropsWithRef<"input">, "size"> & {
+	/**
+	 * Focus chroma only (border, glow, caret). Not glyph ink — use `ink` (omit = `--panelize-text`).
+	 * Brand (`primary` / `secondary` / `accent`), status (`danger` / …), or raw CSS. Theme default `primary`.
+	 */
+	color?: ColorValue;
+	/** Font size token or CSS. Theme default `small`. Native HTML `size` is omitted — use `fill` or a layout parent. */
+	size?: FontSizeValue;
+	/** Font weight token or CSS. Theme default `base`. */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Omit uses `base`. */
+	family?: FontFamilyToken;
+	/** Italic. Default off. */
+	italic?: boolean;
+	/** `text-transform: uppercase`. Default off. */
+	uppercase?: boolean;
+	/**
+	 * Width and height 100% of the parent. Height `%` only applies when the parent has a
+	 * definite height. Same idea as layout `fill`.
+	 */
+	fill?: boolean;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+	/** Padding on all axes. Space token or CSS. Overrides theme until `paddingX` / `paddingY`. */
+	padding?: SpaceValue;
+	/** Horizontal padding. Overrides `padding`. */
+	paddingX?: SpaceValue;
+	/** Vertical padding. Overrides `padding`. */
+	paddingY?: SpaceValue;
+	/** Border width token or CSS. Theme default `extraSmall`. */
+	borderWidth?: SpaceValue;
+	/** Border radius token or CSS. Theme default `base`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Rest fill. Surface (`muted` / `base` / `highlighted`), brand, status, or CSS.
+	 * Omit = nearest panel `--panelize-bg`.
+	 */
+	background?: PaintValue;
+	/**
+	 * Glyph ink. Surface (`muted` / `base` / `highlighted` → that text.base), brand, status, or CSS.
+	 * Omit = `--panelize-text`. Not focus chroma (`color`).
+	 */
+	ink?: PaintValue;
+	/**
+	 * Rest border. Surface (`muted` / `base` / `highlighted` → that border), brand, status, or CSS.
+	 * Omit = `--panelize-border`. Focus / `:user-invalid` still own the stroke.
+	 */
+	borderColor?: PaintValue;
+};
+/**
+ * Native text field. Instance `color` is focus chroma (border / glow / caret), not glyph ink
+ * (`ink`). Prefer `Label` + `htmlFor`. Place with layout; `fill` stretches the field.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='name' label='Name' />
+ * <Input id='name' placeholder='Name' />
+ * ```
+ */
+export declare function Input(props: InputProps): import("react").JSX.Element;
+export type LabelProps = ComponentPropsWithRef<"label"> & {
+	/** Font size token or CSS. Theme default `base` (`defaults.text`). */
+	size?: FontSizeValue;
+	/**
+	 * Glyph ink. Brand, status, or raw CSS. Wins over `muted` / `highlighted`.
+	 * Omit = panel `text.base`. Fields use `ink` for glyphs (`color` there is focus).
+	 */
+	color?: ColorValue;
+	/** Use the nearest `Panel`’s `text.muted`. Ignored if `color` or `highlighted` is set. */
+	muted?: boolean;
+	/** Use the nearest `Panel`’s `text.highlighted`. Ignored if `color` is set. Wins over `muted`. */
+	highlighted?: boolean;
+	/** Font weight token or CSS. Theme default `base`. */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Omit uses `base`. */
+	family?: FontFamilyToken;
+	/** Italic. Default off. */
+	italic?: boolean;
+	/** Underline. Default off. */
+	underlined?: boolean;
+	/** `text-transform: uppercase`. Default off. */
+	uppercase?: boolean;
+	/**
+	 * Visible caption. Preferred over a string as `children`.
+	 * Custom insides (`Span` / host icons) go in `children`; those win if both are set.
+	 */
+	label?: string;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Caption (`<label>`). Ink like `Text`. Prefer `label` + `htmlFor` at a control `id`. Wrap
+ * `Switch` / `Checkbox` / `Radio` (same `size`). Not a layout shell.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='email' label='Email' />
+ * <Input id='email' />
+ * ```
+ */
+export declare function Label(props: LabelProps): import("react").JSX.Element;
+export declare namespace Label {
+	var displayName: string;
+}
+/** Same chrome as `Input` (`css`, `background`, `ink`, `borderColor`, …). No `type`. */
+export type NumberInputProps = Omit<InputProps, "type"> & {
+	/** Native `min`. Number or string. */
+	min?: number | string;
+	/** Native `max`. Number or string. */
+	max?: number | string;
+	/** Native `step`. Number, string, or `'any'`. */
+	step?: number | string;
+};
+/**
+ * `Input` locked to `type='number'`. Same chrome. `onChange` value is a string — use
+ * `event.currentTarget.valueAsNumber`. Wheel blurs so the value does not nudge.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='count' label='Count' />
+ * <NumberInput id='count' min={0} step={1} />
+ * ```
+ */
+export declare function NumberInput(props: NumberInputProps): import("react").JSX.Element;
+export declare namespace NumberInput {
+	var displayName: string;
+}
+export type RadioProps = Omit<ComponentPropsWithRef<"input">, "size" | "type"> & {
+	/**
+	 * Brand (`primary` / `secondary` / `accent`), status (`danger` / …), or raw CSS.
+	 * Theme default `primary`. Checked ring / inner disc use this slot’s `.base` / `.hover` /
+	 * `.active` (same steps as `Button`). Empty rest / hover / active stroke is `currentColor`
+	 * (wrapping `Label` ink, else panel `text.base`) until `borderColor`. Rest fill stays
+	 * transparent until `background` (the disc is the on mark, not a filled well).
+	 */
+	color?: ColorValue;
+	/**
+	 * Type size token or CSS. Box is this size (`1em`), circle. Theme default `base`. Native HTML
+	 * `size` is omitted. Use the same `size` on the paired `Label`.
+	 */
+	size?: FontSizeValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+	/**
+	 * Rest fill (the ring’s interior). Surface, brand, status, or CSS. Omit = transparent (panel
+	 * shows through around the disc).
+	 */
+	background?: PaintValue;
+	/**
+	 * Inner disc. Token/CSS → `.base` (same as `Checkbox` `ink`). `{ base, hover, active }` for a
+	 * one-off; omitted keys keep the `color` slot. Omit entirely = disc follows the `color` slot
+	 * (lockstep with the ring, including hover/active).
+	 */
+	ink?: PaintSteps;
+	/**
+	 * Rest (empty) border. Surface, brand, status, or CSS. Omit = `currentColor` (same as the
+	 * wrapping `Label`, else panel `text.base`). Checked stroke follows the `color` slot.
+	 */
+	borderColor?: PaintValue;
+	/** Border width token or CSS. Theme default `extraSmall` (`1px`). */
+	borderWidth?: SpaceValue;
+	/** Box radius. Space token or CSS. Theme default `999px` (circle). Inner disc uses `min(this, 50%)`. */
+	borderRadius?: SpaceValue;
+	/** Box width. Space token or CSS (not `fontSizes`). Overrides `size` on this axis. */
+	width?: SpaceValue;
+	/** Box height. Space token or CSS (not `fontSizes`). Overrides `size` on this axis. */
+	height?: SpaceValue;
+};
+/**
+ * Native radio. `color` is the checked ring and disc. Empty stroke follows wrapping `Label`.
+ * Wrap with `Label` (same `size`). Share `name` across the group.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='hobby' label='Hobby' />
+ * <Radio id='hobby' name='plan' value='hobby' checked={plan === 'hobby'} onChange={(e) => setPlan(e.target.value)} />
+ * ```
+ */
+export declare function Radio(props: RadioProps): import("react").JSX.Element;
+export declare namespace Radio {
+	var displayName: string;
+}
+export type SelectOptionData = {
+	value: string;
+	label: string;
+	disabled?: boolean;
+};
+export type OptionProps = {
+	/** Value written to `Select` / `MultiSelect` state. */
+	value: string;
+	/** Visible caption. Omit = string `children`, else `value`. */
+	label?: string;
+	/** Skip pointer / keyboard pick. Default `false`. */
+	disabled?: boolean;
+	children?: ReactNode;
+};
+/** Marker for `Select` / `MultiSelect` children. Not rendered on its own. */
+declare function Option$1(props: OptionProps): null;
+declare namespace Option$1 {
+	var displayName: string;
+}
+export type MultiSelectProps = Omit<ComponentPropsWithRef<"button">, "type" | "onChange" | "value"> & {
+	/**
+	 * Focus chroma (open ring) and checked-option ink. Brand / status / CSS.
+	 * Theme default `primary`. Glyph on the trigger is `ink` (omit = panel highlighted text).
+	 */
+	color?: ColorValue;
+	/** Type size token or CSS. Theme default `small`. Native HTML `size` is omitted. */
+	size?: FontSizeValue;
+	weight?: FontWeightValue;
+	family?: FontFamilyToken;
+	italic?: boolean;
+	uppercase?: boolean;
+	fill?: boolean;
+	css?: string;
+	padding?: SpaceValue;
+	/** Horizontal padding. Overrides `padding`. */
+	paddingX?: SpaceValue;
+	/** Vertical padding. Overrides `padding`. */
+	paddingY?: SpaceValue;
+	borderWidth?: SpaceValue;
+	borderRadius?: SpaceValue;
+	background?: PaintValue;
+	ink?: PaintValue;
+	borderColor?: PaintValue;
+	/**
+	 * Menu open. Omit = internal (click / keyboard / outside / Escape). Pass with
+	 * `onOpenChange` to control.
+	 */
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	/** Options. Merged with child `Option` (children win on the same `value`). */
+	options?: SelectOptionData[];
+	/** Shown when nothing is selected. Muted ink. */
+	placeholder?: string;
+	/** Hidden input `name` for native form submit (one input per selected value). */
+	name?: string;
+	/**
+	 * When true, the value cannot be cleared to empty (no clear-all, last check cannot
+	 * uncheck). Default `false`.
+	 */
+	required?: boolean;
+	/**
+	 * Show a clear-all control when there is a value. Default `false`. Ignored when `required`.
+	 */
+	clearable?: boolean;
+	/**
+	 * When true, checked options are listed first (original order within each group).
+	 * Default `false`.
+	 */
+	selectedAtTop?: boolean;
+	/**
+	 * Open to inspect; no toggle / clear / type-ahead commit. Not dimmed (`disabled` is).
+	 * Default `false`.
+	 */
+	readOnly?: boolean;
+	/** Selected values. Omit with `defaultValue` for uncontrolled. */
+	value?: string[];
+	defaultValue?: string[];
+	/** Called with the selected values when the set changes. Empty array when cleared. */
+	onChange?: (value: string[]) => void;
+	children?: ReactNode;
+};
+/**
+ * Custom multi listbox. Host `value` / `onChange` are `string[]`. Trigger shows a count
+ * (`N selected`), not chips. Menu stays open while toggling. Place with layout.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='tags' label='Tags' />
+ * <MultiSelect id='tags' value={tags} onChange={setTags} clearable>
+ *   <Option value='a' label='Alpha' />
+ *   <Option value='b' label='Beta' />
+ * </MultiSelect>
+ * ```
+ */
+export declare function MultiSelect(props: MultiSelectProps): import("react").JSX.Element;
+export declare namespace MultiSelect {
+	var displayName: string;
+}
+export type SelectProps = Omit<ComponentPropsWithRef<"button">, "type" | "onChange" | "value"> & {
+	/**
+	 * Focus chroma (open ring) and selected-option ink. Brand / status / CSS.
+	 * Theme default `primary`. Glyph on the trigger is `ink` (omit = panel highlighted text).
+	 */
+	color?: ColorValue;
+	/** Type size token or CSS. Theme default `small`. Native HTML `size` is omitted. */
+	size?: FontSizeValue;
+	weight?: FontWeightValue;
+	family?: FontFamilyToken;
+	italic?: boolean;
+	uppercase?: boolean;
+	fill?: boolean;
+	css?: string;
+	padding?: SpaceValue;
+	/** Horizontal padding. Overrides `padding`. */
+	paddingX?: SpaceValue;
+	/** Vertical padding. Overrides `padding`. */
+	paddingY?: SpaceValue;
+	borderWidth?: SpaceValue;
+	borderRadius?: SpaceValue;
+	background?: PaintValue;
+	ink?: PaintValue;
+	borderColor?: PaintValue;
+	/**
+	 * Menu open. Omit = internal (click / keyboard / outside / Escape). Pass with
+	 * `onOpenChange` to control.
+	 */
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	/** Options. Merged with child `Option` (children win on the same `value`). */
+	options?: SelectOptionData[];
+	/** Shown when nothing is selected. Muted ink until a value is set. */
+	placeholder?: string;
+	/** Hidden input `name` for native form submit. */
+	name?: string;
+	/**
+	 * When true, the value cannot be cleared to empty (no clear control, clicking the
+	 * selected option does not deselect). Default `false`.
+	 */
+	required?: boolean;
+	/**
+	 * Show a clear control when there is a value. Default `false`. Ignored when `required`.
+	 */
+	clearable?: boolean;
+	/**
+	 * When true and a known value is selected, that option is listed first in the menu.
+	 * Default `false`. The empty row from `emptyOption` stays first.
+	 */
+	selectedAtTop?: boolean;
+	/**
+	 * First menu row with value `''` (visible “none”). `true` uses `placeholder` as the
+	 * caption; a string is a custom caption. Ignored when `required`, or when an option
+	 * already has value `''`. Default off.
+	 */
+	emptyOption?: boolean | string;
+	/**
+	 * Open to inspect; no pick / clear / type-ahead commit. Not dimmed (`disabled` is).
+	 * Default `false`.
+	 */
+	readOnly?: boolean;
+	/** Selected value. Omit with `defaultValue` for uncontrolled. */
+	value?: string;
+	defaultValue?: string;
+	/** Called with the option `value` when the selection changes. Empty string when cleared. */
+	onChange?: (value: string) => void;
+	children?: ReactNode;
+};
+/**
+ * Custom listbox (not a native `<select>`). Host `value` / `onChange`. Place the trigger with
+ * layout; `fill` stretches the trigger. Prefer `Label` + `htmlFor`.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='country' label='Country' />
+ * <Select id='country' value={country} onChange={setCountry} placeholder='Select'>
+ *   <Option value='us' label='United States' />
+ *   <Option value='ca' label='Canada' />
+ * </Select>
+ * ```
+ */
+export declare function Select(props: SelectProps): import("react").JSX.Element;
+export declare namespace Select {
+	var displayName: string;
+}
+export type SwitchProps = Omit<ComponentPropsWithRef<"input">, "size" | "type"> & {
+	/**
+	 * On-track chroma. Brand (`primary` / `secondary` / `accent`), status (`danger` / …), or raw CSS.
+	 * Theme default `primary`. Off-track is not this slot — use `background`.
+	 */
+	color?: ColorValue;
+	/**
+	 * Type size token or CSS. Track height is this size × theme `lineHeight` (keep `lineHeight`
+	 * unitless). Width is this size × `defaults.switch.widthFactor`. Theme default `base`. Native
+	 * HTML `size` is omitted. Use the same `size` on the paired `Label`.
+	 */
+	size?: FontSizeValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+	/**
+	 * Off-track fill. Surface, brand, status, or CSS.
+	 * Omit = mix of `--panelize-text` into `--panelize-bg`.
+	 */
+	background?: PaintValue;
+	/**
+	 * Thumb fill. Surface, brand, status, or CSS. Theme default `palette.white`.
+	 */
+	ink?: PaintValue;
+	/** Track width. Space token or CSS (not `fontSizes`). Overrides `size` on this axis. */
+	width?: SpaceValue;
+	/** Track height. Space token or CSS (not `fontSizes`). Overrides `size` on this axis. */
+	height?: SpaceValue;
+	/**
+	 * Track radius. Space token or CSS. Theme default `999px` (capsule). Thumb uses
+	 * `min(this, 50%)` so a capsule stays round and a token like `small` squares both pieces.
+	 */
+	borderRadius?: SpaceValue;
+};
+/**
+ * Native switch (`role='switch'`). On-track is `color` chroma; thumb is `ink`. Wrap with
+ * `Label` (same `size`). No `fill` / `label` / `children`.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='air'>
+ *   <Cols gap='small' alignY='center'>
+ *     <Col>
+ *       <Switch id='air' checked={on} onChange={(e) => setOn(e.target.checked)} />
+ *     </Col>
+ *     <Col>
+ *       <Text>Airplane mode</Text>
+ *     </Col>
+ *   </Cols>
+ * </Label>
+ * ```
+ */
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;
+export declare namespace Switch {
+	var displayName: string;
+}
+export type TextareaProps = ComponentPropsWithRef<"textarea"> & {
+	/**
+	 * Focus chroma only (border, glow, caret). Not glyph ink — use `ink` (omit = `--panelize-text`).
+	 * Brand (`primary` / `secondary` / `accent`), status (`danger` / …), or raw CSS. Theme default `primary`.
+	 */
+	color?: ColorValue;
+	/** Font size token or CSS. Theme default `small`. */
+	size?: FontSizeValue;
+	/** Font weight token or CSS. Theme default `base`. */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Omit uses `base`. */
+	family?: FontFamilyToken;
+	/** Italic. Default off. */
+	italic?: boolean;
+	/** `text-transform: uppercase`. Default off. */
+	uppercase?: boolean;
+	/**
+	 * Width and height 100% of the parent. Height `%` only applies when the parent has a
+	 * definite height. Same idea as layout `fill`.
+	 */
+	fill?: boolean;
+	/** Vertical resize handle. Theme default `false`. `true` opts in; does not depend on `fill`. */
+	resize?: boolean;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+	/** Padding on all axes. Space token or CSS. Overrides theme until `paddingX` / `paddingY`. */
+	padding?: SpaceValue;
+	/** Horizontal padding. Overrides `padding`. */
+	paddingX?: SpaceValue;
+	/** Vertical padding. Overrides `padding`. */
+	paddingY?: SpaceValue;
+	/** Border width token or CSS. Theme default `extraSmall`. */
+	borderWidth?: SpaceValue;
+	/** Border radius token or CSS. Theme default `base`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Rest fill. Surface (`muted` / `base` / `highlighted`), brand, status, or CSS.
+	 * Omit = nearest panel `--panelize-bg`.
+	 */
+	background?: PaintValue;
+	/**
+	 * Glyph ink. Surface (`muted` / `base` / `highlighted` → that text.base), brand, status, or CSS.
+	 * Omit = `--panelize-text`. Not focus chroma (`color`).
+	 */
+	ink?: PaintValue;
+	/**
+	 * Rest border. Surface (`muted` / `base` / `highlighted` → that border), brand, status, or CSS.
+	 * Omit = `--panelize-border`. Focus / `:user-invalid` still own the stroke.
+	 */
+	borderColor?: PaintValue;
+};
+/**
+ * Multiline field. Same chrome as `Input`. Theme starts from merged `defaults.input`. Default
+ * `resize` off, `rows` 3. Place with layout.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor='notes' label='Notes' />
+ * <Textarea id='notes' placeholder='Notes' />
+ * ```
+ */
+export declare function Textarea(props: TextareaProps): import("react").JSX.Element;
+export type CellProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeLimitProps & DirectionalBorderProps & {
+	/** How many column tracks this cell covers. Default `1`. Becomes 1 when the parent `Grid` is stacked to one column. */
+	spanX?: number;
+	/** How many row tracks this cell covers. Default `1`. */
+	spanY?: number;
+	/**
+	 * Left–right alignment in this cell (`justify-self`).
+	 * Omitted: inherit the parent `Grid` `alignX`.
+	 */
+	alignX?: AlignValue;
+	/**
+	 * Top–bottom alignment in this cell (`align-self`).
+	 * Omitted: inherit the parent `Grid` `alignY`.
+	 */
+	alignY?: AlignValue;
+	/** Border radius token or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`), or CSS.
+	 * Default is `base` border. `base` is the surface, not a brand slot.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * One cell in a `Grid`. Direct child of `Grid` only. No `width` / `height` / `fill` — span
+ * tracks with `spanX` / `spanY`. Place content here.
+ *
+ * @example
+ * ```tsx
+ * <Grid numCols={3} gap='small'>
+ *   <Cell>
+ *     <Text>A</Text>
+ *   </Cell>
+ *   <Cell spanX={2}>
+ *     <Text>B</Text>
+ *   </Cell>
+ * </Grid>
+ * ```
+ */
+export declare function Cell(props: CellProps): import("react").JSX.Element;
+export type ColProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeProps & SelfAlignProps & DirectionalBorderProps & {
+	/**
+	 * Grow in a flex parent (`flex: 1 1 0%`, `min-width` / `min-height` 0). Until then this box is
+	 * `flex-shrink: 0` (same as `Panel`).
+	 */
+	flex?: boolean;
+	/**
+	 * Size to the parent on axes without a size. Theme `width` is `auto`, so omit `width` → height
+	 * 100% only. Explicit `width` / `height` win.
+	 */
+	fill?: boolean;
+	/** Border radius token or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`), or CSS.
+	 * Default is `base` border. `base` is the surface, not a brand slot.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * One column in a `Cols` track. Direct child of `Cols` only. Place content here. This box owns
+ * `flex` / `width` / `alignY` — children do not position themselves.
+ *
+ * @example
+ * ```tsx
+ * <Cols gap='small'>
+ *   <Col>
+ *     <Button label='Save' />
+ *   </Col>
+ *   <Col>
+ *     <Button outline label='Cancel' />
+ *   </Col>
+ * </Cols>
+ * ```
+ */
+export declare function Col(props: ColProps): import("react").JSX.Element;
+export type ColsProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeProps & FlexAlignProps & DirectionalBorderProps & {
+	/** Grow in a flex parent (`flex: 1 1 0%`, `min-width` / `min-height` 0). */
+	flex?: boolean;
+	/** Size to the parent (`height` and `width` 100%). Explicit `width` / `height` win on that axis. */
+	fill?: boolean;
+	/** Space between child `Col`s. Token or CSS length. Theme default is `none`. */
+	gap?: SpaceValue;
+	/** Allow child `Col`s to wrap onto the next line. Default is no wrap. */
+	wrap?: boolean;
+	/**
+	 * Become a column when this box is at most this wide (`sm` / `md` / `lg`, or CSS).
+	 * Measures this `Cols`, not the viewport. `stack="md"` is not Tailwind `md:` (that is and-up).
+	 * While stacked, children stretch full width (`alignX` centering is ignored).
+	 * Column packing uses explicit `alignY`, or `start` if `alignY` was omitted (not row `stretch`).
+	 */
+	stack?: StackValue;
+	/** Border radius token or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`), or CSS.
+	 * Default is `base` border. Does not paint a panel background.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Row track. Direct children must be `Col`, two or more. Do not wrap a single column — use
+ * the parent `Panel` or a `Div`. `stack` collapses this row when the box is at most that wide.
+ *
+ * @example
+ * ```tsx
+ * <Cols gap='small' stack='sm'>
+ *   <Col width='12rem'>
+ *     <Text>Side</Text>
+ *   </Col>
+ *   <Col flex>
+ *     <Text>Main</Text>
+ *   </Col>
+ * </Cols>
+ * ```
+ */
+export declare function Cols(props: ColsProps): import("react").JSX.Element;
+export type DivProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeProps & SelfAlignProps & DirectionalBorderProps & {
+	/**
+	 * Grow in a flex parent (`flex: 1 1 0%`, `min-width` / `min-height` 0). Until then this box is
+	 * `flex-shrink: 0` (same as `Panel`).
+	 */
+	flex?: boolean;
+	/** Size to the parent (`height` and `width` 100%). Explicit `width` / `height` win on that axis. */
+	fill?: boolean;
+	/** Border radius token or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface, brand (`primary`), status (`danger`), or raw CSS.
+	 * Omitted uses the parent `Panel` border (`var(--panelize-border)`).
+	 * Does not paint a panel background.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Catch-all box (spacing, size, border, `fill` / `flex`). No surface paint. Use when a single
+ * wrapper is enough — not a substitute for `Row` / `Col` / `Cell` (those still belong under
+ * their tracks).
+ *
+ * @example
+ * ```tsx
+ * <Panel padding='base'>
+ *   <Div maxWidth='24rem'>
+ *     <Heading level={2}>Card</Heading>
+ *     <Text muted>Body</Text>
+ *   </Div>
+ * </Panel>
+ * ```
+ */
+export declare function Div(props: DivProps): import("react").JSX.Element;
+export type GridProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeProps & GridAlignProps & DirectionalBorderProps & {
+	/** Grow in a flex parent (`flex: 1 1 0%`, `min-width` / `min-height` 0). */
+	flex?: boolean;
+	/** Size to the parent (`height` and `width` 100%). Explicit `width` / `height` win on that axis. */
+	fill?: boolean;
+	/** Space between cells. Token or CSS length. Theme default is `none`. */
+	gap?: SpaceValue;
+	/** Column track count. Each track is `minmax(0, 1fr)`. Omit for implicit auto columns. */
+	numCols?: number;
+	/** Row track count. Each track is `minmax(0, 1fr)`. Omit for implicit content-sized rows. */
+	numRows?: number;
+	/**
+	 * Reduce columns when this box is at most this wide (`sm` / `md` / `lg`, or CSS).
+	 * Measures this `Grid`, not the viewport. `stack="md"` is not Tailwind `md:` (that is and-up).
+	 * Track count while stacked is `stackCols` (default 1). Items stretch. Child `spanX`
+	 * becomes 1 only when stacked to one column.
+	 */
+	stack?: StackValue;
+	/** Column tracks while `stack`ed. Default `1`. Ignored if `stack` is omitted. */
+	stackCols?: number;
+	/** Border radius token or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`), or CSS.
+	 * Default is `base` border. Does not paint a panel background.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Grid track. Direct children must be `Cell`, two or more. `numCols` / `numRows` are equal
+ * `minmax(0, 1fr)` tracks. `stack` reduces columns when this box is at most that wide.
+ *
+ * @example
+ * ```tsx
+ * <Grid numCols={2} gap='small'>
+ *   <Cell>
+ *     <Text>A</Text>
+ *   </Cell>
+ *   <Cell>
+ *     <Text>B</Text>
+ *   </Cell>
+ * </Grid>
+ * ```
+ */
+export declare function Grid(props: GridProps): import("react").JSX.Element;
+export declare const panelCssVars: {
+	readonly background: "--panelize-bg";
+	readonly text: "--panelize-text";
+	readonly textMuted: "--panelize-text-muted";
+	readonly textHighlighted: "--panelize-text-highlighted";
+	readonly border: "--panelize-border";
+};
+export type PanelProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeProps & SelfAlignProps & ScrollProps & DirectionalBorderProps & {
+	/**
+	 * Grow to fill remaining flex space (`flex: 1 1 0%`, `min-width` / `min-height` 0 so nested
+	 * `scroll` can shrink). Until then this box is `flex-shrink: 0` so a column of panels does not
+	 * collapse.
+	 */
+	flex?: boolean;
+	/**
+	 * Size to the parent (`height` and `width` 100%). Explicit `width` / `height` win on that axis.
+	 * Do not use on the inner surface of a scrolling shell — that locks height and the paint
+	 * will not grow. Use `minHeight="100%"` instead.
+	 */
+	fill?: boolean;
+	/** Color palette: `muted`, `base`, or `highlighted`. Default `base`. */
+	variant?: PanelVariant;
+	/** Border radius token (`small`) or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`), or CSS.
+	 * Default is this panel’s variant border. `base` is the surface, not a brand slot.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Section surface. Direct child of `Panels` only. Open inside: tracks, `Div`, type, controls,
+ * nested `Panels`, custom components. Not a stray `Row` / `Col` / `Cell`. `variant` paints
+ * `--panelize-*` for descendants.
+ *
+ * @example
+ * ```tsx
+ * <Panels fill>
+ *   <Panel variant='base' padding='base'>
+ *     <Heading level={2}>Account</Heading>
+ *   </Panel>
+ * </Panels>
+ * ```
+ */
+export declare function Panel(props: PanelProps): import("react").JSX.Element;
+export type PanelsProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeProps & FlexAlignProps & ScrollProps & DirectionalBorderProps & {
+	/** Lay children out in a row. Default is a column. */
+	horizontal?: boolean;
+	/** Grow in a flex parent (`flex: 1 1 0%`, `min-width` / `min-height` 0). */
+	flex?: boolean;
+	/**
+	 * Size to the parent. Default (absolute): `inset: 0` on axes without explicit `width` / `height`.
+	 * `relative`: `height` / `width` 100% instead. Explicit size still wins on that axis.
+	 * Does not change position (`absolute` unless `relative`).
+	 * Page: `<Panels fill scroll="vertical">` with inner `Panel minHeight="100%"` (not `fill`).
+	 * Split: `<Panels horizontal fill>` — `scroll` on the pane, not here.
+	 * Center in the window: `alignX="center"` `alignY="center"`, no `flex` on children, no `scroll` here.
+	 */
+	fill?: boolean;
+	/** Stay in document flow (`position: relative`). Default is `absolute`. */
+	relative?: boolean;
+	/** Space between child `Panel`s. Token or CSS length. Theme default is `none`. */
+	gap?: SpaceValue;
+	/**
+	 * For `horizontal` `Panels` only (ignored on the default column).
+	 * Become a column when this box is at most this wide (`sm` / `md` / `lg`, or CSS).
+	 * Measures this `Panels`, not the viewport. `stack="md"` is not Tailwind `md:` (that is and-up).
+	 * While stacked, children stretch full width (`alignX` centering is ignored).
+	 * Column packing uses explicit `alignY`, or `start` if `alignY` was omitted (not row `stretch`).
+	 */
+	stack?: StackValue;
+	/** Border radius token or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`), or CSS.
+	 * Default is `base` border. Does not paint a panel background.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Outer shell of a view. Direct children must be `Panel` (one is allowed).
+ * Default is an absolute column. `relative` stays in flow. `horizontal` is a row (sidebar + main).
+ *
+ * @example
+ * ```tsx
+ * <Panels fill scroll='vertical'>
+ *   <Panel variant='muted' minHeight='100%'>
+ *     <Heading level={1}>Title</Heading>
+ *   </Panel>
+ * </Panels>
+ * ```
+ */
+export declare function Panels(props: PanelsProps): import("react").JSX.Element;
+export type RowProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeProps & SelfAlignProps & DirectionalBorderProps & {
+	/**
+	 * Grow in a flex parent (`flex: 1 1 0%`, `min-width` / `min-height` 0). Until then this box is
+	 * `flex-shrink: 0` (same as `Panel`).
+	 */
+	flex?: boolean;
+	/**
+	 * Size to the parent on axes without a size. Theme `height` is `auto`, so omit `height` → width
+	 * 100% only. Explicit `width` / `height` win.
+	 */
+	fill?: boolean;
+	/** Border radius token or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`), or CSS.
+	 * Default is `base` border. `base` is the surface, not a brand slot.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * One band in a `Rows` track. Direct child of `Rows` only. Place content here (`Text`, `Cols`,
+ * controls). This box owns `alignX` / `fill` / size — children do not position themselves.
+ *
+ * @example
+ * ```tsx
+ * <Rows gap='small'>
+ *   <Row>
+ *     <Text>One</Text>
+ *   </Row>
+ *   <Row>
+ *     <Text>Two</Text>
+ *   </Row>
+ * </Rows>
+ * ```
+ */
+export declare function Row(props: RowProps): import("react").JSX.Element;
+export type RowsProps = ComponentPropsWithoutRef<"div"> & BoxSpacingProps & SizeProps & FlexAlignProps & DirectionalBorderProps & {
+	/** Grow in a flex parent (`flex: 1 1 0%`, `min-width` / `min-height` 0). */
+	flex?: boolean;
+	/** Size to the parent (`height` and `width` 100%). Explicit `width` / `height` win on that axis. */
+	fill?: boolean;
+	/** Space between child `Row`s. Token or CSS length. Theme default is `none`. */
+	gap?: SpaceValue;
+	/**
+	 * Allow child `Row`s to wrap onto the next line. Default is no wrap.
+	 * No `stack`: `Rows` is already a column. Use `Cols` or `Panels` `stack` to collapse a row.
+	 */
+	wrap?: boolean;
+	/** Border radius token or CSS length. Default `none`. */
+	borderRadius?: SpaceValue;
+	/**
+	 * Panel surface (`muted` / `base` / `highlighted`), brand (`primary`), status (`danger`), or CSS.
+	 * Default is `base` border. Does not paint a panel background.
+	 */
+	borderColor?: BorderColorValue;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Column track. Direct children must be `Row`, two or more. Do not wrap a single band — use
+ * the parent `Panel` or a `Div`.
+ *
+ * @example
+ * ```tsx
+ * <Rows gap='base'>
+ *   <Row>
+ *     <Heading level={1}>Title</Heading>
+ *   </Row>
+ *   <Row>
+ *     <Text muted>Caption</Text>
+ *   </Row>
+ * </Rows>
+ * ```
+ */
+export declare function Rows(props: RowsProps): import("react").JSX.Element;
+export type HeadingProps = ComponentPropsWithoutRef<"h1"> & {
+	/**
+	 * HTML heading level (`h1`–`h6`). Required. Size comes from `defaults.heading.size` unless `size` is set.
+	 * No UA margin/padding. Line box hugs cap height (`line-height: 1` + `text-box` trim). Gap belongs on a layout parent.
+	 */
+	level: HeadingLevel;
+	/** Font size token or CSS. Omit uses `defaults.heading.size[level]`. */
+	size?: FontSizeValue;
+	/**
+	 * Brand (`primary` → `brand.primary.base`), status (`danger` → `status.danger.base`), or raw CSS.
+	 * Wins over `muted` / `highlighted`. Omit with no flags = that panel’s `text.base`.
+	 */
+	color?: ColorValue;
+	/** Use the nearest `Panel`’s `text.muted`. Ignored if `color` or `highlighted` is set. */
+	muted?: boolean;
+	/** Use the nearest `Panel`’s `text.highlighted`. Ignored if `color` is set. Wins over `muted`. */
+	highlighted?: boolean;
+	/** Font weight token (`thin` / `base` / `bold` / `heavy`) or CSS (`600`). Theme default `bold`. */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Theme default `display`. */
+	family?: FontFamilyToken;
+	/** Italic. Default off. */
+	italic?: boolean;
+	/** Underline. Default off. */
+	underlined?: boolean;
+	/** `text-transform: uppercase`. Default off. */
+	uppercase?: boolean;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Heading (`h1`–`h6`). Required `level`. Omit `size` → theme size for that level. Not a layout
+ * shell — put gap on `Rows` / `Cols`.
+ *
+ * @example
+ * ```tsx
+ * <Heading level={1} uppercase color='primary'>
+ *   Panelize
+ * </Heading>
+ * ```
+ */
+export declare function Heading(props: HeadingProps): import("react").JSX.Element;
+export type SpanProps = ComponentPropsWithoutRef<"span"> & {
+	/** Font size token (`small`) or CSS. Nested in `Text` with omit = inherit that `Text`. Else theme `base`. */
+	size?: FontSizeValue;
+	/**
+	 * Brand (`primary` → `brand.primary.base`), status (`danger` → `status.danger.base`), or raw CSS.
+	 * Wins over `muted` / `highlighted`. Omit = inherit parent color (panel `text.base` if none).
+	 */
+	color?: ColorValue;
+	/** Use the nearest `Panel`’s `text.muted`. Ignored if `color` or `highlighted` is set. */
+	muted?: boolean;
+	/** Use the nearest `Panel`’s `text.highlighted`. Ignored if `color` is set. Wins over `muted`. */
+	highlighted?: boolean;
+	/** Font weight token or CSS. Nested omit = inherit parent `Text`. Else theme `base` (`400`). */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Nested omit = inherit parent `Text`. Else `base`. */
+	family?: FontFamilyToken;
+	/** Italic. Default off (inherits parent `font-style`). */
+	italic?: boolean;
+	/** Underline. Default off. */
+	underlined?: boolean;
+	/** `text-transform: uppercase`. Default off (inherits parent transform). */
+	uppercase?: boolean;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Inline run (`<span>`). Nested in `Text` / `Span`: omit size/weight/`family` → inherit that
+ * line; omit color → CSS `inherit`. Not a layout shell.
+ *
+ * @example
+ * ```tsx
+ * <Text>
+ *   Nested <Span weight='bold'>bold</Span>
+ * </Text>
+ * ```
+ */
+export declare function Span(props: SpanProps): import("react").JSX.Element;
+export type TextProps = ComponentPropsWithoutRef<"p"> & {
+	/** Font size token (`small`) or CSS. Theme default `base`. */
+	size?: FontSizeValue;
+	/**
+	 * Brand (`primary` → `brand.primary.base`), status (`danger` → `status.danger.base`), or raw CSS.
+	 * Wins over `muted` / `highlighted`. Omit with no flags = that panel’s `text.base`.
+	 */
+	color?: ColorValue;
+	/** Use the nearest `Panel`’s `text.muted`. Ignored if `color` or `highlighted` is set. */
+	muted?: boolean;
+	/** Use the nearest `Panel`’s `text.highlighted`. Ignored if `color` is set. Wins over `muted`. */
+	highlighted?: boolean;
+	/** Font weight token (`thin` / `base` / `bold` / `heavy`) or CSS (`600`). Theme default `base` (`400`). */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Omit uses `base`. */
+	family?: FontFamilyToken;
+	/** Italic. Default off. */
+	italic?: boolean;
+	/** Underline. Default off. */
+	underlined?: boolean;
+	/** `text-transform: uppercase`. Default off. */
+	uppercase?: boolean;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Body copy (`<p>`). Use this (or `Heading` / `Span` / `TextLink` / `Label`) for visible writing
+ * so it inherits the nearest `Panel` text tokens. Not a layout shell.
+ *
+ * @example
+ * ```tsx
+ * <Text muted>A React panel layout library.</Text>
+ * ```
+ */
+declare function Text$1(props: TextProps): import("react").JSX.Element;
+export type TextLinkProps = ComponentPropsWithoutRef<"a"> & {
+	/** Font size token (`small`) or CSS. Nested in `Text` / `Span` with omit = inherit. Else theme `base`. */
+	size?: FontSizeValue;
+	/**
+	 * Brand (`primary` → `brand.primary.base`), status (`danger` → `status.danger.base`), or raw CSS.
+	 * Theme default `primary`. Wins over `muted` / `highlighted`.
+	 */
+	color?: ColorValue;
+	/** Use the nearest `Panel`’s `text.muted`. Ignored if `color` or `highlighted` is set. */
+	muted?: boolean;
+	/** Use the nearest `Panel`’s `text.highlighted`. Ignored if `color` is set. Wins over `muted`. */
+	highlighted?: boolean;
+	/** Font weight token or CSS. Nested omit = inherit parent `Text` / `Span`. Else theme `base`. */
+	weight?: FontWeightValue;
+	/** `fontFamilies` token. Nested omit = inherit parent `Text` / `Span`. Else `base`. */
+	family?: FontFamilyToken;
+	/** Italic. Default off. */
+	italic?: boolean;
+	/** Underline at rest. Default off. */
+	underlined?: boolean;
+	/** `text-transform: uppercase`. Default off. */
+	uppercase?: boolean;
+	/** Extra CSS appended to this component’s styles. */
+	css?: string;
+};
+/**
+ * Inline link (`<a>`). Default chroma `primary`. Nested omit size/weight/`family` → inherit.
+ * Not a layout shell.
+ *
+ * @example
+ * ```tsx
+ * <Text>
+ *   See <TextLink href='/docs'>docs</TextLink>
+ * </Text>
+ * ```
+ */
+export declare function TextLink(props: TextLinkProps): import("react").JSX.Element;
+
+export {
+	Option$1 as Option,
+	Text$1 as Text,
+};
+
+export {};