@stridge/noctis 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/components/pagination/pagination.js

@@ -0,0 +1,333 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon } from "../../icons/glyphs.js";
+import { useInjectedLabels, useNoctisStringFormatter } from "../../core/use-injected-labels.js";
+import { Button } from "../button/button.js";
+import { Input } from "../input/input.js";
+import { Select } from "../select/select.js";
+import { ButtonGroup } from "../button-group/button-group.js";
+import { PaginationProvider, usePaginationContext } from "./pagination.context.js";
+import { PAGINATION_SLOTS } from "./pagination.slots.js";
+import { controlsProps, infoProps, pageProps, pageSizeLabelProps, pageSizeProps, rootProps, separatorProps } from "./pagination.props.js";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pagination/pagination.tsx
+/** Default page-size choices, matching the common "rows per page" ladder. */
+const DEFAULT_PAGE_SIZE_OPTIONS = [
+	10,
+	25,
+	50,
+	100
+];
+/** English fallbacks for every accessible name + micro-copy; overridden by locale dict, then per-instance. */
+const DEFAULT_LABELS = {
+	navigation: "Pagination",
+	firstPage: "First page",
+	previousPage: "Previous page",
+	nextPage: "Next page",
+	lastPage: "Last page",
+	pageNumber: "Page number",
+	pageSize: "Page size",
+	perPage: "Per page"
+};
+/** Each label field → its `@stridge/noctis-intl` catalog key. */
+const LABEL_KEYS = {
+	navigation: "pagination.navigation",
+	firstPage: "pagination.firstPage",
+	previousPage: "pagination.previousPage",
+	nextPage: "pagination.nextPage",
+	lastPage: "pagination.lastPage",
+	pageNumber: "pagination.pageNumber",
+	pageSize: "pagination.pageSize",
+	perPage: "pagination.perPage"
+};
+/** Pagination's `sm`/`md` → the hosted Button/Input size (which share the `sm`/`md` rungs). */
+const controlSize = (size) => size;
+/** Pagination's `sm`/`md` → the hosted Icon size. */
+const glyphSize = (size) => size;
+/**
+* Page navigation: a row of nav controls (a welded `ButtonGroup` of First/Previous/Next/Last buttons),
+* an optional editable page field, a "Showing X–Y of Z" info line, and a page-size picker — composed
+* from the shipped `Button`, `ButtonGroup`, `Input`, and `Select`. `Pagination.Root` is controlled:
+* pass `page` + `onPageChange`, and `total` + `perPage` (so the info line and the last-page bound can
+* be computed) or an explicit `pageCount`. Every part reads the shared model through context, so the
+* bounds-disabling and clamping are handled for you.
+*
+* @see {@link Pagination.Root.Props}
+*/
+function PaginationRoot({ page = 1, onPageChange, total, perPage, pageCount: pageCountProp, size = "md", labels: labelsProp, className, children, ...props }) {
+	const labels = useInjectedLabels(DEFAULT_LABELS, LABEL_KEYS, labelsProp);
+	const pageCount = Math.max(1, pageCountProp ?? (total != null && perPage ? Math.ceil(total / perPage) : 1));
+	const value = useMemo(() => {
+		const goToPage = (next) => {
+			const clamped = Math.min(Math.max(Math.trunc(next), 1), pageCount);
+			if (clamped !== page) onPageChange?.(clamped);
+		};
+		return {
+			page,
+			pageCount,
+			perPage,
+			total,
+			size,
+			labels,
+			goToPage
+		};
+	}, [
+		page,
+		pageCount,
+		perPage,
+		total,
+		size,
+		labels,
+		onPageChange
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": PAGINATION_SLOTS.root,
+		"data-size": size,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(PaginationProvider, {
+			value,
+			children
+		})
+	});
+}
+/**
+* The "Showing X–Y of Z" status line, announced politely as the page changes. Renders nothing unless
+* `total` and `perPage` are known on the root — or pass a render function as children for custom text
+* (e.g. "Page X of Y"). Quieter than the controls by design.
+*/
+function PaginationInfo({ children, className, ...props }) {
+	const { page, pageCount, perPage, total } = usePaginationContext("Info");
+	const formatter = useNoctisStringFormatter();
+	const hasRange = total != null && perPage != null;
+	const from = !hasRange || total === 0 ? 0 : (page - 1) * perPage + 1;
+	const to = hasRange ? Math.min(page * perPage, total) : 0;
+	const content = children ? children({
+		page,
+		pageCount,
+		perPage,
+		total,
+		from,
+		to
+	}) : hasRange ? formatter.format("pagination.showing", {
+		from,
+		to,
+		total
+	}) : null;
+	if (content == null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": PAGINATION_SLOTS.info,
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		className,
+		...props,
+		children: content
+	});
+}
+/**
+* The page-size cluster — a layout wrapper that holds a `Pagination.PageSizeLabel` and a
+* `Pagination.PageSizeSelect` side by side. Compose them inside; the label and select are separate so
+* the consumer can reorder, restyle, translate, or drop either independently.
+*/
+function PaginationPageSize({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": PAGINATION_SLOTS.pageSize,
+		className,
+		...props,
+		children
+	});
+}
+/**
+* The label beside the page-size select (visible "Per page" micro-copy). Defaults to the localized
+* label; pass children to override the text. Purely visual — the select carries its own accessible name.
+*/
+function PaginationPageSizeLabel({ className, children, ...props }) {
+	const { labels } = usePaginationContext("PageSizeLabel");
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": PAGINATION_SLOTS.pageSizeLabel,
+		className,
+		...props,
+		children: children ?? labels.perPage
+	});
+}
+/**
+* The page-size `Select` of "items per page" choices. Controlled via `value` + `onValueChange`;
+* resetting the page to 1 on change is the consumer's call (do it in the handler).
+*/
+function PaginationPageSizeSelect({ value, onValueChange, options = DEFAULT_PAGE_SIZE_OPTIONS }) {
+	const { labels } = usePaginationContext("PageSizeSelect");
+	const items = useMemo(() => Object.fromEntries(options.map((option) => [option, String(option)])), [options]);
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		items,
+		value,
+		onValueChange: (next) => onValueChange(next),
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
+			"aria-label": labels.pageSize,
+			children: [/* @__PURE__ */ jsx(Select.Value, {}), /* @__PURE__ */ jsx(Select.Icon, {})]
+		}), /* @__PURE__ */ jsx(Select.Popup, { children: options.map((option) => /* @__PURE__ */ jsx(Select.Item, {
+			value: option,
+			children: option
+		}, option)) })]
+	});
+}
+/**
+* The navigation landmark wrapping a welded `ButtonGroup` of nav buttons. Compose `Pagination.First`,
+* `Pagination.Previous`, `Pagination.Next`, `Pagination.Last`, and/or `Pagination.Page` inside — use
+* only Previous/Next for a simple control, or add First/Last/Page for the full set.
+*/
+function PaginationControls({ className, children, ...props }) {
+	const { size, labels } = usePaginationContext("Controls");
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": labels.navigation,
+		"data-slot": PAGINATION_SLOTS.controls,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(ButtonGroup, {
+			variant: "secondary",
+			size: controlSize(size),
+			children
+		})
+	});
+}
+/** Shared icon-only nav button: bounds-disabled, clamping `goToPage`, RTL-mirrored chevron. */
+function NavButton({ glyph, label, target, disabled, "aria-label": ariaLabel, className, ...props }) {
+	const { size, goToPage } = usePaginationContext("Controls");
+	return /* @__PURE__ */ jsx(Button, {
+		iconOnly: true,
+		"aria-label": ariaLabel ?? label,
+		disabled,
+		className,
+		...props,
+		onClick: () => goToPage(target),
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: glyph,
+			directional: true,
+			size: glyphSize(size)
+		})
+	});
+}
+/** Jump to the first page. Disabled on page 1. */
+function PaginationFirst(props) {
+	const { page, labels } = usePaginationContext("First");
+	return /* @__PURE__ */ jsx(NavButton, {
+		glyph: ChevronsLeftIcon,
+		label: labels.firstPage,
+		target: 1,
+		disabled: page <= 1,
+		...props
+	});
+}
+/** Step to the previous page. Disabled on page 1. */
+function PaginationPrevious(props) {
+	const { page, labels } = usePaginationContext("Previous");
+	return /* @__PURE__ */ jsx(NavButton, {
+		glyph: ChevronLeftIcon,
+		label: labels.previousPage,
+		target: page - 1,
+		disabled: page <= 1,
+		...props
+	});
+}
+/** Step to the next page. Disabled on the last page. */
+function PaginationNext(props) {
+	const { page, pageCount, labels } = usePaginationContext("Next");
+	return /* @__PURE__ */ jsx(NavButton, {
+		glyph: ChevronRightIcon,
+		label: labels.nextPage,
+		target: page + 1,
+		disabled: page >= pageCount,
+		...props
+	});
+}
+/** Jump to the last page. Disabled on the last page. */
+function PaginationLast(props) {
+	const { page, pageCount, labels } = usePaginationContext("Last");
+	return /* @__PURE__ */ jsx(NavButton, {
+		glyph: ChevronsRightIcon,
+		label: labels.lastPage,
+		target: pageCount,
+		disabled: page >= pageCount,
+		...props
+	});
+}
+/**
+* An editable page-number field (the "full" affordance). Type a page and press Enter or blur to commit;
+* the value is clamped to the valid range and snaps back if cleared. Sits beside the nav buttons.
+*/
+function PaginationPage({ className, ...props }) {
+	const { page, labels, goToPage } = usePaginationContext("Page");
+	const [draft, setDraft] = useState(String(page));
+	useEffect(() => {
+		setDraft(String(page));
+	}, [page]);
+	const commit = () => {
+		const next = Number(draft);
+		if (draft.trim() !== "" && Number.isFinite(next)) goToPage(next);
+		else setDraft(String(page));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": PAGINATION_SLOTS.page,
+		"data-button-group-item": "",
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(Input.Root, { children: /* @__PURE__ */ jsx(Input.Control, {
+			"aria-label": labels.pageNumber,
+			inputMode: "numeric",
+			autoComplete: "off",
+			value: draft,
+			onChange: (event) => setDraft(event.currentTarget.value),
+			onBlur: commit,
+			onKeyDown: (event) => {
+				if (event.key === "Enter") commit();
+			}
+		}) })
+	});
+}
+/** A vertical hairline between pagination clusters. Purely decorative — a quiet visual rule, hidden
+* from assistive tech (the clusters are already distinct landmarks/labels). */
+function PaginationSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": PAGINATION_SLOTS.separator,
+		"aria-hidden": "true",
+		className,
+		...props
+	});
+}
+/**
+* Page navigation controls. `Pagination.Root` owns the controlled page model and shares it with the
+* parts: `Pagination.Controls` (the welded nav `ButtonGroup`) hosting `Pagination.First` / `Previous` /
+* `Next` / `Last` and the editable `Pagination.Page`, plus the `Pagination.Info` status line, the
+* `Pagination.PageSize` picker, and the `Pagination.Separator` divider.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop types are exposed through
+* the matching `Pagination` namespace — e.g. `Pagination.Root.Props`.
+*/
+const Pagination = {
+	/** Owns the controlled page model + shared context. `Pagination.Root.props({ size })` → its prop bag. */
+	Root: Object.assign(PaginationRoot, { props: rootProps }),
+	/** The "Showing X–Y of Z" status line. `Pagination.Info.props()` → its prop bag. */
+	Info: Object.assign(PaginationInfo, { props: infoProps }),
+	/** The page-size cluster (compose `PageSizeLabel` + `PageSizeSelect`). `Pagination.PageSize.props()` → its prop bag. */
+	PageSize: Object.assign(PaginationPageSize, { props: pageSizeProps }),
+	/** The page-size label. `Pagination.PageSizeLabel.props()` → its prop bag. */
+	PageSizeLabel: Object.assign(PaginationPageSizeLabel, { props: pageSizeLabelProps }),
+	/** The page-size select control. */
+	PageSizeSelect: PaginationPageSizeSelect,
+	/** The nav landmark + welded `ButtonGroup`. `Pagination.Controls.props()` → its prop bag. */
+	Controls: Object.assign(PaginationControls, { props: controlsProps }),
+	/** First-page button. */
+	First: PaginationFirst,
+	/** Previous-page button. */
+	Previous: PaginationPrevious,
+	/** Next-page button. */
+	Next: PaginationNext,
+	/** Last-page button. */
+	Last: PaginationLast,
+	/** The editable page-number field. `Pagination.Page.props()` → its prop bag. */
+	Page: Object.assign(PaginationPage, { props: pageProps }),
+	/** A vertical divider between clusters. `Pagination.Separator.props()` → its prop bag. */
+	Separator: Object.assign(PaginationSeparator, { props: separatorProps })
+};
+//#endregion
+export { Pagination };

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

@@ -0,0 +1,51 @@
+import { PaginationSize } from "./pagination.types.js";
+
+//#region src/components/pagination/pagination.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Pagination.*.props()` returns. */
+type PaginationPartProps = {
+  /** The slot value the matching `pagination.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Pagination.Root.props(...)` — the control scale fed to the hosted controls. */
+interface PaginationRootPropsArgs extends BasePropsArgs {
+  /** Control scale. @default "md" */
+  size?: PaginationSize;
+}
+/** Argument to a stateless Pagination part's `.props(...)`. */
+type PaginationStatelessPropsArgs = BasePropsArgs;
+/** Root prop bag: `data-slot` plus the `data-size` the layout + hosted controls read. */
+declare function rootProps({
+  size,
+  className
+}?: PaginationRootPropsArgs): PaginationPartProps;
+/** Info-line prop bag: just the slot anchor. */
+declare function infoProps({
+  className
+}?: PaginationStatelessPropsArgs): PaginationPartProps;
+/** Page-size cluster prop bag: just the slot anchor. */
+declare function pageSizeProps({
+  className
+}?: PaginationStatelessPropsArgs): PaginationPartProps;
+/** Page-size label prop bag: just the slot anchor. */
+declare function pageSizeLabelProps({
+  className
+}?: PaginationStatelessPropsArgs): PaginationPartProps;
+/** Page-field cluster prop bag: just the slot anchor. */
+declare function pageProps({
+  className
+}?: PaginationStatelessPropsArgs): PaginationPartProps;
+/** Controls cluster prop bag: just the slot anchor. */
+declare function controlsProps({
+  className
+}?: PaginationStatelessPropsArgs): PaginationPartProps;
+/** Separator prop bag: just the slot anchor. */
+declare function separatorProps({
+  className
+}?: PaginationStatelessPropsArgs): PaginationPartProps;
+//#endregion
+export { PaginationPartProps, PaginationRootPropsArgs, controlsProps, infoProps, pageProps, pageSizeLabelProps, pageSizeProps, rootProps, separatorProps };

package/dist/components/pagination/pagination.props.js

@@ -0,0 +1,49 @@
+import { PAGINATION_SLOTS } from "./pagination.slots.js";
+//#region src/components/pagination/pagination.props.ts
+/**
+* The D12 unified variant contract for Pagination — the data-attribute-native styling helpers.
+*
+* Each part Pagination *owns* exposes a `props(...)` builder returning a spreadable
+* `{ "data-slot": "noctis-pagination-<part>", ...dataAttrs }` bag the precompiled `pagination.css` keys
+* off, so spreading it onto a foreign element styles that element as the part. The hosted controls
+* (`Button`/`ButtonGroup`/`Input`/`Select`) are composed in the orchestration and keep their own
+* `.props()`; these helpers cover only Pagination's own layout slots. An optional `className` is
+* forwarded verbatim.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: `data-slot` plus the `data-size` the layout + hosted controls read. */
+function rootProps({ size = "md", className } = {}) {
+	return withClassName({
+		"data-slot": PAGINATION_SLOTS.root,
+		"data-size": size
+	}, className);
+}
+/** Info-line prop bag: just the slot anchor. */
+function infoProps({ className } = {}) {
+	return withClassName({ "data-slot": PAGINATION_SLOTS.info }, className);
+}
+/** Page-size cluster prop bag: just the slot anchor. */
+function pageSizeProps({ className } = {}) {
+	return withClassName({ "data-slot": PAGINATION_SLOTS.pageSize }, className);
+}
+/** Page-size label prop bag: just the slot anchor. */
+function pageSizeLabelProps({ className } = {}) {
+	return withClassName({ "data-slot": PAGINATION_SLOTS.pageSizeLabel }, className);
+}
+/** Page-field cluster prop bag: just the slot anchor. */
+function pageProps({ className } = {}) {
+	return withClassName({ "data-slot": PAGINATION_SLOTS.page }, className);
+}
+/** Controls cluster prop bag: just the slot anchor. */
+function controlsProps({ className } = {}) {
+	return withClassName({ "data-slot": PAGINATION_SLOTS.controls }, className);
+}
+/** Separator prop bag: just the slot anchor. */
+function separatorProps({ className } = {}) {
+	return withClassName({ "data-slot": PAGINATION_SLOTS.separator }, className);
+}
+//#endregion
+export { controlsProps, infoProps, pageProps, pageSizeLabelProps, pageSizeProps, rootProps, separatorProps };

package/dist/components/pagination/pagination.slots.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/pagination/pagination.slots.d.ts
+/**
+ * The `data-*` hooks `Pagination` stamps on its own parts, for host-side styling and tests. The
+ * `data-size` axis (on the root) carries the recipe the precompiled `pagination.css` keys its layout
+ * off and that the orchestration feeds to the hosted controls. The nav buttons render `Button`, so
+ * their bounds-disabled state is the `Button`'s own `data-disabled` (stamped by the underlying control),
+ * not a Pagination attribute.
+ */
+declare enum PaginationDataAttributes {
+  /** The root navigation container. */
+  slot = "data-slot",
+  /** The control scale — `sm` | `md` (default); fed to the hosted Button/Input/Select. */
+  size = "data-size"
+}
+//#endregion
+export { PaginationDataAttributes };

package/dist/components/pagination/pagination.slots.js

@@ -0,0 +1,32 @@
+//#region src/components/pagination/pagination.slots.ts
+/**
+* The slot vocabulary every `Pagination` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}[-{part}]` under the `noctis-` prefix;
+* SLOTS.md still generates from the token-graph declarations. The hosted controls (`Button`,
+* `ButtonGroup`, `Input`, `Select`) keep their own slots — these mark only Pagination's own structure.
+*/
+const PAGINATION_SLOTS = {
+	root: "noctis-pagination",
+	info: "noctis-pagination-info",
+	pageSize: "noctis-pagination-page-size",
+	pageSizeLabel: "noctis-pagination-page-size-label",
+	page: "noctis-pagination-page",
+	controls: "noctis-pagination-controls",
+	separator: "noctis-pagination-separator"
+};
+/**
+* The `data-*` hooks `Pagination` stamps on its own parts, for host-side styling and tests. The
+* `data-size` axis (on the root) carries the recipe the precompiled `pagination.css` keys its layout
+* off and that the orchestration feeds to the hosted controls. The nav buttons render `Button`, so
+* their bounds-disabled state is the `Button`'s own `data-disabled` (stamped by the underlying control),
+* not a Pagination attribute.
+*/
+let PaginationDataAttributes = /* @__PURE__ */ function(PaginationDataAttributes) {
+	/** The root navigation container. */
+	PaginationDataAttributes["slot"] = "data-slot";
+	/** The control scale — `sm` | `md` (default); fed to the hosted Button/Input/Select. */
+	PaginationDataAttributes["size"] = "data-size";
+	return PaginationDataAttributes;
+}({});
+//#endregion
+export { PAGINATION_SLOTS, PaginationDataAttributes };

package/dist/components/pagination/pagination.types.d.ts

@@ -0,0 +1,24 @@
+//#region src/components/pagination/pagination.types.d.ts
+/**
+ * The size vocabulary and the i18n label shape `Pagination` paints. Authored source of truth since
+ * styling is precompiled in `pagination.css`. Types-only: no runtime code.
+ */
+/** The pagination control scale — `sm` (dense rows) or `md` (the default). Fed to the hosted controls. */
+type PaginationSize = "sm" | "md";
+/**
+ * The accessible names and visible micro-copy for `Pagination`. Every field has an English default
+ * (overridden per-instance via the `labels` prop, or globally through `@stridge/noctis-intl`). Declared
+ * as a `type` (not an `interface`) so it carries the implicit index signature `useInjectedLabels` needs.
+ */
+type PaginationLabels = {
+  /** Accessible name for the navigation landmark. @default "Pagination" */navigation?: string; /** Accessible name for the first-page button. @default "First page" */
+  firstPage?: string; /** Accessible name for the previous-page button. @default "Previous page" */
+  previousPage?: string; /** Accessible name for the next-page button. @default "Next page" */
+  nextPage?: string; /** Accessible name for the last-page button. @default "Last page" */
+  lastPage?: string; /** Accessible name for the page-number input. @default "Page number" */
+  pageNumber?: string; /** Accessible name for the page-size select. @default "Page size" */
+  pageSize?: string; /** Visible label before the page-size select. @default "Per page" */
+  perPage?: string;
+};
+//#endregion
+export { PaginationLabels, PaginationSize };

package/dist/components/search-dialog/parts/root.js

@@ -1,8 +1,8 @@
 "use client";
 import { VisuallyHidden } from "../../../core/visually-hidden/visually-hidden.js";
+import { Dialog } from "../../dialog/dialog.js";
 import { SearchDialogProvider } from "../search-dialog.context.js";
 import { SEARCH_DIALOG_SLOTS } from "../search-dialog.slots.js";
-import { Dialog } from "../../dialog/dialog.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/search-dialog/parts/root.tsx

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

@@ -0,0 +1,3 @@
+import { SkeletonVariant } from "./skeleton.types.js";
+import { Skeleton } from "./skeleton.js";
+import { SkeletonDataAttributes } from "./skeleton.slots.js";

package/dist/components/skeleton/skeleton.context.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/skeleton/skeleton.context.ts
+const SkeletonContext = createContext({ variant: "shimmer" });
+/** Provider used by `Skeleton.Root` to share its `variant` with descendant shapes. */
+const SkeletonProvider = SkeletonContext.Provider;
+/** Reads the active `Skeleton` context, falling back to the shimmer default for a standalone shape. */
+function useSkeletonContext() {
+	return use(SkeletonContext);
+}
+//#endregion
+export { SkeletonProvider, useSkeletonContext };