@meetreeve/ui 0.2.0

package/dist/tokens/index.d.mts

@@ -0,0 +1,31 @@
+/**
+ * Shared minimum-size floors and breakpoints for MindFortress frontends.
+ *
+ * These are the numbers that keep a header usable under width pressure: a real
+ * touch target, and a search field that never gets crushed below a readable
+ * width on mobile. Consumers can read them in JS (here) or, for Tailwind v4, as
+ * `@theme` custom properties from `@meetreeve/ui/tokens.css`.
+ *
+ * This module is intentionally free of React / DOM imports so it stays
+ * server-safe (no "use client" boundary).
+ */
+declare const MIN_SIZES: {
+    /** WCAG 2.5.5 minimum interactive target, px. Applies to BOTH width and height. */
+    readonly touchTarget: 44;
+    /** Floor width for the always-inline search field on mobile, px. */
+    readonly searchInput: 200;
+    /** Generic minimum width/height for a secondary control (button, select), px. */
+    readonly control: 44;
+    /** Max width of the brand wordmark before it truncates, px. */
+    readonly wordmarkMaxWidth: 180;
+};
+declare const BREAKPOINTS: {
+    /** Tailwind `sm`. */
+    readonly sm: 640;
+    /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
+    readonly md: 768;
+};
+type MinSizeToken = keyof typeof MIN_SIZES;
+type Breakpoint = keyof typeof BREAKPOINTS;
+
+export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken };

package/dist/tokens/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Shared minimum-size floors and breakpoints for MindFortress frontends.
+ *
+ * These are the numbers that keep a header usable under width pressure: a real
+ * touch target, and a search field that never gets crushed below a readable
+ * width on mobile. Consumers can read them in JS (here) or, for Tailwind v4, as
+ * `@theme` custom properties from `@meetreeve/ui/tokens.css`.
+ *
+ * This module is intentionally free of React / DOM imports so it stays
+ * server-safe (no "use client" boundary).
+ */
+declare const MIN_SIZES: {
+    /** WCAG 2.5.5 minimum interactive target, px. Applies to BOTH width and height. */
+    readonly touchTarget: 44;
+    /** Floor width for the always-inline search field on mobile, px. */
+    readonly searchInput: 200;
+    /** Generic minimum width/height for a secondary control (button, select), px. */
+    readonly control: 44;
+    /** Max width of the brand wordmark before it truncates, px. */
+    readonly wordmarkMaxWidth: 180;
+};
+declare const BREAKPOINTS: {
+    /** Tailwind `sm`. */
+    readonly sm: 640;
+    /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
+    readonly md: 768;
+};
+type MinSizeToken = keyof typeof MIN_SIZES;
+type Breakpoint = keyof typeof BREAKPOINTS;
+
+export { BREAKPOINTS, type Breakpoint, MIN_SIZES, type MinSizeToken };

package/dist/tokens/index.js

@@ -0,0 +1,47 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/tokens.ts
+var tokens_exports = {};
+__export(tokens_exports, {
+  BREAKPOINTS: () => BREAKPOINTS,
+  MIN_SIZES: () => MIN_SIZES
+});
+module.exports = __toCommonJS(tokens_exports);
+var MIN_SIZES = {
+  /** WCAG 2.5.5 minimum interactive target, px. Applies to BOTH width and height. */
+  touchTarget: 44,
+  /** Floor width for the always-inline search field on mobile, px. */
+  searchInput: 200,
+  /** Generic minimum width/height for a secondary control (button, select), px. */
+  control: 44,
+  /** Max width of the brand wordmark before it truncates, px. */
+  wordmarkMaxWidth: 180
+};
+var BREAKPOINTS = {
+  /** Tailwind `sm`. */
+  sm: 640,
+  /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
+  md: 768
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BREAKPOINTS,
+  MIN_SIZES
+});

package/dist/tokens/index.mjs

@@ -0,0 +1,21 @@
+// src/tokens.ts
+var MIN_SIZES = {
+  /** WCAG 2.5.5 minimum interactive target, px. Applies to BOTH width and height. */
+  touchTarget: 44,
+  /** Floor width for the always-inline search field on mobile, px. */
+  searchInput: 200,
+  /** Generic minimum width/height for a secondary control (button, select), px. */
+  control: 44,
+  /** Max width of the brand wordmark before it truncates, px. */
+  wordmarkMaxWidth: 180
+};
+var BREAKPOINTS = {
+  /** Tailwind `sm`. */
+  sm: 640,
+  /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
+  md: 768
+};
+export {
+  BREAKPOINTS,
+  MIN_SIZES
+};

package/dist/tokens.css

@@ -0,0 +1,25 @@
+/*
+ * @meetreeve/ui design tokens for Tailwind v4 consumers.
+ *
+ * Import once, after `@import "tailwindcss";`, in your global stylesheet:
+ *   @import "@meetreeve/ui/tokens.css";
+ *
+ * Values mirror MIN_SIZES / BREAKPOINTS in ./tokens.ts. The `--breakpoint-*`
+ * entries reaffirm Tailwind's own sm/md defaults so the JS and CSS agree.
+ *
+ * `@theme static` (not plain `@theme`): Tailwind v4 tree-shakes theme variables
+ * that no utility references, but these `--mf-*` tokens are meant to be read
+ * DIRECTLY by consumers (e.g. `min-width: var(--mf-min-search-input)`), so they
+ * must always emit into the published CSS.
+ */
+@theme static {
+  /* Minimum interactive sizes. */
+  --mf-min-touch-target: 44px;
+  --mf-min-search-input: 200px;
+  --mf-min-control: 44px;
+  --mf-wordmark-max-width: 180px;
+
+  /* Breakpoints aligned to Tailwind defaults. */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@meetreeve/ui",
+  "version": "0.2.0",
+  "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, and AppSidebar's viewport-driven auto-collapse ladder.",
+  "license": "UNLICENSED",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.mjs",
+      "require": "./dist/tokens/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "lucide-react": ">=0.400.0",
+    "next": ">=14",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "zod": ">=3.24.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5.1.3",
+    "jsdom": "^28.0.0",
+    "lucide-react": "^0.400.0",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tsup": "^8.0.0",
+    "typescript": "5.9.3",
+    "vitest": "^4.0.18",
+    "zod": "^4.4.3"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "ui",
+    "brand",
+    "header",
+    "meetreeve",
+    "design-tokens"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MindFortressInc/reeve-frontend.git",
+    "directory": "packages/ui"
+  }
+}