@foldkit/ui 0.122.1 → 0.124.0

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * as FileDrop from './fileDrop/public.js';
 export * as Input from './input/public.js';
 export * as Listbox from './listbox/public.js';
 export * as Menu from './menu/public.js';
+export * as Nav from './nav/public.js';
 export * as Popover from './popover/public.js';
 export * as RadioGroup from './radioGroup/public.js';
 export * as Select from './select/public.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAA;AACpD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,WAAW,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAA;AACpD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAA;AAC1C,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAC9C,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAA;AACxC,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAC9C,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAA;AACpD,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAA;AACxC,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAA;AAC1C,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAC9C,OAAO,KAAK,WAAW,MAAM,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,uBAAuB,CAAA;AAClD,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAA;AACpD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,WAAW,MAAM,yBAAyB,CAAA;AACtD,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAA;AACpD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAA;AAC1C,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAC9C,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAA;AACxC,OAAO,KAAK,GAAG,MAAM,iBAAiB,CAAA;AACtC,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAC9C,OAAO,KAAK,UAAU,MAAM,wBAAwB,CAAA;AACpD,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAA;AAC5C,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAA;AACxC,OAAO,KAAK,KAAK,MAAM,mBAAmB,CAAA;AAC1C,OAAO,KAAK,OAAO,MAAM,qBAAqB,CAAA;AAC9C,OAAO,KAAK,WAAW,MAAM,yBAAyB,CAAA"}

package/dist/index.js

@@ -12,6 +12,7 @@ export * as FileDrop from './fileDrop/public.js';
 export * as Input from './input/public.js';
 export * as Listbox from './listbox/public.js';
 export * as Menu from './menu/public.js';
+export * as Nav from './nav/public.js';
 export * as Popover from './popover/public.js';
 export * as RadioGroup from './radioGroup/public.js';
 export * as Select from './select/public.js';

package/dist/nav/index.d.ts

@@ -0,0 +1,49 @@
+import { type ChildAttribute, type Html } from 'foldkit/html';
+/** Per-item render info passed to the consumer's `toView`. Generic over
+ *  `Value extends string`: the item value is typed as the consumer's union
+ *  (typically a route tag) so `toView` can switch on it without casting. */
+export type ItemInfo<Value extends string = string> = Readonly<{
+    value: Value;
+    index: number;
+    isCurrent: boolean;
+    link: ReadonlyArray<ChildAttribute>;
+}>;
+/** Render-time payload published to the consumer's `toView`.
+ *
+ *  - `nav`: ARIA attributes for the wrapping navigation landmark. Carries
+ *    `aria-label` only; the `<nav>` element already supplies the navigation
+ *    role, so spread this onto an `h.nav`.
+ *  - `items`: one entry per `viewInputs.items`, in the same order, each with
+ *    the anchor's attribute bundle and derived current state. */
+export type RenderInfo<Value extends string = string> = Readonly<{
+    nav: ReadonlyArray<ChildAttribute>;
+    items: ReadonlyArray<ItemInfo<Value>>;
+}>;
+/** View inputs for `Nav.view`. Generic over `Value extends string` so the
+ *  consumer's section/route union flows into `toView`, `toHref`, and
+ *  `isItemCurrent` without casting. */
+export type ViewInputs<Value extends string = string> = Readonly<{
+    items: ReadonlyArray<Value>;
+    ariaLabel: string;
+    toHref: (value: Value, index: number) => string;
+    isItemCurrent: (value: Value, index: number) => boolean;
+    toView: (render: RenderInfo<Value>) => Html;
+}>;
+/** Renders a navigation landmark whose items are links, marking the current
+ *  destination with `aria-current="page"`. Stateless: the current item is
+ *  derived from `isItemCurrent`, which the consumer drives from the URL, the
+ *  single source of truth for which page is showing.
+ *
+ *  Use this for URL-driven navigation where each section is a separate
+ *  route with its own URL, deep-linking, and browser-history behavior.
+ *  Reach for `Tabs` instead when switching content within a single page;
+ *  `Tabs` carries the `tablist`/`tab`/`tabpanel` semantics, which are
+ *  wrong for URL-driven navigation.
+ *
+ *  Headless: `toView` owns all markup, spreading the `nav` bundle onto an
+ *  `h.nav` and each `item.link` bundle onto an `h.a`. Keyboard support is the
+ *  browser's native link handling (Tab to move, Enter to follow); no roving
+ *  tabindex is imposed, since that is a composite-widget pattern, not a
+ *  navigation-landmark one. */
+export declare const view: <Value extends string = string>(viewInputs: ViewInputs<Value>) => Html;
+//# sourceMappingURL=index.d.ts.map

package/dist/nav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/nav/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,IAAI,EAGV,MAAM,cAAc,CAAA;AAIrB;;4EAE4E;AAC5E,MAAM,MAAM,QAAQ,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAC7D,KAAK,EAAE,KAAK,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;CACpC,CAAC,CAAA;AAEF;;;;;;iEAMiE;AACjE,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAC/D,GAAG,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IAClC,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAA;CACtC,CAAC,CAAA;AAEF;;uCAEuC;AACvC,MAAM,MAAM,UAAU,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IAC/D,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAA;IAC3B,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC/C,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAA;IACvD,MAAM,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAA;CAC5C,CAAC,CAAA;AAMF;;;;;;;;;;;;;;;+BAe+B;AAC/B,eAAO,MAAM,IAAI,GAAI,KAAK,SAAS,MAAM,GAAG,MAAM,EAChD,YAAY,UAAU,CAAC,KAAK,CAAC,KAC5B,IAmCF,CAAA"}

package/dist/nav/index.js

@@ -0,0 +1,43 @@
+import { Array, Option } from 'effect';
+import { childAttributes, html, } from 'foldkit/html';
+// VIEW
+const ARIA_CURRENT_PAGE = 'page';
+/** Renders a navigation landmark whose items are links, marking the current
+ *  destination with `aria-current="page"`. Stateless: the current item is
+ *  derived from `isItemCurrent`, which the consumer drives from the URL, the
+ *  single source of truth for which page is showing.
+ *
+ *  Use this for URL-driven navigation where each section is a separate
+ *  route with its own URL, deep-linking, and browser-history behavior.
+ *  Reach for `Tabs` instead when switching content within a single page;
+ *  `Tabs` carries the `tablist`/`tab`/`tabpanel` semantics, which are
+ *  wrong for URL-driven navigation.
+ *
+ *  Headless: `toView` owns all markup, spreading the `nav` bundle onto an
+ *  `h.nav` and each `item.link` bundle onto an `h.a`. Keyboard support is the
+ *  browser's native link handling (Tab to move, Enter to follow); no roving
+ *  tabindex is imposed, since that is a composite-widget pattern, not a
+ *  navigation-landmark one. */
+export const view = (viewInputs) => {
+    const h = html();
+    const { items, ariaLabel, toHref, isItemCurrent, toView } = viewInputs;
+    const itemInfos = Array.map(items, (value, index) => {
+        const isCurrent = isItemCurrent(value, index);
+        const maybeCurrentAttributes = Option.liftPredicate([h.AriaCurrent(ARIA_CURRENT_PAGE), h.DataAttribute('current', '')], () => isCurrent);
+        const linkAttributes = [
+            h.Href(toHref(value, index)),
+            ...Option.getOrElse(maybeCurrentAttributes, () => []),
+        ];
+        return {
+            value,
+            index,
+            isCurrent,
+            link: childAttributes(linkAttributes),
+        };
+    });
+    const navAttributes = [h.AriaLabel(ariaLabel)];
+    return toView({
+        nav: childAttributes(navAttributes),
+        items: itemInfos,
+    });
+};

package/dist/nav/public.d.ts

@@ -0,0 +1,3 @@
+export { view } from './index.js';
+export type { ItemInfo, RenderInfo, ViewInputs } from './index.js';
+//# sourceMappingURL=public.d.ts.map

package/dist/nav/public.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/nav/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA"}

package/dist/nav/public.js

@@ -0,0 +1 @@
+export { view } from './index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foldkit/ui",
-  "version": "0.122.1",
+  "version": "0.124.0",
   "description": "Headless, accessible UI components for Foldkit",
   "type": "module",
   "main": "./dist/index.js",
@@ -127,7 +127,7 @@
     "typedoc": "^0.28.19",
     "typescript": "^6.0.3",
     "vitest": "^4.1.9",
-    "foldkit": "0.122.1"
+    "foldkit": "0.124.0"
   },
   "keywords": [
     "foldkit",