kedhar-ui 0.1.0 → 0.2.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 (12) hide show
  1. package/README.md +8 -8
  2. package/dist/kedhar-ui-amber.css +286 -2
  3. package/dist/kedhar-ui-emerald.css +286 -2
  4. package/dist/kedhar-ui-indigo.css +286 -2
  5. package/dist/kedhar-ui-slate.css +286 -2
  6. package/dist/kedhar-ui.css +286 -2
  7. package/package.json +1 -1
  8. package/src/components/Card.astro +31 -0
  9. package/src/components/Footer.astro +45 -0
  10. package/src/components/NavBar.astro +94 -0
  11. package/src/index.js +7 -7
  12. package/src/styles/components.css +286 -2
package/dist/kedhar-ui-indigo.css CHANGED
@@ -387,7 +387,7 @@ pre {
387
387
  transform var(--ks-duration-normal) var(--ks-ease-out);
388
388
  }
389
389
 
390
- .ks-card:hover {
390
+ .ks-card-hover:hover {
391
391
  border-color: var(--ks-color-primary-alpha);
392
392
  box-shadow: var(--ks-shadow-md);
393
393
  transform: translateY(-2px);
@@ -436,7 +436,291 @@ pre {
436
436
 
437
437
 
438
438
  /* ══════════════════════════════════════════════════════════════
439
- 7. Utility Classes
439
+ 7. NavBar (Header)
440
+ ══════════════════════════════════════════════════════════════
441
+ Fixed top navigation bar with logo, links, and theme toggle.
442
+ ══════════════════════════════════════════════════════════════ */
443
+ .ks-nav {
444
+ position: fixed;
445
+ top: 0;
446
+ left: 0;
447
+ right: 0;
448
+ z-index: var(--ks-z-sticky);
449
+ background: var(--ks-color-bg);
450
+ border-bottom: 1px solid var(--ks-color-border);
451
+ backdrop-filter: blur(12px);
452
+ -webkit-backdrop-filter: blur(12px);
453
+ background: color-mix(in srgb, var(--ks-color-bg) 75%, transparent);
454
+ }
455
+
456
+ .dark .ks-nav {
457
+ background: color-mix(in srgb, var(--ks-color-bg) 75%, transparent);
458
+ }
459
+
460
+ .ks-nav-inner {
461
+ max-width: var(--ks-max-width);
462
+ margin: 0 auto;
463
+ padding: 0 var(--ks-space-4);
464
+ height: 64px;
465
+ display: flex;
466
+ align-items: center;
467
+ justify-content: space-between;
468
+ gap: var(--ks-space-4);
469
+ }
470
+
471
+ @media (min-width: 640px) {
472
+ .ks-nav-inner {
473
+ padding: 0 var(--ks-space-6);
474
+ }
475
+ }
476
+
477
+ @media (min-width: 1024px) {
478
+ .ks-nav-inner {
479
+ padding: 0 var(--ks-space-8);
480
+ }
481
+ }
482
+
483
+ .ks-nav-logo {
484
+ font-size: var(--ks-text-lg);
485
+ font-weight: var(--ks-weight-bold);
486
+ color: var(--ks-color-text);
487
+ text-decoration: none;
488
+ letter-spacing: -0.02em;
489
+ white-space: nowrap;
490
+ flex-shrink: 0;
491
+ }
492
+
493
+ .ks-nav-logo:hover {
494
+ color: var(--ks-color-primary);
495
+ }
496
+
497
+ .ks-nav-logo-accent {
498
+ color: var(--ks-color-primary);
499
+ }
500
+
501
+ .ks-nav-links {
502
+ display: none;
503
+ align-items: center;
504
+ gap: var(--ks-space-8);
505
+ list-style: none;
506
+ margin: 0;
507
+ padding: 0;
508
+ }
509
+
510
+ @media (min-width: 640px) {
511
+ .ks-nav-links {
512
+ display: flex;
513
+ }
514
+ }
515
+
516
+ .ks-nav-links a {
517
+ font-size: var(--ks-text-sm);
518
+ font-weight: var(--ks-weight-medium);
519
+ color: var(--ks-color-text-muted);
520
+ text-decoration: none;
521
+ transition: color var(--ks-duration-fast) var(--ks-ease-out);
522
+ }
523
+
524
+ .ks-nav-links a:hover {
525
+ color: var(--ks-color-text);
526
+ }
527
+
528
+ .ks-nav-right {
529
+ display: flex;
530
+ align-items: center;
531
+ gap: var(--ks-space-3);
532
+ flex-shrink: 0;
533
+ }
534
+
535
+ /* Mobile menu button */
536
+ .ks-nav-hamburger {
537
+ display: flex;
538
+ align-items: center;
539
+ justify-content: center;
540
+ width: 36px;
541
+ height: 36px;
542
+ padding: 0;
543
+ border: 1px solid var(--ks-color-border);
544
+ border-radius: var(--ks-radius-sm);
545
+ background: var(--ks-color-surface);
546
+ color: var(--ks-color-text-muted);
547
+ cursor: pointer;
548
+ transition: border-color var(--ks-duration-fast) var(--ks-ease-out);
549
+ }
550
+
551
+ @media (min-width: 640px) {
552
+ .ks-nav-hamburger {
553
+ display: none;
554
+ }
555
+ }
556
+
557
+ .ks-nav-hamburger:hover {
558
+ border-color: var(--ks-color-primary);
559
+ }
560
+
561
+ .ks-nav-hamburger svg {
562
+ width: 18px;
563
+ height: 18px;
564
+ stroke: currentColor;
565
+ fill: none;
566
+ stroke-width: 2;
567
+ stroke-linecap: round;
568
+ stroke-linejoin: round;
569
+ }
570
+
571
+ /* Mobile dropdown menu */
572
+ .ks-nav-mobile {
573
+ display: none;
574
+ border-top: 1px solid var(--ks-color-border);
575
+ background: var(--ks-color-bg);
576
+ padding: var(--ks-space-2);
577
+ }
578
+
579
+ .ks-nav-mobile.open {
580
+ display: block;
581
+ }
582
+
583
+ .ks-nav-mobile a {
584
+ display: block;
585
+ padding: var(--ks-space-3) var(--ks-space-4);
586
+ border-radius: var(--ks-radius-sm);
587
+ font-size: var(--ks-text-sm);
588
+ font-weight: var(--ks-weight-medium);
589
+ color: var(--ks-color-text-muted);
590
+ text-decoration: none;
591
+ transition: background var(--ks-duration-fast) var(--ks-ease-out),
592
+ color var(--ks-duration-fast) var(--ks-ease-out);
593
+ }
594
+
595
+ .ks-nav-mobile a:hover {
596
+ background: var(--ks-color-surface-hover);
597
+ color: var(--ks-color-text);
598
+ }
599
+
600
+ /* Spacer to offset fixed navbar height */
601
+ .ks-nav-spacer {
602
+ height: 64px;
603
+ }
604
+
605
+
606
+ /* ══════════════════════════════════════════════════════════════
607
+ 8. Footer
608
+ ══════════════════════════════════════════════════════════════ */
609
+ .ks-footer {
610
+ border-top: 1px solid var(--ks-color-border);
611
+ padding: var(--ks-space-8) var(--ks-space-4);
612
+ text-align: center;
613
+ }
614
+
615
+ .ks-footer-inner {
616
+ max-width: var(--ks-max-width);
617
+ margin: 0 auto;
618
+ }
619
+
620
+ .ks-footer-links {
621
+ display: flex;
622
+ gap: var(--ks-space-4);
623
+ justify-content: center;
624
+ flex-wrap: wrap;
625
+ margin-bottom: var(--ks-space-3);
626
+ }
627
+
628
+ .ks-footer-links a {
629
+ font-size: var(--ks-text-sm);
630
+ color: var(--ks-color-text-muted);
631
+ text-decoration: none;
632
+ transition: color var(--ks-duration-fast) var(--ks-ease-out);
633
+ }
634
+
635
+ .ks-footer-links a:hover {
636
+ color: var(--ks-color-primary);
637
+ }
638
+
639
+ .ks-footer-copy {
640
+ font-size: var(--ks-text-sm);
641
+ color: var(--ks-color-text-muted);
642
+ margin: 0;
643
+ line-height: 1.6;
644
+ }
645
+
646
+ .ks-footer-copy a {
647
+ color: var(--ks-color-primary);
648
+ text-decoration: none;
649
+ }
650
+
651
+ .ks-footer-copy a:hover {
652
+ text-decoration: underline;
653
+ }
654
+
655
+ .ks-footer-built {
656
+ font-size: var(--ks-text-xs);
657
+ color: var(--ks-color-text-muted);
658
+ opacity: 0.7;
659
+ margin-top: var(--ks-space-1);
660
+ }
661
+
662
+
663
+ /* ══════════════════════════════════════════════════════════════
664
+ 9. Button
665
+ ══════════════════════════════════════════════════════════════
666
+ Reusable button styles.
667
+ ══════════════════════════════════════════════════════════════ */
668
+ .ks-btn {
669
+ display: inline-flex;
670
+ align-items: center;
671
+ justify-content: center;
672
+ gap: var(--ks-space-2);
673
+ padding: var(--ks-space-2) var(--ks-space-4);
674
+ border-radius: var(--ks-radius-md);
675
+ font-size: var(--ks-text-sm);
676
+ font-weight: var(--ks-weight-medium);
677
+ line-height: 1.4;
678
+ text-decoration: none;
679
+ cursor: pointer;
680
+ border: 1px solid transparent;
681
+ transition:
682
+ background var(--ks-duration-fast) var(--ks-ease-out),
683
+ color var(--ks-duration-fast) var(--ks-ease-out),
684
+ border-color var(--ks-duration-fast) var(--ks-ease-out),
685
+ box-shadow var(--ks-duration-fast) var(--ks-ease-out);
686
+ }
687
+
688
+ .ks-btn-primary {
689
+ background: var(--ks-color-primary);
690
+ color: var(--ks-color-text-inverse);
691
+ border-color: var(--ks-color-primary);
692
+ }
693
+
694
+ .ks-btn-primary:hover {
695
+ background: var(--ks-color-primary-hover);
696
+ border-color: var(--ks-color-primary-hover);
697
+ }
698
+
699
+ .ks-btn-secondary {
700
+ background: transparent;
701
+ color: var(--ks-color-text);
702
+ border-color: var(--ks-color-border);
703
+ }
704
+
705
+ .ks-btn-secondary:hover {
706
+ border-color: var(--ks-color-primary);
707
+ color: var(--ks-color-primary);
708
+ }
709
+
710
+ .ks-btn-ghost {
711
+ background: transparent;
712
+ color: var(--ks-color-text-muted);
713
+ border-color: transparent;
714
+ }
715
+
716
+ .ks-btn-ghost:hover {
717
+ background: var(--ks-color-surface-hover);
718
+ color: var(--ks-color-text);
719
+ }
720
+
721
+
722
+ /* ══════════════════════════════════════════════════════════════
723
+ 10. Utility Classes
440
724
  ══════════════════════════════════════════════════════════════ */
441
725
  .ks-sr-only {
442
726
  position: absolute;
package/dist/kedhar-ui-slate.css CHANGED
@@ -387,7 +387,7 @@ pre {
387
387
  transform var(--ks-duration-normal) var(--ks-ease-out);
388
388
  }
389
389
 
390
- .ks-card:hover {
390
+ .ks-card-hover:hover {
391
391
  border-color: var(--ks-color-primary-alpha);
392
392
  box-shadow: var(--ks-shadow-md);
393
393
  transform: translateY(-2px);
@@ -436,7 +436,291 @@ pre {
436
436
 
437
437
 
438
438
  /* ══════════════════════════════════════════════════════════════
439
- 7. Utility Classes
439
+ 7. NavBar (Header)
440
+ ══════════════════════════════════════════════════════════════
441
+ Fixed top navigation bar with logo, links, and theme toggle.
442
+ ══════════════════════════════════════════════════════════════ */
443
+ .ks-nav {
444
+ position: fixed;
445
+ top: 0;
446
+ left: 0;
447
+ right: 0;
448
+ z-index: var(--ks-z-sticky);
449
+ background: var(--ks-color-bg);
450
+ border-bottom: 1px solid var(--ks-color-border);
451
+ backdrop-filter: blur(12px);
452
+ -webkit-backdrop-filter: blur(12px);
453
+ background: color-mix(in srgb, var(--ks-color-bg) 75%, transparent);
454
+ }
455
+
456
+ .dark .ks-nav {
457
+ background: color-mix(in srgb, var(--ks-color-bg) 75%, transparent);
458
+ }
459
+
460
+ .ks-nav-inner {
461
+ max-width: var(--ks-max-width);
462
+ margin: 0 auto;
463
+ padding: 0 var(--ks-space-4);
464
+ height: 64px;
465
+ display: flex;
466
+ align-items: center;
467
+ justify-content: space-between;
468
+ gap: var(--ks-space-4);
469
+ }
470
+
471
+ @media (min-width: 640px) {
472
+ .ks-nav-inner {
473
+ padding: 0 var(--ks-space-6);
474
+ }
475
+ }
476
+
477
+ @media (min-width: 1024px) {
478
+ .ks-nav-inner {
479
+ padding: 0 var(--ks-space-8);
480
+ }
481
+ }
482
+
483
+ .ks-nav-logo {
484
+ font-size: var(--ks-text-lg);
485
+ font-weight: var(--ks-weight-bold);
486
+ color: var(--ks-color-text);
487
+ text-decoration: none;
488
+ letter-spacing: -0.02em;
489
+ white-space: nowrap;
490
+ flex-shrink: 0;
491
+ }
492
+
493
+ .ks-nav-logo:hover {
494
+ color: var(--ks-color-primary);
495
+ }
496
+
497
+ .ks-nav-logo-accent {
498
+ color: var(--ks-color-primary);
499
+ }
500
+
501
+ .ks-nav-links {
502
+ display: none;
503
+ align-items: center;
504
+ gap: var(--ks-space-8);
505
+ list-style: none;
506
+ margin: 0;
507
+ padding: 0;
508
+ }
509
+
510
+ @media (min-width: 640px) {
511
+ .ks-nav-links {
512
+ display: flex;
513
+ }
514
+ }
515
+
516
+ .ks-nav-links a {
517
+ font-size: var(--ks-text-sm);
518
+ font-weight: var(--ks-weight-medium);
519
+ color: var(--ks-color-text-muted);
520
+ text-decoration: none;
521
+ transition: color var(--ks-duration-fast) var(--ks-ease-out);
522
+ }
523
+
524
+ .ks-nav-links a:hover {
525
+ color: var(--ks-color-text);
526
+ }
527
+
528
+ .ks-nav-right {
529
+ display: flex;
530
+ align-items: center;
531
+ gap: var(--ks-space-3);
532
+ flex-shrink: 0;
533
+ }
534
+
535
+ /* Mobile menu button */
536
+ .ks-nav-hamburger {
537
+ display: flex;
538
+ align-items: center;
539
+ justify-content: center;
540
+ width: 36px;
541
+ height: 36px;
542
+ padding: 0;
543
+ border: 1px solid var(--ks-color-border);
544
+ border-radius: var(--ks-radius-sm);
545
+ background: var(--ks-color-surface);
546
+ color: var(--ks-color-text-muted);
547
+ cursor: pointer;
548
+ transition: border-color var(--ks-duration-fast) var(--ks-ease-out);
549
+ }
550
+
551
+ @media (min-width: 640px) {
552
+ .ks-nav-hamburger {
553
+ display: none;
554
+ }
555
+ }
556
+
557
+ .ks-nav-hamburger:hover {
558
+ border-color: var(--ks-color-primary);
559
+ }
560
+
561
+ .ks-nav-hamburger svg {
562
+ width: 18px;
563
+ height: 18px;
564
+ stroke: currentColor;
565
+ fill: none;
566
+ stroke-width: 2;
567
+ stroke-linecap: round;
568
+ stroke-linejoin: round;
569
+ }
570
+
571
+ /* Mobile dropdown menu */
572
+ .ks-nav-mobile {
573
+ display: none;
574
+ border-top: 1px solid var(--ks-color-border);
575
+ background: var(--ks-color-bg);
576
+ padding: var(--ks-space-2);
577
+ }
578
+
579
+ .ks-nav-mobile.open {
580
+ display: block;
581
+ }
582
+
583
+ .ks-nav-mobile a {
584
+ display: block;
585
+ padding: var(--ks-space-3) var(--ks-space-4);
586
+ border-radius: var(--ks-radius-sm);
587
+ font-size: var(--ks-text-sm);
588
+ font-weight: var(--ks-weight-medium);
589
+ color: var(--ks-color-text-muted);
590
+ text-decoration: none;
591
+ transition: background var(--ks-duration-fast) var(--ks-ease-out),
592
+ color var(--ks-duration-fast) var(--ks-ease-out);
593
+ }
594
+
595
+ .ks-nav-mobile a:hover {
596
+ background: var(--ks-color-surface-hover);
597
+ color: var(--ks-color-text);
598
+ }
599
+
600
+ /* Spacer to offset fixed navbar height */
601
+ .ks-nav-spacer {
602
+ height: 64px;
603
+ }
604
+
605
+
606
+ /* ══════════════════════════════════════════════════════════════
607
+ 8. Footer
608
+ ══════════════════════════════════════════════════════════════ */
609
+ .ks-footer {
610
+ border-top: 1px solid var(--ks-color-border);
611
+ padding: var(--ks-space-8) var(--ks-space-4);
612
+ text-align: center;
613
+ }
614
+
615
+ .ks-footer-inner {
616
+ max-width: var(--ks-max-width);
617
+ margin: 0 auto;
618
+ }
619
+
620
+ .ks-footer-links {
621
+ display: flex;
622
+ gap: var(--ks-space-4);
623
+ justify-content: center;
624
+ flex-wrap: wrap;
625
+ margin-bottom: var(--ks-space-3);
626
+ }
627
+
628
+ .ks-footer-links a {
629
+ font-size: var(--ks-text-sm);
630
+ color: var(--ks-color-text-muted);
631
+ text-decoration: none;
632
+ transition: color var(--ks-duration-fast) var(--ks-ease-out);
633
+ }
634
+
635
+ .ks-footer-links a:hover {
636
+ color: var(--ks-color-primary);
637
+ }
638
+
639
+ .ks-footer-copy {
640
+ font-size: var(--ks-text-sm);
641
+ color: var(--ks-color-text-muted);
642
+ margin: 0;
643
+ line-height: 1.6;
644
+ }
645
+
646
+ .ks-footer-copy a {
647
+ color: var(--ks-color-primary);
648
+ text-decoration: none;
649
+ }
650
+
651
+ .ks-footer-copy a:hover {
652
+ text-decoration: underline;
653
+ }
654
+
655
+ .ks-footer-built {
656
+ font-size: var(--ks-text-xs);
657
+ color: var(--ks-color-text-muted);
658
+ opacity: 0.7;
659
+ margin-top: var(--ks-space-1);
660
+ }
661
+
662
+
663
+ /* ══════════════════════════════════════════════════════════════
664
+ 9. Button
665
+ ══════════════════════════════════════════════════════════════
666
+ Reusable button styles.
667
+ ══════════════════════════════════════════════════════════════ */
668
+ .ks-btn {
669
+ display: inline-flex;
670
+ align-items: center;
671
+ justify-content: center;
672
+ gap: var(--ks-space-2);
673
+ padding: var(--ks-space-2) var(--ks-space-4);
674
+ border-radius: var(--ks-radius-md);
675
+ font-size: var(--ks-text-sm);
676
+ font-weight: var(--ks-weight-medium);
677
+ line-height: 1.4;
678
+ text-decoration: none;
679
+ cursor: pointer;
680
+ border: 1px solid transparent;
681
+ transition:
682
+ background var(--ks-duration-fast) var(--ks-ease-out),
683
+ color var(--ks-duration-fast) var(--ks-ease-out),
684
+ border-color var(--ks-duration-fast) var(--ks-ease-out),
685
+ box-shadow var(--ks-duration-fast) var(--ks-ease-out);
686
+ }
687
+
688
+ .ks-btn-primary {
689
+ background: var(--ks-color-primary);
690
+ color: var(--ks-color-text-inverse);
691
+ border-color: var(--ks-color-primary);
692
+ }
693
+
694
+ .ks-btn-primary:hover {
695
+ background: var(--ks-color-primary-hover);
696
+ border-color: var(--ks-color-primary-hover);
697
+ }
698
+
699
+ .ks-btn-secondary {
700
+ background: transparent;
701
+ color: var(--ks-color-text);
702
+ border-color: var(--ks-color-border);
703
+ }
704
+
705
+ .ks-btn-secondary:hover {
706
+ border-color: var(--ks-color-primary);
707
+ color: var(--ks-color-primary);
708
+ }
709
+
710
+ .ks-btn-ghost {
711
+ background: transparent;
712
+ color: var(--ks-color-text-muted);
713
+ border-color: transparent;
714
+ }
715
+
716
+ .ks-btn-ghost:hover {
717
+ background: var(--ks-color-surface-hover);
718
+ color: var(--ks-color-text);
719
+ }
720
+
721
+
722
+ /* ══════════════════════════════════════════════════════════════
723
+ 10. Utility Classes
440
724
  ══════════════════════════════════════════════════════════════ */
441
725
  .ks-sr-only {
442
726
  position: absolute;