@godxjp/ui 2.2.0 → 5.0.0

package/dist/components/primitives.d.ts

@@ -1,113 +1,823 @@
 import { ClassValue } from 'clsx';
+import { m as TableProps } from '../Table.types-BbsxoIYE.js';
+export { A as Align, B as Breakpoint, G as GutterValue, J as Justify, R as Row, a as RowProps, b as TableColumn, d as TableColumnVisibility, e as TableDensity, n as TableRowKey, o as TableSelectionConfig, p as TableSort, q as TableSortState, x as Tag, y as TagPresetColor, z as TagProps, C as useRowGutter } from '../Table.types-BbsxoIYE.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ComponentProps, ReactNode, TextareaHTMLAttributes, HTMLAttributes } from 'react';
+import { ComponentProps, ReactNode, CSSProperties, TextareaHTMLAttributes, FocusEvent, HTMLAttributes, LabelHTMLAttributes, ReactElement, ComponentPropsWithoutRef, FormHTMLAttributes, RefObject } from 'react';
+import { S as SizeProp, I as IconSizeProp } from '../size-CQwNvOWd.js';
+export { a as SizeWithXSProp } from '../size-CQwNvOWd.js';
+import { LoadingProp } from '../props.js';
+export { AlignProp, HelpToneProp, LoadingKind, LoadingOptions, NormalizedLoading, OrientationProp, PlacementProp, SideProp, StatusProp, ToneProp, normalizeLoading } from '../props.js';
+import { C as ColorProp, F as FeedbackColorProp } from '../color-DO0qqUAb.js';
+export { D as DensityProp } from '../color-DO0qqUAb.js';
+export { P as PaddingProp } from '../padding-DY0JV5Ja.js';
+import { FieldValues, UseFormReturn, DefaultValues, Resolver, UseFormProps, FieldPath } from 'react-hook-form';
+export { useFormContext } from 'react-hook-form';
+import { T as TimeLocale, C as CalendarEvent, E as EventBlockVariant } from '../MiniMonth-YAmPGEpC.js';
+export { a as CalendarRef, D as DEFAULT_GRID, M as MiniMonth, b as MiniMonthProps, c as MiniMonthYMD, d as MonthCellRef, P as PersonRef, S as SegmentedControl, e as SegmentedControlItem, f as SegmentedControlOrientation, g as SegmentedControlProps, h as SegmentedControlSize, i as SegmentedControlVariant, j as buildMonthGrid, k as fmtHour, m as minToY, p as parseHM, y as ymd } from '../MiniMonth-YAmPGEpC.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { DayPickerProps } from 'react-day-picker';
+import { DateValue, CalendarProps as CalendarProps$1, DateFieldProps as DateFieldProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, TimeValue, TimeFieldProps as TimeFieldProps$1 } from 'react-aria-components';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { ToasterProps } from 'sonner';
+export { ToasterProps, toast } from 'sonner';
+import { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date';
+import '@tanstack/react-table';
 
 declare function cn(...inputs: ClassValue[]): string;
 
+interface ColProps extends ComponentProps<"div"> {
+    /** Default span (1..24). 24 = full width. */
+    span?: number;
+    /** Offset by n columns (1..23). */
+    offset?: number;
+    /** Push by n columns (flex-order shift). */
+    push?: number;
+    /** Per-breakpoint span overrides. */
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    xxl?: number;
+    /** Flex order on the main axis. */
+    order?: number;
+    /** When set, the Col grows/shrinks like `flex: <n>` (free width). */
+    flex?: string | number;
+    children?: ReactNode;
+}
+declare function Col({ span, offset, push, xs, sm, md, lg, xl, xxl, order, flex, className, style, children, ...rest }: ColProps): react_jsx_runtime.JSX.Element;
+
+/** Flex gap scale. Accepts the shared `SizeProp` vocabulary plus a raw
+ *  pixel number for one-off gaps. Renamed from Ant's `"middle"` →
+ *  `"default"` to match the framework-wide size axis. */
+type FlexGap = number | SizeProp;
+type FlexJustify = "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly";
+type FlexAlign = "start" | "end" | "center" | "stretch" | "baseline";
+interface FlexProps extends ComponentProps<"div"> {
+    /** Direction — false / undefined = horizontal, true = vertical. */
+    vertical?: boolean;
+    /** Wrap mode. */
+    wrap?: boolean | "nowrap" | "wrap" | "wrap-reverse";
+    /** Gap between children. Token name or pixel number. */
+    gap?: FlexGap;
+    justify?: FlexJustify;
+    align?: FlexAlign;
+    /** flex value for the container itself (rare — usually parent sets it). */
+    flex?: string | number;
+    children?: ReactNode;
+}
+declare function Flex({ vertical, wrap, gap, justify, align, flex, className, style, children, ...rest }: FlexProps): react_jsx_runtime.JSX.Element;
+
+/** Inline-spacing scale. Accepts the shared `SizeProp` vocabulary plus
+ *  a raw pixel number for one-off gaps. Renamed from Ant's `"middle"`
+ *  → `"default"` to match the framework-wide size axis. */
+type SpaceSize = number | SizeProp;
+interface SpaceProps extends ComponentProps<"div"> {
+    /** Gap between adjacent children. */
+    size?: SpaceSize | [SpaceSize, SpaceSize];
+    /** Vertical stack instead of horizontal row. */
+    direction?: "horizontal" | "vertical";
+    /** Allow wrapping when row overflows. */
+    wrap?: boolean;
+    /** Cross-axis alignment. */
+    align?: "start" | "end" | "center" | "baseline";
+    /** Separator rendered between siblings (e.g. a divider). */
+    split?: ReactNode;
+    children?: ReactNode;
+}
+declare function Space({ size, direction, wrap, align, split, className, style, children, ...rest }: SpaceProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Badge — status pill with a colored dot + label.
+ * Badge — status pill / chip.
+ *
+ * Renders the canonical `.chip` class family from the dxs-kintai
+ * design system (comp-badges.html). Two appearance modes per
+ * SKILL.md:
  *
- * Renders the canonical `.badge` class from `@godxjp/ui/tokens` so the
- * visual layer is mastered in CSS (not Tailwind utilities). All six
- * variants map onto a semantic role from the brand bible:
+ *   • `appearance="soft"` (default) — translucent role tint. Use for
+ *     transient state — 申請中 (in review), draft, pending.
+ *   • `appearance="solid"`         — full role color. Use for terminal
+ *     state — 承認済 (approved), 却下 (rejected).
+ *   • `appearance="outline"`       — hairline border only.
+ *
+ * Variants map to semantic roles:
  *
  * - `success`  — 若竹  task completed, healthy
  * - `warning`  — 山吹  needs attention, not yet broken
  * - `info`     — 群青  neutral state callout
- * - `error`    — 茜    failed / blocked
- * - `attention`— 朱    pending, awaiting input
- * - `neutral`  — grey  default chrome
- * - `outline`  — empty hairline only (rare)
+ * - `error`    — 茜    failed / blocked (emits `chip-destructive`)
+ * - `attention`— 朱    pending, awaiting input (prefer over `error`
+ *                       for non-destructive alerts per SKILL.md)
+ * - `primary`  — brand action
+ * - `neutral`  — grey  default chrome (omitted variant suffix; base
+ *                       `.chip` styling)
+ * - `outline`  — empty hairline only (rare; same as
+ *                       `appearance="outline"` with no role)
  *
  * @example
- *   <Badge variant="success" dot>Healthy</Badge>
- *   <Badge variant="error">Failed</Badge>
+ *   <Badge variant="success" dot>Healthy</Badge>          // soft (default)
+ *   <Badge variant="success" appearance="solid">承認済</Badge>
+ *   <Badge variant="destructive" appearance="solid">却下</Badge>
+ *   <Badge variant="attention" dot>遅刻</Badge>
  */
-type BadgeVariant = "success" | "warning" | "info" | "error" | "attention" | "neutral" | "outline";
+type BadgeVariant = "primary" | "success" | "warning" | "info" | "destructive" | "attention" | "neutral" | "outline";
+type BadgeAppearance = "soft" | "solid" | "outline";
 interface BadgeProps extends ComponentProps<"span"> {
     variant?: BadgeVariant;
+    appearance?: BadgeAppearance;
     /** When true renders a colored dot before the label. */
     dot?: boolean;
     children?: ReactNode;
 }
-declare function Badge({ variant, dot, className, children, ...rest }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ variant, appearance, dot, className, children, ...rest }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Button — canonical action atom.
+ * Button — canonical action primitive.
  *
- * Maps onto the `.btn` family in tokens.css:
+ * 100% mapped to the dxs-kintai design canon
+ * (`design-handoff/ui-system/dxs-kintai-design-system/project/preview/
+ * comp-buttons.html`):
  *
- *   primary   — filled, brand color, default action
- *   secondary — bordered, foreground text, neutral surface
- *   ghost     — transparent, foreground text, hover surface
- *   danger    — destructive, --destructive bg
+ *   Variants: primary · secondary · outline · ghost · destructive · link
+ *   Sizes:    x-small · small · default · large
  *
- * Sizes mirror density tokens:
- *   sm  — 28 px height (compact action bar)
- *   md  — 32 px height (default)
- *   lg  — 36 px height (page hero CTA)
+ * Cardinal rules honoured:
+ *   §14 — shadcn / Radix recipe (Slot for asChild)
+ *   §21 — every axis (theme/accent/density/font-size)
+ *   §22 — every literal token-pinned (height = --density-element-*)
+ *   §23 — vocabulary (`size` + `variant` per docs/specs/04 §B)
+ *   §24 — mobile touch target handled without changing visual size
  *
- * Supports `asChild` (Radix Slot pattern) so the button styles can wrap
- * a Link or any other element without nesting:
+ * Slot props (§N):
+ *   startContent — ReactNode rendered before children (left icon)
+ *   endContent   — ReactNode rendered after children (right icon)
  *
- * @example
- *   <Button variant="primary">Save</Button>
- *   <Button asChild variant="ghost"><a href="/docs">Docs</a></Button>
+ * When `asChild` is true, Radix Slot merges Button's classes onto
+ * the caller's single child element. The slot props
+ * (`startContent` / `endContent` / `loading` spinner) are then
+ * INERT — the caller's element owns its content. Compose icons
+ * inline inside the slotted element:
+ *
+ *   <Button asChild>
+ *     <a href="/x"><Icon /> Label</a>      ← icon wired inline
+ *   </Button>
+ *
+ *   <Button asChild startContent={<Icon />}>← `startContent` IGNORED
+ *     <a href="/x">Label</a>
+ *   </Button>
  */
-type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
-type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends ComponentProps<"button"> {
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
+type ButtonSize = "x-small" | "small" | "default" | "large";
+interface ButtonProps extends Omit<ComponentProps<"button">, "size"> {
+    /** Visual treatment per design canon `.btn-<variant>`. */
     variant?: ButtonVariant;
+    /** Dimensional scale per `--density-element-<size>` chain. */
     size?: ButtonSize;
+    /** Stretch to fill parent's width (mobile form submit pattern). */
+    block?: boolean;
+    /** Show a spinner + disable interaction. */
+    loading?: boolean;
+    /** Icon slot rendered before the label. */
+    startContent?: ReactNode;
+    /** Icon slot rendered after the label. */
+    endContent?: ReactNode;
+    /** Radix Slot pattern — wrap a link / RouterLink without nesting. */
     asChild?: boolean;
     children?: ReactNode;
 }
-declare function Button({ variant, size, asChild, className, type, children, ...rest }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 /**
- * Card — surface container for grouped content.
+ * Card — surface container. 100% mapped to the dxs-kintai design canon
+ * (`design-handoff/ui-system/dxs-kintai-design-system/project/preview/
+ * comp-card.html`).
+ *
+ * One atom (`.card`, 1px border, 6px radius, `var(--card)` bg,
+ * no shadow at rest) + four orthogonal prop axes:
+ *
+ *   - `padding` — tight / default / cozy / none (12 / 16 / 20 / 0)
+ *   - `tone`    — default / muted / outline-only
+ *   - `accent`  — primary / success / warning / attention / info /
+ *                 destructive / featured (3px left edge or full ring)
+ *   - `hoverable`
  *
- * The atom hierarchy mirrors the `.card`/`.card-header`/`.card-title`
- * classes in tokens.css. Compose as:
+ * Plus a `band` prop for the H11 color-strip variant (4px strip
+ * above the header).
  *
- *   <Card>
- *     <CardHeader>
- *       <CardTitle>Pull requests</CardTitle>
- *       <CardSubtitle>Open / merged this week</CardSubtitle>
- *     </CardHeader>
- *     <CardContent>...</CardContent>
- *   </Card>
+ * Header shape auto-detects from the slot props:
+ *
+ *   - `kicker` set                          → `.ch-kicker` (3-tier
+ *                                              column: kicker / title /
+ *                                              subtitle)
+ *   - `subtitle` set, no `kicker`           → `.ch-stack` (2-tier
+ *                                              column: title /
+ *                                              subtitle)
+ *   - `meta` set, no `subtitle`/`kicker`    → `.ch` row with meta
+ *                                              right-aligned
+ *                                              (margin-left: auto)
+ *   - just `title`                          → `.ch` row, title only
+ *
+ * `extra` always renders right-aligned at the end of the header row
+ * (works with all three shapes). Used for action buttons + tags
+ * (H4/H5/H7 patterns).
+ *
+ * For flush cards with internal sections (H1-H17 variants), use
+ * `padding="none"` plus `footer` / `actions` and normal body content.
  */
-declare function Card({ className, ...rest }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function CardHeader({ className, ...rest }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
-declare function CardTitle({ className, ...rest }: ComponentProps<"h3">): react_jsx_runtime.JSX.Element;
-interface CardSubtitleProps extends ComponentProps<"p"> {
-    children?: ReactNode;
+type CardPadding = "tight" | "default" | "cozy" | "none";
+type CardTone = "default" | "muted" | "outline-only";
+type CardAccent = "primary" | "success" | "warning" | "attention" | "info" | "destructive" | "featured";
+type CardBand = "primary" | "success" | "warning" | "attention" | "info" | "destructive" | "gradient" | "dotted";
+interface CardProps extends Omit<ComponentProps<"div">, "title"> {
+    /** Card title — H1/H2/H3/H12 `<span class="t">…</span>`. */
+    title?: ReactNode;
+    /** Sub-text stacked BELOW the title (H2 `.ch-stack .sub`). */
+    subtitle?: ReactNode;
+    /** Small uppercase label ABOVE the title (H12 `.ch-kicker .k`). */
+    kicker?: ReactNode;
+    /** Right-aligned secondary text (H3 `.ch .sub` with margin-left:auto). */
+    meta?: ReactNode;
+    /** Right-aligned action slot — buttons, tags, status indicators. */
+    extra?: ReactNode;
+    /** Color strip above the header (4px, semantic). */
+    band?: CardBand;
+    /** Footer slot rendered with top divider + muted secondary tint. */
+    footer?: ReactNode;
+    /** Right-aligned action bar footer — no divider tint, transparent bg. */
+    actions?: ReactNode;
+    /** Padding density. */
+    padding?: CardPadding;
+    /** Surface tone. */
+    tone?: CardTone;
+    /** Edge accent (3px left edge, or full --primary ring for `featured`). */
+    accent?: CardAccent;
+    /** Hover affordance — border + shadow lift. */
+    hoverable?: boolean;
 }
-declare function CardSubtitle({ className, ...rest }: CardSubtitleProps): react_jsx_runtime.JSX.Element;
-declare function CardContent({ className, ...rest }: ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare const Card: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 /**
- * Input — text input atom. Maps to `.input` in tokens.css.
+ * Input — text input with affix slots that match the canonical
+ * dxs-kintai `.input-wrap` shell.
  *
- * Forward-ref so consumers can wire `react-hook-form` / focus
- * management without escaping the design tokens.
+ *   <Input prefix={<SearchIcon />} suffix={<EyeIcon />} />
+ *   <Input addonBefore="https://" addonAfter=".com" />
+ *   <Input size="large" status="error" />
+ *
+ * When `prefix` / `suffix` is provided the input is wrapped in a
+ * `.input-wrap` shell that owns the focus ring while the icon sits
+ * inside the field. When `addonBefore` / `addonAfter` is provided the
+ * input + addons form a connected group; the addons render inside the
+ * same `.input-wrap` as canonical `.affix.pre` / `.affix.suf`.
+ */
+type InputSize = "small" | "default" | "large";
+/**
+ * Form-field validation state per cardinal rule 23 §B vocabulary
+ * (`"default" | "success" | "warning" | "error"`). Drives the border
+ * + ring + helper-text color via the semantic chain.
  */
-interface InputProps extends ComponentProps<"input"> {
+type InputStatus = "default" | "success" | "warning" | "error";
+interface InputProps extends Omit<ComponentProps<"input">, "prefix" | "size"> {
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    addonBefore?: ReactNode;
+    addonAfter?: ReactNode;
+    size?: InputSize;
+    status?: InputStatus;
+    /** Padding for the inner input — usually auto-derived from prefix/suffix. */
+    inputStyle?: CSSProperties;
 }
 declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
-/** Textarea — uses `.input` for shape, leaves height auto. */
-interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+/**
+ * Textarea — `rows`, `autoSize`, `showCount`, `maxLength`, `resize`,
+ * `status`, `size`. Visual contract maps to `.input` from the canonical
+ * dxs-kintai design system.
+ *
+ *   <Textarea rows={5} resize="vertical" />
+ *   <Textarea autoSize={{ minRows: 3, maxRows: 8 }} showCount maxLength={500} />
+ */
+type TextareaResize = "none" | "vertical" | "horizontal" | "both";
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    size?: InputSize;
+    status?: InputStatus;
+    /** "none" by default — matches the canonical chrome. */
+    resize?: TextareaResize;
+    /** Auto-grow on content. `true` = grow indefinitely. */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /** Show character count in the bottom-right. */
+    showCount?: boolean;
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
+/**
+ * InputPassword — Input subtype with show/hide toggle.
+ *
+ * Mirrors the canonical password reveal at `K:comp-inputs.html:184-201`:
+ * a `<button class="pass-toggle">` absolute-positioned at `right:6px`,
+ * with an `Eye` / `EyeOff` icon flipping the underlying `<input>` type.
+ *
+ * Wraps `<Input>` so every base prop pass-through works (`size`,
+ * `status`, `prefix`, `addonBefore`, etc.). Pair with `<Checklist>`
+ * below to render password-strength rules.
+ *
+ * Controlled-or-uncontrolled reveal:
+ *   - omit `revealed` → internal state
+ *   - pass `revealed` + `onRevealChange` → fully controlled
+ *
+ * @example
+ *   <InputPassword placeholder="••••••••••" />
+ *
+ * @example with strength meter slot
+ *   <Field>
+ *     <Field.Label required>パスワード</Field.Label>
+ *     <InputPassword strengthMeter={<Checklist items={…} />} />
+ *   </Field>
+ */
+interface InputPasswordProps extends Omit<InputProps, "type"> {
+    /** Controlled reveal state. */
+    revealed?: boolean;
+    /** Default reveal state when uncontrolled. */
+    defaultRevealed?: boolean;
+    onRevealChange?: (next: boolean) => void;
+    /** Accessible label for the toggle button. Defaults to a translated string. */
+    toggleLabels?: {
+        show?: string;
+        hide?: string;
+    };
+    /** Slot rendered below the input — typically a `<Checklist>` of password rules. */
+    strengthMeter?: ReactNode;
+}
+declare const InputPassword: react.ForwardRefExoticComponent<Omit<InputPasswordProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * InputSearch — Input subtype with leading magnifier + optional clear-X.
+ *
+ * Mirrors the canonical search pattern used in `K:comp-pageheader.html`
+ * and `K:comp-topbar.html`. Wraps `<Input>` so every base prop
+ * pass-through works (`size`, `status`, etc.).
+ *
+ * Behaviour:
+ *   - Renders a leading `<Search>` icon as the `prefix` slot.
+ *   - Default `searchMode="submit"` fires `onSearch` only from the
+ *     search button or Enter key. Use `searchMode="change"` for local
+ *     in-memory filtering only.
+ *   - When `value` is non-empty and `allowClear` is true (default),
+ *     hides the custom suffix and renders a trailing `<X>` clear button that fires
+ *     `onChange({ target: { value: "" } })` and `onClear()`.
+ *
+ * Controlled-or-uncontrolled. Sets `type="search"` for native semantics
+ * (mobile keyboards, `<form>` reset behaviour).
+ *
+ * @example
+ *   <InputSearch placeholder="従業員を検索" />
+ *
+ * @example controlled
+ *   <InputSearch
+ *     value={query}
+ *     onChange={(e) => setQuery(e.target.value)}
+ *     onClear={() => setQuery("")}
+ *   />
+ */
+interface InputSearchProps extends Omit<InputProps, "type" | "prefix"> {
+    /** Show the trailing X clear button when value is non-empty. Default `true`. */
+    allowClear?: boolean;
+    /** Fired when the user clicks the clear button. */
+    onClear?: () => void;
+    /** Search execution mode. Default `submit` avoids request-per-keypress. */
+    searchMode?: "submit" | "change";
+    /** Fired when search should execute. */
+    onSearch?: (value: string) => void;
+    /** Custom leading icon — defaults to lucide `Search`. */
+    searchIcon?: React.ReactNode;
+}
+declare const InputSearch: react.ForwardRefExoticComponent<Omit<InputSearchProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * InputNumber — numeric input with optional ± step buttons and an
+ * optional display formatter / parser pair.
+ *
+ * Vocabulary per cardinal rule 23 §B:
+ *   • `value` / `defaultValue` / `onValueChange` (Radix-style)
+ *   • `size`: `"small" | "default" | "large"` (shared with Input)
+ *   • `status`: `"default" | "success" | "warning" | "error"`
+ *
+ * NOT Ant-shaped: no `controls` / `formatter` / `parser`. The
+ * display side is a single `format` callback; the inverse parse is
+ * an optional `parse` callback (only needed when `format` produces
+ * text the browser's `Number()` can no longer round-trip).
+ *
+ * DOM mirrors `.input` from `30-input.css` with two stacked step
+ * buttons absolutely positioned inside the wrapper.
+ */
+interface InputNumberProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    /** Increment applied by the ± buttons + arrow keys. Default 1. */
+    step?: number;
+    /** Round to this many decimal places when emitting / blurring. */
+    precision?: number;
+    size?: InputSize;
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string;
+    /** Show +/− step buttons (default true). */
+    showStepper?: boolean;
+    /** Optional display formatter (e.g., `n => \`¥\${n.toLocaleString()}\``). */
+    format?: (value: number) => string;
+    /** Optional parser (inverse of format). Defaults to stripping non-numeric chars. */
+    parse?: (text: string) => number | null;
+    className?: string;
+    status?: InputStatus;
+    /** Forwarded `name` for native form submission. */
+    name?: string;
+    /** Forwarded `id` for label binding. */
+    id?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+}
+declare const InputNumber: react.ForwardRefExoticComponent<InputNumberProps & react.RefAttributes<HTMLInputElement>>;
+
+type FormLayout = "vertical" | "horizontal" | "inline";
+interface FormProps<T extends FieldValues = FieldValues> extends Omit<ComponentProps<"form">, "onSubmit" | "defaultValue"> {
+    form?: UseFormReturn<T>;
+    defaultValues?: DefaultValues<T>;
+    resolver?: Resolver<T>;
+    mode?: UseFormProps<T>["mode"];
+    onSubmit?: (values: T) => void | Promise<void>;
+    /** Visual layout. Mobile-first: every layout collapses to vertical at `xs`;
+     * `horizontal` becomes label-left at `md`, `inline` becomes single-row at `sm`. */
+    layout?: FormLayout;
+    /** When set, every `<FormField>` inside this form renders its loading
+     * state (spinner by default, skeleton via `{ kind: "skeleton" }`).
+     * Each `<FormField>` can override with its own `loading` prop. */
+    loading?: LoadingProp;
+}
+/** Read the surrounding Form's loading state (used by `<FormField>`). */
+declare function useFormLoading(): LoadingProp | undefined;
+declare function Form<T extends FieldValues>({ form, defaultValues, resolver, mode, onSubmit, layout, loading, className, children, ...rest }: FormProps<T>): react_jsx_runtime.JSX.Element;
+
+interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    label?: ReactNode;
+    help?: ReactNode;
+    description?: ReactNode;
+    count?: {
+        current: number;
+        max?: number;
+        warnAt?: number;
+    };
+    required?: boolean;
+    optional?: boolean;
+    optionalLabel?: ReactNode;
+    tone?: FieldHelpTone;
+    children: ReactNode;
+}
+declare const Field: react.ForwardRefExoticComponent<FieldProps & react.RefAttributes<HTMLDivElement>>;
+interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Append a red asterisk (`<span class="req">*</span>`). */
+    required?: boolean;
+    /** Append a "(optional)" marker (`<span class="opt">(任意)</span>`). */
+    optional?: boolean;
+    /** Optional label for the optional badge — defaults to "(任意)". */
+    optionalLabel?: ReactNode;
+    /** Inline help icon — typically a tooltip handle. Provide a `<span>` or `<button>`. */
+    info?: ReactNode;
+    /** Trailing slot at the right edge (e.g. an inline "Forgot password?" link). */
+    extra?: ReactNode;
+}
+type FieldHelpTone = "default" | "info" | "warn" | "error" | "success";
+interface FieldHelpProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: FieldHelpTone;
+    /** Sets tone to `error` — shortcut. */
+    error?: boolean;
+    /** Sets tone to `warn` — shortcut. */
+    warning?: boolean;
+    /** Sets tone to `info` — shortcut. */
+    info?: boolean;
+    /** Sets tone to `success` — shortcut. */
+    success?: boolean;
+    /** Leading icon slot. */
+    icon?: ReactNode;
+}
+interface FieldCountProps extends HTMLAttributes<HTMLDivElement> {
+    current: number;
+    max?: number;
+    /** Threshold (0–1) above which the count flips to "warn" tone. Default `0.9`. */
+    warnAt?: number;
+}
+
+interface FormFieldProps<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>> {
+    name: TName;
+    label?: ReactNode;
+    description?: ReactNode;
+    required?: boolean;
+    optional?: boolean;
+    /** Override the auto-derived help tone (defaults to `"error"` when invalid,
+     * `"default"` when `description` is set, otherwise undefined). */
+    tone?: FieldHelpTone;
+    /** Per-field loading override. `true` → spinner. `{ kind: "skeleton" }` →
+     * skeleton placeholder (use during initial data fetch). When omitted,
+     * inherits from the surrounding `<Form loading={…}>`. */
+    loading?: LoadingProp;
+    children: ReactElement;
+}
+/**
+ * Form-wired Field. Reads value/onChange/error from the surrounding
+ * `<Form>` via react-hook-form's `useController`, then clones its single
+ * child with the right adapter:
+ *
+ *   - Checkbox / Switch     → checked + onCheckedChange
+ *   - InputNumber           → value (number) + onValueChange
+ *   - Select / AutoComplete / ColorPicker / RadioGroup / Rate / Slider /
+ *     Cascader / Transfer / TreeSelect → value + onValueChange
+ *   - default (Input / Textarea / InputSearch / etc.)
+ *                           → value + onChange(event)
+ */
+declare function FormField<T extends FieldValues = FieldValues, TName extends FieldPath<T> = FieldPath<T>>({ name, label, description, required, optional, tone, loading, children, }: FormFieldProps<T, TName>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Transfer — dual list-box. Items in the left ("source") column move
+ * to the right ("target") column via arrow buttons; `value` tracks
+ * the keys currently on the right.
+ *
+ * Vocabulary per cardinal rule 23 §B:
+ *   • `value` / `defaultValue` / `onValueChange` (Radix-style)
+ *     — NOT `targetKeys`. The string-array carries "the chosen set",
+ *     which on this primitive happens to be the right column.
+ *   • `size`: `"small" | "default" | "large"`
+ *   • `disabled` boolean
+ *
+ * DOM mirrors `.transfer` / `.transfer-list` / `.transfer-actions`
+ * from `30-input.css`.
+ */
+interface TransferItem {
+    key: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+type TransferSize = "small" | "default" | "large";
+interface TransferProps {
+    dataSource: TransferItem[];
+    /** Keys currently on the right ("target") column. */
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** Headers for the two columns — `[left, right]`. */
+    titles?: [ReactNode, ReactNode];
+    size?: TransferSize;
+    disabled?: boolean;
+    className?: string;
+    /** Search box above each column. */
+    showSearch?: boolean;
+    /** Placeholder for the search input when `showSearch` is true. */
+    searchPlaceholder?: string;
+    /** Renderer for each item label (defaults to `item.label`). */
+    renderItem?: (item: TransferItem) => ReactNode;
+}
+declare const Transfer: react.ForwardRefExoticComponent<TransferProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * LocaleTabs — bare tab strip with status dots per locale.
+ *
+ * Mirrors the `K:comp-inputs.html:248-284` reference (pattern ①, "Locale
+ * tabs"). This primitive is the **header-only** subset: the consumer
+ * wires the panel below. For the full input + panel composition see
+ * the `LocaleInput` composite under `components/composites/locale-input`.
+ *
+ * Each tab carries a coloured dot signalling translation status:
+ *   - `translated` → success (green)
+ *   - `draft`      → warning (amber, stale relative to base)
+ *   - `missing`    → destructive (red, no translation yet)
+ *
+ * The base locale (first in `locales`, or `baseLocale` if provided)
+ * carries a subtle "(基準 / base)" suffix so reviewers see the fallback
+ * source at a glance.
+ *
+ * @example
+ *   <LocaleTabs
+ *     locales={[
+ *       { code: "ja", label: "日本語", status: "translated" },
+ *       { code: "en", label: "English", status: "translated" },
+ *       { code: "vi", label: "Tiếng Việt", status: "draft" },
+ *       { code: "zh", label: "简体中文", status: "missing" },
+ *     ]}
+ *     baseLocale="ja"
+ *     meta="3 / 4 翻訳済"
+ *     onAdd={() => openAddLocale()}
+ *   />
+ */
+type LocaleTabStatus = "translated" | "draft" | "missing";
+interface LocaleTabItem {
+    code: string;
+    label?: ReactNode;
+    status?: LocaleTabStatus;
+}
+interface LocaleTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    locales: LocaleTabItem[];
+    /** Controlled active locale code. */
+    value?: string;
+    /** Uncontrolled initial locale code. */
+    defaultValue?: string;
+    onChange?: (next: string) => void;
+    /** Locale labelled "(基準)" in its tab. Defaults to `locales[0].code`. */
+    baseLocale?: string;
+    /** Custom label for the base-locale suffix. Defaults to "(基準)". */
+    baseLabel?: ReactNode;
+    /** Right-side meta string (e.g. "3 / 4 翻訳済"). */
+    meta?: ReactNode;
+    /** Click handler for the "⊕ 追加" button — when omitted, no button renders. */
+    onAdd?: () => void;
+    /** Label for the add button. Defaults to "⊕ 追加". */
+    addLabel?: ReactNode;
+}
+declare const LocaleTabs: react.ForwardRefExoticComponent<LocaleTabsProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Checklist — vertical list of pass/fail rules with per-row icon.
+ *
+ * Mirrors the canonical `.checklist` pattern from
+ * `K:comp-inputs.html:196-200` (password-rules) + the CSS atom in
+ * `shell.css` (`.checklist`, `.checklist li.ok`, `.checklist li.bad`).
+ * Each row carries a leading icon (check / x by default) and a label;
+ * row tone follows the canonical semantic palette (`--success` for ok,
+ * `--destructive` for bad, `--muted-foreground` for neutral / pending).
+ *
+ * Typical uses: password-rule hints, validation summaries, "tasks
+ * completed" lists, capability matrices.
+ *
+ * @example
+ *   <Checklist
+ *     items={[
+ *       { ok: true,  label: "8文字以上" },
+ *       { ok: true,  label: "大文字・小文字を含む" },
+ *       { ok: false, label: "記号 (! @ # …) を 1 つ以上" },
+ *     ]}
+ *   />
+ *
+ * @example with custom icons + neutral pending state
+ *   <Checklist
+ *     items={[
+ *       { ok: true,    label: "Plan approved",   icon: <Check size={11} /> },
+ *       { ok: null,    label: "Awaiting review", icon: <Clock size={11} /> },
+ *       { ok: false,   label: "Budget exceeded" },
+ *     ]}
+ *   />
+ */
+interface ChecklistItem {
+    /** `true` → ok / success; `false` → bad / destructive; `null` → neutral / pending. */
+    ok: boolean | null;
+    label: ReactNode;
+    /** Override the default check / x icon. */
+    icon?: ReactNode;
+    /** Optional trailing hint text. */
+    hint?: ReactNode;
+}
+interface ChecklistProps extends HTMLAttributes<HTMLUListElement> {
+    items: ChecklistItem[];
+    /** Icon size in px — defaults to 11 (matches canonical). */
+    iconSize?: number;
+}
+declare const Checklist: react.ForwardRefExoticComponent<ChecklistProps & react.RefAttributes<HTMLUListElement>>;
+
+/**
+ * Spinner — small inline circular loading indicator.
+ *
+ * Renders the canonical `.spinner` family from shell.css. Uses
+ * `border-top-color: var(--info)` rotation; respects
+ * `prefers-reduced-motion` via the keyframe declaration in CSS.
+ *
+ * Size mapping:
+ *   - `sm`      → 10px (inline with `.help` lines)
+ *   - `md`      → 12px (default, inline with `.input` suffix slot)
+ *   - `lg`      → 16px (inline with `.btn` content)
+ *
+ * The `tone` prop selects a semantic role: `info` (default), `muted`,
+ * `primary`, `success`, `warning`, `destructive`. Each tone re-targets
+ * `border-top-color` to the matching semantic variable via the
+ * `.spinner-tone-*` class.
+ *
+ * @example
+ *   <Spinner />
+ *   <Spinner size="large" tone="primary" aria-label="Saving…" />
+ */
+/** Alias of the shared `IconSizeProp` — Spinner is icon-symbol shaped. */
+type SpinnerSize = IconSizeProp;
+/**
+ * Full semantic palette + `"muted"`. `default` falls back to `info`'s
+ * CSS class for backwards compatibility (existing CSS chain was rooted
+ * on info). `secondary` is excluded — it's Typography text-dimming
+ * which doesn't translate to a rotating arc.
+ */
+type SpinnerTone = Exclude<ColorProp, "secondary"> | "muted";
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** 10 / 12 / 16 px — defaults to `md`. */
+    size?: SpinnerSize;
+    /** Color role for the rotating arc; defaults to `info`. */
+    tone?: SpinnerTone;
+    /** Accessible label. When omitted, falls back to `aria-hidden`. */
+    "aria-label"?: string;
+}
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
+
+type IconButtonVariant = "secondary" | "ghost" | "primary";
+/** Alias of the shared `IconSizeProp` (`sm | md | lg`) — IconButton is
+ *  icon-symbol shaped, same axis as Spinner. Renamed `"default"` → `"md"`
+ *  so the verb stays consistent across icon-only primitives. */
+type IconButtonSize = IconSizeProp;
+interface IconButtonProps extends Omit<ComponentProps<"button">, "children"> {
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    asChild?: boolean;
+    children?: ReactNode;
+}
+declare const IconButton: react.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * PageHeader — canonical page chrome strip with title + subtitle +
+ * breadcrumb slot + action slot.
+ *
+ * Mirrors `K:comp-pageheader.html` (three reference patterns: compact,
+ * overflow, stacked). The atomic CSS classes (`.ph`, `.ph-bar`,
+ * `.ph-title`, `.ph-actions`, `.ph-tabs`, `.ph-body`) live in
+ * `shell.css`. React owns the slot composition — visual values stay in
+ * tokens.
+ *
+ * Variant semantics:
+ *
+ *   - `compact`  → 1 row, title truncates with ellipsis, actions never
+ *                  wrap. Use for index pages with a single primary
+ *                  CTA + 0–2 secondary actions.
+ *   - `overflow` → 1 row, primary action + 2–3 icon buttons + "…"
+ *                  overflow. Same height as `compact`; the variant flag
+ *                  just signals intent in the JSX.
+ *   - `stacked`  → 2 rows; meta / breadcrumb + tabs go on a second
+ *                  row. Use when the page navigates between sub-views.
+ *
+ * Slots:
+ *   - `breadcrumb`  → rendered above the title (xs muted text per
+ *                     canonical). Passing this auto-bumps the layout to
+ *                     "stacked" if `variant` is "compact".
+ *   - `title`       → h1 (16px / 500 weight, ellipsis truncate)
+ *   - `subtitle`    → adjacent baseline text (`.sub`, xs muted)
+ *   - `actions`     → right-aligned slot, flex-shrink:0 / no wrap
+ *   - `tabs`        → second-row tab strip (`.ph-tabs`); pair with
+ *                     `<Tabs variant="line">` or a list of `<a>`
+ *   - `body`        → third-row body strip (`.ph-body`), small muted
+ *                     descriptive copy
+ *
+ * @example compact
+ *   <PageHeader
+ *     title="従業員シフト · カレンダー"
+ *     subtitle="月単位の一括割当"
+ *     actions={<><Button size="small">＋ 一括割当</Button></>}
+ *   />
+ *
+ * @example stacked + tabs
+ *   <PageHeader
+ *     variant="stacked"
+ *     breadcrumb={<Breadcrumb>...</Breadcrumb>}
+ *     title="店舗別 · 月次レポート"
+ *     actions={...}
+ *     tabs={<nav>...</nav>}
+ *   />
+ */
+type PageHeaderVariant = "compact" | "overflow" | "stacked";
+type PageHeaderPadding = "tight" | "default" | "cozy" | "none";
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    /** Breadcrumb slot rendered above the title (auto-stacks). */
+    breadcrumb?: ReactNode;
+    /** Right-aligned action slot — icon buttons, buttons, segmented controls. */
+    actions?: ReactNode;
+    /** Tab strip on a dedicated second row (`.ph-tabs`). */
+    tabs?: ReactNode;
+    /** Descriptive body strip below the bar (`.ph-body`). */
+    body?: ReactNode;
+    /** Layout variant — defaults to `compact`. */
+    variant?: PageHeaderVariant;
+    /** Internal-spacing density. Shares the vocabulary with `<Card>`
+     * (cardinal rule 23 §B): tight (10/12) · default (14/16) · cozy
+     * (20/24) · none (consumer pads the inside). Default `default`. */
+    padding?: PageHeaderPadding;
+}
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLElement>>;
+
 /**
  * Label — form-field label. Wraps Radix Label so `htmlFor` /
  * click-to-focus works out of the box. Maps to `.label` in tokens.css.
@@ -120,41 +830,312 @@ declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.Re
  */
 declare const Label: react.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & react.RefAttributes<HTMLLabelElement>, "ref"> & react.RefAttributes<HTMLLabelElement>>;
 
+type TabsVariant = "line" | "pills";
+type TabsOrientation = "horizontal" | "vertical";
+type TabsPlacement = "top" | "right" | "bottom" | "left";
+interface TabsItem {
+    value: string;
+    label: ReactNode;
+    content?: ReactNode;
+    disabled?: boolean;
+}
+interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "children"> {
+    items: TabsItem[];
+    variant?: TabsVariant;
+    placement?: TabsPlacement;
+    listClassName?: string;
+    contentClassName?: string;
+    children?: ReactNode;
+}
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+
 /**
- * Tabs — Radix-backed tab strip styled with the canonical `.tabs` /
- * `.tab` CSS from tokens.css. Keyboard navigation + ARIA come from
- * Radix; the visual contract stays in the design tokens.
+ * Avatar — Ant-Design-shaped: shape + size + icon + image + initials.
  *
- * @example
- *   <Tabs defaultValue="open">
- *     <TabsList>
- *       <TabsTrigger value="open">Open</TabsTrigger>
- *       <TabsTrigger value="closed">Closed</TabsTrigger>
- *     </TabsList>
- *     <TabsContent value="open">...</TabsContent>
- *     <TabsContent value="closed">...</TabsContent>
- *   </Tabs>
+ *   <Avatar size="large" shape="square" src={url} />
+ *   <Avatar size={48} icon={<UserOutlined />} />
+ *   <Avatar shape="square" color="oklch(56% 0.15 240)">F</Avatar>
  */
-declare const Tabs: react.ForwardRefExoticComponent<TabsPrimitive.TabsProps & react.RefAttributes<HTMLDivElement>>;
-declare const TabsList: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-declare const TabsContent: react.ForwardRefExoticComponent<TabsPrimitive.TabsContentProps & react.RefAttributes<HTMLDivElement>>;
+type AvatarShape = "circle" | "square";
+type AvatarSizeToken = "xs" | "sm" | "default" | "lg" | "xl";
+type AvatarSize = AvatarSizeToken | number;
+interface AvatarProps extends Omit<ComponentProps<"span">, "color"> {
+    /** Shape — circle (default) or square (rounded-md). */
+    shape?: AvatarShape;
+    /** Token name (xs|sm|default|lg|xl) or pixel number. */
+    size?: AvatarSize;
+    /** Image URL — wins over `icon` / children. */
+    src?: string;
+    alt?: string;
+    /** Icon slot — wins over children when `src` is unset. */
+    icon?: ReactNode;
+    /**
+     * Display name — first two initials are rendered as the fallback
+     * when no `src` / `icon` / children are passed. Mirrors the
+     * design-handoff `<Avatar name="Satoshi F" />` shape (ui-kit.jsx).
+     */
+    name?: string;
+    /**
+     * Background colour — used for initials avatars to tint the bg
+     * with a brand hue. Accepts any CSS colour value.
+     */
+    color?: string;
+    /** Foreground colour override (rare; defaults follow `color`). */
+    textColor?: string;
+    /**
+     * Variant alias for legacy callers. `brand` maps to color =
+     * `var(--brand)` + textColor = `var(--primary-foreground)`.
+     */
+    variant?: "default" | "brand";
+}
+declare function Avatar({ shape, size, src, alt, icon, name, color, textColor, variant, className, style, children, ...rest }: AvatarProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Avatar — round chip with initials or an image. Maps to `.avatar`
- * + `.avatar.brand` in tokens.css.
+ * Statistic — Ant-Design KPI tile.
  *
- * @example
- *   <Avatar>PT</Avatar>
- *   <Avatar variant="brand">G</Avatar>
+ *   <Statistic title="Active users" value={1024} />
+ *   <Statistic title="Revenue" value={1234.56} precision={2} prefix="¥" />
+ *   <Statistic title="Uptime" value={99.95} suffix="%" />
+ *   <Statistic title="MRR" value={5800000} bordered />
+ *
+ * The `bordered` prop renders the tile with its own card-style frame
+ * (border + radius + padding + background) so consumers don't need to
+ * wrap with `<Card>` just to get a surface. Default `false` keeps the
+ * tile transparent for use inside grids / dashboards where the parent
+ * surface already provides the chrome.
  */
-interface AvatarProps extends ComponentProps<"span"> {
-    variant?: "default" | "brand";
-    /** Optional image url; falls back to children (initials) when missing. */
-    src?: string;
-    alt?: string;
+interface StatisticProps extends Omit<ComponentProps<"div">, "title" | "prefix"> {
+    title?: ReactNode;
+    value: number | string;
+    /** Decimal places when value is a number. */
+    precision?: number;
+    /** Prepended to value (e.g. "¥", icon). */
+    prefix?: ReactNode;
+    /** Appended to value (e.g. "%", "/mo"). */
+    suffix?: ReactNode;
+    /** Locale-aware grouping (default `true` — uses Intl.NumberFormat). */
+    groupSeparator?: boolean;
+    /** Custom format function. Overrides precision + groupSeparator. */
+    formatter?: (value: number | string) => ReactNode;
+    /** Text alignment for the tile (default `left`). */
+    align?: "left" | "right" | "center";
+    /** Font size of the value (px). */
+    valueSize?: number;
+    /** Render the tile as a standalone card surface (border + radius +
+     * padding + bg). Default `false` — the tile is transparent so it
+     * composes inside grids that supply their own chrome. */
+    bordered?: boolean;
+}
+declare function Statistic({ title, value, precision, prefix, suffix, groupSeparator, formatter, align, valueSize, bordered, className, style, ...rest }: StatisticProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Empty — Ant-Design empty-state placeholder.
+ *
+ *   <Empty description="No data" />
+ *   <Empty image={<CustomIllustration />} description="Nothing here yet">
+ *     <Button>Create one</Button>
+ *   </Empty>
+ */
+interface EmptyProps extends ComponentProps<"div"> {
+    /** Image / illustration / icon at the top. */
+    image?: ReactNode;
+    /** Text below the image (default `null` — no text). */
+    description?: ReactNode;
+    /** Action area below description (typically a button). */
+    children?: ReactNode;
+}
+declare function Empty({ image, description, children, className, ...rest }: EmptyProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Alert — Ant-Design banner-style notice.
+ *
+ *   <Alert color="info" title="5月度の締めは 5/31 (土) 23:59 です" />
+ *   <Alert
+ *     color="warning"
+ *     title="3 件の打刻漏れがあります"
+ *     description="本日中に確認してください。"
+ *     actions={<Button size="small">確認する</Button>}
+ *     closable
+ *     onClose={() => …}
+ *   />
+ *   <Alert variant="banner" color="info" title="メンテナンス予定 …" />
+ *
+ * Concept mapping (Ant → @godxjp/ui vocabulary per cardinal rule 23 §B):
+ *   - Ant `type`        → `color`  (semantic role)
+ *   - Ant `banner`      → `variant="banner"` (full-width borderless)
+ *   - Ant `message`     → `title`  (ReactNode slot)
+ *   - Ant `description` → `description` (ReactNode slot)
+ *   - Ant `action`      → `actions` (plural — matches Card)
+ *   - Ant `showIcon`    → boolean (omit `icon` + set false → no icon)
+ *   - Ant `closeIcon`   → not exposed; default × ships
+ *   - Ant `closable`    → already vocab (Tag uses it)
+ *   - Ant `onClose`     → onClose callback
+ */
+/** Alias of the shared `FeedbackColorProp` — same shape as
+ *  ResultColor / ProgressColor; kept as a named export for back-compat. */
+type AlertColor = FeedbackColorProp;
+type AlertVariant = "outlined" | "banner";
+interface AlertProps extends Omit<ComponentProps<"div">, "color" | "title"> {
+    /** Semantic role. Defaults to `default`. */
+    color?: AlertColor;
+    /** Outlined card (default) or full-width banner. */
+    variant?: AlertVariant;
+    /** Primary message. */
+    title?: ReactNode;
+    /** Optional secondary body text. */
+    description?: ReactNode;
+    /** Leading icon. Omit to auto-pick a semantic icon for the color. */
+    icon?: ReactNode;
+    /** Render an × close button. */
+    closable?: boolean;
+    /** Called when the × close button is clicked. */
+    onClose?: () => void;
+    /** Footer action slot (typically a Button group). */
+    actions?: ReactNode;
+}
+declare const Alert: react.ForwardRefExoticComponent<Omit<AlertProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Result — page-level outcome surface (Ant-Design `Result` shape).
+ *
+ *   <Result
+ *     color="success"
+ *     title="ご注文が完了しました"
+ *     description="番号 No. 2026-05-17-0042 でお手元に届きます。"
+ *     extra={<Button>注文履歴を見る</Button>}
+ *   />
+ *
+ * Concept mapping (Ant → @godxjp/ui vocabulary per cardinal rule 23 §B):
+ *   - Ant `status`       → `color`        (semantic role; HTTP-status
+ *                                          shortcuts dropped — consumers
+ *                                          wire their own icon)
+ *   - Ant `title`        → `title`        (ReactNode slot)
+ *   - Ant `subTitle`     → `description`  (matches Alert vocabulary)
+ *   - Ant `icon`         → `icon`         (ReactNode slot)
+ *   - Ant `extra`        → `extra`        (matches Card footer slot)
+ */
+/** Alias of the shared `FeedbackColorProp` — same shape as
+ *  AlertColor / ProgressColor; kept as a named export for back-compat. */
+type ResultColor = FeedbackColorProp;
+interface ResultProps extends Omit<ComponentProps<"div">, "color" | "title"> {
+    /** Semantic role. Defaults to `info`. */
+    color?: ResultColor;
+    /** Primary headline. */
+    title?: ReactNode;
+    /** Secondary body text. */
+    description?: ReactNode;
+    /** Leading visual. Omit to auto-pick a semantic icon for the color. */
+    icon?: ReactNode;
+    /** Action area below the description (typically a Button group). */
+    extra?: ReactNode;
 }
-declare function Avatar({ variant, src, alt, className, children, ...rest }: AvatarProps): react_jsx_runtime.JSX.Element;
+declare const Result: react.ForwardRefExoticComponent<Omit<ResultProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Typography — Title / Paragraph / Text / Link primitive family.
+ *
+ *   <Typography.Title size={2}>Heading</Typography.Title>
+ *   <Typography.Paragraph>Lorem ipsum…</Typography.Paragraph>
+ *   <Typography.Text color="secondary" strong>label</Typography.Text>
+ *   <Typography.Text code>code</Typography.Text>
+ *   <Typography.Text copyable>kb@famgia.com</Typography.Text>
+ *   <Typography.Text truncate>truncate me</Typography.Text>
+ *   <Typography.Paragraph truncate={{ rows: 3 }}>multi-line clamp</Typography.Paragraph>
+ *   <Typography.Link href="/x">jump</Typography.Link>
+ *
+ * Vocabulary (per CLAUDE.md §23.B):
+ *   - `size` (1..5) — dimensional scale for Title; maps to the canon
+ *     heading mapping declared in `theme.css`. Same name as the
+ *     framework-wide `size` vocabulary entry (Button, Input, Avatar,
+ *     Tag, Badge, IconButton).
+ *   - `color` — semantic role; identical enum to Tag/Badge/Alert.
+ *   - `copyable` / `disabled` — adjective-boolean state, same pattern
+ *     as Tag's `closable` / Input's `disabled`.
+ *   - `truncate` — `true | { rows: N }`; framework-owned name (NOT
+ *     Ant's `ellipsis`).
+ *   - `strong` / `italic` / `underline` / `del` / `mark` / `code` /
+ *     `keyboard` — HTML5 semantic inline elements; conveniences, not
+ *     Ant-specific.
+ *
+ * Cardinal rules honoured:
+ *   §14 — purely structural primitive (no Radix peer needed)
+ *   §21 — every axis (theme/accent/density/font-size) flows via tokens
+ *   §22 — every literal mapped to an existing token; no new tokens;
+ *         heading scale follows the canon mapping declared in
+ *         `theme.css` (h1=4xl, h2=2xl, h3=xl, h4=lg, h5=md).
+ *   §23 — vocabulary first; no Ant-named props leak in.
+ *   §25 — primitive is the canon; all visuals live in `.typography*`
+ *         classes in `shell.css`. No inline `style={{...}}`.
+ */
+type TypographyColor = "default" | "secondary" | "success" | "warning" | "attention" | "info" | "destructive";
+/** Single-line truncate (`true`) or multi-line clamp (`{ rows: N }`). */
+type TypographyTruncate = boolean | {
+    rows?: number;
+};
+interface TypographyCommonProps {
+    color?: TypographyColor;
+    disabled?: boolean;
+    /** Bold weight via `--font-weight-bold`. */
+    strong?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    /** Line-through. */
+    del?: boolean;
+    /** Highlight pill — wa-iro 山吹 (warning) tint. */
+    mark?: boolean;
+    /** Render as inline `<code>` chip. */
+    code?: boolean;
+    /** Render as inline `<kbd>` chip. */
+    keyboard?: boolean;
+    /** Truncate to one or more rows with ellipsis. */
+    truncate?: TypographyTruncate;
+    /** Show a copy icon-button after the text. */
+    copyable?: boolean | {
+        text?: string;
+        onCopy?: () => void;
+    };
+}
+type TitleSize = 1 | 2 | 3 | 4 | 5;
+interface TitleProps extends Omit<ComponentProps<"h1">, "color">, TypographyCommonProps {
+    /** Heading scale — renders `<h{size}>` and binds the canon
+     * font-size token. `1` = `--text-4xl` (h1 cap), `2` = `--text-2xl`
+     * (h2), `3` = `--text-xl` (page title), `4` = `--text-lg`
+     * (subheading), `5` = `--text-md` (content body). */
+    size?: TitleSize;
+}
+interface ParagraphProps extends Omit<ComponentProps<"p">, "color">, TypographyCommonProps {
+}
+interface TextProps extends Omit<ComponentProps<"span">, "color">, TypographyCommonProps {
+}
+interface LinkProps extends Omit<ComponentProps<"a">, "color">, Omit<TypographyCommonProps, "color"> {
+    /** Override link colour (default `--primary`). Use
+     * `color="destructive"` etc. when the link's semantic role is
+     * non-default. */
+    color?: TypographyColor;
+}
+declare const Typography: {
+    Title: react.ForwardRefExoticComponent<Omit<TitleProps, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+    Paragraph: react.ForwardRefExoticComponent<Omit<ParagraphProps, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+    Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+    Link: react.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & react.RefAttributes<HTMLAnchorElement>>;
+};
+
+interface DescriptionsOption {
+    label: ReactNode;
+    value: ReactNode;
+    span?: number;
+    className?: string;
+}
+interface DescriptionsProps extends Omit<ComponentProps<"div">, "title"> {
+    title?: ReactNode;
+    extra?: ReactNode;
+    items: DescriptionsOption[];
+    column?: number;
+    layout?: "horizontal" | "vertical";
+    bordered?: boolean;
+    size?: "small" | "default" | "large";
+}
+declare function Descriptions({ title, extra, items, column, layout, bordered, size, className, style, ...rest }: DescriptionsProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Separator — horizontal / vertical divider. Wraps Radix Separator for
@@ -163,104 +1144,1593 @@ declare function Avatar({ variant, src, alt, className, children, ...rest }: Ava
  */
 declare const Separator: react.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+interface PopoverProps extends Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>, "children"> {
+    trigger?: ReactNode;
+    children?: ReactNode;
+    align?: ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>["align"];
+    side?: ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>["side"];
+    sideOffset?: number;
+    className?: string;
+    contentProps?: Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, "children">;
+}
+declare const Popover: react.ForwardRefExoticComponent<PopoverProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DropdownMenuOption {
+    key: string;
+    label?: ReactNode;
+    onSelect?: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>["onSelect"];
+    disabled?: boolean;
+    variant?: "default" | "destructive";
+    shortcut?: ReactNode;
+    type?: "item" | "label" | "separator";
+}
+interface DropdownMenuProps extends Omit<ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>, "children"> {
+    trigger: ReactNode;
+    items: DropdownMenuOption[];
+    align?: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>["align"];
+    sideOffset?: number;
+    contentClassName?: string;
+}
+declare function DropdownMenu({ trigger, items, align, sideOffset, contentClassName, ...rootProps }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+
 /**
- * Popover — Radix-backed floating panel anchored to a trigger element.
- * Styled with the canonical `.popover-content` class from tokens.css
- * so the visual contract stays in the design tokens.
+ * Calendar — accessible date grid built on React Aria Components.
+ *
+ * Replaces the prior `react-day-picker` wrapper. The Adobe React
+ * Aria stack is the modern shadcn / Radix-ecosystem recommendation
+ * for date input: ARIA APG-compliant, full keyboard nav (arrow keys
+ * / PageUp/PageDown / Home/End), locale-aware via `react-aria-i18n`,
+ * and timezone-correct via `@internationalized/date`.
+ *
+ * Two exports:
+ *
+ *   - `<Calendar>` — single date selection. `value` is a
+ *     `@internationalized/date` `CalendarDate` (or null); `onChange`
+ *     receives the same shape. Convert to/from JS `Date` with
+ *     `parseDate`, `today`, `getLocalTimeZone` from `@internationalized/date`.
+ *
+ *   - `<RangeCalendar>` — contiguous range selection. `value` is
+ *     `{ start: CalendarDate, end: CalendarDate } | null`.
  *
  * @example
- *   <Popover>
- *     <PopoverTrigger asChild>
- *       <Button variant="ghost">Open</Button>
- *     </PopoverTrigger>
- *     <PopoverContent>…body…</PopoverContent>
- *   </Popover>
+ *   import { Calendar } from "@godxjp/ui"
+ *   import { today, getLocalTimeZone } from "@internationalized/date"
+ *
+ *   const [value, setValue] = useState<CalendarDate | null>(
+ *     today(getLocalTimeZone())
+ *   )
+ *   <Calendar value={value} onChange={setValue} aria-label="Pick a date" />
+ *
+ * @see https://react-spectrum.adobe.com/react-aria/Calendar.html
  */
-declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
-declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface CalendarProps<T extends DateValue = DateValue> extends Omit<CalendarProps$1<T>, "children"> {
+    className?: string;
+}
+declare function Calendar<T extends DateValue = DateValue>({ className, ...rest }: CalendarProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DialogProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
+    trigger?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+    contentProps?: Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "children" | "className">;
+    form?: FormHTMLAttributes<HTMLFormElement>;
+}
+declare function Dialog({ trigger, title, description, footer, children, className, contentProps, form, ...rootProps }: DialogProps): react_jsx_runtime.JSX.Element;
+
+type SheetSide = "top" | "right" | "bottom" | "left";
+interface SheetProps extends Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, "children"> {
+    trigger?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+    side?: SheetSide;
+    className?: string;
+    contentProps?: Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "children">;
+    form?: FormHTMLAttributes<HTMLFormElement>;
+}
+declare const Sheet: react.ForwardRefExoticComponent<SheetProps & react.RefAttributes<HTMLDivElement>>;
+
+interface AlertDialogProps extends Omit<ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>, "children"> {
+    trigger?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    cancel?: ReactNode;
+    action?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+    contentProps?: Omit<ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, "children">;
+}
+declare const AlertDialog: react.ForwardRefExoticComponent<AlertDialogProps & react.RefAttributes<HTMLDivElement>>;
 
 /**
- * DropdownMenu — Radix-backed action menu opened from a trigger
- * (kebab, caret, button…). Styled via canonical `.dropdown-menu-*`
- * classes from tokens.css.
+ * Select — single-select picker.
  *
- * Items support `variant="destructive"` for dangerous actions and
- * `inset` for left-padding alignment when icons aren't on every row.
+ *   <Select options={[…]} value={…} onValueChange={…} placeholder="…" />
  *
- * @example
- *   <DropdownMenu>
- *     <DropdownMenuTrigger asChild>
- *       <Button variant="ghost"><MoreVertical /></Button>
- *     </DropdownMenuTrigger>
- *     <DropdownMenuContent align="end">
- *       <DropdownMenuItem onSelect={onEdit}>Edit</DropdownMenuItem>
- *       <DropdownMenuSeparator />
- *       <DropdownMenuItem variant="destructive" onSelect={onDelete}>
- *         Delete
- *       </DropdownMenuItem>
- *     </DropdownMenuContent>
- *   </DropdownMenu>
- */
-declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
-declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuPortal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
-declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
-declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-    variant?: "default" | "destructive";
-} & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
-declare function DropdownMenuShortcut({ className, ...rest }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+ * Pass `searchable` for a filterable variant backed by cmdk + Popover
+ * (replaces the former standalone Combobox primitive):
+ *
+ *   <Select options={…} value={…} onValueChange={…} searchable
+ *           searchPlaceholder="Find…" emptyLabel="No matches" />
+ */
+interface SelectOption {
+    value: string;
+    /** Display content — usually a string, but ReactNode is fine for
+     * icon + label compositions. When `searchable`, string labels are
+     * used as filter keywords automatically. */
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface SelectOptionGroup {
+    label: ReactNode;
+    options: SelectOption[];
+}
+type SelectOptions = ReadonlyArray<SelectOption | SelectOptionGroup>;
+interface SelectProps extends Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Root>, "children"> {
+    options: SelectOptions;
+    placeholder?: ReactNode;
+    triggerClassName?: string;
+    contentClassName?: string;
+    /** Render a searchable variant (cmdk + Popover) instead of Radix Select. */
+    searchable?: boolean;
+    /** Search input placeholder (searchable mode only). */
+    searchPlaceholder?: string;
+    /** Shown when the filter matches nothing (searchable mode only). */
+    emptyLabel?: ReactNode;
+    /** Render a disabled loading row instead of options (searchable mode only). */
+    loading?: boolean;
+    /** Loading row text (searchable mode only). */
+    loadingLabel?: ReactNode;
+}
+declare function Select({ options, placeholder, triggerClassName, contentClassName, searchable, searchPlaceholder, emptyLabel, loading, loadingLabel, ...rest }: SelectProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Switch — boolean toggle (Radix). Styled with `.switch-root` / `.switch-thumb`
+ * in tokens.css.
+ */
+declare const Switch: react.ForwardRefExoticComponent<Omit<SwitchPrimitive.SwitchProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
 /**
- * Calendar — react-day-picker grid themed with brand tokens via the
- * canonical `.calendar` class from tokens.css. Caller controls
- * mode/selected/onSelect through DayPicker's standard props.
+ * Checkbox — tri-state capable (checked / unchecked / indeterminate).
  *
- * Locale + week-start are inherited from i18next / browser by default;
- * pass DayPickerProps explicitly to override (e.g. `weekStartsOn={1}`
- * for Monday-first).
+ * Two consumption modes (per cardinal rule 23 + rule 31 — no parallel
+ * convenience wrappers):
  *
- * @example
- *   const [date, setDate] = useState<Date>()
- *   <Calendar mode="single" selected={date} onSelect={setDate} />
+ *   1. With label (preferred, Ant canonical) — pass children as the
+ *      label text:
+ *
+ *        <Checkbox defaultChecked>利用規約に同意する</Checkbox>
+ *
+ *      The primitive wraps the box + label in a single `<label>` so
+ *      clicking the text toggles the checkbox, ARIA labelling is
+ *      automatic, and the consumer never writes
+ *      `<label><Checkbox /><span>…</span></label>` ceremony.
+ *
+ *   2. Box-only (advanced) — no children. Use when the label lives
+ *      elsewhere (table cell header, custom layout) and you wire
+ *      `aria-labelledby` / `aria-label` yourself:
+ *
+ *        <th><Checkbox aria-label="Select all" /></th>
+ *
+ * Uses `.checkbox-*` classes from tokens.css. The box is 1rem (16px
+ * @ base) per industry canon (shadcn / Ant / Tailwind).
  */
-declare function Calendar({ className, showOutsideDays, ...rest }: DayPickerProps): react_jsx_runtime.JSX.Element;
-
-interface TimeInputProps {
-    /** Current time value in `"HH:mm"` (24-hour) format. */
-    value?: string;
-    /** Fired on blur with the validated `"HH:mm"` string. */
-    onChange?: (time: string) => void;
-    /** Additional class name applied to the input element. */
+interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    /** Label text rendered to the right of the box. When provided, the
+     * primitive wraps both in a single `<label>` so clicking the text
+     * toggles the checkbox. */
+    children?: ReactNode;
+    /** Class merged onto the OUTER `<label>` when `children` is set,
+     * or onto the box `<button>` otherwise. */
     className?: string;
-    /** Disable input + propagate aria-disabled. */
+    /** Class merged onto the inner box (when `children` is set). */
+    boxClassName?: string;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * CheckboxGroup — wraps a set of `<Checkbox value="…" />` items into a
+ * single selection axis. Compositional (children) OR data-driven
+ * (`options`) per cardinal rule 23 §A — one concept per prop.
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `value` / `defaultValue` / `onValueChange` — Radix-style
+ *     controlled / uncontrolled selection (array of selected values).
+ *     NEVER `checked` / `selectedKeys` aliases.
+ *   - `orientation` — "horizontal" (default) | "vertical".
+ *   - `size` — "small" | "default" | "large" (forwarded via context).
+ *   - `disabled` — applies to every item.
+ *
+ * Visual contract lives in `.checkbox-group` (shell.css) — flex
+ * direction flips on `data-orientation`.
+ */
+type CheckboxGroupSize = "small" | "default" | "large";
+type CheckboxGroupOrientation = "horizontal" | "vertical";
+interface CheckboxOption {
+    value: string;
+    label: ReactNode;
     disabled?: boolean;
-    /** Optional placeholder (defaults to "HH:mm"). */
-    placeholder?: string;
-    /** Optional id used for label association. */
-    id?: string;
-    /** Optional name used in form submissions. */
+}
+interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /** Data-driven items. Alternative to passing `<Checkbox value="…" />` children. */
+    options?: CheckboxOption[];
+    /** Compositional children when `options` is omitted. */
+    children?: ReactNode;
+    /** Controlled selection. */
+    value?: string[];
+    /** Uncontrolled initial selection. */
+    defaultValue?: string[];
+    /** Fires whenever the selection set changes. */
+    onValueChange?: (value: string[]) => void;
+    orientation?: CheckboxGroupOrientation;
+    /** Disable every item in the group. */
+    disabled?: boolean;
+    size?: CheckboxGroupSize;
+    /** Form name for native submission (mirrors RadioGroup). */
     name?: string;
 }
+declare const CheckboxGroup: react.ForwardRefExoticComponent<CheckboxGroupProps & react.RefAttributes<HTMLDivElement>>;
+
 /**
- * TimeInput — narrow text input for HH:mm (24-hour) values.
- * Mirrors the public `@godxjp/ui@0.2.0` API so call sites don't change
- * when upgrading to v2. Visual contract lives in the `.time-input`
- * class in tokens.css.
+ * Radio + RadioGroup — Radix-backed single-select group. Compositional
+ * (`<Radio value="…" />` children) OR data-driven (`options`) per
+ * cardinal rule 23 §A.
  *
- * Validation: emits `onChange` with the normalized string on blur if
- * it parses, otherwise leaves the value untouched and surfaces
- * `aria-invalid` so the consumer can style the error state.
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `value` / `defaultValue` / `onValueChange` — Radix-canonical
+ *     selection (the GROUP exposes the value; individual items
+ *     internally use Radix's `checked` data-state).
+ *   - `orientation` — "horizontal" (default) | "vertical".
+ *   - `size` — "small" | "default" | "large".
+ *   - `disabled` — applies to the whole group OR per-item.
+ *   - `name` — native form name.
+ *
+ * Visual contract: `.radio-group` + `.radio-root` + `.radio-indicator`
+ * in shell.css. State flows via Radix `data-state="checked"`.
  */
-declare const TimeInput: react.ForwardRefExoticComponent<TimeInputProps & react.RefAttributes<HTMLInputElement>>;
+type RadioGroupSize = "small" | "default" | "large";
+type RadioGroupOrientation = "horizontal" | "vertical";
+interface RadioOption {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, "orientation"> {
+    /** Data-driven items. */
+    options?: RadioOption[];
+    /** Compositional children when `options` is omitted. */
+    children?: ReactNode;
+    orientation?: RadioGroupOrientation;
+    size?: RadioGroupSize;
+}
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface RadioProps {
+    value: string;
+    disabled?: boolean;
+    children?: ReactNode;
+    className?: string;
+    id?: string;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Slider — Radix-backed range input. Single-handle by default;
+ * `range` flips to dual-handle.
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `value` / `defaultValue` / `onValueChange` — Radix-canonical
+ *     selection; scalar for single-handle, `[number, number]` for
+ *     `range`.
+ *   - `min` / `max` / `step` — HTML standards (not vocabulary).
+ *   - `disabled`, `orientation` — shared axes.
+ *   - `marks` — optional tick labels along the track.
+ *
+ * Visual contract: `.slider`, `.slider-track`, `.slider-range`,
+ * `.slider-thumb` in shell.css. Vertical variant flips dimensions
+ * via `data-orientation="vertical"`.
+ */
+interface SliderMark {
+    value: number;
+    label?: ReactNode;
+}
+type SliderValue = number | [number, number];
+interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, "value" | "defaultValue" | "onValueChange" | "orientation"> {
+    value?: SliderValue;
+    defaultValue?: SliderValue;
+    onValueChange?: (value: SliderValue) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Dual-handle when true; pass `[number, number]` for value. */
+    range?: boolean;
+    disabled?: boolean;
+    orientation?: "horizontal" | "vertical";
+    /** Optional tick marks rendered alongside the track. */
+    marks?: SliderMark[];
+}
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare function Table<TData>({ columns, data, density, containerClassName, stickyHeader, rowKey, getRowId, caption, defaultColumnVisibility, columnVisibility, onColumnVisibilityChange, sort, onSortChange, resizable, expandable, editing, groupBy, tree, onColumnPinningChange, selection, footer, empty, rowClassName, className, instance, ...rest }: TableProps<TData>): react_jsx_runtime.JSX.Element;
+
+interface TimeInputProps {
+    /** Current time value in `"HH:mm"` (24-hour) format. */
+    value?: string;
+    /** Fired on blur with the validated `"HH:mm"` string. */
+    onChange?: (time: string) => void;
+    /** Additional class name applied to the input element. */
+    className?: string;
+    /** Disable input + propagate aria-disabled. */
+    disabled?: boolean;
+    /** Optional placeholder (defaults to "HH:mm"). */
+    placeholder?: string;
+    /** Optional id used for label association. */
+    id?: string;
+    /** Optional name used in form submissions. */
+    name?: string;
+}
+/**
+ * TimeInput — narrow text input for HH:mm (24-hour) values.
+ * Mirrors the public `@godxjp/ui@0.2.0` API so call sites don't change
+ * when upgrading to v2. Visual contract lives in the `.time-input`
+ * class in tokens.css.
+ *
+ * Validation: emits `onChange` with the normalized string on blur if
+ * it parses, otherwise leaves the value untouched and surfaces
+ * `aria-invalid` so the consumer can style the error state.
+ */
+declare const TimeInput: react.ForwardRefExoticComponent<TimeInputProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Toast host — wraps `sonner` with token classes (`tokens.css` + optional
+ * `sonner.css` import). Defaults to `toastOptions.unstyled` so visuals
+ * come from `.toast*` atoms, not sonner’s default gray theme.
+ */
+declare const Toaster: react.ForwardRefExoticComponent<ToasterProps & react.RefAttributes<HTMLElement>>;
+
+type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Watermark — repeating SVG-pattern overlay applied as a CSS
+ * background image on a wrapper element. Tiled rotated text via
+ * `<pattern>`-like SVG referenced through `background-image:url(…)`.
+ *
+ * Theme-aware: the SVG uses `fill='currentColor'`, and the wrapper
+ * sets `color: var(--muted-foreground)` so dark / light / accent
+ * axes flow through without per-instance overrides.
+ *
+ * Cardinal rules honoured:
+ *   §21 — colour reads from `var(--muted-foreground)` (theme axis).
+ *   §22 — no hardcoded colour literal in the SVG (currentColor).
+ *   §23 — no prop name collides with the locked vocabulary; the
+ *         API mirrors the same `content` / `rotate` / `gap` /
+ *         `fontSize` / `fontFamily` / `opacity` surface as the
+ *         design canon's watermark example.
+ *
+ * @example
+ *   <Watermark content="Famgia · Confidential">
+ *     <Card>…</Card>
+ *   </Watermark>
+ */
+interface WatermarkProps extends Omit<ComponentProps<"div">, "content"> {
+    /** Single line or multi-line text. Empty → no watermark drawn. */
+    content?: string | string[];
+    /** Rotation in degrees. Default `-22`. */
+    rotate?: number;
+    /** Tile gap `[x, y]` in pixels. Default `[120, 80]`. */
+    gap?: [number, number];
+    /** Font size in pixels. Default `14`. */
+    fontSize?: number;
+    /** Font family — defaults to inherited system stack. */
+    fontFamily?: string;
+    /** Opacity 0-1. Default `0.12`. */
+    opacity?: number;
+    children?: ReactNode;
+}
+declare const Watermark: react.ForwardRefExoticComponent<Omit<WatermarkProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Popconfirm — inline confirmation popover anchored to its trigger.
+ *
+ *   <Popconfirm
+ *     title="削除しますか？"
+ *     description="このアイテムは復元できません。"
+ *     confirmLabel="削除"
+ *     confirmVariant="destructive"
+ *     onConfirm={() => deleteItem()}
+ *   >
+ *     <Button variant="destructive">削除</Button>
+ *   </Popconfirm>
+ *
+ * Distinct from AlertDialog / Modal (full-screen modal for
+ * high-stakes decisions that need focus trap + scrim). Popconfirm
+ * is a LIGHTWEIGHT inline confirm — the trigger stays in flow, the
+ * popover anchors next to it, no overlay dim.
+ *
+ * Vocabulary (per cardinal rule 23 §B):
+ *   - `open` / `defaultOpen` / `onOpenChange` — Radix overlay state
+ *   - `placement` — popover anchor side
+ *   - `title` / `description` / `icon` slots
+ *   - `confirmVariant` — Button `variant` value ("primary" | "destructive")
+ */
+interface PopconfirmProps {
+    title: ReactNode;
+    description?: ReactNode;
+    confirmLabel?: ReactNode;
+    cancelLabel?: ReactNode;
+    /** Button variant for the confirm action ("primary" | "destructive"). */
+    confirmVariant?: "primary" | "destructive";
+    /** Leading icon shown beside the title. */
+    icon?: ReactNode;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The trigger element (rendered via Radix `asChild`). */
+    children?: ReactNode;
+    /** Anchor side relative to the trigger. */
+    placement?: "top" | "right" | "bottom" | "left";
+    className?: string;
+}
+declare function Popconfirm({ title, description, confirmLabel, cancelLabel, confirmVariant, icon, onConfirm, onCancel, open, defaultOpen, onOpenChange, children, placement, className, }: PopconfirmProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbOption {
+    label: ReactNode;
+    href?: string;
+    current?: boolean;
+}
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbOption[];
+    separator?: ReactNode;
+}
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * Anchor — in-page scroll-spy navigation.
+ *
+ * Data-driven API:
+ *   <Anchor items={[{ href: "#intro", label: "Intro" }, …]} />
+ *
+ * Vocabulary (§23.B):
+ *   - `orientation` — axis of stack ("vertical" default | "horizontal")
+ *   - `sticky` — pin-on-scroll boolean
+ *   - `offset` — pixel offset for IntersectionObserver root margin
+ *   - `value` / `defaultValue` / `onValueChange` — controlled/uncontrolled
+ *     active section (the active hash; mirrors Tabs/Select selection
+ *     vocabulary; auto-detected via IntersectionObserver when uncontrolled)
+ */
+type AnchorOrientation = "horizontal" | "vertical";
+interface AnchorItem {
+    href: string;
+    label: ReactNode;
+}
+interface AnchorProps extends Omit<ComponentProps<"nav">, "defaultValue" | "onChange"> {
+    orientation?: AnchorOrientation;
+    sticky?: boolean;
+    /** Pixel offset from the top of the viewport for scroll-spy detection. */
+    offset?: number;
+    items: AnchorItem[];
+    /** Controlled active href (`#intro` etc.). */
+    value?: string;
+    /** Uncontrolled initial active href. */
+    defaultValue?: string;
+    onValueChange?: (href: string) => void;
+}
+declare const Anchor: react.ForwardRefExoticComponent<Omit<AnchorProps, "ref"> & react.RefAttributes<HTMLElement>>;
+
+type MenuOrientation = "horizontal" | "vertical";
+interface MenuOption {
+    value?: string;
+    label?: ReactNode;
+    disabled?: boolean;
+    icon?: ReactNode;
+    extra?: ReactNode;
+    type?: "item" | "group" | "divider";
+    items?: MenuOption[];
+}
+interface MenuProps extends Omit<ComponentProps<"ul">, "onChange" | "children"> {
+    orientation?: MenuOrientation;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    items: MenuOption[];
+}
+declare const Menu: react.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & react.RefAttributes<HTMLUListElement>>;
+
+/**
+ * Pagination — page jumper.
+ *
+ *   <Pagination total={120} pageSize={10} defaultValue={1} onValueChange={…} />
+ *
+ * Three variants:
+ *   - `default` (pill bar) — freestanding pagination chips
+ *   - `simple` — only ‹ N/M ›
+ *   - `embedded` — table-footer layout (`info` + page-size changer +
+ *     numeric pager). Use when embedding inside a `<Table>` footer.
+ *
+ * Vocabulary (§23.B):
+ *   - `value` / `defaultValue` / `onValueChange` — current page (1-based)
+ *   - `pageSize` / `defaultPageSize` / `onPageSizeChange` — rows per page
+ *   - `size` — "small" | "default" — dimensional scale (default + simple)
+ *   - `variant` — visual treatment (above)
+ *   - `justify` — "start" | "center" | "end" | "space-between" (matches FlexJustify)
+ *   - `disabled` — interaction state
+ *   - `showTotal`, `showSizeChanger`, `showFirstLast`, `hideOnSinglePage`
+ *     — adjective-boolean toggles
+ */
+type PaginationSize = "small" | "default";
+type PaginationVariant = "default" | "simple" | "embedded";
+/** Justify values match FlexJustify spelling (`"space-between"`) so the
+ *  vocabulary stays uniform across layout primitives. Pagination ships
+ *  4 of FlexJustify's 6 values (no `space-around` / `space-evenly`). */
+type PaginationJustify = "start" | "center" | "end" | "space-between";
+interface PaginationProps extends Omit<ComponentProps<"nav">, "onChange" | "defaultValue" | "value"> {
+    /** Total row count. */
+    total: number;
+    /** Rows per page. Controlled or uncontrolled via `defaultPageSize`. */
+    pageSize?: number;
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Current page (1-based). Controlled or uncontrolled via `defaultValue`. */
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (page: number) => void;
+    size?: PaginationSize;
+    variant?: PaginationVariant;
+    justify?: PaginationJustify;
+    disabled?: boolean;
+    /** Selectable page sizes when `showSizeChanger` is true. */
+    pageSizeOptions?: number[];
+    /** Render the page-size `<select>` (embedded variant only). */
+    showSizeChanger?: boolean;
+    /** Render first/last page chevron buttons (embedded variant). */
+    showFirstLast?: boolean;
+    /** Suppress render when total fits in a single page. */
+    hideOnSinglePage?: boolean;
+    /** Show total-row label. Accepts a render function for full control. */
+    showTotal?: boolean | ((total: number, range: [number, number]) => ReactNode);
+    /** Sibling pages either side of current (default 1). */
+    siblings?: number;
+    /** Pages anchored at each end before the ellipsis (default 1). */
+    boundary?: number;
+    /** Override page-size dropdown label (defaults to i18n `table.pageSize`). */
+    pageSizeLabel?: ReactNode;
+    /** Override first-page button aria-label. */
+    firstPageLabel?: string;
+    /** Override previous-page button aria-label. */
+    previousPageLabel?: string;
+    /** Override next-page button aria-label. */
+    nextPageLabel?: string;
+    /** Override last-page button aria-label. */
+    lastPageLabel?: string;
+}
+/**
+ * Laravel-style page range — first + last anchor pages, a window of
+ * `sibling` pages around the current page, and `"gap"` markers
+ * (rendered as `…`) where pages are elided. Exported for consumers
+ * building custom paginators.
+ *
+ *   computePageRange(1, 52)   →  [1, 2, 3, "gap", 52]
+ *   computePageRange(25, 52)  →  [1, "gap", 24, 25, 26, "gap", 52]
+ *   computePageRange(3, 6)    →  [1, 2, 3, 4, 5, 6]
+ */
+declare function computePageRange(current: number, total: number, sibling?: number, boundary?: number): Array<number | "gap">;
+declare const Pagination: react.ForwardRefExoticComponent<Omit<PaginationProps, "ref"> & react.RefAttributes<HTMLElement>>;
+
+type StepsOrientation = "horizontal" | "vertical";
+interface StepsItem {
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    content?: ReactNode;
+    className?: string;
+}
+interface StepsProps extends Omit<ComponentProps<"ol">, "children" | "color"> {
+    items: StepsItem[];
+    orientation?: StepsOrientation;
+    current?: number;
+}
+declare const Steps: react.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & react.RefAttributes<HTMLOListElement>>;
+
+/**
+ * Progress — linear or circular progress indicator.
+ *
+ * Vocabulary (per cardinal rule 23 §B — concept-first):
+ *  - `value` / `max` — Radix-style numeric state (matches Tabs/Select).
+ *  - `variant`       — `line` (default) or `circle`.
+ *  - `color`         — semantic role (`default` / `info` / `success` /
+ *                      `warning` / `destructive`).
+ *  - `size`          — dimensional scale (`small` / `default` / `large`).
+ *  - `showInfo`      — render the numeric label (default `true`).
+ *  - `strokeWidth`   — circle stroke thickness in user units (default 6).
+ *  - `format`        — custom label renderer; receives `(value, max)`.
+ *
+ * Line variant reuses the canonical `.prog` atom from
+ * `shell/75-card-atoms.css`; circle variant renders an SVG sweep with
+ * `currentColor` so the outer `.progress-color-*` class drives the
+ * arc colour. ARIA: `role="progressbar"` + `aria-valuenow/min/max`.
+ */
+type ProgressVariant = "line" | "circle";
+/** Alias of the shared `FeedbackColorProp` — same shape as
+ *  AlertColor / ResultColor; kept as a named export for back-compat. */
+type ProgressColor = FeedbackColorProp;
+type ProgressSize = "small" | "default" | "large";
+interface ProgressProps extends Omit<ComponentProps<"div">, "color"> {
+    /** Current progress value (0 – `max`). Defaults to 0. */
+    value?: number;
+    /** Maximum value. Defaults to 100. */
+    max?: number;
+    /** Visual shape — line bar or circular sweep. */
+    variant?: ProgressVariant;
+    /** Semantic colour role. */
+    color?: ProgressColor;
+    /** Dimensional scale. */
+    size?: ProgressSize;
+    /** Render the numeric label (defaults to true). */
+    showInfo?: boolean;
+    /** Circle stroke thickness (defaults to 6). */
+    strokeWidth?: number;
+    /** Custom label renderer. */
+    format?: (value: number, max: number) => ReactNode;
+}
+declare const Progress: react.ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * IconRow — `20px icon | content` two-column row used by detail panels
+ * and create-event dialogs. Keeps icon glyphs aligned in a tight column
+ * regardless of body height.
+ *
+ * @example
+ *   <IconRow icon={<Clock />}>
+ *     <div>10:00 – 11:00</div>
+ *     <div className="muted">GMT+09</div>
+ *   </IconRow>
+ */
+type IconRowAlign = "top" | "center";
+interface IconRowProps extends Omit<ComponentProps<"div">, "children"> {
+    icon: ReactNode;
+    align?: IconRowAlign;
+    children?: ReactNode;
+}
+declare function IconRow({ icon, align, className, children, ...rest }: IconRowProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AvatarStack — overlapping circular initials avatars with a `+N`
+ * overflow chip. Border = `--background` to knock the avatars out of
+ * the surface they sit on.
+ *
+ * @example
+ *   <AvatarStack
+ *     items={[{ id: "y", short: "YT", color: "#1e50a2", name: "Yuki" }]}
+ *     max={3}
+ *   />
+ */
+interface AvatarStackItem {
+    id: string;
+    short: string;
+    color: string;
+    name?: string;
+}
+interface AvatarStackProps extends Omit<ComponentProps<"div">, "children"> {
+    items: AvatarStackItem[];
+    /** Maximum number of avatars before overflow chip. Default 3. */
+    max?: number;
+    /** Pixel size of each avatar. Default 22. */
+    size?: number;
+}
+declare function AvatarStack({ items, max, size, className, style, ...rest }: AvatarStackProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ColorSwatchCheckbox — Google-Calendar-style "color square = on/off"
+ * checkbox. Border paints in `color`; fill paints `color` when checked.
+ * Hidden native `<input>` keeps it a real form control + a11y target.
+ *
+ * @example
+ *   <ColorSwatchCheckbox
+ *     color="#4c6cb3"
+ *     label="godx-admin · Product"
+ *     checked={shown}
+ *     onChange={(next) => setShown(next)}
+ *   />
+ */
+interface ColorSwatchCheckboxProps extends Omit<ComponentProps<"label">, "onChange"> {
+    color: string;
+    label: string;
+    checked: boolean;
+    onChange?: (next: boolean) => void;
+    /** Marks the row as read-only (renders an "R" hint instead of a swatch). */
+    readonly?: boolean;
+    disabled?: boolean;
+}
+declare function ColorSwatchCheckbox({ color, label, checked, onChange, readonly, disabled, className, ...rest }: ColorSwatchCheckboxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CalendarOption — color-swatch + name label used inside calendar
+ * pickers (e.g. "Save to which calendar" select). Stays presentational;
+ * the consuming select / dropdown handles state.
+ */
+interface CalendarOptionProps extends ComponentProps<"span"> {
+    color: string;
+    name: string;
+    /** Suffix label (e.g. "(read-only)"). */
+    meta?: string;
+}
+declare function CalendarOption({ color, name, meta, className, ...rest }: CalendarOptionProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AttendeeChip — pill with leading initials avatar + name + optional
+ * remove (✕). Used in event composer attendee fields and similar
+ * "selected items" chip arrays.
+ */
+interface AttendeeChipProps extends ComponentProps<"span"> {
+    name: string;
+    short: string;
+    color: string;
+    onRemove?: () => void;
+}
+declare function AttendeeChip({ name, short, color, onRemove, className, ...rest }: AttendeeChipProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AttendeeListItem — row used in event-detail attendee lists. Avatar,
+ * name, optional "(you)" marker, optional org line, optional trailing
+ * status badge slot.
+ */
+interface AttendeeListItemProps extends ComponentProps<"div"> {
+    name: string;
+    short: string;
+    color: string;
+    /** Display "(you)" suffix. */
+    isSelf?: boolean;
+    /** Show "Organizer · " prefix in the org line. */
+    isOrganizer?: boolean;
+    org?: string;
+    /** Trailing slot — typically a small Badge. */
+    status?: ReactNode;
+    /** i18n override for "(you)" — defaults to en. */
+    selfLabel?: string;
+    organizerLabel?: string;
+}
+declare function AttendeeListItem({ name, short, color, isSelf, isOrganizer, org, status, selfLabel, organizerLabel, className, ...rest }: AttendeeListItemProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AllDayChip — solid-color rounded chip used for all-day events across
+ * week-band, day-header strip, and month-cell rows.
+ *
+ * Sizes:
+ *   - `compact` — week-band / detail rows
+ *   - `month`   — month-cell rows (slightly smaller radius + font)
+ *   - `pill`    — day-view header (full pill radius, larger font)
+ */
+type AllDayChipSize = "compact" | "month" | "pill";
+interface AllDayChipProps extends ComponentProps<"button"> {
+    color: string;
+    size?: AllDayChipSize;
+    children: ComponentProps<"button">["children"];
+}
+declare function AllDayChip({ color, size, className, style, children, ...rest }: AllDayChipProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * DayHeaderPill — small day-of-week label + 32px circular day-of-month
+ * pill rendered above each Week-view column.
+ *
+ *   default  — neutral
+ *   today    — filled accent + white number
+ *   selected — soft accent tint + accent number
+ */
+type DayHeaderPillState = "default" | "today" | "selected";
+interface DayHeaderPillProps extends ComponentProps<"div"> {
+    dow: string;
+    day: number;
+    state?: DayHeaderPillState;
+}
+declare function DayHeaderPill({ dow, day, state, className, ...rest }: DayHeaderPillProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TimeGrid primitives — `GridColumn` (a day-of-events column with
+ * hour-line dividers), `TimeGutter` (the labelled hour rail next to
+ * it), and `NowLine` (auto-refreshing horizontal indicator at the
+ * current time). All consume `--accent-color`, `--surface-*`, `--border`
+ * via the `.tg-*` classes in shell.css; no service-specific tokens.
+ *
+ * @example
+ *   <div style={{ display: "grid", gridTemplateColumns: "60px 1fr" }}>
+ *     <TimeGutter dayStartH={6} dayEndH={22} pxPerMin={0.9} locale="vi" />
+ *     <GridColumn dayStartH={6} dayEndH={22} pxPerMin={0.9} isToday>
+ *       <NowLine dayStartH={6} pxPerMin={0.9} />
+ *       <EventBlock ... />
+ *     </GridColumn>
+ *   </div>
+ */
+interface GridColumnProps {
+    /** Day-start hour (inclusive). Default 6. */
+    dayStartH?: number;
+    /** Day-end hour (exclusive). Default 22. */
+    dayEndH?: number;
+    /** Vertical pixels per minute. Default 0.9 (1h = 54px). */
+    pxPerMin?: number;
+    /** Tints column subtly when true. */
+    isToday?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+declare function GridColumn({ dayStartH, dayEndH, pxPerMin, isToday, className, style, children, }: GridColumnProps): react_jsx_runtime.JSX.Element;
+interface TimeGutterProps {
+    dayStartH?: number;
+    dayEndH?: number;
+    pxPerMin?: number;
+    locale?: TimeLocale;
+    className?: string;
+}
+declare function TimeGutter({ dayStartH, dayEndH, pxPerMin, locale, className, }: TimeGutterProps): react_jsx_runtime.JSX.Element;
+interface NowLineProps {
+    /** Optional override; defaults to the live current time. */
+    nowDate?: Date;
+    dayStartH?: number;
+    pxPerMin?: number;
+    /** Auto-refresh interval in ms. Default 60_000 (1 minute). */
+    refreshMs?: number;
+}
+declare function NowLine({ nowDate, dayStartH, pxPerMin, refreshMs, }: NowLineProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * EventBlock — absolutely-positioned timed-event chip inside a
+ * `GridColumn`. Supports four visual treatments:
+ *
+ *   - `solid`     — saturated brand color (customer / external meets)
+ *   - `tint`      — soft-mixed background (organizer / accepted)
+ *   - `tentative` — diagonal hatch over a soft tint
+ *   - `focus`     — repeating subtle stripes (deep-work blocks)
+ *
+ * Multi-event overlap is handled by `lane` / `lanes` props (horizontal
+ * slicing of the column). The selected state paints a 2px accent ring
+ * via `--accent-color`.
+ *
+ * Service-agnostic: pass any `CalendarEvent`-shaped object + a `color`.
+ */
+interface EventBlockProps {
+    event: CalendarEvent;
+    /** Event color (typically from the event's calendar). */
+    color: string;
+    variant?: EventBlockVariant;
+    /** Whether the chip renders as the selected event (accent ring). */
+    selected?: boolean;
+    /** Horizontal lane index (0-based) for overlap layout. */
+    lane?: number;
+    /** Total lane count in the day. */
+    lanes?: number;
+    /** Day-grid configuration — must match the parent GridColumn. */
+    dayStartH?: number;
+    pxPerMin?: number;
+    onClick?: (event: CalendarEvent) => void;
+    /** Optional render-prop slot for trailing line (e.g. "cá nhân"). */
+    footer?: ReactNode;
+    className?: string;
+}
+declare function EventBlock({ event, color, variant, selected, lane, lanes, dayStartH, pxPerMin, onClick, footer, className, }: EventBlockProps): react_jsx_runtime.JSX.Element;
+/**
+ * Naïve lane allocator for overlapping timed events on a single day.
+ * Mutates / annotates input objects with `_lane` and `_lanes`; returns
+ * the sorted array. Reused by Week + Day screens.
+ */
+interface LanedEvent extends CalendarEvent {
+    _lane: number;
+    _lanes: number;
+}
+declare function layoutEvents(dayEvents: CalendarEvent[]): LanedEvent[];
+
+/**
+ * MonthCell — one day cell of a 6×7 month grid. Render-prop friendly:
+ * the `events` slot is anything the caller wants (`EventPill` /
+ * `AllDayChip` / their own render). Includes a "+N more" overflow row
+ * helper.
+ */
+interface MonthCellProps extends Omit<ComponentProps<"div">, "children"> {
+    day: number;
+    /** Is this the today cell? Paints the day-number with accent. */
+    today?: boolean;
+    /** Is this cell from a different month? Dimmed. */
+    dim?: boolean;
+    /** Sat/Sun cell — slight tint. */
+    weekend?: boolean;
+    /** Optional small header chip next to the number (e.g. "Th. 5" when day === 1). */
+    monthLabel?: ReactNode;
+    /** Events to render — typically EventPill / AllDayChip components. */
+    events?: ReactNode;
+    /** Number of additional events beyond what's rendered. */
+    overflow?: number;
+    /** Localised "+N more" label builder. */
+    formatOverflow?: (n: number) => ReactNode;
+}
+declare function MonthCell({ day, today, dim, weekend, monthLabel, events, overflow, formatOverflow, className, ...rest }: MonthCellProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * EventPill — single-line clickable row for month-cell event lists.
+ * Layout: `dot · HH:MM · title`. For all-day variants, callers should
+ * use `AllDayChip` instead (different visual).
+ */
+interface EventPillProps extends ComponentProps<"button"> {
+    color: string;
+    time?: string;
+    title: string;
+    dim?: boolean;
+}
+declare function EventPill({ color, time, title, dim, className, ...rest }: EventPillProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AvailabilityRow — one person × N time-slot row used in scheduling /
+ * find-a-time grids. Generic over the slot dimension: `slots[i] = 0`
+ * (free), `1` (tentative — hatched), `2` (busy — solid tint). An
+ * optional `selectedRange` paints the picked-time overlay in accent.
+ *
+ * Two-cell grid: `personSlot | cellsSlot`, sized externally.
+ */
+interface AvailabilityRowProps {
+    /** Person slot — typically `<AttendeeListItem>` or a name + avatar. */
+    person: ReactNode;
+    /** 0 = free, 1 = tentative, 2 = busy — one per slot index. */
+    slots: ReadonlyArray<0 | 1 | 2>;
+    /** [startSlotInclusive, endSlotExclusive] — paints the accent overlay. */
+    selectedRange?: [number, number] | null;
+    className?: string;
+}
+declare function AvailabilityRow({ person, slots, selectedRange, className, }: AvailabilityRowProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * SuggestedSlotCard — small button-shaped card surfacing a scheduling
+ * recommendation. Two visual treatments: `default` (neutral border) and
+ * `best` (accent border + accent text, e.g. "all attendees free").
+ */
+interface SuggestedSlotCardProps extends ComponentProps<"button"> {
+    label: ReactNode;
+    meta?: ReactNode;
+    /** Highlight as the best/recommended option. */
+    best?: boolean;
+}
+declare function SuggestedSlotCard({ label, meta, best, className, ...rest }: SuggestedSlotCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Date / time input primitives — segmented + popover combinations
+ * built on Adobe React Aria Components. Mirrors the dxs-kintai
+ * design-system patterns A–E from
+ * `design-handoff/ui-system/dxs-kintai-design-system/project/preview/comp-datetimepicker.html`.
+ *
+ * Five exports:
+ *
+ *   - `<DateField>` — segmented date input only (no popover).
+ *   - `<TimeField>` — segmented time input (HH:MM, optional seconds).
+ *   - `<DatePicker>` — single-date trigger + popover + Calendar.
+ *   - `<DateRangePicker>` — range trigger + popover + RangeCalendar.
+ *
+ * All four consume `@internationalized/date` values (CalendarDate,
+ * Time, etc.) — convert to/from JS Date via `parseDate`, `parseTime`,
+ * `today(getLocalTimeZone())` from `@internationalized/date`. The
+ * segmented inputs are timezone-correct and locale-aware.
+ *
+ * Visual theming flows through the four theme axes
+ * (`docs/specs/01-theme-axes.md`): `data-theme`, `data-accent`,
+ * `data-density`, `data-font-size`.
+ */
+interface DateFieldProps<T extends DateValue = DateValue> extends DateFieldProps$1<T> {
+    label?: string;
+    description?: string;
+    errorMessage?: string;
+    className?: string;
+}
+declare function DateField<T extends DateValue = DateValue>({ label, description, errorMessage, className, ...rest }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
+interface TimeFieldProps<T extends TimeValue = TimeValue> extends TimeFieldProps$1<T> {
+    label?: string;
+    description?: string;
+    errorMessage?: string;
+    className?: string;
+}
+declare function TimeField<T extends TimeValue = TimeValue>({ label, description, errorMessage, className, ...rest }: TimeFieldProps<T>): react_jsx_runtime.JSX.Element;
+interface DatePickerProps<T extends DateValue = DateValue> extends DatePickerProps$1<T> {
+    label?: string;
+    description?: string;
+    errorMessage?: string;
+    className?: string;
+}
+declare function DatePicker<T extends DateValue = DateValue>({ label, description, errorMessage, className, ...rest }: DatePickerProps<T>): react_jsx_runtime.JSX.Element;
+interface DateRangePickerProps<T extends DateValue = DateValue> extends DateRangePickerProps$1<T> {
+    label?: string;
+    description?: string;
+    errorMessage?: string;
+    className?: string;
+}
+declare function DateRangePicker<T extends DateValue = DateValue>({ label, description, errorMessage, className, ...rest }: DateRangePickerProps<T>): react_jsx_runtime.JSX.Element;
+
+interface AutoCompleteOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface AutoCompleteProps {
+    options: AutoCompleteOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    size?: "small" | "default" | "large";
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    allowCustomValue?: boolean;
+    className?: string;
+}
+declare const AutoComplete: react.ForwardRefExoticComponent<AutoCompleteProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Cascader — nested column navigation. Renders a Popover whose body
+ * is a horizontal row of vertical columns. Each column lists the
+ * options at that depth; clicking a non-leaf option expands the next
+ * column to the right; clicking a leaf commits the path of values.
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `value` / `defaultValue` / `onValueChange` — Radix-style selection
+ *     (path is `string[]`; callback also receives the leaf option)
+ *   - `size` — "small" | "default" | "large"
+ *   - `open` / `defaultOpen` / `onOpenChange` — overlay state
+ *   - `disabled`, `placeholder`, `className`
+ */
+interface CascaderOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    children?: CascaderOption[];
+}
+interface CascaderProps {
+    options: CascaderOption[];
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (path: string[], leafOption: CascaderOption) => void;
+    placeholder?: string;
+    size?: "small" | "default" | "large";
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Display the full path as breadcrumb text or just the leaf label. */
+    showFullPath?: boolean;
+    className?: string;
+}
+declare const Cascader: react.ForwardRefExoticComponent<CascaderProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * TreeSelect — tree-structured Select. Renders a Popover containing a
+ * recursive tree where each node is expandable. Multi-select supported
+ * via `multiple`; single-select highlights one node.
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `value` / `defaultValue` / `onValueChange` — Radix-style selection
+ *     (single: `string`; multiple: `string[]`)
+ *   - `multiple` — boolean (NEVER `mode="multiple"`)
+ *   - `size` — "small" | "default" | "large"
+ *   - `open` / `defaultOpen` / `onOpenChange`
+ *   - `disabled`, `placeholder`, `className`
+ */
+interface TreeSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    children?: TreeSelectOption[];
+}
+interface TreeSelectProps {
+    options: TreeSelectOption[];
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    multiple?: boolean;
+    placeholder?: string;
+    size?: "small" | "default" | "large";
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Expand every node on first render. */
+    defaultExpandAll?: boolean;
+    className?: string;
+}
+declare const TreeSelect: react.ForwardRefExoticComponent<TreeSelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * ColorPicker — decorative color-selection trigger + popover panel.
+ *
+ *   <ColorPicker defaultValue="#3b82f6" presets={["#ef4444", "#10b981"]} />
+ *
+ * Modeled on Input/Popconfirm prop shape per cardinal rule 23 §D.4.
+ * The trigger is a `.colorpicker-trigger` button (swatch + hex label);
+ * the popover hosts a native `<input type="color">` canvas plus a hex
+ * text input + preset swatch grid.
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `value` / `defaultValue` / `onValueChange` — Radix-style state
+ *   - `size` — `"small" | "default" | "large"` (matches Input)
+ *   - `disabled` — boolean
+ *   - `open` / `defaultOpen` / `onOpenChange` — popover state
+ *   - `presets` — configurable hex list
+ *   - `showAlpha` — toggle alpha slider (0..1)
+ *
+ * Never uses Ant's `format` / `mode` aliases — `value` is always a hex
+ * string (with optional `#rrggbbaa` when `showAlpha` is true).
+ */
+type ColorPickerSize = "small" | "default" | "large";
+interface ColorPickerProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (hex: string) => void;
+    presets?: string[];
+    showAlpha?: boolean;
+    size?: ColorPickerSize;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+declare const ColorPicker: react.ForwardRefExoticComponent<ColorPickerProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Rate — star-rating primitive (decorative input).
+ *
+ *   <Rate defaultValue={3.5} allowHalf />
+ *   <Rate value={4} count={5} onValueChange={setRating} />
+ *   <Rate value={4} icon={<Heart />} />
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `value` / `defaultValue` / `onValueChange` — Radix-style state
+ *   - `size` — `"small" | "default" | "large"` (svg sized via CSS)
+ *   - `disabled` — boolean
+ *   - `readOnly` — display-only (matches Input)
+ *   - `count` — how many icons (default 5)
+ *   - `allowHalf` — left-half-click commits 0.5 step
+ *   - `icon` slot — custom icon node (per cardinal rule 23 §B `icon`
+ *     slot — NEVER Ant's `character`)
+ *
+ * The rendered row uses lucide `Star` filled vs hollow (and `StarHalf`
+ * when `allowHalf` resolves to a 0.5 fraction). When `icon` is
+ * provided, the custom node is reused for filled / hollow alike with
+ * `data-filled` driving the color via CSS.
+ */
+type RateSize = "small" | "default" | "large";
+interface RateProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** Max number of stars (default 5). */
+    count?: number;
+    allowHalf?: boolean;
+    /** Render a custom icon instead of Star. */
+    icon?: ReactNode;
+    size?: RateSize;
+    disabled?: boolean;
+    /** Read-only display (no hover effect). */
+    readOnly?: boolean;
+    className?: string;
+}
+declare const Rate: react.ForwardRefExoticComponent<RateProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Carousel — image / content slide deck.
+ *
+ * Pass `slides`, one ReactNode per slide. The track translates by
+ * index along the configured `orientation`. Plain
+ * React + CSS transform — no external dep. Autoplay pauses on hover
+ * (mouseenter / mouseleave handlers; CSS `:hover` cannot reach JS).
+ *
+ * Prop vocabulary follows cardinal rule 23 §B: `value` /
+ * `defaultValue` / `onValueChange` for selection state (current slide
+ * index), `orientation`, `autoplay` (ms), `loop`, `arrows`, `dots`.
+ * NEVER Ant's `activeKey` / `autoplaySpeed`.
+ *
+ */
+interface CarouselProps {
+    /** Current slide index (0-based). */
+    value?: number;
+    /** Initial slide index when uncontrolled. */
+    defaultValue?: number;
+    onValueChange?: (index: number) => void;
+    /** Auto-advance interval in ms. Omit / 0 to disable. */
+    autoplay?: number;
+    /** Wrap from last → first / first → last. Default true. */
+    loop?: boolean;
+    /** Show prev / next arrows. Default true. */
+    arrows?: boolean;
+    /** Show dot indicators. Default true. */
+    dots?: boolean;
+    /** Stack axis. Default "horizontal". */
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+    slides: ReactNode[];
+}
+declare function Carousel({ value: controlled, defaultValue, onValueChange, autoplay, loop, arrows, dots, orientation, className, slides, }: CarouselProps): react_jsx_runtime.JSX.Element;
+
+interface CollapseItem {
+    value: string;
+    title: ReactNode;
+    extra?: ReactNode;
+    disabled?: boolean;
+    content?: ReactNode;
+}
+interface CollapseProps {
+    /** Expanded panel key(s). String for single, string[] for multi. */
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    /** Allow multiple panels open simultaneously. Default false. */
+    multiple?: boolean;
+    /** Visual treatment. Default "default". */
+    variant?: "default" | "ghost" | "outlined";
+    /** Dimensional scale. Default "default". */
+    size?: "small" | "default" | "large";
+    /** Disable every panel. */
+    disabled?: boolean;
+    items: CollapseItem[];
+    className?: string;
+}
+declare function Collapse({ value: controlled, defaultValue, onValueChange, multiple, variant, size, disabled, items, className, }: CollapseProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * List — header + items + optional footer surface.
+ *
+ * Two consumption modes:
+ *
+ * Data-driven: pass `dataSource` + `renderItem`.
+ *
+ * Prop vocabulary follows cardinal rule 23 §B: `size` for dimensional
+ * scale, `bordered` boolean for surface treatment, `cols` for grid
+ * mode (column count). NEVER Ant's `itemLayout` / `grid` object —
+ * `cols` is the one knob.
+ *
+ * @example data-driven
+ *   <List
+ *     dataSource={users}
+ *     renderItem={(u) => (
+ *       <UserRow avatar={<Avatar src={u.photo} />} title={u.name} description={u.role} />
+ *     )}
+ *   />
+ *
+ */
+interface ListProps<T = unknown> {
+    /** Data array; required for data-driven mode. Omit when using children. */
+    dataSource?: T[];
+    /** Render fn for each datum. */
+    renderItem?: (item: T, index: number) => ReactNode;
+    /** Optional header content. */
+    header?: ReactNode;
+    /** Optional footer (e.g. pagination). */
+    footer?: ReactNode;
+    /** Title rendered above the list as a heading. */
+    title?: ReactNode;
+    /** Empty state when dataSource is empty (defaults to plain "No data"). */
+    empty?: ReactNode;
+    /** Dimensional scale. Default "default". */
+    size?: "small" | "default" | "large";
+    /** Wrap the list in a bordered surface. */
+    bordered?: boolean;
+    /** Show dividers between items. Defaults to true when `bordered`. */
+    split?: boolean;
+    /** Render a loading placeholder instead of items. */
+    loading?: boolean;
+    /** Grid mode — number of columns. Omit for list (1 column) layout. */
+    cols?: number;
+    className?: string;
+}
+declare function List<T = unknown>({ dataSource, renderItem, header, footer, title, empty, size, bordered, split, loading, cols, className, }: ListProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Image — `<img>` element with optional click-to-preview lightbox.
+ *
+ * Default opens a fullscreen overlay on click; Esc + outside-click +
+ * the corner × button all close it. Loading / error states render
+ * via the `placeholder` / `fallback` slots (skeleton-styled by
+ * default through the canonical `.image-wrap` class chain in
+ * `src/styles/shell/35-badge-tag-misc.css`).
+ *
+ * @example
+ *   <Image src="/photo.jpg" alt="Sunset" fit="cover" preview />
+ */
+interface ImageProps extends Omit<ComponentProps<"img">, "loading"> {
+    src: string;
+    alt: string;
+    /** Click → fullscreen preview overlay. Default true. */
+    preview?: boolean;
+    /** Loading placeholder (default: skeleton block). */
+    placeholder?: ReactNode;
+    /** Fallback when src fails to load. */
+    fallback?: ReactNode;
+    /** Eager / lazy loading. Default "lazy". */
+    loadStrategy?: "eager" | "lazy";
+    /** Object-fit. Default "cover". */
+    fit?: "cover" | "contain" | "fill" | "none" | "scale-down";
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Image({ src, alt, preview, placeholder, fallback, loadStrategy, fit, className, style, onClick, onLoad, onError, ...rest }: ImageProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * QRCode — render a QR code as inline SVG.
+ *
+ * Uses the `qrcode` library to compute the matrix (no canvas / no
+ * `dangerouslySetInnerHTML`); each dark cell becomes one `<rect>`.
+ * Foreground colour defaults to `currentColor` so the QR theme
+ * follows the surrounding text colour (cardinal rule 21 — theme
+ * axis flows naturally).
+ *
+ * @example
+ *   <QRCode value="https://godx.jp" />
+ *   <QRCode value="https://example" size={240} icon={<Logo />} />
+ */
+interface QRCodeProps {
+    /** Text / URL to encode. */
+    value: string;
+    /** Output size in pixels. Default 160. */
+    size?: number;
+    /** Error correction level. Default "M". */
+    errorLevel?: "L" | "M" | "Q" | "H";
+    /** Foreground colour (defaults to `currentColor` — themeable). */
+    color?: string;
+    /** Background colour (defaults to `transparent`). */
+    bgColor?: string;
+    /** Optional icon overlay (logo in the centre). */
+    icon?: ReactNode;
+    /** Icon size in px. Default = 22% of `size`. */
+    iconSize?: number;
+    className?: string;
+}
+declare function QRCode({ value, size, errorLevel, color, bgColor, icon, iconSize, className, }: QRCodeProps): react_jsx_runtime.JSX.Element;
+
+interface TooltipProps {
+    /** Tooltip text / content. When set, primitive auto-wires the
+     * Radix Root + Trigger(asChild) + Content around the child trigger
+     * element — the consumer just provides the trigger node. When
+     * omitted, the primitive renders children without tooltip wiring. */
+    content?: ReactNode;
+    /** Trigger element (data-driven mode) OR Radix Root children
+     * (compositional mode). */
+    children?: ReactNode;
+    /** Anchor side per cardinal rule 23 §B `placement` vocabulary.
+     * Default `top`. Honoured only in data-driven mode. */
+    placement?: "top" | "right" | "bottom" | "left";
+    /** Open / close delay in ms. Default 200. Overrides the
+     * app-wide default set on `<GodxConfigProvider>` for this single
+     * tooltip; without an override the Provider's shared timing wins. */
+    delayDuration?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function Tooltip({ content, children, placement, delayDuration, open, defaultOpen, onOpenChange, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Timeline — chronological event rail.
+ *
+ * Data-driven API (cardinal rule 23 + rule 31 — no parallel
+ * sub-component primitives). Consumers pass an `items` array; the
+ * primitive renders the rail end-to-end. Per-item customisation
+ * flows through optional `renderItem` for advanced cases.
+ *
+ * Three visual variants, each backed by an existing CSS atom shipped
+ * with the dxs-kintai card canon (`src/styles/shell/80-card-sections.css`):
+ *
+ *   - `"list"` (default) — vertical rail with markers, `.tl-list` + `.tl-item`.
+ *   - `"branching"` — approval pipeline with left timestamp, dot, body.
+ *     `.tl-br` + `.row`.
+ *   - `"feed"` — social-style avatar feed. `.tl-feed` + `.item`.
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `variant` — visual treatment ("list" | "branching" | "feed").
+ *   - `color` per item — semantic role of the marker.
+ *   - `current` per item — boolean, marks the active item.
+ *   - `animate` per item — pulsing ring around the marker.
+ *   - NEVER `mode` / `position` / `type` / `dot` / `pending` synonyms
+ *     (cardinal rule 32 — a separate `pending` prop is redundant when
+ *     a regular item with `animate: true` covers the same need).
+ *
+ * @example Data-driven (preferred)
+ *   <Timeline
+ *     items={[
+ *       { color: "success", title: "申請", time: "09:30" },
+ *       { color: "primary", current: true, animate: true, title: "承認待ち" },
+ *     ]}
+ *   />
+ *
+ * @example With renderItem (full custom)
+ *   <Timeline
+ *     items={events}
+ *     renderItem={(it) => <RichRow data={it} />}
+ *   />
+ */
+type TimelineVariant = "list" | "branching" | "feed";
+/** Identical to `TagPresetColor` — the framework's semantic palette
+ *  minus `"secondary"` (which is Typography's text-dimming slot).
+ *  Aliased so any colour added to `ColorProp` lights up here too. */
+type TimelineColor = Exclude<ColorProp, "secondary">;
+interface TimelineItem {
+    /** Stable key for React reconciliation. Defaults to the item index
+     * but consumers should pass a real id for lists that re-order. */
+    key?: string | number;
+    /** Semantic role of the marker. Default "default". */
+    color?: TimelineColor;
+    /** Heavier outline on the marker — typically the active step. */
+    current?: boolean;
+    /** Pulsing ring around the marker — typically paired with
+     * `current: true` on an in-progress item. Honours
+     * `prefers-reduced-motion` (rule 6 a11y baseline). */
+    animate?: boolean;
+    /** Time / timestamp slot — right-side label in `branching`, inline
+     * `.ts` in `list`, inline `.ts` in `feed`. Accepts a temporal value
+     * (`Date`, ISO string, or any `@internationalized/date` value) — in
+     * that case the active provider's locale + timezone format it via
+     * `useFormatters` (`format` or `relative` controlled by the
+     * Timeline `timeFormat` prop). Pass `ReactNode` to opt out. */
+    time?: ReactNode | Date | CalendarDate | CalendarDateTime | ZonedDateTime;
+    /** Avatar slot — `feed` variant only. */
+    avatar?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Extra content rendered after `title` + `description`. */
+    children?: ReactNode;
+    /** Per-item class merged onto the row. */
+    className?: string;
+}
+interface TimelineProps {
+    /** Items to render. Each row is a single object — no sub-component
+     * ceremony. */
+    items: TimelineItem[];
+    /** Custom row renderer. When set, takes priority over the default
+     * variant rendering — receives the item + the active variant +
+     * index, returns the full row JSX. */
+    renderItem?: (item: TimelineItem, variant: TimelineVariant, index: number) => ReactNode;
+    /** Visual variant. Default `list`. */
+    variant?: TimelineVariant;
+    /** Render items last-first. */
+    reverse?: boolean;
+    /** Show the vertical connector line that joins markers. Default
+     * `true` for `list` + `branching`; ignored by `feed` (feed has no
+     * connector by design). */
+    connector?: boolean;
+    /** How to render temporal `time` values. `"relative"` (default for
+     * `feed`) renders "2 時間前" / "2 hours ago" via `useFormatters`.
+     * `"datetime"` renders an absolute "MMM d, HH:mm" style. `"time"`
+     * renders the time-of-day portion only. Ignored when `time` is a
+     * `ReactNode` (string / JSX). */
+    timeFormat?: "relative" | "datetime" | "date" | "time";
+    className?: string;
+}
+declare function Timeline({ items, renderItem, variant, reverse, connector, timeFormat, className, }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Tree — standalone hierarchical view (no popover).
+ *
+ * React Aria-backed sibling of `<TreeSelect>` — same recursive shape,
+ * but renders inline with ARIA tree keyboard navigation and selection.
+ * Useful for org charts, file explorers, category navigators where the
+ * tree IS the surface (not a dropdown).
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `value` / `defaultValue` / `onValueChange` — Radix-style selection
+ *     (single: `string`; multiple: `string[]`).
+ *   - `multiple` — boolean (NEVER `mode="multiple"`).
+ *   - `expandedKeys` / `defaultExpandedKeys` / `onExpandedKeysChange`
+ *     — expansion state.
+ *   - `checkable` — render checkboxes alongside labels.
+ *   - `showLine` — render connector guides.
+ *   - `density` — local row spacing override for tree-heavy surfaces.
+ *
+ * @example
+ *   <Tree
+ *     treeData={[
+ *       { key: "eng", title: "エンジニアリング", children: [
+ *         { key: "fe", title: "Frontend" },
+ *         { key: "be", title: "Backend" },
+ *       ]},
+ *     ]}
+ *     defaultExpandedKeys={["eng"]}
+ *   />
+ */
+interface TreeNode {
+    key: string;
+    title: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    selectable?: boolean;
+    children?: TreeNode[];
+}
+interface TreeRenderItemState {
+    node: TreeNode;
+    isExpanded: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    hasChildren: boolean;
+    level: number;
+}
+type TreeDensity = "compact" | "default" | "comfortable";
+interface TreeProps {
+    treeData: TreeNode[];
+    /** Selected key(s). */
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    /** Allow multi-select. */
+    multiple?: boolean;
+    /** Initially-expanded node keys. */
+    defaultExpandedKeys?: string[];
+    /** Controlled expanded keys. */
+    expandedKeys?: string[];
+    onExpandedKeysChange?: (keys: string[]) => void;
+    /** Render checkboxes (multi-select via checkbox). Implies `multiple`. */
+    checkable?: boolean;
+    /** Render connector lines between depths. */
+    showLine?: boolean;
+    /** Local row spacing override. Defaults to the page density. */
+    density?: TreeDensity;
+    /** Override the row's icon + label content without replacing the ARIA tree. */
+    renderItem?: (state: TreeRenderItemState) => ReactNode;
+    className?: string;
+}
+declare const Tree: react.ForwardRefExoticComponent<TreeProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tour — multi-step product walkthrough.
+ *
+ * Overlays the viewport, highlights a target through a true cutout,
+ * advances step-by-step. The callout positions near the target's
+ * bounding rect (or page-centre when `placement="center"`).
+ *
+ * Vocabulary (cardinal rule 23 §B):
+ *   - `open` / `defaultOpen` / `onOpenChange` — Radix-style visibility.
+ *   - `current` / `defaultCurrent` / `onCurrentChange` — active step.
+ *   - `placement` — positional anchor of the callout.
+ *
+ * @example
+ *   <Tour
+ *     defaultOpen
+ *     steps={[
+ *       { target: "#new-btn", title: "新規作成", description: "…" },
+ *       { target: "#filter",  title: "絞り込み" },
+ *     ]}
+ *   />
+ */
+type TourPlacement = "top" | "right" | "bottom" | "left" | "center";
+interface TourStep {
+    /** CSS selector OR ref to highlight. Omit / `null` → centred. */
+    target?: string | RefObject<HTMLElement | null>;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Callout placement relative to the target. Default "bottom". */
+    placement?: TourPlacement;
+}
+interface TourLabels {
+    prev?: string;
+    next?: string;
+    finish?: string;
+    skip?: string;
+}
+interface TourProps {
+    steps: TourStep[];
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled current step (0-based). */
+    current?: number;
+    defaultCurrent?: number;
+    onCurrentChange?: (step: number) => void;
+    /** Called when the user clicks Finish on the last step. */
+    onFinish?: () => void;
+    /** Called when the user dismisses (Skip / Esc). */
+    onClose?: () => void;
+    /** Override button strings. */
+    labels?: TourLabels;
+    className?: string;
+}
+declare function Tour({ steps, open, defaultOpen, onOpenChange, current, defaultCurrent, onCurrentChange, onFinish, onClose, labels, className, }: TourProps): react.ReactPortal | null;
 
-export { Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, Card, CardContent, CardHeader, CardSubtitle, type CardSubtitleProps, CardTitle, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Input, type InputProps, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Separator, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, TimeInput, type TimeInputProps, cn };
+export { Alert, type AlertColor, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, AllDayChip, type AllDayChipProps, type AllDayChipSize, Anchor, type AnchorItem, type AnchorOrientation, type AnchorProps, AttendeeChip, type AttendeeChipProps, AttendeeListItem, type AttendeeListItemProps, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, AvailabilityRow, type AvailabilityRowProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarSizeToken, AvatarStack, type AvatarStackItem, type AvatarStackProps, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, type BreadcrumbOption, type BreadcrumbProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, CalendarEvent, CalendarOption, type CalendarOptionProps, Card, type CardAccent, type CardBand, type CardPadding, type CardProps, type CardTone, Carousel, type CarouselProps, Cascader, type CascaderOption, type CascaderProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxOption, Checklist, type ChecklistItem, type ChecklistProps, Col, type ColProps, Collapse, type CollapseItem, type CollapseProps, ColorPicker, type ColorPickerProps, type ColorPickerSize, ColorProp, ColorSwatchCheckbox, type ColorSwatchCheckboxProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DayHeaderPill, type DayHeaderPillProps, type DayHeaderPillState, Descriptions, type DescriptionsOption, type DescriptionsProps, Dialog, type DialogProps, DropdownMenu, Empty, type EmptyProps, EventBlock, type EventBlockProps, EventBlockVariant, EventPill, type EventPillProps, FeedbackColorProp, Field, type FieldCountProps, type FieldHelpProps, type FieldHelpTone, type FieldLabelProps, type FieldProps, Flex, type FlexAlign, type FlexGap, type FlexJustify, type FlexProps, Form, FormField, type FormFieldProps, type FormLayout, type FormProps, GridColumn, type GridColumnProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, IconRow, type IconRowAlign, type IconRowProps, IconSizeProp, Image, type ImageProps, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, InputSearch, type InputSearchProps, type InputSize, type InputStatus, Label, type LanedEvent, type LinkProps, List, type ListProps, LoadingProp, type LocaleTabItem, type LocaleTabStatus, LocaleTabs, type LocaleTabsProps, Menu, type MenuOption, type MenuOrientation, type MenuProps, MonthCell, type MonthCellProps, NowLine, type NowLineProps, PageHeader, type PageHeaderProps, type PageHeaderVariant, Pagination, type PaginationJustify, type PaginationProps, type PaginationSize, type PaginationVariant, type ParagraphProps, Popconfirm, type PopconfirmProps, Popover, Progress, type ProgressColor, type ProgressProps, type ProgressSize, type ProgressVariant, QRCode, type QRCodeProps, Radio, RadioGroup, type RadioGroupProps, type RadioOption, type RadioProps, Rate, type RateProps, type RateSize, Result, type ResultColor, type ResultProps, Select, type SelectOption, type SelectOptionGroup, type SelectOptions, type SelectProps, Separator, Sheet, type SheetProps, type SheetSide, SizeProp, Skeleton, type SkeletonProps, Slider, type SliderProps, Space, type SpaceProps, type SpaceSize, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerTone, Statistic, type StatisticProps, Steps, type StepsItem, type StepsOrientation, type StepsProps, SuggestedSlotCard, type SuggestedSlotCardProps, Switch, Table, TableProps, Tabs, type TabsOrientation, type TabsPlacement, type TabsProps, type TabsVariant, type TextProps, Textarea, type TextareaProps, type TextareaResize, TimeField, type TimeFieldProps, TimeGutter, type TimeGutterProps, TimeInput, type TimeInputProps, TimeLocale, Timeline, type TimelineColor, type TimelineItem, type TimelineProps, type TimelineVariant, type TitleProps, type TitleSize, Toaster, Tooltip, type TooltipProps, Tour, type TourLabels, type TourPlacement, type TourProps, type TourStep, Transfer, type TransferItem, type TransferProps, type TransferSize, Tree, type TreeDensity, type TreeNode, type TreeProps, type TreeRenderItemState, TreeSelect, type TreeSelectOption, type TreeSelectProps, Typography, type TypographyColor, type TypographyCommonProps, type TypographyTruncate, Watermark, type WatermarkProps, cn, computePageRange, layoutEvents, useFormLoading };