@dheme/react 2.2.0 → 2.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 (8) hide show
  1. package/README.md +133 -0
  2. package/dist/index.js +659 -416
  3. package/dist/index.mjs +657 -413
  4. package/dist/utils.d.mts +15 -0
  5. package/dist/utils.d.ts +15 -0
  6. package/dist/utils.js +156 -0
  7. package/dist/utils.mjs +123 -0
  8. package/package.json +8 -3
package/dist/index.mjs CHANGED
@@ -1,3 +1,5 @@
1
+ 'use client';
2
+
1
3
  // src/components/DhemeProvider.tsx
2
4
  import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
3
5
  import { DhemeClient } from "@dheme/sdk";
@@ -383,34 +385,109 @@ function useDebounce(value, delay) {
383
385
  // src/components/ThemeGenerator.tsx
384
386
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
385
387
  function SparklesIcon({ className }) {
386
- return /* @__PURE__ */ 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: [
387
- /* @__PURE__ */ 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" }),
388
- /* @__PURE__ */ jsx("path", { d: "M5 3v4" }),
389
- /* @__PURE__ */ jsx("path", { d: "M19 17v4" }),
390
- /* @__PURE__ */ jsx("path", { d: "M3 5h4" }),
391
- /* @__PURE__ */ jsx("path", { d: "M17 19h4" })
392
- ] });
388
+ return /* @__PURE__ */ jsxs(
389
+ "svg",
390
+ {
391
+ className,
392
+ xmlns: "http://www.w3.org/2000/svg",
393
+ width: "16",
394
+ height: "16",
395
+ viewBox: "0 0 24 24",
396
+ fill: "none",
397
+ stroke: "currentColor",
398
+ strokeWidth: "2",
399
+ strokeLinecap: "round",
400
+ strokeLinejoin: "round",
401
+ children: [
402
+ /* @__PURE__ */ 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" }),
403
+ /* @__PURE__ */ jsx("path", { d: "M5 3v4" }),
404
+ /* @__PURE__ */ jsx("path", { d: "M19 17v4" }),
405
+ /* @__PURE__ */ jsx("path", { d: "M3 5h4" }),
406
+ /* @__PURE__ */ jsx("path", { d: "M17 19h4" })
407
+ ]
408
+ }
409
+ );
393
410
  }
394
411
  function XIcon({ className }) {
395
- return /* @__PURE__ */ 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: [
396
- /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
397
- /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
398
- ] });
412
+ return /* @__PURE__ */ jsxs(
413
+ "svg",
414
+ {
415
+ className,
416
+ xmlns: "http://www.w3.org/2000/svg",
417
+ width: "16",
418
+ height: "16",
419
+ viewBox: "0 0 24 24",
420
+ fill: "none",
421
+ stroke: "currentColor",
422
+ strokeWidth: "2",
423
+ strokeLinecap: "round",
424
+ strokeLinejoin: "round",
425
+ children: [
426
+ /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
427
+ /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
428
+ ]
429
+ }
430
+ );
399
431
  }
400
432
  function PlusIcon({ className }) {
401
- return /* @__PURE__ */ 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: [
402
- /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
403
- /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
404
- ] });
433
+ return /* @__PURE__ */ jsxs(
434
+ "svg",
435
+ {
436
+ className,
437
+ xmlns: "http://www.w3.org/2000/svg",
438
+ width: "16",
439
+ height: "16",
440
+ viewBox: "0 0 24 24",
441
+ fill: "none",
442
+ stroke: "currentColor",
443
+ strokeWidth: "2",
444
+ strokeLinecap: "round",
445
+ strokeLinejoin: "round",
446
+ children: [
447
+ /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
448
+ /* @__PURE__ */ jsx("path", { d: "M12 5v14" })
449
+ ]
450
+ }
451
+ );
405
452
  }
406
453
  function ChevronUpIcon({ className }) {
407
- return /* @__PURE__ */ 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__ */ jsx("path", { d: "m18 15-6-6-6 6" }) });
454
+ return /* @__PURE__ */ jsx(
455
+ "svg",
456
+ {
457
+ className,
458
+ xmlns: "http://www.w3.org/2000/svg",
459
+ width: "16",
460
+ height: "16",
461
+ viewBox: "0 0 24 24",
462
+ fill: "none",
463
+ stroke: "currentColor",
464
+ strokeWidth: "2",
465
+ strokeLinecap: "round",
466
+ strokeLinejoin: "round",
467
+ children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
468
+ }
469
+ );
408
470
  }
409
471
  function RotateCcwIcon({ className }) {
410
- return /* @__PURE__ */ 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: [
411
- /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
412
- /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
413
- ] });
472
+ return /* @__PURE__ */ jsxs(
473
+ "svg",
474
+ {
475
+ className,
476
+ xmlns: "http://www.w3.org/2000/svg",
477
+ width: "16",
478
+ height: "16",
479
+ viewBox: "0 0 24 24",
480
+ fill: "none",
481
+ stroke: "currentColor",
482
+ strokeWidth: "2",
483
+ strokeLinecap: "round",
484
+ strokeLinejoin: "round",
485
+ children: [
486
+ /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
487
+ /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
488
+ ]
489
+ }
490
+ );
414
491
  }
415
492
  function HexColorPicker({ color, onChange }) {
416
493
  const hexToRgb = (hex) => {
@@ -482,7 +559,9 @@ function HexColorPicker({ color, onChange }) {
482
559
  b = q;
483
560
  break;
484
561
  }
485
- return "#" + [r, g, b].map((x) => Math.round(x * 255).toString(16).padStart(2, "0")).join("");
562
+ return "#" + [r, g, b].map(
563
+ (x) => Math.round(x * 255).toString(16).padStart(2, "0")
564
+ ).join("");
486
565
  };
487
566
  const rgb = hexToRgb(color);
488
567
  const hsv = rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -490,19 +569,25 @@ function HexColorPicker({ color, onChange }) {
490
569
  const hueRef = useRef2(null);
491
570
  const isDraggingGradient = useRef2(false);
492
571
  const isDraggingHue = useRef2(false);
493
- const handleGradientPointer = useCallback2((e) => {
494
- const rect = gradientRef.current?.getBoundingClientRect();
495
- if (!rect) return;
496
- const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
497
- const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
498
- onChange(hsvToHex(hsv.h, x * 100, (1 - y) * 100));
499
- }, [hsv.h, onChange]);
500
- const handleHuePointer = useCallback2((e) => {
501
- const rect = hueRef.current?.getBoundingClientRect();
502
- if (!rect) return;
503
- const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
504
- onChange(hsvToHex(x * 360, hsv.s, hsv.v));
505
- }, [hsv.s, hsv.v, onChange]);
572
+ const handleGradientPointer = useCallback2(
573
+ (e) => {
574
+ const rect = gradientRef.current?.getBoundingClientRect();
575
+ if (!rect) return;
576
+ const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
577
+ const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
578
+ onChange(hsvToHex(hsv.h, x * 100, (1 - y) * 100));
579
+ },
580
+ [hsv.h, onChange]
581
+ );
582
+ const handleHuePointer = useCallback2(
583
+ (e) => {
584
+ const rect = hueRef.current?.getBoundingClientRect();
585
+ if (!rect) return;
586
+ const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
587
+ onChange(hsvToHex(x * 360, hsv.s, hsv.v));
588
+ },
589
+ [hsv.s, hsv.v, onChange]
590
+ );
506
591
  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px", userSelect: "none" }, children: [
507
592
  /* @__PURE__ */ jsxs(
508
593
  "div",
@@ -528,24 +613,34 @@ function HexColorPicker({ color, onChange }) {
528
613
  isDraggingGradient.current = false;
529
614
  },
530
615
  children: [
531
- /* @__PURE__ */ jsx("div", { style: {
532
- position: "absolute",
533
- inset: 0,
534
- borderRadius: "6px",
535
- background: "linear-gradient(to top, #000, transparent)"
536
- } }),
537
- /* @__PURE__ */ jsx("div", { style: {
538
- position: "absolute",
539
- left: `${hsv.s}%`,
540
- top: `${100 - hsv.v}%`,
541
- transform: "translate(-50%, -50%)",
542
- width: "12px",
543
- height: "12px",
544
- borderRadius: "50%",
545
- border: "2px solid white",
546
- boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
547
- pointerEvents: "none"
548
- } })
616
+ /* @__PURE__ */ jsx(
617
+ "div",
618
+ {
619
+ style: {
620
+ position: "absolute",
621
+ inset: 0,
622
+ borderRadius: "6px",
623
+ background: "linear-gradient(to top, #000, transparent)"
624
+ }
625
+ }
626
+ ),
627
+ /* @__PURE__ */ jsx(
628
+ "div",
629
+ {
630
+ style: {
631
+ position: "absolute",
632
+ left: `${hsv.s}%`,
633
+ top: `${100 - hsv.v}%`,
634
+ transform: "translate(-50%, -50%)",
635
+ width: "12px",
636
+ height: "12px",
637
+ borderRadius: "50%",
638
+ border: "2px solid white",
639
+ boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
640
+ pointerEvents: "none"
641
+ }
642
+ }
643
+ )
549
644
  ]
550
645
  }
551
646
  ),
@@ -572,52 +667,88 @@ function HexColorPicker({ color, onChange }) {
572
667
  onPointerUp: () => {
573
668
  isDraggingHue.current = false;
574
669
  },
575
- children: /* @__PURE__ */ jsx("div", { style: {
576
- position: "absolute",
577
- left: `${hsv.h / 360 * 100}%`,
578
- top: "50%",
579
- transform: "translate(-50%, -50%)",
580
- width: "16px",
581
- height: "16px",
582
- borderRadius: "50%",
583
- border: "2px solid white",
584
- boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
585
- background: `hsl(${hsv.h}, 100%, 50%)`,
586
- pointerEvents: "none"
587
- } })
670
+ children: /* @__PURE__ */ jsx(
671
+ "div",
672
+ {
673
+ style: {
674
+ position: "absolute",
675
+ left: `${hsv.h / 360 * 100}%`,
676
+ top: "50%",
677
+ transform: "translate(-50%, -50%)",
678
+ width: "16px",
679
+ height: "16px",
680
+ borderRadius: "50%",
681
+ border: "2px solid white",
682
+ boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
683
+ background: `hsl(${hsv.h}, 100%, 50%)`,
684
+ pointerEvents: "none"
685
+ }
686
+ }
687
+ )
588
688
  }
589
689
  )
590
690
  ] });
591
691
  }
592
692
  function SectionHeading({ children }) {
593
- return /* @__PURE__ */ jsx("div", { style: {
594
- fontSize: "10px",
595
- fontWeight: 700,
596
- letterSpacing: "0.08em",
597
- textTransform: "uppercase",
598
- color: "hsl(var(--muted-foreground))",
599
- marginBottom: "10px"
600
- }, children });
693
+ return /* @__PURE__ */ jsx(
694
+ "div",
695
+ {
696
+ style: {
697
+ fontSize: "10px",
698
+ fontWeight: 700,
699
+ letterSpacing: "0.08em",
700
+ textTransform: "uppercase",
701
+ color: "hsl(var(--muted-foreground))",
702
+ marginBottom: "10px"
703
+ },
704
+ children
705
+ }
706
+ );
601
707
  }
602
- function ColorRow({ label, badge, color, disabled, onColorChange, onInputChange, actionButton }) {
708
+ function ColorRow({
709
+ label,
710
+ badge,
711
+ color,
712
+ disabled,
713
+ onColorChange,
714
+ onInputChange,
715
+ actionButton
716
+ }) {
603
717
  const [pickerOpen, setPickerOpen] = useState3(false);
604
718
  const hex = color.replace("#", "").toUpperCase();
605
719
  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px" }, children: [
606
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }, children: [
607
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
608
- /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", fontWeight: 500, color: "hsl(var(--foreground))" }, children: label }),
609
- badge && /* @__PURE__ */ jsx("span", { style: {
610
- fontSize: "9px",
611
- fontWeight: 600,
612
- letterSpacing: "0.05em",
613
- padding: "1px 5px",
614
- borderRadius: "99px",
615
- background: "hsl(var(--muted))",
616
- color: "hsl(var(--muted-foreground))"
617
- }, children: badge })
618
- ] }),
619
- actionButton
620
- ] }),
720
+ /* @__PURE__ */ jsxs(
721
+ "div",
722
+ {
723
+ style: {
724
+ display: "flex",
725
+ alignItems: "center",
726
+ justifyContent: "space-between",
727
+ marginBottom: "6px"
728
+ },
729
+ children: [
730
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
731
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", fontWeight: 500, color: "hsl(var(--foreground))" }, children: label }),
732
+ badge && /* @__PURE__ */ jsx(
733
+ "span",
734
+ {
735
+ style: {
736
+ fontSize: "9px",
737
+ fontWeight: 600,
738
+ letterSpacing: "0.05em",
739
+ padding: "1px 5px",
740
+ borderRadius: "99px",
741
+ background: "hsl(var(--muted))",
742
+ color: "hsl(var(--muted-foreground))"
743
+ },
744
+ children: badge
745
+ }
746
+ )
747
+ ] }),
748
+ actionButton
749
+ ]
750
+ }
751
+ ),
621
752
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
622
753
  /* @__PURE__ */ jsx(
623
754
  "button",
@@ -636,52 +767,75 @@ function ColorRow({ label, badge, color, disabled, onColorChange, onInputChange,
636
767
  }
637
768
  }
638
769
  ),
639
- /* @__PURE__ */ jsxs("div", { style: {
640
- display: "flex",
641
- alignItems: "center",
642
- border: "1px solid hsl(var(--border))",
643
- borderRadius: "6px",
644
- overflow: "hidden",
645
- background: disabled ? "hsl(var(--muted))" : "hsl(var(--background))",
646
- flex: 1,
647
- opacity: disabled ? 0.5 : 1
648
- }, children: [
649
- /* @__PURE__ */ jsx("span", { style: { padding: "0 8px", fontSize: "12px", color: "hsl(var(--muted-foreground))", fontFamily: "monospace" }, children: "#" }),
650
- /* @__PURE__ */ jsx(
651
- "input",
652
- {
653
- type: "text",
654
- value: hex,
655
- disabled,
656
- maxLength: 6,
657
- onChange: (e) => {
658
- const v = e.target.value.replace(/[^0-9a-fA-F]/g, "");
659
- onInputChange(v);
660
- },
661
- style: {
662
- background: "transparent",
663
- border: "none",
664
- outline: "none",
665
- fontSize: "12px",
666
- fontFamily: "monospace",
667
- fontWeight: 500,
668
- color: "hsl(var(--foreground))",
669
- width: "100%",
670
- padding: "7px 8px 7px 0",
671
- cursor: disabled ? "not-allowed" : "text"
672
- }
673
- }
674
- )
675
- ] })
770
+ /* @__PURE__ */ jsxs(
771
+ "div",
772
+ {
773
+ style: {
774
+ display: "flex",
775
+ alignItems: "center",
776
+ border: "1px solid hsl(var(--border))",
777
+ borderRadius: "6px",
778
+ overflow: "hidden",
779
+ background: disabled ? "hsl(var(--muted))" : "hsl(var(--background))",
780
+ flex: 1,
781
+ opacity: disabled ? 0.5 : 1
782
+ },
783
+ children: [
784
+ /* @__PURE__ */ jsx(
785
+ "span",
786
+ {
787
+ style: {
788
+ padding: "0 8px",
789
+ fontSize: "12px",
790
+ color: "hsl(var(--muted-foreground))",
791
+ fontFamily: "monospace"
792
+ },
793
+ children: "#"
794
+ }
795
+ ),
796
+ /* @__PURE__ */ jsx(
797
+ "input",
798
+ {
799
+ type: "text",
800
+ value: hex,
801
+ disabled,
802
+ maxLength: 6,
803
+ onChange: (e) => {
804
+ const v = e.target.value.replace(/[^0-9a-fA-F]/g, "");
805
+ onInputChange(v);
806
+ },
807
+ style: {
808
+ background: "transparent",
809
+ border: "none",
810
+ outline: "none",
811
+ fontSize: "12px",
812
+ fontFamily: "monospace",
813
+ fontWeight: 500,
814
+ color: "hsl(var(--foreground))",
815
+ width: "100%",
816
+ padding: "7px 8px 7px 0",
817
+ cursor: disabled ? "not-allowed" : "text"
818
+ }
819
+ }
820
+ )
821
+ ]
822
+ }
823
+ )
676
824
  ] }),
677
- pickerOpen && !disabled && /* @__PURE__ */ jsx("div", { style: {
678
- marginTop: "8px",
679
- padding: "10px",
680
- background: "hsl(var(--card))",
681
- border: "1px solid hsl(var(--border))",
682
- borderRadius: "8px",
683
- boxShadow: "0 4px 20px rgba(0,0,0,0.15)"
684
- }, children: /* @__PURE__ */ jsx(HexColorPicker, { color, onChange: onColorChange }) })
825
+ pickerOpen && !disabled && /* @__PURE__ */ jsx(
826
+ "div",
827
+ {
828
+ style: {
829
+ marginTop: "8px",
830
+ padding: "10px",
831
+ background: "hsl(var(--card))",
832
+ border: "1px solid hsl(var(--border))",
833
+ borderRadius: "8px",
834
+ boxShadow: "0 4px 20px rgba(0,0,0,0.15)"
835
+ },
836
+ children: /* @__PURE__ */ jsx(HexColorPicker, { color, onChange: onColorChange })
837
+ }
838
+ )
685
839
  ] });
686
840
  }
687
841
  function SliderRow({ label, value, onChange, min, max, step, display }) {
@@ -709,56 +863,73 @@ function SliderRow({ label, value, onChange, min, max, step, display }) {
709
863
  }
710
864
  }
711
865
  ),
712
- /* @__PURE__ */ jsx("span", { style: {
713
- fontSize: "11px",
714
- fontFamily: "monospace",
715
- fontWeight: 500,
716
- color: "hsl(var(--muted-foreground))",
717
- minWidth: "48px",
718
- textAlign: "right"
719
- }, children: display(value[0]) })
720
- ] });
721
- }
722
- function ToggleRow({ label, checked, onChange }) {
723
- return /* @__PURE__ */ jsxs("div", { style: {
724
- display: "flex",
725
- alignItems: "center",
726
- justifyContent: "space-between",
727
- marginBottom: "8px"
728
- }, children: [
729
- /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "hsl(var(--foreground))" }, children: label }),
730
866
  /* @__PURE__ */ jsx(
731
- "button",
867
+ "span",
732
868
  {
733
- role: "switch",
734
- "aria-checked": checked,
735
- onClick: () => onChange(!checked),
736
869
  style: {
737
- width: "36px",
738
- height: "20px",
739
- borderRadius: "10px",
740
- background: checked ? "hsl(var(--primary))" : "hsl(var(--muted))",
741
- border: "none",
742
- cursor: "pointer",
743
- position: "relative",
744
- transition: "background 0.2s",
745
- flexShrink: 0
870
+ fontSize: "11px",
871
+ fontFamily: "monospace",
872
+ fontWeight: 500,
873
+ color: "hsl(var(--muted-foreground))",
874
+ minWidth: "48px",
875
+ textAlign: "right"
746
876
  },
747
- children: /* @__PURE__ */ jsx("span", { style: {
748
- position: "absolute",
749
- top: "2px",
750
- left: checked ? "18px" : "2px",
751
- width: "16px",
752
- height: "16px",
753
- borderRadius: "50%",
754
- background: "white",
755
- transition: "left 0.2s",
756
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
757
- } })
877
+ children: display(value[0])
758
878
  }
759
879
  )
760
880
  ] });
761
881
  }
882
+ function ToggleRow({ label, checked, onChange }) {
883
+ return /* @__PURE__ */ jsxs(
884
+ "div",
885
+ {
886
+ style: {
887
+ display: "flex",
888
+ alignItems: "center",
889
+ justifyContent: "space-between",
890
+ marginBottom: "8px"
891
+ },
892
+ children: [
893
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "hsl(var(--foreground))" }, children: label }),
894
+ /* @__PURE__ */ jsx(
895
+ "button",
896
+ {
897
+ role: "switch",
898
+ "aria-checked": checked,
899
+ onClick: () => onChange(!checked),
900
+ style: {
901
+ width: "36px",
902
+ height: "20px",
903
+ borderRadius: "10px",
904
+ background: checked ? "hsl(var(--primary))" : "hsl(var(--muted))",
905
+ border: "none",
906
+ cursor: "pointer",
907
+ position: "relative",
908
+ transition: "background 0.2s",
909
+ flexShrink: 0
910
+ },
911
+ children: /* @__PURE__ */ jsx(
912
+ "span",
913
+ {
914
+ style: {
915
+ position: "absolute",
916
+ top: "2px",
917
+ left: checked ? "18px" : "2px",
918
+ width: "16px",
919
+ height: "16px",
920
+ borderRadius: "50%",
921
+ background: "white",
922
+ transition: "left 0.2s",
923
+ boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
924
+ }
925
+ }
926
+ )
927
+ }
928
+ )
929
+ ]
930
+ }
931
+ );
932
+ }
762
933
  function cn(...classes) {
763
934
  return classes.filter(Boolean).join(" ");
764
935
  }
@@ -796,10 +967,13 @@ function ThemeGenerator({
796
967
  };
797
968
  const [internalOpen, setInternalOpen] = useState3(controlledOpen ?? false);
798
969
  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
799
- const setIsOpen = useCallback2((next) => {
800
- if (controlledOpen === void 0) setInternalOpen(next);
801
- onOpenChange?.(next);
802
- }, [controlledOpen, onOpenChange]);
970
+ const setIsOpen = useCallback2(
971
+ (next) => {
972
+ if (controlledOpen === void 0) setInternalOpen(next);
973
+ onOpenChange?.(next);
974
+ },
975
+ [controlledOpen, onOpenChange]
976
+ );
803
977
  const [localPrimary, setLocalPrimary] = useState3(defaultTheme);
804
978
  const [localSecondary, setLocalSecondary] = useState3(defaultSecondaryColor);
805
979
  const [isSecondaryEnabled, setIsSecondaryEnabled] = useState3(false);
@@ -960,192 +1134,221 @@ function ThemeGenerator({
960
1134
  overflow: "hidden"
961
1135
  },
962
1136
  children: [
963
- /* @__PURE__ */ jsxs("div", { style: {
964
- display: "flex",
965
- alignItems: "center",
966
- justifyContent: "space-between",
967
- padding: "14px 16px",
968
- borderBottom: "1px solid hsl(var(--border))",
969
- background: "hsl(var(--muted) / 0.3)"
970
- }, children: [
971
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
972
- /* @__PURE__ */ jsx(SparklesIcon, { className: "dheme-sparkles" }),
973
- /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
974
- ] }),
975
- /* @__PURE__ */ jsx(
976
- "button",
977
- {
978
- onClick: () => setIsOpen(false),
979
- style: {
980
- background: "none",
981
- border: "none",
982
- cursor: "pointer",
983
- padding: "2px",
984
- color: "hsl(var(--muted-foreground))",
985
- display: "flex",
986
- alignItems: "center",
987
- justifyContent: "center",
988
- borderRadius: "4px"
989
- },
990
- children: /* @__PURE__ */ jsx(XIcon, {})
991
- }
992
- )
993
- ] }),
994
- /* @__PURE__ */ jsx("div", { style: {
995
- maxHeight: "calc(100vh - 200px)",
996
- overflowY: "auto",
997
- background: "hsl(var(--background))"
998
- }, children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
999
- /* @__PURE__ */ jsx("p", { style: { fontSize: "11px", color: "hsl(var(--muted-foreground))", margin: 0, lineHeight: 1.5 }, children: labels.description }),
1000
- /* @__PURE__ */ jsxs("section", { children: [
1001
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.baseColors }),
1002
- /* @__PURE__ */ jsx(
1003
- ColorRow,
1004
- {
1005
- label: labels.primary,
1006
- color: localPrimary,
1007
- onColorChange: setLocalPrimary,
1008
- onInputChange: (v) => {
1009
- if (v.length === 6) setLocalPrimary(`#${v}`);
1137
+ /* @__PURE__ */ jsxs(
1138
+ "div",
1139
+ {
1140
+ style: {
1141
+ display: "flex",
1142
+ alignItems: "center",
1143
+ justifyContent: "space-between",
1144
+ padding: "14px 16px",
1145
+ borderBottom: "1px solid hsl(var(--border))",
1146
+ background: "hsl(var(--muted) / 0.3)"
1147
+ },
1148
+ children: [
1149
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1150
+ /* @__PURE__ */ jsx(SparklesIcon, { className: "dheme-sparkles" }),
1151
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
1152
+ ] }),
1153
+ /* @__PURE__ */ jsx(
1154
+ "button",
1155
+ {
1156
+ onClick: () => setIsOpen(false),
1157
+ style: {
1158
+ background: "none",
1159
+ border: "none",
1160
+ cursor: "pointer",
1161
+ padding: "2px",
1162
+ color: "hsl(var(--muted-foreground))",
1163
+ display: "flex",
1164
+ alignItems: "center",
1165
+ justifyContent: "center",
1166
+ borderRadius: "4px"
1167
+ },
1168
+ children: /* @__PURE__ */ jsx(XIcon, {})
1010
1169
  }
1011
- }
1012
- ),
1013
- /* @__PURE__ */ jsx(
1014
- ColorRow,
1015
- {
1016
- label: labels.secondary,
1017
- badge: labels.optional,
1018
- color: localSecondary,
1019
- disabled: !isSecondaryEnabled,
1020
- onColorChange: (c) => {
1021
- if (isSecondaryEnabled) setLocalSecondary(c);
1022
- },
1023
- onInputChange: (v) => {
1024
- if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1025
- },
1026
- actionButton: /* @__PURE__ */ jsx(
1027
- "button",
1170
+ )
1171
+ ]
1172
+ }
1173
+ ),
1174
+ /* @__PURE__ */ jsx(
1175
+ "div",
1176
+ {
1177
+ style: {
1178
+ maxHeight: "calc(100vh - 200px)",
1179
+ overflowY: "auto",
1180
+ background: "hsl(var(--background))"
1181
+ },
1182
+ children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1183
+ /* @__PURE__ */ jsx(
1184
+ "p",
1185
+ {
1186
+ style: {
1187
+ fontSize: "11px",
1188
+ color: "hsl(var(--muted-foreground))",
1189
+ margin: 0,
1190
+ lineHeight: 1.5
1191
+ },
1192
+ children: labels.description
1193
+ }
1194
+ ),
1195
+ /* @__PURE__ */ jsxs("section", { children: [
1196
+ /* @__PURE__ */ jsx(SectionHeading, { children: labels.baseColors }),
1197
+ /* @__PURE__ */ jsx(
1198
+ ColorRow,
1199
+ {
1200
+ label: labels.primary,
1201
+ color: localPrimary,
1202
+ onColorChange: setLocalPrimary,
1203
+ onInputChange: (v) => {
1204
+ if (v.length === 6) setLocalPrimary(`#${v}`);
1205
+ }
1206
+ }
1207
+ ),
1208
+ /* @__PURE__ */ jsx(
1209
+ ColorRow,
1028
1210
  {
1029
- onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
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"
1211
+ label: labels.secondary,
1212
+ badge: labels.optional,
1213
+ color: localSecondary,
1214
+ disabled: !isSecondaryEnabled,
1215
+ onColorChange: (c) => {
1216
+ if (isSecondaryEnabled) setLocalSecondary(c);
1217
+ },
1218
+ onInputChange: (v) => {
1219
+ if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1040
1220
  },
1041
- children: isSecondaryEnabled ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
1221
+ actionButton: /* @__PURE__ */ jsx(
1222
+ "button",
1223
+ {
1224
+ onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1225
+ style: {
1226
+ background: "none",
1227
+ border: "none",
1228
+ cursor: "pointer",
1229
+ padding: "2px",
1230
+ color: "hsl(var(--muted-foreground))",
1231
+ display: "flex",
1232
+ alignItems: "center",
1233
+ justifyContent: "center",
1234
+ borderRadius: "4px"
1235
+ },
1236
+ children: isSecondaryEnabled ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
1237
+ }
1238
+ )
1042
1239
  }
1043
1240
  )
1044
- }
1045
- )
1046
- ] }),
1047
- /* @__PURE__ */ jsxs("section", { children: [
1048
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.fineTuning }),
1049
- /* @__PURE__ */ jsx(
1050
- SliderRow,
1051
- {
1052
- label: labels.saturation,
1053
- value: localSaturation,
1054
- onChange: setLocalSaturation,
1055
- min: -100,
1056
- max: 100,
1057
- step: 1,
1058
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1059
- }
1060
- ),
1061
- /* @__PURE__ */ jsx(
1062
- SliderRow,
1063
- {
1064
- label: labels.lightness,
1065
- value: localLightness,
1066
- onChange: setLocalLightness,
1067
- min: -100,
1068
- max: 100,
1069
- step: 1,
1070
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1071
- }
1072
- ),
1073
- /* @__PURE__ */ jsx(
1074
- SliderRow,
1075
- {
1076
- label: labels.borderRadius,
1077
- value: localRadius,
1078
- onChange: setLocalRadius,
1079
- min: 0,
1080
- max: 2,
1081
- step: 0.1,
1082
- display: (v) => `${v.toFixed(1)}rem`
1083
- }
1084
- )
1085
- ] }),
1086
- /* @__PURE__ */ jsxs("section", { children: [
1087
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.advancedOptions }),
1088
- /* @__PURE__ */ jsx(
1089
- ToggleRow,
1090
- {
1091
- label: labels.colorfulCard,
1092
- checked: localCardIsColored,
1093
- onChange: (v) => handleToggle("cardIsColored", v)
1094
- }
1095
- ),
1096
- /* @__PURE__ */ jsx(
1097
- ToggleRow,
1098
- {
1099
- label: labels.colorfulBackground,
1100
- checked: localBackgroundIsColored,
1101
- onChange: (v) => handleToggle("backgroundIsColored", v)
1102
- }
1103
- ),
1104
- /* @__PURE__ */ jsx(
1105
- ToggleRow,
1106
- {
1107
- label: labels.colorfulBorder,
1108
- checked: localBorderIsColored,
1109
- onChange: (v) => handleToggle("borderIsColored", v)
1110
- }
1111
- )
1112
- ] })
1113
- ] }) }),
1114
- /* @__PURE__ */ jsx("div", { style: {
1115
- padding: "10px 12px",
1116
- borderTop: "1px solid hsl(var(--border))",
1117
- background: "hsl(var(--muted) / 0.2)"
1118
- }, children: /* @__PURE__ */ jsxs(
1119
- "button",
1241
+ ] }),
1242
+ /* @__PURE__ */ jsxs("section", { children: [
1243
+ /* @__PURE__ */ jsx(SectionHeading, { children: labels.fineTuning }),
1244
+ /* @__PURE__ */ jsx(
1245
+ SliderRow,
1246
+ {
1247
+ label: labels.saturation,
1248
+ value: localSaturation,
1249
+ onChange: setLocalSaturation,
1250
+ min: -100,
1251
+ max: 100,
1252
+ step: 1,
1253
+ display: (v) => `${v > 0 ? "+" : ""}${v}%`
1254
+ }
1255
+ ),
1256
+ /* @__PURE__ */ jsx(
1257
+ SliderRow,
1258
+ {
1259
+ label: labels.lightness,
1260
+ value: localLightness,
1261
+ onChange: setLocalLightness,
1262
+ min: -100,
1263
+ max: 100,
1264
+ step: 1,
1265
+ display: (v) => `${v > 0 ? "+" : ""}${v}%`
1266
+ }
1267
+ ),
1268
+ /* @__PURE__ */ jsx(
1269
+ SliderRow,
1270
+ {
1271
+ label: labels.borderRadius,
1272
+ value: localRadius,
1273
+ onChange: setLocalRadius,
1274
+ min: 0,
1275
+ max: 2,
1276
+ step: 0.1,
1277
+ display: (v) => `${v.toFixed(1)}rem`
1278
+ }
1279
+ )
1280
+ ] }),
1281
+ /* @__PURE__ */ jsxs("section", { children: [
1282
+ /* @__PURE__ */ jsx(SectionHeading, { children: labels.advancedOptions }),
1283
+ /* @__PURE__ */ jsx(
1284
+ ToggleRow,
1285
+ {
1286
+ label: labels.colorfulCard,
1287
+ checked: localCardIsColored,
1288
+ onChange: (v) => handleToggle("cardIsColored", v)
1289
+ }
1290
+ ),
1291
+ /* @__PURE__ */ jsx(
1292
+ ToggleRow,
1293
+ {
1294
+ label: labels.colorfulBackground,
1295
+ checked: localBackgroundIsColored,
1296
+ onChange: (v) => handleToggle("backgroundIsColored", v)
1297
+ }
1298
+ ),
1299
+ /* @__PURE__ */ jsx(
1300
+ ToggleRow,
1301
+ {
1302
+ label: labels.colorfulBorder,
1303
+ checked: localBorderIsColored,
1304
+ onChange: (v) => handleToggle("borderIsColored", v)
1305
+ }
1306
+ )
1307
+ ] })
1308
+ ] })
1309
+ }
1310
+ ),
1311
+ /* @__PURE__ */ jsx(
1312
+ "div",
1120
1313
  {
1121
- onClick: handleReset,
1122
1314
  style: {
1123
- width: "100%",
1124
- height: "32px",
1125
- background: "none",
1126
- border: "1px solid hsl(var(--border))",
1127
- borderRadius: "6px",
1128
- cursor: "pointer",
1129
- display: "flex",
1130
- alignItems: "center",
1131
- justifyContent: "center",
1132
- gap: "6px",
1133
- fontSize: "12px",
1134
- color: "hsl(var(--muted-foreground))",
1135
- transition: "background 0.15s"
1136
- },
1137
- onMouseEnter: (e) => {
1138
- e.currentTarget.style.background = "hsl(var(--muted))";
1139
- },
1140
- onMouseLeave: (e) => {
1141
- e.currentTarget.style.background = "none";
1315
+ padding: "10px 12px",
1316
+ borderTop: "1px solid hsl(var(--border))",
1317
+ background: "hsl(var(--muted) / 0.2)"
1142
1318
  },
1143
- children: [
1144
- /* @__PURE__ */ jsx(RotateCcwIcon, {}),
1145
- labels.reset
1146
- ]
1319
+ children: /* @__PURE__ */ jsxs(
1320
+ "button",
1321
+ {
1322
+ onClick: handleReset,
1323
+ style: {
1324
+ width: "100%",
1325
+ height: "32px",
1326
+ background: "none",
1327
+ border: "1px solid hsl(var(--border))",
1328
+ borderRadius: "6px",
1329
+ cursor: "pointer",
1330
+ display: "flex",
1331
+ alignItems: "center",
1332
+ justifyContent: "center",
1333
+ gap: "6px",
1334
+ fontSize: "12px",
1335
+ color: "hsl(var(--muted-foreground))",
1336
+ transition: "background 0.15s"
1337
+ },
1338
+ onMouseEnter: (e) => {
1339
+ e.currentTarget.style.background = "hsl(var(--muted))";
1340
+ },
1341
+ onMouseLeave: (e) => {
1342
+ e.currentTarget.style.background = "none";
1343
+ },
1344
+ children: [
1345
+ /* @__PURE__ */ jsx(RotateCcwIcon, {}),
1346
+ labels.reset
1347
+ ]
1348
+ }
1349
+ )
1147
1350
  }
1148
- ) })
1351
+ )
1149
1352
  ]
1150
1353
  }
1151
1354
  ),
@@ -1168,63 +1371,104 @@ function ThemeGenerator({
1168
1371
  pointerEvents: isOpen ? "none" : "auto",
1169
1372
  transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)"
1170
1373
  },
1171
- children: /* @__PURE__ */ jsxs("div", { style: {
1172
- position: "absolute",
1173
- inset: 0,
1174
- display: "flex",
1175
- alignItems: "center",
1176
- justifyContent: "space-between",
1177
- padding: "0 8px 0 12px"
1178
- }, children: [
1179
- /* @__PURE__ */ jsx("div", { style: {
1180
- width: "32px",
1181
- height: "32px",
1182
- borderRadius: "50%",
1183
- background: localPrimary,
1184
- border: "1px solid hsl(var(--border))",
1185
- boxShadow: "0 0 0 2px hsl(var(--background))",
1186
- flexShrink: 0
1187
- } }),
1188
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px", flex: 1, padding: "0 8px" }, children: [
1189
- /* @__PURE__ */ jsx("span", { style: {
1190
- fontSize: "10px",
1191
- fontWeight: 700,
1192
- letterSpacing: "0.08em",
1193
- textTransform: "uppercase",
1194
- color: "hsl(var(--foreground))"
1195
- }, children: labels.fabPrimaryLabel }),
1196
- /* @__PURE__ */ jsxs("div", { style: {
1374
+ children: /* @__PURE__ */ jsxs(
1375
+ "div",
1376
+ {
1377
+ style: {
1378
+ position: "absolute",
1379
+ inset: 0,
1197
1380
  display: "flex",
1198
- gap: "8px",
1199
- fontSize: "10px",
1200
- fontFamily: "monospace",
1201
- color: "hsl(var(--muted-foreground))"
1202
- }, children: [
1203
- /* @__PURE__ */ jsxs("span", { children: [
1204
- "S:",
1205
- localSaturation[0] > 0 ? "+" : "",
1206
- localSaturation[0],
1207
- "%"
1208
- ] }),
1209
- /* @__PURE__ */ jsxs("span", { children: [
1210
- "L:",
1211
- localLightness[0] > 0 ? "+" : "",
1212
- localLightness[0],
1213
- "%"
1214
- ] })
1215
- ] })
1216
- ] }),
1217
- /* @__PURE__ */ jsx("div", { style: {
1218
- width: "32px",
1219
- height: "32px",
1220
- display: "flex",
1221
- alignItems: "center",
1222
- justifyContent: "center",
1223
- borderRadius: "50%",
1224
- background: "hsl(var(--muted) / 0.5)",
1225
- flexShrink: 0
1226
- }, children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) })
1227
- ] })
1381
+ alignItems: "center",
1382
+ justifyContent: "space-between",
1383
+ padding: "0 8px 0 12px"
1384
+ },
1385
+ children: [
1386
+ /* @__PURE__ */ jsx(
1387
+ "div",
1388
+ {
1389
+ style: {
1390
+ width: "32px",
1391
+ height: "32px",
1392
+ borderRadius: "50%",
1393
+ background: localPrimary,
1394
+ border: "1px solid hsl(var(--border))",
1395
+ boxShadow: "0 0 0 2px hsl(var(--background))",
1396
+ flexShrink: 0
1397
+ }
1398
+ }
1399
+ ),
1400
+ /* @__PURE__ */ jsxs(
1401
+ "div",
1402
+ {
1403
+ style: {
1404
+ display: "flex",
1405
+ flexDirection: "column",
1406
+ gap: "2px",
1407
+ flex: 1,
1408
+ padding: "0 8px"
1409
+ },
1410
+ children: [
1411
+ /* @__PURE__ */ jsx(
1412
+ "span",
1413
+ {
1414
+ style: {
1415
+ fontSize: "10px",
1416
+ fontWeight: 700,
1417
+ letterSpacing: "0.08em",
1418
+ textTransform: "uppercase",
1419
+ color: "hsl(var(--foreground))"
1420
+ },
1421
+ children: labels.fabPrimaryLabel
1422
+ }
1423
+ ),
1424
+ /* @__PURE__ */ jsxs(
1425
+ "div",
1426
+ {
1427
+ style: {
1428
+ display: "flex",
1429
+ gap: "8px",
1430
+ fontSize: "10px",
1431
+ fontFamily: "monospace",
1432
+ color: "hsl(var(--muted-foreground))"
1433
+ },
1434
+ children: [
1435
+ /* @__PURE__ */ jsxs("span", { children: [
1436
+ "S:",
1437
+ localSaturation[0] > 0 ? "+" : "",
1438
+ localSaturation[0],
1439
+ "%"
1440
+ ] }),
1441
+ /* @__PURE__ */ jsxs("span", { children: [
1442
+ "L:",
1443
+ localLightness[0] > 0 ? "+" : "",
1444
+ localLightness[0],
1445
+ "%"
1446
+ ] })
1447
+ ]
1448
+ }
1449
+ )
1450
+ ]
1451
+ }
1452
+ ),
1453
+ /* @__PURE__ */ jsx(
1454
+ "div",
1455
+ {
1456
+ style: {
1457
+ width: "32px",
1458
+ height: "32px",
1459
+ display: "flex",
1460
+ alignItems: "center",
1461
+ justifyContent: "center",
1462
+ borderRadius: "50%",
1463
+ background: "hsl(var(--muted) / 0.5)",
1464
+ flexShrink: 0
1465
+ },
1466
+ children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
1467
+ }
1468
+ )
1469
+ ]
1470
+ }
1471
+ )
1228
1472
  }
1229
1473
  )
1230
1474
  ]