@spacing-ui/core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nhan Nguyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# @spacing-ui/core
+
+Headless, accessible React UI primitives.
+
+## Install
+
+```bash
+pnpm add @spacing-ui/core
+```
+
+`react` and `react-dom` 18 or 19 are peer dependencies.
+
+## Components
+
+### `Select`
+
+A fully accessible, unstyled listbox. Bring your own styles.
+
+```tsx
+import { Select } from "@spacing-ui/core";
+
+function Example() {
+  const [value, setValue] = useState("apple");
+
+  return (
+    <Select value={value} onValueChange={setValue}>
+      <Select.Trigger>
+        {({ open }) => (
+          <>
+            <span>{value}</span>
+            <ChevronIcon className={open ? "rotate-180" : ""} />
+          </>
+        )}
+      </Select.Trigger>
+      <Select.Content>
+        <Select.Option value="apple" textValue="Apple">
+          {({ selected, active }) => (
+            <div data-active={active} data-selected={selected}>
+              Apple
+            </div>
+          )}
+        </Select.Option>
+        <Select.Option value="banana" textValue="Banana">
+          Banana
+        </Select.Option>
+      </Select.Content>
+    </Select>
+  );
+}
+```
+
+Keyboard:
+
+- `Space` / `Enter` / `↓` / `↑` on trigger: open
+- `↑` / `↓`: move highlight
+- `Home` / `End`: jump to first / last
+- typing letters: jump to matching option
+- `Enter` / `Space`: select highlighted
+- `Esc`: close, return focus to trigger
+- `Tab`: close, move focus on
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,258 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/select/select.tsx
+function render(children, state) {
+  return typeof children === "function" ? children(state) : children;
+}
+var SelectContext = react.createContext(null);
+function useSelectContext(component) {
+  const ctx = react.useContext(SelectContext);
+  if (!ctx) {
+    throw new Error(`<Select.${component}> must be rendered inside <Select>`);
+  }
+  return ctx;
+}
+var Root = ({ value, onValueChange, children }) => {
+  const [open, setOpenState] = react.useState(false);
+  const [activeValue, setActiveValue] = react.useState(null);
+  const triggerRef = react.useRef(null);
+  const listboxRef = react.useRef(null);
+  const reactId = react.useId();
+  const triggerId = `${reactId}trigger`;
+  const listboxId = `${reactId}listbox`;
+  const optionIdPrefix = `${reactId}option-`;
+  const getOptionId = react.useCallback(
+    (v) => optionIdPrefix + v.replace(/[^a-zA-Z0-9_-]/g, "_"),
+    [optionIdPrefix]
+  );
+  const getOrderedOptions = react.useCallback(() => {
+    const root = listboxRef.current;
+    if (!root) return [];
+    const nodes = root.querySelectorAll('[role="option"]');
+    return Array.from(nodes).map((node) => ({
+      value: node.dataset.value ?? "",
+      textValue: node.dataset.textValue ?? node.textContent ?? ""
+    }));
+  }, []);
+  const setOpen = react.useCallback((next) => {
+    setOpenState(next);
+    if (!next) setActiveValue(null);
+  }, []);
+  react.useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!triggerRef.current?.contains(target) && !listboxRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, setOpen]);
+  const ctxValue = react.useMemo(
+    () => ({
+      open,
+      setOpen,
+      value,
+      onValueChange,
+      activeValue,
+      setActiveValue,
+      triggerId,
+      listboxId,
+      triggerRef,
+      listboxRef,
+      getOptionId,
+      getOrderedOptions
+    }),
+    [
+      open,
+      setOpen,
+      value,
+      onValueChange,
+      activeValue,
+      triggerId,
+      listboxId,
+      getOptionId,
+      getOrderedOptions
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: ctxValue, children });
+};
+var Trigger = react.forwardRef(function Trigger2({ children, onClick, onKeyDown, ...rest }, forwardedRef) {
+  const ctx = useSelectContext("Trigger");
+  const setRefs = (node) => {
+    ctx.triggerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    ctx.setOpen(!ctx.open);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      ctx.setOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref: setRefs,
+      type: "button",
+      id: ctx.triggerId,
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": ctx.open,
+      "aria-controls": ctx.listboxId,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: render(children, { open: ctx.open, value: ctx.value })
+    }
+  );
+});
+var TYPEAHEAD_TIMEOUT_MS = 500;
+var Content = ({ children, onKeyDown, ...rest }) => {
+  const ctx = useSelectContext("Content");
+  const typeaheadRef = react.useRef({ buffer: "", lastTime: 0 });
+  react.useEffect(() => {
+    if (!ctx.open) return;
+    const options = ctx.getOrderedOptions();
+    if (options.length === 0) {
+      ctx.listboxRef.current?.focus();
+      return;
+    }
+    const initial = options.find((o) => o.value === ctx.value)?.value ?? options[0].value;
+    ctx.setActiveValue(initial);
+    ctx.listboxRef.current?.focus();
+  }, [ctx.open]);
+  if (!ctx.open) return null;
+  const moveActive = (delta) => {
+    const options = ctx.getOrderedOptions();
+    if (options.length === 0) return;
+    const currentIdx = options.findIndex((o) => o.value === ctx.activeValue);
+    let nextIdx;
+    if (delta === "first") nextIdx = 0;
+    else if (delta === "last") nextIdx = options.length - 1;
+    else if (currentIdx === -1) nextIdx = delta === 1 ? 0 : options.length - 1;
+    else nextIdx = Math.min(options.length - 1, Math.max(0, currentIdx + delta));
+    ctx.setActiveValue(options[nextIdx].value);
+  };
+  const typeahead = (char) => {
+    const now = Date.now();
+    const reset = now - typeaheadRef.current.lastTime > TYPEAHEAD_TIMEOUT_MS;
+    const buffer = (reset ? "" : typeaheadRef.current.buffer) + char.toLowerCase();
+    typeaheadRef.current = { buffer, lastTime: now };
+    const options = ctx.getOrderedOptions();
+    const match = options.find((o) => o.textValue.toLowerCase().startsWith(buffer));
+    if (match) ctx.setActiveValue(match.value);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        return;
+      case "Home":
+        e.preventDefault();
+        moveActive("first");
+        return;
+      case "End":
+        e.preventDefault();
+        moveActive("last");
+        return;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (ctx.activeValue !== null) {
+          ctx.onValueChange(ctx.activeValue);
+          ctx.setOpen(false);
+          ctx.triggerRef.current?.focus();
+        }
+        return;
+      case "Escape":
+        e.preventDefault();
+        ctx.setOpen(false);
+        ctx.triggerRef.current?.focus();
+        return;
+      case "Tab":
+        ctx.setOpen(false);
+        return;
+      default:
+        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          typeahead(e.key);
+        }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: (node) => {
+        ctx.listboxRef.current = node;
+      },
+      id: ctx.listboxId,
+      role: "listbox",
+      tabIndex: -1,
+      "aria-labelledby": ctx.triggerId,
+      "aria-activedescendant": ctx.activeValue !== null ? ctx.getOptionId(ctx.activeValue) : void 0,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    }
+  );
+};
+var Option = ({ value, textValue, children, onMouseEnter, onClick, ...rest }) => {
+  const ctx = useSelectContext("Option");
+  const selected = ctx.value === value;
+  const active = ctx.activeValue === value;
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    ctx.onValueChange(value);
+    ctx.setOpen(false);
+    ctx.triggerRef.current?.focus();
+  };
+  const handleMouseEnter = (e) => {
+    onMouseEnter?.(e);
+    if (e.defaultPrevented) return;
+    ctx.setActiveValue(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      id: ctx.getOptionId(value),
+      role: "option",
+      "aria-selected": selected,
+      "data-value": value,
+      "data-text-value": textValue,
+      "data-active": active || void 0,
+      "data-selected": selected || void 0,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      ...rest,
+      children: render(children, { selected, active })
+    }
+  );
+};
+var Select = Object.assign(Root, {
+  Trigger,
+  Content,
+  Option
+});
+
+exports.Select = Select;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select/select.tsx"],"names":["createContext","useContext","useState","useRef","useId","useCallback","useEffect","useMemo","forwardRef","Trigger","jsx"],"mappings":"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","file":"index.cjs","sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n  useId,\n  useMemo,\n  useCallback,\n  forwardRef,\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type RefObject,\n} from \"react\";\n\ntype Renderable<S> = ReactNode | ((state: S) => ReactNode);\n\nfunction render<S>(children: Renderable<S> | undefined, state: S): ReactNode {\n  return typeof children === \"function\" ? children(state) : children;\n}\n\ninterface OptionData {\n  value: string;\n  textValue: string;\n}\n\ninterface SelectContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  value: string;\n  onValueChange: (value: string) => void;\n  activeValue: string | null;\n  setActiveValue: (value: string | null) => void;\n  triggerId: string;\n  listboxId: string;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  listboxRef: RefObject<HTMLDivElement | null>;\n  getOptionId: (value: string) => string;\n  getOrderedOptions: () => OptionData[];\n}\n\nconst SelectContext = createContext<SelectContextValue | null>(null);\n\nfunction useSelectContext(component: string): SelectContextValue {\n  const ctx = useContext(SelectContext);\n  if (!ctx) {\n    throw new Error(`<Select.${component}> must be rendered inside <Select>`);\n  }\n  return ctx;\n}\n\ninterface SelectProps {\n  value: string;\n  onValueChange: (value: string) => void;\n  children: ReactNode;\n}\n\nconst Root = ({ value, onValueChange, children }: SelectProps) => {\n  const [open, setOpenState] = useState(false);\n  const [activeValue, setActiveValue] = useState<string | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n\n  const reactId = useId();\n  const triggerId = `${reactId}trigger`;\n  const listboxId = `${reactId}listbox`;\n  const optionIdPrefix = `${reactId}option-`;\n\n  const getOptionId = useCallback(\n    (v: string) => optionIdPrefix + v.replace(/[^a-zA-Z0-9_-]/g, \"_\"),\n    [optionIdPrefix]\n  );\n\n  const getOrderedOptions = useCallback((): OptionData[] => {\n    const root = listboxRef.current;\n    if (!root) return [];\n    const nodes = root.querySelectorAll<HTMLElement>('[role=\"option\"]');\n    return Array.from(nodes).map((node) => ({\n      value: node.dataset.value ?? \"\",\n      textValue: node.dataset.textValue ?? node.textContent ?? \"\",\n    }));\n  }, []);\n\n  const setOpen = useCallback((next: boolean) => {\n    setOpenState(next);\n    if (!next) setActiveValue(null);\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: PointerEvent) => {\n      const target = e.target as Node;\n      if (!triggerRef.current?.contains(target) && !listboxRef.current?.contains(target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [open, setOpen]);\n\n  const ctxValue = useMemo<SelectContextValue>(\n    () => ({\n      open,\n      setOpen,\n      value,\n      onValueChange,\n      activeValue,\n      setActiveValue,\n      triggerId,\n      listboxId,\n      triggerRef,\n      listboxRef,\n      getOptionId,\n      getOrderedOptions,\n    }),\n    [\n      open,\n      setOpen,\n      value,\n      onValueChange,\n      activeValue,\n      triggerId,\n      listboxId,\n      getOptionId,\n      getOrderedOptions,\n    ]\n  );\n\n  return <SelectContext.Provider value={ctxValue}>{children}</SelectContext.Provider>;\n};\n\ninterface TriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  children?: Renderable<{ open: boolean; value: string }>;\n}\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n  { children, onClick, onKeyDown, ...rest },\n  forwardedRef\n) {\n  const ctx = useSelectContext(\"Trigger\");\n\n  const setRefs = (node: HTMLButtonElement | null) => {\n    ctx.triggerRef.current = node;\n    if (typeof forwardedRef === \"function\") forwardedRef(node);\n    else if (forwardedRef) forwardedRef.current = node;\n  };\n\n  const handleClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    if (e.defaultPrevented) return;\n    ctx.setOpen(!ctx.open);\n  };\n\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === \" \" || e.key === \"Enter\" || e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      ctx.setOpen(true);\n    }\n  };\n\n  return (\n    <button\n      ref={setRefs}\n      type=\"button\"\n      id={ctx.triggerId}\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-expanded={ctx.open}\n      aria-controls={ctx.listboxId}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {render(children, { open: ctx.open, value: ctx.value })}\n    </button>\n  );\n});\n\ninterface ContentProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nconst TYPEAHEAD_TIMEOUT_MS = 500;\n\nconst Content = ({ children, onKeyDown, ...rest }: ContentProps) => {\n  const ctx = useSelectContext(\"Content\");\n  const typeaheadRef = useRef({ buffer: \"\", lastTime: 0 });\n\n  useEffect(() => {\n    if (!ctx.open) return;\n    const options = ctx.getOrderedOptions();\n    if (options.length === 0) {\n      ctx.listboxRef.current?.focus();\n      return;\n    }\n    const initial = options.find((o) => o.value === ctx.value)?.value ?? options[0]!.value;\n    ctx.setActiveValue(initial);\n    ctx.listboxRef.current?.focus();\n    // only re-run on open transition\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ctx.open]);\n\n  if (!ctx.open) return null;\n\n  const moveActive = (delta: 1 | -1 | \"first\" | \"last\") => {\n    const options = ctx.getOrderedOptions();\n    if (options.length === 0) return;\n    const currentIdx = options.findIndex((o) => o.value === ctx.activeValue);\n    let nextIdx: number;\n    if (delta === \"first\") nextIdx = 0;\n    else if (delta === \"last\") nextIdx = options.length - 1;\n    else if (currentIdx === -1) nextIdx = delta === 1 ? 0 : options.length - 1;\n    else nextIdx = Math.min(options.length - 1, Math.max(0, currentIdx + delta));\n    ctx.setActiveValue(options[nextIdx]!.value);\n  };\n\n  const typeahead = (char: string) => {\n    const now = Date.now();\n    const reset = now - typeaheadRef.current.lastTime > TYPEAHEAD_TIMEOUT_MS;\n    const buffer = (reset ? \"\" : typeaheadRef.current.buffer) + char.toLowerCase();\n    typeaheadRef.current = { buffer, lastTime: now };\n    const options = ctx.getOrderedOptions();\n    const match = options.find((o) => o.textValue.toLowerCase().startsWith(buffer));\n    if (match) ctx.setActiveValue(match.value);\n  };\n\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        moveActive(1);\n        return;\n      case \"ArrowUp\":\n        e.preventDefault();\n        moveActive(-1);\n        return;\n      case \"Home\":\n        e.preventDefault();\n        moveActive(\"first\");\n        return;\n      case \"End\":\n        e.preventDefault();\n        moveActive(\"last\");\n        return;\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        if (ctx.activeValue !== null) {\n          ctx.onValueChange(ctx.activeValue);\n          ctx.setOpen(false);\n          ctx.triggerRef.current?.focus();\n        }\n        return;\n      case \"Escape\":\n        e.preventDefault();\n        ctx.setOpen(false);\n        ctx.triggerRef.current?.focus();\n        return;\n      case \"Tab\":\n        ctx.setOpen(false);\n        return;\n      default:\n        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {\n          typeahead(e.key);\n        }\n    }\n  };\n\n  return (\n    <div\n      ref={(node) => {\n        ctx.listboxRef.current = node;\n      }}\n      id={ctx.listboxId}\n      role=\"listbox\"\n      tabIndex={-1}\n      aria-labelledby={ctx.triggerId}\n      aria-activedescendant={\n        ctx.activeValue !== null ? ctx.getOptionId(ctx.activeValue) : undefined\n      }\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface OptionProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  value: string;\n  textValue?: string;\n  children?: Renderable<{ selected: boolean; active: boolean }>;\n}\n\nconst Option = ({ value, textValue, children, onMouseEnter, onClick, ...rest }: OptionProps) => {\n  const ctx = useSelectContext(\"Option\");\n  const selected = ctx.value === value;\n  const active = ctx.activeValue === value;\n\n  const handleClick = (e: ReactMouseEvent<HTMLDivElement>) => {\n    onClick?.(e);\n    if (e.defaultPrevented) return;\n    ctx.onValueChange(value);\n    ctx.setOpen(false);\n    ctx.triggerRef.current?.focus();\n  };\n\n  const handleMouseEnter = (e: ReactMouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(e);\n    if (e.defaultPrevented) return;\n    ctx.setActiveValue(value);\n  };\n\n  return (\n    <div\n      id={ctx.getOptionId(value)}\n      role=\"option\"\n      aria-selected={selected}\n      data-value={value}\n      data-text-value={textValue}\n      data-active={active || undefined}\n      data-selected={selected || undefined}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      {...rest}\n    >\n      {render(children, { selected, active })}\n    </div>\n  );\n};\n\nexport const Select = Object.assign(Root, {\n  Trigger,\n  Content,\n  Option,\n});\n\nexport type { SelectProps, TriggerProps, ContentProps, OptionProps };\n"]}

package/dist/index.d.cts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+
+type Renderable<S> = ReactNode | ((state: S) => ReactNode);
+interface SelectProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    children: ReactNode;
+}
+interface TriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    children?: Renderable<{
+        open: boolean;
+        value: string;
+    }>;
+}
+interface ContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface OptionProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    value: string;
+    textValue?: string;
+    children?: Renderable<{
+        selected: boolean;
+        active: boolean;
+    }>;
+}
+declare const Select: (({ value, onValueChange, children }: SelectProps) => react.JSX.Element) & {
+    Trigger: react.ForwardRefExoticComponent<TriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: ({ children, onKeyDown, ...rest }: ContentProps) => react.JSX.Element | null;
+    Option: ({ value, textValue, children, onMouseEnter, onClick, ...rest }: OptionProps) => react.JSX.Element;
+};
+
+export { type ContentProps, type OptionProps, Select, type SelectProps, type TriggerProps };

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from 'react';
+
+type Renderable<S> = ReactNode | ((state: S) => ReactNode);
+interface SelectProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    children: ReactNode;
+}
+interface TriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    children?: Renderable<{
+        open: boolean;
+        value: string;
+    }>;
+}
+interface ContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface OptionProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    value: string;
+    textValue?: string;
+    children?: Renderable<{
+        selected: boolean;
+        active: boolean;
+    }>;
+}
+declare const Select: (({ value, onValueChange, children }: SelectProps) => react.JSX.Element) & {
+    Trigger: react.ForwardRefExoticComponent<TriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Content: ({ children, onKeyDown, ...rest }: ContentProps) => react.JSX.Element | null;
+    Option: ({ value, textValue, children, onMouseEnter, onClick, ...rest }: OptionProps) => react.JSX.Element;
+};
+
+export { type ContentProps, type OptionProps, Select, type SelectProps, type TriggerProps };

package/dist/index.js

@@ -0,0 +1,256 @@
+import { createContext, forwardRef, useContext, useState, useRef, useId, useCallback, useEffect, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/select/select.tsx
+function render(children, state) {
+  return typeof children === "function" ? children(state) : children;
+}
+var SelectContext = createContext(null);
+function useSelectContext(component) {
+  const ctx = useContext(SelectContext);
+  if (!ctx) {
+    throw new Error(`<Select.${component}> must be rendered inside <Select>`);
+  }
+  return ctx;
+}
+var Root = ({ value, onValueChange, children }) => {
+  const [open, setOpenState] = useState(false);
+  const [activeValue, setActiveValue] = useState(null);
+  const triggerRef = useRef(null);
+  const listboxRef = useRef(null);
+  const reactId = useId();
+  const triggerId = `${reactId}trigger`;
+  const listboxId = `${reactId}listbox`;
+  const optionIdPrefix = `${reactId}option-`;
+  const getOptionId = useCallback(
+    (v) => optionIdPrefix + v.replace(/[^a-zA-Z0-9_-]/g, "_"),
+    [optionIdPrefix]
+  );
+  const getOrderedOptions = useCallback(() => {
+    const root = listboxRef.current;
+    if (!root) return [];
+    const nodes = root.querySelectorAll('[role="option"]');
+    return Array.from(nodes).map((node) => ({
+      value: node.dataset.value ?? "",
+      textValue: node.dataset.textValue ?? node.textContent ?? ""
+    }));
+  }, []);
+  const setOpen = useCallback((next) => {
+    setOpenState(next);
+    if (!next) setActiveValue(null);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      const target = e.target;
+      if (!triggerRef.current?.contains(target) && !listboxRef.current?.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open, setOpen]);
+  const ctxValue = useMemo(
+    () => ({
+      open,
+      setOpen,
+      value,
+      onValueChange,
+      activeValue,
+      setActiveValue,
+      triggerId,
+      listboxId,
+      triggerRef,
+      listboxRef,
+      getOptionId,
+      getOrderedOptions
+    }),
+    [
+      open,
+      setOpen,
+      value,
+      onValueChange,
+      activeValue,
+      triggerId,
+      listboxId,
+      getOptionId,
+      getOrderedOptions
+    ]
+  );
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: ctxValue, children });
+};
+var Trigger = forwardRef(function Trigger2({ children, onClick, onKeyDown, ...rest }, forwardedRef) {
+  const ctx = useSelectContext("Trigger");
+  const setRefs = (node) => {
+    ctx.triggerRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef) forwardedRef.current = node;
+  };
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    ctx.setOpen(!ctx.open);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === " " || e.key === "Enter" || e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      ctx.setOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: setRefs,
+      type: "button",
+      id: ctx.triggerId,
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": ctx.open,
+      "aria-controls": ctx.listboxId,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: render(children, { open: ctx.open, value: ctx.value })
+    }
+  );
+});
+var TYPEAHEAD_TIMEOUT_MS = 500;
+var Content = ({ children, onKeyDown, ...rest }) => {
+  const ctx = useSelectContext("Content");
+  const typeaheadRef = useRef({ buffer: "", lastTime: 0 });
+  useEffect(() => {
+    if (!ctx.open) return;
+    const options = ctx.getOrderedOptions();
+    if (options.length === 0) {
+      ctx.listboxRef.current?.focus();
+      return;
+    }
+    const initial = options.find((o) => o.value === ctx.value)?.value ?? options[0].value;
+    ctx.setActiveValue(initial);
+    ctx.listboxRef.current?.focus();
+  }, [ctx.open]);
+  if (!ctx.open) return null;
+  const moveActive = (delta) => {
+    const options = ctx.getOrderedOptions();
+    if (options.length === 0) return;
+    const currentIdx = options.findIndex((o) => o.value === ctx.activeValue);
+    let nextIdx;
+    if (delta === "first") nextIdx = 0;
+    else if (delta === "last") nextIdx = options.length - 1;
+    else if (currentIdx === -1) nextIdx = delta === 1 ? 0 : options.length - 1;
+    else nextIdx = Math.min(options.length - 1, Math.max(0, currentIdx + delta));
+    ctx.setActiveValue(options[nextIdx].value);
+  };
+  const typeahead = (char) => {
+    const now = Date.now();
+    const reset = now - typeaheadRef.current.lastTime > TYPEAHEAD_TIMEOUT_MS;
+    const buffer = (reset ? "" : typeaheadRef.current.buffer) + char.toLowerCase();
+    typeaheadRef.current = { buffer, lastTime: now };
+    const options = ctx.getOrderedOptions();
+    const match = options.find((o) => o.textValue.toLowerCase().startsWith(buffer));
+    if (match) ctx.setActiveValue(match.value);
+  };
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        return;
+      case "Home":
+        e.preventDefault();
+        moveActive("first");
+        return;
+      case "End":
+        e.preventDefault();
+        moveActive("last");
+        return;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (ctx.activeValue !== null) {
+          ctx.onValueChange(ctx.activeValue);
+          ctx.setOpen(false);
+          ctx.triggerRef.current?.focus();
+        }
+        return;
+      case "Escape":
+        e.preventDefault();
+        ctx.setOpen(false);
+        ctx.triggerRef.current?.focus();
+        return;
+      case "Tab":
+        ctx.setOpen(false);
+        return;
+      default:
+        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
+          typeahead(e.key);
+        }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        ctx.listboxRef.current = node;
+      },
+      id: ctx.listboxId,
+      role: "listbox",
+      tabIndex: -1,
+      "aria-labelledby": ctx.triggerId,
+      "aria-activedescendant": ctx.activeValue !== null ? ctx.getOptionId(ctx.activeValue) : void 0,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    }
+  );
+};
+var Option = ({ value, textValue, children, onMouseEnter, onClick, ...rest }) => {
+  const ctx = useSelectContext("Option");
+  const selected = ctx.value === value;
+  const active = ctx.activeValue === value;
+  const handleClick = (e) => {
+    onClick?.(e);
+    if (e.defaultPrevented) return;
+    ctx.onValueChange(value);
+    ctx.setOpen(false);
+    ctx.triggerRef.current?.focus();
+  };
+  const handleMouseEnter = (e) => {
+    onMouseEnter?.(e);
+    if (e.defaultPrevented) return;
+    ctx.setActiveValue(value);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: ctx.getOptionId(value),
+      role: "option",
+      "aria-selected": selected,
+      "data-value": value,
+      "data-text-value": textValue,
+      "data-active": active || void 0,
+      "data-selected": selected || void 0,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      ...rest,
+      children: render(children, { selected, active })
+    }
+  );
+};
+var Select = Object.assign(Root, {
+  Trigger,
+  Content,
+  Option
+});
+
+export { Select };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select/select.tsx"],"names":["Trigger"],"mappings":";;;;AAoBA,SAAS,MAAA,CAAU,UAAqC,KAAA,EAAqB;AAC3E,EAAA,OAAO,OAAO,QAAA,KAAa,UAAA,GAAa,QAAA,CAAS,KAAK,CAAA,GAAI,QAAA;AAC5D;AAsBA,IAAM,aAAA,GAAgB,cAAyC,IAAI,CAAA;AAEnE,SAAS,iBAAiB,SAAA,EAAuC;AAC/D,EAAA,MAAM,GAAA,GAAM,WAAW,aAAa,CAAA;AACpC,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,QAAA,EAAW,SAAS,CAAA,kCAAA,CAAoC,CAAA;AAAA,EAC1E;AACA,EAAA,OAAO,GAAA;AACT;AAQA,IAAM,OAAO,CAAC,EAAE,KAAA,EAAO,aAAA,EAAe,UAAS,KAAmB;AAChE,EAAA,MAAM,CAAC,IAAA,EAAM,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAC3C,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAwB,IAAI,CAAA;AAClE,EAAA,MAAM,UAAA,GAAa,OAAiC,IAAI,CAAA;AACxD,EAAA,MAAM,UAAA,GAAa,OAA8B,IAAI,CAAA;AAErD,EAAA,MAAM,UAAU,KAAA,EAAM;AACtB,EAAA,MAAM,SAAA,GAAY,GAAG,OAAO,CAAA,OAAA,CAAA;AAC5B,EAAA,MAAM,SAAA,GAAY,GAAG,OAAO,CAAA,OAAA,CAAA;AAC5B,EAAA,MAAM,cAAA,GAAiB,GAAG,OAAO,CAAA,OAAA,CAAA;AAEjC,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,CAAA,KAAc,cAAA,GAAiB,CAAA,CAAE,OAAA,CAAQ,mBAAmB,GAAG,CAAA;AAAA,IAChE,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,MAAM,iBAAA,GAAoB,YAAY,MAAoB;AACxD,IAAA,MAAM,OAAO,UAAA,CAAW,OAAA;AACxB,IAAA,IAAI,CAAC,IAAA,EAAM,OAAO,EAAC;AACnB,IAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,gBAAA,CAA8B,iBAAiB,CAAA;AAClE,IAAA,OAAO,MAAM,IAAA,CAAK,KAAK,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,MACtC,KAAA,EAAO,IAAA,CAAK,OAAA,CAAQ,KAAA,IAAS,EAAA;AAAA,MAC7B,SAAA,EAAW,IAAA,CAAK,OAAA,CAAQ,SAAA,IAAa,KAAK,WAAA,IAAe;AAAA,KAC3D,CAAE,CAAA;AAAA,EACJ,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,OAAA,GAAU,WAAA,CAAY,CAAC,IAAA,KAAkB;AAC7C,IAAA,YAAA,CAAa,IAAI,CAAA;AACjB,IAAA,IAAI,CAAC,IAAA,EAAM,cAAA,CAAe,IAAI,CAAA;AAAA,EAChC,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAAoB;AACzC,MAAA,MAAM,SAAS,CAAA,CAAE,MAAA;AACjB,MAAA,IAAI,CAAC,UAAA,CAAW,OAAA,EAAS,QAAA,CAAS,MAAM,CAAA,IAAK,CAAC,UAAA,CAAW,OAAA,EAAS,QAAA,CAAS,MAAM,CAAA,EAAG;AAClF,QAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,MACf;AAAA,IACF,CAAA;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,eAAe,aAAa,CAAA;AACtD,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,aAAA,EAAe,aAAa,CAAA;AAAA,EACxE,CAAA,EAAG,CAAC,IAAA,EAAM,OAAO,CAAC,CAAA;AAElB,EAAA,MAAM,QAAA,GAAW,OAAA;AAAA,IACf,OAAO;AAAA,MACL,IAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,IAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,2BAAQ,aAAA,CAAc,QAAA,EAAd,EAAuB,KAAA,EAAO,UAAW,QAAA,EAAS,CAAA;AAC5D,CAAA;AAMA,IAAM,OAAA,GAAU,UAAA,CAA4C,SAASA,QAAAA,CACnE,EAAE,QAAA,EAAU,OAAA,EAAS,SAAA,EAAW,GAAG,IAAA,EAAK,EACxC,YAAA,EACA;AACA,EAAA,MAAM,GAAA,GAAM,iBAAiB,SAAS,CAAA;AAEtC,EAAA,MAAM,OAAA,GAAU,CAAC,IAAA,KAAmC;AAClD,IAAA,GAAA,CAAI,WAAW,OAAA,GAAU,IAAA;AACzB,IAAA,IAAI,OAAO,YAAA,KAAiB,UAAA,EAAY,YAAA,CAAa,IAAI,CAAA;AAAA,SAAA,IAChD,YAAA,eAA2B,OAAA,GAAU,IAAA;AAAA,EAChD,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAA0C;AAC7D,IAAA,OAAA,GAAU,CAAC,CAAA;AACX,IAAA,IAAI,EAAE,gBAAA,EAAkB;AACxB,IAAA,GAAA,CAAI,OAAA,CAAQ,CAAC,GAAA,CAAI,IAAI,CAAA;AAAA,EACvB,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAA6C;AAClE,IAAA,SAAA,GAAY,CAAC,CAAA;AACb,IAAA,IAAI,EAAE,gBAAA,EAAkB;AACxB,IAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,GAAA,IAAO,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAA,CAAE,GAAA,KAAQ,WAAA,IAAe,CAAA,CAAE,GAAA,KAAQ,SAAA,EAAW;AACtF,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,GAAA,CAAI,QAAQ,IAAI,CAAA;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,OAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,IAAI,GAAA,CAAI,SAAA;AAAA,MACR,IAAA,EAAK,UAAA;AAAA,MACL,eAAA,EAAc,SAAA;AAAA,MACd,iBAAe,GAAA,CAAI,IAAA;AAAA,MACnB,iBAAe,GAAA,CAAI,SAAA;AAAA,MACnB,OAAA,EAAS,WAAA;AAAA,MACT,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,MAAA,CAAO,UAAU,EAAE,IAAA,EAAM,IAAI,IAAA,EAAM,KAAA,EAAO,GAAA,CAAI,KAAA,EAAO;AAAA;AAAA,GACxD;AAEJ,CAAC,CAAA;AAMD,IAAM,oBAAA,GAAuB,GAAA;AAE7B,IAAM,UAAU,CAAC,EAAE,UAAU,SAAA,EAAW,GAAG,MAAK,KAAoB;AAClE,EAAA,MAAM,GAAA,GAAM,iBAAiB,SAAS,CAAA;AACtC,EAAA,MAAM,eAAe,MAAA,CAAO,EAAE,QAAQ,EAAA,EAAI,QAAA,EAAU,GAAG,CAAA;AAEvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAI,IAAA,EAAM;AACf,IAAA,MAAM,OAAA,GAAU,IAAI,iBAAA,EAAkB;AACtC,IAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AACxB,MAAA,GAAA,CAAI,UAAA,CAAW,SAAS,KAAA,EAAM;AAC9B,MAAA;AAAA,IACF;AACA,IAAA,MAAM,OAAA,GAAU,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,KAAU,GAAA,CAAI,KAAK,CAAA,EAAG,KAAA,IAAS,OAAA,CAAQ,CAAC,CAAA,CAAG,KAAA;AACjF,IAAA,GAAA,CAAI,eAAe,OAAO,CAAA;AAC1B,IAAA,GAAA,CAAI,UAAA,CAAW,SAAS,KAAA,EAAM;AAAA,EAGhC,CAAA,EAAG,CAAC,GAAA,CAAI,IAAI,CAAC,CAAA;AAEb,EAAA,IAAI,CAAC,GAAA,CAAI,IAAA,EAAM,OAAO,IAAA;AAEtB,EAAA,MAAM,UAAA,GAAa,CAAC,KAAA,KAAqC;AACvD,IAAA,MAAM,OAAA,GAAU,IAAI,iBAAA,EAAkB;AACtC,IAAA,IAAI,OAAA,CAAQ,WAAW,CAAA,EAAG;AAC1B,IAAA,MAAM,UAAA,GAAa,QAAQ,SAAA,CAAU,CAAC,MAAM,CAAA,CAAE,KAAA,KAAU,IAAI,WAAW,CAAA;AACvE,IAAA,IAAI,OAAA;AACJ,IAAA,IAAI,KAAA,KAAU,SAAS,OAAA,GAAU,CAAA;AAAA,SAAA,IACxB,KAAA,KAAU,MAAA,EAAQ,OAAA,GAAU,OAAA,CAAQ,MAAA,GAAS,CAAA;AAAA,SAAA,IAC7C,eAAe,EAAA,EAAI,OAAA,GAAU,UAAU,CAAA,GAAI,CAAA,GAAI,QAAQ,MAAA,GAAS,CAAA;AAAA,SACpE,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,OAAA,CAAQ,MAAA,GAAS,CAAA,EAAG,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,UAAA,GAAa,KAAK,CAAC,CAAA;AAC3E,IAAA,GAAA,CAAI,cAAA,CAAe,OAAA,CAAQ,OAAO,CAAA,CAAG,KAAK,CAAA;AAAA,EAC5C,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,CAAC,IAAA,KAAiB;AAClC,IAAA,MAAM,GAAA,GAAM,KAAK,GAAA,EAAI;AACrB,IAAA,MAAM,KAAA,GAAQ,GAAA,GAAM,YAAA,CAAa,OAAA,CAAQ,QAAA,GAAW,oBAAA;AACpD,IAAA,MAAM,UAAU,KAAA,GAAQ,EAAA,GAAK,aAAa,OAAA,CAAQ,MAAA,IAAU,KAAK,WAAA,EAAY;AAC7E,IAAA,YAAA,CAAa,OAAA,GAAU,EAAE,MAAA,EAAQ,QAAA,EAAU,GAAA,EAAI;AAC/C,IAAA,MAAM,OAAA,GAAU,IAAI,iBAAA,EAAkB;AACtC,IAAA,MAAM,KAAA,GAAQ,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,SAAA,CAAU,WAAA,EAAY,CAAE,UAAA,CAAW,MAAM,CAAC,CAAA;AAC9E,IAAA,IAAI,KAAA,EAAO,GAAA,CAAI,cAAA,CAAe,KAAA,CAAM,KAAK,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAA0C;AAC/D,IAAA,SAAA,GAAY,CAAC,CAAA;AACb,IAAA,IAAI,EAAE,gBAAA,EAAkB;AAExB,IAAA,QAAQ,EAAE,GAAA;AAAK,MACb,KAAK,WAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,CAAC,CAAA;AACZ,QAAA;AAAA,MACF,KAAK,SAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,EAAE,CAAA;AACb,QAAA;AAAA,MACF,KAAK,MAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,OAAO,CAAA;AAClB,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,MAAM,CAAA;AACjB,QAAA;AAAA,MACF,KAAK,OAAA;AAAA,MACL,KAAK,GAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,IAAI,GAAA,CAAI,gBAAgB,IAAA,EAAM;AAC5B,UAAA,GAAA,CAAI,aAAA,CAAc,IAAI,WAAW,CAAA;AACjC,UAAA,GAAA,CAAI,QAAQ,KAAK,CAAA;AACjB,UAAA,GAAA,CAAI,UAAA,CAAW,SAAS,KAAA,EAAM;AAAA,QAChC;AACA,QAAA;AAAA,MACF,KAAK,QAAA;AACH,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,GAAA,CAAI,QAAQ,KAAK,CAAA;AACjB,QAAA,GAAA,CAAI,UAAA,CAAW,SAAS,KAAA,EAAM;AAC9B,QAAA;AAAA,MACF,KAAK,KAAA;AACH,QAAA,GAAA,CAAI,QAAQ,KAAK,CAAA;AACjB,QAAA;AAAA,MACF;AACE,QAAA,IAAI,CAAA,CAAE,GAAA,CAAI,MAAA,KAAW,CAAA,IAAK,CAAC,CAAA,CAAE,OAAA,IAAW,CAAC,CAAA,CAAE,OAAA,IAAW,CAAC,CAAA,CAAE,MAAA,EAAQ;AAC/D,UAAA,SAAA,CAAU,EAAE,GAAG,CAAA;AAAA,QACjB;AAAA;AACJ,EACF,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,CAAC,IAAA,KAAS;AACb,QAAA,GAAA,CAAI,WAAW,OAAA,GAAU,IAAA;AAAA,MAC3B,CAAA;AAAA,MACA,IAAI,GAAA,CAAI,SAAA;AAAA,MACR,IAAA,EAAK,SAAA;AAAA,MACL,QAAA,EAAU,EAAA;AAAA,MACV,mBAAiB,GAAA,CAAI,SAAA;AAAA,MACrB,uBAAA,EACE,IAAI,WAAA,KAAgB,IAAA,GAAO,IAAI,WAAA,CAAY,GAAA,CAAI,WAAW,CAAA,GAAI,MAAA;AAAA,MAEhE,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAQA,IAAM,MAAA,GAAS,CAAC,EAAE,KAAA,EAAO,SAAA,EAAW,UAAU,YAAA,EAAc,OAAA,EAAS,GAAG,IAAA,EAAK,KAAmB;AAC9F,EAAA,MAAM,GAAA,GAAM,iBAAiB,QAAQ,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,IAAI,KAAA,KAAU,KAAA;AAC/B,EAAA,MAAM,MAAA,GAAS,IAAI,WAAA,KAAgB,KAAA;AAEnC,EAAA,MAAM,WAAA,GAAc,CAAC,CAAA,KAAuC;AAC1D,IAAA,OAAA,GAAU,CAAC,CAAA;AACX,IAAA,IAAI,EAAE,gBAAA,EAAkB;AACxB,IAAA,GAAA,CAAI,cAAc,KAAK,CAAA;AACvB,IAAA,GAAA,CAAI,QAAQ,KAAK,CAAA;AACjB,IAAA,GAAA,CAAI,UAAA,CAAW,SAAS,KAAA,EAAM;AAAA,EAChC,CAAA;AAEA,EAAA,MAAM,gBAAA,GAAmB,CAAC,CAAA,KAAuC;AAC/D,IAAA,YAAA,GAAe,CAAC,CAAA;AAChB,IAAA,IAAI,EAAE,gBAAA,EAAkB;AACxB,IAAA,GAAA,CAAI,eAAe,KAAK,CAAA;AAAA,EAC1B,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,GAAA,CAAI,WAAA,CAAY,KAAK,CAAA;AAAA,MACzB,IAAA,EAAK,QAAA;AAAA,MACL,eAAA,EAAe,QAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,SAAA;AAAA,MACjB,eAAa,MAAA,IAAU,MAAA;AAAA,MACvB,iBAAe,QAAA,IAAY,MAAA;AAAA,MAC3B,OAAA,EAAS,WAAA;AAAA,MACT,YAAA,EAAc,gBAAA;AAAA,MACb,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,MAAA,CAAO,QAAA,EAAU,EAAE,QAAA,EAAU,QAAQ;AAAA;AAAA,GACxC;AAEJ,CAAA;AAEO,IAAM,MAAA,GAAS,MAAA,CAAO,MAAA,CAAO,IAAA,EAAM;AAAA,EACxC,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAC","file":"index.js","sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n  useId,\n  useMemo,\n  useCallback,\n  forwardRef,\n  type ReactNode,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type RefObject,\n} from \"react\";\n\ntype Renderable<S> = ReactNode | ((state: S) => ReactNode);\n\nfunction render<S>(children: Renderable<S> | undefined, state: S): ReactNode {\n  return typeof children === \"function\" ? children(state) : children;\n}\n\ninterface OptionData {\n  value: string;\n  textValue: string;\n}\n\ninterface SelectContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  value: string;\n  onValueChange: (value: string) => void;\n  activeValue: string | null;\n  setActiveValue: (value: string | null) => void;\n  triggerId: string;\n  listboxId: string;\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  listboxRef: RefObject<HTMLDivElement | null>;\n  getOptionId: (value: string) => string;\n  getOrderedOptions: () => OptionData[];\n}\n\nconst SelectContext = createContext<SelectContextValue | null>(null);\n\nfunction useSelectContext(component: string): SelectContextValue {\n  const ctx = useContext(SelectContext);\n  if (!ctx) {\n    throw new Error(`<Select.${component}> must be rendered inside <Select>`);\n  }\n  return ctx;\n}\n\ninterface SelectProps {\n  value: string;\n  onValueChange: (value: string) => void;\n  children: ReactNode;\n}\n\nconst Root = ({ value, onValueChange, children }: SelectProps) => {\n  const [open, setOpenState] = useState(false);\n  const [activeValue, setActiveValue] = useState<string | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const listboxRef = useRef<HTMLDivElement | null>(null);\n\n  const reactId = useId();\n  const triggerId = `${reactId}trigger`;\n  const listboxId = `${reactId}listbox`;\n  const optionIdPrefix = `${reactId}option-`;\n\n  const getOptionId = useCallback(\n    (v: string) => optionIdPrefix + v.replace(/[^a-zA-Z0-9_-]/g, \"_\"),\n    [optionIdPrefix]\n  );\n\n  const getOrderedOptions = useCallback((): OptionData[] => {\n    const root = listboxRef.current;\n    if (!root) return [];\n    const nodes = root.querySelectorAll<HTMLElement>('[role=\"option\"]');\n    return Array.from(nodes).map((node) => ({\n      value: node.dataset.value ?? \"\",\n      textValue: node.dataset.textValue ?? node.textContent ?? \"\",\n    }));\n  }, []);\n\n  const setOpen = useCallback((next: boolean) => {\n    setOpenState(next);\n    if (!next) setActiveValue(null);\n  }, []);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: PointerEvent) => {\n      const target = e.target as Node;\n      if (!triggerRef.current?.contains(target) && !listboxRef.current?.contains(target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [open, setOpen]);\n\n  const ctxValue = useMemo<SelectContextValue>(\n    () => ({\n      open,\n      setOpen,\n      value,\n      onValueChange,\n      activeValue,\n      setActiveValue,\n      triggerId,\n      listboxId,\n      triggerRef,\n      listboxRef,\n      getOptionId,\n      getOrderedOptions,\n    }),\n    [\n      open,\n      setOpen,\n      value,\n      onValueChange,\n      activeValue,\n      triggerId,\n      listboxId,\n      getOptionId,\n      getOrderedOptions,\n    ]\n  );\n\n  return <SelectContext.Provider value={ctxValue}>{children}</SelectContext.Provider>;\n};\n\ninterface TriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  children?: Renderable<{ open: boolean; value: string }>;\n}\n\nconst Trigger = forwardRef<HTMLButtonElement, TriggerProps>(function Trigger(\n  { children, onClick, onKeyDown, ...rest },\n  forwardedRef\n) {\n  const ctx = useSelectContext(\"Trigger\");\n\n  const setRefs = (node: HTMLButtonElement | null) => {\n    ctx.triggerRef.current = node;\n    if (typeof forwardedRef === \"function\") forwardedRef(node);\n    else if (forwardedRef) forwardedRef.current = node;\n  };\n\n  const handleClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    if (e.defaultPrevented) return;\n    ctx.setOpen(!ctx.open);\n  };\n\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n    if (e.key === \" \" || e.key === \"Enter\" || e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      ctx.setOpen(true);\n    }\n  };\n\n  return (\n    <button\n      ref={setRefs}\n      type=\"button\"\n      id={ctx.triggerId}\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-expanded={ctx.open}\n      aria-controls={ctx.listboxId}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {render(children, { open: ctx.open, value: ctx.value })}\n    </button>\n  );\n});\n\ninterface ContentProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nconst TYPEAHEAD_TIMEOUT_MS = 500;\n\nconst Content = ({ children, onKeyDown, ...rest }: ContentProps) => {\n  const ctx = useSelectContext(\"Content\");\n  const typeaheadRef = useRef({ buffer: \"\", lastTime: 0 });\n\n  useEffect(() => {\n    if (!ctx.open) return;\n    const options = ctx.getOrderedOptions();\n    if (options.length === 0) {\n      ctx.listboxRef.current?.focus();\n      return;\n    }\n    const initial = options.find((o) => o.value === ctx.value)?.value ?? options[0]!.value;\n    ctx.setActiveValue(initial);\n    ctx.listboxRef.current?.focus();\n    // only re-run on open transition\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ctx.open]);\n\n  if (!ctx.open) return null;\n\n  const moveActive = (delta: 1 | -1 | \"first\" | \"last\") => {\n    const options = ctx.getOrderedOptions();\n    if (options.length === 0) return;\n    const currentIdx = options.findIndex((o) => o.value === ctx.activeValue);\n    let nextIdx: number;\n    if (delta === \"first\") nextIdx = 0;\n    else if (delta === \"last\") nextIdx = options.length - 1;\n    else if (currentIdx === -1) nextIdx = delta === 1 ? 0 : options.length - 1;\n    else nextIdx = Math.min(options.length - 1, Math.max(0, currentIdx + delta));\n    ctx.setActiveValue(options[nextIdx]!.value);\n  };\n\n  const typeahead = (char: string) => {\n    const now = Date.now();\n    const reset = now - typeaheadRef.current.lastTime > TYPEAHEAD_TIMEOUT_MS;\n    const buffer = (reset ? \"\" : typeaheadRef.current.buffer) + char.toLowerCase();\n    typeaheadRef.current = { buffer, lastTime: now };\n    const options = ctx.getOrderedOptions();\n    const match = options.find((o) => o.textValue.toLowerCase().startsWith(buffer));\n    if (match) ctx.setActiveValue(match.value);\n  };\n\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        moveActive(1);\n        return;\n      case \"ArrowUp\":\n        e.preventDefault();\n        moveActive(-1);\n        return;\n      case \"Home\":\n        e.preventDefault();\n        moveActive(\"first\");\n        return;\n      case \"End\":\n        e.preventDefault();\n        moveActive(\"last\");\n        return;\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        if (ctx.activeValue !== null) {\n          ctx.onValueChange(ctx.activeValue);\n          ctx.setOpen(false);\n          ctx.triggerRef.current?.focus();\n        }\n        return;\n      case \"Escape\":\n        e.preventDefault();\n        ctx.setOpen(false);\n        ctx.triggerRef.current?.focus();\n        return;\n      case \"Tab\":\n        ctx.setOpen(false);\n        return;\n      default:\n        if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {\n          typeahead(e.key);\n        }\n    }\n  };\n\n  return (\n    <div\n      ref={(node) => {\n        ctx.listboxRef.current = node;\n      }}\n      id={ctx.listboxId}\n      role=\"listbox\"\n      tabIndex={-1}\n      aria-labelledby={ctx.triggerId}\n      aria-activedescendant={\n        ctx.activeValue !== null ? ctx.getOptionId(ctx.activeValue) : undefined\n      }\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface OptionProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  value: string;\n  textValue?: string;\n  children?: Renderable<{ selected: boolean; active: boolean }>;\n}\n\nconst Option = ({ value, textValue, children, onMouseEnter, onClick, ...rest }: OptionProps) => {\n  const ctx = useSelectContext(\"Option\");\n  const selected = ctx.value === value;\n  const active = ctx.activeValue === value;\n\n  const handleClick = (e: ReactMouseEvent<HTMLDivElement>) => {\n    onClick?.(e);\n    if (e.defaultPrevented) return;\n    ctx.onValueChange(value);\n    ctx.setOpen(false);\n    ctx.triggerRef.current?.focus();\n  };\n\n  const handleMouseEnter = (e: ReactMouseEvent<HTMLDivElement>) => {\n    onMouseEnter?.(e);\n    if (e.defaultPrevented) return;\n    ctx.setActiveValue(value);\n  };\n\n  return (\n    <div\n      id={ctx.getOptionId(value)}\n      role=\"option\"\n      aria-selected={selected}\n      data-value={value}\n      data-text-value={textValue}\n      data-active={active || undefined}\n      data-selected={selected || undefined}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      {...rest}\n    >\n      {render(children, { selected, active })}\n    </div>\n  );\n};\n\nexport const Select = Object.assign(Root, {\n  Trigger,\n  Content,\n  Option,\n});\n\nexport type { SelectProps, TriggerProps, ContentProps, OptionProps };\n"]}

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@spacing-ui/core",
+  "version": "0.1.0",
+  "description": "Headless, accessible React UI primitives.",
+  "license": "MIT",
+  "author": "Nhan Nguyen <nhan13574@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nathannewyen/space-ui.git"
+  },
+  "homepage": "https://github.com/nathannewyen/space-ui#readme",
+  "bugs": {
+    "url": "https://github.com/nathannewyen/space-ui/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,js,mjs,json,md,yml,yaml}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,mjs,json,md,yml,yaml}\"",
+    "clean": "rm -rf dist",
+    "prepare": "husky",
+    "prepublishOnly": "pnpm clean && pnpm lint && pnpm typecheck && pnpm test && pnpm build"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{js,mjs,json,md,yml,yaml}": [
+      "prettier --write"
+    ]
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.20.0",
+    "@typescript-eslint/parser": "^8.20.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "husky": "^9.1.7",
+    "jsdom": "^26.0.0",
+    "lint-staged": "^16.2.0",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3",
+    "vitest": "^2.1.8"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "headless",
+    "accessible",
+    "a11y",
+    "components",
+    "primitives"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
+  }
+}