@sequenceholdings/atlas-ui 0.1.5 → 0.3.2

package/motion.css

@@ -0,0 +1,75 @@
+/* GENERATED by atlas-ui/scripts/generate-tokens.ts — do not edit by hand. */
+/* Shared animation tokens, keyframes, and reduced-motion policy (DES-97). */
+
+@theme inline {
+  --animate-fade-in: fade-in var(--motion-enter-duration) var(--motion-enter-ease);
+  --animate-slide-in: slide-in var(--motion-enter-duration) var(--motion-enter-ease);
+  --animate-scale-in: scale-in var(--motion-enter-duration) var(--motion-enter-ease);
+  --animate-skeleton: skeleton-loading 1.5s infinite;
+  --animate-skeleton-vertical: skeleton-loading-vertical 1.5s infinite;
+  --animate-heartbeat: heartbeat-pulse 1.5s var(--motion-enter-ease) infinite;
+  --animate-bounce-dot: bounce 1.4s infinite ease-in-out both;
+  --animate-pulse-glow: pulse-glow 3s ease-in-out infinite;
+  --animate-shimmer: shimmer 1.5s infinite;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes scale-in {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes skeleton-loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@keyframes skeleton-loading-vertical {
+  0% { background-position: 0 200%; }
+  100% { background-position: 0 -200%; }
+}
+
+@keyframes heartbeat-pulse {
+  0% { width: 20px; height: 20px; opacity: 0.6; }
+  50% { width: 40px; height: 40px; opacity: 0.3; margin-left: -10px; margin-top: -10px; }
+  100% { width: 20px; height: 20px; opacity: 0; }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+@keyframes pulse-glow {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 197, 160, 0.4); }
+  50% { box-shadow: 0 0 0 8px rgba(29, 197, 160, 0); }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+/* Preserve lifecycle events while reducing CSS motion to a single frame.
+   JS-driven animation loops must honor the media query in their own runtime. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-delay: 0ms !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.5",
+  "version": "0.3.2",
   "description": "Atlas shared UI component library for Artifact Studio apps",
   "type": "module",
   "sideEffects": [
@@ -28,13 +28,15 @@
     "./tokens.v2.css": "./tokens.v2.css",
     "./tokens.v2.tenants.css": "./tokens.v2.tenants.css",
     "./theme.v2.css": "./theme.v2.css",
+    "./motion.css": "./motion.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",
     "tokens.v2.css",
-    "theme.v2.css"
+    "theme.v2.css",
+    "motion.css"
   ],
   "peerDependencies": {
     "@tanstack/react-query": "^4.36.1",
@@ -66,7 +68,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tabler/icons-react": "^3.36.1",
+    "@tabler/icons-react": "^3.45.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.19",
     "class-variance-authority": "^0.7.1",

package/theme.v2.css

@@ -44,10 +44,6 @@
   --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);
@@ -139,6 +135,9 @@
   --text-body: var(--type-body);
   --text-body--line-height: var(--type-body-leading);
   --text-body--font-weight: var(--type-body-weight);
+  --text-cell: var(--type-cell);
+  --text-cell--line-height: var(--type-cell-leading);
+  --text-cell--font-weight: var(--type-cell-weight);
   --text-label: var(--type-label);
   --text-label--line-height: var(--type-label-leading);
   --text-label--font-weight: var(--type-label-weight);
@@ -180,6 +179,7 @@
   --spacing-stack-group: var(--space-stack-group);
   --spacing-stack-section: var(--space-stack-section);
   --radius-control: var(--corner-control);
+  --radius-field: var(--corner-field);
   --radius-badge: var(--corner-badge);
   --radius-surface-nested: var(--corner-surface-nested);
   --radius-surface: var(--corner-surface);
@@ -223,3 +223,18 @@
 @utility text-code {
   font-family: var(--font-mono);
 }
+
+@utility size-icon {
+  width: var(--icon);
+  height: var(--icon);
+}
+
+@utility size-icon-sm {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+@utility size-icon-lg {
+  width: var(--icon-lg);
+  height: var(--icon-lg);
+}

package/tokens.v2.css

@@ -184,10 +184,6 @@
   --link: var(--ds-expressive-600);
   --link-hover: var(--ds-expressive-700);
   --link-visited: var(--ds-expressive-800);
-  --icon-primary: var(--ds-neutral-950);
-  --icon-secondary: var(--ds-neutral-600);
-  --icon-on-color: var(--ds-neutral-0);
-  --icon-disabled: var(--ds-neutral-400);
   --inverse: var(--ds-neutral-900);
   --inverse-foreground: var(--ds-neutral-0);
   --overlay: color-mix(in oklab, var(--ds-neutral-950) 50%, transparent);
@@ -305,10 +301,14 @@
   --type-heading: var(--ds-size-14);
   --type-heading-leading: var(--ds-leading-normal);
   --type-heading-weight: var(--ds-weight-semibold);
-  /* text-body — Default. Prose, values, anything with no more specific role. 13px under compact density. */
+  /* text-body — Default. Linear prose and general UI copy — paragraphs, descriptions, empty states, helper text. Anything you read as sentences. Prefer text-cell for scannable collection values. */
   --type-body: var(--ds-size-14);
   --type-body-leading: var(--ds-leading-relaxed);
   --type-body-weight: var(--ds-weight-regular);
+  /* text-cell — Primary value in a scannable collection — table body cells, heatmap values, key/value row values, dense list meta. One line (or truncated), not a paragraph. Prefer text-body for multi-sentence prose. */
+  --type-cell: var(--ds-size-13);
+  --type-cell-leading: var(--ds-leading-relaxed);
+  --type-cell-weight: var(--ds-weight-regular);
   /* text-label — Labels a form control. Inside <Label> or <label>. */
   --type-label: var(--ds-size-14);
   --type-label-leading: var(--ds-leading-normal);
@@ -358,7 +358,8 @@
   --space-stack: var(--ds-space-8); /* Between rows inside a group. */
   --space-stack-group: var(--ds-space-16); /* Between groups within a section. */
   --space-stack-section: var(--ds-space-24); /* Between page sections. */
-  --corner-control: var(--ds-radius-full); /* Operable AND one line tall — button, toggle, tab, segmented control, input, select trigger. */
+  --corner-control: var(--ds-radius-full); /* Operable AND one line tall, and PRESSED rather than filled — button, toggle, tab, segmented control. */
+  --corner-field: var(--ds-radius-8); /* A control you type or pick a value INTO — input, select trigger, date field, combobox trigger. Anything wearing bg-field. */
   --corner-badge: var(--ds-radius-4); /* A label ABOUT something, not something you operate — badge, tag, count, code chip. */
   --corner-surface-nested: var(--ds-radius-8); /* A container inside another container — inset well, code block in a card, thumbnail. */
   --corner-surface: var(--ds-radius-12); /* A top-level container, or anything taller than one line — card, panel, dialog, menu surface, textarea. */
@@ -366,6 +367,9 @@
   --elevation-resting: var(--ds-shadow-1); /* A card that lifts off the page but never moves. */
   --elevation-popover: var(--ds-shadow-2); /* Opens over the page and closes on dismiss — menu, select, tooltip. */
   --elevation-modal: var(--ds-shadow-3); /* Blocks the page behind it — dialog, sheet. */
+  --icon: var(--ds-size-16); /* Icon inside a control or next to its label. The default. */
+  --icon-sm: var(--ds-size-12); /* Icon inside a small control (xs / icon-xs). A variant of icon, not a separate intent. */
+  --icon-lg: var(--ds-size-24); /* Standalone or page-title-adjacent affordance — larger than the control it sits near. */
   --motion-hover-duration: var(--ds-duration-fast); /* A state change under the cursor — colour, border, background. */
   --motion-hover-ease: var(--ds-ease-out);
   --motion-enter-duration: var(--ds-duration-base); /* Something appears — popover, dialog, drawer, toast. */
@@ -458,10 +462,6 @@
   --link: var(--ds-expressive-400);
   --link-hover: var(--ds-expressive-300);
   --link-visited: var(--ds-expressive-500);
-  --icon-primary: var(--ds-neutral-200);
-  --icon-secondary: var(--ds-neutral-500);
-  --icon-on-color: var(--ds-neutral-0);
-  --icon-disabled: var(--ds-neutral-700);
   --inverse: var(--ds-neutral-100);
   --inverse-foreground: var(--ds-neutral-900);
   --overlay: color-mix(in oklab, var(--ds-neutral-950) 50%, transparent);