@bubltec/uiux 0.0.0-stage → 0.0.0

package/dist/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../src/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,QAAA,MAAM,GAAG;aAAK,OAAO,EAAE,IAAI;aAAE,KAAK,EAAE,IAAI;aAAE,KAAK,EAAE,GAAG;aAAE,IAAI,EAAE,GAAG;aAAE,KAAK,EAAE,GAAG;CAAW,CAAC;AACvF,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,GAAG,CAAC;AAE3C,wBAAgB,IAAI,CAAC,EAAE,OAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,WAAW,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAOrJ"}

package/dist/text.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from './cx.js';
+const TAG = { display: 'h1', title: 'h2', label: 'p', body: 'p', muted: 'p' };
+export function Text({ variant = 'body', className, children, ...rest }) {
+    const Tag = TAG[variant];
+    return (_jsx(Tag, { className: cx(`text-${variant}`, variant !== 'body' && variant !== 'muted' && 'pixel', className), ...rest, children: children }));
+}
+//# sourceMappingURL=text.js.map

package/dist/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../src/text.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,MAAM,GAAG,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAW,CAAC;AAGvF,MAAM,UAAU,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAiF;IACpJ,MAAM,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,CAAC;IACzB,OAAO,CACL,KAAC,GAAG,IAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,OAAO,EAAE,EAAE,OAAO,KAAK,MAAM,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,EAAE,SAAS,CAAC,KAAM,IAAI,YAC7G,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,55 @@
 {
   "name": "@bubltec/uiux",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.0",
+  "description": "Themeable UI components. The NES look is one theme; apps supply their own by setting the same tokens.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "src/theme.css",
+    "src/themes",
+    "!dist/**/*.spec.*"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./src/theme.css",
+    "./themes/nes.css": "./src/themes/nes.css",
+    "./themes/paw.css": "./src/themes/paw.css"
+  },
+  "scripts": {
+    "build": "tsc -b",
+    "typecheck": "tsc -b --noEmit",
+    "lint": "oxlint -c .oxlintrc.json src",
+    "test": "vitest run --exclude '**/dist/**'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bubltec/uiux"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@testing-library/react": "16.3.0",
+    "@types/node": "26.6.2",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jsdom": "27.0.1",
+    "oxlint": "1.85.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "typescript": "7.0.2",
+    "vitest": "5.0.1"
+  },
+  "engines": {
+    "node": ">=26"
+  }
+}

package/src/theme.css

@@ -0,0 +1,571 @@
+/*
+ * Component classes. Colors, type, radius and border width come from the theme
+ * (themes/nes.css or another file that sets the same custom properties).
+ * Load a theme before this file.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--bg);
+  color: var(--ink);
+  font-family: var(--font-body);
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  margin: 0;
+  min-height: 100dvh;
+  background: var(--bg);
+  color: var(--ink);
+}
+
+::selection {
+  background: var(--focus);
+  color: var(--bg);
+}
+
+a {
+  color: var(--link);
+  text-decoration: underline;
+  text-decoration-color: var(--line);
+  text-underline-offset: 3px;
+}
+a:hover {
+  color: var(--ink);
+  text-decoration-color: var(--focus);
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+.pixel {
+  font-family: var(--font-display);
+  letter-spacing: 0.02em;
+  line-height: 1.6;
+}
+
+.label,
+.text-label {
+  font-family: var(--font-display);
+  font-size: 0.5625rem;
+  font-weight: 400;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.text-display {
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--ink);
+}
+.text-title {
+  font-family: var(--font-display);
+  font-size: 0.6875rem;
+  line-height: 1.6;
+  color: var(--accent);
+}
+.text-body {
+  font-size: 1rem;
+  line-height: 1.65;
+  color: var(--ink);
+}
+.text-muted {
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+.panel,
+.card {
+  border: var(--border) solid var(--line);
+  background: var(--surface);
+  border-radius: var(--radius);
+  color: var(--ink);
+}
+
+.btn {
+  font-family: var(--font-display);
+  font-size: 0.625rem;
+  line-height: 1;
+  padding: 0.75rem 1rem;
+  border: var(--border) solid var(--accent);
+  border-radius: var(--radius);
+  color: var(--ink);
+  background: var(--fill);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+}
+.btn:hover {
+  background: var(--fill-hover);
+  color: var(--ink);
+}
+.btn:disabled,
+.btn[aria-busy='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.btn-sm {
+  font-size: 0.5rem;
+  padding: 0.5rem 0.75rem;
+}
+.btn-lg {
+  font-size: 0.75rem;
+  padding: 1rem 1.25rem;
+}
+.btn-ghost {
+  background: transparent;
+  border-color: var(--line);
+}
+.btn-ghost:hover {
+  background: var(--fill-hover);
+  color: var(--ink);
+}
+.btn-danger {
+  background: transparent;
+  border-color: var(--danger);
+  color: var(--danger);
+}
+.btn-danger:hover {
+  background: var(--danger);
+  color: var(--bg);
+}
+
+.badge {
+  font-family: var(--font-display);
+  display: inline-block;
+  border: var(--border) solid var(--line);
+  border-radius: var(--radius);
+  padding: 0.125rem 0.375rem;
+  font-size: 0.5rem;
+  line-height: 1.6;
+  color: var(--ink);
+}
+.badge-ok {
+  border-color: var(--ok);
+  color: var(--ok);
+}
+.badge-warn {
+  border-color: var(--warn);
+  color: var(--warn);
+}
+.badge-accent {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.badge-danger {
+  border-color: var(--danger);
+  color: var(--danger);
+}
+
+.notice {
+  border: var(--border) solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--ink);
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+}
+.notice-warn {
+  border-color: var(--warn);
+  background: var(--warn);
+  color: var(--bg);
+}
+.notice-error {
+  border-color: var(--danger);
+  color: var(--ink);
+}
+.notice-error .text-label {
+  color: var(--danger);
+}
+.notice-preview {
+  background: var(--focus);
+  color: var(--bg);
+  border: none;
+  border-radius: 0;
+  font-family: var(--font-display);
+  font-size: 0.5625rem;
+}
+
+.app-frame {
+  margin-inline: auto;
+  display: flex;
+  min-height: 100dvh;
+  max-width: 64rem;
+  flex-direction: column;
+  padding-inline: 1rem;
+}
+.app-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  border-bottom: var(--border) solid var(--line);
+  padding-block: 1.25rem;
+}
+.app-header-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  background: color-mix(in srgb, var(--bg) 90%, transparent);
+}
+.app-header-brand a {
+  text-decoration: none;
+}
+.app-nav {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+.app-nav a {
+  font-family: var(--font-display);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.5625rem;
+  text-decoration: none;
+  color: var(--link);
+}
+.app-nav a[aria-current='page'] {
+  background: var(--line);
+  color: var(--ink);
+}
+.app-main {
+  flex: 1;
+  padding-block: 2rem;
+}
+.app-footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-top: var(--border) solid var(--fill);
+  padding-block: 1.25rem;
+  font-size: 0.75rem;
+  color: var(--faint, var(--muted));
+}
+.app-section-narrow {
+  max-width: 48rem;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.control,
+input.control,
+textarea.control,
+select.control {
+  background: var(--bg);
+  color: var(--ink);
+  border: var(--border) solid var(--line);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.625rem;
+  width: 100%;
+  font: inherit;
+}
+.control:focus,
+input.control:focus,
+textarea.control:focus,
+select.control:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+.control::placeholder {
+  color: var(--faint, var(--muted));
+}
+.control.control-auto,
+select.control.control-auto {
+  width: auto;
+}
+input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):not([type='range']),
+textarea,
+select {
+  background: var(--bg);
+  color: var(--ink);
+  border: var(--border) solid var(--line);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.625rem;
+  width: 100%;
+  font: inherit;
+}
+input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']):focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+/* Engines that do paint <option> still need a contrasting pair. The theme's
+   color-scheme on select is what actually flips the WebKit menu. */
+select option,
+select optgroup {
+  background-color: var(--bg);
+  color: var(--ink);
+}
+input::placeholder,
+textarea::placeholder {
+  color: var(--faint, var(--muted));
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.field-hint,
+.field-error {
+  font-size: 0.75rem;
+}
+.field-hint {
+  color: var(--faint, var(--muted));
+}
+.field-error {
+  color: var(--danger);
+}
+.field-reserve {
+  visibility: hidden;
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+.chip {
+  font-family: var(--font-display);
+  border: var(--border) solid var(--fill);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--muted);
+  padding: 0.25rem 0.375rem;
+  font-size: 0.4375rem;
+  cursor: pointer;
+}
+.chip[aria-pressed='true'] {
+  border-color: var(--focus);
+  background: var(--focus);
+  color: var(--bg);
+}
+
+.switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.switch input {
+  appearance: none;
+  width: 2.25rem;
+  height: 1.25rem;
+  margin: 0;
+  border: var(--border) solid var(--line);
+  border-radius: calc(var(--radius) + 999px);
+  background: var(--bg);
+  position: relative;
+}
+.switch input::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 0.85rem;
+  height: 0.85rem;
+  background: var(--muted);
+}
+.switch input:checked {
+  background: var(--fill);
+  border-color: var(--accent);
+}
+.switch input:checked::after {
+  left: auto;
+  right: 1px;
+  background: var(--focus);
+}
+
+.segmented {
+  display: inline-flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: var(--border) solid var(--line);
+  border-radius: var(--radius);
+  background: var(--bg);
+}
+.segmented label {
+  cursor: pointer;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--muted);
+}
+.segmented label:has(:checked) {
+  background: var(--fill);
+  color: var(--ink);
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.dialog {
+  border: var(--border) solid var(--line);
+  border-radius: var(--radius);
+  background: var(--surface);
+  color: var(--ink);
+  padding: 1.25rem;
+  max-width: min(30rem, calc(100vw - 2rem));
+  width: 100%;
+}
+.dialog-wide {
+  max-width: min(44rem, calc(100vw - 2rem));
+}
+.dialog::backdrop {
+  background: color-mix(in srgb, var(--ink) 40%, transparent);
+}
+.dialog-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+.dialog-title {
+  font-family: var(--font-display);
+  font-size: 0.6875rem;
+  margin: 0;
+}
+.dialog-desc {
+  margin: 0.25rem 0 0;
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+.dialog-body {
+  margin-top: 1.25rem;
+}
+
+.drawer {
+  border: none;
+  border-right: var(--border) solid var(--line);
+  background: var(--surface);
+  color: var(--ink);
+  margin: 0;
+  padding: 0;
+  height: 100dvh;
+  max-height: 100dvh;
+  width: min(20rem, calc(100vw - 2rem));
+  position: fixed;
+  inset: 0 auto 0 0;
+}
+.drawer::backdrop {
+  background: color-mix(in srgb, var(--ink) 40%, transparent);
+}
+.drawer-body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1rem;
+  overflow: auto;
+}
+
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  overflow-x: auto;
+  border-bottom: var(--border) solid var(--line);
+}
+.tab {
+  font-family: var(--font-display);
+  font-size: 0.5rem;
+  background: transparent;
+  border: none;
+  border-bottom: var(--border) solid transparent;
+  color: var(--muted);
+  padding: 0.75rem;
+  cursor: pointer;
+}
+.tab[aria-selected='true'] {
+  color: var(--ink);
+  border-bottom-color: var(--accent);
+}
+.tab-panel {
+  padding-top: 1rem;
+}
+
+.toasts {
+  pointer-events: none;
+  position: fixed;
+  inset-inline: 0;
+  bottom: 1rem;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline: 1rem;
+}
+.toast {
+  pointer-events: auto;
+  max-width: 28rem;
+  border-radius: var(--radius);
+  padding: 0.625rem 1rem;
+  font-size: 0.875rem;
+  background: var(--ink);
+  color: var(--bg);
+}
+.toast-error {
+  background: var(--danger);
+  color: var(--bg);
+}
+
+.icon {
+  width: 1em;
+  height: 1em;
+  flex: none;
+  display: inline-block;
+}
+
+.pager {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.pager-count {
+  font-family: var(--font-display);
+  font-size: 0.5rem;
+  color: var(--faint, var(--muted));
+}
+
+@media (min-width: 40rem) {
+  .app-frame {
+    padding-inline: 1.5rem;
+  }
+}

package/src/themes/nes.css

@@ -0,0 +1,49 @@
+/*
+ * NES (2C02) colours the 1990s Mega Man games are drawn with.
+ * Black stage, Mega Man's blues, the cyan highlight, energy-bar yellow, damage red.
+ */
+:root {
+  --void: #000000;
+  --night: #00003c;
+  --deep: #0000bc;
+  --mega: #0070ec;
+  --sky: #3cbcfc;
+  --ice: #a4e4fc;
+  --bolt: #f8b800;
+  --cream: #fce4a0;
+  --hurt: #f83800;
+  --snow: #fcfcfc;
+  --steel: #bcbcbc;
+  --slate: #747474;
+
+  --bg: var(--void);
+  --surface: var(--void);
+  --ink: var(--snow);
+  --muted: var(--steel);
+  --faint: var(--slate);
+  --line: var(--mega);
+  --accent: var(--sky);
+  --accent-ink: var(--snow);
+  --danger: var(--hurt);
+  --focus: var(--bolt);
+  --ok: var(--ice);
+  --warn: var(--bolt);
+  --fill: var(--deep);
+  --fill-hover: var(--mega);
+  --link: var(--ice);
+  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-display: 'Press Start 2P', ui-monospace, monospace;
+  --radius: 0;
+  --border: 2px;
+
+  color-scheme: dark;
+}
+
+/* WebKit (Safari, DuckDuckGo) gives the control its own color-scheme, so the
+   one on :root never reaches the native menu. The menu stays light, inherits
+   the light text color, and the choices disappear. Chrome draws its own menu. */
+select,
+select optgroup,
+select option {
+  color-scheme: dark;
+}