jake-compoenents 1.0.0

package/dist/state/reducers/navigation.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.navigation = exports.SET_OFFSET = exports.SET_DISPLAY_URI = exports.SET_BATCH_SIZE = exports.SET_ACTIVE_TAB = void 0;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var SET_ACTIVE_TAB = exports.SET_ACTIVE_TAB = "SET_ACTIVE_TAB";
+var SET_BATCH_SIZE = exports.SET_BATCH_SIZE = 'SET_BATCH_SIZE';
+var SET_DISPLAY_URI = exports.SET_DISPLAY_URI = 'SET_DISPLAY_URI';
+var SET_OFFSET = exports.SET_OFFSET = 'SET_OFFSET';
+var navigation = exports.navigation = function navigation(state, action) {
+  switch (action.type) {
+    case SET_ACTIVE_TAB:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        activeTab: action.activeTab
+      });
+    case SET_BATCH_SIZE:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        batchSize: action.batchSize
+      });
+    case SET_DISPLAY_URI:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        displayUri: action.uri
+      });
+    case SET_OFFSET:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        activeTab: _objectSpread(_objectSpread({}, state.activeTab), {}, {
+          offset: action.offset
+        })
+      });
+    default:
+      return _objectSpread({}, state);
+  }
+};

package/dist/style.css

@@ -0,0 +1,224 @@
+/* Dark theme */
+.view[data-theme="dark"],
+:root[data-theme="dark"],
+.dark-mode {
+  --bg: #0b0c0f;
+  --bg-elev: rgba(255,255,255,.06);
+  --glass: rgba(255,255,255,.08);
+  --fg: #f5f7fa;
+  --muted: rgba(245,247,250,.68);
+  --accent: #38bdf8;
+  --accent-contrast: #041118;
+  --border: rgba(255,255,255,.14);
+  --ring: rgba(56,189,248,.45);
+}
+
+/* ==========================================================================
+   Global Theme Tokens (Sass-ready via CSS variables)
+   ========================================================================== */
+:root {
+  /* Font Sizes */
+  --font-small: 0.75rem;
+
+  /* Radii */
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 20px;
+  --radius-xl: 28px;
+
+  /* Spacing scale */
+  --space-1: .25rem;
+  --space-2: .5rem;
+  --space-3: .75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  /* Breakpoints */
+  --screen-sm: 480px;
+  --screen-md: 768px;
+  --screen-lg: 1280px;
+  --screen-xl: 1440px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
+  --shadow-md: 0 6px 20px rgba(0,0,0,.12);
+  --shadow-lg: 0 12px 40px rgba(0,0,0,.16);
+
+  /* Border */
+  --border-width: 1px;
+
+  /* Typography */
+  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Color tokens (defaults; overridden per theme) */
+  --bg: #0b0c0f;
+  --bg-elev: rgba(255,255,255,.06);
+  --glass: rgba(255,255,255,.08);
+  --fg: #f5f7fa;
+  --muted: rgba(245,247,250,.72);
+  --accent: #0ea5e9;
+  --accent-contrast: #00141c;
+  --border: rgba(255,255,255,.15);
+  --ring: rgba(14,165,233,.45);
+
+  /* Form controls */
+  --grid-controls__height: 35px;
+  --grid-controls__width: 55px;
+}
+
+.dark-mode {
+  --bg: #0b0c0f;
+  --bg-elev: rgba(255,255,255,.06);
+  --glass: rgba(255,255,255,.08);
+  --fg: #f5f7fa;
+  --muted: rgba(245,247,250,.68);
+  --accent: #38bdf8;
+  --accent-contrast: #041118;
+  --border: rgba(255,255,255,.14);
+  --ring: rgba(56,189,248,.45);
+  color-scheme: dark;
+}
+
+/* Reset & Base */
+*,
+*::before,
+*::after { box-sizing: border-box; }
+
+html, body, #root { height: 100%; }
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--fg);
+  line-height: 1.5;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: var(--accent);
+}
+
+img, svg, video, canvas { display: block; max-width: 100%; }
+button, textarea, select { font: inherit; color: inherit; }
+
+input:focus { color: var(--fg)}
+
+/* Focus */
+:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-xs);
+}
+
+/* Selection */
+::selection { background: var(--accent); color: var(--accent-contrast); }
+
+/* Scrollbar (webkit) */
+*::-webkit-scrollbar { width: 10px; height: 10px; }
+*::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.25));
+  border-radius: 999px;
+  border: 3px solid var(--border);
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-track { background: transparent; }
+
+
+.inline-muted { color: var(--muted); }
+.hidden { display: none !important; }
+.sr-only {
+  position: absolute !important;
+  height: 1px; width: 1px; overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap; border: 0; padding: 0; margin: -1px;
+}
+
+/* Form base; component variants refine this */
+.input {
+  width: 100%;
+  border-radius: var(--radius-lg);
+  border: var(--border-width) solid var(--border);
+  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
+  padding: .9rem 1rem;
+  color: var(--fg);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
+}
+.input::placeholder { color: var(--muted); }
+.input:focus {
+  outline: none;
+  border-color: transparent;
+  box-shadow: 0 0 0 4px var(--ring);
+}
+.input--lg { padding: 1rem 1.1rem; font-size: 1rem; }
+.input--with-icon { padding-left: 2.6rem; position: relative; }
+
+/* Buttons base; component overrides add variants */
+.btn {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .5rem;
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-xl);
+  padding: .7rem 1rem;
+  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
+  color: var(--fg);
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color .15s ease, transform .06s ease;
+}
+
+.btn--primary {
+  background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 85%, black));
+  color: var(--accent-contrast);
+  border-color: color-mix(in oklab, var(--accent) 60%, black);
+}
+
+.btn--secondary {
+  background: linear-gradient(180deg, var(--muted), color-mix(in oklab, var(--muted) 85%, black));
+  border-color: color-mix(in oklab, var(--ring) 60%, black);
+  color: var(--accent-contrast);
+}
+
+/* Layout helpers */
+.row { display: flex; align-items: center; gap: var(--space-4); }
+.row-right { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
+.space-between { justify-content: space-between; }
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--fg);
+  font-weight: 600;
+  margin-bottom: var(--space-2);
+}
+
+label {
+  color: var(--fg);
+  display: block;
+  margin-bottom: .5rem;
+}
+
+.text-centered {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.text-small {
+  font-size: var(--font-small);
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "jake-compoenents",
+  "version": "1.0.0",
+  "description": "A library of reusable React components to leverage across projects.",
+  "scripts": {
+    "build": "rm -rf ./dist && babel src --out-dir dist --copy-files",
+    "pack": "npm run build && npm pack"
+  },
+  "author": "Jake Poe",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-redux": "^9.2.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5"
+  },
+  "engines": {
+    "node": ">=24.0.0",
+    "npm": ">=11.0.0"
+  }
+}