sdocs 0.0.42 → 0.0.43

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 (25) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/language/index.d.ts +1 -0
  3. package/dist/language/index.js +1 -0
  4. package/dist/language/projection.d.ts +23 -0
  5. package/dist/language/projection.js +136 -0
  6. package/dist/language/projection.test.d.ts +1 -0
  7. package/dist/language/projection.test.js +117 -0
  8. package/dist/ui/About.sdoc +28 -0
  9. package/dist/ui/Button/Button.sdoc +41 -44
  10. package/dist/ui/Control/Checkbox.sdoc +7 -13
  11. package/dist/ui/Control/Color.sdoc +7 -13
  12. package/dist/ui/Control/Dimension.sdoc +7 -13
  13. package/dist/ui/Control/Number.sdoc +7 -13
  14. package/dist/ui/Control/Select.sdoc +7 -14
  15. package/dist/ui/Control/Text.sdoc +7 -13
  16. package/dist/ui/Dashboard.sdoc +57 -0
  17. package/dist/ui/Frame/Frame.sdoc +46 -48
  18. package/dist/ui/Icon/Icon.sdoc +33 -38
  19. package/dist/ui/NavTree/Group.sdoc +36 -38
  20. package/dist/ui/NavTree/Item.sdoc +52 -57
  21. package/dist/ui/NavTree/NavTree.sdoc +89 -91
  22. package/dist/ui/Stack/Stack.sdoc +41 -43
  23. package/package.json +1 -1
  24. package/dist/ui/About.page.sdoc +0 -37
  25. package/dist/ui/Dashboard.layout.sdoc +0 -60
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.43",
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>