@dheme/react 2.2.0 → 2.3.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 (4) hide show
  1. package/README.md +133 -0
  2. package/dist/index.js +656 -413
  3. package/dist/index.mjs +657 -413
  4. package/package.json +3 -3
package/dist/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ 'use client';
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
@@ -434,34 +435,109 @@ function useDebounce(value, delay) {
434
435
  // src/components/ThemeGenerator.tsx
435
436
  var import_jsx_runtime = require("react/jsx-runtime");
436
437
  function SparklesIcon({ className }) {
437
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
438
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }),
439
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 3v4" }),
440
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 17v4" }),
441
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 5h4" }),
442
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 19h4" })
443
- ] });
438
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
439
+ "svg",
440
+ {
441
+ className,
442
+ xmlns: "http://www.w3.org/2000/svg",
443
+ width: "16",
444
+ height: "16",
445
+ viewBox: "0 0 24 24",
446
+ fill: "none",
447
+ stroke: "currentColor",
448
+ strokeWidth: "2",
449
+ strokeLinecap: "round",
450
+ strokeLinejoin: "round",
451
+ children: [
452
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }),
453
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 3v4" }),
454
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 17v4" }),
455
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 5h4" }),
456
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17 19h4" })
457
+ ]
458
+ }
459
+ );
444
460
  }
445
461
  function XIcon({ className }) {
446
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
447
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
448
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
449
- ] });
462
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
463
+ "svg",
464
+ {
465
+ className,
466
+ xmlns: "http://www.w3.org/2000/svg",
467
+ width: "16",
468
+ height: "16",
469
+ viewBox: "0 0 24 24",
470
+ fill: "none",
471
+ stroke: "currentColor",
472
+ strokeWidth: "2",
473
+ strokeLinecap: "round",
474
+ strokeLinejoin: "round",
475
+ children: [
476
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
477
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
478
+ ]
479
+ }
480
+ );
450
481
  }
451
482
  function PlusIcon({ className }) {
452
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
453
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" }),
454
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" })
455
- ] });
483
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
484
+ "svg",
485
+ {
486
+ className,
487
+ xmlns: "http://www.w3.org/2000/svg",
488
+ width: "16",
489
+ height: "16",
490
+ viewBox: "0 0 24 24",
491
+ fill: "none",
492
+ stroke: "currentColor",
493
+ strokeWidth: "2",
494
+ strokeLinecap: "round",
495
+ strokeLinejoin: "round",
496
+ children: [
497
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 12h14" }),
498
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 5v14" })
499
+ ]
500
+ }
501
+ );
456
502
  }
457
503
  function ChevronUpIcon({ className }) {
458
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m18 15-6-6-6 6" }) });
504
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
505
+ "svg",
506
+ {
507
+ className,
508
+ xmlns: "http://www.w3.org/2000/svg",
509
+ width: "16",
510
+ height: "16",
511
+ viewBox: "0 0 24 24",
512
+ fill: "none",
513
+ stroke: "currentColor",
514
+ strokeWidth: "2",
515
+ strokeLinecap: "round",
516
+ strokeLinejoin: "round",
517
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m18 15-6-6-6 6" })
518
+ }
519
+ );
459
520
  }
460
521
  function RotateCcwIcon({ className }) {
461
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
462
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
463
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 3v5h5" })
464
- ] });
522
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
523
+ "svg",
524
+ {
525
+ className,
526
+ xmlns: "http://www.w3.org/2000/svg",
527
+ width: "16",
528
+ height: "16",
529
+ viewBox: "0 0 24 24",
530
+ fill: "none",
531
+ stroke: "currentColor",
532
+ strokeWidth: "2",
533
+ strokeLinecap: "round",
534
+ strokeLinejoin: "round",
535
+ children: [
536
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
537
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 3v5h5" })
538
+ ]
539
+ }
540
+ );
465
541
  }
466
542
  function HexColorPicker({ color, onChange }) {
467
543
  const hexToRgb = (hex) => {
@@ -533,7 +609,9 @@ function HexColorPicker({ color, onChange }) {
533
609
  b = q;
534
610
  break;
535
611
  }
536
- return "#" + [r, g, b].map((x) => Math.round(x * 255).toString(16).padStart(2, "0")).join("");
612
+ return "#" + [r, g, b].map(
613
+ (x) => Math.round(x * 255).toString(16).padStart(2, "0")
614
+ ).join("");
537
615
  };
538
616
  const rgb = hexToRgb(color);
539
617
  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -541,19 +619,25 @@ function HexColorPicker({ color, onChange }) {
541
619
  const hueRef = (0, import_react7.useRef)(null);
542
620
  const isDraggingGradient = (0, import_react7.useRef)(false);
543
621
  const isDraggingHue = (0, import_react7.useRef)(false);
544
- const handleGradientPointer = (0, import_react7.useCallback)((e) => {
545
- const rect = gradientRef.current?.getBoundingClientRect();
546
- if (!rect) return;
547
- const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
548
- const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
549
- onChange(hsvToHex(hsv.h, x * 100, (1 - y) * 100));
550
- }, [hsv.h, onChange]);
551
- const handleHuePointer = (0, import_react7.useCallback)((e) => {
552
- const rect = hueRef.current?.getBoundingClientRect();
553
- if (!rect) return;
554
- const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
555
- onChange(hsvToHex(x * 360, hsv.s, hsv.v));
556
- }, [hsv.s, hsv.v, onChange]);
622
+ const handleGradientPointer = (0, import_react7.useCallback)(
623
+ (e) => {
624
+ const rect = gradientRef.current?.getBoundingClientRect();
625
+ if (!rect) return;
626
+ const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
627
+ const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
628
+ onChange(hsvToHex(hsv.h, x * 100, (1 - y) * 100));
629
+ },
630
+ [hsv.h, onChange]
631
+ );
632
+ const handleHuePointer = (0, import_react7.useCallback)(
633
+ (e) => {
634
+ const rect = hueRef.current?.getBoundingClientRect();
635
+ if (!rect) return;
636
+ const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
637
+ onChange(hsvToHex(x * 360, hsv.s, hsv.v));
638
+ },
639
+ [hsv.s, hsv.v, onChange]
640
+ );
557
641
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px", userSelect: "none" }, children: [
558
642
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
559
643
  "div",
@@ -579,24 +663,34 @@ function HexColorPicker({ color, onChange }) {
579
663
  isDraggingGradient.current = false;
580
664
  },
581
665
  children: [
582
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
583
- position: "absolute",
584
- inset: 0,
585
- borderRadius: "6px",
586
- background: "linear-gradient(to top, #000, transparent)"
587
- } }),
588
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
589
- position: "absolute",
590
- left: `${hsv.s}%`,
591
- top: `${100 - hsv.v}%`,
592
- transform: "translate(-50%, -50%)",
593
- width: "12px",
594
- height: "12px",
595
- borderRadius: "50%",
596
- border: "2px solid white",
597
- boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
598
- pointerEvents: "none"
599
- } })
666
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
667
+ "div",
668
+ {
669
+ style: {
670
+ position: "absolute",
671
+ inset: 0,
672
+ borderRadius: "6px",
673
+ background: "linear-gradient(to top, #000, transparent)"
674
+ }
675
+ }
676
+ ),
677
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
678
+ "div",
679
+ {
680
+ style: {
681
+ position: "absolute",
682
+ left: `${hsv.s}%`,
683
+ top: `${100 - hsv.v}%`,
684
+ transform: "translate(-50%, -50%)",
685
+ width: "12px",
686
+ height: "12px",
687
+ borderRadius: "50%",
688
+ border: "2px solid white",
689
+ boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
690
+ pointerEvents: "none"
691
+ }
692
+ }
693
+ )
600
694
  ]
601
695
  }
602
696
  ),
@@ -623,52 +717,88 @@ function HexColorPicker({ color, onChange }) {
623
717
  onPointerUp: () => {
624
718
  isDraggingHue.current = false;
625
719
  },
626
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
627
- position: "absolute",
628
- left: `${hsv.h / 360 * 100}%`,
629
- top: "50%",
630
- transform: "translate(-50%, -50%)",
631
- width: "16px",
632
- height: "16px",
633
- borderRadius: "50%",
634
- border: "2px solid white",
635
- boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
636
- background: `hsl(${hsv.h}, 100%, 50%)`,
637
- pointerEvents: "none"
638
- } })
720
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
721
+ "div",
722
+ {
723
+ style: {
724
+ position: "absolute",
725
+ left: `${hsv.h / 360 * 100}%`,
726
+ top: "50%",
727
+ transform: "translate(-50%, -50%)",
728
+ width: "16px",
729
+ height: "16px",
730
+ borderRadius: "50%",
731
+ border: "2px solid white",
732
+ boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
733
+ background: `hsl(${hsv.h}, 100%, 50%)`,
734
+ pointerEvents: "none"
735
+ }
736
+ }
737
+ )
639
738
  }
640
739
  )
641
740
  ] });
642
741
  }
643
742
  function SectionHeading({ children }) {
644
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
645
- fontSize: "10px",
646
- fontWeight: 700,
647
- letterSpacing: "0.08em",
648
- textTransform: "uppercase",
649
- color: "hsl(var(--muted-foreground))",
650
- marginBottom: "10px"
651
- }, children });
743
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
744
+ "div",
745
+ {
746
+ style: {
747
+ fontSize: "10px",
748
+ fontWeight: 700,
749
+ letterSpacing: "0.08em",
750
+ textTransform: "uppercase",
751
+ color: "hsl(var(--muted-foreground))",
752
+ marginBottom: "10px"
753
+ },
754
+ children
755
+ }
756
+ );
652
757
  }
653
- function ColorRow({ label, badge, color, disabled, onColorChange, onInputChange, actionButton }) {
758
+ function ColorRow({
759
+ label,
760
+ badge,
761
+ color,
762
+ disabled,
763
+ onColorChange,
764
+ onInputChange,
765
+ actionButton
766
+ }) {
654
767
  const [pickerOpen, setPickerOpen] = (0, import_react7.useState)(false);
655
768
  const hex = color.replace("#", "").toUpperCase();
656
769
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: "10px" }, children: [
657
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
658
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
659
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "hsl(var(--foreground))" }, children: label }),
660
- badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
661
- fontSize: "9px",
662
- fontWeight: 600,
663
- letterSpacing: "0.05em",
664
- padding: "1px 5px",
665
- borderRadius: "99px",
666
- background: "hsl(var(--muted))",
667
- color: "hsl(var(--muted-foreground))"
668
- }, children: badge })
669
- ] }),
670
- actionButton
671
- ] }),
770
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
771
+ "div",
772
+ {
773
+ style: {
774
+ display: "flex",
775
+ alignItems: "center",
776
+ justifyContent: "space-between",
777
+ marginBottom: "6px"
778
+ },
779
+ children: [
780
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
781
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", fontWeight: 500, color: "hsl(var(--foreground))" }, children: label }),
782
+ badge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
783
+ "span",
784
+ {
785
+ style: {
786
+ fontSize: "9px",
787
+ fontWeight: 600,
788
+ letterSpacing: "0.05em",
789
+ padding: "1px 5px",
790
+ borderRadius: "99px",
791
+ background: "hsl(var(--muted))",
792
+ color: "hsl(var(--muted-foreground))"
793
+ },
794
+ children: badge
795
+ }
796
+ )
797
+ ] }),
798
+ actionButton
799
+ ]
800
+ }
801
+ ),
672
802
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
673
803
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
674
804
  "button",
@@ -687,52 +817,75 @@ function ColorRow({ label, badge, color, disabled, onColorChange, onInputChange,
687
817
  }
688
818
  }
689
819
  ),
690
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
691
- display: "flex",
692
- alignItems: "center",
693
- border: "1px solid hsl(var(--border))",
694
- borderRadius: "6px",
695
- overflow: "hidden",
696
- background: disabled ? "hsl(var(--muted))" : "hsl(var(--background))",
697
- flex: 1,
698
- opacity: disabled ? 0.5 : 1
699
- }, children: [
700
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { padding: "0 8px", fontSize: "12px", color: "hsl(var(--muted-foreground))", fontFamily: "monospace" }, children: "#" }),
701
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
702
- "input",
703
- {
704
- type: "text",
705
- value: hex,
706
- disabled,
707
- maxLength: 6,
708
- onChange: (e) => {
709
- const v = e.target.value.replace(/[^0-9a-fA-F]/g, "");
710
- onInputChange(v);
711
- },
712
- style: {
713
- background: "transparent",
714
- border: "none",
715
- outline: "none",
716
- fontSize: "12px",
717
- fontFamily: "monospace",
718
- fontWeight: 500,
719
- color: "hsl(var(--foreground))",
720
- width: "100%",
721
- padding: "7px 8px 7px 0",
722
- cursor: disabled ? "not-allowed" : "text"
723
- }
724
- }
725
- )
726
- ] })
820
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
821
+ "div",
822
+ {
823
+ style: {
824
+ display: "flex",
825
+ alignItems: "center",
826
+ border: "1px solid hsl(var(--border))",
827
+ borderRadius: "6px",
828
+ overflow: "hidden",
829
+ background: disabled ? "hsl(var(--muted))" : "hsl(var(--background))",
830
+ flex: 1,
831
+ opacity: disabled ? 0.5 : 1
832
+ },
833
+ children: [
834
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
835
+ "span",
836
+ {
837
+ style: {
838
+ padding: "0 8px",
839
+ fontSize: "12px",
840
+ color: "hsl(var(--muted-foreground))",
841
+ fontFamily: "monospace"
842
+ },
843
+ children: "#"
844
+ }
845
+ ),
846
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
847
+ "input",
848
+ {
849
+ type: "text",
850
+ value: hex,
851
+ disabled,
852
+ maxLength: 6,
853
+ onChange: (e) => {
854
+ const v = e.target.value.replace(/[^0-9a-fA-F]/g, "");
855
+ onInputChange(v);
856
+ },
857
+ style: {
858
+ background: "transparent",
859
+ border: "none",
860
+ outline: "none",
861
+ fontSize: "12px",
862
+ fontFamily: "monospace",
863
+ fontWeight: 500,
864
+ color: "hsl(var(--foreground))",
865
+ width: "100%",
866
+ padding: "7px 8px 7px 0",
867
+ cursor: disabled ? "not-allowed" : "text"
868
+ }
869
+ }
870
+ )
871
+ ]
872
+ }
873
+ )
727
874
  ] }),
728
- pickerOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
729
- marginTop: "8px",
730
- padding: "10px",
731
- background: "hsl(var(--card))",
732
- border: "1px solid hsl(var(--border))",
733
- borderRadius: "8px",
734
- boxShadow: "0 4px 20px rgba(0,0,0,0.15)"
735
- }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HexColorPicker, { color, onChange: onColorChange }) })
875
+ pickerOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
876
+ "div",
877
+ {
878
+ style: {
879
+ marginTop: "8px",
880
+ padding: "10px",
881
+ background: "hsl(var(--card))",
882
+ border: "1px solid hsl(var(--border))",
883
+ borderRadius: "8px",
884
+ boxShadow: "0 4px 20px rgba(0,0,0,0.15)"
885
+ },
886
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HexColorPicker, { color, onChange: onColorChange })
887
+ }
888
+ )
736
889
  ] });
737
890
  }
738
891
  function SliderRow({ label, value, onChange, min, max, step, display }) {
@@ -760,56 +913,73 @@ function SliderRow({ label, value, onChange, min, max, step, display }) {
760
913
  }
761
914
  }
762
915
  ),
763
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
764
- fontSize: "11px",
765
- fontFamily: "monospace",
766
- fontWeight: 500,
767
- color: "hsl(var(--muted-foreground))",
768
- minWidth: "48px",
769
- textAlign: "right"
770
- }, children: display(value[0]) })
771
- ] });
772
- }
773
- function ToggleRow({ label, checked, onChange }) {
774
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
775
- display: "flex",
776
- alignItems: "center",
777
- justifyContent: "space-between",
778
- marginBottom: "8px"
779
- }, children: [
780
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: "hsl(var(--foreground))" }, children: label }),
781
916
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
782
- "button",
917
+ "span",
783
918
  {
784
- role: "switch",
785
- "aria-checked": checked,
786
- onClick: () => onChange(!checked),
787
919
  style: {
788
- width: "36px",
789
- height: "20px",
790
- borderRadius: "10px",
791
- background: checked ? "hsl(var(--primary))" : "hsl(var(--muted))",
792
- border: "none",
793
- cursor: "pointer",
794
- position: "relative",
795
- transition: "background 0.2s",
796
- flexShrink: 0
920
+ fontSize: "11px",
921
+ fontFamily: "monospace",
922
+ fontWeight: 500,
923
+ color: "hsl(var(--muted-foreground))",
924
+ minWidth: "48px",
925
+ textAlign: "right"
797
926
  },
798
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
799
- position: "absolute",
800
- top: "2px",
801
- left: checked ? "18px" : "2px",
802
- width: "16px",
803
- height: "16px",
804
- borderRadius: "50%",
805
- background: "white",
806
- transition: "left 0.2s",
807
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
808
- } })
927
+ children: display(value[0])
809
928
  }
810
929
  )
811
930
  ] });
812
931
  }
932
+ function ToggleRow({ label, checked, onChange }) {
933
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
934
+ "div",
935
+ {
936
+ style: {
937
+ display: "flex",
938
+ alignItems: "center",
939
+ justifyContent: "space-between",
940
+ marginBottom: "8px"
941
+ },
942
+ children: [
943
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "12px", color: "hsl(var(--foreground))" }, children: label }),
944
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
945
+ "button",
946
+ {
947
+ role: "switch",
948
+ "aria-checked": checked,
949
+ onClick: () => onChange(!checked),
950
+ style: {
951
+ width: "36px",
952
+ height: "20px",
953
+ borderRadius: "10px",
954
+ background: checked ? "hsl(var(--primary))" : "hsl(var(--muted))",
955
+ border: "none",
956
+ cursor: "pointer",
957
+ position: "relative",
958
+ transition: "background 0.2s",
959
+ flexShrink: 0
960
+ },
961
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
962
+ "span",
963
+ {
964
+ style: {
965
+ position: "absolute",
966
+ top: "2px",
967
+ left: checked ? "18px" : "2px",
968
+ width: "16px",
969
+ height: "16px",
970
+ borderRadius: "50%",
971
+ background: "white",
972
+ transition: "left 0.2s",
973
+ boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
974
+ }
975
+ }
976
+ )
977
+ }
978
+ )
979
+ ]
980
+ }
981
+ );
982
+ }
813
983
  function cn(...classes) {
814
984
  return classes.filter(Boolean).join(" ");
815
985
  }
@@ -847,10 +1017,13 @@ function ThemeGenerator({
847
1017
  };
848
1018
  const [internalOpen, setInternalOpen] = (0, import_react7.useState)(controlledOpen ?? false);
849
1019
  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
850
- const setIsOpen = (0, import_react7.useCallback)((next) => {
851
- if (controlledOpen === void 0) setInternalOpen(next);
852
- onOpenChange?.(next);
853
- }, [controlledOpen, onOpenChange]);
1020
+ const setIsOpen = (0, import_react7.useCallback)(
1021
+ (next) => {
1022
+ if (controlledOpen === void 0) setInternalOpen(next);
1023
+ onOpenChange?.(next);
1024
+ },
1025
+ [controlledOpen, onOpenChange]
1026
+ );
854
1027
  const [localPrimary, setLocalPrimary] = (0, import_react7.useState)(defaultTheme);
855
1028
  const [localSecondary, setLocalSecondary] = (0, import_react7.useState)(defaultSecondaryColor);
856
1029
  const [isSecondaryEnabled, setIsSecondaryEnabled] = (0, import_react7.useState)(false);
@@ -1011,192 +1184,221 @@ function ThemeGenerator({
1011
1184
  overflow: "hidden"
1012
1185
  },
1013
1186
  children: [
1014
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
1015
- display: "flex",
1016
- alignItems: "center",
1017
- justifyContent: "space-between",
1018
- padding: "14px 16px",
1019
- borderBottom: "1px solid hsl(var(--border))",
1020
- background: "hsl(var(--muted) / 0.3)"
1021
- }, children: [
1022
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1023
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SparklesIcon, { className: "dheme-sparkles" }),
1024
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
1025
- ] }),
1026
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1027
- "button",
1028
- {
1029
- onClick: () => setIsOpen(false),
1030
- style: {
1031
- background: "none",
1032
- border: "none",
1033
- cursor: "pointer",
1034
- padding: "2px",
1035
- color: "hsl(var(--muted-foreground))",
1036
- display: "flex",
1037
- alignItems: "center",
1038
- justifyContent: "center",
1039
- borderRadius: "4px"
1040
- },
1041
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, {})
1042
- }
1043
- )
1044
- ] }),
1045
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
1046
- maxHeight: "calc(100vh - 200px)",
1047
- overflowY: "auto",
1048
- background: "hsl(var(--background))"
1049
- }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1050
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: "11px", color: "hsl(var(--muted-foreground))", margin: 0, lineHeight: 1.5 }, children: labels.description }),
1051
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1052
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.baseColors }),
1053
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1054
- ColorRow,
1055
- {
1056
- label: labels.primary,
1057
- color: localPrimary,
1058
- onColorChange: setLocalPrimary,
1059
- onInputChange: (v) => {
1060
- if (v.length === 6) setLocalPrimary(`#${v}`);
1187
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1188
+ "div",
1189
+ {
1190
+ style: {
1191
+ display: "flex",
1192
+ alignItems: "center",
1193
+ justifyContent: "space-between",
1194
+ padding: "14px 16px",
1195
+ borderBottom: "1px solid hsl(var(--border))",
1196
+ background: "hsl(var(--muted) / 0.3)"
1197
+ },
1198
+ children: [
1199
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1200
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SparklesIcon, { className: "dheme-sparkles" }),
1201
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
1202
+ ] }),
1203
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1204
+ "button",
1205
+ {
1206
+ onClick: () => setIsOpen(false),
1207
+ style: {
1208
+ background: "none",
1209
+ border: "none",
1210
+ cursor: "pointer",
1211
+ padding: "2px",
1212
+ color: "hsl(var(--muted-foreground))",
1213
+ display: "flex",
1214
+ alignItems: "center",
1215
+ justifyContent: "center",
1216
+ borderRadius: "4px"
1217
+ },
1218
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, {})
1061
1219
  }
1062
- }
1063
- ),
1064
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1065
- ColorRow,
1066
- {
1067
- label: labels.secondary,
1068
- badge: labels.optional,
1069
- color: localSecondary,
1070
- disabled: !isSecondaryEnabled,
1071
- onColorChange: (c) => {
1072
- if (isSecondaryEnabled) setLocalSecondary(c);
1073
- },
1074
- onInputChange: (v) => {
1075
- if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1076
- },
1077
- actionButton: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1078
- "button",
1220
+ )
1221
+ ]
1222
+ }
1223
+ ),
1224
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1225
+ "div",
1226
+ {
1227
+ style: {
1228
+ maxHeight: "calc(100vh - 200px)",
1229
+ overflowY: "auto",
1230
+ background: "hsl(var(--background))"
1231
+ },
1232
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1233
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1234
+ "p",
1235
+ {
1236
+ style: {
1237
+ fontSize: "11px",
1238
+ color: "hsl(var(--muted-foreground))",
1239
+ margin: 0,
1240
+ lineHeight: 1.5
1241
+ },
1242
+ children: labels.description
1243
+ }
1244
+ ),
1245
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1246
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.baseColors }),
1247
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1248
+ ColorRow,
1249
+ {
1250
+ label: labels.primary,
1251
+ color: localPrimary,
1252
+ onColorChange: setLocalPrimary,
1253
+ onInputChange: (v) => {
1254
+ if (v.length === 6) setLocalPrimary(`#${v}`);
1255
+ }
1256
+ }
1257
+ ),
1258
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1259
+ ColorRow,
1079
1260
  {
1080
- onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1081
- style: {
1082
- background: "none",
1083
- border: "none",
1084
- cursor: "pointer",
1085
- padding: "2px",
1086
- color: "hsl(var(--muted-foreground))",
1087
- display: "flex",
1088
- alignItems: "center",
1089
- justifyContent: "center",
1090
- borderRadius: "4px"
1261
+ label: labels.secondary,
1262
+ badge: labels.optional,
1263
+ color: localSecondary,
1264
+ disabled: !isSecondaryEnabled,
1265
+ onColorChange: (c) => {
1266
+ if (isSecondaryEnabled) setLocalSecondary(c);
1091
1267
  },
1092
- children: isSecondaryEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlusIcon, {})
1268
+ onInputChange: (v) => {
1269
+ if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1270
+ },
1271
+ actionButton: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1272
+ "button",
1273
+ {
1274
+ onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1275
+ style: {
1276
+ background: "none",
1277
+ border: "none",
1278
+ cursor: "pointer",
1279
+ padding: "2px",
1280
+ color: "hsl(var(--muted-foreground))",
1281
+ display: "flex",
1282
+ alignItems: "center",
1283
+ justifyContent: "center",
1284
+ borderRadius: "4px"
1285
+ },
1286
+ children: isSecondaryEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlusIcon, {})
1287
+ }
1288
+ )
1093
1289
  }
1094
1290
  )
1095
- }
1096
- )
1097
- ] }),
1098
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1099
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.fineTuning }),
1100
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1101
- SliderRow,
1102
- {
1103
- label: labels.saturation,
1104
- value: localSaturation,
1105
- onChange: setLocalSaturation,
1106
- min: -100,
1107
- max: 100,
1108
- step: 1,
1109
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1110
- }
1111
- ),
1112
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1113
- SliderRow,
1114
- {
1115
- label: labels.lightness,
1116
- value: localLightness,
1117
- onChange: setLocalLightness,
1118
- min: -100,
1119
- max: 100,
1120
- step: 1,
1121
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1122
- }
1123
- ),
1124
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1125
- SliderRow,
1126
- {
1127
- label: labels.borderRadius,
1128
- value: localRadius,
1129
- onChange: setLocalRadius,
1130
- min: 0,
1131
- max: 2,
1132
- step: 0.1,
1133
- display: (v) => `${v.toFixed(1)}rem`
1134
- }
1135
- )
1136
- ] }),
1137
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1138
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.advancedOptions }),
1139
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1140
- ToggleRow,
1141
- {
1142
- label: labels.colorfulCard,
1143
- checked: localCardIsColored,
1144
- onChange: (v) => handleToggle("cardIsColored", v)
1145
- }
1146
- ),
1147
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1148
- ToggleRow,
1149
- {
1150
- label: labels.colorfulBackground,
1151
- checked: localBackgroundIsColored,
1152
- onChange: (v) => handleToggle("backgroundIsColored", v)
1153
- }
1154
- ),
1155
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1156
- ToggleRow,
1157
- {
1158
- label: labels.colorfulBorder,
1159
- checked: localBorderIsColored,
1160
- onChange: (v) => handleToggle("borderIsColored", v)
1161
- }
1162
- )
1163
- ] })
1164
- ] }) }),
1165
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
1166
- padding: "10px 12px",
1167
- borderTop: "1px solid hsl(var(--border))",
1168
- background: "hsl(var(--muted) / 0.2)"
1169
- }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1170
- "button",
1291
+ ] }),
1292
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1293
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.fineTuning }),
1294
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1295
+ SliderRow,
1296
+ {
1297
+ label: labels.saturation,
1298
+ value: localSaturation,
1299
+ onChange: setLocalSaturation,
1300
+ min: -100,
1301
+ max: 100,
1302
+ step: 1,
1303
+ display: (v) => `${v > 0 ? "+" : ""}${v}%`
1304
+ }
1305
+ ),
1306
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1307
+ SliderRow,
1308
+ {
1309
+ label: labels.lightness,
1310
+ value: localLightness,
1311
+ onChange: setLocalLightness,
1312
+ min: -100,
1313
+ max: 100,
1314
+ step: 1,
1315
+ display: (v) => `${v > 0 ? "+" : ""}${v}%`
1316
+ }
1317
+ ),
1318
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1319
+ SliderRow,
1320
+ {
1321
+ label: labels.borderRadius,
1322
+ value: localRadius,
1323
+ onChange: setLocalRadius,
1324
+ min: 0,
1325
+ max: 2,
1326
+ step: 0.1,
1327
+ display: (v) => `${v.toFixed(1)}rem`
1328
+ }
1329
+ )
1330
+ ] }),
1331
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1332
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.advancedOptions }),
1333
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1334
+ ToggleRow,
1335
+ {
1336
+ label: labels.colorfulCard,
1337
+ checked: localCardIsColored,
1338
+ onChange: (v) => handleToggle("cardIsColored", v)
1339
+ }
1340
+ ),
1341
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1342
+ ToggleRow,
1343
+ {
1344
+ label: labels.colorfulBackground,
1345
+ checked: localBackgroundIsColored,
1346
+ onChange: (v) => handleToggle("backgroundIsColored", v)
1347
+ }
1348
+ ),
1349
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1350
+ ToggleRow,
1351
+ {
1352
+ label: labels.colorfulBorder,
1353
+ checked: localBorderIsColored,
1354
+ onChange: (v) => handleToggle("borderIsColored", v)
1355
+ }
1356
+ )
1357
+ ] })
1358
+ ] })
1359
+ }
1360
+ ),
1361
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1362
+ "div",
1171
1363
  {
1172
- onClick: handleReset,
1173
1364
  style: {
1174
- width: "100%",
1175
- height: "32px",
1176
- background: "none",
1177
- border: "1px solid hsl(var(--border))",
1178
- borderRadius: "6px",
1179
- cursor: "pointer",
1180
- display: "flex",
1181
- alignItems: "center",
1182
- justifyContent: "center",
1183
- gap: "6px",
1184
- fontSize: "12px",
1185
- color: "hsl(var(--muted-foreground))",
1186
- transition: "background 0.15s"
1365
+ padding: "10px 12px",
1366
+ borderTop: "1px solid hsl(var(--border))",
1367
+ background: "hsl(var(--muted) / 0.2)"
1187
1368
  },
1188
- onMouseEnter: (e) => {
1189
- e.currentTarget.style.background = "hsl(var(--muted))";
1190
- },
1191
- onMouseLeave: (e) => {
1192
- e.currentTarget.style.background = "none";
1193
- },
1194
- children: [
1195
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcwIcon, {}),
1196
- labels.reset
1197
- ]
1369
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1370
+ "button",
1371
+ {
1372
+ onClick: handleReset,
1373
+ style: {
1374
+ width: "100%",
1375
+ height: "32px",
1376
+ background: "none",
1377
+ border: "1px solid hsl(var(--border))",
1378
+ borderRadius: "6px",
1379
+ cursor: "pointer",
1380
+ display: "flex",
1381
+ alignItems: "center",
1382
+ justifyContent: "center",
1383
+ gap: "6px",
1384
+ fontSize: "12px",
1385
+ color: "hsl(var(--muted-foreground))",
1386
+ transition: "background 0.15s"
1387
+ },
1388
+ onMouseEnter: (e) => {
1389
+ e.currentTarget.style.background = "hsl(var(--muted))";
1390
+ },
1391
+ onMouseLeave: (e) => {
1392
+ e.currentTarget.style.background = "none";
1393
+ },
1394
+ children: [
1395
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcwIcon, {}),
1396
+ labels.reset
1397
+ ]
1398
+ }
1399
+ )
1198
1400
  }
1199
- ) })
1401
+ )
1200
1402
  ]
1201
1403
  }
1202
1404
  ),
@@ -1219,63 +1421,104 @@ function ThemeGenerator({
1219
1421
  pointerEvents: isOpen ? "none" : "auto",
1220
1422
  transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)"
1221
1423
  },
1222
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
1223
- position: "absolute",
1224
- inset: 0,
1225
- display: "flex",
1226
- alignItems: "center",
1227
- justifyContent: "space-between",
1228
- padding: "0 8px 0 12px"
1229
- }, children: [
1230
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
1231
- width: "32px",
1232
- height: "32px",
1233
- borderRadius: "50%",
1234
- background: localPrimary,
1235
- border: "1px solid hsl(var(--border))",
1236
- boxShadow: "0 0 0 2px hsl(var(--background))",
1237
- flexShrink: 0
1238
- } }),
1239
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "2px", flex: 1, padding: "0 8px" }, children: [
1240
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
1241
- fontSize: "10px",
1242
- fontWeight: 700,
1243
- letterSpacing: "0.08em",
1244
- textTransform: "uppercase",
1245
- color: "hsl(var(--foreground))"
1246
- }, children: labels.fabPrimaryLabel }),
1247
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
1424
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1425
+ "div",
1426
+ {
1427
+ style: {
1428
+ position: "absolute",
1429
+ inset: 0,
1248
1430
  display: "flex",
1249
- gap: "8px",
1250
- fontSize: "10px",
1251
- fontFamily: "monospace",
1252
- color: "hsl(var(--muted-foreground))"
1253
- }, children: [
1254
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1255
- "S:",
1256
- localSaturation[0] > 0 ? "+" : "",
1257
- localSaturation[0],
1258
- "%"
1259
- ] }),
1260
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1261
- "L:",
1262
- localLightness[0] > 0 ? "+" : "",
1263
- localLightness[0],
1264
- "%"
1265
- ] })
1266
- ] })
1267
- ] }),
1268
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
1269
- width: "32px",
1270
- height: "32px",
1271
- display: "flex",
1272
- alignItems: "center",
1273
- justifyContent: "center",
1274
- borderRadius: "50%",
1275
- background: "hsl(var(--muted) / 0.5)",
1276
- flexShrink: 0
1277
- }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUpIcon, {}) })
1278
- ] })
1431
+ alignItems: "center",
1432
+ justifyContent: "space-between",
1433
+ padding: "0 8px 0 12px"
1434
+ },
1435
+ children: [
1436
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1437
+ "div",
1438
+ {
1439
+ style: {
1440
+ width: "32px",
1441
+ height: "32px",
1442
+ borderRadius: "50%",
1443
+ background: localPrimary,
1444
+ border: "1px solid hsl(var(--border))",
1445
+ boxShadow: "0 0 0 2px hsl(var(--background))",
1446
+ flexShrink: 0
1447
+ }
1448
+ }
1449
+ ),
1450
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1451
+ "div",
1452
+ {
1453
+ style: {
1454
+ display: "flex",
1455
+ flexDirection: "column",
1456
+ gap: "2px",
1457
+ flex: 1,
1458
+ padding: "0 8px"
1459
+ },
1460
+ children: [
1461
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1462
+ "span",
1463
+ {
1464
+ style: {
1465
+ fontSize: "10px",
1466
+ fontWeight: 700,
1467
+ letterSpacing: "0.08em",
1468
+ textTransform: "uppercase",
1469
+ color: "hsl(var(--foreground))"
1470
+ },
1471
+ children: labels.fabPrimaryLabel
1472
+ }
1473
+ ),
1474
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1475
+ "div",
1476
+ {
1477
+ style: {
1478
+ display: "flex",
1479
+ gap: "8px",
1480
+ fontSize: "10px",
1481
+ fontFamily: "monospace",
1482
+ color: "hsl(var(--muted-foreground))"
1483
+ },
1484
+ children: [
1485
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1486
+ "S:",
1487
+ localSaturation[0] > 0 ? "+" : "",
1488
+ localSaturation[0],
1489
+ "%"
1490
+ ] }),
1491
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1492
+ "L:",
1493
+ localLightness[0] > 0 ? "+" : "",
1494
+ localLightness[0],
1495
+ "%"
1496
+ ] })
1497
+ ]
1498
+ }
1499
+ )
1500
+ ]
1501
+ }
1502
+ ),
1503
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1504
+ "div",
1505
+ {
1506
+ style: {
1507
+ width: "32px",
1508
+ height: "32px",
1509
+ display: "flex",
1510
+ alignItems: "center",
1511
+ justifyContent: "center",
1512
+ borderRadius: "50%",
1513
+ background: "hsl(var(--muted) / 0.5)",
1514
+ flexShrink: 0
1515
+ },
1516
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUpIcon, {})
1517
+ }
1518
+ )
1519
+ ]
1520
+ }
1521
+ )
1279
1522
  }
1280
1523
  )
1281
1524
  ]