@jdcpuwiz/homelab-ui 0.1.0

package/globals.css

@@ -0,0 +1,56 @@
+/*
+ * @jdcpuwiz/homelab-ui — global theme tokens (CSS variables).
+ *
+ * Consumer usage (Next.js): `import "@jdcpuwiz/homelab-ui/globals.css";`
+ * in `app/layout.tsx` (BEFORE your own globals.css if you have one, so
+ * yours can override).
+ *
+ * Defines the `--hl-*` token namespace consumed by both:
+ *   1. The package's compiled components (via Tailwind arbitrary-value
+ *      classes — they keep working even if you skip the preset).
+ *   2. The Tailwind preset (`@jdcpuwiz/homelab-ui/tailwind-preset`) —
+ *      maps `bg-sidebar`, `text-brand`, etc. onto these vars.
+ *
+ * Override any token at `:root` in your own CSS to re-skin a project
+ * without forking the package.
+ */
+
+:root {
+  /* Surfaces (darkest → lightest) */
+  --hl-background: #0f0f0f;
+  --hl-foreground: #ededed;
+  --hl-sidebar: #111111;
+  --hl-content: #0d0d0d;
+  --hl-card: #1e1e1e;
+  --hl-card-hover: #252525;
+  --hl-card-warm: #2a2620;
+
+  /* Borders */
+  --hl-border: #1e1e1e;
+  --hl-input-border: #333333;
+  --hl-input-border-hover: #555555;
+
+  /* Brand — identity only, never status semantics */
+  --hl-brand: #ff9900;
+  --hl-brand-hover: #cc6a1a;
+  --hl-brand-glow: #ffb84d;
+  --hl-brand-fg: #0a0a0a;
+
+  /* Page-title purple (doghouse convention — h1 only) */
+  --hl-title: #aa89b7;
+}
+
+html {
+  color-scheme: dark;
+}
+
+html,
+body {
+  background-color: var(--hl-background);
+  color: var(--hl-foreground);
+  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@jdcpuwiz/homelab-ui",
+  "version": "0.1.0",
+  "description": "Shared dark-theme UI primitives for the JdCpuWiz homelab — Sidebar, Button, Modal, PageHeader, TagChips, plus the canonical Tailwind preset, CSS vars, and next/font wiring.",
+  "license": "MIT",
+  "author": "Wiz <shad@deckerzoo.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JdCpuWiz/homelab-ui.git"
+  },
+  "homepage": "https://github.com/JdCpuWiz/homelab-ui#readme",
+  "bugs": {
+    "url": "https://github.com/JdCpuWiz/homelab-ui/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tailwind-preset": {
+      "require": "./tailwind-preset.cjs",
+      "import": "./tailwind-preset.cjs",
+      "default": "./tailwind-preset.cjs"
+    },
+    "./globals.css": "./globals.css"
+  },
+  "files": [
+    "dist",
+    "tailwind-preset.cjs",
+    "globals.css",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "next": ">=15",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": "^3"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.460.0",
+    "tailwind-merge": "^2.5.4"
+  },
+  "devDependencies": {
+    "@ladle/react": "^4.1.2",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.5.0",
+    "next": "^15",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^3.4.15",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "keywords": [
+    "homelab",
+    "ui",
+    "tailwind",
+    "react",
+    "design-system"
+  ]
+}

package/tailwind-preset.cjs

@@ -0,0 +1,135 @@
+/**
+ * @jdcpuwiz/homelab-ui — Tailwind preset
+ *
+ * Consumer usage (tailwind.config.{js,ts}):
+ *
+ *   module.exports = {
+ *     presets: [require("@jdcpuwiz/homelab-ui/tailwind-preset")],
+ *     content: [
+ *       "./app/**\/*.{ts,tsx}",
+ *       "./components/**\/*.{ts,tsx}",
+ *       // REQUIRED: pull classes from the package's compiled JS
+ *       "./node_modules/@jdcpuwiz/homelab-ui/dist/**\/*.{js,mjs,cjs}",
+ *     ],
+ *   };
+ *
+ * Provides the full token namespace shared by doghouse + asset-den:
+ *   bg-sidebar / bg-content / bg-card / bg-card-hover / bg-card-warm
+ *   text-brand / bg-brand / text-brand-fg
+ *   bg-status-success / bg-status-info / bg-status-warning / bg-status-danger /
+ *     bg-status-special / bg-status-neutral / bg-status-empty / bg-status-primary
+ *   border-border / border-input / border-input-hover
+ *   bg-overlay / bg-overlay-chip
+ *   text-title / text-ink-primary / text-ink-secondary / text-ink-tertiary
+ *   accent-upload / accent-download / accent-error-text / accent-live
+ *   rounded-widget / rounded-row / rounded-chip / rounded-panel
+ *   w-sidebar / w-logo / h-logo
+ *   font-sans / font-mono / font-display
+ *   text-2xs
+ *   shadow-lantern
+ *   animate-lantern-pulse
+ *
+ * The CSS variables for theme tokens live in `@jdcpuwiz/homelab-ui/globals.css`.
+ * The preset references them so consumers can override per-app by re-declaring
+ * the same vars at `:root`.
+ */
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--hl-background)",
+        foreground: "var(--hl-foreground)",
+        sidebar: "var(--hl-sidebar)",
+        content: "var(--hl-content)",
+        card: {
+          DEFAULT: "var(--hl-card)",
+          hover: "var(--hl-card-hover)",
+          warm: "var(--hl-card-warm)",
+        },
+        border: {
+          DEFAULT: "var(--hl-border)",
+          input: "var(--hl-input-border)",
+          inputHover: "var(--hl-input-border-hover)",
+        },
+        brand: {
+          DEFAULT: "var(--hl-brand)",
+          hover: "var(--hl-brand-hover)",
+          glow: "var(--hl-brand-glow)",
+          ink: "var(--hl-brand-fg)",
+          fg: "var(--hl-brand-fg)",
+        },
+        title: "var(--hl-title)",
+        status: {
+          success: "#15803d",
+          info: "#1d4ed8",
+          warning: "#eab308",
+          danger: "#b91c1c",
+          special: "#6d28d9",
+          neutral: "#6b7280",
+          empty: "#4b5563",
+          primary: "var(--hl-brand)",
+        },
+        accent: {
+          upload: "#a78bfa",
+          download: "#38bdf8",
+          errorText: "#f87171",
+          live: "#ef4444",
+        },
+        overlay: {
+          DEFAULT: "rgba(0,0,0,0.9)",
+          chip: "rgba(0,0,0,0.6)",
+        },
+        ink: {
+          primary: "#ffffff",
+          secondary: "rgba(255,255,255,0.60)",
+          tertiary: "rgba(255,255,255,0.40)",
+          disabled: "rgba(255,255,255,0.30)",
+        },
+      },
+      fontFamily: {
+        sans: ["var(--font-geist-sans)", "system-ui", "sans-serif"],
+        mono: ["var(--font-geist-mono)", "ui-monospace", "monospace"],
+        display: [
+          "var(--font-orbitron)",
+          "var(--font-geist-sans)",
+          "sans-serif",
+        ],
+      },
+      fontSize: {
+        "2xs": ["10px", { lineHeight: "14px" }],
+      },
+      borderRadius: {
+        widget: "0.75rem",
+        row: "0.5rem",
+        chip: "0.25rem",
+        panel: "1rem",
+      },
+      spacing: {
+        sidebar: "15rem",
+        logo: "9rem",
+      },
+      ringColor: {
+        DEFAULT: "var(--hl-brand-glow)",
+      },
+      ringWidth: {
+        DEFAULT: "2px",
+      },
+      boxShadow: {
+        lantern: "0 0 24px rgba(255,184,77,0.25)",
+      },
+      keyframes: {
+        "lantern-pulse": {
+          "0%, 100%": { boxShadow: "0 0 12px rgba(255,184,77,0.2)" },
+          "50%": { boxShadow: "0 0 28px rgba(255,184,77,0.45)" },
+        },
+      },
+      animation: {
+        "lantern-pulse": "lantern-pulse 1.8s ease-in-out infinite",
+      },
+    },
+  },
+  plugins: [],
+};