@adea-ai/ui 0.89.2 → 0.94.0

package/README.md

@@ -74,6 +74,13 @@ The library owns the datalist and unique association; a suggestion does not
 restrict the submitted value. Native `required`, `pattern`, form, event, and
 ref props still apply to the input.
 
+`ModalDialog` defaults to a compact surface for short tasks. Use
+`size="settings"` with `SettingsPage` for a wider,
+viewport-bounded settings surface; the shared layout keeps its panel content
+scrollable while the dialog title remains visible.
+The settings navigation and modal sizing browser contracts run against the
+packed artifact in both pull-request validation and publishing.
+
 `ThreadPanel.headerActions` accepts shared controls for host actions such as
 marking a thread unread. Closing the thread remains a separate labelled,
 tooltip-backed control. Hosts retain read-marker and message authority.
@@ -86,6 +93,7 @@ focus restoration and is cancelled if the menu unmounts. Authentication,
 updates, navigation, and other effects remain host callbacks.
 
 `SidebarNavTitle` accepts polymorphic `as` for a host's title heading.
+`SidebarNavLabel` keeps a row's complete accessible text while truncating its visible label, leaving room for adjacent controls. The navigation root clamps its preferred width to the containing lane at narrow widths and enlarged root text. `SidebarNavRow` moves adjacent actions onto a second line when the item's preferred label space and the controls cannot fit together.
 Use `SidebarNavSection.headingAs` (h1 through h6) for section headings.
 Sections may be uncontrolled with `defaultOpen` or controlled with `open` and
 `onOpenChange`. Put disclosure-button attributes and host-owned row interactions
@@ -313,6 +321,14 @@ The selected KiroCrew textarea guard is translated to Solid ownership; it adds
 no document listener or application session state. Source and license details
 are retained in `NOTICE`.
 
+The field contract addresses the textarea itself: `inputRef` receives its native
+`HTMLTextAreaElement`, `inputId` assigns its stable id, and `inputLabel`,
+`inputDescription` and `inputDescribedBy` provide its accessible name and help.
+The default `inputSize="comfortable"` uses the shared 4rem minimum and 12rem
+maximum; `inputResize` selects one of the Textarea's named resize behaviors.
+`Textarea` owns both its standalone and borderless `variant="composer"`
+appearances, so consumers do not need to style a nested control.
+
 Run `bun run test:components` for the built Solid component contracts in
 Chromium and WebKit. The event-sequence tests exercise browser handling of
 composition flags, timers and focus recovery; manual operating-system IME
@@ -726,11 +742,12 @@ composition evidence; bounded runtime projection, storage and production chat
 integration remain application acceptance gates. Attribution for the selected
 KiroCrew source contracts is recorded in the issue-specific `NOTICE` entry.
 
-The shared `TopBar` contracts its middle track on narrow screens. Its side groups
-scroll horizontally when enlarged text makes all controls wider than the viewport;
-keyboard focus reveals each action. Groups opt out of native window dragging.
-Use `TopBarTitle align="center"` for a centered title and layout-only visibility
-classes when a title should yield space to essential controls.
+On narrow screens, the shared `TopBar` keeps a usable middle Search target while
+side groups scroll horizontally when their actions do not fit. Keyboard focus
+reveals each action. Groups opt out of native window dragging.
+Use `TopBarTitle align="center"` to center text within its slot; the host controls
+slot placement. Use layout-only visibility classes when a title should yield
+space to essential controls.
 
 ### Controlled appearance mode
 

package/dist/NOTICE

@@ -450,3 +450,22 @@ installation/execution authority, provider data and app-specific services are
 excluded. Its distinct `/apps/library` core-app launchpad is also excluded:
 this selected unit is the external verified plugin marketplace adapter, while
 Adea's #757 App Library remains a separate core-view and rail-management flow.
+
+## Windowed tree row composition translated from Terax
+
+`packages/ui/src/components/composites/tree/` translates the file-row hierarchy
+from `src/modules/explorer/FileExplorer.tsx` and
+`src/modules/explorer/TreeRow.tsx`, pinned at Terax revision
+`b02a7dcbfe58d22b2352d9618b8ed3199e317a00`.
+
+    Copyright 2026 Crynta. Licensed under the Apache License, Version 2.0.
+
+The shared rows retain the disclosure, leading file/folder affordance, primary
+label, selection, and trailing-action composition. The shared Tree owns ARIA
+tree semantics and roving keyboard focus, including wrapped Up/Down movement;
+the donor's Up/Down behavior clamps at the ends. Hosts supply the complete
+expanded projection and mounted window, and retain filesystem identity,
+selection, open/rename/drop behavior, native services, and the reveal callback.
+React, Tauri, Hugeicons, and Terax runtime state are not included. The donor
+contains no Tree ARIA or row-focus contract, so those semantics are supplied by
+this Solid component and are checked under the packed consumer.

package/dist/components/composites/list-row/index.d.ts

@@ -1,2 +1,3 @@
 export { ListGroup, ListRow, type ListRowProps } from './list-row';
+export { ListRowControl, type ListRowControlProps } from './list-row-control';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/composites/list-row/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/composites/list-row/index.js

@@ -1,2 +1,3 @@
+import { ListRowControl } from "./list-row-control.js";
 import { ListGroup, ListRow } from "./list-row.js";
-export { ListGroup, ListRow };
+export { ListGroup, ListRow, ListRowControl };

package/dist/components/composites/list-row/list-row-control.d.ts

@@ -0,0 +1,20 @@
+import type { PolymorphicProps } from '@kobalte/core/polymorphic';
+import type { ComponentProps, JSX, ValidComponent } from 'solid-js';
+export type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicProps<T, {
+    class?: string;
+    /** Marks the row as current. Sets `aria-current` for a link row. */
+    selected?: boolean;
+    /** Draw the row at the compact height. */
+    dense?: boolean;
+    /** Leading slot: an avatar, an icon, a checkbox. */
+    leading?: JSX.Element;
+    /** Trailing slot: a count, a menu trigger, a timestamp. */
+    trailing?: JSX.Element;
+    /** A second line that wraps and grows the row to fit its content. */
+    description?: string;
+    /** Native button type; defaults to `button` for button rows. */
+    type?: ComponentProps<'button'>['type'];
+}>;
+/** A tree-shakeable ListRow renderer without optional tooltip behavior. */
+export declare function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowControlProps<T>): JSX.Element;
+//# sourceMappingURL=list-row-control.d.ts.map

package/dist/components/composites/list-row/list-row-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-row-control.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row-control.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAInE,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAClF,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,CACF,CAAA;AAMD,2EAA2E;AAC3E,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA6E7F"}

package/dist/components/composites/list-row/list-row-control.js

@@ -0,0 +1,96 @@
+import { cn } from "../../../lib/utils.js";
+import { className, createComponent, effect, insert, memo, mergeProps, template } from "solid-js/web";
+import { Show, splitProps } from "solid-js";
+import { Polymorphic } from "@kobalte/core/polymorphic";
+//#region src/components/composites/list-row/list-row-control.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=list-row-leading class="flex shrink-0 items-center justify-center [&amp;_svg]:size-4">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=list-row-description>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span data-slot=list-row-trailing>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-slot=list-row-content class="flex min-w-0 flex-1 items-center gap-2.5"><span data-slot=list-row-label class="flex min-w-0 flex-1 flex-col"><span class=truncate>`);
+/** A tree-shakeable ListRow renderer without optional tooltip behavior. */
+function ListRowControl(props) {
+	const [local, rest] = splitProps(props, [
+		"as",
+		"class",
+		"selected",
+		"dense",
+		"leading",
+		"trailing",
+		"description",
+		"type",
+		"tabIndex",
+		"children"
+	]);
+	const hasClickHandler = () => Boolean(rest.onClick || rest["on:click"]);
+	const rowAs = () => local.as ?? (hasClickHandler() ? "button" : "div");
+	return createComponent(Polymorphic, mergeProps({
+		get as() {
+			return rowAs();
+		},
+		get type() {
+			return memo(() => rowAs() === "button")() ? local.type ?? "button" : local.type;
+		},
+		get tabIndex() {
+			return local.tabIndex ?? (rowAs() === "button" || rowAs() === "a" ? 0 : void 0);
+		},
+		get ["aria-current"]() {
+			return local.selected ? "true" : void 0;
+		},
+		get ["data-selected"]() {
+			return local.selected ? "" : void 0;
+		},
+		get ["data-description"]() {
+			return local.description ? "" : void 0;
+		},
+		get ["class"]() {
+			return cn("group/row list-row-description flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm", "transition-colors ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", {
+				"h-row-sm": local.dense && !local.description,
+				"h-row-md": !local.dense && !local.description
+			}, {
+				"bg-primary-subtle text-foreground": local.selected,
+				"hover:bg-surface-hover": !local.selected
+			}, local.class);
+		}
+	}, rest, { get children() {
+		return [createComponent(Show, {
+			get when() {
+				return local.leading;
+			},
+			get children() {
+				var _el$ = _tmpl$();
+				insert(_el$, () => local.leading);
+				return _el$;
+			}
+		}), (() => {
+			var _el$2 = _tmpl$4(), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild;
+			insert(_el$4, () => local.children);
+			insert(_el$3, createComponent(Show, {
+				get when() {
+					return local.description;
+				},
+				get children() {
+					var _el$5 = _tmpl$2();
+					insert(_el$5, () => local.description);
+					effect(() => className(_el$5, cn("text-xs break-words", local.selected ? "text-foreground" : "text-muted-foreground")));
+					return _el$5;
+				}
+			}), null);
+			insert(_el$2, createComponent(Show, {
+				get when() {
+					return local.trailing;
+				},
+				get children() {
+					var _el$6 = _tmpl$3();
+					insert(_el$6, () => local.trailing);
+					effect(() => className(_el$6, cn("ms-auto flex shrink-0 items-center gap-1", local.selected ? "text-foreground" : "text-muted-foreground")));
+					return _el$6;
+				}
+			}), null);
+			return _el$2;
+		})()];
+	} }));
+}
+//#endregion
+export { ListRowControl };
+
+//# sourceMappingURL=list-row-control.js.map

package/dist/components/composites/list-row/list-row-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-row-control.js","names":["PolymorphicProps","Polymorphic","ComponentProps","JSX","ValidComponent","Show","splitProps","cn","ListRowControlProps","T","class","selected","dense","leading","Element","trailing","description","type","ListRowControlBaseProps","as","ListRowControl","props","local","rest","hasClickHandler","Boolean","onClick","rowAs","_$createComponent","_$mergeProps","_$memo","tabIndex","undefined","aria-current","data-selected","data-description","children","when","_el$","_tmpl$","_$insert","_el$2","_tmpl$4","_el$3","firstChild","_el$4","_el$5","_tmpl$2","_$effect","_$className","_el$6","_tmpl$3","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/composites/list-row/list-row-control.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type ListRowControlProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    /** Marks the row as current. Sets `aria-current` for a link row. */\n    selected?: boolean\n    /** Draw the row at the compact height. */\n    dense?: boolean\n    /** Leading slot: an avatar, an icon, a checkbox. */\n    leading?: JSX.Element\n    /** Trailing slot: a count, a menu trigger, a timestamp. */\n    trailing?: JSX.Element\n    /** A second line that wraps and grows the row to fit its content. */\n    description?: string\n    /** Native button type; defaults to `button` for button rows. */\n    type?: ComponentProps<'button'>['type']\n  }\n>\n\ntype ListRowControlBaseProps<T extends ValidComponent = 'div'> = ListRowControlProps<T> & {\n  as?: T\n}\n\n/** A tree-shakeable ListRow renderer without optional tooltip behavior. */\nexport function ListRowControl<T extends ValidComponent = 'div'>(props: ListRowControlProps<T>) {\n  const [local, rest] = splitProps(props as ListRowControlBaseProps, [\n    'as',\n    'class',\n    'selected',\n    'dense',\n    'leading',\n    'trailing',\n    'description',\n    'type',\n    'tabIndex',\n    'children',\n  ])\n  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])\n  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T\n\n  return (\n    <Polymorphic\n      as={rowAs()}\n      type={rowAs() === 'button' ? (local.type ?? 'button') : local.type}\n      tabIndex={local.tabIndex ?? (rowAs() === 'button' || rowAs() === 'a' ? 0 : undefined)}\n      aria-current={local.selected ? 'true' : undefined}\n      data-selected={local.selected ? '' : undefined}\n      data-description={local.description ? '' : undefined}\n      class={cn(\n        'group/row list-row-description flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',\n        'transition-colors ease-out outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        {\n          'h-row-sm': local.dense && !local.description,\n          'h-row-md': !local.dense && !local.description,\n        },\n        {\n          'bg-primary-subtle text-foreground': local.selected,\n          'hover:bg-surface-hover': !local.selected,\n        },\n        local.class\n      )}\n      {...(rest as ComponentProps<'div'>)}\n    >\n      <Show when={local.leading}>\n        <span\n          data-slot=\"list-row-leading\"\n          class=\"flex shrink-0 items-center justify-center [&_svg]:size-4\"\n        >\n          {local.leading}\n        </span>\n      </Show>\n      <div data-slot=\"list-row-content\" class=\"flex min-w-0 flex-1 items-center gap-2.5\">\n        <span data-slot=\"list-row-label\" class=\"flex min-w-0 flex-1 flex-col\">\n          <span class=\"truncate\">{local.children}</span>\n          <Show when={local.description}>\n            <span\n              data-slot=\"list-row-description\"\n              class={cn(\n                'text-xs break-words',\n                local.selected ? 'text-foreground' : 'text-muted-foreground'\n              )}\n            >\n              {local.description}\n            </span>\n          </Show>\n        </span>\n        <Show when={local.trailing}>\n          <span\n            data-slot=\"list-row-trailing\"\n            class={cn(\n              'ms-auto flex shrink-0 items-center gap-1',\n              local.selected ? 'text-foreground' : 'text-muted-foreground'\n            )}\n          >\n            {local.trailing}\n          </span>\n        </Show>\n      </div>\n    </Polymorphic>\n  )\n}\n"],"mappings":";;;;;;;;;;AA8BA,SAAgBoB,eAAiDC,OAA+B;CAC9F,MAAM,CAACC,OAAOC,QAAQjB,WAAWe,OAAkC;EACjE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CAAU,CACX;CACD,MAAMG,wBAAwBC,QAAQF,KAAKG,WAAWH,KAAK,WAAW;CACtE,MAAMI,cAAeL,MAAMH,OAAOK,gBAAgB,IAAI,WAAW;CAEjE,OAAAI,gBACG3B,aAAW4B,WAAA;EAAA,IACVV,KAAE;GAAA,OAAEQ,MAAM;EAAC;EAAA,IACXV,OAAI;GAAA,OAAEa,WAAAH,MAAM,MAAM,QAAQ,CAAA,CAAA,IAAIL,MAAML,QAAQ,WAAYK,MAAML;EAAI;EAAA,IAClEc,WAAQ;GAAA,OAAET,MAAMS,aAAaJ,MAAM,MAAM,YAAYA,MAAM,MAAM,MAAM,IAAIK,KAAAA;EAAU;EAAA,KAAA,kBAAA;GAAA,OACvEV,MAAMX,WAAW,SAASqB,KAAAA;EAAS;EAAA,KAAA,mBAAA;GAAA,OAClCV,MAAMX,WAAW,KAAKqB,KAAAA;EAAS;EAAA,KAAA,sBAAA;GAAA,OAC5BV,MAAMN,cAAc,KAAKgB,KAAAA;EAAS;EAAA,KAAA,WAAA;GAAA,OAC7CzB,GACL,4FACA,2CACA,oFACA;IACE,YAAYe,MAAMV,SAAS,CAACU,MAAMN;IAClC,YAAY,CAACM,MAAMV,SAAS,CAACU,MAAMN;GACrC,GACA;IACE,qCAAqCM,MAAMX;IAC3C,0BAA0B,CAACW,MAAMX;GACnC,GACAW,MAAMZ,KACR;EAAC;CAAA,GACIa,MAA6B,EAAA,IAAAa,WAAA;EAAA,OAAA,CAAAR,gBAEjCvB,MAAI;GAAA,IAACgC,OAAI;IAAA,OAAEf,MAAMT;GAAO;GAAA,IAAAuB,WAAA;IAAA,IAAAE,OAAAC,OAAA;IAAAC,OAAAF,YAKpBhB,MAAMT,OAAO;IAAA,OAAAyB;GAAA;EAAA,CAAA,UAAA;GAAA,IAAAG,QAAAC,QAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAC;GAAAJ,OAAAK,aAKUvB,MAAMc,QAAQ;GAAAI,OAAAG,OAAAf,gBACrCvB,MAAI;IAAA,IAACgC,OAAI;KAAA,OAAEf,MAAMN;IAAW;IAAA,IAAAoB,WAAA;KAAA,IAAAU,QAAAC,QAAA;KAAAP,OAAAM,aAQxBxB,MAAMN,WAAW;KAAAgC,aAAAC,UAAAH,OALXvC,GACL,uBACAe,MAAMX,WAAW,oBAAoB,uBACvC,CAAC,CAAA;KAAA,OAAAmC;IAAA;GAAA,CAAA,GAAA,IAAA;GAAAN,OAAAC,OAAAb,gBAMNvB,MAAI;IAAA,IAACgC,OAAI;KAAA,OAAEf,MAAMP;IAAQ;IAAA,IAAAqB,WAAA;KAAA,IAAAc,QAAAC,QAAA;KAAAX,OAAAU,aAQrB5B,MAAMP,QAAQ;KAAAiC,aAAAC,UAAAC,OALR3C,GACL,4CACAe,MAAMX,WAAW,oBAAoB,uBACvC,CAAC,CAAA;KAAA,OAAAuC;IAAA;GAAA,CAAA,GAAA,IAAA;GAAA,OAAAT;EAAA,EAAA,CAAA,CAAA;CAAA,EAAA,CAAA,CAAA;AAQb"}

package/dist/components/composites/list-row/list-row.d.ts

@@ -1,47 +1,27 @@
 import type { PolymorphicProps } from '@kobalte/core/polymorphic';
-import type { ComponentProps, JSX, ValidComponent } from 'solid-js';
-/**
- * ListRow.
- *
- * One row in a list of like things: a project, a session, a file, a person. It
- * is the highest-frequency component in an application of this shape, and the
- * one where a half-pixel of drift is most visible — twenty rows of a sidebar
- * make any inconsistency in height or padding obvious.
- *
- * The structure is fixed at four slots — `leading`, `children`, `meta`,
- * `trailing` — so rows that show an avatar, an icon, a status dot, a timestamp
- * and an overflow menu all sit at the same height without the caller doing
- * arithmetic.
- *
- * A row is only interactive when it is given an `as` that can be activated
- * (an anchor, a button) or an `onClick`. Click handlers default to a native
- * button; a row without either remains a `div` with no hover treatment.
- */
-export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<T, {
-    class?: string;
-    /** Marks the row as current. Sets `aria-current` for a link row. */
-    selected?: boolean;
-    /** Draw the row at the compact height. */
-    dense?: boolean;
-    /** Leading slot: an avatar, an icon, a checkbox. */
-    leading?: JSX.Element;
-    /** Trailing slot: a count, a menu trigger, a timestamp. */
-    trailing?: JSX.Element;
-    /** A dimmed second line under the main content. */
-    description?: string;
+import type { ComponentProps, ValidComponent } from 'solid-js';
+import { type ListRowControlProps } from './list-row-control';
+export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<T, ListRowControlProps<T> & {
     /** A short explanation shown on pointer hover and keyboard focus. */
     tooltip?: string;
     /** Native button type; defaults to `button` for button rows. */
     type?: ComponentProps<'button'>['type'];
+    /** Additional accessible description preserved on plain and rich rows. */
+    'aria-describedby'?: string;
 }>;
-export declare function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>): JSX.Element;
+/**
+ * Rich row composition with optional hover and keyboard tooltip behavior.
+ * Import ListRowControl when the tooltip API is not needed and the consumer
+ * wants the plain renderer to tree-shake independently.
+ */
+export declare function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>): import("solid-js").JSX.Element;
 /**
  * A group of rows with an optional heading and a scrolling body. The heading is
- * a plain label rather than a control: grouping is for reading, and a
- * disclosure on a list of five rows costs more attention than it saves.
+ * a plain label rather than a control: grouping is for reading, and a disclosure
+ * on a list of five rows costs more attention than it saves.
  */
 export declare function ListGroup(props: ComponentProps<'div'> & {
     label?: string;
-    action?: JSX.Element;
-}): JSX.Element;
+    action?: import('solid-js').JSX.Element;
+}): import("solid-js").JSX.Element;
 //# sourceMappingURL=list-row.d.ts.map

package/dist/components/composites/list-row/list-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list-row.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAKnE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC3E,CAAC,EACD;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACrB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;CACxC,CACF,CAAA;AA8FD,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,eAwB/E;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,eAoBhG"}
+{"version":3,"file":"list-row.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/list-row/list-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAI9D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAA;AAE7E,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,IAAI,gBAAgB,CAC3E,CAAC,EACD,mBAAmB,CAAC,CAAC,CAAC,GAAG;IACvB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gEAAgE;IAChE,IAAI,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;IACvC,0EAA0E;IAC1E,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,CACF,CAAA;AAuCD;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS,cAAc,GAAG,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,kCAgC/E;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,UAAU,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE,kCAoB3F"}

package/dist/components/composites/list-row/list-row.js

@@ -1,148 +1,101 @@
 import { cn } from "../../../lib/utils.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip/tooltip.js";
-import { className, createComponent, effect, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { Show, splitProps } from "solid-js";
-import { Polymorphic } from "@kobalte/core/polymorphic";
+import { ListRowControl } from "./list-row-control.js";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
 //#region src/components/composites/list-row/list-row.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span class="flex size-4 shrink-0 items-center justify-center [&amp;_svg]:size-4">`);
-var _tmpl$2 = /*#__PURE__*/ template(`<span data-slot=list-row-description>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<span class="flex min-w-0 flex-1 flex-col"><span class=truncate>`);
-var _tmpl$4 = /*#__PURE__*/ template(`<span data-slot=list-row-trailing>`);
-var _tmpl$5 = /*#__PURE__*/ template(`<span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100">`);
-var _tmpl$6 = /*#__PURE__*/ template(`<div class="group/list-header flex items-center gap-1 px-2 py-1"><span class="min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase">`);
-var _tmpl$7 = /*#__PURE__*/ template(`<div data-slot=list-group><div class="flex flex-col gap-0.5">`);
-function ListRowBase(props) {
-	const [local, rest] = splitProps(props, [
-		"as",
-		"class",
-		"selected",
-		"dense",
-		"leading",
-		"trailing",
-		"description",
-		"tooltip",
-		"type",
-		"tabIndex",
-		"children"
-	]);
-	return createComponent(Polymorphic, mergeProps({
-		get as() {
-			return local.as ?? "div";
-		},
-		get type() {
-			return memo(() => local.as === "button")() ? local.type ?? "button" : local.type;
-		},
-		get tabIndex() {
-			return local.tabIndex ?? (local.as === "button" || local.as === "a" ? 0 : void 0);
-		},
-		get ["aria-current"]() {
-			return local.selected ? "true" : void 0;
-		},
-		get ["data-selected"]() {
-			return local.selected ? "" : void 0;
-		},
-		get ["class"]() {
-			return cn("group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm", "transition-colors ease-out outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle", {
-				"h-row-sm": local.dense && !local.description,
-				"h-row-md": !local.dense && !local.description,
-				"min-h-row-sm py-1": local.dense && local.description,
-				"min-h-row-md py-1.5": !local.dense && local.description
-			}, {
-				"bg-primary-subtle text-foreground": local.selected,
-				"hover:bg-surface-hover": !local.selected
-			}, local.class);
-		}
-	}, rest, { get children() {
-		return [
-			createComponent(Show, {
-				get when() {
-					return local.leading;
-				},
-				get children() {
-					var _el$ = _tmpl$();
-					insert(_el$, () => local.leading);
-					return _el$;
-				}
-			}),
-			(() => {
-				var _el$2 = _tmpl$3(), _el$3 = _el$2.firstChild;
-				insert(_el$3, () => local.children);
-				insert(_el$2, createComponent(Show, {
-					get when() {
-						return local.description;
-					},
-					get children() {
-						var _el$4 = _tmpl$2();
-						insert(_el$4, () => local.description);
-						effect(() => className(_el$4, cn("truncate text-xs", local.selected ? "text-foreground" : "text-muted-foreground")));
-						return _el$4;
-					}
-				}), null);
-				return _el$2;
-			})(),
-			createComponent(Show, {
-				get when() {
-					return local.trailing;
-				},
-				get children() {
-					var _el$5 = _tmpl$4();
-					insert(_el$5, () => local.trailing);
-					effect(() => className(_el$5, cn("ms-auto flex shrink-0 items-center gap-1", local.selected ? "text-foreground" : "text-muted-foreground")));
-					return _el$5;
-				}
-			})
-		];
-	} }));
-}
+var _tmpl$ = /*#__PURE__*/ template(`<span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class="group/list-header flex items-center gap-1 px-2 py-1"><span class="min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase">`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div data-slot=list-group><div class="flex flex-col gap-0.5">`);
 /** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */
 function ListRowTooltipTarget(props) {
-	const [local, rest] = splitProps(props, ["rowAs"]);
-	return createComponent(ListRowBase, mergeProps({ get as() {
+	const [local, rest] = splitProps(props, [
+		"rowAs",
+		"externalDescribedBy",
+		"tooltipId",
+		"tooltipOpen"
+	]);
+	const describedBy = () => {
+		const ids = [
+			rest["aria-describedby"],
+			local.externalDescribedBy,
+			local.tooltipOpen?.() ? local.tooltipId : void 0
+		].flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean);
+		return [...new Set(ids)].join(" ") || void 0;
+	};
+	return createComponent(ListRowControl, mergeProps({ get as() {
 		return local.rowAs;
-	} }, rest));
+	} }, rest, { get ["aria-describedby"]() {
+		return describedBy();
+	} }));
 }
+/**
+* Rich row composition with optional hover and keyboard tooltip behavior.
+* Import ListRowControl when the tooltip API is not needed and the consumer
+* wants the plain renderer to tree-shake independently.
+*/
 function ListRow(props) {
-	const [local, rest] = splitProps(props, ["as", "tooltip"]);
+	const [local, rest] = splitProps(props, [
+		"as",
+		"tooltip",
+		"aria-describedby"
+	]);
+	const [tooltipOpen, setTooltipOpen] = createSignal(false);
+	const tooltipId = `list-row-tooltip-${createUniqueId()}`;
 	const hasClickHandler = () => Boolean(rest.onClick || rest["on:click"]);
 	const rowAs = () => local.as ?? (hasClickHandler() ? "button" : "div");
 	const rowType = () => rowAs() === "button" ? rest.type ?? "button" : rest.type;
+	const rowProps = () => ({
+		...rest,
+		type: rowType(),
+		"aria-describedby": local["aria-describedby"]
+	});
 	return createComponent(Show, {
 		get when() {
 			return local.tooltip;
 		},
 		get fallback() {
-			return createComponent(ListRowBase, mergeProps({
-				get as() {
-					return rowAs();
-				},
-				get type() {
-					return rowType();
-				}
-			}, rest));
+			return createComponent(ListRowControl, mergeProps({ get as() {
+				return rowAs();
+			} }, rowProps));
 		},
 		get children() {
-			return createComponent(Tooltip, { get children() {
-				return [createComponent(TooltipTrigger, mergeProps({
-					as: ListRowTooltipTarget,
-					get rowAs() {
-						return rowAs();
-					},
-					get type() {
-						return rowType();
-					}
-				}, rest, { get children() {
-					return rest.children;
-				} })), createComponent(TooltipContent, { get children() {
-					return local.tooltip;
-				} })];
-			} });
+			return createComponent(Tooltip, {
+				get open() {
+					return tooltipOpen();
+				},
+				onOpenChange: setTooltipOpen,
+				get children() {
+					return [createComponent(TooltipTrigger, mergeProps({
+						as: ListRowTooltipTarget,
+						get rowAs() {
+							return rowAs();
+						},
+						get type() {
+							return rowType();
+						},
+						get externalDescribedBy() {
+							return local["aria-describedby"];
+						},
+						tooltipId,
+						tooltipOpen
+					}, rest, { get children() {
+						return rest.children;
+					} })), createComponent(TooltipContent, {
+						id: tooltipId,
+						get children() {
+							return local.tooltip;
+						}
+					})];
+				}
+			});
 		}
 	});
 }
 /**
 * A group of rows with an optional heading and a scrolling body. The heading is
-* a plain label rather than a control: grouping is for reading, and a
-* disclosure on a list of five rows costs more attention than it saves.
+* a plain label rather than a control: grouping is for reading, and a disclosure
+* on a list of five rows costs more attention than it saves.
 */
 function ListGroup(props) {
 	const [local, rest] = splitProps(props, [
@@ -152,32 +105,32 @@ function ListGroup(props) {
 		"children"
 	]);
 	return (() => {
-		var _el$6 = _tmpl$7(), _el$0 = _el$6.firstChild;
-		spread(_el$6, mergeProps({ get ["class"]() {
+		var _el$ = _tmpl$3(), _el$5 = _el$.firstChild;
+		spread(_el$, mergeProps({ get ["class"]() {
 			return cn("flex flex-col gap-0.5", local.class);
 		} }, rest), false, true);
-		insert(_el$6, createComponent(Show, {
+		insert(_el$, createComponent(Show, {
 			get when() {
 				return local.label;
 			},
 			get children() {
-				var _el$7 = _tmpl$6(), _el$8 = _el$7.firstChild;
-				insert(_el$8, () => local.label);
-				insert(_el$7, createComponent(Show, {
+				var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild;
+				insert(_el$3, () => local.label);
+				insert(_el$2, createComponent(Show, {
 					get when() {
 						return local.action;
 					},
 					get children() {
-						var _el$9 = _tmpl$5();
-						insert(_el$9, () => local.action);
-						return _el$9;
+						var _el$4 = _tmpl$();
+						insert(_el$4, () => local.action);
+						return _el$4;
 					}
 				}), null);
-				return _el$7;
+				return _el$2;
 			}
-		}), _el$0);
-		insert(_el$0, () => local.children);
-		return _el$6;
+		}), _el$5);
+		insert(_el$5, () => local.children);
+		return _el$;
 	})();
 }
 //#endregion

package/dist/components/composites/list-row/list-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-row.js","names":["PolymorphicProps","Polymorphic","ComponentProps","JSX","ValidComponent","Show","splitProps","Tooltip","TooltipContent","TooltipTrigger","cn","ListRowProps","T","class","selected","dense","leading","Element","trailing","description","tooltip","type","ListRowBaseProps","as","ListRowBase","props","local","rest","_$createComponent","_$mergeProps","_$memo","tabIndex","undefined","aria-current","data-selected","children","when","_el$","_tmpl$","_$insert","_el$2","_tmpl$3","_el$3","firstChild","_el$4","_tmpl$2","_$effect","_$className","_el$5","_tmpl$4","ListRowTooltipTargetProps","Omit","rowAs","ListRowTooltipTarget","ListRow","hasClickHandler","Boolean","onClick","rowType","fallback","ListGroup","label","action","_el$6","_tmpl$7","_el$0","_$spread","_el$7","_tmpl$6","_el$8","_el$9","_tmpl$5","_$createComponent","_$mergeProps","_$memo","_$className"],"sources":["../../../../src/components/composites/list-row/list-row.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport { Polymorphic } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, JSX, ValidComponent } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\nimport { cn } from '#lib/utils'\n\n/**\n * ListRow.\n *\n * One row in a list of like things: a project, a session, a file, a person. It\n * is the highest-frequency component in an application of this shape, and the\n * one where a half-pixel of drift is most visible — twenty rows of a sidebar\n * make any inconsistency in height or padding obvious.\n *\n * The structure is fixed at four slots — `leading`, `children`, `meta`,\n * `trailing` — so rows that show an avatar, an icon, a status dot, a timestamp\n * and an overflow menu all sit at the same height without the caller doing\n * arithmetic.\n *\n * A row is only interactive when it is given an `as` that can be activated\n * (an anchor, a button) or an `onClick`. Click handlers default to a native\n * button; a row without either remains a `div` with no hover treatment.\n */\nexport type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  {\n    class?: string\n    /** Marks the row as current. Sets `aria-current` for a link row. */\n    selected?: boolean\n    /** Draw the row at the compact height. */\n    dense?: boolean\n    /** Leading slot: an avatar, an icon, a checkbox. */\n    leading?: JSX.Element\n    /** Trailing slot: a count, a menu trigger, a timestamp. */\n    trailing?: JSX.Element\n    /** A dimmed second line under the main content. */\n    description?: string\n    /** A short explanation shown on pointer hover and keyboard focus. */\n    tooltip?: string\n    /** Native button type; defaults to `button` for button rows. */\n    type?: ComponentProps<'button'>['type']\n  }\n>\n\ntype ListRowBaseProps<T extends ValidComponent = 'div'> = ListRowProps<T> & {\n  as?: T\n  type?: ComponentProps<'button'>['type']\n}\n\nfunction ListRowBase<T extends ValidComponent = 'div'>(props: ListRowBaseProps<T>) {\n  const [local, rest] = splitProps(props as ListRowProps, [\n    'as',\n    'class',\n    'selected',\n    'dense',\n    'leading',\n    'trailing',\n    'description',\n    'tooltip',\n    'type',\n    'tabIndex',\n    'children',\n  ])\n\n  return (\n    <Polymorphic\n      as={(local.as ?? 'div') as T}\n      type={local.as === 'button' ? (local.type ?? 'button') : local.type}\n      tabIndex={local.tabIndex ?? (local.as === 'button' || local.as === 'a' ? 0 : undefined)}\n      aria-current={local.selected ? 'true' : undefined}\n      data-selected={local.selected ? '' : undefined}\n      class={cn(\n        'group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',\n        'transition-colors ease-out outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',\n        {\n          'h-row-sm': local.dense && !local.description,\n          'h-row-md': !local.dense && !local.description,\n          'min-h-row-sm py-1': local.dense && local.description,\n          'min-h-row-md py-1.5': !local.dense && local.description,\n        },\n        {\n          'bg-primary-subtle text-foreground': local.selected,\n          'hover:bg-surface-hover': !local.selected,\n        },\n        local.class\n      )}\n      {...(rest as ComponentProps<'div'>)}\n    >\n      <Show when={local.leading}>\n        <span class=\"flex size-4 shrink-0 items-center justify-center [&_svg]:size-4\">\n          {local.leading}\n        </span>\n      </Show>\n      <span class=\"flex min-w-0 flex-1 flex-col\">\n        <span class=\"truncate\">{local.children}</span>\n        <Show when={local.description}>\n          <span\n            data-slot=\"list-row-description\"\n            class={cn(\n              'truncate text-xs',\n              local.selected ? 'text-foreground' : 'text-muted-foreground'\n            )}\n          >\n            {local.description}\n          </span>\n        </Show>\n      </span>\n      <Show when={local.trailing}>\n        <span\n          data-slot=\"list-row-trailing\"\n          class={cn(\n            'ms-auto flex shrink-0 items-center gap-1',\n            local.selected ? 'text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {local.trailing}\n        </span>\n      </Show>\n    </Polymorphic>\n  )\n}\n\ntype ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<\n  ListRowBaseProps<T>,\n  'as'\n> & { rowAs?: T }\n\n/** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */\nfunction ListRowTooltipTarget<T extends ValidComponent = 'div'>(\n  props: ListRowTooltipTargetProps<T>\n) {\n  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, ['rowAs'])\n  return <ListRowBase as={local.rowAs} {...(rest as ListRowBaseProps<T>)} />\n}\n\nexport function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {\n  const [local, rest] = splitProps(props as ListRowProps, ['as', 'tooltip'])\n  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])\n  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T\n  const rowType = () => (rowAs() === 'button' ? (rest.type ?? 'button') : rest.type)\n\n  return (\n    <Show\n      when={local.tooltip}\n      fallback={<ListRowBase as={rowAs()} type={rowType()} {...(rest as ListRowBaseProps<T>)} />}\n    >\n      <Tooltip>\n        <TooltipTrigger\n          as={ListRowTooltipTarget}\n          rowAs={rowAs()}\n          type={rowType()}\n          {...(rest as ListRowTooltipTargetProps<T>)}\n        >\n          {rest.children}\n        </TooltipTrigger>\n        <TooltipContent>{local.tooltip}</TooltipContent>\n      </Tooltip>\n    </Show>\n  )\n}\n\n/**\n * A group of rows with an optional heading and a scrolling body. The heading is\n * a plain label rather than a control: grouping is for reading, and a\n * disclosure on a list of five rows costs more attention than it saves.\n */\nexport function ListGroup(props: ComponentProps<'div'> & { label?: string; action?: JSX.Element }) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'action', 'children'])\n\n  return (\n    <div data-slot=\"list-group\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"group/list-header flex items-center gap-1 px-2 py-1\">\n          <span class=\"min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {local.label}\n          </span>\n          <Show when={local.action}>\n            <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100\">\n              {local.action}\n            </span>\n          </Show>\n        </div>\n      </Show>\n      <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n    </div>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"list-row.js","names":["PolymorphicProps","ComponentProps","ValidComponent","createSignal","createUniqueId","Show","splitProps","Tooltip","TooltipContent","TooltipTrigger","cn","ListRowControl","ListRowControlProps","ListRowProps","T","tooltip","type","ListRowTooltipTargetProps","Omit","rowAs","externalDescribedBy","tooltipId","tooltipOpen","ListRowTooltipTarget","props","local","rest","describedBy","ids","undefined","flatMap","value","split","filter","Boolean","Set","join","_$createComponent","_$mergeProps","as","aria-describedby","ListRow","setTooltipOpen","hasClickHandler","onClick","rowType","rowProps","when","fallback","children","open","onOpenChange","id","ListGroup","label","action","JSX","Element","_el$","_tmpl$3","_el$5","firstChild","_$spread","class","_$insert","_el$2","_tmpl$2","_el$3","_el$4","_tmpl$","_$createComponent","_$mergeProps"],"sources":["../../../../src/components/composites/list-row/list-row.tsx"],"sourcesContent":["import type { PolymorphicProps } from '@kobalte/core/polymorphic'\nimport type { ComponentProps, ValidComponent } from 'solid-js'\nimport { createSignal, createUniqueId, Show, splitProps } from 'solid-js'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'\nimport { cn } from '#lib/utils'\nimport { ListRowControl, type ListRowControlProps } from './list-row-control'\n\nexport type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<\n  T,\n  ListRowControlProps<T> & {\n    /** A short explanation shown on pointer hover and keyboard focus. */\n    tooltip?: string\n    /** Native button type; defaults to `button` for button rows. */\n    type?: ComponentProps<'button'>['type']\n    /** Additional accessible description preserved on plain and rich rows. */\n    'aria-describedby'?: string\n  }\n>\n\ntype ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<ListRowProps<T>, 'as'> & {\n  rowAs?: T\n  externalDescribedBy?: string\n  tooltipId?: string\n  tooltipOpen?: () => boolean\n}\n\n/** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */\nfunction ListRowTooltipTarget<T extends ValidComponent = 'div'>(\n  props: ListRowTooltipTargetProps<T>\n) {\n  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, [\n    'rowAs',\n    'externalDescribedBy',\n    'tooltipId',\n    'tooltipOpen',\n  ])\n  const describedBy = () => {\n    const ids = [\n      rest['aria-describedby'],\n      local.externalDescribedBy,\n      local.tooltipOpen?.() ? local.tooltipId : undefined,\n    ]\n      .flatMap((value) => value?.split(/\\s+/) ?? [])\n      .filter(Boolean)\n    return [...new Set(ids)].join(' ') || undefined\n  }\n\n  return (\n    <ListRowControl\n      as={local.rowAs}\n      {...(rest as unknown as ListRowControlProps<T>)}\n      aria-describedby={describedBy()}\n    />\n  )\n}\n\n/**\n * Rich row composition with optional hover and keyboard tooltip behavior.\n * Import ListRowControl when the tooltip API is not needed and the consumer\n * wants the plain renderer to tree-shake independently.\n */\nexport function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {\n  const [local, rest] = splitProps(props as ListRowProps<T>, ['as', 'tooltip', 'aria-describedby'])\n  const [tooltipOpen, setTooltipOpen] = createSignal(false)\n  const tooltipId = `list-row-tooltip-${createUniqueId()}`\n  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])\n  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T\n  const rowType = () => (rowAs() === 'button' ? (rest.type ?? 'button') : rest.type)\n  const rowProps = () =>\n    ({\n      ...rest,\n      type: rowType(),\n      'aria-describedby': local['aria-describedby'],\n    }) as unknown as ListRowControlProps<T>\n\n  return (\n    <Show when={local.tooltip} fallback={<ListRowControl as={rowAs()} {...rowProps()} />}>\n      <Tooltip open={tooltipOpen()} onOpenChange={setTooltipOpen}>\n        <TooltipTrigger\n          as={ListRowTooltipTarget}\n          rowAs={rowAs()}\n          type={rowType()}\n          externalDescribedBy={local['aria-describedby']}\n          tooltipId={tooltipId}\n          tooltipOpen={tooltipOpen}\n          {...(rest as ListRowTooltipTargetProps<T>)}\n        >\n          {rest.children}\n        </TooltipTrigger>\n        <TooltipContent id={tooltipId}>{local.tooltip}</TooltipContent>\n      </Tooltip>\n    </Show>\n  )\n}\n\n/**\n * A group of rows with an optional heading and a scrolling body. The heading is\n * a plain label rather than a control: grouping is for reading, and a disclosure\n * on a list of five rows costs more attention than it saves.\n */\nexport function ListGroup(\n  props: ComponentProps<'div'> & { label?: string; action?: import('solid-js').JSX.Element }\n) {\n  const [local, rest] = splitProps(props, ['class', 'label', 'action', 'children'])\n  return (\n    <div data-slot=\"list-group\" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>\n      <Show when={local.label}>\n        <div class=\"group/list-header flex items-center gap-1 px-2 py-1\">\n          <span class=\"min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n            {local.label}\n          </span>\n          <Show when={local.action}>\n            <span class=\"shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100\">\n              {local.action}\n            </span>\n          </Show>\n        </div>\n      </Show>\n      <div class=\"flex flex-col gap-0.5\">{local.children}</div>\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/components/composites/tree/index.d.ts

@@ -0,0 +1,4 @@
+/** Keyboard-accessible tree rows with virtualization-aware focus handoff. */
+export { Tree, TreeRow, type TreeProps, type TreeRowProps } from './tree';
+export type { TreeItemDescriptor } from './tree-navigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/composites/tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/composites/tree/index.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAA;AACzE,YAAY,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA"}