astryx-dracula 0.3.0 → 0.4.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 (36) hide show
  1. package/USAGE.md +27 -1
  2. package/astryx-dracula.d.ts +2 -2
  3. package/astryx-dracula.js +384 -3
  4. package/astryx-dracula.variants.d.ts +2 -14
  5. package/icons.mjs +125 -0
  6. package/package.json +16 -8
  7. package/shared/revenue-chart.tsx +72 -9
  8. package/shared/settings-data.ts +43 -1
  9. package/shared/settings-rows.tsx +81 -30
  10. package/shared/sparkline.tsx +9 -1
  11. package/templates/ai-chat-landing.tsx +17 -9
  12. package/templates/ai-chat.tsx +2 -2
  13. package/templates/centered-hero.tsx +2 -2
  14. package/templates/contact-form.tsx +11 -10
  15. package/templates/dashboard.tsx +7 -3
  16. package/templates/detail-page.tsx +11 -4
  17. package/templates/documentation-design.tsx +43 -29
  18. package/templates/documentation-technical.tsx +11 -9
  19. package/templates/file-explorer.tsx +82 -70
  20. package/templates/form-two-column.tsx +1 -1
  21. package/templates/ide.tsx +6 -6
  22. package/templates/incident-console.tsx +27 -4
  23. package/templates/login-card.tsx +8 -5
  24. package/templates/login-split.tsx +21 -12
  25. package/templates/login-sso.tsx +57 -41
  26. package/templates/login.tsx +23 -20
  27. package/templates/payment-form.tsx +39 -45
  28. package/templates/product-detail.tsx +4 -6
  29. package/templates/product-tour.tsx +2 -2
  30. package/templates/settings-dialog.tsx +84 -87
  31. package/templates/settings-sidebar.tsx +92 -80
  32. package/templates/table-grouped.tsx +126 -29
  33. package/templates/table.tsx +21 -2
  34. package/templates/tech-report.tsx +1 -1
  35. package/theme.css +211 -119
  36. package/tokens.css +15 -7
package/templates/settings-sidebar.tsx CHANGED
@@ -1,12 +1,12 @@
1
1
  // Copyright (c) Meta Platforms, Inc. and affiliates.
2
2
  // XLE (canonical structure, validated with `bunx astryx layout check`):
3
- // L > (LP[p=0] > V[g=4] > Tx"Account settings"[t=label] + (UL > LI*8) + D + LI"Professional hosting tools") + (LC[p=6] > V[g=0] > (Tbar > B.ghost + Hd"Personal info"[level=1]) + Hd"Personal info"[level=1] + (V[g=0] > (H[j=between a=start] > (V[g=0] > Tx"Legal name"[weight=semibold] + Tx"Vlad Dracul"[t=supporting]) + Lk"Edit")*7) + (C.muted > V[g=4] > (H[g=3 a=start] > Ic + (V[g=1] > Tx"Why is info hidden?"[weight=semibold] + Tx[t=supporting]))*3))
3
+ // L > (LP[p=0] > V[g=4] > Tx"Account settings"[t=label] + (UL > LI*8) + D + LI"Professional hosting tools") + (LC[p=6] > V[g=0] > (Tbar > B.ghost + Hd"Personal info"[level=1]) + Hd"Personal info"[level=1] + (V[g=0] > (H[j=between a=start] > (V[g=1] > Tx"Legal name"[weight=semibold] + Tx"Vlad Dracul"[t=supporting]) + B.secondary"Edit")*7) + (C.muted > V[g=4] > (H[g=3 a=start] > Ic + (V[g=1] > Tx"Why is info hidden?"[weight=semibold] + Tx[t=supporting]))*3))
4
4
 
5
5
  /**
6
- * Settings Panels — account sections with a nav panel and divided rows. Frame: Layout nav panel (fill) | content column of section views. One (Frame/responsive/container: see XLE header above.)
6
+ * Settings Panels — account sections with a nav panel and spaced rows. Frame: Layout nav panel (fill) | content column of section views. One (Frame/responsive/container: see XLE header above.)
7
7
  */
8
8
 
9
- import {Fragment, useState, type CSSProperties} from 'react';
9
+ import {useState, type CSSProperties} from 'react';
10
10
  import {useMediaQuery} from '@astryxdesign/core/hooks';
11
11
  import {
12
12
  VStack,
@@ -78,12 +78,24 @@ const SECTION_TITLES: Record<string, string> = {
78
78
 
79
79
  const TAX_ROWS: InfoRow[] = [
80
80
  {label: 'Tax scrolls', value: 'Not provided', action: 'Add'},
81
- {label: 'Past scrolls', value: 'No scrolls yet', action: 'View'},
81
+ {
82
+ label: 'Past scrolls',
83
+ value: 'No scrolls yet',
84
+ action: 'View',
85
+ actionKind: 'destination',
86
+ href: SELF_HASH,
87
+ },
82
88
  ];
83
89
 
84
90
  const PAYOUT_ROWS: InfoRow[] = [
85
91
  {label: 'Payout crypt', value: 'Not set up', action: 'Add'},
86
- {label: 'Past payouts', value: 'No tributes yet', action: 'View'},
92
+ {
93
+ label: 'Past payouts',
94
+ value: 'No tributes yet',
95
+ action: 'View',
96
+ actionKind: 'destination',
97
+ href: SELF_HASH,
98
+ },
87
99
  ];
88
100
 
89
101
 
@@ -248,35 +260,32 @@ export default function SettingsSidebar() {
248
260
 
249
261
  {activeTab === 'login' && (
250
262
  <VStack gap={8}>
251
- <VStack gap={0}>
263
+ <VStack gap={2}>
252
264
  <Heading level={2}>Login</Heading>
253
- <Divider />
254
265
  {LOGIN_ROWS.map(row => (
255
266
  <InfoRowItem
256
267
  key={row.label}
257
268
  {...row}
258
- href={SELF_HASH}
269
+ hasDivider={false}
259
270
  style={rowPadding}
260
271
  />
261
272
  ))}
262
273
  </VStack>
263
274
 
264
- <VStack gap={0}>
275
+ <VStack gap={2}>
265
276
  <Heading level={2}>Social accounts</Heading>
266
- <Divider />
267
277
  {SOCIAL_ROWS.map(row => (
268
278
  <InfoRowItem
269
279
  key={row.label}
270
280
  {...row}
271
- href={SELF_HASH}
281
+ hasDivider={false}
272
282
  style={rowPadding}
273
283
  />
274
284
  ))}
275
285
  </VStack>
276
286
 
277
- <VStack gap={0}>
287
+ <VStack gap={2}>
278
288
  <Heading level={2}>Device history</Heading>
279
- <Divider />
280
289
  {DEVICE_ROWS.map((device) => (
281
290
  <HStack
282
291
  key={device.location}
@@ -285,7 +294,7 @@ export default function SettingsSidebar() {
285
294
  style={rowPadding}>
286
295
  <Icon icon={Monitor} />
287
296
  <StackItem size="fill">
288
- <VStack gap={0}>
297
+ <VStack gap={1}>
289
298
  {/* wrap: the label plus the session status
290
299
  exceed the content width on a phone. */}
291
300
  <HStack gap={2} vAlign="center" wrap="wrap">
@@ -314,23 +323,25 @@ export default function SettingsSidebar() {
314
323
  </VStack>
315
324
  </StackItem>
316
325
  {device.action && (
317
- <Link href={SELF_HASH} style={actionNoWrap}>
318
- {device.action}
319
- </Link>
326
+ <Button
327
+ label={device.action}
328
+ variant="secondary"
329
+ size="sm"
330
+ onClick={() => {}}
331
+ style={actionNoWrap}
332
+ />
320
333
  )}
321
334
  </HStack>
322
335
  ))}
323
- <Divider />
324
336
  </VStack>
325
337
 
326
- <VStack gap={0}>
338
+ <VStack gap={2}>
327
339
  <Heading level={2}>Account</Heading>
328
- <Divider />
329
340
  <HStack
330
341
  hAlign="between"
331
342
  vAlign="start"
332
343
  style={rowPadding}>
333
- <VStack gap={0}>
344
+ <VStack gap={1}>
334
345
  <Text type="body" weight="semibold" display="block">
335
346
  Deactivate your account
336
347
  </Text>
@@ -341,11 +352,14 @@ export default function SettingsSidebar() {
341
352
  This action cannot be undone
342
353
  </Text>
343
354
  </VStack>
344
- <Link href={SELF_HASH} style={actionNoWrap}>
345
- Deactivate
346
- </Link>
355
+ <Button
356
+ label="Deactivate"
357
+ variant="secondary"
358
+ size="sm"
359
+ onClick={() => {}}
360
+ style={actionNoWrap}
361
+ />
347
362
  </HStack>
348
- <Divider />
349
363
  </VStack>
350
364
  </VStack>
351
365
  )}
@@ -354,7 +368,6 @@ export default function SettingsSidebar() {
354
368
  <VStack gap={8}>
355
369
  <VStack gap={2}>
356
370
  <Heading level={2}>Shared access</Heading>
357
- <Divider />
358
371
  <Text type="body" color="secondary">
359
372
  Review each request carefully before approving access.
360
373
  We&apos;ll email your kin or coven-mate a 4-digit
@@ -402,7 +415,7 @@ export default function SettingsSidebar() {
402
415
  onEdit={() => setExpandedRow('language')}
403
416
  onCancel={() => setExpandedRow(null)}
404
417
  onSave={() => setExpandedRow(null)}
405
- href={SELF_HASH}
418
+ hasDivider={false}
406
419
  style={rowPadding}>
407
420
  <Selector
408
421
  label="Language"
@@ -423,7 +436,7 @@ export default function SettingsSidebar() {
423
436
  onEdit={() => setExpandedRow('currency')}
424
437
  onCancel={() => setExpandedRow(null)}
425
438
  onSave={() => setExpandedRow(null)}
426
- href={SELF_HASH}
439
+ hasDivider={false}
427
440
  style={rowPadding}>
428
441
  <Selector
429
442
  label="Currency"
@@ -444,7 +457,7 @@ export default function SettingsSidebar() {
444
457
  onEdit={() => setExpandedRow('timezone')}
445
458
  onCancel={() => setExpandedRow(null)}
446
459
  onSave={() => setExpandedRow(null)}
447
- href={SELF_HASH}
460
+ hasDivider={false}
448
461
  style={rowPadding}>
449
462
  <Selector
450
463
  label="Time zone"
@@ -472,7 +485,7 @@ export default function SettingsSidebar() {
472
485
  onEdit={() => setExpandedRow('legalName')}
473
486
  onCancel={() => setExpandedRow(null)}
474
487
  onSave={() => setExpandedRow(null)}
475
- href={SELF_HASH}
488
+ hasDivider={false}
476
489
  style={rowPadding}>
477
490
  <TextInput
478
491
  label="Legal name"
@@ -488,7 +501,7 @@ export default function SettingsSidebar() {
488
501
  onEdit={() => setExpandedRow('preferredName')}
489
502
  onCancel={() => setExpandedRow(null)}
490
503
  onSave={() => setExpandedRow(null)}
491
- href={SELF_HASH}
504
+ hasDivider={false}
492
505
  style={rowPadding}>
493
506
  <TextInput
494
507
  label="Preferred first name"
@@ -504,7 +517,7 @@ export default function SettingsSidebar() {
504
517
  onEdit={() => setExpandedRow('email')}
505
518
  onCancel={() => setExpandedRow(null)}
506
519
  onSave={() => setExpandedRow(null)}
507
- href={SELF_HASH}
520
+ hasDivider={false}
508
521
  style={rowPadding}>
509
522
  <TextInput
510
523
  label="Email address"
@@ -520,7 +533,7 @@ export default function SettingsSidebar() {
520
533
  onEdit={() => setExpandedRow('phone')}
521
534
  onCancel={() => setExpandedRow(null)}
522
535
  onSave={() => setExpandedRow(null)}
523
- href={SELF_HASH}
536
+ hasDivider={false}
524
537
  style={rowPadding}>
525
538
  <TextInput
526
539
  label="Phone number"
@@ -533,7 +546,7 @@ export default function SettingsSidebar() {
533
546
  label="Identity verification"
534
547
  value="Verified"
535
548
  action=""
536
- href={SELF_HASH}
549
+ hasDivider={false}
537
550
  style={rowPadding}
538
551
  />
539
552
  <ExpandableRow
@@ -543,7 +556,7 @@ export default function SettingsSidebar() {
543
556
  onEdit={() => setExpandedRow('address')}
544
557
  onCancel={() => setExpandedRow(null)}
545
558
  onSave={() => setExpandedRow(null)}
546
- href={SELF_HASH}
559
+ hasDivider={false}
547
560
  style={rowPadding}>
548
561
  <TextInput
549
562
  label="Residential address"
@@ -559,7 +572,7 @@ export default function SettingsSidebar() {
559
572
  onEdit={() => setExpandedRow('mailingAddress')}
560
573
  onCancel={() => setExpandedRow(null)}
561
574
  onSave={() => setExpandedRow(null)}
562
- href={SELF_HASH}
575
+ hasDivider={false}
563
576
  style={rowPadding}>
564
577
  <TextInput
565
578
  label="Mailing address"
@@ -575,7 +588,7 @@ export default function SettingsSidebar() {
575
588
  onEdit={() => setExpandedRow('emergencyContact')}
576
589
  onCancel={() => setExpandedRow(null)}
577
590
  onSave={() => setExpandedRow(null)}
578
- href={SELF_HASH}
591
+ hasDivider={false}
579
592
  style={rowPadding}>
580
593
  <TextInput
581
594
  label="Emergency contact"
@@ -588,26 +601,20 @@ export default function SettingsSidebar() {
588
601
 
589
602
  <Card padding={4}>
590
603
  <VStack gap={4}>
591
- {INFO_TILES.map((tile, i) => (
592
- <Fragment key={tile.title}>
593
- {i > 0 && <Divider />}
594
- <HStack gap={3} vAlign="start">
595
- <Center width={48} height={48} style={iconBox}>
596
- <Icon icon={tile.icon} />
597
- </Center>
598
- <VStack gap={0}>
599
- <Text type="body" weight="semibold" display="block">
600
- {tile.title}
601
- </Text>
602
- <Text
603
- type="body"
604
- color="secondary"
605
- display="block">
606
- {tile.body}
607
- </Text>
608
- </VStack>
609
- </HStack>
610
- </Fragment>
604
+ {INFO_TILES.map(tile => (
605
+ <HStack key={tile.title} gap={3} vAlign="start">
606
+ <Center width={48} height={48} style={iconBox}>
607
+ <Icon icon={tile.icon} />
608
+ </Center>
609
+ <VStack gap={1}>
610
+ <Text type="body" weight="semibold" display="block">
611
+ {tile.title}
612
+ </Text>
613
+ <Text type="body" color="secondary" display="block">
614
+ {tile.body}
615
+ </Text>
616
+ </VStack>
617
+ </HStack>
611
618
  ))}
612
619
  </VStack>
613
620
  </Card>
@@ -619,7 +626,7 @@ export default function SettingsSidebar() {
619
626
  {!isNarrow && <Heading level={1}>Privacy</Heading>}
620
627
 
621
628
  <VStack gap={8}>
622
- <VStack gap={0}>
629
+ <VStack gap={2}>
623
630
  <Heading level={2}>Messages</Heading>
624
631
  <VStack style={rowPadding}>
625
632
  <Switch
@@ -636,10 +643,9 @@ export default function SettingsSidebar() {
636
643
  </Text>
637
644
  <Link href={SELF_HASH}>View</Link>
638
645
  </HStack>
639
- <Divider />
640
646
  </VStack>
641
647
 
642
- <VStack gap={0}>
648
+ <VStack gap={2}>
643
649
  <Heading level={2}>Listings</Heading>
644
650
  <VStack style={rowPadding}>
645
651
  <Switch
@@ -651,14 +657,13 @@ export default function SettingsSidebar() {
651
657
  labelSpacing="spread"
652
658
  />
653
659
  </VStack>
654
- <Divider />
655
660
  </VStack>
656
661
 
657
662
  <VStack gap={4}>
658
663
  <Heading level={2}>Reviews</Heading>
659
664
  <Text type="body" color="secondary">
660
665
  Choose what&apos;s shared when you write a review.{' '}
661
- <Link href={SELF_HASH} type="body">
666
+ <Link href={SELF_HASH} type="body" hasUnderline>
662
667
  Learn more
663
668
  </Link>
664
669
  </Text>
@@ -696,7 +701,6 @@ export default function SettingsSidebar() {
696
701
  labelSpacing="spread"
697
702
  />
698
703
  </VStack>
699
- <Divider />
700
704
  </VStack>
701
705
 
702
706
  <VStack gap={4}>
@@ -704,7 +708,13 @@ export default function SettingsSidebar() {
704
708
  <Card>
705
709
  <HStack hAlign="between" vAlign="center">
706
710
  <Text type="body">Request my personal data</Text>
707
- <Link href={SELF_HASH}>Request</Link>
711
+ <Button
712
+ label="Request"
713
+ variant="secondary"
714
+ size="sm"
715
+ onClick={() => {}}
716
+ style={actionNoWrap}
717
+ />
708
718
  </HStack>
709
719
  </Card>
710
720
  <Switch
@@ -718,7 +728,13 @@ export default function SettingsSidebar() {
718
728
  <Card>
719
729
  <HStack hAlign="between" vAlign="center">
720
730
  <Text type="body">Delete my account</Text>
721
- <Link href={SELF_HASH}>Delete</Link>
731
+ <Button
732
+ label="Delete"
733
+ variant="secondary"
734
+ size="sm"
735
+ onClick={() => {}}
736
+ style={actionNoWrap}
737
+ />
722
738
  </HStack>
723
739
  </Card>
724
740
  <Card variant="muted">
@@ -733,7 +749,10 @@ export default function SettingsSidebar() {
733
749
  <Text type="body" color="secondary">
734
750
  We&apos;re committed to keeping your data protected.
735
751
  See details in our{' '}
736
- <Link href={SELF_HASH} type="supporting">
752
+ <Link
753
+ href={SELF_HASH}
754
+ type="supporting"
755
+ hasUnderline>
737
756
  Privacy Policy
738
757
  </Link>
739
758
  .
@@ -749,9 +768,9 @@ export default function SettingsSidebar() {
749
768
  {activeNav === 'Notifications' && (
750
769
  <VStack gap={6}>
751
770
  {!isNarrow && <Heading level={1}>Notifications</Heading>}
752
- <VStack gap={0}>
771
+ <VStack gap={2}>
753
772
  <Heading level={2}>Messages</Heading>
754
- <VStack style={rowPadding}>
773
+ <VStack gap={4} style={rowPadding}>
755
774
  <Switch
756
775
  label="Email notifications"
757
776
  description="Coven updates, journey reminders, and crypt activity."
@@ -760,9 +779,6 @@ export default function SettingsSidebar() {
760
779
  labelPosition="start"
761
780
  labelSpacing="spread"
762
781
  />
763
- </VStack>
764
- <Divider />
765
- <VStack style={rowPadding}>
766
782
  <Switch
767
783
  label="Push notifications"
768
784
  description="Swift ravens for messages and booking requests."
@@ -772,7 +788,6 @@ export default function SettingsSidebar() {
772
788
  labelSpacing="spread"
773
789
  />
774
790
  </VStack>
775
- <Divider />
776
791
  </VStack>
777
792
  </VStack>
778
793
  )}
@@ -780,14 +795,13 @@ export default function SettingsSidebar() {
780
795
  {activeNav === 'Taxes' && (
781
796
  <VStack gap={6}>
782
797
  {!isNarrow && <Heading level={1}>Taxes</Heading>}
783
- <VStack gap={0}>
798
+ <VStack gap={2}>
784
799
  <Heading level={2}>Tax scrolls</Heading>
785
- <Divider />
786
800
  {TAX_ROWS.map(row => (
787
801
  <InfoRowItem
788
802
  key={row.label}
789
803
  {...row}
790
- href={SELF_HASH}
804
+ hasDivider={false}
791
805
  style={rowPadding}
792
806
  />
793
807
  ))}
@@ -798,14 +812,13 @@ export default function SettingsSidebar() {
798
812
  {activeNav === 'Payments' && (
799
813
  <VStack gap={6}>
800
814
  {!isNarrow && <Heading level={1}>Payments</Heading>}
801
- <VStack gap={0}>
815
+ <VStack gap={2}>
802
816
  <Heading level={2}>Payout crypt</Heading>
803
- <Divider />
804
817
  {PAYOUT_ROWS.map(row => (
805
818
  <InfoRowItem
806
819
  key={row.label}
807
820
  {...row}
808
- href={SELF_HASH}
821
+ hasDivider={false}
809
822
  style={rowPadding}
810
823
  />
811
824
  ))}
@@ -816,7 +829,7 @@ export default function SettingsSidebar() {
816
829
  {activeNav === 'Travel for work' && (
817
830
  <VStack gap={6}>
818
831
  {!isNarrow && <Heading level={1}>Travel for work</Heading>}
819
- <VStack gap={0}>
832
+ <VStack gap={2}>
820
833
  <Heading level={2}>Work haunts</Heading>
821
834
  <VStack style={rowPadding}>
822
835
  <Switch
@@ -828,7 +841,6 @@ export default function SettingsSidebar() {
828
841
  labelSpacing="spread"
829
842
  />
830
843
  </VStack>
831
- <Divider />
832
844
  </VStack>
833
845
  </VStack>
834
846
  )}