@soulbatical/tetra-ui 0.1.0

package/dist/types/index.d.ts

@@ -0,0 +1,119 @@
+/** Configuration for the tetra UI framework */
+export interface TetraConfig {
+    /** API base URL (e.g., "http://localhost:3003") */
+    apiBaseUrl: string;
+    /** API prefix for admin routes (default: "api/admin") */
+    apiPrefix?: string;
+    /** Storage key prefix for localStorage/sessionStorage (default: "tetra") */
+    storagePrefix?: string;
+    /** Auth provider: JWT (custom backend) or Supabase */
+    authProvider: "jwt" | "supabase";
+    /** Function to get access token for API calls */
+    getAccessToken: () => Promise<string | null>;
+}
+/** Authenticated user */
+export interface AuthUser {
+    id: string;
+    email: string;
+    name?: string;
+    role?: string;
+    organizationId?: string;
+}
+/** Organization for multi-tenant */
+export interface Organization {
+    id: string;
+    name: string;
+    slug?: string;
+    role?: string;
+}
+/** Filter config from backend */
+export interface FilterConfig {
+    name: string;
+    type: "search" | "enum" | "boolean" | "date_range" | "related";
+    label?: string;
+    rpcParam?: string;
+    options?: Array<{
+        value: string;
+        label: string;
+        count?: number;
+    }>;
+    placeholder?: string;
+}
+/** Sort field config from backend */
+export interface SortFieldConfig {
+    field: string;
+    label: string;
+    defaultDirection?: "asc" | "desc";
+}
+/** Display config from backend /filters endpoint */
+export interface FeatureDisplayConfig {
+    filters: FilterConfig[];
+    sortFields?: SortFieldConfig[];
+    defaultSort?: string;
+    defaultSortOrder?: "asc" | "desc";
+    defaultLimit?: number;
+    display?: {
+        page?: PageDisplayConfig;
+        list?: ListDisplayConfig;
+        card?: CardDisplayConfig;
+    };
+    counts?: Record<string, {
+        total_count: number;
+    }>;
+}
+/** Page-level display config */
+export interface PageDisplayConfig {
+    title?: string;
+    icon?: string;
+    createButton?: {
+        label: string;
+        action?: string;
+    };
+}
+/** List-level display config */
+export interface ListDisplayConfig {
+    emptyState?: {
+        title: string;
+        description?: string;
+    };
+}
+/** Card display config */
+export interface CardDisplayConfig {
+    titleField?: string;
+    titleTemplate?: string;
+    imageField?: string;
+    badges?: Array<{
+        field: string;
+        variantMap?: Record<string, string>;
+    }>;
+    metadataRows?: Array<{
+        type: string;
+        icon?: string;
+        field?: string;
+        label?: string;
+        template?: string;
+    }>;
+    actions?: Array<{
+        type: string;
+        label: string;
+        endpoint?: string;
+        method?: string;
+        navigateTo?: string;
+    }>;
+}
+/** API response wrapper */
+export interface ApiResponse<T> {
+    data: T;
+    totalCount?: number;
+    error?: string;
+}
+/** Paginated list params */
+export interface ListParams {
+    offset?: number;
+    limit?: number;
+    sort?: string;
+    sortOrder?: "asc" | "desc";
+    search?: string;
+    [key: string]: string | number | boolean | undefined;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAIA,+CAA+C;AAC/C,MAAM,WAAW,WAAW;IAC1B,mDAAmD;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,YAAY,EAAE,KAAK,GAAG,UAAU,CAAC;IACjC,iDAAiD;IACjD,cAAc,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;CAC9C;AAED,yBAAyB;AACzB,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,oCAAoC;AACpC,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,iCAAiC;AACjC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qCAAqC;AACrC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACnC;AAED,oDAAoD;AACpD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,iBAAiB,CAAC;QACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;QACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;KAC1B,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAClD;AAED,gCAAgC;AAChC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACnD;AAED,gCAAgC;AAChC,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACtD;AAED,0BAA0B;AAC1B,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACrC,CAAC,CAAC;IACH,YAAY,CAAC,EAAE,KAAK,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC,CAAC;IACH,OAAO,CAAC,EAAE,KAAK,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC,CAAC;CACJ;AAED,2BAA2B;AAC3B,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,4BAA4B;AAC5B,MAAM,WAAW,UAAU;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;CACtD"}

package/dist/types/index.js

@@ -0,0 +1,5 @@
+// ============================================
+// Core types for @tetra/ui
+// ============================================
+export {};
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,+CAA+C;AAC/C,2BAA2B;AAC3B,+CAA+C"}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@soulbatical/tetra-ui",
+  "private": false,
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "version": "0.1.0",
+  "description": "Shared React frontend framework for VCA platform projects — config-driven components, hooks, providers, and styling",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles": {
+      "import": "./dist/styles/index.css",
+      "default": "./dist/styles/index.css"
+    },
+    "./styles/*": {
+      "import": "./src/styles/*",
+      "default": "./src/styles/*"
+    }
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": "^14.0.0 || ^15.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "next-themes": "^0.4.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@tanstack/react-query": "^5.0.0",
+    "next": "^15.0.0",
+    "next-themes": "^0.4.0",
+    "typescript": "^5.7.3"
+  },
+  "keywords": [
+    "tetra",
+    "ui",
+    "react",
+    "config-driven",
+    "multi-tenant",
+    "components",
+    "hooks"
+  ],
+  "author": "Albert Barth",
+  "license": "MIT"
+}

package/src/styles/dark-mode.css

@@ -0,0 +1,135 @@
+/**
+ * DARK MODE OVERRIDES — STANDARD FOR ALL VCA PROJECTS
+ * Remaps light Tailwind utilities to dark equivalents when .dark is on <html>.
+ *
+ * This allows pages built with bg-gray-50/bg-white to automatically
+ * convert to dark backgrounds without adding dark: variants everywhere.
+ *
+ * Import in your project's globals.css AFTER tailwind:
+ *   @import "tailwindcss";
+ *   @custom-variant dark (&:where(.dark, .dark *));
+ *   @import "@tetra/ui/styles/theme.css";
+ *   @import "@tetra/ui/styles/dark-mode.css";
+ */
+
+/* ─── Page backgrounds ─────────────────────────────── */
+
+.dark .bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 7 18 / var(--tw-bg-opacity)) !important; /* gray-950 */
+}
+
+.dark main .bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity)) !important; /* gray-900 */
+}
+
+/* ─── Borders ──────────────────────────────────────── */
+
+.dark main .border-gray-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity)) !important; /* gray-700 */
+}
+.dark main .border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity)) !important; /* gray-700 */
+}
+.dark main .border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important; /* gray-600 */
+}
+
+/* ─── Text ─────────────────────────────────────────── */
+
+.dark main .text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity)) !important; /* gray-100 */
+}
+.dark main .text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(229 231 235 / var(--tw-text-opacity)) !important; /* gray-200 */
+}
+.dark main .text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity)) !important; /* gray-300 */
+}
+.dark main .text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity)) !important; /* gray-400 */
+}
+
+/* ─── Inputs ───────────────────────────────────────── */
+
+.dark main input.bg-white,
+.dark main select.bg-white,
+.dark main textarea.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important; /* gray-800 */
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity)) !important; /* gray-100 */
+}
+
+/* ─── Hover states ─────────────────────────────────── */
+
+.dark main .hover\:bg-gray-50:hover {
+  background-color: rgb(31 41 55 / 1) !important; /* gray-800 */
+}
+
+/* ─── Badge colors (green) ─────────────────────────── */
+
+.dark main .bg-green-100 {
+  background-color: rgb(6 78 59 / 0.3) !important;
+}
+.dark main .text-green-700,
+.dark main .text-green-800 {
+  color: rgb(74 222 128) !important; /* green-400 */
+}
+
+/* ─── Badge colors (yellow) ────────────────────────── */
+
+.dark main .bg-yellow-100 {
+  background-color: rgb(113 63 18 / 0.3) !important;
+}
+.dark main .text-yellow-700,
+.dark main .text-yellow-800 {
+  color: rgb(250 204 21) !important; /* yellow-400 */
+}
+
+/* ─── Badge colors (blue) ──────────────────────────── */
+
+.dark main .bg-blue-100 {
+  background-color: rgb(30 58 138 / 0.3) !important;
+}
+.dark main .text-blue-700,
+.dark main .text-blue-800 {
+  color: rgb(96 165 250) !important; /* blue-400 */
+}
+
+/* ─── Badge colors (red) ───────────────────────────── */
+
+.dark main .bg-red-100 {
+  background-color: rgb(127 29 29 / 0.3) !important;
+}
+.dark main .text-red-700,
+.dark main .text-red-800 {
+  color: rgb(248 113 113) !important; /* red-400 */
+}
+
+/* ─── Badge colors (indigo) ────────────────────────── */
+
+.dark main .bg-indigo-100 {
+  background-color: rgb(49 46 129 / 0.3) !important;
+}
+.dark main .text-indigo-700,
+.dark main .text-indigo-800 {
+  color: rgb(129 140 248) !important; /* indigo-400 */
+}
+
+/* ─── Badge colors (gray) ──────────────────────────── */
+
+.dark main .bg-gray-100 {
+  background-color: rgb(31 41 55 / 0.5) !important; /* gray-800/50 */
+}
+.dark main .bg-gray-200 {
+  background-color: rgb(55 65 81) !important; /* gray-700 */
+}

package/src/styles/theme.css

@@ -0,0 +1,105 @@
+/**
+ * SHADCN/UI THEME — STANDARD FOR ALL VCA PROJECTS
+ * HSL space-separated values (shadcn convention)
+ * Usage: hsl(var(--background)) or hsl(var(--foreground))
+ *
+ * Import this in your project's globals.css:
+ *   @import "@tetra/ui/styles/theme.css";
+ */
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 12%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    --sidebar-background: 222.2 84% 4.9%;
+    --sidebar-foreground: 210 40% 98%;
+    --sidebar-primary: 210 40% 98%;
+    --sidebar-primary-foreground: 222.2 47.4% 11.2%;
+    --sidebar-accent: 217.2 32.6% 17.5%;
+    --sidebar-accent-foreground: 210 40% 98%;
+    --sidebar-border: 217.2 32.6% 12%;
+    --sidebar-ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    @apply text-muted-foreground/40;
+  }
+}