@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import './Tabs.css';
+export interface TabSpec {
+    /** Stable identity, used for the id/aria-controls pair. */
+    id: string;
+    /** Visible tab label. */
+    label: string;
+    /** Panel content rendered when this tab is selected. */
+    content: ReactNode;
+    /** Renders a close affordance in the tab. */
+    closable?: boolean;
+    /** Called when the close affordance is activated. */
+    onClose?: () => void;
+    /** Renders as disabled and unselectable. */
+    disabled?: boolean;
+    /** Panel content is not rendered until first activation. */
+    lazy?: boolean;
+}
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Tabs in order. The first enabled tab is selected when uncontrolled. */
+    tabs: TabSpec[];
+    /** Controlled selection. Pair with onValueChange. */
+    value?: string;
+    /** Initial selection when uncontrolled. */
+    defaultValue?: string;
+    /** Called with the newly selected tab id. */
+    onValueChange?: (id: string) => void;
+    /** Selection follows focus, as VGUI's tab strip behaves. Defaults to true. */
+    activateOnFocus?: boolean;
+    /** Panel surface. 'clay' is the VGUI property-sheet interior. */
+    variant?: 'clay' | 'green';
+}
+export declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjF,OAAO,YAAY,CAAA;AAEnB,MAAM,WAAW,OAAO;IACtB,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAA;IACV,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,OAAO,EAAE,SAAS,CAAA;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,0EAA0E;IAC1E,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,8EAA8E;IAC9E,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iEAAiE;IACjE,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAC3B;AAED,eAAO,MAAM,IAAI,sGA+Lf,CAAA"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,140 @@
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Tabs.css";
+//#region src/components/Tabs/Tabs.tsx
+var Tabs = forwardRef(function Tabs({ tabs, value, defaultValue, onValueChange, activateOnFocus = true, variant = "clay", className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }, ref) {
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const [visited, setVisited] = useState(() => defaultValue ? [defaultValue] : []);
+	const baseId = useId();
+	const tabNodes = useRef(/* @__PURE__ */ new Map());
+	const firstEnabled = tabs.find((tab) => !tab.disabled)?.id;
+	const requestedId = value !== void 0 ? value : uncontrolledValue;
+	const requested = tabs.find((tab) => tab.id === requestedId);
+	const selectedId = requested && !requested.disabled ? requested.id : firstEnabled;
+	useEffect(() => {
+		if (selectedId && !visited.includes(selectedId)) setVisited((seen) => [...seen, selectedId]);
+	}, [selectedId, visited]);
+	const setTabNode = (id, node) => {
+		if (node) tabNodes.current.set(id, node);
+		else tabNodes.current.delete(id);
+	};
+	const selectTab = (nextId) => {
+		const tab = tabs.find((item) => item.id === nextId);
+		if (!tab || tab.disabled) return;
+		if (value === void 0) setUncontrolledValue(nextId);
+		if (nextId !== selectedId) onValueChange?.(nextId);
+	};
+	const focusTab = (nextId) => {
+		if (!nextId) return;
+		if (activateOnFocus) selectTab(nextId);
+		tabNodes.current.get(nextId)?.focus();
+	};
+	const handleKeyDown = (event) => {
+		const currentId = (event.target?.closest("[role=\"tab\"]"))?.dataset.tabId;
+		if (!currentId) return;
+		const enabledIds = tabs.filter((tab) => !tab.disabled).map((tab) => tab.id);
+		const index = enabledIds.indexOf(currentId);
+		if (index === -1) return;
+		switch (event.key) {
+			case "ArrowRight":
+				event.preventDefault();
+				focusTab(enabledIds[(index + 1) % enabledIds.length]);
+				break;
+			case "ArrowLeft":
+				event.preventDefault();
+				focusTab(enabledIds[(index - 1 + enabledIds.length) % enabledIds.length]);
+				break;
+			case "Home":
+				event.preventDefault();
+				focusTab(enabledIds[0]);
+				break;
+			case "End":
+				event.preventDefault();
+				focusTab(enabledIds[enabledIds.length - 1]);
+				break;
+			case "Delete":
+				event.preventDefault();
+				tabs.find((tab) => tab.id === currentId)?.onClose?.();
+		}
+	};
+	const rootClasses = ["vgui-tabs", `vgui-tabs--${variant}`];
+	if (tabs.some((tab) => tab.closable)) rootClasses.push("vgui-tabs--closable");
+	if (className) rootClasses.push(className);
+	const panelClasses = ["vgui-tabs__panel", `vgui-tabs__panel--${variant}`];
+	return /* @__PURE__ */ jsxs("div", {
+		className: rootClasses.join(" "),
+		ref,
+		...rest,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "vgui-tabs__strip",
+			role: "tablist",
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			onKeyDown: handleKeyDown,
+			children: tabs.map((tab) => {
+				const isSelected = tab.id === selectedId;
+				const tabClasses = ["vgui-tabs__tab"];
+				if (isSelected) tabClasses.push("vgui-tabs__tab--selected");
+				if (tab.disabled) tabClasses.push("vgui-tabs__tab--disabled");
+				const shared = {
+					className: tabClasses.join(" "),
+					id: `${baseId}-tab-${tab.id}`,
+					role: "tab",
+					"aria-selected": isSelected,
+					"aria-controls": `${baseId}-panel-${tab.id}`,
+					"aria-disabled": tab.disabled || void 0,
+					"aria-keyshortcuts": tab.closable && !tab.disabled ? "Delete" : void 0,
+					tabIndex: isSelected ? 0 : -1,
+					"data-tab-id": tab.id,
+					onClick: () => selectTab(tab.id)
+				};
+				const label = /* @__PURE__ */ jsx("span", {
+					className: "vgui-tabs__label",
+					children: tab.label
+				});
+				if (!tab.closable) return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: tab.disabled,
+					...shared,
+					ref: (node) => {
+						setTabNode(tab.id, node);
+					},
+					children: label
+				}, tab.id);
+				return /* @__PURE__ */ jsxs("div", {
+					...shared,
+					ref: (node) => {
+						setTabNode(tab.id, node);
+					},
+					children: [label, tab.disabled ? null : /* @__PURE__ */ jsx("span", {
+						className: "vgui-tabs__close",
+						"aria-hidden": "true",
+						title: `Close ${tab.label} tab`,
+						onClick: (event) => {
+							event.stopPropagation();
+							tab.onClose?.();
+						},
+						children: "✕"
+					})]
+				}, tab.id);
+			})
+		}), tabs.map((tab) => {
+			const isSelected = tab.id === selectedId;
+			if (!(!tab.lazy || isSelected || visited.includes(tab.id))) return null;
+			return /* @__PURE__ */ jsx("div", {
+				className: panelClasses.join(" "),
+				role: "tabpanel",
+				id: `${baseId}-panel-${tab.id}`,
+				"aria-labelledby": `${baseId}-tab-${tab.id}`,
+				tabIndex: 0,
+				hidden: !isSelected,
+				children: tab.content
+			}, tab.id);
+		})]
+	});
+});
+Tabs.displayName = "Tabs";
+//#endregion
+export { Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, useState } from 'react'\nimport type { HTMLAttributes, KeyboardEvent, MouseEvent, ReactNode } from 'react'\n\nimport './Tabs.css'\n\nexport interface TabSpec {\n  /** Stable identity, used for the id/aria-controls pair. */\n  id: string\n  /** Visible tab label. */\n  label: string\n  /** Panel content rendered when this tab is selected. */\n  content: ReactNode\n  /** Renders a close affordance in the tab. */\n  closable?: boolean\n  /** Called when the close affordance is activated. */\n  onClose?: () => void\n  /** Renders as disabled and unselectable. */\n  disabled?: boolean\n  /** Panel content is not rendered until first activation. */\n  lazy?: boolean\n}\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tabs in order. The first enabled tab is selected when uncontrolled. */\n  tabs: TabSpec[]\n  /** Controlled selection. Pair with onValueChange. */\n  value?: string\n  /** Initial selection when uncontrolled. */\n  defaultValue?: string\n  /** Called with the newly selected tab id. */\n  onValueChange?: (id: string) => void\n  /** Selection follows focus, as VGUI's tab strip behaves. Defaults to true. */\n  activateOnFocus?: boolean\n  /** Panel surface. 'clay' is the VGUI property-sheet interior. */\n  variant?: 'clay' | 'green'\n}\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  {\n    tabs,\n    value,\n    defaultValue,\n    onValueChange,\n    activateOnFocus = true,\n    variant = 'clay',\n    className,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    ...rest\n  },\n  ref,\n) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue)\n  const [visited, setVisited] = useState<string[]>(() => (defaultValue ? [defaultValue] : []))\n  const baseId = useId()\n  const tabNodes = useRef(new Map<string, HTMLButtonElement | HTMLDivElement>())\n\n  const firstEnabled = tabs.find((tab) => !tab.disabled)?.id\n  const requestedId = value !== undefined ? value : uncontrolledValue\n  const requested = tabs.find((tab) => tab.id === requestedId)\n  const selectedId = requested && !requested.disabled ? requested.id : firstEnabled\n\n  // A lazy panel stays mounted once it has been shown, so switching away and\n  // back does not throw away scroll position or form state.\n  useEffect(() => {\n    if (selectedId && !visited.includes(selectedId)) {\n      setVisited((seen) => [...seen, selectedId])\n    }\n  }, [selectedId, visited])\n\n  const setTabNode = (id: string, node: HTMLButtonElement | HTMLDivElement | null) => {\n    if (node) {\n      tabNodes.current.set(id, node)\n    } else {\n      tabNodes.current.delete(id)\n    }\n  }\n\n  const selectTab = (nextId: string) => {\n    const tab = tabs.find((item) => item.id === nextId)\n    if (!tab || tab.disabled) return\n    if (value === undefined) setUncontrolledValue(nextId)\n    if (nextId !== selectedId) onValueChange?.(nextId)\n  }\n\n  const focusTab = (nextId: string | undefined) => {\n    if (!nextId) return\n    if (activateOnFocus) selectTab(nextId)\n    tabNodes.current.get(nextId)?.focus()\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const current = (event.target as HTMLElement | null)?.closest<HTMLElement>('[role=\"tab\"]')\n    const currentId = current?.dataset.tabId\n    if (!currentId) return\n    const enabledIds = tabs.filter((tab) => !tab.disabled).map((tab) => tab.id)\n    const index = enabledIds.indexOf(currentId)\n    if (index === -1) return\n\n    switch (event.key) {\n      case 'ArrowRight':\n        event.preventDefault()\n        focusTab(enabledIds[(index + 1) % enabledIds.length])\n        break\n      case 'ArrowLeft':\n        event.preventDefault()\n        focusTab(enabledIds[(index - 1 + enabledIds.length) % enabledIds.length])\n        break\n      case 'Home':\n        event.preventDefault()\n        focusTab(enabledIds[0])\n        break\n      case 'End':\n        event.preventDefault()\n        focusTab(enabledIds[enabledIds.length - 1])\n        break\n      case 'Delete':\n        event.preventDefault()\n        tabs.find((tab) => tab.id === currentId)?.onClose?.()\n        break\n      default:\n        break\n    }\n  }\n\n  const rootClasses = ['vgui-tabs', `vgui-tabs--${variant}`]\n  if (tabs.some((tab) => tab.closable)) rootClasses.push('vgui-tabs--closable')\n  if (className) rootClasses.push(className)\n\n  const panelClasses = ['vgui-tabs__panel', `vgui-tabs__panel--${variant}`]\n\n  return (\n    <div className={rootClasses.join(' ')} ref={ref} {...rest}>\n      <div\n        className=\"vgui-tabs__strip\"\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        onKeyDown={handleKeyDown}\n      >\n        {tabs.map((tab) => {\n          const isSelected = tab.id === selectedId\n          const tabClasses = ['vgui-tabs__tab']\n          if (isSelected) tabClasses.push('vgui-tabs__tab--selected')\n          if (tab.disabled) tabClasses.push('vgui-tabs__tab--disabled')\n\n          const shared = {\n            className: tabClasses.join(' '),\n            id: `${baseId}-tab-${tab.id}`,\n            role: 'tab' as const,\n            'aria-selected': isSelected,\n            'aria-controls': `${baseId}-panel-${tab.id}`,\n            'aria-disabled': tab.disabled || undefined,\n            'aria-keyshortcuts': tab.closable && !tab.disabled ? 'Delete' : undefined,\n            tabIndex: isSelected ? 0 : -1,\n            'data-tab-id': tab.id,\n            onClick: () => selectTab(tab.id),\n          }\n\n          const label = <span className=\"vgui-tabs__label\">{tab.label}</span>\n\n          if (!tab.closable) {\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                disabled={tab.disabled}\n                {...shared}\n                ref={(node) => {\n                  setTabNode(tab.id, node)\n                }}\n              >\n                {label}\n              </button>\n            )\n          }\n\n          // A `role=\"tab\"` element has presentational children, so the close\n          // affordance must not be focusable or it breaks the tab's own\n          // interaction model (axe `nested-interactive`). Keyboard users close\n          // the tab with Delete, announced through `aria-keyshortcuts`.\n          return (\n            <div\n              key={tab.id}\n              {...shared}\n              ref={(node) => {\n                setTabNode(tab.id, node)\n              }}\n            >\n              {label}\n              {tab.disabled ? null : (\n                <span\n                  className=\"vgui-tabs__close\"\n                  aria-hidden=\"true\"\n                  title={`Close ${tab.label} tab`}\n                  onClick={(event: MouseEvent<HTMLSpanElement>) => {\n                    event.stopPropagation()\n                    tab.onClose?.()\n                  }}\n                >\n                  ✕\n                </span>\n              )}\n            </div>\n          )\n        })}\n      </div>\n\n      {tabs.map((tab) => {\n        const isSelected = tab.id === selectedId\n        const rendered = !tab.lazy || isSelected || visited.includes(tab.id)\n        if (!rendered) return null\n        return (\n          <div\n            key={tab.id}\n            className={panelClasses.join(' ')}\n            role=\"tabpanel\"\n            id={`${baseId}-panel-${tab.id}`}\n            aria-labelledby={`${baseId}-tab-${tab.id}`}\n            tabIndex={0}\n            hidden={!isSelected}\n          >\n            {tab.content}\n          </div>\n        )\n      })}\n    </div>\n  )\n})\n\nTabs.displayName = 'Tabs'\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/TextInput/TextInput.css

@@ -0,0 +1,133 @@
+/*
+ * Green Steam text field — VGUI `TextEntry` (docs/components/TextInput.md).
+ *
+ * Two things define the look and are easy to "improve" away:
+ *
+ *   1. The interior is genuinely black rather than `--vgui-surface`. It is the
+ *      darkest surface in the theme, so the value text on it reaches 15.31:1 —
+ *      the best contrast pairing in the library.
+ *   2. The inset is `4 0 4 0`: horizontal padding only, which is what makes a
+ *      VGUI field feel tight.
+ *
+ * The black interior is read through `--vgui-field-bg`, the token
+ * docs/components/TextInput.md asks the token layer to add. No literal fallback
+ * is declared here: components in this library never contain a colour value.
+ */
+
+.vgui-text-input {
+  /* Component-local metrics. The palette is never declared locally. */
+  --vgui-text-input-height: 19px;
+  --vgui-text-input-icon-inset: 20px;
+  --vgui-text-input-suffix-inset: 28px;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  font: inherit;
+}
+
+.vgui-text-input__field {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--vgui-text-input-height);
+  padding: 0 var(--vgui-field-inset);
+  font: inherit;
+  color: var(--vgui-text);
+  background-color: var(--vgui-field-bg);
+  /* The UA draws a rounded, inset native field; the bevel replaces it. */
+  appearance: none;
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  /* Explicit because `appearance: none` still leaves Safari rounding corners. */
+  border-radius: 0;
+  caret-color: var(--vgui-text);
+}
+
+.vgui-text-input__field::placeholder {
+  color: var(--vgui-text-dim);
+  /* Firefox dims placeholders to 0.54 by default. */
+  opacity: 1;
+}
+
+/*
+ * Valve's ring for a field is `1px dotted black`, drawn over an interior where
+ * it is invisible rather than merely low-contrast. The accent ring is the
+ * default; the faithful one stays reachable through `.vgui-crisp`.
+ */
+.vgui-text-input__field:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-text-input__field:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* `#232421` on the accent is 4.39:1; the theme's body colour is only 2.59:1. */
+.vgui-text-input__field::selection {
+  background-color: var(--vgui-selection-bg);
+  color: var(--vgui-selection-text);
+}
+
+/* Read-only stays legible and selectable; disabled is not submitted at all. */
+.vgui-text-input__field:read-only {
+  color: var(--vgui-text-muted);
+}
+
+.vgui-text-input__field:disabled {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+  cursor: not-allowed;
+}
+
+.vgui-text-input--invalid .vgui-text-input__field {
+  border-top-color: var(--vgui-danger);
+  border-left-color: var(--vgui-danger);
+}
+
+.vgui-text-input--large .vgui-text-input__field {
+  min-height: var(--vgui-control-height);
+}
+
+.vgui-text-input__adornment {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  color: var(--vgui-text-dim);
+  pointer-events: none;
+}
+
+.vgui-text-input__adornment--start {
+  left: var(--vgui-field-inset);
+}
+
+.vgui-text-input__adornment--end {
+  right: var(--vgui-field-inset);
+}
+
+.vgui-text-input--with-icon .vgui-text-input__field {
+  padding-left: var(--vgui-text-input-icon-inset);
+}
+
+.vgui-text-input--with-suffix .vgui-text-input__field {
+  padding-right: var(--vgui-text-input-suffix-inset);
+}
+
+/*
+ * `--clay` is a hook rather than a repaint: the field itself stays black inside
+ * a property sheet and only the chrome around it turns grey, so the class
+ * declares nothing beyond the adornment glyph colour.
+ */
+.vgui-text-input--clay .vgui-text-input__adornment {
+  color: var(--vgui-clay-glyph);
+}
+
+.vgui-text-input--clay .vgui-text-input__field:disabled {
+  color: var(--vgui-clay-glyph-dim);
+  text-shadow: none;
+}

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

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

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,16 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import './TextInput.css';
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Field height: `default` is 19px, `large` is 25px and lines up with a Button. */
+    size?: 'default' | 'large';
+    /** Glyph shown inside the field's leading edge. */
+    icon?: ReactNode | string;
+    /** Text shown inside the field's trailing edge, e.g. a unit. */
+    suffix?: ReactNode;
+    /** Draw the invalid bevel. Does not set aria-invalid. */
+    invalid?: boolean;
+    /** Grey property-sheet chrome. */
+    clay?: boolean;
+}
+export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=TextInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,iBAAiB,CAAA;AAExB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACzF,mFAAmF;IACnF,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC1B,mDAAmD;IACnD,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB,gEAAgE;IAChE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kCAAkC;IAClC,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,eAAO,MAAM,SAAS,6GAiCpB,CAAA"}

package/dist/components/TextInput/TextInput.js

@@ -0,0 +1,38 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./TextInput.css";
+//#region src/components/TextInput/TextInput.tsx
+var TextInput = forwardRef(function TextInput({ className, size = "default", icon, suffix, invalid = false, clay = false, ...rest }, ref) {
+	const classes = ["vgui-text-input"];
+	if (size === "large") classes.push("vgui-text-input--large");
+	if (icon != null) classes.push("vgui-text-input--with-icon");
+	if (suffix != null) classes.push("vgui-text-input--with-suffix");
+	if (invalid) classes.push("vgui-text-input--invalid");
+	if (clay) classes.push("vgui-text-input--clay");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("span", {
+		className: classes.join(" "),
+		children: [
+			icon != null ? /* @__PURE__ */ jsx("span", {
+				className: "vgui-text-input__adornment vgui-text-input__adornment--start",
+				"aria-hidden": "true",
+				children: icon
+			}) : null,
+			/* @__PURE__ */ jsx("input", {
+				ref,
+				className: "vgui-text-input__field",
+				...rest
+			}),
+			suffix != null ? /* @__PURE__ */ jsx("span", {
+				className: "vgui-text-input__adornment vgui-text-input__adornment--end",
+				"aria-hidden": "true",
+				children: suffix
+			}) : null
+		]
+	});
+});
+TextInput.displayName = "TextInput";
+//#endregion
+export { TextInput };
+
+//# sourceMappingURL=TextInput.js.map

package/dist/components/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","names":[],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { InputHTMLAttributes, ReactNode } from 'react'\n\nimport './TextInput.css'\n\nexport interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n  /** Field height: `default` is 19px, `large` is 25px and lines up with a Button. */\n  size?: 'default' | 'large'\n  /** Glyph shown inside the field's leading edge. */\n  icon?: ReactNode | string\n  /** Text shown inside the field's trailing edge, e.g. a unit. */\n  suffix?: ReactNode\n  /** Draw the invalid bevel. Does not set aria-invalid. */\n  invalid?: boolean\n  /** Grey property-sheet chrome. */\n  clay?: boolean\n}\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(\n  { className, size = 'default', icon, suffix, invalid = false, clay = false, ...rest },\n  ref,\n) {\n  const classes = ['vgui-text-input']\n  if (size === 'large') classes.push('vgui-text-input--large')\n  if (icon != null) classes.push('vgui-text-input--with-icon')\n  if (suffix != null) classes.push('vgui-text-input--with-suffix')\n  if (invalid) classes.push('vgui-text-input--invalid')\n  if (clay) classes.push('vgui-text-input--clay')\n  if (className) classes.push(className)\n\n  return (\n    <span className={classes.join(' ')}>\n      {icon != null ? (\n        <span\n          className=\"vgui-text-input__adornment vgui-text-input__adornment--start\"\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n      ) : null}\n      <input ref={ref} className=\"vgui-text-input__field\" {...rest} />\n      {suffix != null ? (\n        <span\n          className=\"vgui-text-input__adornment vgui-text-input__adornment--end\"\n          aria-hidden=\"true\"\n        >\n          {suffix}\n        </span>\n      ) : null}\n    </span>\n  )\n})\n\nTextInput.displayName = 'TextInput'\n"],"mappings":";;;;AAkBA,IAAa,YAAY,WAA6C,SAAS,UAC7E,EAAE,WAAW,OAAO,WAAW,MAAM,QAAQ,UAAU,OAAO,OAAO,OAAO,GAAG,QAC/E,KACA;CACA,MAAM,UAAU,CAAC,iBAAiB;CAClC,IAAI,SAAS,SAAS,QAAQ,KAAK,wBAAwB;CAC3D,IAAI,QAAQ,MAAM,QAAQ,KAAK,4BAA4B;CAC3D,IAAI,UAAU,MAAM,QAAQ,KAAK,8BAA8B;CAC/D,IAAI,SAAS,QAAQ,KAAK,0BAA0B;CACpD,IAAI,MAAM,QAAQ,KAAK,uBAAuB;CAC9C,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,QAAD;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAjC,UAAA;GACG,QAAQ,OACP,oBAAC,QAAD;IACE,WAAU;IACV,eAAY;IAEX,UAAA;GACG,CAAA,IACJ;GACJ,oBAAC,SAAD;IAAY;IAAK,WAAU;IAAyB,GAAI;GAAO,CAAA;GAC9D,UAAU,OACT,oBAAC,QAAD;IACE,WAAU;IACV,eAAY;IAEX,UAAA;GACG,CAAA,IACJ;EACA;;AAEV,CAAC;AAED,UAAU,cAAc"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA"}

package/dist/components/Textarea/Textarea.css

@@ -0,0 +1,121 @@
+/*
+ * Green Steam multi-line text field — VGUI `TextEntry` with
+ * `SetMultiline(true)` (docs/components/Textarea.md).
+ *
+ * The chrome is identical to TextInput: black interior, inset bevel, 1px caret.
+ * Everything else is behavioural, which is why there is no separate VGUI class.
+ */
+
+.vgui-textarea {
+  --vgui-textarea-min-height: 60px;
+
+  position: relative;
+  display: block;
+}
+
+.vgui-textarea__field {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  /* `rows="1"` on a 200%-zoom browser is a sliver, so a floor is always kept. */
+  min-height: var(--vgui-textarea-min-height);
+  /* The `4 0 4 0` inset, plus 2px of vertical breathing room. */
+  padding: 2px var(--vgui-field-inset);
+  font: inherit;
+  line-height: var(--vgui-line-height);
+  color: var(--vgui-text);
+  background-color: var(--vgui-field-bg);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-radius: 0;
+  /* Vertical only: a horizontally resizable field reflows the whole page. */
+  resize: vertical;
+  overflow: auto;
+}
+
+.vgui-textarea__field::placeholder {
+  color: var(--vgui-text-dim);
+  opacity: 1;
+}
+
+.vgui-textarea__field::selection {
+  background-color: var(--vgui-selection-bg);
+  color: var(--vgui-selection-text);
+}
+
+/*
+ * The worst case for the Valve ring: the dotted black outline is drawn over the
+ * field's own black interior, where it is literally invisible. The accent ring
+ * is the default and the faithful one is reachable through `.vgui-crisp`.
+ */
+.vgui-textarea__field:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-textarea__field:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+.vgui-textarea__field:read-only {
+  color: var(--vgui-text-muted);
+}
+
+.vgui-textarea__field:disabled {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+  cursor: not-allowed;
+}
+
+.vgui-textarea--invalid .vgui-textarea__field {
+  border-top-color: var(--vgui-danger);
+  border-left-color: var(--vgui-danger);
+}
+
+/* `--fixed`: height comes from `rows` alone. */
+.vgui-textarea--fixed .vgui-textarea__field {
+  resize: none;
+}
+
+/*
+ * `--auto-grow` height is set by JS from `scrollHeight`; `max-height` and
+ * `overflow-y` are the fallback for tall content. `height: auto` is deliberately
+ * not declared here — the script needs `auto` only for the measurement pass.
+ */
+.vgui-textarea--auto-grow .vgui-textarea__field {
+  resize: none;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.vgui-textarea--mono .vgui-textarea__field {
+  font-family: var(--vgui-font-mono);
+  font-size: var(--vgui-font-size-small);
+}
+
+/*
+ * The counter overlays the field's trailing corner rather than taking a row of
+ * its own: a VGUI property sheet has no space for one, and `aria-hidden` means
+ * it never has to be read out.
+ */
+.vgui-textarea__count {
+  position: absolute;
+  right: var(--vgui-field-inset);
+  bottom: 2px;
+  font-size: var(--vgui-font-size-small);
+  color: var(--vgui-text-dim);
+  pointer-events: none;
+}
+
+/* `--clay` has no prop of its own; callers opt in through `className`. */
+.vgui-textarea--clay .vgui-textarea__field:disabled {
+  color: var(--vgui-clay-glyph-dim);
+  text-shadow: none;
+}
+
+.vgui-textarea--clay .vgui-textarea__count {
+  color: var(--vgui-clay-glyph-dim);
+}

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

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

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,21 @@
+import type { TextareaHTMLAttributes } from 'react';
+import './Textarea.css';
+import '../../styles/scrollbars.css';
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
+    /** Visible rows. Sets `rows`; the 60px `min-height` still applies. */
+    rows?: number;
+    /** Grow to fit content instead of scrolling, up to `maxHeight`. */
+    autoGrow?: boolean;
+    /** Cap for `autoGrow`, in pixels. Defaults to 240. */
+    maxHeight?: number;
+    /** Prevent the user from resizing the field. Defaults to `vertical`. */
+    resize?: 'none' | 'vertical';
+    /** Monospaced text, for console and config content. */
+    mono?: boolean;
+    /** Show a live character count, expressed against `maxLength` when given. */
+    showCount?: boolean;
+    /** Render the invalid border. Does not set aria-invalid. */
+    invalid?: boolean;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,sBAAsB,EAAE,MAAM,OAAO,CAAA;AAE/D,OAAO,gBAAgB,CAAA;AACvB,OAAO,6BAA6B,CAAA;AAEpC,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IAClG,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC5B,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,QAAQ,+GAqFnB,CAAA"}

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,61 @@
+import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "../../styles/scrollbars.css";
+import "./Textarea.css";
+//#region src/components/Textarea/Textarea.tsx
+var Textarea = forwardRef(function Textarea({ className, rows, autoGrow = false, maxHeight = 240, resize = "vertical", mono = false, showCount = false, invalid = false, value, defaultValue, maxLength, onInput, style, ...rest }, ref) {
+	const fieldRef = useRef(null);
+	const [uncontrolledLength, setUncontrolledLength] = useState(() => String(defaultValue ?? "").length);
+	const setRefs = useCallback((node) => {
+		fieldRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const resizeToContent = useCallback(() => {
+		const field = fieldRef.current;
+		if (!field) return;
+		field.style.height = "auto";
+		field.style.height = `${Math.min(field.scrollHeight, maxHeight)}px`;
+	}, [maxHeight]);
+	useLayoutEffect(() => {
+		if (autoGrow) resizeToContent();
+	});
+	const classes = ["vgui-textarea"];
+	if (resize === "none") classes.push("vgui-textarea--fixed");
+	if (autoGrow) classes.push("vgui-textarea--auto-grow");
+	if (mono) classes.push("vgui-textarea--mono");
+	if (invalid) classes.push("vgui-textarea--invalid");
+	if (className) classes.push(className);
+	const length = value !== void 0 ? String(value).length : uncontrolledLength;
+	const handleInput = (event) => {
+		if (value === void 0) setUncontrolledLength(event.currentTarget.value.length);
+		if (autoGrow) resizeToContent();
+		onInput?.(event);
+	};
+	return /* @__PURE__ */ jsxs("span", {
+		className: classes.join(" "),
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: setRefs,
+			className: "vgui-textarea__field vgui-scroll-surface",
+			rows,
+			value,
+			defaultValue,
+			maxLength,
+			style: autoGrow ? {
+				...style,
+				maxHeight
+			} : style,
+			onInput: handleInput,
+			...rest
+		}), showCount ? /* @__PURE__ */ jsx("span", {
+			className: "vgui-textarea__count",
+			"aria-hidden": "true",
+			children: maxLength != null ? `${length} / ${maxLength}` : length
+		}) : null]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Textarea };
+
+//# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react'\nimport type { InputEvent, TextareaHTMLAttributes } from 'react'\n\nimport './Textarea.css'\nimport '../../styles/scrollbars.css'\n\nexport interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {\n  /** Visible rows. Sets `rows`; the 60px `min-height` still applies. */\n  rows?: number\n  /** Grow to fit content instead of scrolling, up to `maxHeight`. */\n  autoGrow?: boolean\n  /** Cap for `autoGrow`, in pixels. Defaults to 240. */\n  maxHeight?: number\n  /** Prevent the user from resizing the field. Defaults to `vertical`. */\n  resize?: 'none' | 'vertical'\n  /** Monospaced text, for console and config content. */\n  mono?: boolean\n  /** Show a live character count, expressed against `maxLength` when given. */\n  showCount?: boolean\n  /** Render the invalid border. Does not set aria-invalid. */\n  invalid?: boolean\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  {\n    className,\n    rows,\n    autoGrow = false,\n    maxHeight = 240,\n    resize = 'vertical',\n    mono = false,\n    showCount = false,\n    invalid = false,\n    value,\n    defaultValue,\n    maxLength,\n    onInput,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const fieldRef = useRef<HTMLTextAreaElement>(null)\n  const [uncontrolledLength, setUncontrolledLength] = useState(\n    () => String(defaultValue ?? '').length,\n  )\n\n  const setRefs = useCallback(\n    (node: HTMLTextAreaElement | null) => {\n      fieldRef.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  const resizeToContent = useCallback(() => {\n    const field = fieldRef.current\n    if (!field) return\n    // Mirror `scrollHeight`: it is only meaningful once the box is unconstrained.\n    field.style.height = 'auto'\n    field.style.height = `${Math.min(field.scrollHeight, maxHeight)}px`\n  }, [maxHeight])\n\n  // Runs after every render so a controlled value resizes the box too. An\n  // uncontrolled field does not re-render, hence the `onInput` hook below.\n  useLayoutEffect(() => {\n    if (autoGrow) resizeToContent()\n  })\n\n  const classes = ['vgui-textarea']\n  if (resize === 'none') classes.push('vgui-textarea--fixed')\n  if (autoGrow) classes.push('vgui-textarea--auto-grow')\n  if (mono) classes.push('vgui-textarea--mono')\n  if (invalid) classes.push('vgui-textarea--invalid')\n  if (className) classes.push(className)\n\n  const length = value !== undefined ? String(value).length : uncontrolledLength\n\n  const handleInput = (event: InputEvent<HTMLTextAreaElement>) => {\n    if (value === undefined) setUncontrolledLength(event.currentTarget.value.length)\n    if (autoGrow) resizeToContent()\n    onInput?.(event)\n  }\n\n  return (\n    <span className={classes.join(' ')}>\n      <textarea\n        ref={setRefs}\n        className=\"vgui-textarea__field vgui-scroll-surface\"\n        rows={rows}\n        value={value}\n        defaultValue={defaultValue}\n        maxLength={maxLength}\n        style={autoGrow ? { ...style, maxHeight } : style}\n        onInput={handleInput}\n        {...rest}\n      />\n      {showCount ? (\n        <span className=\"vgui-textarea__count\" aria-hidden=\"true\">\n          {maxLength != null ? `${length} / ${maxLength}` : length}\n        </span>\n      ) : null}\n    </span>\n  )\n})\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;;;AAuBA,IAAa,WAAW,WAA+C,SAAS,SAC9E,EACE,WACA,MACA,WAAW,OACX,YAAY,KACZ,SAAS,YACT,OAAO,OACP,YAAY,OACZ,UAAU,OACV,OACA,cACA,WACA,SACA,OACA,GAAG,QAEL,KACA;CACA,MAAM,WAAW,OAA4B,IAAI;CACjD,MAAM,CAAC,oBAAoB,yBAAyB,eAC5C,OAAO,gBAAgB,EAAE,CAAC,CAAC,MACnC;CAEA,MAAM,UAAU,aACb,SAAqC;EACpC,SAAS,UAAU;EACnB,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAI,UAAU;CAElB,GACA,CAAC,GAAG,CACN;CAEA,MAAM,kBAAkB,kBAAkB;EACxC,MAAM,QAAQ,SAAS;EACvB,IAAI,CAAC,OAAO;EAEZ,MAAM,MAAM,SAAS;EACrB,MAAM,MAAM,SAAS,GAAG,KAAK,IAAI,MAAM,cAAc,SAAS,EAAE;CAClE,GAAG,CAAC,SAAS,CAAC;CAId,sBAAsB;EACpB,IAAI,UAAU,gBAAgB;CAChC,CAAC;CAED,MAAM,UAAU,CAAC,eAAe;CAChC,IAAI,WAAW,QAAQ,QAAQ,KAAK,sBAAsB;CAC1D,IAAI,UAAU,QAAQ,KAAK,0BAA0B;CACrD,IAAI,MAAM,QAAQ,KAAK,qBAAqB;CAC5C,IAAI,SAAS,QAAQ,KAAK,wBAAwB;CAClD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,MAAM,SAAS,UAAU,KAAA,IAAY,OAAO,KAAK,CAAC,CAAC,SAAS;CAE5D,MAAM,eAAe,UAA2C;EAC9D,IAAI,UAAU,KAAA,GAAW,sBAAsB,MAAM,cAAc,MAAM,MAAM;EAC/E,IAAI,UAAU,gBAAgB;EAC9B,UAAU,KAAK;CACjB;CAEA,OACE,qBAAC,QAAD;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAjC,UAAA,CACE,oBAAC,YAAD;GACE,KAAK;GACL,WAAU;GACJ;GACC;GACO;GACH;GACX,OAAO,WAAW;IAAE,GAAG;IAAO;GAAU,IAAI;GAC5C,SAAS;GACT,GAAI;EACL,CAAA,GACA,YACC,oBAAC,QAAD;GAAM,WAAU;GAAuB,eAAY;GAChD,UAAA,aAAa,OAAO,GAAG,OAAO,KAAK,cAAc;EAC9C,CAAA,IACJ,IACA;;AAEV,CAAC;AAED,SAAS,cAAc"}

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

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