@stridge/noctis 1.0.0-beta.0

package/dist/components/autocomplete/autocomplete.js

@@ -0,0 +1,373 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { PlusIcon, SearchIcon, SpinnerIcon, XIcon } from "../../icons/glyphs.js";
+import { useInjectedLabels } from "../../core/use-injected-labels.js";
+import { VisuallyHidden } from "../../core/visually-hidden/visually-hidden.js";
+import { Autocomplete as Autocomplete$2 } from "../../primitives/autocomplete/autocomplete.js";
+import { Surface } from "../surface/surface.js";
+import { AutocompleteProvider, useAutocompleteContext } from "./autocomplete.context.js";
+import { AUTOCOMPLETE_SLOTS } from "./autocomplete.slots.js";
+import { contentProps, emptyProps, groupLabelProps, groupProps, iconProps, inputProps, itemProps, listProps, loadingProps, separatorProps, statusProps } from "./autocomplete.props.js";
+import { useCallback, useMemo, useState } from "react";
+import clsx$1 from "clsx";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Autocomplete } from "@base-ui/react/autocomplete";
+//#region src/components/autocomplete/autocomplete.tsx
+const CLEAR_LABEL_DEFAULTS = { clear: "Clear" };
+const CLEAR_LABEL_KEYS = { clear: "autocomplete.clear" };
+const LOADING_LABEL_DEFAULTS = { loading: "Loading…" };
+const LOADING_LABEL_KEYS = { loading: "autocomplete.loading" };
+/**
+* Owns the autocomplete state, the suggestion list (`items`), and filtering. Shares the control `size`
+* and the `loading` flag with the field and rows through context. The committed value is the free text
+* the user types — pass a `filter` (or the `useFilter` collator) to control how `items` are matched.
+* Set `mode` for inline completion, `autoHighlight` to commit the top match on `Enter`, and
+* `openOnFocus` to surface recent suggestions the moment the field is focused. Renders no DOM element.
+*/
+function AutocompleteRoot({ size = "md", loading = false, openOnFocus = false, open: openProp, defaultOpen, onOpenChange, onValueChange, children, ...props }) {
+	const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+	const [instantClose, setInstantClose] = useState(false);
+	const isControlled = openProp !== void 0;
+	const open = isControlled ? openProp : internalOpen;
+	const handleOpenChange = useCallback((next, details) => {
+		if (next) setInstantClose(false);
+		if (!isControlled) setInternalOpen(next);
+		onOpenChange?.(next, details);
+	}, [isControlled, onOpenChange]);
+	const handleValueChange = useCallback((value, details) => {
+		if (!isControlled && !openOnFocus && value.trim() === "") {
+			setInstantClose(true);
+			setInternalOpen(false);
+		}
+		onValueChange?.(value, details);
+	}, [
+		isControlled,
+		openOnFocus,
+		onValueChange
+	]);
+	const onInputFocus = useCallback(() => {
+		if (!isControlled) {
+			setInstantClose(false);
+			setInternalOpen(true);
+		}
+	}, [isControlled]);
+	return /* @__PURE__ */ jsx(AutocompleteProvider, {
+		value: useMemo(() => ({
+			size,
+			loading,
+			onInputFocus: openOnFocus ? onInputFocus : void 0,
+			instantClose
+		}), [
+			size,
+			loading,
+			openOnFocus,
+			onInputFocus,
+			instantClose
+		]),
+		children: /* @__PURE__ */ jsx(Autocomplete$2.Root, {
+			open,
+			onOpenChange: handleOpenChange,
+			onValueChange: handleValueChange,
+			...props,
+			children
+		})
+	});
+}
+/**
+* The text field the user types into — opens the suggestions popup as they type and filters the list.
+* Follows the field family look (filled surface, field border, a calm ring-less focus that shifts only
+* the border) and reads the control `size` from the root unless overridden. Pass `invalid` for the
+* danger border. Give it an `aria-label` (or wire a visible `Field.Label`) so it is named for AT.
+*/
+function AutocompleteInput({ size, invalid, onFocus, className, ...props }) {
+	const ctx = useAutocompleteContext("Input");
+	return /* @__PURE__ */ jsx(Autocomplete$2.Input, {
+		...inputProps({
+			size: size ?? ctx.size,
+			invalid
+		}),
+		"aria-busy": ctx.loading || void 0,
+		onFocus: (event) => {
+			ctx.onInputFocus?.();
+			onFocus?.(event);
+		},
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* The field shell that lays out the `Input` beside its leading `Icon` and trailing `Clear`/`Loading`
+* affordances. Wrap the input and the affordances in it so they pin inside the field's edges without
+* sitting over the typed text. Mirrors to the inline-start/-end under RTL.
+*/
+function AutocompleteInputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$2.InputGroup, {
+		"data-slot": AUTOCOMPLETE_SLOTS.inputGroup,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* A leading decorative icon in the field (a search magnifier by default), reserving a leading column.
+* Muted and signal-free; Base UI marks it `aria-hidden`. Render it as the first child of the
+* `InputGroup`, before the `Input`.
+*/
+function AutocompleteIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$2.Icon, {
+		...iconProps(),
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: SearchIcon,
+			size: "sm",
+			"aria-hidden": true
+		})
+	});
+}
+/**
+* The button that clears the current value, shown only while the field holds one. Carries a localized
+* `aria-label` (override it with your own `aria-label`); it renders a small dismiss glyph by default and
+* refocuses the input after clearing.
+*/
+function AutocompleteClear({ "aria-label": ariaLabel, className, children, ...props }) {
+	const labels = useInjectedLabels(CLEAR_LABEL_DEFAULTS, CLEAR_LABEL_KEYS, void 0);
+	return /* @__PURE__ */ jsx(Autocomplete$2.Clear, {
+		"data-slot": AUTOCOMPLETE_SLOTS.clear,
+		"aria-label": ariaLabel ?? labels.clear,
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: XIcon,
+			size: "sm",
+			"aria-hidden": true
+		})
+	});
+}
+/**
+* The trailing async busy indicator — a spinner that appears while the root is `loading`, naming itself
+* for assistive tech with a localized hidden "Loading" label (defense in depth alongside a composed
+* `Status` live region). Renders nothing while not loading. Place it inside the `InputGroup`.
+*/
+function AutocompleteLoading({ className, children, ...props }) {
+	const { loading } = useAutocompleteContext("Loading");
+	const labels = useInjectedLabels(LOADING_LABEL_DEFAULTS, LOADING_LABEL_KEYS, void 0);
+	if (!loading) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...loadingProps(),
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: SpinnerIcon,
+			size: "sm",
+			"aria-hidden": true
+		}), /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.loading })] })
+	});
+}
+/**
+* The floating suggestions surface — portaled, elevated, and animated — holding the `List` of `Item`s
+* and the `Empty` message. Opens below the field aligned to its start, flipping above at the viewport
+* edge, and caps at the available viewport height, scrolling its list and keeping the keyboard
+* highlight in view. Mirrors the root `size` as `data-size` so the rows take the matching density.
+*/
+function AutocompleteContent({ side = "bottom", align = "start", sideOffset = 6, collisionPadding = 8, className, style, children, ...props }) {
+	const { size, instantClose } = useAutocompleteContext("Content");
+	return /* @__PURE__ */ jsx(Autocomplete$2.Portal, { children: /* @__PURE__ */ jsx(Autocomplete$2.Positioner, {
+		side,
+		align,
+		sideOffset,
+		collisionPadding,
+		"data-slot": AUTOCOMPLETE_SLOTS.positioner,
+		children: /* @__PURE__ */ jsx(Autocomplete$2.Popup, {
+			"data-slot": AUTOCOMPLETE_SLOTS.content,
+			"data-size": size,
+			"data-instant": instantClose ? "" : void 0,
+			render: /* @__PURE__ */ jsx(Surface, {
+				elevation: "menu",
+				bordered: true,
+				shadow: "popover"
+			}),
+			style: {
+				transformOrigin: "var(--transform-origin)",
+				maxHeight: "var(--available-height)",
+				minInlineSize: "var(--anchor-width)",
+				...style
+			},
+			className: clsx$1(className),
+			...props,
+			children
+		})
+	}) });
+}
+/** The scrollable list rendering the filtered suggestions. Pass a render function to map each item. */
+function AutocompleteList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$2.List, {
+		...listProps(),
+		"data-custom-scrollbar": true,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* One suggestion row. Optional leading `icon`; the row lights up with a neutral highlight on hover or
+* keyboard focus (the accent stays a signal, never a hover). Give it a `value` so selecting it commits
+* that text to the input.
+*/
+function AutocompleteItem({ icon, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Autocomplete$2.Item, {
+		"data-slot": AUTOCOMPLETE_SLOTS.item,
+		className: clsx$1(className),
+		...props,
+		children: [icon ? /* @__PURE__ */ jsx(Icon, {
+			icon,
+			size: "sm"
+		}) : null, children]
+	});
+}
+/**
+* The free-text "Create" row — a conditional "Use «query»" option you render inside the list when the
+* typed query has no exact match, so committing it accepts the typed value. Marked `data-create` for
+* its slightly emphasized styling and a leading "+" glyph; this is the differentiator vs Combobox's
+* constrained selection. Give it the typed query as its `value`.
+*/
+function AutocompleteCreate({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Autocomplete$2.Item, {
+		"data-slot": AUTOCOMPLETE_SLOTS.item,
+		"data-create": "",
+		className: clsx$1(className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: PlusIcon,
+			size: "sm"
+		}), /* @__PURE__ */ jsx("span", { children })]
+	});
+}
+/**
+* Bolds the part of a suggestion that matches the typed query — the signature autocomplete affordance.
+* Wraps the matched substring in a `<mark>` styled with weight and foreground only (no fill, never the
+* accent), so the match reads clearly while the row stays quiet. Pass the row's `text` and the current
+* `query`; renders the text unchanged when the query is empty or absent from it.
+*
+* The label is wrapped in a single inline `<span>` so the row's flex `gap` (which spaces the leading
+* glyph from the label) never falls *between* the matched and unmatched text runs — without the wrapper
+* each run would become its own flex item and the gap would tear the word apart.
+*/
+function AutocompleteHighlight({ text, query, className, ...props }) {
+	const q = query.trim();
+	const index = q ? text.toLowerCase().indexOf(q.toLowerCase()) : -1;
+	if (index === -1) return /* @__PURE__ */ jsx("span", {
+		className: clsx$1(className),
+		...props,
+		children: text
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		className: clsx$1(className),
+		...props,
+		children: [
+			text.slice(0, index),
+			/* @__PURE__ */ jsx("mark", {
+				"data-slot": AUTOCOMPLETE_SLOTS.mark,
+				children: text.slice(index, index + q.length)
+			}),
+			text.slice(index + q.length)
+		]
+	});
+}
+/**
+* The message shown inside the popup while the filtered list is empty — a "no matches" line. Kept
+* mounted and announced politely to screen readers, so update or conditionally render its *children*
+* rather than the part itself.
+*/
+function AutocompleteEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$2.Empty, {
+		...emptyProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* A polite status line for an asynchronously loaded list (a "Searching…" / result-count message). Kept
+* mounted and announced to screen readers, so update or conditionally render its *children* rather than
+* the part itself.
+*/
+function AutocompleteStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$2.Status, {
+		...statusProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/** A labelled section of related suggestions. Put a `GroupLabel` inside to name it for screen readers. */
+function AutocompleteGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$2.Group, {
+		...groupProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/** Maps a group's filtered items to rows via a render-prop child. Renders no element of its own. */
+function AutocompleteCollection(props) {
+	return /* @__PURE__ */ jsx(Autocomplete$2.Collection, { ...props });
+}
+/** The group's muted, non-interactive heading — announced as the group's accessible name. */
+function AutocompleteGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$2.GroupLabel, {
+		...groupLabelProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/** A hairline between groups of suggestions. */
+function AutocompleteSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete.Separator, {
+		...separatorProps(),
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* A free-text input with a suggestion list: as the user types, `Autocomplete.Content` floats a filtered
+* list of `Item`s beneath the field. Unlike `Combobox`, the committed value is the typed text — the
+* suggestions complete and accelerate free entry rather than constraining it to a fixed option set.
+*
+* Built on Base UI's Autocomplete for keyboard navigation (arrows, Home/End, typeahead, `Alt`+arrow to
+* open without moving the highlight), focus management, and `Escape`/outside-click dismissal; the
+* noctis wrapper injects the active locale so the filter collator matches the reader.
+*
+* Compose from parts: `Autocomplete.Root` owns the state and the `items`, `Autocomplete.Input` is the
+* field (with optional leading `Icon`, `Clear`, and `Loading` affordances inside an `InputGroup`), and
+* `Autocomplete.Content` holds the popup — an `Autocomplete.List` of `Item`s (use `Autocomplete.Highlight`
+* to bold the match and `Autocomplete.Create` for the free-text "Use «query»" row), an
+* `Autocomplete.Empty` no-matches line, an optional `Autocomplete.Status` for async loading, and
+* `Group`/`GroupLabel`/`Separator` for sectioned suggestions.
+*
+* Styling is precompiled in `autocomplete.css`, keyed off each part's prefixed `data-slot`. Each part
+* also carries the D12 `props()` escape hatch via `Object.assign` (e.g. `Autocomplete.Item.props({
+* highlighted })`), returning a spreadable `{ "data-slot": "noctis-autocomplete-<part>", ...dataAttrs }`
+* bag for a foreign element an `<Autocomplete.*>` can't wrap.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `Autocomplete` namespace — e.g. `Autocomplete.Item.Props`.
+*/
+const Autocomplete$1 = {
+	Root: AutocompleteRoot,
+	Input: Object.assign(AutocompleteInput, { props: inputProps }),
+	InputGroup: AutocompleteInputGroup,
+	Icon: Object.assign(AutocompleteIcon, { props: iconProps }),
+	Clear: AutocompleteClear,
+	Loading: Object.assign(AutocompleteLoading, { props: loadingProps }),
+	Content: Object.assign(AutocompleteContent, { props: contentProps }),
+	List: Object.assign(AutocompleteList, { props: listProps }),
+	Item: Object.assign(AutocompleteItem, { props: itemProps }),
+	Create: AutocompleteCreate,
+	Highlight: AutocompleteHighlight,
+	Empty: Object.assign(AutocompleteEmpty, { props: emptyProps }),
+	Status: Object.assign(AutocompleteStatus, { props: statusProps }),
+	Group: Object.assign(AutocompleteGroup, { props: groupProps }),
+	GroupLabel: Object.assign(AutocompleteGroupLabel, { props: groupLabelProps }),
+	Collection: AutocompleteCollection,
+	Separator: Object.assign(AutocompleteSeparator, { props: separatorProps }),
+	/** Base UI's locale-aware filter collator hook, for custom `filter` logic on the root. */
+	useFilter: Autocomplete$2.useFilter
+};
+//#endregion
+export { Autocomplete$1 as Autocomplete };

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

@@ -0,0 +1,83 @@
+import { AutocompleteSize } from "./autocomplete.context.js";
+
+//#region src/components/autocomplete/autocomplete.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Autocomplete.*.props()` returns. */
+type AutocompletePartProps = {
+  /** The slot value the matching `autocomplete.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 (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Autocomplete.Input.props(...)` — the control size the field keys its height off, plus invalid. */
+interface AutocompleteInputPropsArgs extends BasePropsArgs {
+  /** Control size, mirrored as `data-size`. @default "md" */
+  size?: AutocompleteSize;
+  /** Whether the field is invalid (drives the danger border via `data-invalid`). */
+  invalid?: boolean;
+}
+/** Argument to `Autocomplete.Item.props(...)` — the per-row state the CSS keys its highlight/affordance off. */
+interface AutocompleteItemPropsArgs extends BasePropsArgs {
+  /** Whether the pointer/keyboard is over this row (drives the highlight via `data-highlighted`). */
+  highlighted?: boolean;
+  /** Whether this row is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+  /** Whether this is the free-text `Create` row (drives the emphasized styling via `data-create`). */
+  create?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/state of its own. */
+type AutocompleteStatelessPropsArgs = BasePropsArgs;
+/** Input prop bag: the slot anchor plus the `data-size` control size and the invalid state. */
+declare function inputProps({
+  size,
+  invalid,
+  className
+}?: AutocompleteInputPropsArgs): AutocompletePartProps;
+/** Icon prop bag: just the slot anchor (the leading decorative field glyph). */
+declare function iconProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+/** Loading prop bag: just the slot anchor (the trailing async spinner affordance). */
+declare function loadingProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+/** Content prop bag: just the slot anchor (the popup surface paint is owned by the composed Surface). */
+declare function contentProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+/** List prop bag: just the slot anchor. */
+declare function listProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+/** Item prop bag: slot anchor plus the `data-highlighted`/`data-disabled`/`data-create` state. */
+declare function itemProps({
+  highlighted,
+  disabled,
+  create,
+  className
+}?: AutocompleteItemPropsArgs): AutocompletePartProps;
+/** Empty prop bag: just the slot anchor. */
+declare function emptyProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+/** Status prop bag: just the slot anchor. */
+declare function statusProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+/** Group prop bag: just the slot anchor. */
+declare function groupProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+/** Group-label prop bag: just the slot anchor. */
+declare function groupLabelProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+/** Separator prop bag: just the slot anchor. */
+declare function separatorProps({
+  className
+}?: AutocompleteStatelessPropsArgs): AutocompletePartProps;
+//#endregion
+export { AutocompleteInputPropsArgs, AutocompleteItemPropsArgs, AutocompletePartProps, contentProps, emptyProps, groupLabelProps, groupProps, iconProps, inputProps, itemProps, listProps, loadingProps, separatorProps, statusProps };

package/dist/components/autocomplete/autocomplete.props.js

@@ -0,0 +1,63 @@
+import { AUTOCOMPLETE_SLOTS } from "./autocomplete.slots.js";
+//#region src/components/autocomplete/autocomplete.props.ts
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Input prop bag: the slot anchor plus the `data-size` control size and the invalid state. */
+function inputProps({ size = "md", invalid, className } = {}) {
+	return withClassName({
+		"data-slot": AUTOCOMPLETE_SLOTS.input,
+		"data-size": size,
+		"data-invalid": flag(invalid)
+	}, className);
+}
+/** Icon prop bag: just the slot anchor (the leading decorative field glyph). */
+function iconProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.icon }, className);
+}
+/** Loading prop bag: just the slot anchor (the trailing async spinner affordance). */
+function loadingProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.loading }, className);
+}
+/** Content prop bag: just the slot anchor (the popup surface paint is owned by the composed Surface). */
+function contentProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.content }, className);
+}
+/** List prop bag: just the slot anchor. */
+function listProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.list }, className);
+}
+/** Item prop bag: slot anchor plus the `data-highlighted`/`data-disabled`/`data-create` state. */
+function itemProps({ highlighted, disabled, create, className } = {}) {
+	return withClassName({
+		"data-slot": AUTOCOMPLETE_SLOTS.item,
+		"data-highlighted": flag(highlighted),
+		"data-disabled": flag(disabled),
+		"data-create": flag(create)
+	}, className);
+}
+/** Empty prop bag: just the slot anchor. */
+function emptyProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.empty }, className);
+}
+/** Status prop bag: just the slot anchor. */
+function statusProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.status }, className);
+}
+/** Group prop bag: just the slot anchor. */
+function groupProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.group }, className);
+}
+/** Group-label prop bag: just the slot anchor. */
+function groupLabelProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.groupLabel }, className);
+}
+/** Separator prop bag: just the slot anchor. */
+function separatorProps({ className } = {}) {
+	return withClassName({ "data-slot": AUTOCOMPLETE_SLOTS.separator }, className);
+}
+//#endregion
+export { contentProps, emptyProps, groupLabelProps, groupProps, iconProps, inputProps, itemProps, listProps, loadingProps, separatorProps, statusProps };

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

@@ -0,0 +1,32 @@
+//#region src/components/autocomplete/autocomplete.slots.d.ts
+/**
+ * The `data-*` hooks `Autocomplete` stamps on its parts, for host-side styling and tests. Slot values
+ * mark each rendered element; the state attributes are emitted by Base UI's Autocomplete — pair a slot
+ * with a state to target, say, the highlighted suggestion or the field while its popup is open.
+ */
+declare enum AutocompleteDataAttributes {
+  /** Marks each rendered part. */
+  slot = "data-slot",
+  /** The control size mirrored from the root's `size` (`md`/`lg`); the field height and popup density key off it. */
+  size = "data-size",
+  /** Present on the input while its suggestions popup is open. */
+  popupOpen = "data-popup-open",
+  /** Present on the suggestion row the pointer or keyboard is currently over. */
+  highlighted = "data-highlighted",
+  /** Present on a disabled suggestion row or input. */
+  disabled = "data-disabled",
+  /** Present on the input/field when the field is invalid (set explicitly or by a `Field`). */
+  invalid = "data-invalid",
+  /** Present on the `Create` row, for its slightly emphasized free-text-entry styling. */
+  create = "data-create",
+  /** The side of the anchor the popup actually rendered on (`bottom`, `top`, …). */
+  side = "data-side",
+  /** Present on the popup while its suggestions list is empty. */
+  empty = "data-empty",
+  /** Present on the popup for the first frame after mount — the transition's start state. */
+  startingStyle = "data-starting-style",
+  /** Present on the popup while it transitions out before unmounting. */
+  endingStyle = "data-ending-style"
+}
+//#endregion
+export { AutocompleteDataAttributes };

package/dist/components/autocomplete/autocomplete.slots.js

@@ -0,0 +1,61 @@
+//#region src/components/autocomplete/autocomplete.slots.ts
+/**
+* The slot vocabulary every `Autocomplete` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, prefixed `noctis-autocomplete-{part}` (the precompiled
+* `autocomplete.css` keys every rule off these anchors); SLOTS.md still generates from the token-graph
+* declarations.
+*
+* `input-group`, `icon`, `clear`, `loading`, `mark`, `positioner`, `group`, and `separator` are
+* styling-only anchors (the field shell, the leading glyph, the clear/loading affordances, the match
+* highlight, the z-index wrapper, the group wrapper, and the hairline) — they carry no token mints, so
+* they live here but not in the token-graph anatomy.
+*/
+const AUTOCOMPLETE_SLOTS = {
+	input: "noctis-autocomplete-input",
+	inputGroup: "noctis-autocomplete-input-group",
+	icon: "noctis-autocomplete-icon",
+	clear: "noctis-autocomplete-clear",
+	loading: "noctis-autocomplete-loading",
+	positioner: "noctis-autocomplete-positioner",
+	content: "noctis-autocomplete-content",
+	list: "noctis-autocomplete-list",
+	item: "noctis-autocomplete-item",
+	mark: "noctis-autocomplete-mark",
+	empty: "noctis-autocomplete-empty",
+	status: "noctis-autocomplete-status",
+	group: "noctis-autocomplete-group",
+	groupLabel: "noctis-autocomplete-group-label",
+	separator: "noctis-autocomplete-separator"
+};
+/**
+* The `data-*` hooks `Autocomplete` stamps on its parts, for host-side styling and tests. Slot values
+* mark each rendered element; the state attributes are emitted by Base UI's Autocomplete — pair a slot
+* with a state to target, say, the highlighted suggestion or the field while its popup is open.
+*/
+let AutocompleteDataAttributes = /* @__PURE__ */ function(AutocompleteDataAttributes) {
+	/** Marks each rendered part. */
+	AutocompleteDataAttributes["slot"] = "data-slot";
+	/** The control size mirrored from the root's `size` (`md`/`lg`); the field height and popup density key off it. */
+	AutocompleteDataAttributes["size"] = "data-size";
+	/** Present on the input while its suggestions popup is open. */
+	AutocompleteDataAttributes["popupOpen"] = "data-popup-open";
+	/** Present on the suggestion row the pointer or keyboard is currently over. */
+	AutocompleteDataAttributes["highlighted"] = "data-highlighted";
+	/** Present on a disabled suggestion row or input. */
+	AutocompleteDataAttributes["disabled"] = "data-disabled";
+	/** Present on the input/field when the field is invalid (set explicitly or by a `Field`). */
+	AutocompleteDataAttributes["invalid"] = "data-invalid";
+	/** Present on the `Create` row, for its slightly emphasized free-text-entry styling. */
+	AutocompleteDataAttributes["create"] = "data-create";
+	/** The side of the anchor the popup actually rendered on (`bottom`, `top`, …). */
+	AutocompleteDataAttributes["side"] = "data-side";
+	/** Present on the popup while its suggestions list is empty. */
+	AutocompleteDataAttributes["empty"] = "data-empty";
+	/** Present on the popup for the first frame after mount — the transition's start state. */
+	AutocompleteDataAttributes["startingStyle"] = "data-starting-style";
+	/** Present on the popup while it transitions out before unmounting. */
+	AutocompleteDataAttributes["endingStyle"] = "data-ending-style";
+	return AutocompleteDataAttributes;
+}({});
+//#endregion
+export { AUTOCOMPLETE_SLOTS, AutocompleteDataAttributes };

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

@@ -0,0 +1,3 @@
+import { AutocompleteSize } from "./autocomplete.context.js";
+import { Autocomplete } from "./autocomplete.js";
+import { AutocompleteDataAttributes } from "./autocomplete.slots.js";

package/dist/components/avatar/avatar.context.js

@@ -0,0 +1,21 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/avatar/avatar.context.ts
+const AvatarImageStatusContext = createContext(null);
+const AvatarImageStatusProvider = AvatarImageStatusContext.Provider;
+/** Read the avatar's image-loading status, or `null` outside an `Avatar.Root`. */
+function useAvatarImageStatus() {
+	return use(AvatarImageStatusContext);
+}
+const AvatarGroupContext = createContext(null);
+const AvatarGroupProvider = AvatarGroupContext.Provider;
+/**
+* Read the enclosing `Avatar.Group`'s shared `size`/`shape`, or `null` when the avatar stands alone.
+* A bare `<Avatar.Root>` is valid, so this returns `null` rather than throwing — the avatar falls back
+* to its own props and defaults.
+*/
+function useAvatarGroup() {
+	return use(AvatarGroupContext);
+}
+//#endregion
+export { AvatarGroupProvider, AvatarImageStatusProvider, useAvatarGroup, useAvatarImageStatus };