@sequenceholdings/atlas-ui 0.1.3 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/chart-D6BE0zF5.js +18381 -0
  2. package/dist/charts.d.ts +8 -12
  3. package/dist/charts.mjs +1276 -7572
  4. package/dist/index.d.ts +607 -477
  5. package/dist/index.mjs +15631 -31844
  6. package/dist/tokens.css +0 -36
  7. package/motion.css +75 -0
  8. package/package.json +19 -5
  9. package/theme.v2.css +240 -0
  10. package/tokens.v2.css +537 -0
  11. package/dist/utils-BZS7Y02J.js +0 -1692
package/dist/tokens.css CHANGED
@@ -20,12 +20,6 @@
20
20
  --font-size-sm: 14px;
21
21
  --font-size-md: 16px;
22
22
  --font-size-lg: 26px;
23
- --spacing-xs: 4px;
24
- --spacing-sm: 8px;
25
- --spacing-md: 12px;
26
- --spacing-lg: 16px;
27
- --spacing-xl: 24px;
28
- --spacing-2xl: 32px;
29
23
  --radius-sm: 8px;
30
24
  --radius-md: 10px;
31
25
  --radius-lg: 14px;
@@ -70,12 +64,6 @@
70
64
  --rose-800: rgba(161, 16, 67, 1);
71
65
  --success-600: rgba(3, 152, 85, 1);
72
66
 
73
- /* Elevations */
74
- --elevation-1: 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 4px 30px rgba(0, 0, 0, 0.08);
75
- --elevation-2: 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 2px 12px rgba(0, 0, 0, 0.08);
76
- --elevation-3: 0px 0px 1px rgba(9, 10, 12, 0.5), 0px 0px 3px rgba(9, 10, 12, 0.08);
77
- --elevation-4: 0px 0px 1px rgba(0, 0, 0, 0.45);
78
-
79
67
  /* shadcn semantic tokens */
80
68
  --background: oklch(1 0 0);
81
69
  --foreground: oklch(0.145 0 0);
@@ -125,30 +113,6 @@
125
113
  --color-green-600: #099250;
126
114
  --color-pink-600: #DD2590;
127
115
 
128
- /* Spacing */
129
- --spacing-xs: 0.25rem;
130
- --spacing-sm: 0.5rem;
131
- --spacing-md: 0.75rem;
132
- --spacing-lg: 1rem;
133
- --spacing-xl: 1.5rem;
134
- --spacing-2xl: 2rem;
135
-
136
- /* Container widths */
137
- --max-width-3xs: 16rem;
138
- --max-width-2xs: 18rem;
139
- --max-width-xs: 20rem;
140
- --max-width-sm: 24rem;
141
- --max-width-md: 28rem;
142
- --max-width-lg: 32rem;
143
- --max-width-xl: 36rem;
144
- --max-width-2xl: 42rem;
145
- --max-width-3xl: 48rem;
146
- --max-width-4xl: 56rem;
147
- --max-width-5xl: 64rem;
148
- --max-width-6xl: 72rem;
149
- --max-width-7xl: 80rem;
150
- --max-width-prose: 65ch;
151
-
152
116
  /* Border Radius */
153
117
  --radius-xs: 0.25rem;
154
118
  --radius-sm: 0.5rem;
package/motion.css ADDED
@@ -0,0 +1,75 @@
1
+ /* GENERATED by atlas-ui/scripts/generate-tokens.ts — do not edit by hand. */
2
+ /* Shared animation tokens, keyframes, and reduced-motion policy (DES-97). */
3
+
4
+ @theme inline {
5
+ --animate-fade-in: fade-in var(--motion-enter-duration) var(--motion-enter-ease);
6
+ --animate-slide-in: slide-in var(--motion-enter-duration) var(--motion-enter-ease);
7
+ --animate-scale-in: scale-in var(--motion-enter-duration) var(--motion-enter-ease);
8
+ --animate-skeleton: skeleton-loading 1.5s infinite;
9
+ --animate-skeleton-vertical: skeleton-loading-vertical 1.5s infinite;
10
+ --animate-heartbeat: heartbeat-pulse 1.5s var(--motion-enter-ease) infinite;
11
+ --animate-bounce-dot: bounce 1.4s infinite ease-in-out both;
12
+ --animate-pulse-glow: pulse-glow 3s ease-in-out infinite;
13
+ --animate-shimmer: shimmer 1.5s infinite;
14
+ }
15
+
16
+ @keyframes fade-in {
17
+ from { opacity: 0; }
18
+ to { opacity: 1; }
19
+ }
20
+
21
+ @keyframes slide-in {
22
+ from { transform: translateX(100%); }
23
+ to { transform: translateX(0); }
24
+ }
25
+
26
+ @keyframes scale-in {
27
+ from { transform: scale(0.95); opacity: 0; }
28
+ to { transform: scale(1); opacity: 1; }
29
+ }
30
+
31
+ @keyframes skeleton-loading {
32
+ 0% { background-position: 200% 0; }
33
+ 100% { background-position: -200% 0; }
34
+ }
35
+
36
+ @keyframes skeleton-loading-vertical {
37
+ 0% { background-position: 0 200%; }
38
+ 100% { background-position: 0 -200%; }
39
+ }
40
+
41
+ @keyframes heartbeat-pulse {
42
+ 0% { width: 20px; height: 20px; opacity: 0.6; }
43
+ 50% { width: 40px; height: 40px; opacity: 0.3; margin-left: -10px; margin-top: -10px; }
44
+ 100% { width: 20px; height: 20px; opacity: 0; }
45
+ }
46
+
47
+ @keyframes bounce {
48
+ 0%, 80%, 100% { transform: scale(0); }
49
+ 40% { transform: scale(1); }
50
+ }
51
+
52
+ @keyframes pulse-glow {
53
+ 0%, 100% { box-shadow: 0 0 0 0 rgba(29, 197, 160, 0.4); }
54
+ 50% { box-shadow: 0 0 0 8px rgba(29, 197, 160, 0); }
55
+ }
56
+
57
+ @keyframes shimmer {
58
+ 0% { background-position: -200% 0; }
59
+ 100% { background-position: 200% 0; }
60
+ }
61
+
62
+ /* Preserve lifecycle events while reducing CSS motion to a single frame.
63
+ JS-driven animation loops must honor the media query in their own runtime. */
64
+ @media (prefers-reduced-motion: reduce) {
65
+ *,
66
+ *::before,
67
+ *::after {
68
+ animation-delay: 0ms !important;
69
+ animation-duration: 0.01ms !important;
70
+ animation-iteration-count: 1 !important;
71
+ scroll-behavior: auto !important;
72
+ transition-delay: 0ms !important;
73
+ transition-duration: 0.01ms !important;
74
+ }
75
+ }
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "publishConfig": {
10
10
  "access": "public"
11
11
  },
12
- "version": "0.1.3",
12
+ "version": "0.3.1",
13
13
  "description": "Atlas shared UI component library for Artifact Studio apps",
14
14
  "type": "module",
15
15
  "sideEffects": [
@@ -25,10 +25,18 @@
25
25
  "default": "./dist/charts.mjs"
26
26
  },
27
27
  "./tokens.css": "./dist/tokens.css",
28
+ "./tokens.v2.css": "./tokens.v2.css",
29
+ "./tokens.v2.tenants.css": "./tokens.v2.tenants.css",
30
+ "./theme.v2.css": "./theme.v2.css",
31
+ "./motion.css": "./motion.css",
28
32
  "./package.json": "./package.json"
29
33
  },
34
+ "//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.",
30
35
  "files": [
31
- "dist"
36
+ "dist",
37
+ "tokens.v2.css",
38
+ "theme.v2.css",
39
+ "motion.css"
32
40
  ],
33
41
  "peerDependencies": {
34
42
  "@tanstack/react-query": "^4.36.1",
@@ -60,7 +68,7 @@
60
68
  "@radix-ui/react-toggle": "^1.1.10",
61
69
  "@radix-ui/react-toggle-group": "^1.1.11",
62
70
  "@radix-ui/react-tooltip": "^1.2.8",
63
- "@tabler/icons-react": "^3.36.1",
71
+ "@tabler/icons-react": "^3.45.0",
64
72
  "@tanstack/react-table": "^8.21.3",
65
73
  "@tanstack/react-virtual": "^3.13.19",
66
74
  "class-variance-authority": "^0.7.1",
@@ -73,13 +81,19 @@
73
81
  },
74
82
  "devDependencies": {
75
83
  "@microsoft/api-extractor": "^7.58.7",
84
+ "@types/js-yaml": "^4.0.9",
76
85
  "@vitejs/plugin-react": "^5.0.0",
86
+ "js-yaml": "^4.1.1",
87
+ "tsx": "^4.19.2",
77
88
  "typescript": "^5.6.0",
78
89
  "vite": "8.0.16",
79
- "vite-plugin-dts": "^4.5.4"
90
+ "vite-plugin-dts": "^4.5.4",
91
+ "vitest": "^4.1.5"
80
92
  },
81
93
  "scripts": {
82
- "build": "vite build && cp src/tokens.css dist/tokens.css",
94
+ "build": "tsx scripts/generate-tokens.ts && vite build && cp src/tokens.css dist/tokens.css",
95
+ "generate:tokens": "tsx scripts/generate-tokens.ts",
96
+ "test": "vitest run",
83
97
  "type-check": "tsc --noEmit"
84
98
  }
85
99
  }
package/theme.v2.css ADDED
@@ -0,0 +1,240 @@
1
+ /* GENERATED by atlas-ui/scripts/generate-tokens.ts — do not edit by hand. */
2
+ /* Tailwind @theme utility bridge (DES-223): every semantic role → a --color-* utility. */
3
+
4
+ @theme inline {
5
+ --color-background: var(--background);
6
+ --color-foreground: var(--foreground);
7
+ --color-card: var(--card);
8
+ --color-card-foreground: var(--card-foreground);
9
+ --color-popover: var(--popover);
10
+ --color-popover-foreground: var(--popover-foreground);
11
+ --color-shell: var(--shell);
12
+ --color-sidebar: var(--sidebar);
13
+ --color-sidebar-foreground: var(--sidebar-foreground);
14
+ --color-sidebar-accent: var(--sidebar-accent);
15
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
16
+ --color-primary: var(--primary);
17
+ --color-primary-foreground: var(--primary-foreground);
18
+ --color-primary-hover: var(--primary-hover);
19
+ --color-secondary: var(--secondary);
20
+ --color-secondary-foreground: var(--secondary-foreground);
21
+ --color-muted: var(--muted);
22
+ --color-muted-foreground: var(--muted-foreground);
23
+ --color-accent: var(--accent);
24
+ --color-accent-foreground: var(--accent-foreground);
25
+ --color-expressive: var(--expressive);
26
+ --color-expressive-tint: var(--expressive-tint);
27
+ --color-expressive-border: var(--expressive-border);
28
+ --color-expressive-text: var(--expressive-text);
29
+ --color-destructive: var(--destructive);
30
+ --color-destructive-foreground: var(--destructive-foreground);
31
+ --color-border: var(--border);
32
+ --color-border-strong: var(--border-strong);
33
+ --color-input: var(--input);
34
+ --color-ring: var(--ring);
35
+ --color-foreground-primary: var(--text-primary);
36
+ --color-foreground-secondary: var(--text-secondary);
37
+ --color-foreground-muted: var(--text-muted);
38
+ --color-foreground-placeholder: var(--text-placeholder);
39
+ --color-foreground-disabled: var(--text-disabled);
40
+ --color-foreground-on-color: var(--text-on-color);
41
+ --color-field: var(--field);
42
+ --color-field-hover: var(--field-hover);
43
+ --color-field-disabled: var(--field-disabled);
44
+ --color-link: var(--link);
45
+ --color-link-hover: var(--link-hover);
46
+ --color-link-visited: var(--link-visited);
47
+ --color-inverse: var(--inverse);
48
+ --color-inverse-foreground: var(--inverse-foreground);
49
+ --color-overlay: var(--overlay);
50
+ --color-skeleton: var(--skeleton);
51
+ --color-skeleton-foreground: var(--skeleton-foreground);
52
+ --color-success: var(--success);
53
+ --color-success-foreground: var(--success-foreground);
54
+ --color-success-tint: var(--success-tint);
55
+ --color-success-text: var(--success-text);
56
+ --color-warning: var(--warning);
57
+ --color-warning-foreground: var(--warning-foreground);
58
+ --color-warning-tint: var(--warning-tint);
59
+ --color-warning-text: var(--warning-text);
60
+ --color-danger: var(--danger);
61
+ --color-danger-foreground: var(--danger-foreground);
62
+ --color-danger-tint: var(--danger-tint);
63
+ --color-danger-text: var(--danger-text);
64
+ --color-info: var(--info);
65
+ --color-info-foreground: var(--info-foreground);
66
+ --color-info-tint: var(--info-tint);
67
+ --color-info-text: var(--info-text);
68
+ --color-chart-1: var(--chart-1);
69
+ --color-chart-1-soft: var(--chart-1-soft);
70
+ --color-chart-2: var(--chart-2);
71
+ --color-chart-2-soft: var(--chart-2-soft);
72
+ --color-chart-3: var(--chart-3);
73
+ --color-chart-3-soft: var(--chart-3-soft);
74
+ --color-chart-4: var(--chart-4);
75
+ --color-chart-4-soft: var(--chart-4-soft);
76
+ --color-chart-5: var(--chart-5);
77
+ --color-chart-5-soft: var(--chart-5-soft);
78
+ --color-chart-success: var(--chart-success);
79
+ --color-chart-success-soft: var(--chart-success-soft);
80
+ --color-chart-danger: var(--chart-danger);
81
+ --color-chart-danger-soft: var(--chart-danger-soft);
82
+ --color-chart-mono-1: var(--chart-mono-1);
83
+ --color-chart-mono-2: var(--chart-mono-2);
84
+ --color-chart-mono-3: var(--chart-mono-3);
85
+ --color-chart-mono-4: var(--chart-mono-4);
86
+ --color-chart-mono-5: var(--chart-mono-5);
87
+ --color-chart-adjacent-1: var(--chart-adjacent-1);
88
+ --color-chart-adjacent-1-soft: var(--chart-adjacent-1-soft);
89
+ --color-chart-adjacent-2: var(--chart-adjacent-2);
90
+ --color-chart-adjacent-2-soft: var(--chart-adjacent-2-soft);
91
+ --color-chart-adjacent-3: var(--chart-adjacent-3);
92
+ --color-chart-adjacent-3-soft: var(--chart-adjacent-3-soft);
93
+ --color-chart-adjacent-4: var(--chart-adjacent-4);
94
+ --color-chart-adjacent-4-soft: var(--chart-adjacent-4-soft);
95
+ --color-chart-adjacent-5: var(--chart-adjacent-5);
96
+ --color-chart-adjacent-5-soft: var(--chart-adjacent-5-soft);
97
+ --color-identity-1: var(--identity-1);
98
+ --color-identity-1-text: var(--identity-1-text);
99
+ --color-identity-2: var(--identity-2);
100
+ --color-identity-2-text: var(--identity-2-text);
101
+ --color-identity-3: var(--identity-3);
102
+ --color-identity-3-text: var(--identity-3-text);
103
+ --color-identity-4: var(--identity-4);
104
+ --color-identity-4-text: var(--identity-4-text);
105
+ --color-identity-5: var(--identity-5);
106
+ --color-identity-5-text: var(--identity-5-text);
107
+ --color-identity-6: var(--identity-6);
108
+ --color-identity-6-text: var(--identity-6-text);
109
+ --color-identity-7: var(--identity-7);
110
+ --color-identity-7-text: var(--identity-7-text);
111
+ --color-identity-8: var(--identity-8);
112
+ --color-identity-8-text: var(--identity-8-text);
113
+ --color-sidebar-primary: var(--sidebar-primary);
114
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
115
+ --color-sidebar-border: var(--sidebar-border);
116
+ --color-sidebar-ring: var(--sidebar-ring);
117
+ --color-surface: var(--surface);
118
+ --color-surface-hover: var(--surface-hover);
119
+ --color-highlight: var(--highlight);
120
+ --color-brand: var(--brand);
121
+
122
+ /* ── non-colour roles (DES-298) ──
123
+ Tailwind v4 compiles the --text-x--* sub-properties into the text-x
124
+ utility itself, each behind a --tw-* fallback, so ONE class carries
125
+ size + leading + weight + tracking and an explicit `font-medium` at a
126
+ call site still wins. `uppercase` and `font-mono` stay separate
127
+ utilities: there is no @theme channel for either. */
128
+ --text-page-title: var(--type-page-title);
129
+ --text-page-title--line-height: var(--type-page-title-leading);
130
+ --text-page-title--font-weight: var(--type-page-title-weight);
131
+ --text-page-title--letter-spacing: var(--type-page-title-tracking);
132
+ --text-heading: var(--type-heading);
133
+ --text-heading--line-height: var(--type-heading-leading);
134
+ --text-heading--font-weight: var(--type-heading-weight);
135
+ --text-body: var(--type-body);
136
+ --text-body--line-height: var(--type-body-leading);
137
+ --text-body--font-weight: var(--type-body-weight);
138
+ --text-cell: var(--type-cell);
139
+ --text-cell--line-height: var(--type-cell-leading);
140
+ --text-cell--font-weight: var(--type-cell-weight);
141
+ --text-label: var(--type-label);
142
+ --text-label--line-height: var(--type-label-leading);
143
+ --text-label--font-weight: var(--type-label-weight);
144
+ --text-record-name: var(--type-record-name);
145
+ --text-record-name--line-height: var(--type-record-name-leading);
146
+ --text-record-name--font-weight: var(--type-record-name-weight);
147
+ --text-caption: var(--type-caption);
148
+ --text-caption--line-height: var(--type-caption-leading);
149
+ --text-caption--font-weight: var(--type-caption-weight);
150
+ --text-eyebrow: var(--type-eyebrow);
151
+ --text-eyebrow--line-height: var(--type-eyebrow-leading);
152
+ --text-eyebrow--font-weight: var(--type-eyebrow-weight);
153
+ --text-eyebrow--letter-spacing: var(--type-eyebrow-tracking);
154
+ --text-control: var(--type-control);
155
+ --text-control--line-height: var(--type-control-leading);
156
+ --text-control--font-weight: var(--type-control-weight);
157
+ --text-control-sm: var(--type-control-sm);
158
+ --text-control-sm--line-height: var(--type-control-sm-leading);
159
+ --text-control-sm--font-weight: var(--type-control-sm-weight);
160
+ --text-badge: var(--type-badge);
161
+ --text-badge--line-height: var(--type-badge-leading);
162
+ --text-badge--font-weight: var(--type-badge-weight);
163
+ --text-code: var(--type-code);
164
+ --text-code--line-height: var(--type-code-leading);
165
+ --text-code--font-weight: var(--type-code-weight);
166
+ --text-metric: var(--type-metric);
167
+ --text-metric--line-height: var(--type-metric-leading);
168
+ --text-metric--font-weight: var(--type-metric-weight);
169
+ --text-metric--letter-spacing: var(--type-metric-tracking);
170
+ --spacing-inline-tight: var(--space-inline-tight);
171
+ --spacing-inline: var(--space-inline);
172
+ --spacing-inline-loose: var(--space-inline-loose);
173
+ --spacing-compact-tight: var(--space-compact-tight);
174
+ --spacing-compact: var(--space-compact);
175
+ --spacing-default: var(--space-default);
176
+ --spacing-roomy: var(--space-roomy);
177
+ --spacing-stack-tight: var(--space-stack-tight);
178
+ --spacing-stack: var(--space-stack);
179
+ --spacing-stack-group: var(--space-stack-group);
180
+ --spacing-stack-section: var(--space-stack-section);
181
+ --radius-control: var(--corner-control);
182
+ --radius-field: var(--corner-field);
183
+ --radius-badge: var(--corner-badge);
184
+ --radius-surface-nested: var(--corner-surface-nested);
185
+ --radius-surface: var(--corner-surface);
186
+ --shadow-flat: var(--elevation-flat);
187
+ --shadow-resting: var(--elevation-resting);
188
+ --shadow-popover: var(--elevation-popover);
189
+ --shadow-modal: var(--elevation-modal);
190
+ --ease-hover: var(--motion-hover-ease);
191
+ --ease-enter: var(--motion-enter-ease);
192
+ --ease-exit: var(--motion-exit-ease);
193
+
194
+ /* ── legacy typography (DES-93) ──
195
+ `--text-xs--font-weight` must live in @theme: a gated :root
196
+ declaration alone does not make Tailwind emit font-weight on
197
+ `.text-xs` (verified against @tailwindcss/postcss). */
198
+ --text-xs--font-weight: var(--ds-weight-medium);
199
+
200
+ /* DES-372 — default Tailwind shadow ladder → elevation roles.
201
+ Remaps the stock size utilities so ~850 shadow-sm/md/lg call sites
202
+ resolve to the same values as the roles, with no call-site churn.
203
+ Do NOT remap --shadow-inner (inset; different job). */
204
+ --shadow-2xs: var(--elevation-resting);
205
+ --shadow-xs: var(--elevation-resting);
206
+ --shadow-sm: var(--elevation-resting);
207
+ --shadow: var(--elevation-resting);
208
+ --shadow-md: var(--elevation-popover);
209
+ --shadow-lg: var(--elevation-popover);
210
+ --shadow-xl: var(--elevation-modal);
211
+ --shadow-2xl: var(--elevation-modal);
212
+
213
+ /* No --duration-* mapping: it is not a Tailwind v4 theme namespace, so it
214
+ mints nothing (verified). Read --motion-<role>-duration directly, or
215
+ `duration-[var(--motion-hover-duration)]`. Faking it with --animate-*
216
+ would put a keyframe name where a duration belongs. */
217
+ }
218
+
219
+ @utility text-eyebrow {
220
+ text-transform: uppercase;
221
+ }
222
+
223
+ @utility text-code {
224
+ font-family: var(--font-mono);
225
+ }
226
+
227
+ @utility size-icon {
228
+ width: var(--icon);
229
+ height: var(--icon);
230
+ }
231
+
232
+ @utility size-icon-sm {
233
+ width: var(--icon-sm);
234
+ height: var(--icon-sm);
235
+ }
236
+
237
+ @utility size-icon-lg {
238
+ width: var(--icon-lg);
239
+ height: var(--icon-lg);
240
+ }