@godxjp/ui 18.4.0 → 18.6.0

package/dist/props/components/data-display.prop.d.ts

@@ -1,6 +1,6 @@
 /** Data Display component prop types — @see docs/COMPONENTS.md#data-display */
 import type * as React from "react";
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, ChildrenProp, ToneProp, HeadingLevelProp, SizeProp, LabelProp, IdProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ColumnDefProp, GetRowIdProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp } from "../vocabulary/index.js";
 /** @see EmptyState */
 /**
  * Semantic intent of the EmptyState icon medallion — a subset of the shared `ToneProp` vocabulary
@@ -50,6 +50,21 @@ export type DescriptionsItemProp = {
     value: React.ReactNode;
     mono?: boolean;
 };
+/**
+ * @see Avatar
+ *
+ * Identity mark. `shape` is the ONLY appearance knob: the default `circle` is the person avatar
+ * (unchanged — an existing `<Avatar>` renders identically), `square` is the entity-header
+ * organization / service mark (compact rounded square on the brand surface). Every value it
+ * paints — radius, box size, fill, glyph colour — comes from the `--avatar-square-*` component
+ * tokens (cardinal rule #45), so a service retunes the entity mark once in its theme instead of
+ * overriding `className` per call site.
+ */
+export type AvatarProp = React.ComponentPropsWithoutRef<"span"> & {
+    shape?: AvatarShapeProp;
+    className?: ClassNameProp;
+    children?: ChildrenProp;
+};
 /** @see Badge */
 export type BadgeProp = {
     variant?: "default" | "secondary" | "outline";
@@ -136,6 +151,65 @@ export type DataTableProp<T> = {
     onSortChange?: OnSortChangeProp;
     loading?: boolean;
     empty?: React.ReactNode;
+    /**
+     * Failure state (#216). `true` = built-in localized message (with a retry when `onRetry` is
+     * given); any other node replaces it. `false`/`undefined` = the read succeeded.
+     */
+    error?: React.ReactNode;
+    /**
+     * Permission-denied state (#216) — refused, not failed. `true` = built-in localized message
+     * with NO retry. Takes precedence over `error`.
+     */
+    denied?: React.ReactNode;
+    /** Retry handler surfaced by the built-in `error` state. */
+    onRetry?: HandlerProp;
+    /**
+     * Named collection contract (gh#253) — the SAME preset the `Table` primitive owns, forwarded to
+     * the table DataTable renders. `"default"` (the default) emits no attribute and matches no
+     * selector. `"action-collection"` is the canonical dense approval / action queue: below
+     * `collapseBelow` the desktop intrinsic column widths give way to the token-owned column-PRIORITY
+     * measures (`--table-action-collection-*`) under `table-layout: fixed`, cells wrap, and the
+     * surface drops its `--table-surface-min-inline-size` floor — so every column, row actions
+     * included, stays inside a 390px frame with no horizontal scroll. Mark each column with
+     * `priority` on its `ColumnDef`.
+     */
+    preset?: TablePresetProp;
+    /**
+     * Container step at which `preset="action-collection"` switches to the compact priority measures.
+     * Measured against the TABLE's own container (a container query), not the viewport, so a table in
+     * a master rail collapses before the page does. Default `"sm"`. Ignored while `preset` is
+     * `"default"`.
+     */
+    collapseBelow?: BreakpointProp;
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/**
+ * ListRow geometry — `default` (the roomy entity row) or `compact` (#246: the inline-actions row —
+ * Avatar + title/description + one or two small trailing Buttons on ONE line inside a narrow card).
+ * A ListRow-LOCAL subset of the shared density vocabulary: the row has no `comfortable` step, so it
+ * is deliberately narrower than `DensityProp` (and unrelated to `PageDensityProp`/`TableDensityProp`).
+ */
+export type ListRowDensityProp = Exclude<DensityProp, "comfortable">;
+/** @see ListRow */
+export type ListRowProp = {
+    /** Render element — `div` (default) or `li` when the parent is a `<ul>`/`<ol>`. */
+    as?: "div" | "li";
+    /** Leading slot — a decorative icon or an Avatar. Mark a purely decorative icon `aria-hidden`. */
+    leading?: React.ReactNode;
+    /** Primary line — rendered in medium weight. */
+    title: TitleProp | React.ReactNode;
+    /** Secondary line under the title (muted, xs). */
+    description?: DescriptionProp | React.ReactNode;
+    /** Trailing slot — the row action(s): a Button / DropdownMenu trigger, a Badge, or a Switch. */
+    trailing?: React.ReactNode;
+    /** Cross-axis alignment of the columns — `center` (default) or `start` for multi-line content. */
+    align?: "center" | "start";
+    /** How over-long title/description resolve — `truncate` (default) or `wrap` (#224). */
+    overflow?: "truncate" | "wrap";
+    /** Row geometry — `default` or the compact inline-actions preset (#246). */
+    density?: ListRowDensityProp;
+    /** Read/unread state — indicator dot + localized `sr-only` text, never colour alone (#225). */
+    unread?: boolean;
+    className?: ClassNameProp;
+};

package/dist/props/components/data-entry.prop.d.ts

@@ -10,6 +10,12 @@ import type { UploadFileItem } from "../../components/data-entry/upload-types.js
 import type { FieldA11yProps } from "../../lib/field-a11y.js";
 import type { ClassNameProp, DisabledProp, EmptyMessageProp, ErrorProp, HelperProp, IdProp, LabelProp, NameProp, OnChangeProp, OnValueChangeProp, OnSearchChangeProp, OpenProp, OnOpenChangeProp, PlaceholderProp, RequiredProp, ValueProp, DefaultValueProp, FormLayoutProp, WidthProp, BreakpointProp, DensityProp, SizeProp } from "../vocabulary/index.js";
 import type { ResponsiveGridColumnsProp } from "./layout.prop.js";
+/** One-outline-per-group appearance for the compound InputOTP control. */
+export type InputOTPGroupAppearanceProp = "slots" | "grouped";
+/** @see InputOTPGroup */
+export type InputOTPGroupProp = React.HTMLAttributes<HTMLDivElement> & {
+    appearance?: InputOTPGroupAppearanceProp;
+};
 /** @see Input */
 export type InputProp = React.InputHTMLAttributes<HTMLInputElement> & {
     /** Show an inline ✕ that clears the field while it holds text (default false). */

package/dist/props/components/feedback.prop.d.ts

@@ -62,6 +62,16 @@ export type AlertActionsProp = React.HTMLAttributes<HTMLDivElement> & {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
+/**
+ * @see SheetContent — responsive drawer / detail-panel presentation contract.
+ *
+ * - `"side"` (default) — always the physical `side` panel the consumer named. Today's behaviour.
+ * - `"auto"` — desktop side panel above `--sheet-responsive-breakpoint-width`, mobile bottom sheet
+ *   at and below it. The breakpoint is a token, so a service moves the line once for every overlay.
+ * - `"bottom"` — always the mobile bottom-sheet presentation (deterministic embedded surfaces,
+ *   component tests, and composites that already decided they are on a compact viewport).
+ */
+export type SheetResponsiveProp = "auto" | "side" | "bottom";
 /** @see SkeletonRows */
 export type SkeletonRowsProp = {
     rows?: number;

package/dist/props/components/index.d.ts

@@ -1,9 +1,9 @@
-export type { AppShellProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
+export type { AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
 export type { InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, DateRangePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
-export type { EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
+export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
-export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SkeletonRowsProp, } from "./feedback.prop.js";
+export type { AlertQueryErrorProp, AlertProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";
 export type { PaginationProp, StepsProp, StepItemProp, StepStatusProp, TabsProp, TabItemProp, } from "./navigation.prop.js";
 export type { AppProviderProp, AppContextValue, AppSettingKind, AppSettingPickerProp, } from "./app.prop.js";