@usefragments/ui 1.1.1 → 1.3.0

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 (148) hide show
  1. package/dist/assets/ui.css +327 -274
  2. package/dist/components/Checkbox/Checkbox.module.scss.cjs +11 -11
  3. package/dist/components/Checkbox/Checkbox.module.scss.js +11 -11
  4. package/dist/components/Chip/Chip.module.scss.cjs +15 -15
  5. package/dist/components/Chip/Chip.module.scss.js +15 -15
  6. package/dist/components/Combobox/index.cjs +106 -9
  7. package/dist/components/Combobox/index.d.ts.map +1 -1
  8. package/dist/components/Combobox/index.js +106 -9
  9. package/dist/components/DataTable/DataTable.module.scss.cjs +37 -34
  10. package/dist/components/DataTable/DataTable.module.scss.js +37 -34
  11. package/dist/components/DataTable/index.d.ts.map +1 -1
  12. package/dist/components/Main/Main.module.scss.cjs +26 -0
  13. package/dist/components/Main/Main.module.scss.js +26 -0
  14. package/dist/components/Main/index.cjs +128 -0
  15. package/dist/components/Main/index.d.ts +22 -0
  16. package/dist/components/Main/index.d.ts.map +1 -0
  17. package/dist/components/Main/index.js +111 -0
  18. package/dist/components/Table/Table.module.scss.cjs +19 -19
  19. package/dist/components/Table/Table.module.scss.js +19 -19
  20. package/dist/components/TableOfContents/TableOfContents.module.scss.cjs +15 -15
  21. package/dist/components/TableOfContents/TableOfContents.module.scss.js +15 -15
  22. package/dist/components/TableOfContents/index.cjs +22 -42
  23. package/dist/components/TableOfContents/index.d.ts +3 -3
  24. package/dist/components/TableOfContents/index.d.ts.map +1 -1
  25. package/dist/components/TableOfContents/index.js +22 -42
  26. package/dist/{components/DataTable/DataTable.virtual.cjs → data-table-virtual.cjs} +1 -1
  27. package/dist/{components/DataTable/DataTable.virtual.js → data-table-virtual.js} +1 -1
  28. package/dist/data-table.cjs +27 -9
  29. package/dist/data-table.js +19 -1
  30. package/dist/index.cjs +87 -88
  31. package/dist/index.d.ts +1 -1
  32. package/dist/index.d.ts.map +1 -1
  33. package/dist/index.js +2 -3
  34. package/fragments.json +1 -1
  35. package/package.json +57 -2
  36. package/src/components/Checkbox/Checkbox.contract.json +5 -24
  37. package/src/components/Checkbox/Checkbox.module.scss +4 -2
  38. package/src/components/Chip/Chip.contract.json +11 -28
  39. package/src/components/Chip/Chip.module.scss +21 -45
  40. package/src/components/Combobox/Combobox.contract.json +6 -24
  41. package/src/components/Combobox/index.tsx +132 -6
  42. package/src/components/DataTable/DataTable.module.scss +31 -8
  43. package/src/components/DataTable/index.tsx +44 -16
  44. package/src/components/Main/Main.contract.json +79 -0
  45. package/src/components/Main/Main.module.scss +31 -0
  46. package/src/components/Main/index.tsx +124 -0
  47. package/src/components/Table/Table.module.scss +22 -5
  48. package/src/components/TableOfContents/TableOfContents.contract.json +6 -16
  49. package/src/components/TableOfContents/TableOfContents.module.scss +10 -13
  50. package/src/components/TableOfContents/index.tsx +27 -38
  51. package/src/index.ts +11 -9
  52. package/src/styles/styles.d.ts +8 -0
  53. package/src/tokens/_component-properties.scss +1 -0
  54. package/dist/components/Cloud/DashboardLayoutPrototypes.shared.d.ts +0 -33
  55. package/dist/components/Cloud/DashboardLayoutPrototypes.shared.d.ts.map +0 -1
  56. package/dist/components/Cloud/DashboardLayoutPrototypes.shell.d.ts +0 -11
  57. package/dist/components/Cloud/DashboardLayoutPrototypes.shell.d.ts.map +0 -1
  58. package/dist/components/Cloud/PullRequestsPrototypes.content.d.ts +0 -5
  59. package/dist/components/Cloud/PullRequestsPrototypes.content.d.ts.map +0 -1
  60. package/dist/components/Cloud/PullRequestsPrototypes.detail-panels.d.ts +0 -4
  61. package/dist/components/Cloud/PullRequestsPrototypes.detail-panels.d.ts.map +0 -1
  62. package/dist/components/Cloud/PullRequestsPrototypes.detail.d.ts +0 -3
  63. package/dist/components/Cloud/PullRequestsPrototypes.detail.d.ts.map +0 -1
  64. package/dist/components/Cloud/PullRequestsPrototypes.id-data.d.ts +0 -86
  65. package/dist/components/Cloud/PullRequestsPrototypes.id-data.d.ts.map +0 -1
  66. package/dist/components/Cloud/PullRequestsPrototypes.id-page.d.ts +0 -2
  67. package/dist/components/Cloud/PullRequestsPrototypes.id-page.d.ts.map +0 -1
  68. package/src/components/Accordion/Accordion.stories.tsx +0 -106
  69. package/src/components/Alert/Alert.stories.tsx +0 -119
  70. package/src/components/AppShell/AppShell.stories.tsx +0 -156
  71. package/src/components/Avatar/Avatar.stories.tsx +0 -74
  72. package/src/components/Badge/Badge.stories.tsx +0 -92
  73. package/src/components/BentoGrid/BentoGrid.stories.tsx +0 -98
  74. package/src/components/Box/Box.stories.tsx +0 -150
  75. package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +0 -87
  76. package/src/components/Button/Button.stories.tsx +0 -103
  77. package/src/components/ButtonGroup/ButtonGroup.stories.tsx +0 -97
  78. package/src/components/Card/Card.stories.tsx +0 -144
  79. package/src/components/Chart/Chart.stories.tsx +0 -119
  80. package/src/components/Checkbox/Checkbox.stories.tsx +0 -68
  81. package/src/components/Chip/Chip.stories.tsx +0 -70
  82. package/src/components/Cloud/CloudGovernanceShell.module.scss +0 -88
  83. package/src/components/Cloud/CloudGovernanceShell.stories.tsx +0 -446
  84. package/src/components/Cloud/ControlSizing.module.scss +0 -49
  85. package/src/components/Cloud/ControlSizing.stories.tsx +0 -238
  86. package/src/components/Cloud/DashboardLayoutPrototypes.module.scss +0 -462
  87. package/src/components/Cloud/DashboardLayoutPrototypes.shared.tsx +0 -375
  88. package/src/components/Cloud/DashboardLayoutPrototypes.shell.tsx +0 -147
  89. package/src/components/Cloud/DashboardLayoutPrototypes.stories.tsx +0 -328
  90. package/src/components/Cloud/PullRequestsPrototypes.content.tsx +0 -283
  91. package/src/components/Cloud/PullRequestsPrototypes.detail-panels.tsx +0 -381
  92. package/src/components/Cloud/PullRequestsPrototypes.detail.tsx +0 -204
  93. package/src/components/Cloud/PullRequestsPrototypes.id-data.ts +0 -395
  94. package/src/components/Cloud/PullRequestsPrototypes.id-page.tsx +0 -349
  95. package/src/components/Cloud/PullRequestsPrototypes.stories.tsx +0 -81
  96. package/src/components/CodeBlock/CodeBlock.stories.tsx +0 -147
  97. package/src/components/Collapsible/Collapsible.stories.tsx +0 -94
  98. package/src/components/ColorPicker/ColorPicker.stories.tsx +0 -74
  99. package/src/components/Combobox/Combobox.stories.tsx +0 -133
  100. package/src/components/Command/Command.stories.tsx +0 -102
  101. package/src/components/ConversationList/ConversationList.stories.tsx +0 -93
  102. package/src/components/DataTable/DataTable.stories.tsx +0 -129
  103. package/src/components/DatePicker/DatePicker.stories.tsx +0 -129
  104. package/src/components/Dialog/Dialog.stories.tsx +0 -154
  105. package/src/components/Drawer/Drawer.stories.tsx +0 -144
  106. package/src/components/Editor/Editor.stories.tsx +0 -99
  107. package/src/components/EmptyState/EmptyState.stories.tsx +0 -97
  108. package/src/components/Field/Field.stories.tsx +0 -109
  109. package/src/components/Fieldset/Fieldset.stories.tsx +0 -116
  110. package/src/components/Form/Form.stories.tsx +0 -142
  111. package/src/components/Grid/Grid.stories.tsx +0 -125
  112. package/src/components/Header/Header.stories.tsx +0 -133
  113. package/src/components/Icon/Icon.stories.tsx +0 -80
  114. package/src/components/IconButton/IconButton.stories.tsx +0 -78
  115. package/src/components/Image/Image.stories.tsx +0 -109
  116. package/src/components/Input/Input.stories.tsx +0 -104
  117. package/src/components/Link/Link.stories.tsx +0 -67
  118. package/src/components/List/List.stories.tsx +0 -95
  119. package/src/components/Listbox/Listbox.stories.tsx +0 -81
  120. package/src/components/Loading/Loading.stories.tsx +0 -69
  121. package/src/components/Markdown/Markdown.stories.tsx +0 -75
  122. package/src/components/Menu/Menu.stories.tsx +0 -113
  123. package/src/components/Message/Message.stories.tsx +0 -85
  124. package/src/components/NavigationMenu/NavigationMenu.stories.tsx +0 -161
  125. package/src/components/Pagination/Pagination.stories.tsx +0 -81
  126. package/src/components/Popover/Popover.stories.tsx +0 -152
  127. package/src/components/Progress/Progress.stories.tsx +0 -64
  128. package/src/components/Prompt/Prompt.stories.tsx +0 -93
  129. package/src/components/RadioGroup/RadioGroup.stories.tsx +0 -107
  130. package/src/components/ScrollArea/ScrollArea.stories.tsx +0 -97
  131. package/src/components/Select/Select.stories.tsx +0 -127
  132. package/src/components/Separator/Separator.stories.tsx +0 -84
  133. package/src/components/Sidebar/Sidebar.stories.tsx +0 -122
  134. package/src/components/Skeleton/Skeleton.stories.tsx +0 -80
  135. package/src/components/Slider/Slider.stories.tsx +0 -73
  136. package/src/components/Stack/Stack.stories.tsx +0 -73
  137. package/src/components/Switch/Switch.stories.tsx +0 -59
  138. package/src/components/Table/Table.stories.tsx +0 -219
  139. package/src/components/TableOfContents/TableOfContents.stories.tsx +0 -120
  140. package/src/components/Tabs/Tabs.stories.tsx +0 -136
  141. package/src/components/Text/Text.stories.tsx +0 -133
  142. package/src/components/Textarea/Textarea.stories.tsx +0 -107
  143. package/src/components/Theme/Theme.stories.tsx +0 -95
  144. package/src/components/ThinkingIndicator/ThinkingIndicator.stories.tsx +0 -85
  145. package/src/components/Toast/Toast.stories.tsx +0 -91
  146. package/src/components/ToggleGroup/ToggleGroup.stories.tsx +0 -114
  147. package/src/components/Tooltip/Tooltip.stories.tsx +0 -95
  148. package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx +0 -78
@@ -1,395 +0,0 @@
1
- import type { StateVariant } from "./DashboardLayoutPrototypes.shared";
2
-
3
- export type CheckState = "failed" | "passed" | "warning";
4
-
5
- export type GithubCheck = {
6
- name: string;
7
- state: CheckState;
8
- label: string;
9
- variant: StateVariant;
10
- summary: string;
11
- duration: string;
12
- };
13
-
14
- export type GithubComment = {
15
- id: string;
16
- author: string;
17
- status: string;
18
- variant: StateVariant;
19
- file: string;
20
- line: number;
21
- body: string;
22
- designerSignal: string;
23
- };
24
-
25
- export type ImpactArea = {
26
- area: string;
27
- criticality: string;
28
- coverage: string;
29
- findings: string;
30
- owner: string;
31
- review: string;
32
- variant: StateVariant;
33
- };
34
-
35
- export type FindingSeverity = "Blocking" | "Safe fix" | "Review";
36
-
37
- /** How a finding can be remediated — drives the per-row action verb. */
38
- export type FixKind = "Deterministic" | "Proposed" | "Manual";
39
-
40
- export type PrFinding = {
41
- id: string;
42
- /** Versioned diagnostic code (FUI####). */
43
- code: string;
44
- /** Rule family the finding belongs to. */
45
- rule: string;
46
- severity: FindingSeverity;
47
- variant: StateVariant;
48
- /** Introduced by this PR (gates merge) vs. pre-existing legacy debt (never gates). */
49
- origin: "Introduced" | "Legacy";
50
- file: string;
51
- line: number;
52
- area: string;
53
- /** Call-sites this single finding-family touches in the PR — the bulk-action rationale. */
54
- occurrences: number;
55
- fix: FixKind;
56
- suggestion: string;
57
- body: string;
58
- designerSignal?: string;
59
- /** Surfaced as a human-readable review thread in the Conversation tab. */
60
- thread?: boolean;
61
- };
62
-
63
- export type Reviewer = {
64
- name: string;
65
- status: string;
66
- variant: StateVariant;
67
- };
68
-
69
- export type ChangedFile = {
70
- path: string;
71
- area: string;
72
- additions: number;
73
- deletions: number;
74
- findings: number;
75
- };
76
-
77
- export const prIdPagePullRequest = {
78
- number: 248,
79
- title: "Refresh marketing campaign cards",
80
- branch: "feat/launch-pages",
81
- author: "Maya Chen",
82
- coverageBefore: 68,
83
- coverageAfter: 61,
84
- comments: 8,
85
- safeFixes: 5,
86
- };
87
-
88
- export const githubChecks: GithubCheck[] = [
89
- {
90
- name: "fragments/contract-compliance",
91
- state: "failed",
92
- label: "Required",
93
- variant: "error",
94
- summary: "3 blocking design-contract comments must be resolved.",
95
- duration: "1m 42s",
96
- },
97
- {
98
- name: "fragments/governance-report",
99
- state: "warning",
100
- label: "Advisory",
101
- variant: "warning",
102
- summary: "Coverage fell 7 points in Marketing; 5 fixes are deterministic.",
103
- duration: "1m 46s",
104
- },
105
- {
106
- name: "build",
107
- state: "passed",
108
- label: "CI",
109
- variant: "success",
110
- summary: "Production bundle and typecheck completed.",
111
- duration: "3m 12s",
112
- },
113
- {
114
- name: "storybook visual review",
115
- state: "passed",
116
- label: "Design",
117
- variant: "success",
118
- summary: "No snapshot deltas on shared primitives.",
119
- duration: "2m 08s",
120
- },
121
- ];
122
-
123
- export const impactAreas: ImpactArea[] = [
124
- {
125
- area: "Marketing",
126
- criticality: "Public launch",
127
- coverage: "68% -> 61%",
128
- findings: "11 findings",
129
- owner: "Growth design",
130
- review: "CTA, danger states, card spacing",
131
- variant: "error",
132
- },
133
- {
134
- area: "Dashboard",
135
- criticality: "Core app",
136
- coverage: "84% -> 84%",
137
- findings: "0 findings",
138
- owner: "Cloud product",
139
- review: "No review needed",
140
- variant: "success",
141
- },
142
- {
143
- area: "Checkout",
144
- criticality: "Revenue",
145
- coverage: "91% -> 91%",
146
- findings: "0 findings",
147
- owner: "Revenue systems",
148
- review: "No touched surfaces",
149
- variant: "success",
150
- },
151
- ];
152
-
153
- // Single source of truth for PR #248 findings. Both the table-first detail
154
- // (Layout 3) and the conversation prototype (Layout 4) read from this list so
155
- // the two surfaces can never drift apart.
156
- export const prFindings: PrFinding[] = [
157
- {
158
- id: "button-contract",
159
- code: "FUI3101",
160
- rule: "Canonical usage",
161
- severity: "Blocking",
162
- variant: "error",
163
- origin: "Introduced",
164
- file: "src/routes/(marketing)/launch/Hero.tsx",
165
- line: 42,
166
- area: "Marketing",
167
- occurrences: 4,
168
- fix: "Deterministic",
169
- suggestion: "Replace with <Button>",
170
- body: "Native button introduced in a public launch hero. Use Button so loading, disabled, focus, and variants stay governed.",
171
- designerSignal: "Primary CTA behavior is outside the design-system contract.",
172
- thread: true,
173
- },
174
- {
175
- id: "danger-token",
176
- code: "FUI2110",
177
- rule: "Tokens · color",
178
- severity: "Blocking",
179
- variant: "error",
180
- origin: "Introduced",
181
- file: "src/routes/(marketing)/launch/Form.tsx",
182
- line: 88,
183
- area: "Marketing",
184
- occurrences: 3,
185
- fix: "Deterministic",
186
- suggestion: "Use var(--fui-color-danger-bg)",
187
- body: "Raw danger background bypasses the semantic danger token. Replace the hardcoded value before merge.",
188
- designerSignal: "Error and warning color semantics can drift from brand.",
189
- thread: true,
190
- },
191
- {
192
- id: "brand-accent",
193
- code: "FUI2101",
194
- rule: "Tokens · brand",
195
- severity: "Blocking",
196
- variant: "error",
197
- origin: "Introduced",
198
- file: "src/routes/(marketing)/launch/Hero.tsx",
199
- line: 51,
200
- area: "Marketing",
201
- occurrences: 2,
202
- fix: "Deterministic",
203
- suggestion: "Use var(--fui-color-accent)",
204
- body: "Hardcoded #6d5efc on the CTA bypasses the brand accent token.",
205
- },
206
- {
207
- id: "spacing-gap",
208
- code: "FUI2120",
209
- rule: "Tokens · spacing",
210
- severity: "Safe fix",
211
- variant: "warning",
212
- origin: "Introduced",
213
- file: "src/components/campaign/CardGrid.tsx",
214
- line: 31,
215
- area: "Marketing",
216
- occurrences: 6,
217
- fix: "Deterministic",
218
- suggestion: "Use var(--fui-space-4)",
219
- body: "Off-scale 18px gap. Snap to the nearest spacing token.",
220
- },
221
- {
222
- id: "radius-scale",
223
- code: "FUI2122",
224
- rule: "Tokens · radius",
225
- severity: "Safe fix",
226
- variant: "warning",
227
- origin: "Introduced",
228
- file: "src/components/campaign/Card.tsx",
229
- line: 12,
230
- area: "Marketing",
231
- occurrences: 4,
232
- fix: "Deterministic",
233
- suggestion: "Use var(--fui-radius-md)",
234
- body: "Hardcoded 10px corner radius is off the radius scale.",
235
- },
236
- {
237
- id: "font-size",
238
- code: "FUI2130",
239
- rule: "Tokens · type",
240
- severity: "Safe fix",
241
- variant: "warning",
242
- origin: "Introduced",
243
- file: "src/routes/(marketing)/launch/Hero.tsx",
244
- line: 60,
245
- area: "Marketing",
246
- occurrences: 2,
247
- fix: "Deterministic",
248
- suggestion: "Use var(--fui-font-size-lg)",
249
- body: "Hardcoded 19px heading size bypasses the type scale.",
250
- },
251
- {
252
- id: "shadow-token",
253
- code: "FUI2140",
254
- rule: "Tokens · elevation",
255
- severity: "Safe fix",
256
- variant: "warning",
257
- origin: "Introduced",
258
- file: "src/components/campaign/Card.tsx",
259
- line: 20,
260
- area: "Marketing",
261
- occurrences: 5,
262
- fix: "Deterministic",
263
- suggestion: "Use var(--fui-shadow-sm)",
264
- body: "Raw box-shadow does not match the elevation scale.",
265
- },
266
- {
267
- id: "muted-text",
268
- code: "FUI2112",
269
- rule: "Tokens · color",
270
- severity: "Safe fix",
271
- variant: "warning",
272
- origin: "Legacy",
273
- file: "src/routes/(marketing)/launch/Footer.tsx",
274
- line: 14,
275
- area: "Marketing",
276
- occurrences: 3,
277
- fix: "Deterministic",
278
- suggestion: "Use var(--fui-text-tertiary)",
279
- body: "Pre-existing hardcoded muted gray. Visible as legacy debt; does not gate this PR.",
280
- },
281
- {
282
- id: "spacing-rhythm",
283
- code: "FUI4010",
284
- rule: "Spacing rhythm",
285
- severity: "Review",
286
- variant: "info",
287
- origin: "Introduced",
288
- file: "src/components/campaign/CardGrid.tsx",
289
- line: 31,
290
- area: "Marketing",
291
- occurrences: 6,
292
- fix: "Proposed",
293
- suggestion: "Snap to scale or mark intentional",
294
- body: "Spacing is off scale. Use the nearest Fragments spacing token or mark this as an intentional campaign exception.",
295
- designerSignal: "Card rhythm changes across the marketing grid.",
296
- thread: true,
297
- },
298
- {
299
- id: "icon-button-label",
300
- code: "FUI1204",
301
- rule: "A11y · name",
302
- severity: "Review",
303
- variant: "info",
304
- origin: "Introduced",
305
- file: "src/routes/(marketing)/launch/Hero.tsx",
306
- line: 70,
307
- area: "Marketing",
308
- occurrences: 1,
309
- fix: "Manual",
310
- suggestion: "Add an accessible label",
311
- body: "Icon-only share button has no accessible name.",
312
- },
313
- {
314
- id: "heading-order",
315
- code: "FUI1330",
316
- rule: "A11y · structure",
317
- severity: "Review",
318
- variant: "info",
319
- origin: "Legacy",
320
- file: "src/routes/(marketing)/launch/Form.tsx",
321
- line: 22,
322
- area: "Marketing",
323
- occurrences: 1,
324
- fix: "Manual",
325
- suggestion: "Restore heading order",
326
- body: "Heading level skips from h2 to h4. Pre-existing; does not gate this PR.",
327
- },
328
- ];
329
-
330
- export const blockingFindings = prFindings.filter((finding) => finding.severity === "Blocking");
331
- export const introducedFindings = prFindings.filter((finding) => finding.origin === "Introduced");
332
- export const threadFindings = prFindings.filter((finding) => finding.thread);
333
-
334
- // Layout 4 renders a curated subset of findings as GitHub-style review threads.
335
- // Deriving it here keeps the conversation prototype in lock-step with the table.
336
- export const githubComments: GithubComment[] = threadFindings.map((finding) => ({
337
- id: finding.id,
338
- author: "fragments[bot]",
339
- status: finding.severity,
340
- variant: finding.variant,
341
- file: finding.file,
342
- line: finding.line,
343
- body: finding.body,
344
- designerSignal: finding.designerSignal ?? "",
345
- }));
346
-
347
- export const reviewers: Reviewer[] = [
348
- { name: "Growth design", status: "Review needed", variant: "warning" },
349
- { name: "Cloud platform", status: "Blocked", variant: "error" },
350
- ];
351
-
352
- export const changedFiles: ChangedFile[] = [
353
- {
354
- path: "src/routes/(marketing)/launch/Hero.tsx",
355
- area: "Marketing",
356
- additions: 64,
357
- deletions: 12,
358
- findings: 4,
359
- },
360
- {
361
- path: "src/routes/(marketing)/launch/Form.tsx",
362
- area: "Marketing",
363
- additions: 38,
364
- deletions: 9,
365
- findings: 2,
366
- },
367
- {
368
- path: "src/components/campaign/CardGrid.tsx",
369
- area: "Marketing",
370
- additions: 27,
371
- deletions: 5,
372
- findings: 3,
373
- },
374
- {
375
- path: "src/components/campaign/Card.tsx",
376
- area: "Marketing",
377
- additions: 19,
378
- deletions: 3,
379
- findings: 2,
380
- },
381
- {
382
- path: "src/routes/(marketing)/launch/Footer.tsx",
383
- area: "Marketing",
384
- additions: 8,
385
- deletions: 2,
386
- findings: 0,
387
- },
388
- {
389
- path: "src/styles/campaign.css",
390
- area: "Marketing",
391
- additions: 14,
392
- deletions: 6,
393
- findings: 0,
394
- },
395
- ];