npm - @nucleux/select - Versions diffs - 0.5.0 → 0.7.0 - Mend

@nucleux/select 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -1,9 +1,20 @@
 # @nucleux/select
-Accessible native-backed select with a chevron — Nucleux agentic UI for React.
+Select — a custom listbox select with a trigger, groups and keyboard navigation — Nucleux agentic UI for React.
 Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+## Exports
+- **`Select`** — root; `value`/`defaultValue`/`onValueChange`, `open`/`onOpenChange`, `disabled`, `required`, `name` (submits with forms)
+- **`SelectTrigger`** (`size`: default/sm), **`SelectValue`** (`placeholder`)
+- **`SelectContent`** — the listbox (`position`, `align`); flips above the trigger when there is no room below
+- **`SelectItem`** (`value`, `disabled`, `textValue`), **`SelectGroup`**, **`SelectLabel`**, **`SelectSeparator`**
+- **`SelectScrollUpButton`**, **`SelectScrollDownButton`** — kept for shadcn API parity
+For a plain native `<select>`, use `@nucleux/native-select`.
 ## Install
 ```bash
@@ -15,7 +26,15 @@ pnpm add @nucleux/select @nucleux/tokens
 ## Usage
 ```tsx
-import { Select } from "@nucleux/select";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@nucleux/select";
+<Select value={status} onValueChange={setStatus}>
+  <SelectTrigger aria-label="Status"><SelectValue placeholder="Status" /></SelectTrigger>
+  <SelectContent>
+    <SelectItem value="open">Open</SelectItem>
+    <SelectItem value="done">Done</SelectItem>
+  </SelectContent>
+</Select>
 ```
 Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`

package/dist/index.cjs CHANGED Viewed

@@ -27,25 +27,277 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 // src/index.tsx
-var Select = React__namespace.forwardRef(
-  ({ className, containerClassName, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative inline-flex w-full", containerClassName), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "select",
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
+var SelectContext = React__namespace.createContext(null);
+function useSelect(component) {
+  const ctx = React__namespace.useContext(SelectContext);
+  if (!ctx) throw new Error(`<${component}> must be used inside <Select>`);
+  return ctx;
+}
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  required = false,
+  name,
+  children
+}) {
+  const [internalValue, setInternalValue] = React__namespace.useState(defaultValue);
+  const [internalOpen, setInternalOpen] = React__namespace.useState(defaultOpen);
+  const currentValue = value !== void 0 ? value : internalValue;
+  const isOpen = open !== void 0 ? open : internalOpen;
+  const triggerRef = React__namespace.useRef(null);
+  const containerRef = React__namespace.useRef(null);
+  const contentId = React__namespace.useId();
+  const [labels, setLabels] = React__namespace.useState(() => /* @__PURE__ */ new Map());
+  const setOpen = React__namespace.useCallback(
+    (next) => {
+      if (open === void 0) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  const select = React__namespace.useCallback(
+    (next) => {
+      if (value === void 0) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [value, onValueChange]
+  );
+  const registerLabel = React__namespace.useCallback((v, label) => {
+    setLabels((prev) => prev.get(v) === label ? prev : new Map(prev).set(v, label));
+  }, []);
+  React__namespace.useEffect(() => {
+    if (!isOpen) return;
+    const onDown = (e) => {
+      if (!containerRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [isOpen, setOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SelectContext.Provider,
+    {
+      value: { value: currentValue, select, open: isOpen, setOpen, disabled, required, triggerRef, contentId, labels, registerLabel },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative inline-block w-full max-w-full", "data-slot": "select", children: [
+        children,
+        name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: currentValue ?? "" })
+      ] })
+    }
+  );
+}
+var SelectTrigger = React__namespace.forwardRef(
+  ({ size = "default", className, children, onClick, onKeyDown, ...props }, ref) => {
+    const { open, setOpen, disabled, required, triggerRef, contentId, value } = useSelect("SelectTrigger");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        ref,
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": contentId,
+        "aria-required": required || void 0,
+        disabled,
+        "data-slot": "select-trigger",
+        "data-size": size,
+        "data-placeholder": value === void 0 ? "" : void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) setOpen(!open);
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented || open) return;
+          if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        className: utils.cn(
+          "flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-background px-3 text-sm text-foreground shadow-sm outline-none transition-colors",
+          "focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20",
+          "data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+          size === "sm" ? "h-8" : "h-9",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": true, className: "size-4 opacity-50" })
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValue = React__namespace.forwardRef(
+  ({ placeholder, className, ...props }, ref) => {
+    const { value, labels } = useSelect("SelectValue");
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, "data-slot": "select-value", className: utils.cn("truncate", className), ...props, children: value !== void 0 ? labels.get(value) ?? value : placeholder });
+  }
+);
+SelectValue.displayName = "SelectValue";
+var optionsOf = (list) => Array.from(list.querySelectorAll('[role="option"]:not([aria-disabled="true"])'));
+var SelectContent = React__namespace.forwardRef(
+  ({ position = "popper", align = "start", className, children, onKeyDown, ...props }, ref) => {
+    const { open, setOpen, value, triggerRef, contentId } = useSelect("SelectContent");
+    const listRef = React__namespace.useRef(null);
+    const typeahead = React__namespace.useRef({ text: "", timer: 0 });
+    const [up, setUp] = React__namespace.useState(false);
+    useIsomorphicLayoutEffect(() => {
+      if (!open || !listRef.current || !triggerRef.current) return;
+      const trigger = triggerRef.current.getBoundingClientRect();
+      const { height } = listRef.current.getBoundingClientRect();
+      setUp(trigger.bottom + 4 + height > window.innerHeight && trigger.top - 4 - height >= 0);
+      const options = optionsOf(listRef.current);
+      const selected = options.find((o) => o.dataset.value === value);
+      (selected ?? options[0])?.focus();
+    }, [open, value, triggerRef]);
+    const close = () => {
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: (node) => {
+          listRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: contentId,
+        role: "listbox",
+        tabIndex: -1,
+        hidden: !open,
+        "data-slot": "select-content",
+        "data-state": open ? "open" : "closed",
+        "data-position": position,
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented || !listRef.current) return;
+          const options = optionsOf(listRef.current);
+          const i = options.indexOf(document.activeElement);
+          const focus = (n) => options[Math.max(0, Math.min(options.length - 1, n))]?.focus();
+          if (e.key === "ArrowDown") e.preventDefault(), focus(i + 1);
+          else if (e.key === "ArrowUp") e.preventDefault(), focus(i - 1);
+          else if (e.key === "Home") e.preventDefault(), focus(0);
+          else if (e.key === "End") e.preventDefault(), focus(options.length - 1);
+          else if (e.key === "Escape") e.preventDefault(), close();
+          else if (e.key === "Tab") setOpen(false);
+          else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && e.key !== " ") {
+            const t = typeahead.current;
+            clearTimeout(t.timer);
+            t.text += e.key.toLowerCase();
+            t.timer = setTimeout(() => t.text = "", 500);
+            const start = i + (t.text.length === 1 ? 1 : 0);
+            const ordered = [...options.slice(start), ...options.slice(0, start)];
+            ordered.find((o) => (o.textContent ?? "").trim().toLowerCase().startsWith(t.text))?.focus();
+          }
+        },
         className: utils.cn(
-          "h-9 w-full appearance-none rounded-lg border border-input bg-background pl-3 pr-8 text-sm text-foreground shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "absolute z-50 max-h-72 min-w-[8rem] w-full overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-md outline-none animate-nx-fade-in",
+          up ? "bottom-full mb-1" : "top-full mt-1",
+          align === "end" ? "right-0" : align === "center" ? "left-1/2 -translate-x-1/2" : "left-0",
           className
         ),
         ...props,
         children
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" })
-  ] })
+    );
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = React__namespace.forwardRef(
+  ({ value, disabled = false, textValue, className, children, onClick, onKeyDown, ...props }, ref) => {
+    const { value: selected, select, setOpen, triggerRef, registerLabel } = useSelect("SelectItem");
+    const isSelected = selected === value;
+    React__namespace.useEffect(() => registerLabel(value, textValue ?? children), [value, textValue, children, registerLabel]);
+    const choose = () => {
+      if (disabled) return;
+      select(value);
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "option",
+        tabIndex: -1,
+        "aria-selected": isSelected,
+        "aria-disabled": disabled || void 0,
+        "data-slot": "select-item",
+        "data-value": value,
+        "data-state": isSelected ? "checked" : "unchecked",
+        "data-disabled": disabled ? "" : void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) choose();
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (!e.defaultPrevented && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            choose();
+          }
+        },
+        onMouseMove: (e) => {
+          if (!disabled && document.activeElement !== e.currentTarget) e.currentTarget.focus();
+        },
+        className: utils.cn(
+          "relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-8 text-sm outline-none",
+          "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center gap-2", children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectGroup = React__namespace.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "group", "data-slot": "select-group", ...props })
+);
+SelectGroup.displayName = "SelectGroup";
+var SelectLabel = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "select-label", className: utils.cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props })
+);
+SelectLabel.displayName = "SelectLabel";
+var SelectSeparator = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "aria-hidden": true, "data-slot": "select-separator", className: utils.cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props })
 );
-Select.displayName = "Select";
+SelectSeparator.displayName = "SelectSeparator";
+var SelectScrollUpButton = ({ className, children, ...props }) => children ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "select-scroll-up-button", className: utils.cn("flex items-center justify-center py-1", className), ...props, children }) : null;
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+var SelectScrollDownButton = ({ className, children, ...props }) => children ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "select-scroll-down-button", className: utils.cn("flex items-center justify-center py-1", className), ...props, children }) : null;
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
 exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectLabel = SelectLabel;
+exports.SelectScrollDownButton = SelectScrollDownButton;
+exports.SelectScrollUpButton = SelectScrollUpButton;
+exports.SelectSeparator = SelectSeparator;
+exports.SelectTrigger = SelectTrigger;
+exports.SelectValue = SelectValue;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.tsx"],"names":["React","cn","jsx","ChevronDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,IAAM,MAAA,GAAeA,gBAAA,CAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,SAAA,EAAW,kBAAA,EAAoB,UAAU,GAAG,KAAA,EAAM,EAAG,GAAA,qCACrD,KAAA,EAAA,EAAI,SAAA,EAAWC,QAAA,CAAG,6BAAA,EAA+B,kBAAkB,CAAA,EAClE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWD,QAAA;AAAA,UACT,+PAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,oBACAC,cAAA,CAACC,uBAAA,EAAA,EAAY,SAAA,EAAU,4FAAA,EAA6F;AAAA,GAAA,EACtH;AAEJ;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n /** Wrapper className (the chevron is positioned within it). /\n containerClassName?: string;\n}\n\n/\n An accessible select built on the native `<select>` element (full keyboard +\n * screen-reader support), styled to match the design system with a chevron.\n * Pass `<option>`s as children.\n */\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n ({ className, containerClassName, children, ...props }, ref) => (\n <div className={cn(\"relative inline-flex w-full\", containerClassName)}>\n <select\n ref={ref}\n className={cn(\n \"h-9 w-full appearance-none rounded-lg border border-input bg-background pl-3 pr-8 text-sm text-foreground shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n {children}\n </select>\n <ChevronDown className=\"pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n </div>\n ),\n);\nSelect.displayName = \"Select\";\n"]}
1	+ {"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","jsxs","cn","ChevronDown","Check"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\n\n// useLayoutEffect warns when rendered on the server; fall back to useEffect there.\nconst useIsomorphicLayoutEffect = typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\ninterface SelectContextValue {\n value: string \| undefined;\n select: (value: string) => void;\n open: boolean;\n setOpen: (open: boolean) => void;\n disabled: boolean;\n required: boolean;\n triggerRef: React.RefObject<HTMLButtonElement>;\n contentId: string;\n labels: Map<string, React.ReactNode>;\n registerLabel: (value: string, label: React.ReactNode) => void;\n}\nconst SelectContext = React.createContext<SelectContextValue \| null>(null);\n\nfunction useSelect(component: string) {\n const ctx = React.useContext(SelectContext);\n if (!ctx) throw new Error(`<${component}> must be used inside <Select>`);\n return ctx;\n}\n\nexport interface SelectProps {\n /** Selected value (controlled). /\n value?: string;\n /* Initially selected value (uncontrolled). /\n defaultValue?: string;\n /* Called with the newly selected value. /\n onValueChange?: (value: string) => void;\n /* Whether the list is open (controlled). /\n open?: boolean;\n /* Initial open state (uncontrolled). /\n defaultOpen?: boolean;\n /* Called when the list opens or closes. /\n onOpenChange?: (open: boolean) => void;\n /* Disable the whole select. /\n disabled?: boolean;\n /* Mark as required in forms. /\n required?: boolean;\n /* Form field name; when set, the value is submitted with the form. /\n name?: string;\n children: React.ReactNode;\n}\n\n/\n A custom select: a trigger button showing the chosen option and a listbox of\n * SelectItems. Compose SelectTrigger (with SelectValue) and SelectContent.\n * Keyboard: Arrow keys, Home/End and typing a letter move between options;\n * Enter or Space chooses; Escape closes and returns focus to the trigger.\n * For a plain native `<select>`, use NativeSelect.\n /\nexport function Select({\n value,\n defaultValue,\n onValueChange,\n open,\n defaultOpen = false,\n onOpenChange,\n disabled = false,\n required = false,\n name,\n children,\n}: SelectProps) {\n const [internalValue, setInternalValue] = React.useState(defaultValue);\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const currentValue = value !== undefined ? value : internalValue;\n const isOpen = open !== undefined ? open : internalOpen;\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n const contentId = React.useId();\n const [labels, setLabels] = React.useState<Map<string, React.ReactNode>>(() => new Map());\n\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (open === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [open, onOpenChange],\n );\n const select = React.useCallback(\n (next: string) => {\n if (value === undefined) setInternalValue(next);\n onValueChange?.(next);\n },\n [value, onValueChange],\n );\n const registerLabel = React.useCallback((v: string, label: React.ReactNode) => {\n setLabels((prev) => (prev.get(v) === label ? prev : new Map(prev).set(v, label)));\n }, []);\n\n React.useEffect(() => {\n if (!isOpen) return;\n const onDown = (e: MouseEvent) => {\n if (!containerRef.current?.contains(e.target as Node)) setOpen(false);\n };\n document.addEventListener(\"mousedown\", onDown);\n return () => document.removeEventListener(\"mousedown\", onDown);\n }, [isOpen, setOpen]);\n\n return (\n <SelectContext.Provider\n value={{ value: currentValue, select, open: isOpen, setOpen, disabled, required, triggerRef, contentId, labels, registerLabel }}\n >\n <div ref={containerRef} className=\"relative inline-block w-full max-w-full\" data-slot=\"select\">\n {children}\n {name && <input type=\"hidden\" name={name} value={currentValue ?? \"\"} />}\n </div>\n </SelectContext.Provider>\n );\n}\n\nexport interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /* \"default\" (h-9) or \"sm\" (h-8). /\n size?: \"default\" \| \"sm\";\n}\n\n/* The button that shows the current value and opens the list. Put a SelectValue inside. /\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n ({ size = \"default\", className, children, onClick, onKeyDown, ...props }, ref) => {\n const { open, setOpen, disabled, required, triggerRef, contentId, value } = useSelect(\"SelectTrigger\");\n return (\n <button\n ref={(node) => {\n (triggerRef as React.MutableRefObject<HTMLButtonElement \| null>).current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n type=\"button\"\n role=\"combobox\"\n aria-expanded={open}\n aria-haspopup=\"listbox\"\n aria-controls={contentId}\n aria-required={required \|\| undefined}\n disabled={disabled}\n data-slot=\"select-trigger\"\n data-size={size}\n data-placeholder={value === undefined ? \"\" : undefined}\n onClick={(e) => {\n onClick?.(e);\n if (!e.defaultPrevented) setOpen(!open);\n }}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n if (e.defaultPrevented \|\| open) return;\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(e.key)) {\n e.preventDefault();\n setOpen(true);\n }\n }}\n className={cn(\n \"flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-background px-3 text-sm text-foreground shadow-sm outline-none transition-colors\",\n \"focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n \"aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20\",\n \"data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class='size-'])]:size-4\",\n \":data-[slot=select-value]:line-clamp-1 :data-[slot=select-value]:flex :data-[slot=select-value]:items-center :data-[slot=select-value]:gap-2\",\n size === \"sm\" ? \"h-8\" : \"h-9\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronDown aria-hidden className=\"size-4 opacity-50\" />\n </button>\n );\n },\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\nexport interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Shown while nothing is selected. /\n placeholder?: React.ReactNode;\n}\n\n/* Shows the selected option's label (or the placeholder) inside SelectTrigger. /\nexport const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(\n ({ placeholder, className, ...props }, ref) => {\n const { value, labels } = useSelect(\"SelectValue\");\n return (\n <span ref={ref} data-slot=\"select-value\" className={cn(\"truncate\", className)} {...props}>\n {value !== undefined ? (labels.get(value) ?? value) : placeholder}\n </span>\n );\n },\n);\nSelectValue.displayName = \"SelectValue\";\n\nconst optionsOf = (list: HTMLElement) =>\n Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([aria-disabled=\"true\"])'));\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /* \"popper\" (default) places the list below the trigger, flipping above when there is no room. /\n position?: \"popper\" \| \"item-aligned\";\n /* Horizontal alignment relative to the trigger. /\n align?: \"start\" \| \"center\" \| \"end\";\n}\n\n/\n The listbox of SelectItems. It stays mounted (hidden) while closed so the\n * trigger can show the chosen item's label.\n /\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n ({ position = \"popper\", align = \"start\", className, children, onKeyDown, ...props }, ref) => {\n const { open, setOpen, value, triggerRef, contentId } = useSelect(\"SelectContent\");\n const listRef = React.useRef<HTMLDivElement \| null>(null);\n const typeahead = React.useRef({ text: \"\", timer: 0 as unknown as ReturnType<typeof setTimeout> });\n const [up, setUp] = React.useState(false);\n\n useIsomorphicLayoutEffect(() => {\n if (!open \|\| !listRef.current \|\| !triggerRef.current) return;\n const trigger = triggerRef.current.getBoundingClientRect();\n const { height } = listRef.current.getBoundingClientRect();\n setUp(trigger.bottom + 4 + height > window.innerHeight && trigger.top - 4 - height >= 0);\n const options = optionsOf(listRef.current);\n const selected = options.find((o) => o.dataset.value === value);\n (selected ?? options[0])?.focus();\n }, [open, value, triggerRef]);\n\n const close = () => {\n setOpen(false);\n triggerRef.current?.focus();\n };\n\n return (\n <div\n ref={(node) => {\n listRef.current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n id={contentId}\n role=\"listbox\"\n tabIndex={-1}\n hidden={!open}\n data-slot=\"select-content\"\n data-state={open ? \"open\" : \"closed\"}\n data-position={position}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n if (e.defaultPrevented \|\| !listRef.current) return;\n const options = optionsOf(listRef.current);\n const i = options.indexOf(document.activeElement as HTMLElement);\n const focus = (n: number) => options[Math.max(0, Math.min(options.length - 1, n))]?.focus();\n if (e.key === \"ArrowDown\") (e.preventDefault(), focus(i + 1));\n else if (e.key === \"ArrowUp\") (e.preventDefault(), focus(i - 1));\n else if (e.key === \"Home\") (e.preventDefault(), focus(0));\n else if (e.key === \"End\") (e.preventDefault(), focus(options.length - 1));\n else if (e.key === \"Escape\") (e.preventDefault(), close());\n else if (e.key === \"Tab\") setOpen(false);\n else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && e.key !== \" \") {\n const t = typeahead.current;\n clearTimeout(t.timer);\n t.text += e.key.toLowerCase();\n t.timer = setTimeout(() => (t.text = \"\"), 500);\n const start = i + (t.text.length === 1 ? 1 : 0);\n const ordered = [...options.slice(start), ...options.slice(0, start)];\n ordered.find((o) => (o.textContent ?? \"\").trim().toLowerCase().startsWith(t.text))?.focus();\n }\n }}\n className={cn(\n \"absolute z-50 max-h-72 min-w-[8rem] w-full overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-md outline-none animate-nx-fade-in\",\n up ? \"bottom-full mb-1\" : \"top-full mt-1\",\n align === \"end\" ? \"right-0\" : align === \"center\" ? \"left-1/2 -translate-x-1/2\" : \"left-0\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /* The value this option sets. /\n value: string;\n /* Not selectable. /\n disabled?: boolean;\n /* Plain-text label used in the trigger when the children are rich. /\n textValue?: string;\n}\n\n/* One option. Shows a check mark when selected. /\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n ({ value, disabled = false, textValue, className, children, onClick, onKeyDown, ...props }, ref) => {\n const { value: selected, select, setOpen, triggerRef, registerLabel } = useSelect(\"SelectItem\");\n const isSelected = selected === value;\n React.useEffect(() => registerLabel(value, textValue ?? children), [value, textValue, children, registerLabel]);\n const choose = () => {\n if (disabled) return;\n select(value);\n setOpen(false);\n triggerRef.current?.focus();\n };\n return (\n <div\n ref={ref}\n role=\"option\"\n tabIndex={-1}\n aria-selected={isSelected}\n aria-disabled={disabled \|\| undefined}\n data-slot=\"select-item\"\n data-value={value}\n data-state={isSelected ? \"checked\" : \"unchecked\"}\n data-disabled={disabled ? \"\" : undefined}\n onClick={(e) => {\n onClick?.(e);\n if (!e.defaultPrevented) choose();\n }}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n if (!e.defaultPrevented && (e.key === \"Enter\" \|\| e.key === \" \")) {\n e.preventDefault();\n choose();\n }\n }}\n onMouseMove={(e) => {\n if (!disabled && document.activeElement !== e.currentTarget) e.currentTarget.focus();\n }}\n className={cn(\n \"relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-8 text-sm outline-none\",\n \"focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class='size-'])]:size-4 [&_svg:not([class='text-'])]:text-muted-foreground\",\n className,\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\" aria-hidden>\n {isSelected && <Check className=\"size-4\" />}\n </span>\n <span className=\"flex items-center gap-2\">{children}</span>\n </div>\n );\n },\n);\nSelectItem.displayName = \"SelectItem\";\n\n/* Groups related options; pair with SelectLabel. /\nexport const SelectGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n (props, ref) => <div ref={ref} role=\"group\" data-slot=\"select-group\" {...props} />,\n);\nSelectGroup.displayName = \"SelectGroup\";\n\n/* Non-selectable heading for a SelectGroup. /\nexport const SelectLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} data-slot=\"select-label\" className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)} {...props} />\n ),\n);\nSelectLabel.displayName = \"SelectLabel\";\n\n/* Hairline between groups (decorative: a listbox may only contain options and groups). /\nexport const SelectSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} aria-hidden data-slot=\"select-separator\" className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)} {...props} />\n ),\n);\nSelectSeparator.displayName = \"SelectSeparator\";\n\n/\n Kept for shadcn API parity. Nucleux's SelectContent scrolls natively, so\n * these render a small static affordance only when given children.\n /\nexport const SelectScrollUpButton = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) =>\n children ? (\n <div data-slot=\"select-scroll-up-button\" className={cn(\"flex items-center justify-center py-1\", className)} {...props}>\n {children}\n </div>\n ) : null;\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/* See SelectScrollUpButton. */\nexport const SelectScrollDownButton = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) =>\n children ? (\n <div data-slot=\"select-scroll-down-button\" className={cn(\"flex items-center justify-center py-1\", className)} {...props}>\n {children}\n </div>\n ) : null;\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n"]}

package/dist/index.d.cts CHANGED Viewed

@@ -1,14 +1,85 @@
 import * as React from 'react';
-interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    /** Wrapper className (the chevron is positioned within it). */
-    containerClassName?: string;
+interface SelectProps {
+    /** Selected value (controlled). */
+    value?: string;
+    /** Initially selected value (uncontrolled). */
+    defaultValue?: string;
+    /** Called with the newly selected value. */
+    onValueChange?: (value: string) => void;
+    /** Whether the list is open (controlled). */
+    open?: boolean;
+    /** Initial open state (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Called when the list opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Disable the whole select. */
+    disabled?: boolean;
+    /** Mark as required in forms. */
+    required?: boolean;
+    /** Form field name; when set, the value is submitted with the form. */
+    name?: string;
+    children: React.ReactNode;
 }
 /**
- * An accessible select built on the native `<select>` element (full keyboard +
- * screen-reader support), styled to match the design system with a chevron.
- * Pass `<option>`s as children.
+ * A custom select: a trigger button showing the chosen option and a listbox of
+ * SelectItems. Compose SelectTrigger (with SelectValue) and SelectContent.
+ * Keyboard: Arrow keys, Home/End and typing a letter move between options;
+ * Enter or Space chooses; Escape closes and returns focus to the trigger.
+ * For a plain native `<select>`, use NativeSelect.
  */
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare function Select({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, disabled, required, name, children, }: SelectProps): React.JSX.Element;
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** "default" (h-9) or "sm" (h-8). */
+    size?: "default" | "sm";
+}
+/** The button that shows the current value and opens the list. Put a SelectValue inside. */
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Shown while nothing is selected. */
+    placeholder?: React.ReactNode;
+}
+/** Shows the selected option's label (or the placeholder) inside SelectTrigger. */
+declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "popper" (default) places the list below the trigger, flipping above when there is no room. */
+    position?: "popper" | "item-aligned";
+    /** Horizontal alignment relative to the trigger. */
+    align?: "start" | "center" | "end";
+}
+/**
+ * The listbox of SelectItems. It stays mounted (hidden) while closed so the
+ * trigger can show the chosen item's label.
+ */
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** The value this option sets. */
+    value: string;
+    /** Not selectable. */
+    disabled?: boolean;
+    /** Plain-text label used in the trigger when the children are rich. */
+    textValue?: string;
+}
+/** One option. Shows a check mark when selected. */
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+/** Groups related options; pair with SelectLabel. */
+declare const SelectGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Non-selectable heading for a SelectGroup. */
+declare const SelectLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Hairline between groups (decorative: a listbox may only contain options and groups). */
+declare const SelectSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Kept for shadcn API parity. Nucleux's SelectContent scrolls natively, so
+ * these render a small static affordance only when given children.
+ */
+declare const SelectScrollUpButton: {
+    ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element | null;
+    displayName: string;
+};
+/** See SelectScrollUpButton. */
+declare const SelectScrollDownButton: {
+    ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element | null;
+    displayName: string;
+};
-export { Select, type SelectProps };
+export { Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/index.d.ts CHANGED Viewed

@@ -1,14 +1,85 @@
 import * as React from 'react';
-interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
-    /** Wrapper className (the chevron is positioned within it). */
-    containerClassName?: string;
+interface SelectProps {
+    /** Selected value (controlled). */
+    value?: string;
+    /** Initially selected value (uncontrolled). */
+    defaultValue?: string;
+    /** Called with the newly selected value. */
+    onValueChange?: (value: string) => void;
+    /** Whether the list is open (controlled). */
+    open?: boolean;
+    /** Initial open state (uncontrolled). */
+    defaultOpen?: boolean;
+    /** Called when the list opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Disable the whole select. */
+    disabled?: boolean;
+    /** Mark as required in forms. */
+    required?: boolean;
+    /** Form field name; when set, the value is submitted with the form. */
+    name?: string;
+    children: React.ReactNode;
 }
 /**
- * An accessible select built on the native `<select>` element (full keyboard +
- * screen-reader support), styled to match the design system with a chevron.
- * Pass `<option>`s as children.
+ * A custom select: a trigger button showing the chosen option and a listbox of
+ * SelectItems. Compose SelectTrigger (with SelectValue) and SelectContent.
+ * Keyboard: Arrow keys, Home/End and typing a letter move between options;
+ * Enter or Space chooses; Escape closes and returns focus to the trigger.
+ * For a plain native `<select>`, use NativeSelect.
  */
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+declare function Select({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, disabled, required, name, children, }: SelectProps): React.JSX.Element;
+interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** "default" (h-9) or "sm" (h-8). */
+    size?: "default" | "sm";
+}
+/** The button that shows the current value and opens the list. Put a SelectValue inside. */
+declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Shown while nothing is selected. */
+    placeholder?: React.ReactNode;
+}
+/** Shows the selected option's label (or the placeholder) inside SelectTrigger. */
+declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "popper" (default) places the list below the trigger, flipping above when there is no room. */
+    position?: "popper" | "item-aligned";
+    /** Horizontal alignment relative to the trigger. */
+    align?: "start" | "center" | "end";
+}
+/**
+ * The listbox of SelectItems. It stays mounted (hidden) while closed so the
+ * trigger can show the chosen item's label.
+ */
+declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
+interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** The value this option sets. */
+    value: string;
+    /** Not selectable. */
+    disabled?: boolean;
+    /** Plain-text label used in the trigger when the children are rich. */
+    textValue?: string;
+}
+/** One option. Shows a check mark when selected. */
+declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
+/** Groups related options; pair with SelectLabel. */
+declare const SelectGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Non-selectable heading for a SelectGroup. */
+declare const SelectLabel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/** Hairline between groups (decorative: a listbox may only contain options and groups). */
+declare const SelectSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Kept for shadcn API parity. Nucleux's SelectContent scrolls natively, so
+ * these render a small static affordance only when given children.
+ */
+declare const SelectScrollUpButton: {
+    ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element | null;
+    displayName: string;
+};
+/** See SelectScrollUpButton. */
+declare const SelectScrollDownButton: {
+    ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element | null;
+    displayName: string;
+};
-export { Select, type SelectProps };
+export { Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps };

package/dist/index.js CHANGED Viewed

@@ -1,29 +1,272 @@
 "use client";
 import * as React from 'react';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, Check } from 'lucide-react';
 import { cn } from '@nucleux/utils';
 import { jsxs, jsx } from 'react/jsx-runtime';
 // src/index.tsx
-var Select = React.forwardRef(
-  ({ className, containerClassName, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex w-full", containerClassName), children: [
-    /* @__PURE__ */ jsx(
-      "select",
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+var SelectContext = React.createContext(null);
+function useSelect(component) {
+  const ctx = React.useContext(SelectContext);
+  if (!ctx) throw new Error(`<${component}> must be used inside <Select>`);
+  return ctx;
+}
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  required = false,
+  name,
+  children
+}) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const currentValue = value !== void 0 ? value : internalValue;
+  const isOpen = open !== void 0 ? open : internalOpen;
+  const triggerRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const contentId = React.useId();
+  const [labels, setLabels] = React.useState(() => /* @__PURE__ */ new Map());
+  const setOpen = React.useCallback(
+    (next) => {
+      if (open === void 0) setInternalOpen(next);
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  const select = React.useCallback(
+    (next) => {
+      if (value === void 0) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [value, onValueChange]
+  );
+  const registerLabel = React.useCallback((v, label) => {
+    setLabels((prev) => prev.get(v) === label ? prev : new Map(prev).set(v, label));
+  }, []);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const onDown = (e) => {
+      if (!containerRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    return () => document.removeEventListener("mousedown", onDown);
+  }, [isOpen, setOpen]);
+  return /* @__PURE__ */ jsx(
+    SelectContext.Provider,
+    {
+      value: { value: currentValue, select, open: isOpen, setOpen, disabled, required, triggerRef, contentId, labels, registerLabel },
+      children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-block w-full max-w-full", "data-slot": "select", children: [
+        children,
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue ?? "" })
+      ] })
+    }
+  );
+}
+var SelectTrigger = React.forwardRef(
+  ({ size = "default", className, children, onClick, onKeyDown, ...props }, ref) => {
+    const { open, setOpen, disabled, required, triggerRef, contentId, value } = useSelect("SelectTrigger");
+    return /* @__PURE__ */ jsxs(
+      "button",
       {
-        ref,
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        type: "button",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-controls": contentId,
+        "aria-required": required || void 0,
+        disabled,
+        "data-slot": "select-trigger",
+        "data-size": size,
+        "data-placeholder": value === void 0 ? "" : void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) setOpen(!open);
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented || open) return;
+          if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+            e.preventDefault();
+            setOpen(true);
+          }
+        },
+        className: cn(
+          "flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-background px-3 text-sm text-foreground shadow-sm outline-none transition-colors",
+          "focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20",
+          "data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+          size === "sm" ? "h-8" : "h-9",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true, className: "size-4 opacity-50" })
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValue = React.forwardRef(
+  ({ placeholder, className, ...props }, ref) => {
+    const { value, labels } = useSelect("SelectValue");
+    return /* @__PURE__ */ jsx("span", { ref, "data-slot": "select-value", className: cn("truncate", className), ...props, children: value !== void 0 ? labels.get(value) ?? value : placeholder });
+  }
+);
+SelectValue.displayName = "SelectValue";
+var optionsOf = (list) => Array.from(list.querySelectorAll('[role="option"]:not([aria-disabled="true"])'));
+var SelectContent = React.forwardRef(
+  ({ position = "popper", align = "start", className, children, onKeyDown, ...props }, ref) => {
+    const { open, setOpen, value, triggerRef, contentId } = useSelect("SelectContent");
+    const listRef = React.useRef(null);
+    const typeahead = React.useRef({ text: "", timer: 0 });
+    const [up, setUp] = React.useState(false);
+    useIsomorphicLayoutEffect(() => {
+      if (!open || !listRef.current || !triggerRef.current) return;
+      const trigger = triggerRef.current.getBoundingClientRect();
+      const { height } = listRef.current.getBoundingClientRect();
+      setUp(trigger.bottom + 4 + height > window.innerHeight && trigger.top - 4 - height >= 0);
+      const options = optionsOf(listRef.current);
+      const selected = options.find((o) => o.dataset.value === value);
+      (selected ?? options[0])?.focus();
+    }, [open, value, triggerRef]);
+    const close = () => {
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (node) => {
+          listRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        id: contentId,
+        role: "listbox",
+        tabIndex: -1,
+        hidden: !open,
+        "data-slot": "select-content",
+        "data-state": open ? "open" : "closed",
+        "data-position": position,
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (e.defaultPrevented || !listRef.current) return;
+          const options = optionsOf(listRef.current);
+          const i = options.indexOf(document.activeElement);
+          const focus = (n) => options[Math.max(0, Math.min(options.length - 1, n))]?.focus();
+          if (e.key === "ArrowDown") e.preventDefault(), focus(i + 1);
+          else if (e.key === "ArrowUp") e.preventDefault(), focus(i - 1);
+          else if (e.key === "Home") e.preventDefault(), focus(0);
+          else if (e.key === "End") e.preventDefault(), focus(options.length - 1);
+          else if (e.key === "Escape") e.preventDefault(), close();
+          else if (e.key === "Tab") setOpen(false);
+          else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && e.key !== " ") {
+            const t = typeahead.current;
+            clearTimeout(t.timer);
+            t.text += e.key.toLowerCase();
+            t.timer = setTimeout(() => t.text = "", 500);
+            const start = i + (t.text.length === 1 ? 1 : 0);
+            const ordered = [...options.slice(start), ...options.slice(0, start)];
+            ordered.find((o) => (o.textContent ?? "").trim().toLowerCase().startsWith(t.text))?.focus();
+          }
+        },
         className: cn(
-          "h-9 w-full appearance-none rounded-lg border border-input bg-background pl-3 pr-8 text-sm text-foreground shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          "absolute z-50 max-h-72 min-w-[8rem] w-full overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-md outline-none animate-nx-fade-in",
+          up ? "bottom-full mb-1" : "top-full mt-1",
+          align === "end" ? "right-0" : align === "center" ? "left-1/2 -translate-x-1/2" : "left-0",
           className
         ),
         ...props,
         children
       }
-    ),
-    /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" })
-  ] })
+    );
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = React.forwardRef(
+  ({ value, disabled = false, textValue, className, children, onClick, onKeyDown, ...props }, ref) => {
+    const { value: selected, select, setOpen, triggerRef, registerLabel } = useSelect("SelectItem");
+    const isSelected = selected === value;
+    React.useEffect(() => registerLabel(value, textValue ?? children), [value, textValue, children, registerLabel]);
+    const choose = () => {
+      if (disabled) return;
+      select(value);
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "option",
+        tabIndex: -1,
+        "aria-selected": isSelected,
+        "aria-disabled": disabled || void 0,
+        "data-slot": "select-item",
+        "data-value": value,
+        "data-state": isSelected ? "checked" : "unchecked",
+        "data-disabled": disabled ? "" : void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) choose();
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (!e.defaultPrevented && (e.key === "Enter" || e.key === " ")) {
+            e.preventDefault();
+            choose();
+          }
+        },
+        onMouseMove: (e) => {
+          if (!disabled && document.activeElement !== e.currentTarget) e.currentTarget.focus();
+        },
+        className: cn(
+          "relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-8 text-sm outline-none",
+          "focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", "aria-hidden": true, children: isSelected && /* @__PURE__ */ jsx(Check, { className: "size-4" }) }),
+          /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectGroup = React.forwardRef(
+  (props, ref) => /* @__PURE__ */ jsx("div", { ref, role: "group", "data-slot": "select-group", ...props })
+);
+SelectGroup.displayName = "SelectGroup";
+var SelectLabel = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props })
+);
+SelectLabel.displayName = "SelectLabel";
+var SelectSeparator = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "aria-hidden": true, "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props })
 );
-Select.displayName = "Select";
+SelectSeparator.displayName = "SelectSeparator";
+var SelectScrollUpButton = ({ className, children, ...props }) => children ? /* @__PURE__ */ jsx("div", { "data-slot": "select-scroll-up-button", className: cn("flex items-center justify-center py-1", className), ...props, children }) : null;
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+var SelectScrollDownButton = ({ className, children, ...props }) => children ? /* @__PURE__ */ jsx("div", { "data-slot": "select-scroll-down-button", className: cn("flex items-center justify-center py-1", className), ...props, children }) : null;
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
-export { Select };
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;AAcO,IAAM,MAAA,GAAe,KAAA,CAAA,UAAA;AAAA,EAC1B,CAAC,EAAE,SAAA,EAAW,kBAAA,EAAoB,UAAU,GAAG,KAAA,EAAM,EAAG,GAAA,0BACrD,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,kBAAkB,CAAA,EAClE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,+PAAA;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,oBACA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,4FAAA,EAA6F;AAAA,GAAA,EACtH;AAEJ;AACA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\n\nexport interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {\n /** Wrapper className (the chevron is positioned within it). /\n containerClassName?: string;\n}\n\n/\n An accessible select built on the native `<select>` element (full keyboard +\n * screen-reader support), styled to match the design system with a chevron.\n * Pass `<option>`s as children.\n */\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n ({ className, containerClassName, children, ...props }, ref) => (\n <div className={cn(\"relative inline-flex w-full\", containerClassName)}>\n <select\n ref={ref}\n className={cn(\n \"h-9 w-full appearance-none rounded-lg border border-input bg-background pl-3 pr-8 text-sm text-foreground shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n {...props}\n >\n {children}\n </select>\n <ChevronDown className=\"pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n </div>\n ),\n);\nSelect.displayName = \"Select\";\n"]}
1	+ {"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport { cn } from \"@nucleux/utils\";\n\n// useLayoutEffect warns when rendered on the server; fall back to useEffect there.\nconst useIsomorphicLayoutEffect = typeof window !== \"undefined\" ? React.useLayoutEffect : React.useEffect;\n\ninterface SelectContextValue {\n value: string \| undefined;\n select: (value: string) => void;\n open: boolean;\n setOpen: (open: boolean) => void;\n disabled: boolean;\n required: boolean;\n triggerRef: React.RefObject<HTMLButtonElement>;\n contentId: string;\n labels: Map<string, React.ReactNode>;\n registerLabel: (value: string, label: React.ReactNode) => void;\n}\nconst SelectContext = React.createContext<SelectContextValue \| null>(null);\n\nfunction useSelect(component: string) {\n const ctx = React.useContext(SelectContext);\n if (!ctx) throw new Error(`<${component}> must be used inside <Select>`);\n return ctx;\n}\n\nexport interface SelectProps {\n /** Selected value (controlled). /\n value?: string;\n /* Initially selected value (uncontrolled). /\n defaultValue?: string;\n /* Called with the newly selected value. /\n onValueChange?: (value: string) => void;\n /* Whether the list is open (controlled). /\n open?: boolean;\n /* Initial open state (uncontrolled). /\n defaultOpen?: boolean;\n /* Called when the list opens or closes. /\n onOpenChange?: (open: boolean) => void;\n /* Disable the whole select. /\n disabled?: boolean;\n /* Mark as required in forms. /\n required?: boolean;\n /* Form field name; when set, the value is submitted with the form. /\n name?: string;\n children: React.ReactNode;\n}\n\n/\n A custom select: a trigger button showing the chosen option and a listbox of\n * SelectItems. Compose SelectTrigger (with SelectValue) and SelectContent.\n * Keyboard: Arrow keys, Home/End and typing a letter move between options;\n * Enter or Space chooses; Escape closes and returns focus to the trigger.\n * For a plain native `<select>`, use NativeSelect.\n /\nexport function Select({\n value,\n defaultValue,\n onValueChange,\n open,\n defaultOpen = false,\n onOpenChange,\n disabled = false,\n required = false,\n name,\n children,\n}: SelectProps) {\n const [internalValue, setInternalValue] = React.useState(defaultValue);\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const currentValue = value !== undefined ? value : internalValue;\n const isOpen = open !== undefined ? open : internalOpen;\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const containerRef = React.useRef<HTMLDivElement>(null);\n const contentId = React.useId();\n const [labels, setLabels] = React.useState<Map<string, React.ReactNode>>(() => new Map());\n\n const setOpen = React.useCallback(\n (next: boolean) => {\n if (open === undefined) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [open, onOpenChange],\n );\n const select = React.useCallback(\n (next: string) => {\n if (value === undefined) setInternalValue(next);\n onValueChange?.(next);\n },\n [value, onValueChange],\n );\n const registerLabel = React.useCallback((v: string, label: React.ReactNode) => {\n setLabels((prev) => (prev.get(v) === label ? prev : new Map(prev).set(v, label)));\n }, []);\n\n React.useEffect(() => {\n if (!isOpen) return;\n const onDown = (e: MouseEvent) => {\n if (!containerRef.current?.contains(e.target as Node)) setOpen(false);\n };\n document.addEventListener(\"mousedown\", onDown);\n return () => document.removeEventListener(\"mousedown\", onDown);\n }, [isOpen, setOpen]);\n\n return (\n <SelectContext.Provider\n value={{ value: currentValue, select, open: isOpen, setOpen, disabled, required, triggerRef, contentId, labels, registerLabel }}\n >\n <div ref={containerRef} className=\"relative inline-block w-full max-w-full\" data-slot=\"select\">\n {children}\n {name && <input type=\"hidden\" name={name} value={currentValue ?? \"\"} />}\n </div>\n </SelectContext.Provider>\n );\n}\n\nexport interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /* \"default\" (h-9) or \"sm\" (h-8). /\n size?: \"default\" \| \"sm\";\n}\n\n/* The button that shows the current value and opens the list. Put a SelectValue inside. /\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n ({ size = \"default\", className, children, onClick, onKeyDown, ...props }, ref) => {\n const { open, setOpen, disabled, required, triggerRef, contentId, value } = useSelect(\"SelectTrigger\");\n return (\n <button\n ref={(node) => {\n (triggerRef as React.MutableRefObject<HTMLButtonElement \| null>).current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n type=\"button\"\n role=\"combobox\"\n aria-expanded={open}\n aria-haspopup=\"listbox\"\n aria-controls={contentId}\n aria-required={required \|\| undefined}\n disabled={disabled}\n data-slot=\"select-trigger\"\n data-size={size}\n data-placeholder={value === undefined ? \"\" : undefined}\n onClick={(e) => {\n onClick?.(e);\n if (!e.defaultPrevented) setOpen(!open);\n }}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n if (e.defaultPrevented \|\| open) return;\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(e.key)) {\n e.preventDefault();\n setOpen(true);\n }\n }}\n className={cn(\n \"flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-background px-3 text-sm text-foreground shadow-sm outline-none transition-colors\",\n \"focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n \"aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20\",\n \"data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class='size-'])]:size-4\",\n \":data-[slot=select-value]:line-clamp-1 :data-[slot=select-value]:flex :data-[slot=select-value]:items-center :data-[slot=select-value]:gap-2\",\n size === \"sm\" ? \"h-8\" : \"h-9\",\n className,\n )}\n {...props}\n >\n {children}\n <ChevronDown aria-hidden className=\"size-4 opacity-50\" />\n </button>\n );\n },\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\nexport interface SelectValueProps extends React.HTMLAttributes<HTMLSpanElement> {\n /** Shown while nothing is selected. /\n placeholder?: React.ReactNode;\n}\n\n/* Shows the selected option's label (or the placeholder) inside SelectTrigger. /\nexport const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(\n ({ placeholder, className, ...props }, ref) => {\n const { value, labels } = useSelect(\"SelectValue\");\n return (\n <span ref={ref} data-slot=\"select-value\" className={cn(\"truncate\", className)} {...props}>\n {value !== undefined ? (labels.get(value) ?? value) : placeholder}\n </span>\n );\n },\n);\nSelectValue.displayName = \"SelectValue\";\n\nconst optionsOf = (list: HTMLElement) =>\n Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([aria-disabled=\"true\"])'));\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n /* \"popper\" (default) places the list below the trigger, flipping above when there is no room. /\n position?: \"popper\" \| \"item-aligned\";\n /* Horizontal alignment relative to the trigger. /\n align?: \"start\" \| \"center\" \| \"end\";\n}\n\n/\n The listbox of SelectItems. It stays mounted (hidden) while closed so the\n * trigger can show the chosen item's label.\n /\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n ({ position = \"popper\", align = \"start\", className, children, onKeyDown, ...props }, ref) => {\n const { open, setOpen, value, triggerRef, contentId } = useSelect(\"SelectContent\");\n const listRef = React.useRef<HTMLDivElement \| null>(null);\n const typeahead = React.useRef({ text: \"\", timer: 0 as unknown as ReturnType<typeof setTimeout> });\n const [up, setUp] = React.useState(false);\n\n useIsomorphicLayoutEffect(() => {\n if (!open \|\| !listRef.current \|\| !triggerRef.current) return;\n const trigger = triggerRef.current.getBoundingClientRect();\n const { height } = listRef.current.getBoundingClientRect();\n setUp(trigger.bottom + 4 + height > window.innerHeight && trigger.top - 4 - height >= 0);\n const options = optionsOf(listRef.current);\n const selected = options.find((o) => o.dataset.value === value);\n (selected ?? options[0])?.focus();\n }, [open, value, triggerRef]);\n\n const close = () => {\n setOpen(false);\n triggerRef.current?.focus();\n };\n\n return (\n <div\n ref={(node) => {\n listRef.current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n id={contentId}\n role=\"listbox\"\n tabIndex={-1}\n hidden={!open}\n data-slot=\"select-content\"\n data-state={open ? \"open\" : \"closed\"}\n data-position={position}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n if (e.defaultPrevented \|\| !listRef.current) return;\n const options = optionsOf(listRef.current);\n const i = options.indexOf(document.activeElement as HTMLElement);\n const focus = (n: number) => options[Math.max(0, Math.min(options.length - 1, n))]?.focus();\n if (e.key === \"ArrowDown\") (e.preventDefault(), focus(i + 1));\n else if (e.key === \"ArrowUp\") (e.preventDefault(), focus(i - 1));\n else if (e.key === \"Home\") (e.preventDefault(), focus(0));\n else if (e.key === \"End\") (e.preventDefault(), focus(options.length - 1));\n else if (e.key === \"Escape\") (e.preventDefault(), close());\n else if (e.key === \"Tab\") setOpen(false);\n else if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && e.key !== \" \") {\n const t = typeahead.current;\n clearTimeout(t.timer);\n t.text += e.key.toLowerCase();\n t.timer = setTimeout(() => (t.text = \"\"), 500);\n const start = i + (t.text.length === 1 ? 1 : 0);\n const ordered = [...options.slice(start), ...options.slice(0, start)];\n ordered.find((o) => (o.textContent ?? \"\").trim().toLowerCase().startsWith(t.text))?.focus();\n }\n }}\n className={cn(\n \"absolute z-50 max-h-72 min-w-[8rem] w-full overflow-y-auto overflow-x-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-md outline-none animate-nx-fade-in\",\n up ? \"bottom-full mb-1\" : \"top-full mt-1\",\n align === \"end\" ? \"right-0\" : align === \"center\" ? \"left-1/2 -translate-x-1/2\" : \"left-0\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /* The value this option sets. /\n value: string;\n /* Not selectable. /\n disabled?: boolean;\n /* Plain-text label used in the trigger when the children are rich. /\n textValue?: string;\n}\n\n/* One option. Shows a check mark when selected. /\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n ({ value, disabled = false, textValue, className, children, onClick, onKeyDown, ...props }, ref) => {\n const { value: selected, select, setOpen, triggerRef, registerLabel } = useSelect(\"SelectItem\");\n const isSelected = selected === value;\n React.useEffect(() => registerLabel(value, textValue ?? children), [value, textValue, children, registerLabel]);\n const choose = () => {\n if (disabled) return;\n select(value);\n setOpen(false);\n triggerRef.current?.focus();\n };\n return (\n <div\n ref={ref}\n role=\"option\"\n tabIndex={-1}\n aria-selected={isSelected}\n aria-disabled={disabled \|\| undefined}\n data-slot=\"select-item\"\n data-value={value}\n data-state={isSelected ? \"checked\" : \"unchecked\"}\n data-disabled={disabled ? \"\" : undefined}\n onClick={(e) => {\n onClick?.(e);\n if (!e.defaultPrevented) choose();\n }}\n onKeyDown={(e) => {\n onKeyDown?.(e);\n if (!e.defaultPrevented && (e.key === \"Enter\" \|\| e.key === \" \")) {\n e.preventDefault();\n choose();\n }\n }}\n onMouseMove={(e) => {\n if (!disabled && document.activeElement !== e.currentTarget) e.currentTarget.focus();\n }}\n className={cn(\n \"relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-1.5 pl-2 pr-8 text-sm outline-none\",\n \"focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class='size-'])]:size-4 [&_svg:not([class='text-'])]:text-muted-foreground\",\n className,\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\" aria-hidden>\n {isSelected && <Check className=\"size-4\" />}\n </span>\n <span className=\"flex items-center gap-2\">{children}</span>\n </div>\n );\n },\n);\nSelectItem.displayName = \"SelectItem\";\n\n/* Groups related options; pair with SelectLabel. /\nexport const SelectGroup = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n (props, ref) => <div ref={ref} role=\"group\" data-slot=\"select-group\" {...props} />,\n);\nSelectGroup.displayName = \"SelectGroup\";\n\n/* Non-selectable heading for a SelectGroup. /\nexport const SelectLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} data-slot=\"select-label\" className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)} {...props} />\n ),\n);\nSelectLabel.displayName = \"SelectLabel\";\n\n/* Hairline between groups (decorative: a listbox may only contain options and groups). /\nexport const SelectSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => (\n <div ref={ref} aria-hidden data-slot=\"select-separator\" className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)} {...props} />\n ),\n);\nSelectSeparator.displayName = \"SelectSeparator\";\n\n/\n Kept for shadcn API parity. Nucleux's SelectContent scrolls natively, so\n * these render a small static affordance only when given children.\n /\nexport const SelectScrollUpButton = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) =>\n children ? (\n <div data-slot=\"select-scroll-up-button\" className={cn(\"flex items-center justify-center py-1\", className)} {...props}>\n {children}\n </div>\n ) : null;\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/* See SelectScrollUpButton. */\nexport const SelectScrollDownButton = ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) =>\n children ? (\n <div data-slot=\"select-scroll-down-button\" className={cn(\"flex items-center justify-center py-1\", className)} {...props}>\n {children}\n </div>\n ) : null;\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nucleux/select",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.cjs",
@@ -22,7 +22,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@nucleux/utils": "0.5.0",
+    "@nucleux/utils": "0.7.0",
     "lucide-react": "^0.469.0"
   },
   "devDependencies": {
@@ -41,7 +41,7 @@
     "directory": "packages/select"
   },
   "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
-  "description": "Accessible native-backed select with a chevron — Nucleux agentic UI for React.",
+  "description": "Select — a custom listbox select with a trigger, groups and keyboard navigation — Nucleux agentic UI for React.",
   "keywords": [
     "nucleux",
     "react",