@campminder/ds 0.1.0

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@campminder/ds",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Campminder design system components, packaged. base-ui-era shadcn primitives + domain components + design tokens, for apps that prefer npm install over shadcn copy-source.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/campminder/campminder-ui.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "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"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "sync": "node scripts/sync-from-registry.mjs",
+    "gen:tokens": "node scripts/gen-tokens-css.mjs",
+    "build": "node scripts/sync-from-registry.mjs && node scripts/gen-tokens-css.mjs && tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@base-ui/react": ">=1"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5",
+    "class-variance-authority": "^0.7",
+    "clsx": "^2",
+    "cmdk": "^1",
+    "lucide-react": "^1",
+    "react-hook-form": "^7",
+    "react-phone-number-input": "^3",
+    "sonner": "^2",
+    "tailwind-merge": "^3",
+    "zod": "^4"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8.5.0",
+    "typescript": "^5"
+  }
+}

package/styles.css

@@ -0,0 +1,232 @@
+/* GENERATED from app/globals.css by scripts/gen-tokens-css.mjs — do not edit.
+   Run `npm run build` (or `node scripts/gen-tokens-css.mjs`) to regenerate.
+   Consumers: @import "@campminder/ds/styles.css" after @import "tailwindcss". */
+
+@theme {
+  /* Inter is loaded via next/font as --font-inter; fall back to webfont/system Inter */
+  --font-sans: var(--font-inter), "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+  --color-background: var(--base-background, #ffffff);
+  --color-foreground: var(--base-foreground, #0a0a0a);
+  --color-foreground-secondary: var(--base-foreground-secondary, #525252);
+  --color-foreground-strong: var(--base-foreground-strong, #171717);
+  --color-card: var(--base-card, var(--base-background, #ffffff));
+  --color-card-foreground: var(--base-card-foreground, var(--base-foreground, #0a0a0a));
+  --color-popover: var(--base-popover, var(--base-background, #ffffff));
+  --color-popover-foreground: var(--base-popover-foreground, var(--base-foreground, #0a0a0a));
+  --color-primary: var(--base-primary, #380f8c);
+  --color-primary-foreground: var(--base-primary-foreground, #fafafa);
+  --color-primary-soft: var(--base-primary-soft, #c3b7dd);
+  --color-secondary: var(--base-secondary, #efeffc);
+  --color-secondary-foreground: var(--base-secondary-foreground, #20174a);
+  --color-muted: var(--base-muted, #f5f5f5);
+  --color-muted-foreground: var(--base-muted-foreground, #525252);
+  --color-accent: var(--base-accent, #f5f5f5);
+  --color-accent-foreground: var(--base-accent-foreground, #0a0a0a);
+  --color-destructive: var(--base-destructive, #dc2626);
+  --color-destructive-foreground: var(--base-destructive-foreground, #ffffff);
+  --color-destructive-strong: var(--base-destructive-strong, #991b1b);
+  --color-destructive-surface: var(--base-destructive-surface, #fef2f2);
+  --color-destructive-border: var(--base-destructive-border, #fca5a5);
+  --color-border: var(--base-border, #e5e5e5);
+  --color-border-strong: var(--base-border-strong, #d4d4d4);
+  --color-input: var(--base-border, #e5e5e5);
+  --color-ring: var(--base-ring, #380f8c);
+  --color-ring-soft: var(--base-ring-soft, #a3a3a3);
+  --color-success: var(--base-success, #16a34a);
+  --color-success-strong: var(--base-success-strong, #22c55e);
+  --color-success-surface: var(--base-success-surface, #f7faf7);
+  --color-success-text: var(--base-success-text, #15803d);
+  --color-warning: var(--base-warning, #ea580c);
+  --color-warning-text: var(--base-warning-text, #b45309);
+  --color-info: var(--base-info, #0284c7);
+  --color-info-strong: var(--base-info-strong, #2563eb);
+
+  /* Admin sidebar — brand-purple gradient surface */
+  --color-sidebar: var(--base-sidebar-primary, #ffffff);
+  --color-sidebar-foreground: var(--base-sidebar-foreground, #f5f3ff);
+  --color-sidebar-primary: var(--base-sidebar-primary, #ffffff);
+  --color-sidebar-primary-foreground: var(--base-sidebar-primary-foreground, #380f8c);
+  --color-sidebar-accent: var(--base-sidebar-accent, rgb(255 255 255 / 0.10));
+  --color-sidebar-accent-foreground: var(--base-sidebar-accent-foreground, #ffffff);
+  --color-sidebar-border: var(--base-sidebar-border, rgb(255 255 255 / 0.15));
+  --color-sidebar-ring: var(--base-sidebar-ring, #c3b7dd);
+
+  /* Avatar palette — 6 brand-aligned hues for person initials */
+  --color-avatar-1: var(--base-avatar-1, #c8baf0);
+  --color-avatar-1-foreground: var(--base-avatar-1-foreground, #2c2068);
+  --color-avatar-2: var(--base-avatar-2, #f0bbdc);
+  --color-avatar-2-foreground: var(--base-avatar-2-foreground, #5e2349);
+  --color-avatar-3: var(--base-avatar-3, #b9d6f3);
+  --color-avatar-3-foreground: var(--base-avatar-3-foreground, #1f3866);
+  --color-avatar-4: var(--base-avatar-4, #b1e0c8);
+  --color-avatar-4-foreground: var(--base-avatar-4-foreground, #1b4633);
+  --color-avatar-5: var(--base-avatar-5, #f5d0a6);
+  --color-avatar-5-foreground: var(--base-avatar-5-foreground, #5e3915);
+  --color-avatar-6: var(--base-avatar-6, #d6e0a8);
+  --color-avatar-6-foreground: var(--base-avatar-6-foreground, #3d4715);
+}
+
+:root {
+  /* Colors - Base */
+  --base-primary: #380f8c;
+  --base-primary-foreground: #fafafa;
+  --base-secondary: #efeffc;
+  --base-secondary-foreground: #20174a;
+  --base-destructive: #dc2626;
+  --base-destructive-foreground: #ffffff;
+  --base-success: #10b981;
+  --base-warning: #f59e0b;
+  --base-info: #0ea5e9;
+  --base-foreground: #1c1917;
+  --base-foreground-secondary: #57534e;
+  --base-foreground-strong: #292524;
+  --base-background: #ffffff;
+  --base-muted-foreground: #57534e;
+  --base-muted: #f5f5f4;
+  --base-border: #e7e5e4;
+  --base-border-strong: #d6d3d1;
+  --base-accent: #f5f5f4;
+  --base-accent-foreground: #1c1917;
+  --base-ring: #380f8c;
+  --base-ring-soft: #a8a29e;
+  --base-primary-soft: #c3b7dd;
+  --base-destructive-strong: #991b1b;
+  --base-destructive-surface: #fef2f2;
+  --base-destructive-border: #fca5a5;
+  --base-success-strong: #059669;
+  --base-success-surface: #ecfdf5;
+  --base-success-text: #15803d;
+  --base-warning-text: #b45309;
+  --base-info-strong: #0284c7;
+
+  /* Admin sidebar — heritage gradient (light mode default) */
+  --base-sidebar-gradient: linear-gradient(
+  152.45deg,
+  #851936 -26.73%,
+  #590e39 5.17%,
+  #25023d 42.09%
+  );
+  --base-sidebar-foreground: #f5f3ff;
+  --base-sidebar-primary: #ffffff;
+  --base-sidebar-primary-foreground: #380f8c;
+  --base-sidebar-accent: rgb(255 255 255 / 0.10);
+  --base-sidebar-accent-foreground: #ffffff;
+  --base-sidebar-border: rgb(255 255 255 / 0.15);
+  --base-sidebar-ring: #c3b7dd;
+
+  /* Avatar palette */
+  --base-avatar-1: #c8baf0;
+  --base-avatar-1-foreground: #2c2068;
+  --base-avatar-2: #f0bbdc;
+  --base-avatar-2-foreground: #5e2349;
+  --base-avatar-3: #b9d6f3;
+  --base-avatar-3-foreground: #1f3866;
+  --base-avatar-4: #b1e0c8;
+  --base-avatar-4-foreground: #1b4633;
+  --base-avatar-5: #f5d0a6;
+  --base-avatar-5-foreground: #5e3915;
+  --base-avatar-6: #d6e0a8;
+  --base-avatar-6-foreground: #3d4715;
+
+  /* Spacing */
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-1-5: 6px;
+  --spacing-2: 8px;
+  --spacing-2-5: 10px;
+  --spacing-3: 12px;
+  --spacing-3-5: 14px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-9: 36px;
+  --spacing-10: 40px;
+  --spacing-11: 44px;
+  --spacing-12: 48px;
+  --spacing-16: 64px;
+
+  /* Font Sizes */
+  --text-xs-size: 12px;
+  --text-sm-size: 14px;
+  --text-base-size: 16px;
+  --text-lg-size: 18px;
+  --text-xl-size: 20px;
+  --text-2xl-size: 24px;
+  --text-3xl-size: 30px;
+  --text-4xl-size: 36px;
+
+  /* Line Heights */
+  --text-xs-height: 18px;
+  --text-sm-height: 20px;
+  --text-base-height: 24px;
+  --text-lg-height: 28px;
+  --text-xl-height: 28px;
+  --text-2xl-height: 32px;
+  --text-3xl-height: 36px;
+  --text-4xl-height: 44px;
+
+  /* Font Weights */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Blurs */
+  --blur-xs: 4px;
+  --blur-sm: 8px;
+  --blur-md: 12px;
+  --blur-lg: 16px;
+  --blur-xl: 24px;
+  --blur-2xl: 40px;
+  --blur-3xl: 64px;
+
+  /* Custom heading sizes */
+  --heading-2xs-size: 25px;
+  --heading-2xs-height: 32px;
+  --heading-md-size: 38px;
+  --heading-md-height: 44px;
+  --heading-lg-size: 45px;
+  --heading-lg-height: 52px;
+  --heading-xl-size: 60px;
+  --heading-xl-height: 64px;
+
+  /* Custom spacing */
+  --container-padding-x: 24px;
+  --section-padding-y: 96px;
+  --section-title-gap-xs: 16px;
+  --section-title-gap-md: 20px;
+  --section-title-gap-lg: 20px;
+  --section-title-gap-xl: 24px;
+
+  /* Breakpoints */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* Container max-widths */
+  --container-3xs: 256px;
+  --container-2xs: 288px;
+  --container-xs: 320px;
+  --container-sm: 384px;
+  --container-md: 448px;
+  --container-lg: 512px;
+  --container-xl: 576px;
+  --container-2xl: 672px;
+  --container-3xl: 768px;
+  --container-4xl: 896px;
+  --container-5xl: 1024px;
+  --container-6xl: 1152px;
+  --container-7xl: 1280px;
+
+  color-scheme: light;
+}
+
+/* Scan the package's compiled components so Tailwind v4 keeps their classes. */
+@source "./dist";