@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/styles/theme.css

@@ -1,25 +1,34 @@
 /*
- * Global Green Steam (VGUI) theme.
+ * Green Steam (VGUI) global theme.
  *
- * Only document-level rules live here — the element defaults and shared layout
- * helpers that every component inherits. Anything that belongs to a specific
+ * Opt-in, and only ever document-level: tokens plus the element defaults and
+ * layout helpers that every component inherits. Anything belonging to a single
  * component is colocated with that component instead (see
- * `components/GreenButton/GreenButton.css`).
+ * `components/Button/Button.css`).
  *
- * Derived from VGUI.css <https://github.com/AlpyneDreams/vgui.css> (MIT).
+ * Components never depend on this file — each one imports its own stylesheet
+ * and reads `var(--vgui-*)` tokens, so a component dropped into an unthemed
+ * page still renders. Import this once (or `./tokens.css` alone for just the
+ * tokens) to theme the page around it.
+ *
+ * Derived from VGUI.css <https://github.com/AlpyneDreams/vgui.css> (MIT) and
+ * Valve's `steamscheme.res`. See `docs/foundations.md`.
  */
 
+@import './tokens.css';
+
 body {
-  background-color: #3e4637;
-  font-family: "Trebuchet MS", "Verdana", sans-serif;
-  color: #d8ded3;
-  font-size: 14px;
-  image-rendering: pixelated;
-  margin: 20px 20px;
+  background-color: var(--vgui-surface-dark);
+  font-family: var(--vgui-font);
+  color: var(--vgui-text);
+  font-size: var(--vgui-font-size);
+  line-height: var(--vgui-line-height);
+  margin: 20px;
 }
 
 ::selection {
-  background-color: #96892d;
+  background-color: var(--vgui-selection-bg);
+  color: var(--vgui-selection-text);
 }
 
 h1,
@@ -29,11 +38,13 @@ h4,
 h5,
 h6 {
   margin: 3px 12px 12px;
+  font-weight: bold;
+  line-height: var(--vgui-line-height);
 }
 
 h1,
 h2 {
-  color: #c4b550;
+  color: var(--vgui-heading);
 }
 
 h1 {
@@ -41,82 +52,116 @@ h1 {
 }
 
 h2 {
-  font-size: 16px;
+  font-size: var(--vgui-font-size-large);
+}
+
+h3,
+h4,
+h5,
+h6 {
+  font-size: var(--vgui-font-size);
 }
 
 p {
   text-align: left;
-  margin: 12px 12px 12px;
-  color: #d8ded3;
+  margin: 12px;
+  color: var(--vgui-text);
 }
 
 a {
   text-decoration: none;
-  color: #aaaaaa;
+  color: var(--vgui-link);
 }
 
 a:hover {
+  color: var(--vgui-text-hover);
   text-decoration: underline;
 }
 
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--vgui-font-mono);
+  font-size: var(--vgui-font-size-small);
+}
+
 code {
-  background: #3e4637;
+  background: var(--vgui-surface-dark);
   padding: 0 3px;
-  font-family: monospace;
 }
 
 hr {
   margin: 20px 0;
   border: none;
   height: 1px;
-  background-color: #3e4637;
+  background-color: var(--vgui-bevel-dark);
 }
 
 img {
   object-fit: contain;
   margin: 2px;
-  border: solid 2px #7b8484;
+  border: solid 2px var(--vgui-bevel-light);
 }
 
 fieldset {
-  border-top: solid 1px #292d23;
-  border-bottom: solid 1px #899281;
-  border-left: solid 1px #292d23;
-  border-right: solid 1px #899281;
+  border-top: solid var(--vgui-bevel-width) var(--vgui-bevel-dark);
+  border-bottom: solid var(--vgui-bevel-width) var(--vgui-bevel-light);
+  border-left: solid var(--vgui-bevel-width) var(--vgui-bevel-dark);
+  border-right: solid var(--vgui-bevel-width) var(--vgui-bevel-light);
 }
 
 legend {
   text-transform: uppercase;
-  letter-spacing: 2px;
-  font-size: 12px;
-  color: white;
+  letter-spacing: var(--vgui-chrome-tracking);
+  font-size: var(--vgui-font-size-small);
+  color: var(--vgui-text-strong);
   font-weight: bold;
 }
 
+/*
+ * `.vgui-crisp` — opt-in pixel-perfect rendering.
+ *
+ * Deliberately a class and never a global rule: disabling font smoothing and
+ * enabling `image-rendering: pixelated` overrides the user's own rendering
+ * preferences and hurts legibility at small sizes. Apply it to a subtree only
+ * when chasing literal 2003 fidelity. Components that ship a `.vgui-crisp`
+ * rule use it to swap the accessible focus ring for Valve's own.
+ */
+.vgui-crisp {
+  -webkit-font-smoothing: none;
+  -moz-osx-font-smoothing: grayscale;
+  image-rendering: pixelated;
+}
+
 /* Shared layout helpers */
 
-.flex-row {
+.vgui-flex-row {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
 }
 
-.flex-column {
+.vgui-flex-column {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 }
 
-.border {
-  border-top: solid 1px #899281;
-  border-bottom: solid 1px #292d23;
-  border-left: solid 1px #899281;
-  border-right: solid 1px #292d23;
+/*
+ * Raised and inset bevels. Light from the top-left, as VGUI draws it: a raised
+ * box is light on top/left and dark on bottom/right, and an inset box is the
+ * exact inverse. Widths come from `--vgui-bevel-width` so a border that must
+ * stay 1px under zoom can be pinned instead.
+ */
+.vgui-bevel {
+  border-style: solid;
+  border-width: var(--vgui-bevel-width);
+  border-color: var(--vgui-bevel-light) var(--vgui-bevel-dark)
+    var(--vgui-bevel-dark) var(--vgui-bevel-light);
 }
 
-.border-inverted {
-  border-top: solid 1px #292d23;
-  border-bottom: solid 1px #899281;
-  border-left: solid 1px #292d23;
-  border-right: solid 1px #899281;
-}
+.vgui-bevel--inset {
+  border-color: var(--vgui-bevel-dark) var(--vgui-bevel-light)
+    var(--vgui-bevel-light) var(--vgui-bevel-dark);
+}

package/dist/styles/tokens.css

@@ -0,0 +1,202 @@
+/*
+ * Green Steam (VGUI) design tokens.
+ *
+ * Every token is declared on `[data-vgui-theme]` and never on `:root`, so a
+ * component can be dropped into a page without theming the page. Components
+ * read these tokens bare — a component that has no sensible shared token
+ * declares a component-local `--vgui-<name>-*` property instead, always as
+ * `var(--vgui-shared-token, <literal>)` so it still resolves unthemed.
+ *
+ * Derived from VGUI.css <https://github.com/AlpyneDreams/vgui.css> (MIT) and
+ * Valve's own `steamscheme.res` / `steam.styles`. See `docs/foundations.md` §3
+ * for the palette and §9 for the theme layer.
+ */
+
+[data-vgui-theme] {
+  /* --- Surfaces (docs/foundations.md §3) --- */
+  --vgui-surface: #4c5844; /* GreenBG */
+  --vgui-surface-alt: #4a5942; /* almost-light-primary */
+  --vgui-surface-light: #5a6a50; /* LightGreenBG */
+  --vgui-surface-dark: #3e4637; /* DarkGreenBG */
+  /* Field and popup interiors. Every VGUI `TextEntry` and `ComboBox` paints a
+   * genuinely black inset rather than a darker green — it is the one place the
+   * theme leaves the palette, and it is what makes the caret legible. */
+  --vgui-field-bg: #000000;
+
+  /* --- Bevel (§4) --- */
+  --vgui-bevel-light: #899281; /* BorderBright, community value */
+  --vgui-bevel-light-strong: #b8c4ad; /* shadelighter */
+  --vgui-bevel-dark: #292d23; /* BorderDark, community value */
+  --vgui-bevel-width: 1px;
+
+  /* --- Text --- */
+  --vgui-text: #d8ded3; /* OffWhite */
+  --vgui-text-strong: #ffffff; /* White */
+  --vgui-text-muted: #a0aa95; /* Label */
+  --vgui-text-dim: #758666; /* DimListText */
+  --vgui-text-disabled: #75806f; /* DisabledText1 */
+  --vgui-text-disabled-shadow: #282e22; /* DisabledText2 */
+  --vgui-heading: #c4b550; /* Maize */
+  --vgui-text-hover: #e3e41f;
+
+  /* --- Accent --- */
+  --vgui-accent: #c4b550; /* Maize */
+  --vgui-accent-dark: #91863c; /* MaizeBG */
+  --vgui-accent-darker: #96892d;
+  --vgui-selection-bg: #96892d;
+  --vgui-selection-text: #232421;
+  --vgui-border-selection: #000000;
+
+  /* --- Status --- */
+  --vgui-steam-green: #7ea64b; /* FullGreen */
+  --vgui-success: #1ae225;
+  --vgui-warning: #c4b550;
+  --vgui-danger: #e2251a;
+  --vgui-info: #0900ff;
+  --vgui-link: #aaaaaa;
+  /* Console error lines. `Highlight3` (`steam.styles:91`) is a deliberately
+   * muted brick rather than `--vgui-danger`'s signal red — the console prints
+   * errors constantly, so they must not shout. */
+  --vgui-console-error: #ad4547;
+
+  /* --- Server-browser ping bars --- */
+  --vgui-ping-low: #6a1610;
+  --vgui-ping-medium: #91863c;
+  --vgui-ping-high: #4c5844;
+
+  /* --- Friends roster (docs/foundations.md §3) --- */
+  --vgui-friends-selected: #111111;
+  --vgui-friends-ignored: #f86c4f;
+  --vgui-friends-avatar-over: #ffffff;
+
+  /* --- Clay property-sheet chrome (§3) --- */
+  --vgui-clay-surface: #464646; /* ClayBG */
+  --vgui-clay-light: #686a65; /* LightClayBG */
+  --vgui-clay-button: #7d8078; /* LightClayButtonBG */
+  --vgui-clay-bottom: #5c5957; /* ClaySheetBottom */
+  --vgui-clay-dark: #2f312d; /* DarkClayBG */
+  --vgui-clay-glyph: #adb5a8; /* ClayLightGreen */
+  --vgui-clay-glyph-dim: #a6aca2; /* ClayDimLightGreen */
+
+  /* --- Typography (§5) --- */
+  --vgui-font: "Trebuchet MS", "Verdana", "DejaVu Sans", Tahoma, sans-serif;
+  --vgui-font-mono: "Lucida Console", "DejaVu Sans Mono", Consolas, monospace;
+  --vgui-font-size: 14px;
+  --vgui-font-size-small: 12px;
+  --vgui-font-size-large: 16px;
+  --vgui-line-height: 1.25;
+  --vgui-chrome-tracking: 2px;
+
+  /* --- Metrics (§6) ---
+   * A recurring scale of 2, 4, 6, 8, 10, 12, 18, 20, 25, 26 falls out of
+   * Valve's layout files. There is deliberately no 4/8px grid. */
+  --vgui-control-height: 25px;
+  --vgui-button-min-width: 75px;
+  --vgui-checkbox-size: 15px;
+  --vgui-titlebar-height: 18px;
+  --vgui-frame-control-size: 20px;
+  --vgui-resize-grip: 12px;
+  --vgui-progress-height: 26px;
+  --vgui-progress-fill: 16px;
+  --vgui-progress-gutter: 4px;
+  --vgui-slider-track-height: 4px;
+  --vgui-slider-thumb-width: 8px;
+  --vgui-slider-thumb-height: 16px;
+  --vgui-dialog-button-width: 92px;
+  --vgui-dialog-button-height: 24px;
+  --vgui-window-max-width: 780px;
+  --vgui-field-inset: 4px;
+  /* WCAG 2.5.8 minimum target size. Valve's 18px `--small` chrome falls below
+   * it, so those controls grow an invisible hit area to this. */
+  --vgui-min-target-size: 24px;
+
+  /* --- Scrollbar (§6, §7)
+   * The bar is 18px with an 18px button at each end, and it is drawn three
+   * ways: the `Scrollbar` component's button/gutter/thumb tree, `ScrollArea`'s
+   * lighter copy of it, and the platform skin in `styles/scrollbars.css` that
+   * every self-scrolling component opts into with `.vgui-scroll-surface`. All
+   * three read these tokens, so one override restyles every bar on the page.
+   *
+   * Note the inversion people get backwards: the *gutter* is the light green
+   * and the *thumb* is the standard surface green, not the other way round. */
+  --vgui-scrollbar-size: 18px;
+  --vgui-scrollbar-button-size: 18px;
+  --vgui-scrollbar-glyph-width: 7px;
+  --vgui-scrollbar-glyph-height: 4px;
+  --vgui-scrollbar-glyph-color: var(--vgui-text-muted);
+  --vgui-scrollbar-gutter: var(--vgui-surface-light);
+  --vgui-scrollbar-thumb: var(--vgui-surface);
+  --vgui-scrollbar-corner: var(--vgui-surface-light);
+
+  /* --- Focus (§4)
+   * Valve's literal rings are invisible on these surfaces (1.87:1), so the
+   * accessible ring is the default and the Valve ring is available to
+   * components that explicitly opt into pixel-perfect rendering. */
+  --vgui-focus-ring: 2px solid var(--vgui-accent);
+  --vgui-focus-ring-offset: -3px;
+  --vgui-focus-ring-valve: 1px dashed var(--vgui-bevel-dark);
+  --vgui-focus-ring-valve-offset: -4px;
+}
+
+/*
+ * `vgui1` — the bevel colours exactly as `steamscheme.res` defines them, for
+ * anyone chasing 2003 fidelity. See docs/foundations.md §8.
+ */
+[data-vgui-theme='vgui1'] {
+  --vgui-bevel-light: #808080;
+  --vgui-bevel-dark: #282e22;
+}
+
+/*
+ * `black` — the `blacksteam` palette from VGUI.css. Note the field interior is
+ * genuinely black here, which is why the `green` theme's placeholder contrast
+ * problem (docs/foundations.md §10) does not apply to this variant.
+ */
+[data-vgui-theme='black'] {
+  --vgui-surface: #212121;
+  --vgui-surface-alt: #212121;
+  --vgui-surface-light: #181818;
+  --vgui-surface-dark: #080808;
+  --vgui-bevel-light: #323232;
+  --vgui-bevel-light-strong: #4a4a4a;
+  --vgui-bevel-dark: #080808;
+  --vgui-accent: #f0b43f;
+  --vgui-accent-dark: #96892d;
+  --vgui-heading: #f0b43f;
+  --vgui-ping-high: #212121;
+}
+
+/*
+ * `warm` — the "TF2-esque" variant shipped in OldSteam-Theme's `universal.css`.
+ */
+[data-vgui-theme='warm'] {
+  --vgui-surface: #393532;
+  --vgui-surface-alt: #393532;
+  --vgui-surface-light: #a39884;
+  --vgui-surface-dark: #221f1c;
+  --vgui-bevel-light: #4a453d;
+  --vgui-bevel-light-strong: #6b6457;
+  --vgui-bevel-dark: #4a453d;
+  --vgui-text: #d9d9d9;
+  --vgui-text-muted: #c8bca2;
+  --vgui-text-dim: #c8bca2;
+  --vgui-text-disabled: #575248;
+  --vgui-text-disabled-shadow: #575248;
+  --vgui-steam-green: #4a453d;
+}
+
+/*
+ * `clay` — the grey property-sheet chrome. Valve deliberately renders the
+ * settings sheets less green than the rest of the client.
+ */
+[data-vgui-theme='clay'] {
+  --vgui-surface: #464646;
+  --vgui-surface-alt: #464646;
+  --vgui-surface-light: #686a65;
+  --vgui-surface-dark: #2f312d;
+  --vgui-bevel-light: #7d8078;
+  --vgui-bevel-light-strong: #adb5a8;
+  --vgui-bevel-dark: #2f312d;
+  --vgui-accent: #adb5a8;
+  --vgui-heading: #adb5a8;
+}

package/dist/styles/tokens.css.d.ts

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

package/dist/test/a11y.d.ts

@@ -0,0 +1,3 @@
+/** Returns one entry per accessibility rule the container violates. */
+export declare function a11yViolations(container: HTMLElement): Promise<string[]>;
+//# sourceMappingURL=a11y.d.ts.map

package/dist/test/a11y.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a11y.d.ts","sourceRoot":"","sources":["../../src/test/a11y.ts"],"names":[],"mappings":"AAWA,uEAAuE;AACvE,wBAAsB,cAAc,CAAC,SAAS,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,CAM9E"}

package/dist/test/index.d.ts

@@ -0,0 +1,2 @@
+export * from './a11y';
+//# sourceMappingURL=index.d.ts.map

package/dist/test/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dalcvil/steam-green-react",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "description": "Tree-shakable React components for the classic Green Steam (VGUI) theme.",
   "keywords": [
     "react",
@@ -38,6 +38,8 @@
       "default": "./dist/index.js"
     },
     "./styles/theme.css": "./dist/styles/theme.css",
+    "./styles/tokens.css": "./dist/styles/tokens.css",
+    "./styles/scrollbars.css": "./dist/styles/scrollbars.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
@@ -50,19 +52,28 @@
     "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/react-vite": "^10.6.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^24.10.0",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
+    "axe-core": "^4.13.0",
+    "jsdom": "^30.0.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "storybook": "^10.6.0",
     "typescript": "^7.0.2",
-    "vite": "^8.3.0"
+    "vite": "^8.3.0",
+    "vitest": "^5.0.0"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.node.json",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "changeset": "changeset",

package/dist/components/GreenButton/GreenButton.css

@@ -1,47 +0,0 @@
-/*
- * Green Steam button.
- *
- * The upstream VGUI.css targets the bare `button` element. As a component we
- * scope the same declarations to `.greensteam-button` so the component can be
- * dropped into any page without restyling every button on it.
- */
-
-.greensteam-button {
-  color: white;
-  background-color: #4c5844;
-  height: 25px;
-  min-width: 75px;
-  padding: 0 8px;
-  cursor: pointer;
-  border-top: solid 1px #899281;
-  border-bottom: solid 1px #292d23;
-  border-left: solid 1px #899281;
-  border-right: solid 1px #292d23;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: lighter;
-  text-align: left;
-  -webkit-font-smoothing: none;
-}
-
-.greensteam-button:active {
-  border-top: solid 1px #292d23;
-  border-bottom: solid 1px #899281;
-  border-left: solid 1px #292d23;
-  border-right: solid 1px #899281;
-}
-
-.greensteam-button:focus-visible {
-  outline: 1px dashed #292d23;
-  outline-offset: -4px;
-}
-
-.greensteam-button:disabled {
-  color: #8b9481;
-  cursor: default;
-}
-
-.greensteam-button--full-width {
-  display: block;
-  width: 100%;
-}

package/dist/components/GreenButton/GreenButton.d.ts

@@ -1,8 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-import './GreenButton.css';
-export interface GreenButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Stretch the button across the full width of its container. */
-    fullWidth?: boolean;
-}
-export declare const GreenButton: import("react").ForwardRefExoticComponent<GreenButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=GreenButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"GreenButton.d.ts","sourceRoot":"","sources":["../../../src/components/GreenButton/GreenButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,mBAAmB,CAAA;AAE1B,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,gHAStB,CAAA"}

package/dist/components/GreenButton/GreenButton.js

@@ -1,20 +0,0 @@
-import { forwardRef } from "react";
-import "./GreenButton.css";
-import { jsx } from "react/jsx-runtime";
-//#region src/components/GreenButton/GreenButton.tsx
-var GreenButton = forwardRef(function GreenButton({ className, type = "button", fullWidth = false, ...rest }, ref) {
-	const classes = ["greensteam-button"];
-	if (fullWidth) classes.push("greensteam-button--full-width");
-	if (className) classes.push(className);
-	return /* @__PURE__ */ jsx("button", {
-		ref,
-		type,
-		className: classes.join(" "),
-		...rest
-	});
-});
-GreenButton.displayName = "GreenButton";
-//#endregion
-export { GreenButton };
-
-//# sourceMappingURL=GreenButton.js.map

package/dist/components/GreenButton/GreenButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GreenButton.js","names":[],"sources":["../../../src/components/GreenButton/GreenButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { ButtonHTMLAttributes } from 'react'\n\nimport './GreenButton.css'\n\nexport interface GreenButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Stretch the button across the full width of its container. */\n  fullWidth?: boolean\n}\n\nexport const GreenButton = forwardRef<HTMLButtonElement, GreenButtonProps>(function GreenButton(\n  { className, type = 'button', fullWidth = false, ...rest },\n  ref,\n) {\n  const classes = ['greensteam-button']\n  if (fullWidth) classes.push('greensteam-button--full-width')\n  if (className) classes.push(className)\n\n  return <button ref={ref} type={type} className={classes.join(' ')} {...rest} />\n})\n\nGreenButton.displayName = 'GreenButton'\n"],"mappings":";;;;AAUA,IAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,WAAW,OAAO,UAAU,YAAY,OAAO,GAAG,QACpD,KACA;CACA,MAAM,UAAU,CAAC,mBAAmB;CACpC,IAAI,WAAW,QAAQ,KAAK,+BAA+B;CAC3D,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OAAO,oBAAC,UAAD;EAAa;EAAW;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;CAAO,CAAA;AAChF,CAAC;AAED,YAAY,cAAc"}

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

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

package/dist/components/GreenPanel/GreenPanel.css

@@ -1,45 +0,0 @@
-/*
- * Green Steam panel.
- *
- * Reproduces the upstream `.window` / `.box` container: a light-green body with
- * the beveled VGUI border, plus the uppercase title bar upstream renders via
- * `.window::before { content: attr(name) }`. Here the title bar is a real
- * element, so the text is selectable and no attribute trick is needed.
- */
-
-.greensteam-panel {
-  background-color: #4c5844;
-  padding: 10px;
-  box-sizing: border-box;
-  margin: 0 0 20px;
-  border-top: solid 1px #899281;
-  border-bottom: solid 1px #292d23;
-  border-left: solid 1px #899281;
-  border-right: solid 1px #292d23;
-}
-
-.greensteam-panel__titlebar {
-  display: block;
-  position: relative;
-  height: 18px;
-  line-height: 18px;
-  margin-bottom: 1em;
-  color: white;
-  font-size: 12px;
-  font-weight: bold;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-}
-
-.greensteam-panel--inset {
-  background-color: #3e4637;
-  border-top: solid 1px #292d23;
-  border-bottom: solid 1px #899281;
-  border-left: solid 1px #292d23;
-  border-right: solid 1px #899281;
-}
-
-.greensteam-panel--rounded {
-  border: none;
-  border-radius: 10px;
-}

package/dist/components/GreenPanel/GreenPanel.d.ts

@@ -1,12 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import './GreenPanel.css';
-export interface GreenPanelProps extends HTMLAttributes<HTMLDivElement> {
-    /** Uppercase VGUI title bar text. Omit it to render a panel without one. */
-    heading?: ReactNode;
-    /** Darken the body to the VGUI "inset" look, e.g. for read-only content. */
-    inset?: boolean;
-    /** Round the corners and drop the beveled border. */
-    rounded?: boolean;
-}
-export declare const GreenPanel: import("react").ForwardRefExoticComponent<GreenPanelProps & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=GreenPanel.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"GreenPanel.d.ts","sourceRoot":"","sources":["../../../src/components/GreenPanel/GreenPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,kBAAkB,CAAA;AAEzB,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,UAAU,4GAerB,CAAA"}

package/dist/components/GreenPanel/GreenPanel.js

@@ -1,24 +0,0 @@
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./GreenPanel.css";
-//#region src/components/GreenPanel/GreenPanel.tsx
-var GreenPanel = forwardRef(function GreenPanel({ className, heading, inset = false, rounded = false, children, ...rest }, ref) {
-	const classes = ["greensteam-panel"];
-	if (inset) classes.push("greensteam-panel--inset");
-	if (rounded) classes.push("greensteam-panel--rounded");
-	if (className) classes.push(className);
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: classes.join(" "),
-		...rest,
-		children: [heading != null && /* @__PURE__ */ jsx("div", {
-			className: "greensteam-panel__titlebar",
-			children: heading
-		}), children]
-	});
-});
-GreenPanel.displayName = "GreenPanel";
-//#endregion
-export { GreenPanel };
-
-//# sourceMappingURL=GreenPanel.js.map

package/dist/components/GreenPanel/GreenPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GreenPanel.js","names":[],"sources":["../../../src/components/GreenPanel/GreenPanel.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\n\nimport './GreenPanel.css'\n\nexport interface GreenPanelProps extends HTMLAttributes<HTMLDivElement> {\n  /** Uppercase VGUI title bar text. Omit it to render a panel without one. */\n  heading?: ReactNode\n  /** Darken the body to the VGUI \"inset\" look, e.g. for read-only content. */\n  inset?: boolean\n  /** Round the corners and drop the beveled border. */\n  rounded?: boolean\n}\n\nexport const GreenPanel = forwardRef<HTMLDivElement, GreenPanelProps>(function GreenPanel(\n  { className, heading, inset = false, rounded = false, children, ...rest },\n  ref,\n) {\n  const classes = ['greensteam-panel']\n  if (inset) classes.push('greensteam-panel--inset')\n  if (rounded) classes.push('greensteam-panel--rounded')\n  if (className) classes.push(className)\n\n  return (\n    <div ref={ref} className={classes.join(' ')} {...rest}>\n      {heading != null && <div className=\"greensteam-panel__titlebar\">{heading}</div>}\n      {children}\n    </div>\n  )\n})\n\nGreenPanel.displayName = 'GreenPanel'\n"],"mappings":";;;;AAcA,IAAa,aAAa,WAA4C,SAAS,WAC7E,EAAE,WAAW,SAAS,QAAQ,OAAO,UAAU,OAAO,UAAU,GAAG,QACnE,KACA;CACA,MAAM,UAAU,CAAC,kBAAkB;CACnC,IAAI,OAAO,QAAQ,KAAK,yBAAyB;CACjD,IAAI,SAAS,QAAQ,KAAK,2BAA2B;CACrD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;EAAjD,UAAA,CACG,WAAW,QAAQ,oBAAC,OAAD;GAAK,WAAU;GAA8B,UAAA;EAAa,CAAA,GAC7E,QACE;;AAET,CAAC;AAED,WAAW,cAAc"}