astryx-dracula 0.4.0 → 0.5.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 (50) hide show
  1. package/package.json +6 -2
  2. package/shared/auth-chrome.tsx +156 -6
  3. package/shared/chaptered-doc.tsx +3 -4
  4. package/shared/chart-hues.ts +0 -5
  5. package/shared/chart-legend.tsx +2 -3
  6. package/shared/data-bar.tsx +5 -5
  7. package/shared/format-money.ts +3 -0
  8. package/shared/metric-card.tsx +127 -0
  9. package/shared/scene-hues.ts +0 -8
  10. package/shared/scene-tile.tsx +3 -11
  11. package/shared/settings-data.ts +28 -0
  12. package/shared/settings-rows.tsx +1 -6
  13. package/shared/stars.tsx +28 -0
  14. package/templates/ai-chat-landing.tsx +88 -58
  15. package/templates/ai-chat.tsx +65 -78
  16. package/templates/centered-hero.tsx +2 -2
  17. package/templates/dashboard-portfolio.tsx +77 -155
  18. package/templates/dashboard.tsx +17 -134
  19. package/templates/detail-page.tsx +14 -18
  20. package/templates/documentation-design.tsx +66 -519
  21. package/templates/documentation-technical.tsx +2 -22
  22. package/templates/editor.tsx +168 -185
  23. package/templates/file-explorer.tsx +10 -24
  24. package/templates/ide.tsx +12 -18
  25. package/templates/incident-console.tsx +48 -46
  26. package/templates/kanban-board.tsx +36 -85
  27. package/templates/library.tsx +42 -66
  28. package/templates/login-card.tsx +33 -126
  29. package/templates/login-split.tsx +91 -123
  30. package/templates/login-sso.tsx +12 -33
  31. package/templates/login.tsx +21 -121
  32. package/templates/messaging-shell.tsx +162 -168
  33. package/templates/payment-form.tsx +24 -26
  34. package/templates/product-detail.tsx +7 -40
  35. package/templates/product-tour.tsx +38 -60
  36. package/templates/settings-dialog.tsx +10 -32
  37. package/templates/settings-sidebar.tsx +44 -77
  38. package/templates/settings.tsx +208 -121
  39. package/templates/shell-nav.tsx +20 -75
  40. package/templates/shell-side-nav.tsx +16 -90
  41. package/templates/shell-top-nav.tsx +20 -53
  42. package/templates/side-gallery.tsx +19 -19
  43. package/templates/table-grouped.tsx +17 -164
  44. package/templates/table-page-chart.tsx +12 -11
  45. package/templates/table-page-heatmap-status.tsx +0 -17
  46. package/templates/table-page-shoe-store-heatmap.tsx +12 -12
  47. package/templates/table-page.tsx +4 -31
  48. package/templates/table.tsx +7 -10
  49. package/templates/tech-report.tsx +58 -72
  50. package/templates/theme-showcase.tsx +124 -415
package/templates/detail-page.tsx CHANGED
@@ -12,7 +12,6 @@ import {
12
12
  VStack,
13
13
  HStack,
14
14
  StackItem,
15
- Card,
16
15
  Section,
17
16
  } from '@astryxdesign/core/Layout';
18
17
  import {Text, Heading} from '@astryxdesign/core/Text';
@@ -29,6 +28,8 @@ import {Collapsible} from '@astryxdesign/core/Collapsible';
29
28
  import {Icon} from '@astryxdesign/core/Icon';
30
29
  import {Dialog, DialogHeader} from '@astryxdesign/core/Dialog';
31
30
  import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
31
+ import {SceneFrame} from 'astryx-dracula/shared/scene-frame';
32
+ import {formatMoney} from 'astryx-dracula/shared/format-money';
32
33
  import {
33
34
  Calendar,
34
35
  Flag,
@@ -121,12 +122,8 @@ const sigilClip: CSSProperties = {
121
122
  function ProductSigil({index}: {name: string; index: number}) {
122
123
  const hue = PRODUCT_HUES[index % PRODUCT_HUES.length];
123
124
  return (
124
- <Card padding={0} style={sigilClip}>
125
- <svg
126
- viewBox="0 0 40 40"
127
- width={40}
128
- height={40}
129
- aria-hidden="true">
125
+ <div style={sigilClip}>
126
+ <SceneFrame label={`${PRODUCTS[index % PRODUCTS.length].name} sigil`} viewBox="0 0 40 40" hasBackdrop={false}>
130
127
  <rect width="40" height="40" fill="var(--dracula-bg-light)" />
131
128
  <circle cx={28} cy={11} r={7} fill={hue} />
132
129
  <circle
@@ -140,8 +137,8 @@ function ProductSigil({index}: {name: string; index: number}) {
140
137
  d="M0 28 Q10 22 20 26 T40 24 V40 H0 Z"
141
138
  fill="var(--dracula-current-line)"
142
139
  />
143
- </svg>
144
- </Card>
140
+ </SceneFrame>
141
+ </div>
145
142
  );
146
143
  }
147
144
 
@@ -151,7 +148,6 @@ const SHIPPING = 0;
151
148
  const TAX_RATE = 0.0825;
152
149
  const TAX = Math.round((SUBTOTAL - DISCOUNT) * TAX_RATE * 100) / 100;
153
150
  const TOTAL = SUBTOTAL - DISCOUNT + SHIPPING + TAX;
154
- const fmt = (n: number) => `$${n.toFixed(2)}`;
155
151
 
156
152
  // ─── Activity data ──────────────────────────────────────────────────────────
157
153
  const ACTIVITY = [
@@ -381,14 +377,14 @@ function ItemsCard() {
381
377
  weight="semibold"
382
378
  maxLines={1}
383
379
  hasTabularNumbers>
384
- {fmt(product.price * product.qty)}
380
+ {formatMoney(product.price * product.qty)}
385
381
  </Text>
386
382
  <Text
387
383
  type="supporting"
388
384
  color="secondary"
389
385
  maxLines={1}
390
386
  hasTabularNumbers>
391
- {fmt(product.price)} {'×'} {product.qty}
387
+ {formatMoney(product.price)} {'×'} {product.qty}
392
388
  </Text>
393
389
  </VStack>
394
390
  }
@@ -430,7 +426,7 @@ function InvoiceCard() {
430
426
  </Text>
431
427
  </StackItem>
432
428
  <Text type="body" hasTabularNumbers>
433
- {fmt(SUBTOTAL)}
429
+ {formatMoney(SUBTOTAL)}
434
430
  </Text>
435
431
  </HStack>
436
432
  </MetadataListItem>
@@ -440,7 +436,7 @@ function InvoiceCard() {
440
436
  <Text type="body">New customer code: NEW15</Text>
441
437
  </StackItem>
442
438
  <Text type="body" hasTabularNumbers>
443
- – {fmt(DISCOUNT)}
439
+ – {formatMoney(DISCOUNT)}
444
440
  </Text>
445
441
  </HStack>
446
442
  </MetadataListItem>
@@ -452,7 +448,7 @@ function InvoiceCard() {
452
448
  </Text>
453
449
  </StackItem>
454
450
  <Text type="body" hasTabularNumbers>
455
- {fmt(SHIPPING)}
451
+ {formatMoney(SHIPPING)}
456
452
  </Text>
457
453
  </HStack>
458
454
  </MetadataListItem>
@@ -464,7 +460,7 @@ function InvoiceCard() {
464
460
  </Text>
465
461
  </StackItem>
466
462
  <Text type="body" hasTabularNumbers>
467
- {fmt(TAX)}
463
+ {formatMoney(TAX)}
468
464
  </Text>
469
465
  </HStack>
470
466
  </MetadataListItem>
@@ -472,7 +468,7 @@ function InvoiceCard() {
472
468
  <HStack>
473
469
  <StackItem size="fill" />
474
470
  <Text type="body" weight="semibold" hasTabularNumbers>
475
- {fmt(TOTAL)}
471
+ {formatMoney(TOTAL)}
476
472
  </Text>
477
473
  </HStack>
478
474
  </MetadataListItem>
@@ -489,7 +485,7 @@ function InvoiceCard() {
489
485
  </Text>
490
486
  </StackItem>
491
487
  <Text type="body" hasTabularNumbers>
492
- {fmt(TOTAL)}
488
+ {formatMoney(TOTAL)}
493
489
  </Text>
494
490
  </HStack>
495
491
  </MetadataListItem>