canvas-ui-sdk 0.3.10 → 0.3.11

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 (3) hide show
  1. package/dist/index.js +426 -508
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -26560,116 +26560,76 @@ function TypographyRow({
26560
26560
  );
26561
26561
  }
26562
26562
  var buttonSizeConfigs = [
26563
- { id: "mini", label: "Mini", prefix: "--btn-mini" },
26564
- { id: "small", label: "Small", prefix: "--btn-small" },
26565
- { id: "standard", label: "Standard", prefix: "--btn-standard" },
26566
- { id: "large", label: "Large", prefix: "--btn-large" }
26563
+ { id: "mini", label: "Mini", description: "28px height, 12px font", prefix: "--btn-mini" },
26564
+ { id: "small", label: "Small", description: "32px height, 14px font", prefix: "--btn-small" },
26565
+ { id: "standard", label: "Standard", description: "40px height, 14px font", prefix: "--btn-standard" },
26566
+ { id: "large", label: "Large", description: "48px height, 16px font", prefix: "--btn-large" }
26567
26567
  ];
26568
- var sizeFields = [
26569
- { suffix: "-height", label: "Height" },
26570
- { suffix: "-font-size", label: "Font Size" },
26571
- { suffix: "-px", label: "Padding X" },
26572
- { suffix: "-radius", label: "Radius" },
26573
- { suffix: "-font-weight", label: "Weight" },
26574
- { suffix: "-letter-spacing", label: "Spacing" },
26575
- { suffix: "-font-family", label: "Font Family" }
26568
+ var fontWeightOptions2 = [
26569
+ { value: "300", label: "Light (300)" },
26570
+ { value: "400", label: "Regular (400)" },
26571
+ { value: "500", label: "Medium (500)" },
26572
+ { value: "600", label: "Semibold (600)" },
26573
+ { value: "700", label: "Bold (700)" },
26574
+ { value: "800", label: "Extra Bold (800)" }
26576
26575
  ];
26577
26576
  var buttonColorVariableOptions = [
26577
+ // Brand colors
26578
26578
  { value: "var(--canvas-primary)", label: "Primary" },
26579
- { value: "var(--canvas-primary-dark)", label: "Primary Dark" },
26580
26579
  { value: "var(--canvas-primary-foreground)", label: "Primary Text" },
26580
+ { value: "var(--canvas-primary-dark)", label: "Primary Dark" },
26581
+ { value: "var(--canvas-destructive)", label: "Destructive" },
26582
+ // Background colors
26581
26583
  { value: "var(--canvas-background)", label: "Background" },
26582
26584
  { value: "var(--canvas-surface)", label: "Surface" },
26583
26585
  { value: "var(--canvas-surface-hover)", label: "Surface Hover" },
26584
26586
  { value: "var(--canvas-surface-brand)", label: "Brand Surface" },
26585
26587
  { value: "var(--canvas-outline-bg)", label: "Outline Bg" },
26588
+ { value: "var(--canvas-flair-bg)", label: "Flair Background" },
26589
+ // Text colors
26586
26590
  { value: "var(--canvas-text)", label: "Text" },
26587
26591
  { value: "var(--canvas-text-muted)", label: "Text Muted" },
26592
+ { value: "var(--canvas-text-placeholder)", label: "Text Placeholder" },
26593
+ // Border colors
26588
26594
  { value: "var(--canvas-border)", label: "Border" },
26589
26595
  { value: "var(--canvas-border-input)", label: "Input Border" },
26590
- { value: "var(--canvas-destructive)", label: "Destructive" },
26596
+ { value: "var(--canvas-border-input-focus)", label: "Input Border Focused" },
26597
+ { value: "var(--canvas-border-input-invalid)", label: "Input Border Invalid" },
26598
+ { value: "var(--canvas-border-disabled)", label: "Border Disabled" },
26599
+ // Sidebar colors - Light
26600
+ { value: "var(--canvas-sidebar-light-bg)", label: "Sidebar Light BG" },
26601
+ { value: "var(--canvas-sidebar-light-active-bg)", label: "Sidebar Light Active BG" },
26602
+ { value: "var(--canvas-sidebar-light-active-text)", label: "Sidebar Light Active Text" },
26603
+ { value: "var(--canvas-sidebar-light-text)", label: "Sidebar Light Text" },
26604
+ // Sidebar colors - Dark
26605
+ { value: "var(--canvas-sidebar-dark-bg)", label: "Sidebar Dark BG" },
26606
+ { value: "var(--canvas-sidebar-dark-active-bg)", label: "Sidebar Dark Active BG" },
26607
+ { value: "var(--canvas-sidebar-dark-active-text)", label: "Sidebar Dark Active Text" },
26608
+ { value: "var(--canvas-sidebar-dark-text)", label: "Sidebar Dark Text" },
26609
+ // Special
26591
26610
  { value: "var(--canvas-transparent)", label: "Transparent" }
26592
26611
  ];
26593
26612
  function ButtonsPanel({ theme }) {
26594
26613
  return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-5 p-4", children: [
26595
26614
  /* @__PURE__ */ jsxs("div", { children: [
26596
- /* @__PURE__ */ jsx(
26597
- "h3",
26598
- {
26599
- style: {
26600
- fontSize: "11px",
26601
- fontWeight: 600,
26602
- color: "#6b7280",
26603
- textTransform: "uppercase",
26604
- letterSpacing: "0.05em",
26605
- marginBottom: "12px"
26606
- },
26607
- children: "Button Sizes"
26608
- }
26609
- ),
26615
+ /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide mb-3", children: "Button Sizes" }),
26610
26616
  buttonSizeConfigs.map((size) => /* @__PURE__ */ jsx(SizeGroup, { size, theme }, size.id))
26611
26617
  ] }),
26612
26618
  /* @__PURE__ */ jsxs("div", { children: [
26613
- /* @__PURE__ */ jsxs(
26614
- "div",
26615
- {
26616
- style: {
26617
- display: "flex",
26618
- alignItems: "center",
26619
- justifyContent: "space-between",
26620
- marginBottom: "12px"
26621
- },
26622
- children: [
26623
- /* @__PURE__ */ jsx(
26624
- "h3",
26625
- {
26626
- style: {
26627
- fontSize: "11px",
26628
- fontWeight: 600,
26629
- color: "#6b7280",
26630
- textTransform: "uppercase",
26631
- letterSpacing: "0.05em"
26632
- },
26633
- children: "Color Styles"
26634
- }
26635
- ),
26636
- /* @__PURE__ */ jsx(
26637
- "button",
26638
- {
26639
- onClick: theme.addCustomButtonStyle,
26640
- style: {
26641
- fontSize: "11px",
26642
- fontWeight: 500,
26643
- color: "#1165ef",
26644
- background: "none",
26645
- border: "1px solid #e5e7eb",
26646
- cursor: "pointer",
26647
- padding: "4px 10px",
26648
- borderRadius: "4px",
26649
- display: "flex",
26650
- alignItems: "center",
26651
- gap: "4px"
26652
- },
26653
- children: "+ Add Style"
26654
- }
26655
- )
26656
- ]
26657
- }
26658
- ),
26659
- defaultButtonColorStyles.map((style) => /* @__PURE__ */ jsx(ButtonColorGroup, { style, theme }, style.id)),
26660
- theme.customButtonStyles.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", paddingTop: "16px", borderTop: "1px solid #e5e7eb" }, children: [
26619
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
26620
+ /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide", children: "Color Styles" }),
26661
26621
  /* @__PURE__ */ jsx(
26662
- "h4",
26622
+ "button",
26663
26623
  {
26664
- style: {
26665
- fontSize: "11px",
26666
- fontWeight: 600,
26667
- color: "#6b7280",
26668
- marginBottom: "12px"
26669
- },
26670
- children: "Custom Styles"
26624
+ onClick: theme.addCustomButtonStyle,
26625
+ className: "text-[11px] font-medium text-[var(--canvas-primary)] bg-transparent border border-[var(--canvas-border)] cursor-pointer px-2.5 py-1 rounded flex items-center gap-1 hover:bg-[var(--canvas-surface)]",
26626
+ children: "+ Add Style"
26671
26627
  }
26672
- ),
26628
+ )
26629
+ ] }),
26630
+ defaultButtonColorStyles.map((style) => /* @__PURE__ */ jsx(ButtonColorGroup, { style, theme }, style.id)),
26631
+ theme.customButtonStyles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--canvas-border)]", children: [
26632
+ /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] mb-3", children: "Custom Styles" }),
26673
26633
  theme.customButtonStyles.map((style) => /* @__PURE__ */ jsx(
26674
26634
  CustomButtonColorGroup,
26675
26635
  {
@@ -26687,131 +26647,151 @@ function SizeGroup({
26687
26647
  theme
26688
26648
  }) {
26689
26649
  const [expanded, setExpanded] = React13__default.useState(false);
26690
- const previewStyle = {
26691
- height: theme.variables[`${size.prefix}-height`] || "40px",
26692
- fontSize: theme.variables[`${size.prefix}-font-size`] || "14px",
26693
- paddingLeft: theme.variables[`${size.prefix}-px`] || "16px",
26694
- paddingRight: theme.variables[`${size.prefix}-px`] || "16px",
26695
- borderRadius: theme.variables[`${size.prefix}-radius`] || "8px",
26696
- fontWeight: theme.variables[`${size.prefix}-font-weight`] || "500",
26697
- letterSpacing: theme.variables[`${size.prefix}-letter-spacing`] || "0em",
26698
- background: "#1165ef",
26699
- color: "#ffffff",
26700
- border: "none",
26701
- cursor: "pointer",
26702
- display: "inline-flex",
26703
- alignItems: "center"
26704
- };
26705
- return /* @__PURE__ */ jsxs(
26706
- "div",
26707
- {
26708
- style: {
26709
- border: "1px solid #e5e7eb",
26710
- borderRadius: "8px",
26711
- marginBottom: "8px",
26712
- overflow: "hidden"
26713
- },
26714
- children: [
26715
- /* @__PURE__ */ jsxs(
26716
- "button",
26717
- {
26718
- onClick: () => setExpanded(!expanded),
26719
- style: {
26720
- display: "flex",
26721
- alignItems: "center",
26722
- justifyContent: "space-between",
26723
- width: "100%",
26724
- padding: "10px 12px",
26725
- background: "#f9fafb",
26726
- border: "none",
26727
- cursor: "pointer",
26728
- fontSize: "13px",
26729
- fontWeight: 600,
26730
- color: "#374151"
26731
- },
26732
- children: [
26733
- /* @__PURE__ */ jsx("span", { children: size.label }),
26734
- /* @__PURE__ */ jsx(
26735
- "span",
26736
- {
26737
- style: {
26738
- fontSize: "11px",
26739
- color: "#9ca3af",
26740
- transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
26741
- transition: "transform 150ms"
26742
- },
26743
- children: "\u25BC"
26744
- }
26650
+ const heightVar = `${size.prefix}-height`;
26651
+ const fontSizeVar = `${size.prefix}-font-size`;
26652
+ const pxVar = `${size.prefix}-px`;
26653
+ const radiusVar = `${size.prefix}-radius`;
26654
+ const fontWeightVar = `${size.prefix}-font-weight`;
26655
+ const letterSpacingVar = `${size.prefix}-letter-spacing`;
26656
+ const height = theme.variables[heightVar] || defaultButtonSizes[heightVar];
26657
+ const fontSize = theme.variables[fontSizeVar] || defaultButtonSizes[fontSizeVar];
26658
+ const px = theme.variables[pxVar] || defaultButtonSizes[pxVar];
26659
+ const radius = theme.variables[radiusVar] || defaultButtonSizes[radiusVar];
26660
+ const fontWeight = theme.variables[fontWeightVar] || defaultButtonSizes[fontWeightVar];
26661
+ const letterSpacing = theme.variables[letterSpacingVar] || defaultButtonSizes[letterSpacingVar];
26662
+ return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
26663
+ /* @__PURE__ */ jsxs(
26664
+ "button",
26665
+ {
26666
+ type: "button",
26667
+ onClick: () => setExpanded(!expanded),
26668
+ className: "w-full flex items-center justify-between gap-3 text-left cursor-pointer",
26669
+ children: [
26670
+ /* @__PURE__ */ jsx(
26671
+ "div",
26672
+ {
26673
+ className: "shrink-0 flex items-center justify-center text-white",
26674
+ style: {
26675
+ height,
26676
+ fontSize,
26677
+ paddingLeft: px,
26678
+ paddingRight: px,
26679
+ borderRadius: radius,
26680
+ backgroundColor: "#0d121c",
26681
+ fontWeight,
26682
+ letterSpacing
26683
+ },
26684
+ children: size.label
26685
+ }
26686
+ ),
26687
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)]", children: size.description }) }),
26688
+ /* @__PURE__ */ jsx(
26689
+ ChevronDown,
26690
+ {
26691
+ className: cn(
26692
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
26693
+ expanded && "rotate-180"
26745
26694
  )
26746
- ]
26747
- }
26695
+ }
26696
+ )
26697
+ ]
26698
+ }
26699
+ ),
26700
+ /* @__PURE__ */ jsxs(
26701
+ "div",
26702
+ {
26703
+ className: cn(
26704
+ "grid grid-cols-2 gap-3 overflow-hidden transition-all duration-200 ease-out",
26705
+ expanded ? "mt-3 max-h-[400px] opacity-100" : "max-h-0 opacity-0"
26748
26706
  ),
26749
- expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-2", children: [
26750
- /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsxs("button", { style: previewStyle, children: [
26751
- size.label,
26752
- " Button"
26753
- ] }) }),
26754
- sizeFields.map((field) => {
26755
- const key = `${size.prefix}${field.suffix}`;
26756
- return /* @__PURE__ */ jsxs(
26707
+ children: [
26708
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26709
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font" }),
26710
+ /* @__PURE__ */ jsx(
26757
26711
  "div",
26758
26712
  {
26759
- style: {
26760
- display: "flex",
26761
- alignItems: "center",
26762
- gap: "8px"
26763
- },
26764
- children: [
26765
- /* @__PURE__ */ jsx(
26766
- "label",
26767
- {
26768
- style: {
26769
- fontSize: "12px",
26770
- color: "#6b7280",
26771
- width: "80px",
26772
- flexShrink: 0
26773
- },
26774
- children: field.label
26775
- }
26776
- ),
26777
- field.suffix === "-font-family" ? /* @__PURE__ */ jsx(
26778
- "span",
26779
- {
26780
- style: {
26781
- flex: 1,
26782
- fontSize: "12px",
26783
- color: "#9ca3af",
26784
- fontStyle: "italic"
26785
- },
26786
- children: "Uses Button Text style"
26787
- }
26788
- ) : /* @__PURE__ */ jsx(
26789
- "input",
26790
- {
26791
- type: "text",
26792
- value: theme.variables[key] ?? "",
26793
- onChange: (e) => theme.setVariable(key, e.target.value),
26794
- style: {
26795
- flex: 1,
26796
- fontSize: "12px",
26797
- fontFamily: "monospace",
26798
- padding: "4px 8px",
26799
- border: "1px solid #e5e7eb",
26800
- borderRadius: "4px",
26801
- color: "#374151",
26802
- background: "#ffffff"
26803
- }
26804
- }
26805
- )
26806
- ]
26807
- },
26808
- key
26809
- );
26810
- })
26811
- ] })
26812
- ]
26813
- }
26814
- );
26713
+ className: "h-8 px-3 flex items-center text-xs bg-[var(--canvas-surface)] border border-[var(--canvas-border)] rounded-md text-[var(--canvas-text-muted)]",
26714
+ title: "Set in Typography \u2192 Button Text",
26715
+ children: "Uses Button Text style"
26716
+ }
26717
+ )
26718
+ ] }),
26719
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26720
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font Size" }),
26721
+ /* @__PURE__ */ jsx(
26722
+ TextInput,
26723
+ {
26724
+ inputSize: "sm",
26725
+ value: fontSize,
26726
+ onChange: (e) => theme.setVariable(fontSizeVar, e.target.value),
26727
+ className: "w-full font-mono",
26728
+ placeholder: "16px"
26729
+ }
26730
+ )
26731
+ ] }),
26732
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26733
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font Weight" }),
26734
+ /* @__PURE__ */ jsxs(Select, { value: fontWeight, onValueChange: (v) => theme.setVariable(fontWeightVar, v), children: [
26735
+ /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", className: "bg-white", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
26736
+ /* @__PURE__ */ jsx(SelectContent, { children: fontWeightOptions2.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, className: "text-xs", children: opt.label }, opt.value)) })
26737
+ ] })
26738
+ ] }),
26739
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26740
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Letter Spacing" }),
26741
+ /* @__PURE__ */ jsx(
26742
+ TextInput,
26743
+ {
26744
+ inputSize: "sm",
26745
+ value: letterSpacing,
26746
+ onChange: (e) => theme.setVariable(letterSpacingVar, e.target.value),
26747
+ className: "w-full font-mono",
26748
+ placeholder: "0em"
26749
+ }
26750
+ )
26751
+ ] }),
26752
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26753
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Height" }),
26754
+ /* @__PURE__ */ jsx(
26755
+ TextInput,
26756
+ {
26757
+ inputSize: "sm",
26758
+ value: height,
26759
+ onChange: (e) => theme.setVariable(heightVar, e.target.value),
26760
+ className: "w-full font-mono",
26761
+ placeholder: "40px"
26762
+ }
26763
+ )
26764
+ ] }),
26765
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26766
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Horizontal Padding" }),
26767
+ /* @__PURE__ */ jsx(
26768
+ TextInput,
26769
+ {
26770
+ inputSize: "sm",
26771
+ value: px,
26772
+ onChange: (e) => theme.setVariable(pxVar, e.target.value),
26773
+ className: "w-full font-mono",
26774
+ placeholder: "16px"
26775
+ }
26776
+ )
26777
+ ] }),
26778
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 col-span-2", children: [
26779
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Border Radius" }),
26780
+ /* @__PURE__ */ jsx(
26781
+ TextInput,
26782
+ {
26783
+ inputSize: "sm",
26784
+ value: radius,
26785
+ onChange: (e) => theme.setVariable(radiusVar, e.target.value),
26786
+ className: "w-full font-mono",
26787
+ placeholder: "8px"
26788
+ }
26789
+ )
26790
+ ] })
26791
+ ]
26792
+ }
26793
+ )
26794
+ ] });
26815
26795
  }
26816
26796
  function ButtonColorGroup({
26817
26797
  style,
@@ -26819,139 +26799,126 @@ function ButtonColorGroup({
26819
26799
  }) {
26820
26800
  const [expanded, setExpanded] = React13__default.useState(false);
26821
26801
  const prefix = `--btn-${style.id}`;
26822
- return /* @__PURE__ */ jsxs(
26823
- "div",
26824
- {
26825
- style: {
26826
- border: "1px solid #e5e7eb",
26827
- borderRadius: "8px",
26828
- marginBottom: "8px",
26829
- overflow: "hidden"
26830
- },
26831
- children: [
26832
- /* @__PURE__ */ jsxs(
26833
- "button",
26834
- {
26835
- onClick: () => setExpanded(!expanded),
26836
- style: {
26837
- display: "flex",
26838
- alignItems: "center",
26839
- justifyContent: "space-between",
26840
- width: "100%",
26841
- padding: "10px 12px",
26842
- background: "#f9fafb",
26843
- border: "none",
26844
- cursor: "pointer",
26845
- fontSize: "13px",
26846
- fontWeight: 600,
26847
- color: "#374151"
26848
- },
26849
- children: [
26850
- /* @__PURE__ */ jsx("span", { children: style.label }),
26851
- /* @__PURE__ */ jsx(
26852
- "span",
26853
- {
26854
- style: {
26855
- fontSize: "11px",
26856
- color: "#9ca3af",
26857
- transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
26858
- transition: "transform 150ms"
26859
- },
26860
- children: "\u25BC"
26861
- }
26862
- )
26863
- ]
26864
- }
26865
- ),
26866
- expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-1", children: [
26867
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
26802
+ const bg = theme.variables[`${prefix}-bg`] ?? defaultButtonColors[`${prefix}-bg`] ?? "";
26803
+ const text = theme.variables[`${prefix}-text`] ?? defaultButtonColors[`${prefix}-text`] ?? "";
26804
+ const border = theme.variables[`${prefix}-border`] ?? defaultButtonColors[`${prefix}-border`] ?? "";
26805
+ const resolvedBg = resolveBrandingColor(bg);
26806
+ const resolvedText = resolveBrandingColor(text);
26807
+ const resolvedBorder = resolveBrandingColor(border);
26808
+ return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
26809
+ /* @__PURE__ */ jsxs(
26810
+ "button",
26811
+ {
26812
+ type: "button",
26813
+ onClick: () => setExpanded(!expanded),
26814
+ className: "w-full flex items-center justify-between gap-2 text-left cursor-pointer",
26815
+ children: [
26816
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
26868
26817
  /* @__PURE__ */ jsx(
26869
- "span",
26818
+ "div",
26870
26819
  {
26820
+ className: "w-8 h-6 rounded border shrink-0 flex items-center justify-center text-xs",
26871
26821
  style: {
26872
- fontSize: "11px",
26873
- fontWeight: 600,
26874
- color: "#9ca3af",
26875
- textTransform: "uppercase",
26876
- letterSpacing: "0.05em"
26822
+ backgroundColor: resolvedBg === "transparent" ? "white" : resolvedBg,
26823
+ color: resolvedText,
26824
+ borderColor: resolvedBorder === "transparent" ? void 0 : resolvedBorder
26877
26825
  },
26878
- children: "Normal"
26879
- }
26880
- ),
26881
- /* @__PURE__ */ jsx(
26882
- ColorInputRow,
26883
- {
26884
- label: "Background",
26885
- value: theme.variables[`${prefix}-bg`] ?? "",
26886
- onChange: (val) => theme.setVariable(`${prefix}-bg`, val),
26887
- variableOptions: buttonColorVariableOptions
26888
- }
26889
- ),
26890
- /* @__PURE__ */ jsx(
26891
- ColorInputRow,
26892
- {
26893
- label: "Text",
26894
- value: theme.variables[`${prefix}-text`] ?? "",
26895
- onChange: (val) => theme.setVariable(`${prefix}-text`, val),
26896
- variableOptions: buttonColorVariableOptions
26826
+ children: "Aa"
26897
26827
  }
26898
26828
  ),
26899
- /* @__PURE__ */ jsx(
26900
- ColorInputRow,
26901
- {
26902
- label: "Border",
26903
- value: theme.variables[`${prefix}-border`] ?? "",
26904
- onChange: (val) => theme.setVariable(`${prefix}-border`, val),
26905
- variableOptions: buttonColorVariableOptions
26906
- }
26907
- )
26829
+ /* @__PURE__ */ jsxs("div", { children: [
26830
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--canvas-text)]", children: style.label }),
26831
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)]", children: style.description })
26832
+ ] })
26833
+ ] }),
26834
+ /* @__PURE__ */ jsx(
26835
+ ChevronDown,
26836
+ {
26837
+ className: cn(
26838
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
26839
+ expanded && "rotate-180"
26840
+ )
26841
+ }
26842
+ )
26843
+ ]
26844
+ }
26845
+ ),
26846
+ /* @__PURE__ */ jsxs(
26847
+ "div",
26848
+ {
26849
+ className: cn(
26850
+ "overflow-hidden transition-all duration-200 ease-out",
26851
+ expanded ? "mt-3 max-h-[400px] opacity-100" : "max-h-0 opacity-0"
26852
+ ),
26853
+ children: [
26854
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
26855
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Normal" }),
26856
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
26857
+ /* @__PURE__ */ jsx(
26858
+ ColorInputRow,
26859
+ {
26860
+ label: "Background",
26861
+ value: bg,
26862
+ onChange: (val) => theme.setVariable(`${prefix}-bg`, val),
26863
+ variableOptions: buttonColorVariableOptions
26864
+ }
26865
+ ),
26866
+ /* @__PURE__ */ jsx(
26867
+ ColorInputRow,
26868
+ {
26869
+ label: "Text",
26870
+ value: text,
26871
+ onChange: (val) => theme.setVariable(`${prefix}-text`, val),
26872
+ variableOptions: buttonColorVariableOptions
26873
+ }
26874
+ ),
26875
+ /* @__PURE__ */ jsx(
26876
+ ColorInputRow,
26877
+ {
26878
+ label: "Border",
26879
+ value: border,
26880
+ onChange: (val) => theme.setVariable(`${prefix}-border`, val),
26881
+ variableOptions: buttonColorVariableOptions
26882
+ }
26883
+ )
26884
+ ] })
26908
26885
  ] }),
26909
26886
  /* @__PURE__ */ jsxs("div", { children: [
26910
- /* @__PURE__ */ jsx(
26911
- "span",
26912
- {
26913
- style: {
26914
- fontSize: "11px",
26915
- fontWeight: 600,
26916
- color: "#9ca3af",
26917
- textTransform: "uppercase",
26918
- letterSpacing: "0.05em"
26919
- },
26920
- children: "Hover"
26921
- }
26922
- ),
26923
- /* @__PURE__ */ jsx(
26924
- ColorInputRow,
26925
- {
26926
- label: "Background",
26927
- value: theme.variables[`${prefix}-bg-hover`] ?? "",
26928
- onChange: (val) => theme.setVariable(`${prefix}-bg-hover`, val),
26929
- variableOptions: buttonColorVariableOptions
26930
- }
26931
- ),
26932
- /* @__PURE__ */ jsx(
26933
- ColorInputRow,
26934
- {
26935
- label: "Text",
26936
- value: theme.variables[`${prefix}-text-hover`] ?? "",
26937
- onChange: (val) => theme.setVariable(`${prefix}-text-hover`, val),
26938
- variableOptions: buttonColorVariableOptions
26939
- }
26940
- ),
26941
- /* @__PURE__ */ jsx(
26942
- ColorInputRow,
26943
- {
26944
- label: "Border",
26945
- value: theme.variables[`${prefix}-border-hover`] ?? "",
26946
- onChange: (val) => theme.setVariable(`${prefix}-border-hover`, val),
26947
- variableOptions: buttonColorVariableOptions
26948
- }
26949
- )
26887
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Hover" }),
26888
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
26889
+ /* @__PURE__ */ jsx(
26890
+ ColorInputRow,
26891
+ {
26892
+ label: "Background",
26893
+ value: theme.variables[`${prefix}-bg-hover`] ?? "",
26894
+ onChange: (val) => theme.setVariable(`${prefix}-bg-hover`, val),
26895
+ variableOptions: buttonColorVariableOptions
26896
+ }
26897
+ ),
26898
+ /* @__PURE__ */ jsx(
26899
+ ColorInputRow,
26900
+ {
26901
+ label: "Text",
26902
+ value: theme.variables[`${prefix}-text-hover`] ?? "",
26903
+ onChange: (val) => theme.setVariable(`${prefix}-text-hover`, val),
26904
+ variableOptions: buttonColorVariableOptions
26905
+ }
26906
+ ),
26907
+ /* @__PURE__ */ jsx(
26908
+ ColorInputRow,
26909
+ {
26910
+ label: "Border",
26911
+ value: theme.variables[`${prefix}-border-hover`] ?? "",
26912
+ onChange: (val) => theme.setVariable(`${prefix}-border-hover`, val),
26913
+ variableOptions: buttonColorVariableOptions
26914
+ }
26915
+ )
26916
+ ] })
26950
26917
  ] })
26951
- ] })
26952
- ]
26953
- }
26954
- );
26918
+ ]
26919
+ }
26920
+ )
26921
+ ] });
26955
26922
  }
26956
26923
  function CustomButtonColorGroup({
26957
26924
  style,
@@ -26959,194 +26926,145 @@ function CustomButtonColorGroup({
26959
26926
  }) {
26960
26927
  const [expanded, setExpanded] = React13__default.useState(false);
26961
26928
  const [editing, setEditing] = React13__default.useState(false);
26962
- return /* @__PURE__ */ jsxs(
26963
- "div",
26964
- {
26965
- style: {
26966
- border: "1px solid #e5e7eb",
26967
- borderRadius: "8px",
26968
- marginBottom: "8px",
26969
- overflow: "hidden"
26970
- },
26971
- children: [
26972
- /* @__PURE__ */ jsxs(
26973
- "div",
26974
- {
26975
- style: {
26976
- display: "flex",
26977
- alignItems: "center",
26978
- justifyContent: "space-between",
26979
- width: "100%",
26980
- padding: "10px 12px",
26981
- background: "#f9fafb"
26982
- },
26983
- children: [
26984
- editing ? /* @__PURE__ */ jsx(
26985
- "input",
26986
- {
26987
- type: "text",
26988
- value: style.label,
26989
- onChange: (e) => theme.updateCustomButtonStyle(style.id, { label: e.target.value }),
26990
- onBlur: () => setEditing(false),
26991
- onKeyDown: (e) => e.key === "Enter" && setEditing(false),
26992
- autoFocus: true,
26993
- style: {
26994
- fontSize: "13px",
26995
- fontWeight: 600,
26996
- color: "#374151",
26997
- border: "1px solid #e5e7eb",
26998
- borderRadius: "4px",
26999
- padding: "2px 6px",
27000
- background: "#ffffff",
27001
- flex: 1
27002
- }
27003
- }
27004
- ) : /* @__PURE__ */ jsx(
27005
- "button",
27006
- {
27007
- onClick: () => setExpanded(!expanded),
27008
- style: {
27009
- flex: 1,
27010
- textAlign: "left",
27011
- fontSize: "13px",
27012
- fontWeight: 600,
27013
- color: "#374151",
27014
- background: "none",
27015
- border: "none",
27016
- cursor: "pointer"
27017
- },
27018
- onDoubleClick: (e) => {
27019
- e.stopPropagation();
27020
- setEditing(true);
27021
- },
27022
- children: style.label
27023
- }
27024
- ),
27025
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
27026
- /* @__PURE__ */ jsx(
27027
- "button",
27028
- {
27029
- onClick: () => theme.deleteCustomButtonStyle(style.id),
27030
- style: {
27031
- fontSize: "11px",
27032
- color: "#dc2626",
27033
- background: "none",
27034
- border: "none",
27035
- cursor: "pointer",
27036
- padding: "2px 6px"
27037
- },
27038
- children: "Delete"
27039
- }
27040
- ),
27041
- /* @__PURE__ */ jsx(
27042
- "button",
27043
- {
27044
- onClick: () => setExpanded(!expanded),
27045
- style: {
27046
- fontSize: "11px",
27047
- color: "#9ca3af",
27048
- background: "none",
27049
- border: "none",
27050
- cursor: "pointer",
27051
- transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
27052
- transition: "transform 150ms"
27053
- },
27054
- children: "\u25BC"
27055
- }
27056
- )
27057
- ] })
27058
- ]
27059
- }
27060
- ),
27061
- expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-1", children: [
27062
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
26929
+ const resolvedBg = resolveBrandingColor(style.bg);
26930
+ const resolvedText = resolveBrandingColor(style.text);
26931
+ const resolvedBorder = resolveBrandingColor(style.border);
26932
+ return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
26933
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
26934
+ editing ? /* @__PURE__ */ jsx(
26935
+ "input",
26936
+ {
26937
+ type: "text",
26938
+ value: style.label,
26939
+ onChange: (e) => theme.updateCustomButtonStyle(style.id, { label: e.target.value }),
26940
+ onBlur: () => setEditing(false),
26941
+ onKeyDown: (e) => e.key === "Enter" && setEditing(false),
26942
+ autoFocus: true,
26943
+ className: "text-sm font-semibold text-[var(--canvas-text)] border border-[var(--canvas-border)] rounded px-1.5 py-0.5 bg-white flex-1"
26944
+ }
26945
+ ) : /* @__PURE__ */ jsxs(
26946
+ "button",
26947
+ {
26948
+ onClick: () => setExpanded(!expanded),
26949
+ className: "flex items-center gap-3 flex-1 min-w-0 text-left cursor-pointer",
26950
+ onDoubleClick: (e) => {
26951
+ e.stopPropagation();
26952
+ setEditing(true);
26953
+ },
26954
+ children: [
27063
26955
  /* @__PURE__ */ jsx(
27064
- "span",
26956
+ "div",
27065
26957
  {
26958
+ className: "w-8 h-6 rounded border shrink-0 flex items-center justify-center text-xs",
27066
26959
  style: {
27067
- fontSize: "11px",
27068
- fontWeight: 600,
27069
- color: "#9ca3af",
27070
- textTransform: "uppercase",
27071
- letterSpacing: "0.05em"
26960
+ backgroundColor: resolvedBg === "transparent" ? "white" : resolvedBg,
26961
+ color: resolvedText,
26962
+ borderColor: resolvedBorder === "transparent" ? void 0 : resolvedBorder
27072
26963
  },
27073
- children: "Normal"
27074
- }
27075
- ),
27076
- /* @__PURE__ */ jsx(
27077
- ColorInputRow,
27078
- {
27079
- label: "Background",
27080
- value: style.bg,
27081
- onChange: (val) => theme.updateCustomButtonStyle(style.id, { bg: val }),
27082
- variableOptions: buttonColorVariableOptions
27083
- }
27084
- ),
27085
- /* @__PURE__ */ jsx(
27086
- ColorInputRow,
27087
- {
27088
- label: "Text",
27089
- value: style.text,
27090
- onChange: (val) => theme.updateCustomButtonStyle(style.id, { text: val }),
27091
- variableOptions: buttonColorVariableOptions
26964
+ children: "Aa"
27092
26965
  }
27093
26966
  ),
27094
- /* @__PURE__ */ jsx(
27095
- ColorInputRow,
27096
- {
27097
- label: "Border",
27098
- value: style.border,
27099
- onChange: (val) => theme.updateCustomButtonStyle(style.id, { border: val }),
27100
- variableOptions: buttonColorVariableOptions
27101
- }
26967
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--canvas-text)]", children: style.label })
26968
+ ]
26969
+ }
26970
+ ),
26971
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
26972
+ /* @__PURE__ */ jsx(
26973
+ "button",
26974
+ {
26975
+ onClick: () => theme.deleteCustomButtonStyle(style.id),
26976
+ className: "text-[11px] text-[var(--canvas-destructive)] bg-transparent border-none cursor-pointer px-1.5 py-0.5",
26977
+ children: "Delete"
26978
+ }
26979
+ ),
26980
+ /* @__PURE__ */ jsx(
26981
+ ChevronDown,
26982
+ {
26983
+ onClick: () => setExpanded(!expanded),
26984
+ className: cn(
26985
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200 cursor-pointer",
26986
+ expanded && "rotate-180"
27102
26987
  )
26988
+ }
26989
+ )
26990
+ ] })
26991
+ ] }),
26992
+ /* @__PURE__ */ jsxs(
26993
+ "div",
26994
+ {
26995
+ className: cn(
26996
+ "overflow-hidden transition-all duration-200 ease-out",
26997
+ expanded ? "mt-3 max-h-[400px] opacity-100" : "max-h-0 opacity-0"
26998
+ ),
26999
+ children: [
27000
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
27001
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Normal" }),
27002
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
27003
+ /* @__PURE__ */ jsx(
27004
+ ColorInputRow,
27005
+ {
27006
+ label: "Background",
27007
+ value: style.bg,
27008
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { bg: val }),
27009
+ variableOptions: buttonColorVariableOptions
27010
+ }
27011
+ ),
27012
+ /* @__PURE__ */ jsx(
27013
+ ColorInputRow,
27014
+ {
27015
+ label: "Text",
27016
+ value: style.text,
27017
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { text: val }),
27018
+ variableOptions: buttonColorVariableOptions
27019
+ }
27020
+ ),
27021
+ /* @__PURE__ */ jsx(
27022
+ ColorInputRow,
27023
+ {
27024
+ label: "Border",
27025
+ value: style.border,
27026
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { border: val }),
27027
+ variableOptions: buttonColorVariableOptions
27028
+ }
27029
+ )
27030
+ ] })
27103
27031
  ] }),
27104
27032
  /* @__PURE__ */ jsxs("div", { children: [
27105
- /* @__PURE__ */ jsx(
27106
- "span",
27107
- {
27108
- style: {
27109
- fontSize: "11px",
27110
- fontWeight: 600,
27111
- color: "#9ca3af",
27112
- textTransform: "uppercase",
27113
- letterSpacing: "0.05em"
27114
- },
27115
- children: "Hover"
27116
- }
27117
- ),
27118
- /* @__PURE__ */ jsx(
27119
- ColorInputRow,
27120
- {
27121
- label: "Background",
27122
- value: style.bgHover,
27123
- onChange: (val) => theme.updateCustomButtonStyle(style.id, { bgHover: val }),
27124
- variableOptions: buttonColorVariableOptions
27125
- }
27126
- ),
27127
- /* @__PURE__ */ jsx(
27128
- ColorInputRow,
27129
- {
27130
- label: "Text",
27131
- value: style.textHover,
27132
- onChange: (val) => theme.updateCustomButtonStyle(style.id, { textHover: val }),
27133
- variableOptions: buttonColorVariableOptions
27134
- }
27135
- ),
27136
- /* @__PURE__ */ jsx(
27137
- ColorInputRow,
27138
- {
27139
- label: "Border",
27140
- value: style.borderHover,
27141
- onChange: (val) => theme.updateCustomButtonStyle(style.id, { borderHover: val }),
27142
- variableOptions: buttonColorVariableOptions
27143
- }
27144
- )
27033
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Hover" }),
27034
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
27035
+ /* @__PURE__ */ jsx(
27036
+ ColorInputRow,
27037
+ {
27038
+ label: "Background",
27039
+ value: style.bgHover,
27040
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { bgHover: val }),
27041
+ variableOptions: buttonColorVariableOptions
27042
+ }
27043
+ ),
27044
+ /* @__PURE__ */ jsx(
27045
+ ColorInputRow,
27046
+ {
27047
+ label: "Text",
27048
+ value: style.textHover,
27049
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { textHover: val }),
27050
+ variableOptions: buttonColorVariableOptions
27051
+ }
27052
+ ),
27053
+ /* @__PURE__ */ jsx(
27054
+ ColorInputRow,
27055
+ {
27056
+ label: "Border",
27057
+ value: style.borderHover,
27058
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { borderHover: val }),
27059
+ variableOptions: buttonColorVariableOptions
27060
+ }
27061
+ )
27062
+ ] })
27145
27063
  ] })
27146
- ] })
27147
- ]
27148
- }
27149
- );
27064
+ ]
27065
+ }
27066
+ )
27067
+ ] });
27150
27068
  }
27151
27069
  var inputSizeConfigs = [
27152
27070
  { id: "small", label: "Small", prefix: "--input-small" },