@sequenceholdings/atlas-ui 0.1.2 → 0.1.5

package/package.json

@@ -1,9 +1,15 @@
 {
   "name": "@sequenceholdings/atlas-ui",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sequenceholdings/studio.git",
+    "directory": "shared/services/atlas-ui"
+  },
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "Atlas shared UI component library for Artifact Studio apps",
   "type": "module",
   "sideEffects": [
@@ -11,21 +17,27 @@
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
+      "types": "./dist/index.d.ts",
       "default": "./dist/index.mjs"
     },
     "./charts": {
-      "types": "./src/charts.ts",
+      "types": "./dist/charts.d.ts",
       "default": "./dist/charts.mjs"
     },
     "./tokens.css": "./dist/tokens.css",
+    "./tokens.v2.css": "./tokens.v2.css",
+    "./tokens.v2.tenants.css": "./tokens.v2.tenants.css",
+    "./theme.v2.css": "./theme.v2.css",
     "./package.json": "./package.json"
   },
+  "//tokens.v2.tenants.css": "The OpCo [data-theme] overlay. It MUST be exported — Tailwind v4 resolves the @import through the package exports map (under the `style` condition), so without this entry the Atlas CSS build fails with 'not exported under the condition style'. It is intentionally kept OUT of `files` so it is NOT in the published tarball (the shared package stays opco-free, DES-127); only the Atlas monorepo build (which resolves via the workspace symlink) consumes it. No published consumer imports this subpath.",
   "files": [
     "dist",
-    "src"
+    "tokens.v2.css",
+    "theme.v2.css"
   ],
   "peerDependencies": {
+    "@tanstack/react-query": "^4.36.1",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0"
   },
@@ -61,17 +73,25 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "lucide-react": "^0.546.0",
+    "recharts": "^2.15.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
+    "@microsoft/api-extractor": "^7.58.7",
+    "@types/js-yaml": "^4.0.9",
     "@vitejs/plugin-react": "^5.0.0",
+    "js-yaml": "^4.1.1",
+    "tsx": "^4.19.2",
     "typescript": "^5.6.0",
-    "vite": "8.0.8",
-    "vite-plugin-dts": "^4.5.4"
+    "vite": "8.0.16",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.5"
   },
   "scripts": {
-    "build": "vite build && cp src/tokens.css dist/tokens.css",
+    "build": "tsx scripts/generate-tokens.ts && vite build && cp src/tokens.css dist/tokens.css",
+    "generate:tokens": "tsx scripts/generate-tokens.ts",
+    "test": "vitest run",
     "type-check": "tsc --noEmit"
   }
 }

package/theme.v2.css

@@ -0,0 +1,225 @@
+/* GENERATED by atlas-ui/scripts/generate-tokens.ts — do not edit by hand. */
+/* Tailwind @theme utility bridge (DES-223): every semantic role → a --color-* utility. */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-shell: var(--shell);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-expressive: var(--expressive);
+  --color-expressive-tint: var(--expressive-tint);
+  --color-expressive-border: var(--expressive-border);
+  --color-expressive-text: var(--expressive-text);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-foreground-primary: var(--text-primary);
+  --color-foreground-secondary: var(--text-secondary);
+  --color-foreground-muted: var(--text-muted);
+  --color-foreground-placeholder: var(--text-placeholder);
+  --color-foreground-disabled: var(--text-disabled);
+  --color-foreground-on-color: var(--text-on-color);
+  --color-field: var(--field);
+  --color-field-hover: var(--field-hover);
+  --color-field-disabled: var(--field-disabled);
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
+  --color-link-visited: var(--link-visited);
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-on-color: var(--icon-on-color);
+  --color-icon-disabled: var(--icon-disabled);
+  --color-inverse: var(--inverse);
+  --color-inverse-foreground: var(--inverse-foreground);
+  --color-overlay: var(--overlay);
+  --color-skeleton: var(--skeleton);
+  --color-skeleton-foreground: var(--skeleton-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-success-tint: var(--success-tint);
+  --color-success-text: var(--success-text);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-warning-tint: var(--warning-tint);
+  --color-warning-text: var(--warning-text);
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+  --color-danger-tint: var(--danger-tint);
+  --color-danger-text: var(--danger-text);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-info-tint: var(--info-tint);
+  --color-info-text: var(--info-text);
+  --color-chart-1: var(--chart-1);
+  --color-chart-1-soft: var(--chart-1-soft);
+  --color-chart-2: var(--chart-2);
+  --color-chart-2-soft: var(--chart-2-soft);
+  --color-chart-3: var(--chart-3);
+  --color-chart-3-soft: var(--chart-3-soft);
+  --color-chart-4: var(--chart-4);
+  --color-chart-4-soft: var(--chart-4-soft);
+  --color-chart-5: var(--chart-5);
+  --color-chart-5-soft: var(--chart-5-soft);
+  --color-chart-success: var(--chart-success);
+  --color-chart-success-soft: var(--chart-success-soft);
+  --color-chart-danger: var(--chart-danger);
+  --color-chart-danger-soft: var(--chart-danger-soft);
+  --color-chart-mono-1: var(--chart-mono-1);
+  --color-chart-mono-2: var(--chart-mono-2);
+  --color-chart-mono-3: var(--chart-mono-3);
+  --color-chart-mono-4: var(--chart-mono-4);
+  --color-chart-mono-5: var(--chart-mono-5);
+  --color-chart-adjacent-1: var(--chart-adjacent-1);
+  --color-chart-adjacent-1-soft: var(--chart-adjacent-1-soft);
+  --color-chart-adjacent-2: var(--chart-adjacent-2);
+  --color-chart-adjacent-2-soft: var(--chart-adjacent-2-soft);
+  --color-chart-adjacent-3: var(--chart-adjacent-3);
+  --color-chart-adjacent-3-soft: var(--chart-adjacent-3-soft);
+  --color-chart-adjacent-4: var(--chart-adjacent-4);
+  --color-chart-adjacent-4-soft: var(--chart-adjacent-4-soft);
+  --color-chart-adjacent-5: var(--chart-adjacent-5);
+  --color-chart-adjacent-5-soft: var(--chart-adjacent-5-soft);
+  --color-identity-1: var(--identity-1);
+  --color-identity-1-text: var(--identity-1-text);
+  --color-identity-2: var(--identity-2);
+  --color-identity-2-text: var(--identity-2-text);
+  --color-identity-3: var(--identity-3);
+  --color-identity-3-text: var(--identity-3-text);
+  --color-identity-4: var(--identity-4);
+  --color-identity-4-text: var(--identity-4-text);
+  --color-identity-5: var(--identity-5);
+  --color-identity-5-text: var(--identity-5-text);
+  --color-identity-6: var(--identity-6);
+  --color-identity-6-text: var(--identity-6-text);
+  --color-identity-7: var(--identity-7);
+  --color-identity-7-text: var(--identity-7-text);
+  --color-identity-8: var(--identity-8);
+  --color-identity-8-text: var(--identity-8-text);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-surface: var(--surface);
+  --color-surface-hover: var(--surface-hover);
+  --color-highlight: var(--highlight);
+  --color-brand: var(--brand);
+
+  /* ── non-colour roles (DES-298) ──
+     Tailwind v4 compiles the --text-x--* sub-properties into the text-x
+     utility itself, each behind a --tw-* fallback, so ONE class carries
+     size + leading + weight + tracking and an explicit `font-medium` at a
+     call site still wins. `uppercase` and `font-mono` stay separate
+     utilities: there is no @theme channel for either. */
+  --text-page-title: var(--type-page-title);
+  --text-page-title--line-height: var(--type-page-title-leading);
+  --text-page-title--font-weight: var(--type-page-title-weight);
+  --text-page-title--letter-spacing: var(--type-page-title-tracking);
+  --text-heading: var(--type-heading);
+  --text-heading--line-height: var(--type-heading-leading);
+  --text-heading--font-weight: var(--type-heading-weight);
+  --text-body: var(--type-body);
+  --text-body--line-height: var(--type-body-leading);
+  --text-body--font-weight: var(--type-body-weight);
+  --text-label: var(--type-label);
+  --text-label--line-height: var(--type-label-leading);
+  --text-label--font-weight: var(--type-label-weight);
+  --text-record-name: var(--type-record-name);
+  --text-record-name--line-height: var(--type-record-name-leading);
+  --text-record-name--font-weight: var(--type-record-name-weight);
+  --text-caption: var(--type-caption);
+  --text-caption--line-height: var(--type-caption-leading);
+  --text-caption--font-weight: var(--type-caption-weight);
+  --text-eyebrow: var(--type-eyebrow);
+  --text-eyebrow--line-height: var(--type-eyebrow-leading);
+  --text-eyebrow--font-weight: var(--type-eyebrow-weight);
+  --text-eyebrow--letter-spacing: var(--type-eyebrow-tracking);
+  --text-control: var(--type-control);
+  --text-control--line-height: var(--type-control-leading);
+  --text-control--font-weight: var(--type-control-weight);
+  --text-control-sm: var(--type-control-sm);
+  --text-control-sm--line-height: var(--type-control-sm-leading);
+  --text-control-sm--font-weight: var(--type-control-sm-weight);
+  --text-badge: var(--type-badge);
+  --text-badge--line-height: var(--type-badge-leading);
+  --text-badge--font-weight: var(--type-badge-weight);
+  --text-code: var(--type-code);
+  --text-code--line-height: var(--type-code-leading);
+  --text-code--font-weight: var(--type-code-weight);
+  --text-metric: var(--type-metric);
+  --text-metric--line-height: var(--type-metric-leading);
+  --text-metric--font-weight: var(--type-metric-weight);
+  --text-metric--letter-spacing: var(--type-metric-tracking);
+  --spacing-inline-tight: var(--space-inline-tight);
+  --spacing-inline: var(--space-inline);
+  --spacing-inline-loose: var(--space-inline-loose);
+  --spacing-compact-tight: var(--space-compact-tight);
+  --spacing-compact: var(--space-compact);
+  --spacing-default: var(--space-default);
+  --spacing-roomy: var(--space-roomy);
+  --spacing-stack-tight: var(--space-stack-tight);
+  --spacing-stack: var(--space-stack);
+  --spacing-stack-group: var(--space-stack-group);
+  --spacing-stack-section: var(--space-stack-section);
+  --radius-control: var(--corner-control);
+  --radius-badge: var(--corner-badge);
+  --radius-surface-nested: var(--corner-surface-nested);
+  --radius-surface: var(--corner-surface);
+  --shadow-flat: var(--elevation-flat);
+  --shadow-resting: var(--elevation-resting);
+  --shadow-popover: var(--elevation-popover);
+  --shadow-modal: var(--elevation-modal);
+  --ease-hover: var(--motion-hover-ease);
+  --ease-enter: var(--motion-enter-ease);
+  --ease-exit: var(--motion-exit-ease);
+
+  /* ── legacy typography (DES-93) ──
+     `--text-xs--font-weight` must live in @theme: a gated :root
+     declaration alone does not make Tailwind emit font-weight on
+     `.text-xs` (verified against @tailwindcss/postcss). */
+  --text-xs--font-weight: var(--ds-weight-medium);
+
+  /* DES-372 — default Tailwind shadow ladder → elevation roles.
+     Remaps the stock size utilities so ~850 shadow-sm/md/lg call sites
+     resolve to the same values as the roles, with no call-site churn.
+     Do NOT remap --shadow-inner (inset; different job). */
+  --shadow-2xs: var(--elevation-resting);
+  --shadow-xs: var(--elevation-resting);
+  --shadow-sm: var(--elevation-resting);
+  --shadow: var(--elevation-resting);
+  --shadow-md: var(--elevation-popover);
+  --shadow-lg: var(--elevation-popover);
+  --shadow-xl: var(--elevation-modal);
+  --shadow-2xl: var(--elevation-modal);
+
+  /* No --duration-* mapping: it is not a Tailwind v4 theme namespace, so it
+     mints nothing (verified). Read --motion-<role>-duration directly, or
+     `duration-[var(--motion-hover-duration)]`. Faking it with --animate-*
+     would put a keyframe name where a duration belongs. */
+}
+
+@utility text-eyebrow {
+  text-transform: uppercase;
+}
+
+@utility text-code {
+  font-family: var(--font-mono);
+}