sdocs 0.0.42 → 0.0.44

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 (26) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +55 -66
  3. package/dist/language/index.d.ts +1 -0
  4. package/dist/language/index.js +1 -0
  5. package/dist/language/projection.d.ts +23 -0
  6. package/dist/language/projection.js +136 -0
  7. package/dist/language/projection.test.d.ts +1 -0
  8. package/dist/language/projection.test.js +117 -0
  9. package/dist/ui/About.sdoc +28 -0
  10. package/dist/ui/Button/Button.sdoc +41 -44
  11. package/dist/ui/Control/Checkbox.sdoc +7 -13
  12. package/dist/ui/Control/Color.sdoc +7 -13
  13. package/dist/ui/Control/Dimension.sdoc +7 -13
  14. package/dist/ui/Control/Number.sdoc +7 -13
  15. package/dist/ui/Control/Select.sdoc +7 -14
  16. package/dist/ui/Control/Text.sdoc +7 -13
  17. package/dist/ui/Dashboard.sdoc +57 -0
  18. package/dist/ui/Frame/Frame.sdoc +46 -48
  19. package/dist/ui/Icon/Icon.sdoc +33 -38
  20. package/dist/ui/NavTree/Group.sdoc +36 -38
  21. package/dist/ui/NavTree/Item.sdoc +52 -57
  22. package/dist/ui/NavTree/NavTree.sdoc +89 -91
  23. package/dist/ui/Stack/Stack.sdoc +41 -43
  24. package/package.json +1 -1
  25. package/dist/ui/About.page.sdoc +0 -37
  26. package/dist/ui/Dashboard.layout.sdoc +0 -60
package/dist/ui/NavTree/NavTree.sdoc CHANGED
@@ -2,118 +2,116 @@
2
2
  import NavTree from './index.js';
3
3
  import NavTreeRoot from './NavTree.svelte';
4
4
  import { Icon } from '../Icon/index.js';
5
-
6
- export const meta = {
7
- component: NavTreeRoot,
8
- title: 'NavTree',
9
- description: 'A composable tree navigation with Item and Group subcomponents.',
10
- };
11
5
  </script>
12
6
 
13
- {#snippet Default()}
14
- <NavTree>
15
- <NavTree.Group label="Components">
16
- <NavTree.Item label="UI" expanded>
17
- {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
18
- <NavTree.Item label="Button" expanded --font-weight="500">
19
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
20
- <NavTree.Item label="Docs" href="#/ui/button/docs" --font-weight="400">
21
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
7
+ [DOCS title="NavTree" description="A composable tree navigation with Item and Group subcomponents."]
8
+
9
+ [preview component={NavTreeRoot}]
10
+ <NavTree>
11
+ <NavTree.Group label="Components">
12
+ <NavTree.Item label="UI" expanded>
13
+ {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
14
+ <NavTree.Item label="Button" expanded --font-weight="500">
15
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
16
+ <NavTree.Item label="Docs" href="#/ui/button/docs" --font-weight="400">
17
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
18
+ </NavTree.Item>
19
+ <NavTree.Item label="Primary" href="#/ui/button/primary" active --font-weight="400">
20
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
21
+ </NavTree.Item>
22
+ <NavTree.Item label="Outlined" href="#/ui/button/outlined" --font-weight="400">
23
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
24
+ </NavTree.Item>
22
25
  </NavTree.Item>
23
- <NavTree.Item label="Primary" href="#/ui/button/primary" active --font-weight="400">
24
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
26
+ <NavTree.Item label="Icon" --font-weight="500">
27
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
28
+ <NavTree.Item label="Docs" href="#/ui/icon/docs" --font-weight="400">
29
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
30
+ </NavTree.Item>
31
+ <NavTree.Item label="Sizes" href="#/ui/icon/sizes" --font-weight="400">
32
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
33
+ </NavTree.Item>
25
34
  </NavTree.Item>
26
- <NavTree.Item label="Outlined" href="#/ui/button/outlined" --font-weight="400">
27
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
35
+ <NavTree.Item label="Frame" --font-weight="500">
36
+ {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
37
+ <NavTree.Item label="Docs" href="#/ui/frame/docs" --font-weight="400">
38
+ {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
39
+ </NavTree.Item>
28
40
  </NavTree.Item>
29
41
  </NavTree.Item>
30
- <NavTree.Item label="Icon" --font-weight="500">
42
+ <NavTree.Item label="Card" expanded --font-weight="500">
31
43
  {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
32
- <NavTree.Item label="Docs" href="#/ui/icon/docs" --font-weight="400">
44
+ <NavTree.Item label="Docs" href="#/card/docs" --font-weight="400">
33
45
  {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
34
46
  </NavTree.Item>
35
- <NavTree.Item label="Sizes" href="#/ui/icon/sizes" --font-weight="400">
47
+ <NavTree.Item label="WithImage" href="#/card/with-image" --font-weight="400">
36
48
  {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
37
49
  </NavTree.Item>
38
50
  </NavTree.Item>
39
- <NavTree.Item label="Frame" --font-weight="500">
51
+ <NavTree.Item label="Badge" --font-weight="500">
40
52
  {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
41
- <NavTree.Item label="Docs" href="#/ui/frame/docs" --font-weight="400">
53
+ <NavTree.Item label="Docs" href="#/badge/docs" --font-weight="400">
42
54
  {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
43
55
  </NavTree.Item>
56
+ <NavTree.Item label="Status" href="#/badge/status" --font-weight="400">
57
+ {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
58
+ </NavTree.Item>
44
59
  </NavTree.Item>
45
- </NavTree.Item>
46
- <NavTree.Item label="Card" expanded --font-weight="500">
47
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
48
- <NavTree.Item label="Docs" href="#/card/docs" --font-weight="400">
49
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
60
+ </NavTree.Group>
61
+ <NavTree.Group label="Pages">
62
+ <NavTree.Item label="Getting Started" href="#/pages/getting-started" --font-weight="500">
63
+ {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
50
64
  </NavTree.Item>
51
- <NavTree.Item label="WithImage" href="#/card/with-image" --font-weight="400">
52
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
65
+ <NavTree.Item label="Changelog" href="#/pages/changelog" --font-weight="500">
66
+ {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
53
67
  </NavTree.Item>
54
- </NavTree.Item>
55
- <NavTree.Item label="Badge" --font-weight="500">
56
- {#snippet left()}<Icon name="component" --w="14px" --h="14px" --fill="var(--color-component-500)" />{/snippet}
57
- <NavTree.Item label="Docs" href="#/badge/docs" --font-weight="400">
58
- {#snippet left()}<Icon name="file-code" --w="14px" --h="14px" --fill="var(--color-docs-500)" />{/snippet}
68
+ </NavTree.Group>
69
+ <NavTree.Group label="Layouts">
70
+ <NavTree.Item label="LoginForm" href="#/layouts/login-form" --font-weight="500">
71
+ {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
59
72
  </NavTree.Item>
60
- <NavTree.Item label="Status" href="#/badge/status" --font-weight="400">
61
- {#snippet left()}<Icon name="bookmark" --w="14px" --h="14px" --fill="var(--color-example-600)" />{/snippet}
73
+ <NavTree.Item label="Dashboard" href="#/layouts/dashboard" --font-weight="500">
74
+ {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
62
75
  </NavTree.Item>
63
- </NavTree.Item>
64
- </NavTree.Group>
65
- <NavTree.Group label="Pages">
66
- <NavTree.Item label="Getting Started" href="#/pages/getting-started" --font-weight="500">
67
- {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
68
- </NavTree.Item>
69
- <NavTree.Item label="Changelog" href="#/pages/changelog" --font-weight="500">
70
- {#snippet left()}<Icon name="file-text" --w="14px" --h="14px" --fill="var(--color-page-550)" />{/snippet}
71
- </NavTree.Item>
72
- </NavTree.Group>
73
- <NavTree.Group label="Layouts">
74
- <NavTree.Item label="LoginForm" href="#/layouts/login-form" --font-weight="500">
75
- {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
76
- </NavTree.Item>
77
- <NavTree.Item label="Dashboard" href="#/layouts/dashboard" --font-weight="500">
78
- {#snippet left()}<Icon name="panels-top-left" --w="14px" --h="14px" --fill="var(--color-layout-500)" />{/snippet}
79
- </NavTree.Item>
80
- </NavTree.Group>
81
- </NavTree>
82
- {/snippet}
83
-
84
- {#snippet WithSlots()}
85
- <NavTree>
86
- <NavTree.Group label="Files">
87
- <NavTree.Item label="index.ts" href="#/index">
88
- {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
89
- {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">2.4kb</span>{/snippet}
90
- </NavTree.Item>
91
- <NavTree.Item label="utils.ts" href="#/utils">
92
- {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
93
- {#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
94
- </NavTree.Item>
95
- <NavTree.Item label="config.ts" href="#/config">
96
- {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
97
- {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">1.1kb</span>{/snippet}
98
- </NavTree.Item>
99
- </NavTree.Group>
100
- </NavTree>
101
- {/snippet}
76
+ </NavTree.Group>
77
+ </NavTree>
78
+ [/preview]
102
79
 
103
- {#snippet NestedFolders()}
104
- <NavTree>
105
- <NavTree.Item label="src" expanded>
106
- <NavTree.Item label="lib" expanded>
107
- <NavTree.Item label="ui">
108
- <NavTree.Item label="Frame.svelte" />
109
- <NavTree.Item label="index.ts" />
80
+ [example title="WithSlots"]
81
+ <NavTree>
82
+ <NavTree.Group label="Files">
83
+ <NavTree.Item label="index.ts" href="#/index">
84
+ {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
85
+ {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">2.4kb</span>{/snippet}
110
86
  </NavTree.Item>
111
- <NavTree.Item label="server">
112
- <NavTree.Item label="config.ts" />
113
- <NavTree.Item label="cli.ts" />
87
+ <NavTree.Item label="utils.ts" href="#/utils">
88
+ {#snippet left()}<Icon name="folder" --w="14px" --h="14px" />{/snippet}
89
+ {#snippet right()}<span style="font-size: 11px; color: tomato;">54kb</span>{/snippet}
114
90
  </NavTree.Item>
91
+ <NavTree.Item label="config.ts" href="#/config">
92
+ {#snippet left()}<Icon name="folder-open" --w="14px" --h="14px" --fill="var(--color-base-400)" />{/snippet}
93
+ {#snippet right()}<span style="font-size: 11px; color: #9ca3af;">1.1kb</span>{/snippet}
94
+ </NavTree.Item>
95
+ </NavTree.Group>
96
+ </NavTree>
97
+ [/example]
98
+
99
+ [example title="NestedFolders"]
100
+ <NavTree>
101
+ <NavTree.Item label="src" expanded>
102
+ <NavTree.Item label="lib" expanded>
103
+ <NavTree.Item label="ui">
104
+ <NavTree.Item label="Frame.svelte" />
105
+ <NavTree.Item label="index.ts" />
106
+ </NavTree.Item>
107
+ <NavTree.Item label="server">
108
+ <NavTree.Item label="config.ts" />
109
+ <NavTree.Item label="cli.ts" />
110
+ </NavTree.Item>
111
+ </NavTree.Item>
112
+ <NavTree.Item label="app.ts" />
115
113
  </NavTree.Item>
116
- <NavTree.Item label="app.ts" />
117
- </NavTree.Item>
118
- </NavTree>
119
- {/snippet}
114
+ </NavTree>
115
+ [/example]
116
+
117
+ [/DOCS]
package/dist/ui/Stack/Stack.sdoc CHANGED
@@ -1,52 +1,50 @@
1
1
  <script lang="ts">
2
2
  import Stack from './Stack.svelte';
3
3
  import { Button } from '../Button/index.js';
4
-
5
- export const meta = {
6
- component: Stack,
7
- title: 'Stack',
8
- description: 'A flex container with configurable direction, gap, alignment, and styling.',
9
- };
10
4
  </script>
11
5
 
12
- {#snippet Default()}
13
- <Stack>
14
- <Button>One</Button>
15
- <Button>Two</Button>
16
- <Button>Three</Button>
17
- </Stack>
18
- {/snippet}
6
+ [DOCS title="Stack" description="A flex container with configurable direction, gap, alignment, and styling."]
7
+
8
+ [preview component={Stack}]
9
+ <Stack>
10
+ <Button>One</Button>
11
+ <Button>Two</Button>
12
+ <Button>Three</Button>
13
+ </Stack>
14
+ [/preview]
15
+
16
+ [example title="Column"]
17
+ <Stack --gap="8px">
18
+ <Button>One</Button>
19
+ <Button>Two</Button>
20
+ <Button>Three</Button>
21
+ </Stack>
22
+ [/example]
19
23
 
20
- {#snippet Column()}
21
- <Stack --gap="8px">
22
- <Button>One</Button>
23
- <Button>Two</Button>
24
- <Button>Three</Button>
25
- </Stack>
26
- {/snippet}
24
+ [example title="Row"]
25
+ <Stack --direction="row" --gap="8px">
26
+ <Button>One</Button>
27
+ <Button>Two</Button>
28
+ <Button>Three</Button>
29
+ </Stack>
30
+ [/example]
27
31
 
28
- {#snippet Row()}
29
- <Stack --direction="row" --gap="8px">
30
- <Button>One</Button>
31
- <Button>Two</Button>
32
- <Button>Three</Button>
33
- </Stack>
34
- {/snippet}
32
+ [example title="Centered"]
33
+ <Stack --direction="row" --gap="12px" --align="center" --justify="center" --p="16px" --bg="var(--color-base-50)" --r="8px">
34
+ <Button>Left</Button>
35
+ <Button>Center</Button>
36
+ <Button>Right</Button>
37
+ </Stack>
38
+ [/example]
35
39
 
36
- {#snippet Centered()}
37
- <Stack --direction="row" --gap="12px" --align="center" --justify="center" --p="16px" --bg="var(--color-base-50)" --r="8px">
38
- <Button>Left</Button>
39
- <Button>Center</Button>
40
- <Button>Right</Button>
41
- </Stack>
42
- {/snippet}
40
+ [example title="Wrap"]
41
+ <Stack --direction="row" --gap="8px" --wrap="wrap" style="max-width: 200px;">
42
+ <Button>A</Button>
43
+ <Button>B</Button>
44
+ <Button>C</Button>
45
+ <Button>D</Button>
46
+ <Button>E</Button>
47
+ </Stack>
48
+ [/example]
43
49
 
44
- {#snippet Wrap()}
45
- <Stack --direction="row" --gap="8px" --wrap="wrap" style="max-width: 200px;">
46
- <Button>A</Button>
47
- <Button>B</Button>
48
- <Button>C</Button>
49
- <Button>D</Button>
50
- <Button>E</Button>
51
- </Stack>
52
- {/snippet}
50
+ [/DOCS]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sdocs",
3
- "version": "0.0.42",
3
+ "version": "0.0.44",
4
4
  "description": "A lightweight documentation tool for Svelte 5 components",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/dist/ui/About.page.sdoc DELETED
@@ -1,37 +0,0 @@
1
- <script lang="ts">
2
- export const meta = {
3
- title: ':Pages / About',
4
- description: 'About the sdocs component library.',
5
- };
6
- </script>
7
-
8
- <div style="max-width: 640px; padding: 32px;">
9
- <h1>About sdocs</h1>
10
- <p>
11
- sdocs is a lightweight documentation tool for Svelte 5 components.
12
- It discovers <code>.sdoc</code> files in your project and renders
13
- an interactive component explorer with live previews.
14
- </p>
15
-
16
- <h2>Features</h2>
17
- <ul>
18
- <li>Zero-config component discovery</li>
19
- <li>Live preview with prop controls</li>
20
- <li>Multiple snippet examples per component</li>
21
- <li>Page and layout support</li>
22
- <li>Light and dark themes</li>
23
- </ul>
24
-
25
- <h2>Getting Started</h2>
26
- <p>
27
- Create a <code>.sdoc</code> file next to your component and export
28
- a <code>meta</code> object with the component reference and title.
29
- </p>
30
-
31
- <h2>File Types</h2>
32
- <ul>
33
- <li><strong>.sdoc</strong> — Component documentation with snippets</li>
34
- <li><strong>.page.sdoc</strong> — Standalone content pages</li>
35
- <li><strong>.layout.sdoc</strong> — Full-page layout previews</li>
36
- </ul>
37
- </div>
package/dist/ui/Dashboard.layout.sdoc DELETED
@@ -1,60 +0,0 @@
1
- <script lang="ts">
2
- export const meta = {
3
- title: ':Layouts / Dashboard',
4
- description: 'A dashboard layout with header, sidebar, and content area.',
5
- };
6
- </script>
7
-
8
- <div style="display: flex; flex-direction: column; height: 100vh; ">
9
- <header style="padding: 12px 24px; background: #1e293b; color: white; display: flex; align-items: center; justify-content: space-between;">
10
- <span style="font-weight: 700; font-size: 16px;">Dashboard</span>
11
- <nav style="display: flex; gap: 16px; font-size: 14px;">
12
- <span style="color: #94a3b8; cursor: pointer;">Settings</span>
13
- <span style="color: #94a3b8; cursor: pointer;">Profile</span>
14
- </nav>
15
- </header>
16
- <div style="display: flex; flex: 1; overflow: hidden;">
17
- <aside style="width: 200px; background: #f8fafc; border-right: 1px solid #e2e8f0; padding: 16px;">
18
- <nav style="display: flex; flex-direction: column; gap: 4px;">
19
- <div style="padding: 8px 12px; border-radius: 6px; color: #334155; background: #e2e8f0; font-size: 14px; font-weight: 500;">Overview</div>
20
- <div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Analytics</div>
21
- <div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Users</div>
22
- <div style="padding: 8px 12px; border-radius: 6px; color: #64748b; font-size: 14px;">Reports</div>
23
- </nav>
24
- </aside>
25
- <main style="flex: 1; padding: 24px; overflow-y: auto; background: #ffffff;">
26
- <h1 style="font-size: 24px; font-weight: 700; margin: 0 0 16px; color: #0f172a;">Overview</h1>
27
- <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;">
28
- <div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
29
- <div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Total Users</div>
30
- <div style="font-size: 28px; font-weight: 700; color: #0f172a;">1,234</div>
31
- </div>
32
- <div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
33
- <div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Revenue</div>
34
- <div style="font-size: 28px; font-weight: 700; color: #0f172a;">$12.4k</div>
35
- </div>
36
- <div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
37
- <div style="font-size: 13px; color: #64748b; margin-bottom: 4px;">Active Now</div>
38
- <div style="font-size: 28px; font-weight: 700; color: #0f172a;">89</div>
39
- </div>
40
- </div>
41
- <div style="padding: 20px; border-radius: 8px; border: 1px solid #e2e8f0;">
42
- <h2 style="font-size: 16px; font-weight: 600; margin: 0 0 12px; color: #0f172a;">Recent Activity</h2>
43
- <div style="display: flex; flex-direction: column; gap: 12px;">
44
- <div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;">
45
- <span style="color: #334155; font-size: 14px;">New user registered</span>
46
- <span style="color: #94a3b8; font-size: 13px;">2 min ago</span>
47
- </div>
48
- <div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9;">
49
- <span style="color: #334155; font-size: 14px;">Payment received</span>
50
- <span style="color: #94a3b8; font-size: 13px;">15 min ago</span>
51
- </div>
52
- <div style="display: flex; justify-content: space-between;">
53
- <span style="color: #334155; font-size: 14px;">Report generated</span>
54
- <span style="color: #94a3b8; font-size: 13px;">1 hour ago</span>
55
- </div>
56
- </div>
57
- </div>
58
- </main>
59
- </div>
60
- </div>