@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,52 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './Select.css';
+import '../../styles/scrollbars.css';
+export interface SelectOption {
+    /** Value committed to `value` when this option is chosen. */
+    value: string;
+    /** Row content. Anything non-textual is ignored by type-ahead. */
+    label: ReactNode;
+    /** Skip the row: it can be read but not chosen. */
+    disabled?: boolean;
+}
+export interface SelectProps extends HTMLAttributes<HTMLDivElement> {
+    /** Options, in list order. */
+    options: SelectOption[];
+    /** Controlled value. */
+    value?: string;
+    /** Initial value when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the chosen value. */
+    onValueChange?: (value: string) => void;
+    /** Shown when nothing is selected. */
+    placeholder?: string;
+    /** Allow typing an arbitrary value instead of choosing one. */
+    editable?: boolean;
+    /** Called as the user types in `editable` mode. */
+    onInputChange?: (value: string) => void;
+    /** Height variant: `18px`, the default `19px`, or `25px` like `Button`. */
+    size?: 'small' | 'default' | 'large';
+    /** Render the invalid border. Does not set aria-invalid. */
+    invalid?: boolean;
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Accessible name when there is no visible `FieldLabel`. */
+    'aria-label'?: string;
+    /** Id of the visible label. */
+    'aria-labelledby'?: string;
+    /** Id of the control, for `FieldLabel htmlFor`. */
+    id?: string;
+    /** Optional name for form submission via a hidden input. */
+    name?: string;
+}
+/**
+ * A collapsed list that opens into an overlay list of options, with a caret on
+ * the right — VGUI's `ComboBox`, which is a text entry plus a button plus a
+ * `Menu`-shaped popup.
+ *
+ * Built from plain markup rather than from `Menu` so the package stays
+ * tree-shakable; the popup deliberately reproduces `Menu`'s geometry, row
+ * fill and `aria-activedescendant` keyboard model.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,cAAc,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,cAAc,CAAA;AACrB,OAAO,6BAA6B,CAAA;AAEpC,MAAM,WAAW,YAAY;IAC3B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,KAAK,EAAE,SAAS,CAAA;IAChB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE,8BAA8B;IAC9B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;IACpC,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,mDAAmD;IACnD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAUD;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,wGAyTjB,CAAA"}

package/dist/components/Select/Select.js

@@ -0,0 +1,281 @@
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./Select.css";
+//#region src/components/Select/Select.tsx
+var instance = 0;
+/** The text of a label, for type-ahead and the editable draft. */
+var labelText = (label) => typeof label === "string" || typeof label === "number" ? String(label) : "";
+var isPrintable = (event) => event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
+/**
+* A collapsed list that opens into an overlay list of options, with a caret on
+* the right — VGUI's `ComboBox`, which is a text entry plus a button plus a
+* `Menu`-shaped popup.
+*
+* Built from plain markup rather than from `Menu` so the package stays
+* tree-shakable; the popup deliberately reproduces `Menu`'s geometry, row
+* fill and `aria-activedescendant` keyboard model.
+*/
+var Select = forwardRef(function Select({ options, value, defaultValue, onValueChange, placeholder, editable = false, onInputChange, size = "default", invalid = false, disabled = false, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, name, ...rest }, ref) {
+	const [internal, setInternal] = useState(() => defaultValue ?? "");
+	const current = value !== void 0 ? value : internal;
+	const selectedIndex = options.findIndex((option) => option.value === current);
+	const selected = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+	const firstEnabled = options.findIndex((option) => !option.disabled);
+	const lastEnabled = options.reduce((last, option, index) => option.disabled ? last : index, -1);
+	const [open, setOpen] = useState(false);
+	const [active, setActive] = useState(() => selectedIndex >= 0 ? selectedIndex : Math.max(0, firstEnabled));
+	const [seen, setSeen] = useState(current);
+	const [draft, setDraft] = useState(() => labelText(selected?.label) || current);
+	if (seen !== current) {
+		setSeen(current);
+		setDraft(labelText(selected?.label) || current);
+	}
+	const [ids] = useState(() => {
+		instance += 1;
+		return {
+			list: `vgui-select-${instance}-list`,
+			option: (index) => `vgui-select-${instance}-option-${index}`
+		};
+	});
+	const typed = useRef({
+		text: "",
+		timer: 0
+	});
+	useEffect(() => {
+		const buffer = typed.current;
+		return () => window.clearTimeout(buffer.timer);
+	}, []);
+	const commit = (next) => {
+		if (next === current) return;
+		if (value === void 0) setInternal(next);
+		onValueChange?.(next);
+	};
+	const openList = (index) => {
+		if (disabled) return;
+		setActive(index ?? (selectedIndex >= 0 ? selectedIndex : Math.max(0, firstEnabled)));
+		setOpen(true);
+	};
+	const closeList = () => setOpen(false);
+	const move = (step) => {
+		if (options.length === 0) return;
+		let index = active;
+		for (let i = 0; i < options.length; i += 1) {
+			index = (index + step + options.length) % options.length;
+			if (!options[index].disabled) break;
+		}
+		setActive(index);
+		if (editable) setDraft(labelText(options[index].label) || options[index].value);
+	};
+	const choose = (index) => {
+		const option = options[index];
+		if (!option || option.disabled || disabled) return;
+		setActive(index);
+		if (editable) setDraft(labelText(option.label) || option.value);
+		commit(option.value);
+		closeList();
+	};
+	/** The editable half's text, resolved back to an option when it names one. */
+	const commitDraft = () => {
+		const match = options.find((option) => labelText(option.label) === draft);
+		commit(match ? match.value : draft);
+	};
+	const typeAhead = (key) => {
+		const buffer = typed.current;
+		buffer.text += key;
+		window.clearTimeout(buffer.timer);
+		buffer.timer = window.setTimeout(() => {
+			buffer.text = "";
+		}, 500);
+		const needle = buffer.text.toLowerCase();
+		const index = options.findIndex((option) => !option.disabled && (labelText(option.label) || option.value).toLowerCase().startsWith(needle));
+		if (index < 0) return;
+		if (open) setActive(index);
+		else choose(index);
+	};
+	const handleKeyDown = (event) => {
+		if (disabled) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				if (open && !event.altKey) move(1);
+				else if (!open) openList();
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				if (open) {
+					if (event.altKey) return;
+					move(-1);
+				} else openList();
+				return;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				if (open) choose(active);
+				else openList();
+				return;
+			case "Escape":
+				if (open) {
+					event.preventDefault();
+					closeList();
+				}
+				return;
+			case "Home":
+				if (open) {
+					event.preventDefault();
+					setActive(Math.max(0, firstEnabled));
+				}
+				return;
+			case "End":
+				if (open) {
+					event.preventDefault();
+					setActive(Math.max(0, lastEnabled));
+				}
+				return;
+			case "Tab":
+				closeList();
+				return;
+		}
+		if (isPrintable(event)) {
+			event.preventDefault();
+			typeAhead(event.key);
+		}
+	};
+	const handleInputKeyDown = (event) => {
+		if (disabled) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				if (open && !event.altKey) move(1);
+				else if (!open) openList();
+				return;
+			case "ArrowUp":
+				event.preventDefault();
+				if (open) {
+					if (event.altKey) return;
+					move(-1);
+				} else openList();
+				return;
+			case "Enter":
+				event.preventDefault();
+				if (open) choose(active);
+				else commitDraft();
+				return;
+			case "Escape":
+				event.preventDefault();
+				if (open) closeList();
+				else setDraft(labelText(selected?.label) || current);
+				return;
+			case "Tab":
+				commitDraft();
+				closeList();
+				return;
+		}
+	};
+	const handleInputChange = (event) => {
+		const next = event.currentTarget.value;
+		setDraft(next);
+		onInputChange?.(next);
+		if (!open && options.length > 0) openList();
+	};
+	const classes = ["vgui-select"];
+	if (size === "small") classes.push("vgui-select--small");
+	if (size === "large") classes.push("vgui-select--large");
+	if (editable) classes.push("vgui-select--editable");
+	if (invalid) classes.push("vgui-select--invalid");
+	if (disabled) classes.push("vgui-select--disabled");
+	if (open) classes.push("vgui-select--open");
+	if (className) classes.push(className);
+	const showingPlaceholder = !selected && current === "";
+	const listId = open ? ids.list : void 0;
+	const activeId = open ? ids.option(active) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classes.join(" "),
+		...rest,
+		children: [
+			editable ? /* @__PURE__ */ jsxs("span", {
+				className: "vgui-select__field",
+				children: [/* @__PURE__ */ jsx("input", {
+					id,
+					className: "vgui-select__input",
+					type: "text",
+					role: "combobox",
+					autoComplete: "off",
+					spellCheck: false,
+					placeholder: showingPlaceholder ? placeholder : void 0,
+					"aria-expanded": open,
+					"aria-haspopup": "listbox",
+					"aria-controls": listId,
+					"aria-activedescendant": activeId,
+					"aria-autocomplete": "list",
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledBy,
+					value: draft,
+					disabled,
+					onChange: handleInputChange,
+					onKeyDown: handleInputKeyDown,
+					onBlur: commitDraft
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "vgui-select__button",
+					tabIndex: -1,
+					"aria-hidden": "true",
+					disabled,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => open ? closeList() : openList()
+				})]
+			}) : /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				id,
+				className: "vgui-select__trigger",
+				role: "combobox",
+				"aria-expanded": open,
+				"aria-haspopup": "listbox",
+				"aria-controls": listId,
+				"aria-activedescendant": activeId,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				disabled,
+				onClick: () => open ? closeList() : openList(),
+				onKeyDown: handleKeyDown,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "vgui-select__value",
+					"data-placeholder": showingPlaceholder ? "true" : void 0,
+					children: selected ? selected.label : current || placeholder
+				}), /* @__PURE__ */ jsx("span", {
+					className: "vgui-select__button",
+					"aria-hidden": "true"
+				})]
+			}),
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: current
+			}) : null,
+			open ? /* @__PURE__ */ jsx("ul", {
+				id: ids.list,
+				className: "vgui-select__list vgui-scroll-surface",
+				role: "listbox",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				children: options.map((option, index) => /* @__PURE__ */ jsx("li", {
+					id: ids.option(index),
+					className: "vgui-select__option",
+					role: "option",
+					"aria-selected": option.value === current,
+					"aria-disabled": option.disabled || void 0,
+					"data-active": index === active ? "true" : void 0,
+					onMouseDown: (event) => event.preventDefault(),
+					onClick: () => choose(index),
+					children: option.label
+				}, option.value))
+			}) : null
+		]
+	});
+});
+Select.displayName = "Select";
+//#endregion
+export { Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport type { ChangeEvent, HTMLAttributes, KeyboardEvent, ReactNode } from 'react'\nimport './Select.css'\nimport '../../styles/scrollbars.css'\n\nexport interface SelectOption {\n  /** Value committed to `value` when this option is chosen. */\n  value: string\n  /** Row content. Anything non-textual is ignored by type-ahead. */\n  label: ReactNode\n  /** Skip the row: it can be read but not chosen. */\n  disabled?: boolean\n}\n\nexport interface SelectProps extends HTMLAttributes<HTMLDivElement> {\n  /** Options, in list order. */\n  options: SelectOption[]\n  /** Controlled value. */\n  value?: string\n  /** Initial value when uncontrolled. */\n  defaultValue?: string\n  /** Called with the chosen value. */\n  onValueChange?: (value: string) => void\n  /** Shown when nothing is selected. */\n  placeholder?: string\n  /** Allow typing an arbitrary value instead of choosing one. */\n  editable?: boolean\n  /** Called as the user types in `editable` mode. */\n  onInputChange?: (value: string) => void\n  /** Height variant: `18px`, the default `19px`, or `25px` like `Button`. */\n  size?: 'small' | 'default' | 'large'\n  /** Render the invalid border. Does not set aria-invalid. */\n  invalid?: boolean\n  /** Disable the whole control. */\n  disabled?: boolean\n  /** Accessible name when there is no visible `FieldLabel`. */\n  'aria-label'?: string\n  /** Id of the visible label. */\n  'aria-labelledby'?: string\n  /** Id of the control, for `FieldLabel htmlFor`. */\n  id?: string\n  /** Optional name for form submission via a hidden input. */\n  name?: string\n}\n\nlet instance = 0\n\n/** The text of a label, for type-ahead and the editable draft. */\nconst labelText = (label: ReactNode) => (typeof label === 'string' || typeof label === 'number' ? String(label) : '')\n\nconst isPrintable = (event: KeyboardEvent<HTMLElement>) =>\n  event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey\n\n/**\n * A collapsed list that opens into an overlay list of options, with a caret on\n * the right — VGUI's `ComboBox`, which is a text entry plus a button plus a\n * `Menu`-shaped popup.\n *\n * Built from plain markup rather than from `Menu` so the package stays\n * tree-shakable; the popup deliberately reproduces `Menu`'s geometry, row\n * fill and `aria-activedescendant` keyboard model.\n */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(\n  {\n    options,\n    value,\n    defaultValue,\n    onValueChange,\n    placeholder,\n    editable = false,\n    onInputChange,\n    size = 'default',\n    invalid = false,\n    disabled = false,\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    id,\n    name,\n    ...rest\n  },\n  ref,\n) {\n  const [internal, setInternal] = useState(() => defaultValue ?? '')\n  const current = value !== undefined ? value : internal\n\n  const selectedIndex = options.findIndex((option) => option.value === current)\n  const selected = selectedIndex >= 0 ? options[selectedIndex] : undefined\n  const firstEnabled = options.findIndex((option) => !option.disabled)\n  const lastEnabled = options.reduce((last, option, index) => (option.disabled ? last : index), -1)\n\n  const [open, setOpen] = useState(false)\n  const [active, setActive] = useState(() => (selectedIndex >= 0 ? selectedIndex : Math.max(0, firstEnabled)))\n\n  // The editable field shows the selection's label when there is one and the\n  // raw value otherwise. Kept as draft state so typing is uncontrolled until a\n  // commit, which is what makes `onValueChange` fire once per choice.\n  const [seen, setSeen] = useState(current)\n  const [draft, setDraft] = useState(() => labelText(selected?.label) || current)\n  if (seen !== current) {\n    setSeen(current)\n    setDraft(labelText(selected?.label) || current)\n  }\n\n  const [ids] = useState(() => {\n    instance += 1\n    return {\n      list: `vgui-select-${instance}-list`,\n      option: (index: number) => `vgui-select-${instance}-option-${index}`,\n    }\n  })\n\n  const typed = useRef({ text: '', timer: 0 })\n\n  useEffect(() => {\n    const buffer = typed.current\n    return () => window.clearTimeout(buffer.timer)\n  }, [])\n\n  const commit = (next: string) => {\n    if (next === current) return\n    if (value === undefined) setInternal(next)\n    onValueChange?.(next)\n  }\n\n  const openList = (index?: number) => {\n    if (disabled) return\n    setActive(index ?? (selectedIndex >= 0 ? selectedIndex : Math.max(0, firstEnabled)))\n    setOpen(true)\n  }\n\n  const closeList = () => setOpen(false)\n\n  const move = (step: number) => {\n    if (options.length === 0) return\n    let index = active\n    for (let i = 0; i < options.length; i += 1) {\n      index = (index + step + options.length) % options.length\n      if (!options[index].disabled) break\n    }\n    setActive(index)\n    if (editable) setDraft(labelText(options[index].label) || options[index].value)\n  }\n\n  const choose = (index: number) => {\n    const option = options[index]\n    if (!option || option.disabled || disabled) return\n    setActive(index)\n    if (editable) setDraft(labelText(option.label) || option.value)\n    commit(option.value)\n    closeList()\n  }\n\n  /** The editable half's text, resolved back to an option when it names one. */\n  const commitDraft = () => {\n    const match = options.find((option) => labelText(option.label) === draft)\n    commit(match ? match.value : draft)\n  }\n\n  const typeAhead = (key: string) => {\n    const buffer = typed.current\n    buffer.text += key\n    window.clearTimeout(buffer.timer)\n    buffer.timer = window.setTimeout(() => {\n      buffer.text = ''\n    }, 500)\n    const needle = buffer.text.toLowerCase()\n    const index = options.findIndex(\n      (option) => !option.disabled && (labelText(option.label) || option.value).toLowerCase().startsWith(needle),\n    )\n    if (index < 0) return\n    if (open) setActive(index)\n    else choose(index)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (disabled) return\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n        if (open && !event.altKey) move(1)\n        else if (!open) openList()\n        return\n      case 'ArrowUp':\n        event.preventDefault()\n        if (open) {\n          if (event.altKey) return\n          move(-1)\n        } else {\n          openList()\n        }\n        return\n      case 'Enter':\n      case ' ':\n        event.preventDefault()\n        if (open) choose(active)\n        else openList()\n        return\n      case 'Escape':\n        if (open) {\n          event.preventDefault()\n          closeList()\n        }\n        return\n      case 'Home':\n        if (open) {\n          event.preventDefault()\n          setActive(Math.max(0, firstEnabled))\n        }\n        return\n      case 'End':\n        if (open) {\n          event.preventDefault()\n          setActive(Math.max(0, lastEnabled))\n        }\n        return\n      case 'Tab':\n        closeList()\n        return\n      default:\n        break\n    }\n    if (isPrintable(event)) {\n      event.preventDefault()\n      typeAhead(event.key)\n    }\n  }\n\n  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (disabled) return\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault()\n        if (open && !event.altKey) move(1)\n        else if (!open) openList()\n        return\n      case 'ArrowUp':\n        event.preventDefault()\n        if (open) {\n          if (event.altKey) return\n          move(-1)\n        } else {\n          openList()\n        }\n        return\n      case 'Enter':\n        event.preventDefault()\n        if (open) choose(active)\n        else commitDraft()\n        return\n      case 'Escape':\n        event.preventDefault()\n        if (open) closeList()\n        else setDraft(labelText(selected?.label) || current)\n        return\n      case 'Tab':\n        commitDraft()\n        closeList()\n        return\n      default:\n        break\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = event.currentTarget.value\n    setDraft(next)\n    onInputChange?.(next)\n    if (!open && options.length > 0) openList()\n  }\n\n  const classes = ['vgui-select']\n  if (size === 'small') classes.push('vgui-select--small')\n  if (size === 'large') classes.push('vgui-select--large')\n  if (editable) classes.push('vgui-select--editable')\n  if (invalid) classes.push('vgui-select--invalid')\n  if (disabled) classes.push('vgui-select--disabled')\n  if (open) classes.push('vgui-select--open')\n  if (className) classes.push(className)\n\n  const showingPlaceholder = !selected && current === ''\n  const listId = open ? ids.list : undefined\n  const activeId = open ? ids.option(active) : undefined\n\n  return (\n    <div ref={ref} className={classes.join(' ')} {...rest}>\n      {editable ? (\n        <span className=\"vgui-select__field\">\n          <input\n            id={id}\n            className=\"vgui-select__input\"\n            type=\"text\"\n            role=\"combobox\"\n            autoComplete=\"off\"\n            spellCheck={false}\n            placeholder={showingPlaceholder ? placeholder : undefined}\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-controls={listId}\n            aria-activedescendant={activeId}\n            aria-autocomplete=\"list\"\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            value={draft}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onKeyDown={handleInputKeyDown}\n            onBlur={commitDraft}\n          />\n          {/* Not tabbable: the pattern keeps focus in the input, and the caret\n              is decorative to assistive technology. */}\n          <button\n            type=\"button\"\n            className=\"vgui-select__button\"\n            tabIndex={-1}\n            aria-hidden=\"true\"\n            disabled={disabled}\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={() => (open ? closeList() : openList())}\n          />\n        </span>\n      ) : (\n        <button\n          type=\"button\"\n          id={id}\n          className=\"vgui-select__trigger\"\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-haspopup=\"listbox\"\n          aria-controls={listId}\n          aria-activedescendant={activeId}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          disabled={disabled}\n          onClick={() => (open ? closeList() : openList())}\n          onKeyDown={handleKeyDown}\n        >\n          <span className=\"vgui-select__value\" data-placeholder={showingPlaceholder ? 'true' : undefined}>\n            {selected ? selected.label : current || placeholder}\n          </span>\n          <span className=\"vgui-select__button\" aria-hidden=\"true\" />\n        </button>\n      )}\n\n      {/* `Select` is not a native control, so form submission needs its own\n          hidden input. */}\n      {name ? <input type=\"hidden\" name={name} value={current} /> : null}\n\n      {open ? (\n        <ul\n          id={ids.list}\n          className=\"vgui-select__list vgui-scroll-surface\"\n          role=\"listbox\"\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n        >\n          {options.map((option, index) => (\n            <li\n              key={option.value}\n              id={ids.option(index)}\n              className=\"vgui-select__option\"\n              role=\"option\"\n              aria-selected={option.value === current}\n              aria-disabled={option.disabled || undefined}\n              data-active={index === active ? 'true' : undefined}\n              onMouseDown={(event) => event.preventDefault()}\n              onClick={() => choose(index)}\n            >\n              {option.label}\n            </li>\n          ))}\n        </ul>\n      ) : null}\n    </div>\n  )\n})\n\nSelect.displayName = 'Select'\n"],"mappings":";;;;;AA6CA,IAAI,WAAW;;AAGf,IAAM,aAAa,UAAsB,OAAO,UAAU,YAAY,OAAO,UAAU,WAAW,OAAO,KAAK,IAAI;AAElH,IAAM,eAAe,UACnB,MAAM,IAAI,WAAW,KAAK,CAAC,MAAM,UAAU,CAAC,MAAM,WAAW,CAAC,MAAM;;;;;;;;;;AAWtE,IAAa,SAAS,WAAwC,SAAS,OACrE,EACE,SACA,OACA,cACA,eACA,aACA,WAAW,OACX,eACA,OAAO,WACP,UAAU,OACV,WAAW,OACX,WACA,cAAc,WACd,mBAAmB,gBACnB,IACA,MACA,GAAG,QAEL,KACA;CACA,MAAM,CAAC,UAAU,eAAe,eAAe,gBAAgB,EAAE;CACjE,MAAM,UAAU,UAAU,KAAA,IAAY,QAAQ;CAE9C,MAAM,gBAAgB,QAAQ,WAAW,WAAW,OAAO,UAAU,OAAO;CAC5E,MAAM,WAAW,iBAAiB,IAAI,QAAQ,iBAAiB,KAAA;CAC/D,MAAM,eAAe,QAAQ,WAAW,WAAW,CAAC,OAAO,QAAQ;CACnE,MAAM,cAAc,QAAQ,QAAQ,MAAM,QAAQ,UAAW,OAAO,WAAW,OAAO,OAAQ,EAAE;CAEhG,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,QAAQ,aAAa,eAAgB,iBAAiB,IAAI,gBAAgB,KAAK,IAAI,GAAG,YAAY,CAAE;CAK3G,MAAM,CAAC,MAAM,WAAW,SAAS,OAAO;CACxC,MAAM,CAAC,OAAO,YAAY,eAAe,UAAU,UAAU,KAAK,KAAK,OAAO;CAC9E,IAAI,SAAS,SAAS;EACpB,QAAQ,OAAO;EACf,SAAS,UAAU,UAAU,KAAK,KAAK,OAAO;CAChD;CAEA,MAAM,CAAC,OAAO,eAAe;EAC3B,YAAY;EACZ,OAAO;GACL,MAAM,eAAe,SAAS;GAC9B,SAAS,UAAkB,eAAe,SAAS,UAAU;EAC/D;CACF,CAAC;CAED,MAAM,QAAQ,OAAO;EAAE,MAAM;EAAI,OAAO;CAAE,CAAC;CAE3C,gBAAgB;EACd,MAAM,SAAS,MAAM;EACrB,aAAa,OAAO,aAAa,OAAO,KAAK;CAC/C,GAAG,CAAC,CAAC;CAEL,MAAM,UAAU,SAAiB;EAC/B,IAAI,SAAS,SAAS;EACtB,IAAI,UAAU,KAAA,GAAW,YAAY,IAAI;EACzC,gBAAgB,IAAI;CACtB;CAEA,MAAM,YAAY,UAAmB;EACnC,IAAI,UAAU;EACd,UAAU,UAAU,iBAAiB,IAAI,gBAAgB,KAAK,IAAI,GAAG,YAAY,EAAE;EACnF,QAAQ,IAAI;CACd;CAEA,MAAM,kBAAkB,QAAQ,KAAK;CAErC,MAAM,QAAQ,SAAiB;EAC7B,IAAI,QAAQ,WAAW,GAAG;EAC1B,IAAI,QAAQ;EACZ,KAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,GAAG;GAC1C,SAAS,QAAQ,OAAO,QAAQ,UAAU,QAAQ;GAClD,IAAI,CAAC,QAAQ,MAAM,CAAC,UAAU;EAChC;EACA,UAAU,KAAK;EACf,IAAI,UAAU,SAAS,UAAU,QAAQ,MAAM,CAAC,KAAK,KAAK,QAAQ,MAAM,CAAC,KAAK;CAChF;CAEA,MAAM,UAAU,UAAkB;EAChC,MAAM,SAAS,QAAQ;EACvB,IAAI,CAAC,UAAU,OAAO,YAAY,UAAU;EAC5C,UAAU,KAAK;EACf,IAAI,UAAU,SAAS,UAAU,OAAO,KAAK,KAAK,OAAO,KAAK;EAC9D,OAAO,OAAO,KAAK;EACnB,UAAU;CACZ;;CAGA,MAAM,oBAAoB;EACxB,MAAM,QAAQ,QAAQ,MAAM,WAAW,UAAU,OAAO,KAAK,MAAM,KAAK;EACxE,OAAO,QAAQ,MAAM,QAAQ,KAAK;CACpC;CAEA,MAAM,aAAa,QAAgB;EACjC,MAAM,SAAS,MAAM;EACrB,OAAO,QAAQ;EACf,OAAO,aAAa,OAAO,KAAK;EAChC,OAAO,QAAQ,OAAO,iBAAiB;GACrC,OAAO,OAAO;EAChB,GAAG,GAAG;EACN,MAAM,SAAS,OAAO,KAAK,YAAY;EACvC,MAAM,QAAQ,QAAQ,WACnB,WAAW,CAAC,OAAO,aAAa,UAAU,OAAO,KAAK,KAAK,OAAO,MAAA,CAAO,YAAY,CAAC,CAAC,WAAW,MAAM,CAC3G;EACA,IAAI,QAAQ,GAAG;EACf,IAAI,MAAM,UAAU,KAAK;OACpB,OAAO,KAAK;CACnB;CAEA,MAAM,iBAAiB,UAAsC;EAC3D,IAAI,UAAU;EACd,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,QAAQ,CAAC,MAAM,QAAQ,KAAK,CAAC;SAC5B,IAAI,CAAC,MAAM,SAAS;IACzB;GACF,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,MAAM;KACR,IAAI,MAAM,QAAQ;KAClB,KAAK,EAAE;IACT,OACE,SAAS;IAEX;GACF,KAAK;GACL,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,MAAM,OAAO,MAAM;SAClB,SAAS;IACd;GACF,KAAK;IACH,IAAI,MAAM;KACR,MAAM,eAAe;KACrB,UAAU;IACZ;IACA;GACF,KAAK;IACH,IAAI,MAAM;KACR,MAAM,eAAe;KACrB,UAAU,KAAK,IAAI,GAAG,YAAY,CAAC;IACrC;IACA;GACF,KAAK;IACH,IAAI,MAAM;KACR,MAAM,eAAe;KACrB,UAAU,KAAK,IAAI,GAAG,WAAW,CAAC;IACpC;IACA;GACF,KAAK;IACH,UAAU;IACV;EAGJ;EACA,IAAI,YAAY,KAAK,GAAG;GACtB,MAAM,eAAe;GACrB,UAAU,MAAM,GAAG;EACrB;CACF;CAEA,MAAM,sBAAsB,UAA2C;EACrE,IAAI,UAAU;EACd,QAAQ,MAAM,KAAd;GACE,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,QAAQ,CAAC,MAAM,QAAQ,KAAK,CAAC;SAC5B,IAAI,CAAC,MAAM,SAAS;IACzB;GACF,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,MAAM;KACR,IAAI,MAAM,QAAQ;KAClB,KAAK,EAAE;IACT,OACE,SAAS;IAEX;GACF,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,MAAM,OAAO,MAAM;SAClB,YAAY;IACjB;GACF,KAAK;IACH,MAAM,eAAe;IACrB,IAAI,MAAM,UAAU;SACf,SAAS,UAAU,UAAU,KAAK,KAAK,OAAO;IACnD;GACF,KAAK;IACH,YAAY;IACZ,UAAU;IACV;EAGJ;CACF;CAEA,MAAM,qBAAqB,UAAyC;EAClE,MAAM,OAAO,MAAM,cAAc;EACjC,SAAS,IAAI;EACb,gBAAgB,IAAI;EACpB,IAAI,CAAC,QAAQ,QAAQ,SAAS,GAAG,SAAS;CAC5C;CAEA,MAAM,UAAU,CAAC,aAAa;CAC9B,IAAI,SAAS,SAAS,QAAQ,KAAK,oBAAoB;CACvD,IAAI,SAAS,SAAS,QAAQ,KAAK,oBAAoB;CACvD,IAAI,UAAU,QAAQ,KAAK,uBAAuB;CAClD,IAAI,SAAS,QAAQ,KAAK,sBAAsB;CAChD,IAAI,UAAU,QAAQ,KAAK,uBAAuB;CAClD,IAAI,MAAM,QAAQ,KAAK,mBAAmB;CAC1C,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,qBAAqB,CAAC,YAAY,YAAY;CACpD,MAAM,SAAS,OAAO,IAAI,OAAO,KAAA;CACjC,MAAM,WAAW,OAAO,IAAI,OAAO,MAAM,IAAI,KAAA;CAE7C,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAAjD,UAAA;GACG,WACC,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACE,oBAAC,SAAD;KACM;KACJ,WAAU;KACV,MAAK;KACL,MAAK;KACL,cAAa;KACb,YAAY;KACZ,aAAa,qBAAqB,cAAc,KAAA;KAChD,iBAAe;KACf,iBAAc;KACd,iBAAe;KACf,yBAAuB;KACvB,qBAAkB;KAClB,cAAY;KACZ,mBAAiB;KACjB,OAAO;KACG;KACV,UAAU;KACV,WAAW;KACX,QAAQ;IACT,CAAA,GAGD,oBAAC,UAAD;KACE,MAAK;KACL,WAAU;KACV,UAAU;KACV,eAAY;KACF;KACV,cAAc,UAAU,MAAM,eAAe;KAC7C,eAAgB,OAAO,UAAU,IAAI,SAAS;IAC/C,CAAA,CACG;GAEN,CAAA,IAAA,qBAAC,UAAD;IACE,MAAK;IACD;IACJ,WAAU;IACV,MAAK;IACL,iBAAe;IACf,iBAAc;IACd,iBAAe;IACf,yBAAuB;IACvB,cAAY;IACZ,mBAAiB;IACP;IACV,eAAgB,OAAO,UAAU,IAAI,SAAS;IAC9C,WAAW;IAbb,UAAA,CAeE,oBAAC,QAAD;KAAM,WAAU;KAAqB,oBAAkB,qBAAqB,SAAS,KAAA;KAClF,UAAA,WAAW,SAAS,QAAQ,WAAW;IACpC,CAAA,GACN,oBAAC,QAAD;KAAM,WAAU;KAAsB,eAAY;IAAQ,CAAA,CACpD;;GAKT,OAAO,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;GAAU,CAAA,IAAI;GAE7D,OACC,oBAAC,MAAD;IACE,IAAI,IAAI;IACR,WAAU;IACV,MAAK;IACL,cAAY;IACZ,mBAAiB;IAEhB,UAAA,QAAQ,KAAK,QAAQ,UACpB,oBAAC,MAAD;KAEE,IAAI,IAAI,OAAO,KAAK;KACpB,WAAU;KACV,MAAK;KACL,iBAAe,OAAO,UAAU;KAChC,iBAAe,OAAO,YAAY,KAAA;KAClC,eAAa,UAAU,SAAS,SAAS,KAAA;KACzC,cAAc,UAAU,MAAM,eAAe;KAC7C,eAAe,OAAO,KAAK;KAE1B,UAAA,OAAO;IACN,GAXG,OAAO,KAWV,CACL;GACC,CAAA,IACF;EACD;;AAET,CAAC;AAED,OAAO,cAAc"}

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

@@ -0,0 +1,3 @@
+export { Select } from './Select';
+export type { SelectOption, SelectProps } from './Select';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA"}

package/dist/components/Slider/Slider.css

@@ -0,0 +1,158 @@
+.vgui-slider {
+  /* The doc names these shorthand; the token layer spells the same metrics out. */
+  --vgui-slider-track-h: var(--vgui-slider-track-height);
+  --vgui-slider-thumb-w: var(--vgui-slider-thumb-width);
+  --vgui-slider-thumb-h: var(--vgui-slider-thumb-height);
+  --vgui-slider-tick-pitch: 19px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--vgui-min-target-size);
+  min-width: 200px;
+  padding-bottom: 12px;
+}
+
+.vgui-slider__input {
+  width: 100%;
+  background: none;
+  appearance: none;
+  cursor: pointer;
+  /* The range input has no text of its own; its only text is the attr() labels. */
+  color: var(--vgui-bevel-light-strong);
+}
+
+/* Endpoint labels, straight from the port: content: attr(min) / attr(max). */
+.vgui-slider__input::before,
+.vgui-slider__input::after {
+  position: absolute;
+  bottom: 0;
+  font-family: var(--vgui-font-mono);
+  font-size: var(--vgui-font-size-small);
+  line-height: 1;
+  pointer-events: none;
+}
+
+.vgui-slider__input::before {
+  left: 0;
+  content: attr(min);
+}
+
+.vgui-slider__input::after {
+  right: 0;
+  content: attr(max);
+}
+
+.vgui-slider__input:focus {
+  outline: none;
+}
+
+/* Draw the ring outside: a slider has no black interior to hide it in. */
+.vgui-slider__input:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: 2px;
+}
+
+.vgui-crisp .vgui-slider__input:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* The groove — INSET — with the port's 6px vertical margin. */
+.vgui-slider__input::-webkit-slider-runnable-track {
+  height: var(--vgui-slider-track-h);
+  margin: 6px 0;
+  background-color: var(--vgui-field-bg);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+}
+
+.vgui-slider__input::-moz-range-track,
+.vgui-slider__input::-moz-range-progress {
+  height: var(--vgui-slider-track-h);
+  margin: 6px 0;
+  background-color: var(--vgui-field-bg);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+}
+
+/* The thumb — RAISED, centred with `top` (which moves the hit area too). */
+.vgui-slider__input::-webkit-slider-thumb {
+  position: relative;
+  top: calc((var(--vgui-slider-thumb-h) - var(--vgui-slider-track-h)) / -2 - 1px);
+  box-sizing: border-box;
+  width: var(--vgui-slider-thumb-w);
+  height: var(--vgui-slider-thumb-h);
+  border-radius: 0;
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  appearance: none;
+}
+
+/* Gecko centres its own thumb, so no `top` offset here. */
+.vgui-slider__input::-moz-range-thumb {
+  box-sizing: border-box;
+  width: var(--vgui-slider-thumb-w);
+  height: var(--vgui-slider-thumb-h);
+  border-radius: 0;
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+}
+
+/* While dragged the thumb presses *into* the groove. */
+.vgui-slider__input:active::-webkit-slider-thumb,
+.vgui-slider__input:active::-moz-range-thumb {
+  border-top-color: var(--vgui-bevel-dark);
+  border-bottom-color: var(--vgui-bevel-light);
+  border-left-color: var(--vgui-bevel-dark);
+  border-right-color: var(--vgui-bevel-light);
+}
+
+/* No disabled thumb treatment exists upstream; drop it into the panel. */
+.vgui-slider__input:disabled::-webkit-slider-thumb,
+.vgui-slider__input:disabled::-moz-range-thumb {
+  border-color: var(--vgui-surface-dark);
+  background-color: var(--vgui-surface-dark);
+}
+
+/* Ticks: the sliderticks tile is 19x5, positioned bottom-left +2px. */
+.vgui-slider__input--ticks {
+  background-image: repeating-linear-gradient(
+    90deg,
+    var(--vgui-text-dim) 0 1px,
+    transparent 1px var(--vgui-slider-tick-pitch)
+  );
+  background-repeat: repeat-x;
+  background-position: bottom 2px left;
+  background-size: var(--vgui-slider-tick-pitch) 5px;
+}
+
+.vgui-slider__value {
+  flex: none;
+  padding-left: var(--vgui-field-inset);
+  font-family: var(--vgui-font-mono);
+  font-size: var(--vgui-font-size-small);
+  line-height: 1;
+  color: var(--vgui-text);
+  text-align: right;
+}
+
+/* 6x12 thumb, 3px track. */
+.vgui-slider--small {
+  --vgui-slider-track-h: 3px;
+  --vgui-slider-thumb-w: 6px;
+  --vgui-slider-thumb-h: 12px;
+
+  min-width: 140px;
+}

package/dist/components/Slider/Slider.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,26 @@
+import type { InputHTMLAttributes } from 'react';
+import './Slider.css';
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Inclusive minimum. Defaults to 0. */
+    min?: number;
+    /** Inclusive maximum. Defaults to 100. */
+    max?: number;
+    /** Step increment. Defaults to 1. */
+    step?: number;
+    /** Controlled value. Omit to let the slider keep its own. */
+    value?: number;
+    /** Called continuously while dragging. */
+    onValueChange?: (value: number) => void;
+    /** Called once when the drag ends — use this for expensive work. */
+    onValueCommit?: (value: number) => void;
+    /** Draw the sliderticks groove marks. */
+    ticks?: boolean;
+    /** Show the current value in a readout after the slider. */
+    showValue?: boolean;
+    /** How to format `showValue`. Also feeds `aria-valuetext`. */
+    formatValue?: (value: number) => string;
+    /** Small variant for dense property rows. */
+    small?: boolean;
+}
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/Slider/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAE7D,OAAO,cAAc,CAAA;AAErB,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/F,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,eAAO,MAAM,MAAM,0GAmGjB,CAAA"}

package/dist/components/Slider/Slider.js

@@ -0,0 +1,67 @@
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Slider.css";
+//#region src/components/Slider/Slider.tsx
+var Slider = forwardRef(function Slider({ className, min = 0, max = 100, step = 1, value, onValueChange, onValueCommit, ticks = false, showValue = false, formatValue, small = false, defaultValue, onChange, ...rest }, ref) {
+	const inputRef = useRef(null);
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue !== void 0 ? Number(defaultValue) : (min + max) / 2);
+	const currentValue = value !== void 0 ? value : uncontrolledValue;
+	const setRefs = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const commitRef = useRef(onValueCommit);
+	useEffect(() => {
+		commitRef.current = onValueCommit;
+	});
+	useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return void 0;
+		const handleNativeChange = () => {
+			const commit = commitRef.current;
+			if (commit) commit(Number(input.value));
+		};
+		input.addEventListener("change", handleNativeChange);
+		return () => input.removeEventListener("change", handleNativeChange);
+	}, []);
+	const handleChange = (event) => {
+		const next = Number(event.currentTarget.value);
+		if (value === void 0) setUncontrolledValue(next);
+		onValueChange?.(next);
+		onChange?.(event);
+	};
+	const rootClasses = ["vgui-slider"];
+	if (small) rootClasses.push("vgui-slider--small");
+	if (showValue) rootClasses.push("vgui-slider--with-value");
+	if (className) rootClasses.push(className);
+	const inputClasses = ["vgui-slider__input"];
+	if (ticks) inputClasses.push("vgui-slider__input--ticks");
+	const readout = formatValue ? formatValue(currentValue) : String(currentValue);
+	return /* @__PURE__ */ jsxs("span", {
+		className: rootClasses.join(" "),
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: setRefs,
+			className: inputClasses.join(" "),
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			"aria-valuetext": formatValue ? readout : void 0,
+			...rest,
+			type: "range",
+			min,
+			max,
+			step,
+			value: currentValue,
+			onChange: handleChange
+		}), showValue ? /* @__PURE__ */ jsx("span", {
+			className: "vgui-slider__value",
+			"aria-hidden": "true",
+			children: readout
+		}) : null]
+	});
+});
+Slider.displayName = "Slider";
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'\nimport type { ChangeEvent, InputHTMLAttributes } from 'react'\n\nimport './Slider.css'\n\nexport interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {\n  /** Inclusive minimum. Defaults to 0. */\n  min?: number\n  /** Inclusive maximum. Defaults to 100. */\n  max?: number\n  /** Step increment. Defaults to 1. */\n  step?: number\n  /** Controlled value. Omit to let the slider keep its own. */\n  value?: number\n  /** Called continuously while dragging. */\n  onValueChange?: (value: number) => void\n  /** Called once when the drag ends — use this for expensive work. */\n  onValueCommit?: (value: number) => void\n  /** Draw the sliderticks groove marks. */\n  ticks?: boolean\n  /** Show the current value in a readout after the slider. */\n  showValue?: boolean\n  /** How to format `showValue`. Also feeds `aria-valuetext`. */\n  formatValue?: (value: number) => string\n  /** Small variant for dense property rows. */\n  small?: boolean\n}\n\nexport const Slider = forwardRef<HTMLInputElement, SliderProps>(function Slider(\n  {\n    className,\n    min = 0,\n    max = 100,\n    step = 1,\n    value,\n    onValueChange,\n    onValueCommit,\n    ticks = false,\n    showValue = false,\n    formatValue,\n    small = false,\n    defaultValue,\n    onChange,\n    ...rest\n  },\n  ref,\n) {\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [uncontrolledValue, setUncontrolledValue] = useState(() =>\n    defaultValue !== undefined ? Number(defaultValue) : (min + max) / 2,\n  )\n  const currentValue = value !== undefined ? value : uncontrolledValue\n\n  const setRefs = useCallback(\n    (node: HTMLInputElement | null) => {\n      inputRef.current = node\n      if (typeof ref === 'function') {\n        ref(node)\n      } else if (ref) {\n        ref.current = node\n      }\n    },\n    [ref],\n  )\n\n  // Stays current without re-subscribing the native listener on every render.\n  const commitRef = useRef(onValueCommit)\n  useEffect(() => {\n    commitRef.current = onValueCommit\n  })\n\n  /*\n   * React's `onChange` on a range input *is* the native `input` event, so the\n   * commit half is read straight off the native `change` event instead.\n   */\n  useEffect(() => {\n    const input = inputRef.current\n    if (!input) return undefined\n    const handleNativeChange = () => {\n      const commit = commitRef.current\n      if (commit) commit(Number(input.value))\n    }\n    input.addEventListener('change', handleNativeChange)\n    return () => input.removeEventListener('change', handleNativeChange)\n  }, [])\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const next = Number(event.currentTarget.value)\n    if (value === undefined) setUncontrolledValue(next)\n    onValueChange?.(next)\n    onChange?.(event)\n  }\n\n  const rootClasses = ['vgui-slider']\n  if (small) rootClasses.push('vgui-slider--small')\n  if (showValue) rootClasses.push('vgui-slider--with-value')\n  if (className) rootClasses.push(className)\n\n  const inputClasses = ['vgui-slider__input']\n  if (ticks) inputClasses.push('vgui-slider__input--ticks')\n\n  const readout = formatValue ? formatValue(currentValue) : String(currentValue)\n\n  return (\n    <span className={rootClasses.join(' ')}>\n      <input\n        ref={setRefs}\n        className={inputClasses.join(' ')}\n        /* Explicit so the painted `attr()` labels match what is announced. */\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuetext={formatValue ? readout : undefined}\n        {...rest}\n        type=\"range\"\n        min={min}\n        max={max}\n        step={step}\n        value={currentValue}\n        onChange={handleChange}\n      />\n      {showValue ? (\n        <span className=\"vgui-slider__value\" aria-hidden=\"true\">\n          {readout}\n        </span>\n      ) : null}\n    </span>\n  )\n})\n\nSlider.displayName = 'Slider'\n"],"mappings":";;;;AA4BA,IAAa,SAAS,WAA0C,SAAS,OACvE,EACE,WACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,OACA,eACA,eACA,QAAQ,OACR,YAAY,OACZ,aACA,QAAQ,OACR,cACA,UACA,GAAG,QAEL,KACA;CACA,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,CAAC,mBAAmB,wBAAwB,eAChD,iBAAiB,KAAA,IAAY,OAAO,YAAY,KAAK,MAAM,OAAO,CACpE;CACA,MAAM,eAAe,UAAU,KAAA,IAAY,QAAQ;CAEnD,MAAM,UAAU,aACb,SAAkC;EACjC,SAAS,UAAU;EACnB,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAI,UAAU;CAElB,GACA,CAAC,GAAG,CACN;CAGA,MAAM,YAAY,OAAO,aAAa;CACtC,gBAAgB;EACd,UAAU,UAAU;CACtB,CAAC;CAMD,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO,OAAO,KAAA;EACnB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU;GACzB,IAAI,QAAQ,OAAO,OAAO,MAAM,KAAK,CAAC;EACxC;EACA,MAAM,iBAAiB,UAAU,kBAAkB;EACnD,aAAa,MAAM,oBAAoB,UAAU,kBAAkB;CACrE,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,UAAyC;EAC7D,MAAM,OAAO,OAAO,MAAM,cAAc,KAAK;EAC7C,IAAI,UAAU,KAAA,GAAW,qBAAqB,IAAI;EAClD,gBAAgB,IAAI;EACpB,WAAW,KAAK;CAClB;CAEA,MAAM,cAAc,CAAC,aAAa;CAClC,IAAI,OAAO,YAAY,KAAK,oBAAoB;CAChD,IAAI,WAAW,YAAY,KAAK,yBAAyB;CACzD,IAAI,WAAW,YAAY,KAAK,SAAS;CAEzC,MAAM,eAAe,CAAC,oBAAoB;CAC1C,IAAI,OAAO,aAAa,KAAK,2BAA2B;CAExD,MAAM,UAAU,cAAc,YAAY,YAAY,IAAI,OAAO,YAAY;CAE7E,OACE,qBAAC,QAAD;EAAM,WAAW,YAAY,KAAK,GAAG;EAArC,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,WAAW,aAAa,KAAK,GAAG;GAEhC,iBAAe;GACf,iBAAe;GACf,kBAAgB,cAAc,UAAU,KAAA;GACxC,GAAI;GACJ,MAAK;GACA;GACA;GACC;GACN,OAAO;GACP,UAAU;EACX,CAAA,GACA,YACC,oBAAC,QAAD;GAAM,WAAU;GAAqB,eAAY;GAC9C,UAAA;EACG,CAAA,IACJ,IACA;;AAEV,CAAC;AAED,OAAO,cAAc"}

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

@@ -0,0 +1,3 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Slider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA"}