asheeui 1.1.0 → 2.0.0

package/dist/components/search-input/SearchInput.d.ts

@@ -0,0 +1,111 @@
+import { ChangeEventHandler, InputHTMLAttributes } from 'react';
+import { FieldStatus } from '../field/field-config';
+import { SearchInputConfig } from './search-input-config';
+type BaseSearchInputProps = SearchInputConfig & Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "color" | "defaultValue" | "onChange" | "size" | "type" | "value">;
+/**
+ * Props for the SearchInput component.
+ */
+export interface SearchInputProps extends BaseSearchInputProps {
+    /**
+     * The current query, for a consumer that owns it.
+     */
+    value?: string;
+    /**
+     * The initial query, for a consumer that does not.
+     */
+    defaultValue?: string;
+    /**
+     * Called with the native change event, which is how a form library hears
+     * about the field.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Called with the next query whenever it changes, including when the field is
+     * emptied. It is the handler to use when the query drives a result list.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Called with the query when the reader submits the field.
+     * Supplying it makes the component a form, so Enter submits and the field is
+     * announced as the page's search.
+     */
+    onSearch?: (value: string) => void;
+    /**
+     * Supporting text under the field.
+     */
+    description?: string;
+    /**
+     * Validation message under the field.
+     */
+    message?: string;
+    /**
+     * Validation status of the field.
+     *
+     * @default "default"
+     */
+    status?: FieldStatus;
+    /**
+     * Whether a search is in progress, which the field reports as busy.
+     *
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Keyboard shortcut a consumer has bound elsewhere, shown as a hint.
+     * The field only displays it: binding a global shortcut is an application
+     * concern, because the field cannot know what else the shortcut should do.
+     */
+    shortcut?: string;
+    /**
+     * Extra classes for the search region.
+     */
+    className?: string;
+}
+/**
+ * A text field that searches.
+ *
+ * SearchInput composes the framework's text field and adds the search contract:
+ * the field is announced as a search region with a name, so a screen reader user
+ * can jump to it; the query is reported through `onValueChange` while it is typed
+ * and through `onSearch` when it is submitted; and the field can empty itself
+ * with a named control instead of requiring the reader to select the text and
+ * delete it.
+ *
+ * The component is controlled when `value` is given, and owns the query
+ * otherwise. The clear control works in both cases: it empties the field and
+ * returns focus to it, and a controlled consumer hears about the change through
+ * `onValueChange` so it can update its own state.
+ *
+ * @param props - SearchInput configuration options and input attributes.
+ * @param props.value - The query, for a controlled consumer.
+ * @param props.defaultValue - The initial query, for an uncontrolled one.
+ * @param props.onValueChange - Called with the next query.
+ * @param props.onSearch - Called with the query on submit, which is also what
+ * makes the component a form.
+ * @param props.label - Name of the region and of the field. Defaults to
+ * "Search".
+ * @param props.hideLabel - Keep the name for assistive technology only.
+ * Defaults to true.
+ * @param props.clearable - Offer a control that empties the field. Defaults to
+ * true.
+ * @param props.shortcut - Shortcut a consumer has bound, shown as a hint.
+ * @param props.isLoading - Report a search in progress. Defaults to false.
+ * @param props.size - Density of the field and its controls. Defaults to "md".
+ * @returns The rendered field.
+ *
+ * @example
+ * ```tsx
+ * <SearchInput
+ *   placeholder="Search invoices"
+ *   onValueChange={setQuery}
+ *   onSearch={runSearch}
+ *   shortcut="Command K"
+ * />
+ * ```
+ *
+ * @see Input - The text field the component composes.
+ * @see DataTable - Uses it for the search control above a table.
+ */
+export declare const SearchInput: import('react').ForwardRefExoticComponent<SearchInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/search-input/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/SearchInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,EACL,KAAK,kBAAkB,EAEvB,KAAK,mBAAmB,EAIzB,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGzD,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,uBAAuB,CAAC;AAS/B,KAAK,oBAAoB,GAAG,iBAAiB,GAC3C,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,UAAU,GACV,WAAW,GACX,OAAO,GACP,cAAc,GACd,UAAU,GACV,MAAM,GACN,MAAM,GACN,OAAO,CACV,CAAC;AAEJ;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAEhD;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,WAAW,+GA0KvB,CAAC"}

package/dist/components/search-input/SearchInput.js

@@ -0,0 +1,86 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { resolveConfigCascade as n } from "../../utils/resolve-token.js";
+import { Spinner as r } from "../spinner/spinner.js";
+import { Button as i } from "../button/Button.js";
+import { Input as a } from "../input/Input.js";
+import { SearchIcon as o } from "../../icons/SearchIcon.js";
+import { ClearIcon as s } from "../../icons/ClearIcon.js";
+import { FALLBACK_SEARCH_INPUT_CONFIG as c } from "./search-input-config.js";
+import { SEARCH_INPUT_HINT_SIZE_CLASS as l, SEARCH_INPUT_REGION_CLASS as u } from "./search-input-styles.js";
+import { forwardRef as d, useId as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/search-input/SearchInput.tsx
+var v = d(({ value: d, defaultValue: v, onChange: y, onValueChange: b, onSearch: x, description: S, message: C, status: w, isLoading: T, shortcut: E, label: D, hideLabel: O, clearable: k, size: A, color: j, className: M, id: N, ...P }, F) => {
+	let I = t(), L = f(), R = N ?? L, z = n({
+		size: A,
+		color: j,
+		clearable: k,
+		label: D,
+		hideLabel: O
+	}, I.components?.searchinput, c), [B, V] = m(v ?? ""), H = d ?? B, U = H.length > 0, W = p(null), G = (e) => {
+		W.current = e, typeof F == "function" ? F(e) : F && (F.current = e);
+	}, K = (e) => {
+		y?.(e), d === void 0 && V(e.target.value), b?.(e.target.value);
+	}, q = () => {
+		let e = W.current;
+		e && (e.value = "", e.focus()), d === void 0 && V(""), b?.("");
+	}, J = !!x, Y = /* @__PURE__ */ _(h, { children: [z.hideLabel && /* @__PURE__ */ g("label", {
+		htmlFor: R,
+		className: "sr-only",
+		children: z.label
+	}), /* @__PURE__ */ g(a, {
+		...P,
+		ref: G,
+		id: R,
+		type: "search",
+		value: d,
+		defaultValue: d === void 0 ? v : void 0,
+		onChange: K,
+		label: z.hideLabel ? void 0 : z.label,
+		description: S,
+		message: C,
+		status: w,
+		size: z.size,
+		color: z.color,
+		"aria-busy": T,
+		startContent: /* @__PURE__ */ g(o, {}),
+		endContent: /* @__PURE__ */ _(h, { children: [
+			E && /* @__PURE__ */ g("kbd", {
+				className: e("pointer-events-none shrink-0 rounded border border-border px-1.5 py-0.5 text-xs text-foreground/60", l[z.size]),
+				children: E
+			}),
+			T && /* @__PURE__ */ g(r, { size: "sm" }),
+			z.clearable && U && /* @__PURE__ */ g(i, {
+				icon: !0,
+				type: "button",
+				variant: "ghost",
+				size: z.size,
+				color: z.color,
+				"aria-label": "Clear search",
+				className: "shrink-0",
+				onClick: q,
+				children: /* @__PURE__ */ g(s, {})
+			})
+		] })
+	})] }), X = e(u, M);
+	return J ? /* @__PURE__ */ g("form", {
+		role: "search",
+		"aria-label": z.label,
+		className: X,
+		onSubmit: (e) => {
+			e.preventDefault(), x?.(H);
+		},
+		children: Y
+	}) : /* @__PURE__ */ g("div", {
+		role: "search",
+		"aria-label": z.label,
+		className: X,
+		children: Y
+	});
+});
+v.displayName = "SearchInput";
+//#endregion
+export { v as SearchInput };

package/dist/components/search-input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SearchInput';
+export * from './search-input-config';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/search-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,uBAAuB,CAAC"}

package/dist/components/search-input/index.js

@@ -0,0 +1,3 @@
+export * from "./SearchInput.js";
+export * from "./search-input-config.js";
+export * from "./search-input-styles.js";

package/dist/components/search-input/search-input-config.d.ts

@@ -0,0 +1,55 @@
+import { Color, Size } from '../../shared';
+/**
+ * Theme configuration options for the SearchInput component.
+ *
+ * Set under `components.searchinput` in the AsheeUI config. Values feed the
+ * component-level tier of the theme cascade.
+ */
+export interface SearchInputConfig {
+    /**
+     * Density of the field and of the control that dismisses its text.
+     *
+     * @default "md"
+     */
+    size?: Size;
+    /**
+     * Accent colour of the field's focus ring.
+     *
+     * @default "primary"
+     */
+    color?: Color;
+    /**
+     * Whether the field offers a control that empties it.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Visible label of the field.
+     * A search field is often named only for assistive technology, so the label
+     * can be hidden from view with `hideLabel`.
+     */
+    label?: string;
+    /**
+     * Whether the label is available to assistive technology only.
+     *
+     * @default true
+     */
+    hideLabel?: boolean;
+}
+/**
+ * Default config values registered for the SearchInput component.
+ * The label is named and hidden rather than absent, because a field whose name
+ * is empty is announced as "search" and nothing else.
+ */
+export declare const defaultSearchInputConfig: SearchInputConfig;
+declare module "../../libs/registry" {
+    interface ComponentTypeConfigRegistry {
+        searchinput: SearchInputConfig;
+    }
+}
+/**
+ * Hard fallback values used when no config tier provides a value.
+ */
+export declare const FALLBACK_SEARCH_INPUT_CONFIG: Required<SearchInputConfig>;
+//# sourceMappingURL=search-input-config.d.ts.map

package/dist/components/search-input/search-input-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input-config.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/search-input-config.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IAEd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBAMtC,CAAC;AAEF,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF;AAID;;GAEG;AACH,eAAO,MAAM,4BAA4B,EAAE,QAAQ,CAAC,iBAAiB,CAMpE,CAAC"}

package/dist/components/search-input/search-input-config.js

@@ -0,0 +1,20 @@
+"use client";
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/search-input/search-input-config.ts
+var t = {
+	size: "md",
+	color: "primary",
+	clearable: !0,
+	label: "Search",
+	hideLabel: !0
+};
+e("searchinput", t);
+var n = {
+	size: "md",
+	color: "primary",
+	clearable: !0,
+	label: "Search",
+	hideLabel: !0
+};
+//#endregion
+export { n as FALLBACK_SEARCH_INPUT_CONFIG, t as defaultSearchInputConfig };

package/dist/components/search-input/search-input-styles.d.ts

@@ -0,0 +1,16 @@
+import { Size } from '../../shared';
+/** The search region, which is announced as the page's search rather than a form. */
+export declare const SEARCH_INPUT_REGION_CLASS = "relative w-full min-w-0";
+/** The control that empties the field. */
+export declare const SEARCH_INPUT_CLEAR_CLASS = "shrink-0";
+/**
+ * The keyboard hint.
+ * It shows the shortcut a consumer has bound elsewhere; the field itself never
+ * listens for it, because a global shortcut is an application concern.
+ */
+export declare const SEARCH_INPUT_HINT_CLASS = "pointer-events-none shrink-0 rounded border border-border px-1.5 py-0.5 text-xs text-foreground/60";
+/** Density of the hint, so it matches the field it sits in. */
+export declare const SEARCH_INPUT_HINT_SIZE_CLASS: Record<Size, string>;
+/** Visually hidden label, for a field that is named but not captioned. */
+export declare const SEARCH_INPUT_HIDDEN_LABEL_CLASS = "sr-only";
+//# sourceMappingURL=search-input-styles.d.ts.map

package/dist/components/search-input/search-input-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input-styles.d.ts","sourceRoot":"","sources":["../../../src/components/search-input/search-input-styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,qFAAqF;AACrF,eAAO,MAAM,yBAAyB,4BAA4B,CAAC;AAEnE,0CAA0C;AAC1C,eAAO,MAAM,wBAAwB,aAAa,CAAC;AAEnD;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,uGACkE,CAAC;AAEvG,+DAA+D;AAC/D,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAI7D,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,+BAA+B,YAAY,CAAC"}

package/dist/components/search-input/search-input-styles.js

@@ -0,0 +1,9 @@
+"use client";
+//#region src/components/search-input/search-input-styles.ts
+var e = "relative w-full min-w-0", t = "shrink-0", n = "pointer-events-none shrink-0 rounded border border-border px-1.5 py-0.5 text-xs text-foreground/60", r = {
+	sm: "text-[10px]",
+	md: "text-xs",
+	lg: "text-sm"
+}, i = "sr-only";
+//#endregion
+export { t as SEARCH_INPUT_CLEAR_CLASS, i as SEARCH_INPUT_HIDDEN_LABEL_CLASS, n as SEARCH_INPUT_HINT_CLASS, r as SEARCH_INPUT_HINT_SIZE_CLASS, e as SEARCH_INPUT_REGION_CLASS };

package/dist/components/section-kit/ActionGroup.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ActionConfig } from '../../shared';
 /**
  * Props for the internal ActionGroup helper.
@@ -24,6 +25,12 @@ export interface ActionGroupProps {
      * Additional classes for the wrapper.
      */
     className?: string;
+    /**
+     * Content rendered alongside the configured actions, inside the same group.
+     * It is the way a pattern places an action that carries a handler, because a
+     * configured action describes a destination rather than a React callback.
+     */
+    children?: ReactNode;
 }
 /**
  * Renders a pattern's configured actions.
@@ -43,5 +50,5 @@ export interface ActionGroupProps {
  * />
  * ```
  */
-export declare function ActionGroup({ primaryAction, secondaryAction, align, className, }: ActionGroupProps): import("react").JSX.Element | null;
+export declare function ActionGroup({ primaryAction, secondaryAction, align, className, children, }: ActionGroupProps): import("react").JSX.Element | null;
 //# sourceMappingURL=ActionGroup.d.ts.map

package/dist/components/section-kit/ActionGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/section-kit/ActionGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;OAGG;IACH,eAAe,CAAC,EAAE,YAAY,CAAC;IAE/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,eAAe,EACf,KAAe,EACf,SAAS,GACV,EAAE,gBAAgB,sCAoBlB"}
+{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/section-kit/ActionGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAIjD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;OAGG;IACH,eAAe,CAAC,EAAE,YAAY,CAAC;IAE/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,aAAa,EACb,eAAe,EACf,KAAe,EACf,SAAS,EACT,QAAQ,GACT,EAAE,gBAAgB,sCAqBlB"}

package/dist/components/section-kit/ActionGroup.js

@@ -3,16 +3,20 @@ import { cn as e } from "../../utils/cn.js";
 import { Button as t } from "../button/Button.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/section-kit/ActionGroup.tsx
-function i({ primaryAction: t, secondaryAction: i, align: o = "start", className: s }) {
-	return !t && !i ? null : /* @__PURE__ */ r("div", {
+function i({ primaryAction: t, secondaryAction: i, align: o = "start", className: s, children: c }) {
+	return !t && !i && !c ? null : /* @__PURE__ */ r("div", {
 		className: e("flex flex-col gap-3 sm:flex-row sm:items-center", o === "center" && "sm:justify-center", s),
-		children: [t && /* @__PURE__ */ n(a, {
-			action: t,
-			defaultVariant: "solid"
-		}), i && /* @__PURE__ */ n(a, {
-			action: i,
-			defaultVariant: "bordered"
-		})]
+		children: [
+			t && /* @__PURE__ */ n(a, {
+				action: t,
+				defaultVariant: "solid"
+			}),
+			i && /* @__PURE__ */ n(a, {
+				action: i,
+				defaultVariant: "bordered"
+			}),
+			c
+		]
 	});
 }
 function a({ action: e, defaultVariant: r }) {

package/dist/components/section-kit/SkipLink.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Skip link helper for AsheeUI.
+ *
+ * This file provides the internal `SkipLink` component: the first focusable
+ * element of a page composition, which lets a keyboard reader pass repeated
+ * navigation and land in the content. It is shared by the page compositions so
+ * the behaviour (and the classes that hide it until it is focused) are written
+ * once. It is an internal helper and is not part of the public component
+ * inventory.
+ */
+/**
+ * Classes of the skip link.
+ *
+ * The link is visually hidden until it receives focus, which is the arrangement
+ * a keyboard reader needs: it is the first thing Tab reaches, and it is
+ * invisible to a pointer user until then.
+ */
+export declare const SKIP_LINK_CLASS = "sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-foreground focus:ring-2 focus:ring-primary";
+/**
+ * Props for the internal SkipLink helper.
+ */
+export interface SkipLinkProps {
+    /**
+     * Identifier of the region the link leads to.
+     * The region is expected to be focusable (`tabIndex={-1}`), so following the
+     * link moves the reader into the content rather than only scrolling to it.
+     */
+    targetId: string;
+    /**
+     * Wording of the link, which is also its accessible name.
+     */
+    label: string;
+    /**
+     * Additional classes for the anchor.
+     */
+    className?: string;
+}
+/**
+ * Renders the skip link of a page composition.
+ *
+ * @param props - The destination, the wording and any extra classes.
+ * @returns The rendered anchor.
+ *
+ * @example
+ * ```tsx
+ * <SkipLink targetId="main-content" label="Skip to content" />
+ * ```
+ */
+export declare function SkipLink({ targetId, label, className }: SkipLinkProps): import("react").JSX.Element;
+//# sourceMappingURL=SkipLink.d.ts.map

package/dist/components/section-kit/SkipLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.d.ts","sourceRoot":"","sources":["../../../src/components/section-kit/SkipLink.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,kMACqK,CAAC;AAElM;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,aAAa,+BAMrE"}

package/dist/components/section-kit/SkipLink.js

@@ -0,0 +1,14 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/section-kit/SkipLink.tsx
+var n = "sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-foreground focus:ring-2 focus:ring-primary";
+function r({ targetId: r, label: i, className: a }) {
+	return /* @__PURE__ */ t("a", {
+		href: `#${r}`,
+		className: e(n, a),
+		children: i
+	});
+}
+//#endregion
+export { n as SKIP_LINK_CLASS, r as SkipLink };

package/dist/components/section-kit/index.d.ts

@@ -2,11 +2,12 @@
  * Internal section kit for AsheeUI.
  *
  * The kit holds the parts the framework's patterns share: the heading block
- * (`SectionHeading`) and the configured action group (`ActionGroup`). It is an
- * internal helper module, like the field and menu helpers: it is deliberately
- * not exported from the package entry point and is not part of the public
- * component inventory.
+ * (`SectionHeading`), the configured action group (`ActionGroup`) and the skip
+ * link the page compositions lead with (`SkipLink`). It is an internal helper
+ * module, like the field and menu helpers: it is deliberately not exported from
+ * the package entry point and is not part of the public component inventory.
  */
 export * from './ActionGroup';
 export * from './SectionHeading';
+export * from './SkipLink';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/section-kit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/section-kit/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/section-kit/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC"}

package/dist/components/section-kit/index.js

@@ -1,2 +1,3 @@
 export * from "./ActionGroup.js";
 export * from "./SectionHeading.js";
+export * from "./SkipLink.js";

package/dist/components/sidebar-layout/SidebarLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarLayout.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAYjC,KAAK,sBAAsB,GAAG,mBAAmB,GAC/C,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,kEAAkE;IAClE,OAAO,EAAE,SAAS,CAAC;IAEnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,aAAa,+GAyDzB,CAAC"}
+{"version":3,"file":"SidebarLayout.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar-layout/SidebarLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,EACL,KAAK,WAAW,EAEhB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,yBAAyB,CAAC;AAajC,KAAK,sBAAsB,GAAG,mBAAmB,GAC/C,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB;IAChE,kEAAkE;IAClE,OAAO,EAAE,SAAS,CAAC;IAEnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,kCAAkC;IAClC,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,aAAa,+GAyDzB,CAAC"}

package/dist/components/sidebar-layout/SidebarLayout.js

@@ -4,37 +4,37 @@ import { cn as e } from "../../utils/cn.js";
 import { useAsheeConfig as t } from "../../libs/context.js";
 import { resolveConfigCascade as n } from "../../utils/resolve-token.js";
 import { FALLBACK_SIDEBAR_LAYOUT_CONFIG as r } from "./sidebar-layout-config.js";
-import { SIDEBAR_LAYOUT_ASIDE_CLASS as i, SIDEBAR_LAYOUT_ASIDE_END_BORDER_CLASS as a, SIDEBAR_LAYOUT_ASIDE_END_CLASS as o, SIDEBAR_LAYOUT_ASIDE_START_BORDER_CLASS as s, SIDEBAR_LAYOUT_CLASS as c, SIDEBAR_LAYOUT_CONTENT_CLASS as l, SIDEBAR_LAYOUT_WIDTH_CLASS as u } from "./sidebar-layout-styles.js";
-import { forwardRef as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { SIDEBAR_LAYOUT_ASIDE_CLASS as i, SIDEBAR_LAYOUT_ASIDE_END_BORDER_CLASS as a, SIDEBAR_LAYOUT_ASIDE_END_CLASS as o, SIDEBAR_LAYOUT_ASIDE_START_BORDER_CLASS as s, SIDEBAR_LAYOUT_CLASS as c, SIDEBAR_LAYOUT_CONTENT_CLASS as l, SIDEBAR_LAYOUT_ROW_CLASS as u, SIDEBAR_LAYOUT_WIDTH_CLASS as d } from "./sidebar-layout-styles.js";
+import { forwardRef as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/sidebar-layout/SidebarLayout.tsx
-var m = d(({ sidebar: d, header: m, footer: h, sidebarLabel: g = "Sidebar", side: _, sidebarWidth: v, stickySidebar: y, as: b, className: x, children: S, ...C }, w) => {
-	let T = t(), E = n({
-		side: _,
-		sidebarWidth: v,
-		stickySidebar: y
-	}, T.components?.sidebarlayout, r), D = E.side === "end";
-	return /* @__PURE__ */ p(b ?? "div", {
-		ref: w,
-		className: e(c, x),
-		...C,
+var h = f(({ sidebar: f, header: h, footer: g, sidebarLabel: _ = "Sidebar", side: v, sidebarWidth: y, stickySidebar: b, as: x, className: S, children: C, ...w }, T) => {
+	let E = t(), D = n({
+		side: v,
+		sidebarWidth: y,
+		stickySidebar: b
+	}, E.components?.sidebarlayout, r), O = D.side === "end";
+	return /* @__PURE__ */ m(x ?? "div", {
+		ref: T,
+		className: e(c, S),
+		...w,
 		children: [
-			m,
-			/* @__PURE__ */ p("div", {
-				className: "flex w-full flex-1 flex-col lg:flex-row",
-				children: [/* @__PURE__ */ f("aside", {
-					"aria-label": g,
-					className: e(i, u[E.sidebarWidth], D ? o : s, D ? a : void 0, E.stickySidebar && "lg:sticky lg:top-0 lg:h-dvh lg:overflow-y-auto"),
-					children: d
-				}), /* @__PURE__ */ f("div", {
+			h,
+			/* @__PURE__ */ m("div", {
+				className: u,
+				children: [/* @__PURE__ */ p("aside", {
+					"aria-label": _,
+					className: e(i, d[D.sidebarWidth], O ? o : s, O ? a : void 0, D.stickySidebar && "lg:sticky lg:top-0 lg:h-dvh lg:overflow-y-auto"),
+					children: f
+				}), /* @__PURE__ */ p("div", {
 					className: l,
-					children: S
+					children: C
 				})]
 			}),
-			h
+			g
 		]
 	});
 });
-m.displayName = "SidebarLayout";
+h.displayName = "SidebarLayout";
 //#endregion
-export { m as SidebarLayout };
+export { h as SidebarLayout };

package/dist/components/sidebar-layout/sidebar-layout-styles.d.ts

@@ -1,9 +1,16 @@
 import { SidebarLayoutWidth } from './sidebar-layout-config';
 /**
- * The shell: a full-height column that becomes a row from the `lg` breakpoint,
- * where the navigation column and the content sit beside each other.
+ * The shell: a full-height column of the header, the two-column row and the
+ * footer. The shell itself stays a column at every width, so the header and the
+ * footer always span the page rather than sitting beside the columns.
  */
-export declare const SIDEBAR_LAYOUT_CLASS = "flex min-h-dvh w-full flex-col bg-background lg:flex-row";
+export declare const SIDEBAR_LAYOUT_CLASS = "flex min-h-dvh w-full flex-col bg-background";
+/**
+ * The row that holds the navigation column and the content column.
+ * It stacks the two columns on a narrow screen and places them side by side
+ * from the `lg` breakpoint, which is where the shell becomes two columns.
+ */
+export declare const SIDEBAR_LAYOUT_ROW_CLASS = "flex w-full flex-1 flex-col lg:flex-row";
 /** The navigation column, stacked above the content on a narrow screen. */
 export declare const SIDEBAR_LAYOUT_ASIDE_CLASS = "w-full shrink-0 border-b border-border";
 /** The navigation column when it sits at the trailing edge. */

package/dist/components/sidebar-layout/sidebar-layout-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-layout-styles.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar-layout/sidebar-layout-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE;;;GAGG;AACH,eAAO,MAAM,oBAAoB,6DAC2B,CAAC;AAE7D,2EAA2E;AAC3E,eAAO,MAAM,0BAA0B,2CACG,CAAC;AAE3C,+DAA+D;AAC/D,eAAO,MAAM,8BAA8B,kBAAkB,CAAC;AAE9D,kEAAkE;AAClE,eAAO,MAAM,uCAAuC,gBAAgB,CAAC;AAErE,mEAAmE;AACnE,eAAO,MAAM,qCAAqC,gBAAgB,CAAC;AAEnE,qEAAqE;AACrE,eAAO,MAAM,iCAAiC,mDACI,CAAC;AAEnD,0BAA0B;AAC1B,eAAO,MAAM,4BAA4B,iCAAiC,CAAC;AAE3E,sEAAsE;AACtE,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAIzE,CAAC"}
+{"version":3,"file":"sidebar-layout-styles.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar-layout/sidebar-layout-styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,iDACe,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,4CACM,CAAC;AAE5C,2EAA2E;AAC3E,eAAO,MAAM,0BAA0B,2CACG,CAAC;AAE3C,+DAA+D;AAC/D,eAAO,MAAM,8BAA8B,kBAAkB,CAAC;AAE9D,kEAAkE;AAClE,eAAO,MAAM,uCAAuC,gBAAgB,CAAC;AAErE,mEAAmE;AACnE,eAAO,MAAM,qCAAqC,gBAAgB,CAAC;AAEnE,qEAAqE;AACrE,eAAO,MAAM,iCAAiC,mDACI,CAAC;AAEnD,0BAA0B;AAC1B,eAAO,MAAM,4BAA4B,iCAAiC,CAAC;AAE3E,sEAAsE;AACtE,eAAO,MAAM,0BAA0B,EAAE,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAIzE,CAAC"}

package/dist/components/sidebar-layout/sidebar-layout-styles.js

@@ -1,9 +1,9 @@
 "use client";
 //#region src/components/sidebar-layout/sidebar-layout-styles.ts
-var e = "flex min-h-dvh w-full flex-col bg-background lg:flex-row", t = "w-full shrink-0 border-b border-border", n = "lg:order-last", r = "lg:border-r", i = "lg:border-l", a = "lg:sticky lg:top-0 lg:h-dvh lg:overflow-y-auto", o = "flex min-w-0 flex-1 flex-col", s = {
+var e = "flex min-h-dvh w-full flex-col bg-background", t = "flex w-full flex-1 flex-col lg:flex-row", n = "w-full shrink-0 border-b border-border", r = "lg:order-last", i = "lg:border-r", a = "lg:border-l", o = "lg:sticky lg:top-0 lg:h-dvh lg:overflow-y-auto", s = "flex min-w-0 flex-1 flex-col", c = {
 	sm: "lg:w-56",
 	md: "lg:w-64",
 	lg: "lg:w-80"
 };
 //#endregion
-export { t as SIDEBAR_LAYOUT_ASIDE_CLASS, i as SIDEBAR_LAYOUT_ASIDE_END_BORDER_CLASS, n as SIDEBAR_LAYOUT_ASIDE_END_CLASS, r as SIDEBAR_LAYOUT_ASIDE_START_BORDER_CLASS, a as SIDEBAR_LAYOUT_ASIDE_STICKY_CLASS, e as SIDEBAR_LAYOUT_CLASS, o as SIDEBAR_LAYOUT_CONTENT_CLASS, s as SIDEBAR_LAYOUT_WIDTH_CLASS };
+export { n as SIDEBAR_LAYOUT_ASIDE_CLASS, a as SIDEBAR_LAYOUT_ASIDE_END_BORDER_CLASS, r as SIDEBAR_LAYOUT_ASIDE_END_CLASS, i as SIDEBAR_LAYOUT_ASIDE_START_BORDER_CLASS, o as SIDEBAR_LAYOUT_ASIDE_STICKY_CLASS, e as SIDEBAR_LAYOUT_CLASS, s as SIDEBAR_LAYOUT_CONTENT_CLASS, t as SIDEBAR_LAYOUT_ROW_CLASS, c as SIDEBAR_LAYOUT_WIDTH_CLASS };