@stridge/noctis 1.0.0-beta.0

package/dist/components/search-dialog/search-dialog.props.d.ts

@@ -0,0 +1,45 @@
+//#region src/components/search-dialog/search-dialog.props.d.ts
+/** A spreadable prop bag — the shape every `SearchDialog.*.props()` returns. */
+type SearchDialogPartProps = {
+  /** The slot value the matching `search-dialog.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** Other forwarded attributes (the row's `aria-selected` / `data-index`). */
+  [attr: string]: string | number | boolean | 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 `SearchDialog.Item.props(...)` — the row's keyboard-active state and list position. */
+interface SearchDialogItemPropsArgs extends BasePropsArgs {
+  /** Whether this row is the keyboard-active one (drives the resting highlight via `aria-selected`). */
+  active?: boolean;
+  /** This row's zero-based position, exposed as `data-index` for the root's scroll-into-view. */
+  index?: number;
+}
+/** Argument to a stateless part's `.props(...)` — no state of its own; look flows from the slot. */
+type SearchDialogStatelessPropsArgs = BasePropsArgs;
+/** Root prop bag: the dialog popup's slot anchor (the `--_search-dialog-*` metrics key off it). */
+declare function rootProps({
+  className
+}?: SearchDialogStatelessPropsArgs): SearchDialogPartProps;
+/** Input prop bag: the query-field slot anchor. */
+declare function inputProps({
+  className
+}?: SearchDialogStatelessPropsArgs): SearchDialogPartProps;
+/** Results prop bag: the listbox slot anchor. */
+declare function resultsProps({
+  className
+}?: SearchDialogStatelessPropsArgs): SearchDialogPartProps;
+/** Item prop bag: the row slot anchor plus the `aria-selected` highlight axis and `data-index`. */
+declare function itemProps({
+  active,
+  index,
+  className
+}?: SearchDialogItemPropsArgs): SearchDialogPartProps;
+/** Footer prop bag: the keyboard-hints row slot anchor. */
+declare function footerProps({
+  className
+}?: SearchDialogStatelessPropsArgs): SearchDialogPartProps;
+//#endregion
+export { SearchDialogItemPropsArgs, SearchDialogPartProps, footerProps, inputProps, itemProps, resultsProps, rootProps };

package/dist/components/search-dialog/search-dialog.props.js

@@ -0,0 +1,49 @@
+import { SEARCH_DIALOG_SLOTS } from "./search-dialog.slots.js";
+//#region src/components/search-dialog/search-dialog.props.ts
+/**
+* The D12 unified variant contract for SearchDialog — the data-attribute-native helpers a non-React
+* (or escape-hatch) consumer hand-stamps the dialog's parts with.
+*
+* Each part exposes a `props(...)` builder returning a **spreadable props object** of the form
+* `{ "data-slot": "noctis-search-dialog-<part>", ...dataAttrs }`. Under the single-`data-slot` anchor
+* model the `data-slot` is the only styling hook needed — `search-dialog.css` keys every rule off it
+* (plus the row's `aria-selected` highlight axis) — so spreading a part's `props()` onto a foreign
+* element styles it as that part:
+*
+*     <li {...SearchDialog.Item.props({ active: true, index: 0 })}>…</li>
+*     // → <li data-slot="noctis-search-dialog-result" aria-selected="true" data-index="0">
+*
+* Styling is attribute-driven, so these carry no className; an optional `className` passthrough is
+* accepted and forwarded verbatim.
+*/
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: the dialog popup's slot anchor (the `--_search-dialog-*` metrics key off it). */
+function rootProps({ className } = {}) {
+	return withClassName({ "data-slot": SEARCH_DIALOG_SLOTS.root }, className);
+}
+/** Input prop bag: the query-field slot anchor. */
+function inputProps({ className } = {}) {
+	return withClassName({ "data-slot": SEARCH_DIALOG_SLOTS.input }, className);
+}
+/** Results prop bag: the listbox slot anchor. */
+function resultsProps({ className } = {}) {
+	return withClassName({ "data-slot": SEARCH_DIALOG_SLOTS.results }, className);
+}
+/** Item prop bag: the row slot anchor plus the `aria-selected` highlight axis and `data-index`. */
+function itemProps({ active, index, className } = {}) {
+	const bag = {
+		"data-slot": SEARCH_DIALOG_SLOTS.result,
+		"aria-selected": active ? "true" : "false"
+	};
+	if (index !== void 0) bag["data-index"] = index;
+	return withClassName(bag, className);
+}
+/** Footer prop bag: the keyboard-hints row slot anchor. */
+function footerProps({ className } = {}) {
+	return withClassName({ "data-slot": SEARCH_DIALOG_SLOTS.footer }, className);
+}
+//#endregion
+export { footerProps, inputProps, itemProps, resultsProps, rootProps };

package/dist/components/search-dialog/search-dialog.slots.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/search-dialog/search-dialog.slots.d.ts
+/**
+ * The `data-*` hooks `SearchDialog` stamps on its parts, for host-side styling and tests. Slot values
+ * mark each rendered element; `data-elevation` rides the portalled popup (set by `Surface`), and the
+ * listbox rows expose their position and selection through `data-index` and `aria-selected`.
+ */
+declare enum SearchDialogDataAttributes {
+  /** The slot marker on every rendered part. */
+  slot = "data-slot",
+  /** `menu` — the elevated surface scope on the portalled popup. */
+  elevation = "data-elevation",
+  /** The zero-based position of a result row in the list. */
+  index = "data-index"
+}
+//#endregion
+export { SearchDialogDataAttributes };

package/dist/components/search-dialog/search-dialog.slots.js

@@ -0,0 +1,32 @@
+//#region src/components/search-dialog/search-dialog.slots.ts
+/**
+* The slot vocabulary every `SearchDialog` part stamps as its `data-slot`. The authored source the
+* parts read from, kebab-cased `{component}-{part}`; SLOTS.md still generates from the token-graph
+* declarations. The empty, loading, searching, and no-results messages render inside the result pane
+* without their own slot — the active state, not an element, distinguishes them.
+*/
+const SEARCH_DIALOG_SLOTS = {
+	root: "noctis-search-dialog",
+	backdrop: "noctis-search-dialog-backdrop",
+	header: "noctis-search-dialog-header",
+	input: "noctis-search-dialog-input",
+	results: "noctis-search-dialog-results",
+	result: "noctis-search-dialog-result",
+	footer: "noctis-search-dialog-footer"
+};
+/**
+* The `data-*` hooks `SearchDialog` stamps on its parts, for host-side styling and tests. Slot values
+* mark each rendered element; `data-elevation` rides the portalled popup (set by `Surface`), and the
+* listbox rows expose their position and selection through `data-index` and `aria-selected`.
+*/
+let SearchDialogDataAttributes = /* @__PURE__ */ function(SearchDialogDataAttributes) {
+	/** The slot marker on every rendered part. */
+	SearchDialogDataAttributes["slot"] = "data-slot";
+	/** `menu` — the elevated surface scope on the portalled popup. */
+	SearchDialogDataAttributes["elevation"] = "data-elevation";
+	/** The zero-based position of a result row in the list. */
+	SearchDialogDataAttributes["index"] = "data-index";
+	return SearchDialogDataAttributes;
+}({});
+//#endregion
+export { SEARCH_DIALOG_SLOTS, SearchDialogDataAttributes };

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

@@ -0,0 +1,2 @@
+import { Select } from "./select.js";
+import { SelectDataAttributes } from "./select.slots.js";

package/dist/components/select/select.context.js

@@ -0,0 +1,17 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/select/select.context.ts
+const SelectContext = createContext(null);
+/** Provider for the select's shared state — mounted by `Select.Root`. */
+const SelectContextProvider = SelectContext.Provider;
+/**
+* Read the select's shared state. Throws a part-named error when a part is rendered outside a
+* `Select.Root`, so a misuse fails loudly instead of silently losing its size.
+*/
+function useSelectContext(part) {
+	const context = use(SelectContext);
+	if (context === null) throw new Error(`Select.${part} must be rendered inside <Select.Root>.`);
+	return context;
+}
+//#endregion
+export { SelectContextProvider, useSelectContext };

package/dist/components/select/select.d.ts

@@ -0,0 +1,356 @@
+import { select_d_exports } from "../../primitives/select.js";
+import { SelectPartProps, backdropProps, groupLabelProps, groupProps, iconProps, itemDescriptionProps, itemIconProps, itemIndicatorProps, itemProps, itemTextProps, listProps, popupProps, scrollDownArrowProps, scrollUpArrowProps, separatorProps, triggerProps, valueProps } from "./select.props.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+
+//#region src/components/select/select.d.ts
+/**
+ * Owns the selected value and open state, sharing the control `size` (plus the `multiple` and `invalid`
+ * flags) with the trigger and rows. Wraps Base UI's Select. Pass `value`/`defaultValue` and
+ * `onValueChange` to control the selection, `items` to let `Select.Value` render a chosen item's label
+ * instead of its raw value, and `multiple` for a multi-select (the trigger then reads "N selected").
+ * `readOnly`, `required`, `disabled`, and `name` pass straight through to Base UI; `invalid` is an
+ * additive shell override (a `Field.Root` that turns invalid already marks the trigger). `modal`
+ * defaults to `false` so the page keeps scrolling while the popup is open — set it `true`
+ * to lock page scroll and render the `Backdrop`.
+ */
+declare function SelectRoot<Value = unknown, Multiple extends boolean | undefined = false>({
+  size,
+  invalid,
+  modal,
+  children,
+  ...props
+}: Select.Root.Props<Value, Multiple>): ReactElement;
+/**
+ * The field-shaped control that opens the popup. Wears the field look (surface, hairline border, calm
+ * ring-less focus — the accent border lights on focus) and pairs a `Select.Value` with a
+ * trailing chevron; reads the root's `size` to size itself and the root's `invalid` to paint the danger
+ * border. Base UI stamps `data-disabled`/`data-readonly` for the disabled/read-only chrome.
+ */
+declare function SelectTrigger({
+  className,
+  children,
+  ...props
+}: Select.Trigger.Props): ReactElement;
+/**
+ * Renders the selected item's label inside the trigger, falling back to `placeholder` when nothing is
+ * selected. Pass `items` on `Select.Root` (or a formatting child function) to map a raw value to a
+ * label. Under a `multiple` root it renders a localized "N selected" summary instead — pass a child
+ * function to override the trigger display entirely (e.g. mirror the chosen row's leading glyph).
+ */
+declare function SelectValue({
+  className,
+  children,
+  placeholder,
+  ...props
+}: Select.Value.Props): ReactElement;
+/** The trailing chevron on the trigger — a vertical double-chevron marking the control as a select. */
+declare function SelectIcon({
+  className,
+  children,
+  ...props
+}: Select.Icon.Props): ReactElement;
+/**
+ * The modal scrim painted beneath the popup. Auto-rendered inside `Select.Popup` while the select is
+ * `modal` (the default); transparent by default so the page is not dimmed, it still
+ * captures outside clicks. Re-point `--noctis-select-backdrop-background-color` to a scrim role to dim.
+ */
+declare function SelectBackdrop({
+  className,
+  ...props
+}: Select.Backdrop.Props): ReactElement;
+/**
+ * The floating listbox — portaled, elevated through `<Surface>`, and animated — holding the items,
+ * groups, and separators. Opens aligned to the trigger and caps at the available viewport height,
+ * scrolling its list while keeping the keyboard highlight in view. By default it overlaps the trigger so
+ * the selected row lines up with the trigger's value (the "overlay" variant); pass
+ * `alignItemWithTrigger={false}` to open below the trigger instead (the "below" variant). Auto-renders
+ * the modal `Backdrop` (while modal), the sticky scroll arrows, and the scrollable `List` for you.
+ */
+declare function SelectPopup({
+  side,
+  align,
+  sideOffset,
+  alignItemWithTrigger,
+  collisionPadding,
+  className,
+  style,
+  children,
+  ...props
+}: Select.Popup.Props): ReactElement;
+/**
+ * The sticky strip pinned to the popup's top edge that scrolls the list up on hover — a pointer
+ * affordance only (it never renders for touch, and keyboard nav scrolls via the arrow keys), so it is
+ * `aria-hidden`. Rendered for you inside `Select.Popup`; appears only while the list can scroll up.
+ */
+declare function SelectScrollUpArrow({
+  className,
+  children,
+  ...props
+}: Select.ScrollUpArrow.Props): ReactElement;
+/**
+ * The sticky strip pinned to the popup's bottom edge that scrolls the list down on hover — a pointer
+ * affordance only (`aria-hidden`, like its sibling). Rendered for you inside `Select.Popup`; appears
+ * only while the list can scroll down.
+ */
+declare function SelectScrollDownArrow({
+  className,
+  children,
+  ...props
+}: Select.ScrollDownArrow.Props): ReactElement;
+/**
+ * The scrollable list wrapping the popup's rows. Rendered for you inside `Select.Popup`. Its scrollbar
+ * is hidden — the sticky scroll arrows are the overflow affordance (Radix/macOS behaviour).
+ */
+declare function SelectList({
+  className,
+  ...props
+}: Select.List.Props): ReactElement;
+/**
+ * A selectable option. Pass its `value` (any serialisable value, including an object) and label
+ * children; an optional leading `icon` (a glyph, colour dot, or avatar) sits in a reserved column, an
+ * optional `description` adds a muted second line, and a trailing check marks the selected row. Picking
+ * a row updates the value (and closes the popup for single selects).
+ *
+ * Renders its own `ItemIcon` / `ItemText` / `ItemDescription` / `ItemIndicator` from the props —
+ * compose those parts by hand only when a row needs custom inner structure.
+ */
+declare function SelectItem({
+  className,
+  children,
+  icon,
+  description,
+  ...props
+}: Select.Item.Props): ReactElement;
+/** The row's leading content column (icon, colour dot, or avatar), reserved so labels align. */
+declare function SelectItemIcon({
+  className,
+  ...props
+}: Select.ItemIcon.Props): ReactElement;
+/** The row's label text, mirrored into the trigger's `Select.Value` when the row is selected. */
+declare function SelectItemText({
+  className,
+  ...props
+}: Select.ItemText.Props): ReactElement;
+/** A row's muted second line — a short hint beneath the label on a two-line row. */
+declare function SelectItemDescription({
+  className,
+  ...props
+}: Select.ItemDescription.Props): ReactElement;
+/** The trailing check marking the selected row; Base UI mounts it only while the row is selected. */
+declare function SelectItemIndicator({
+  className,
+  ...props
+}: Select.ItemIndicator.Props): ReactElement;
+/** A labelled section of related items. Put a `GroupLabel` inside to name it for screen readers. */
+declare function SelectGroup({
+  className,
+  ...props
+}: Select.Group.Props): ReactElement;
+/** The group's muted, non-interactive heading — announced as the group's accessible name. */
+declare function SelectGroupLabel({
+  className,
+  ...props
+}: Select.GroupLabel.Props): ReactElement;
+/**
+ * A hairline between groups of options. Presentational (`aria-hidden`) — a `role="separator"` is not a
+ * valid `listbox` child, and the grouping is already conveyed by the `Group`/`GroupLabel` structure.
+ */
+declare function SelectSeparator({
+  className,
+  ...props
+}: Select.Separator.Props): ReactElement;
+/**
+ * A select: a field-shaped `Trigger` opens a floating listbox of options. Built on Base UI's Select for
+ * listbox semantics, keyboard navigation (arrows, Home/End, PageUp/PageDown, typeahead), focus
+ * management, scroll arrows, the modal backdrop, and `Escape`/outside-click dismissal, plus native form
+ * integration via the hidden input.
+ *
+ * Compose from parts: `Select.Root` owns the value and open state, `Select.Trigger` (holding a
+ * `Select.Value` and a `Select.Icon`) opens it, and `Select.Popup` holds the rows — `Item`s with their
+ * leading `icon`, label, optional `description`, and trailing check, `Group`s with a `GroupLabel`, and
+ * `Separator`s. The trigger wears the field look (calm ring-less accent-border focus); the popup is an
+ * elevated `<Surface>`, the highlighted row picks up a neutral fill, and the selected row is marked by
+ * its trailing check (the accent reserved for that check, not a row tint).
+ *
+ * Styling is precompiled in `select.css`, keyed off each part's prefixed `data-slot`. Each part also
+ * carries the D12 `props()` escape hatch via `Object.assign` (e.g. `Select.Item.props({ selected })`),
+ * returning a spreadable `{ "data-slot": "noctis-select-<part>", ...dataAttrs }` bag for a foreign
+ * element a `<Select.*>` can't wrap.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `Select` namespace — e.g. `Select.Item.Props`.
+ */
+declare const Select: {
+  Root: typeof SelectRoot;
+  Trigger: typeof SelectTrigger & {
+    props: typeof triggerProps;
+  };
+  Value: typeof SelectValue & {
+    props: typeof valueProps;
+  };
+  Icon: typeof SelectIcon & {
+    props: typeof iconProps;
+  };
+  Backdrop: typeof SelectBackdrop & {
+    props: typeof backdropProps;
+  };
+  Popup: typeof SelectPopup & {
+    props: typeof popupProps;
+  };
+  ScrollUpArrow: typeof SelectScrollUpArrow & {
+    props: typeof scrollUpArrowProps;
+  };
+  ScrollDownArrow: typeof SelectScrollDownArrow & {
+    props: typeof scrollDownArrowProps;
+  };
+  List: typeof SelectList & {
+    props: typeof listProps;
+  };
+  Item: typeof SelectItem & {
+    props: typeof itemProps;
+  };
+  ItemIcon: typeof SelectItemIcon & {
+    props: typeof itemIconProps;
+  };
+  ItemText: typeof SelectItemText & {
+    props: typeof itemTextProps;
+  };
+  ItemDescription: typeof SelectItemDescription & {
+    props: typeof itemDescriptionProps;
+  };
+  ItemIndicator: typeof SelectItemIndicator & {
+    props: typeof itemIndicatorProps;
+  };
+  Group: typeof SelectGroup & {
+    props: typeof groupProps;
+  };
+  GroupLabel: typeof SelectGroupLabel & {
+    props: typeof groupLabelProps;
+  };
+  Separator: typeof SelectSeparator & {
+    props: typeof separatorProps;
+  };
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. Types-only —
+ * it emits no runtime code and merges with the `Select` object above, so `Select.Item` is the
+ * component value while `Select.Item.Props` is its prop type.
+ */
+declare namespace Select {
+  /** The spreadable data-attribute prop bag every `Select.*.props()` returns (D12). */
+  type PartProps = SelectPartProps;
+  /** The control size shared from the root to the trigger. */
+  type Size = "md" | "lg";
+  namespace Root {
+    type Props<Value = unknown, Multiple extends boolean | undefined = false> = select_d_exports.Select.Root.Props<Value, Multiple> & {
+      /**
+       * The control size, shared with the trigger.
+       * @default "md"
+       */
+      size?: Size;
+      /**
+       * Additive shell override that marks the trigger invalid (danger border). The default path is
+       * control-driven — a `Field.Root` that turns invalid already marks the trigger.
+       * @default false
+       */
+      invalid?: boolean;
+    };
+    type State = select_d_exports.Select.Root.State;
+  }
+  namespace Trigger {
+    type Props = select_d_exports.Select.Trigger.Props;
+    type State = select_d_exports.Select.Trigger.State;
+  }
+  namespace Value {
+    type Props = select_d_exports.Select.Value.Props;
+    type State = select_d_exports.Select.Value.State;
+  }
+  namespace Icon {
+    type Props = select_d_exports.Select.Icon.Props;
+    type State = select_d_exports.Select.Icon.State;
+  }
+  namespace Backdrop {
+    type Props = select_d_exports.Select.Backdrop.Props;
+    type State = select_d_exports.Select.Backdrop.State;
+  }
+  namespace Popup {
+    type Props = select_d_exports.Select.Popup.Props & {
+      /**
+       * Which side of the anchor to open on.
+       * @default "bottom"
+       */
+      side?: select_d_exports.Select.Positioner.Props["side"];
+      /**
+       * Alignment along that side.
+       * @default "start"
+       */
+      align?: select_d_exports.Select.Positioner.Props["align"];
+      /**
+       * Gap from the anchor, in px. Ignored while the popup overlaps the trigger.
+       * @default 6
+       */
+      sideOffset?: number;
+      /**
+       * Overlap the trigger so the selected row's text lines up with the trigger's value (the
+       * "overlay" variant; mouse input only, auto-disabled when there isn't room). Set `false` to
+       * always open below the trigger (the "below" variant).
+       * @default true
+       */
+      alignItemWithTrigger?: select_d_exports.Select.Positioner.Props["alignItemWithTrigger"];
+      /**
+       * Minimum space kept from the viewport edge when avoiding collisions, in px.
+       * @default 8
+       */
+      collisionPadding?: select_d_exports.Select.Positioner.Props["collisionPadding"];
+    };
+  }
+  namespace ScrollUpArrow {
+    type Props = select_d_exports.Select.ScrollUpArrow.Props;
+    type State = select_d_exports.Select.ScrollUpArrow.State;
+  }
+  namespace ScrollDownArrow {
+    type Props = select_d_exports.Select.ScrollDownArrow.Props;
+    type State = select_d_exports.Select.ScrollDownArrow.State;
+  }
+  namespace List {
+    type Props = select_d_exports.Select.List.Props;
+    type State = select_d_exports.Select.List.State;
+  }
+  namespace Item {
+    type Props = select_d_exports.Select.Item.Props & {
+      /** Optional leading content for the row — a glyph, colour dot, or avatar in a reserved column. */icon?: ReactNode; /** Optional muted second line beneath the label (a short hint), turning the row two-line. */
+      description?: ReactNode;
+    };
+    type State = select_d_exports.Select.Item.State;
+  }
+  namespace ItemIcon {
+    /** The row's leading content column — a plain `<span>` wrapper; accepts the native span props. */
+    type Props = ComponentPropsWithRef<"span">;
+  }
+  namespace ItemText {
+    type Props = select_d_exports.Select.ItemText.Props;
+    type State = select_d_exports.Select.ItemText.State;
+  }
+  namespace ItemDescription {
+    /** The row's muted second line — a plain `<span>`; accepts the native span props. */
+    type Props = ComponentPropsWithRef<"span">;
+  }
+  namespace ItemIndicator {
+    type Props = select_d_exports.Select.ItemIndicator.Props;
+    type State = select_d_exports.Select.ItemIndicator.State;
+  }
+  namespace Group {
+    type Props = select_d_exports.Select.Group.Props;
+    type State = select_d_exports.Select.Group.State;
+  }
+  namespace GroupLabel {
+    type Props = select_d_exports.Select.GroupLabel.Props;
+    type State = select_d_exports.Select.GroupLabel.State;
+  }
+  namespace Separator {
+    /** A plain `<div role="separator">` between groups; accepts the native div props. */
+    type Props = ComponentPropsWithRef<"div">;
+  }
+}
+//#endregion
+export { Select };