canvas-ui-sdk 0.3.10 → 0.3.12

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 +767 -1156
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -25980,11 +25980,20 @@ function ImageUploadRow({
25980
25980
  );
25981
25981
  }
25982
25982
  var typographyColorOptions = [
25983
+ // Text colors
25983
25984
  { value: "var(--canvas-text)", label: "Text" },
25984
25985
  { value: "var(--canvas-text-muted)", label: "Text Muted" },
25985
25986
  { value: "var(--canvas-text-placeholder)", label: "Placeholder" },
25987
+ // Brand colors
25986
25988
  { value: "var(--canvas-primary)", label: "Primary" },
25987
- { value: "var(--canvas-destructive)", label: "Destructive" }
25989
+ { value: "var(--canvas-primary-dark)", label: "Primary Dark" },
25990
+ { value: "var(--canvas-primary-foreground)", label: "Primary Text" },
25991
+ { value: "var(--canvas-destructive)", label: "Destructive" },
25992
+ // Sidebar colors
25993
+ { value: "var(--canvas-sidebar-light-text)", label: "Sidebar Light Text" },
25994
+ { value: "var(--canvas-sidebar-light-active-text)", label: "Sidebar Light Active Text" },
25995
+ { value: "var(--canvas-sidebar-dark-text)", label: "Sidebar Dark Text" },
25996
+ { value: "var(--canvas-sidebar-dark-active-text)", label: "Sidebar Dark Active Text" }
25988
25997
  ];
25989
25998
  var generalPurposeStyles = [
25990
25999
  { prefix: "h1", label: "H1", description: "Hero headlines" },
@@ -26000,119 +26009,53 @@ var generalPurposeStyles = [
26000
26009
  { prefix: "body-xs", label: "Body XS", description: "Fine print, labels" }
26001
26010
  ];
26002
26011
  var componentStyles = [
26003
- { prefix: "menu-label", label: "Menu Label" },
26004
- { prefix: "sidebar-label", label: "Sidebar Label" },
26005
- { prefix: "sidebar-tab", label: "Sidebar Tab" },
26006
- { prefix: "sidebar-subtab", label: "Sidebar Subtab" },
26007
- { prefix: "header", label: "Header" },
26008
- { prefix: "input-label", label: "Input Label" },
26009
- { prefix: "button", label: "Button" }
26012
+ { prefix: "menu-label", label: "Menu Label", description: "Expandable menu items" },
26013
+ { prefix: "sidebar-label", label: "Sidebar Label", description: "Section titles" },
26014
+ { prefix: "sidebar-tab", label: "Sidebar Tab", description: "Navigation items" },
26015
+ { prefix: "sidebar-subtab", label: "Sidebar Subtab", description: "Nested navigation" },
26016
+ { prefix: "header", label: "Header", description: "Header navigation text" },
26017
+ { prefix: "input-label", label: "Input Label", description: "Form field labels" },
26018
+ { prefix: "button", label: "Button", description: "All button labels" }
26010
26019
  ];
26011
26020
  function TypographyPanel({ theme }) {
26012
26021
  useEffect(() => {
26013
26022
  preloadAllFonts();
26014
26023
  }, []);
26015
26024
  const globalFont = theme.variables["--typo-global-font"] || "Inter";
26016
- return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, style: { padding: "16px" }, children: [
26017
- /* @__PURE__ */ jsxs(
26018
- "div",
26019
- {
26020
- style: {
26021
- display: "flex",
26022
- alignItems: "center",
26023
- justifyContent: "space-between",
26024
- padding: "12px",
26025
- background: "#f9fafb",
26026
- borderRadius: "8px",
26027
- border: "1px solid #e5e7eb",
26028
- marginBottom: "20px"
26029
- },
26030
- children: [
26031
- /* @__PURE__ */ jsxs("div", { children: [
26032
- /* @__PURE__ */ jsx(
26033
- "div",
26034
- {
26035
- style: {
26036
- fontSize: "13px",
26037
- fontWeight: 600,
26038
- color: "#374151"
26039
- },
26040
- children: "Global Font"
26041
- }
26042
- ),
26043
- /* @__PURE__ */ jsx(
26044
- "div",
26045
- {
26046
- style: {
26047
- fontSize: "11px",
26048
- color: "#6b7280",
26049
- marginTop: "2px"
26050
- },
26051
- children: "Default font for all text styles"
26052
- }
26053
- )
26054
- ] }),
26055
- /* @__PURE__ */ jsx(
26056
- "select",
26057
- {
26058
- value: globalFont,
26059
- onChange: (e) => {
26060
- const v = e.target.value;
26061
- loadGoogleFont(v);
26062
- theme.setVariable("--typo-global-font", v);
26063
- },
26064
- style: {
26065
- height: "32px",
26066
- fontSize: "12px",
26067
- padding: "0 8px",
26068
- border: "1px solid #e5e7eb",
26069
- borderRadius: "6px",
26070
- color: "#374151",
26071
- background: "#ffffff",
26072
- cursor: "pointer",
26073
- maxWidth: "180px"
26074
- },
26075
- children: fontOptions.map((f) => /* @__PURE__ */ jsx(
26076
- "option",
26077
- {
26078
- value: f.value,
26079
- style: { fontFamily: f.value },
26080
- children: f.label
26081
- },
26082
- f.value
26083
- ))
26084
- }
26085
- )
26086
- ]
26087
- }
26088
- ),
26089
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
26090
- /* @__PURE__ */ jsx(
26091
- "h3",
26092
- {
26093
- style: {
26094
- fontSize: "11px",
26095
- fontWeight: 600,
26096
- color: "#6b7280",
26097
- textTransform: "uppercase",
26098
- letterSpacing: "0.05em",
26099
- marginBottom: "4px"
26100
- },
26101
- children: "General Purpose"
26102
- }
26103
- ),
26104
- /* @__PURE__ */ jsx(
26105
- "p",
26025
+ return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "p-4", children: [
26026
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 bg-[var(--canvas-surface)] rounded-lg border border-[var(--canvas-border)] mb-5", children: [
26027
+ /* @__PURE__ */ jsxs("div", { children: [
26028
+ /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--canvas-text)]", children: "Global Font" }),
26029
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-[var(--canvas-text-muted)] mt-0.5", children: "Default font for all text styles" })
26030
+ ] }),
26031
+ /* @__PURE__ */ jsxs(
26032
+ Select,
26106
26033
  {
26107
- style: {
26108
- fontSize: "11px",
26109
- color: "#6b7280",
26110
- marginBottom: "12px"
26034
+ value: globalFont,
26035
+ onValueChange: (v) => {
26036
+ loadGoogleFont(v);
26037
+ theme.setVariable("--typo-global-font", v);
26111
26038
  },
26112
- children: "Headings and body text used across the application."
26039
+ children: [
26040
+ /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", className: "w-44 bg-white", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
26041
+ /* @__PURE__ */ jsx(SelectContent, { children: fontOptions.map((f) => /* @__PURE__ */ jsx(
26042
+ SelectItem,
26043
+ {
26044
+ value: f.value,
26045
+ className: "text-xs",
26046
+ style: { fontFamily: f.value },
26047
+ children: f.label
26048
+ },
26049
+ f.value
26050
+ )) })
26051
+ ]
26113
26052
  }
26114
- ),
26115
- /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: generalPurposeStyles.map((s) => /* @__PURE__ */ jsx(
26053
+ )
26054
+ ] }),
26055
+ /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
26056
+ /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide mb-1", children: "General Purpose" }),
26057
+ /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[var(--canvas-text-muted)] mb-3", children: "Headings and body text used across the application." }),
26058
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: generalPurposeStyles.map((s) => /* @__PURE__ */ jsx(
26116
26059
  TypographyRow,
26117
26060
  {
26118
26061
  config: s,
@@ -26124,32 +26067,9 @@ function TypographyPanel({ theme }) {
26124
26067
  )) })
26125
26068
  ] }),
26126
26069
  /* @__PURE__ */ jsxs("div", { children: [
26127
- /* @__PURE__ */ jsx(
26128
- "h3",
26129
- {
26130
- style: {
26131
- fontSize: "11px",
26132
- fontWeight: 600,
26133
- color: "#6b7280",
26134
- textTransform: "uppercase",
26135
- letterSpacing: "0.05em",
26136
- marginBottom: "4px"
26137
- },
26138
- children: "Component-Specific"
26139
- }
26140
- ),
26141
- /* @__PURE__ */ jsx(
26142
- "p",
26143
- {
26144
- style: {
26145
- fontSize: "11px",
26146
- color: "#6b7280",
26147
- marginBottom: "12px"
26148
- },
26149
- children: "Typography styles scoped to specific UI components."
26150
- }
26151
- ),
26152
- /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: componentStyles.map((s) => /* @__PURE__ */ jsx(
26070
+ /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide mb-1", children: "Component-Specific" }),
26071
+ /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[var(--canvas-text-muted)] mb-3", children: "Typography styles scoped to specific UI components." }),
26072
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: componentStyles.map((s) => /* @__PURE__ */ jsx(
26153
26073
  TypographyRow,
26154
26074
  {
26155
26075
  config: s,
@@ -26171,505 +26091,271 @@ function TypographyRow({
26171
26091
  const [expanded, setExpanded] = useState(false);
26172
26092
  const { prefix, label, description } = config;
26173
26093
  const varKey = (suffix) => `--typo-${prefix}-${suffix}`;
26174
- return /* @__PURE__ */ jsxs(
26175
- "div",
26176
- {
26177
- style: {
26178
- border: "1px solid #e5e7eb",
26179
- borderRadius: "8px",
26180
- overflow: "hidden"
26181
- },
26182
- children: [
26183
- /* @__PURE__ */ jsxs(
26184
- "button",
26185
- {
26186
- onClick: () => setExpanded(!expanded),
26187
- style: {
26188
- display: "flex",
26189
- alignItems: "center",
26190
- justifyContent: "space-between",
26191
- width: "100%",
26192
- padding: "10px 12px",
26193
- background: "#f9fafb",
26194
- border: "none",
26195
- cursor: "pointer",
26196
- fontSize: "13px",
26197
- fontWeight: 600,
26198
- color: "#374151"
26199
- },
26200
- children: [
26201
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "8px" }, children: [
26202
- /* @__PURE__ */ jsx("span", { children: label }),
26203
- description && /* @__PURE__ */ jsx(
26204
- "span",
26205
- {
26206
- style: {
26207
- fontSize: "11px",
26208
- fontWeight: 400,
26209
- color: "#6b7280"
26210
- },
26211
- children: description
26212
- }
26213
- )
26214
- ] }),
26215
- /* @__PURE__ */ jsx(
26216
- "span",
26094
+ const font = theme.variables[varKey("font")] ?? "";
26095
+ const weight = theme.variables[varKey("weight")] ?? defaultTypography[varKey("weight")] ?? "";
26096
+ const spacing = theme.variables[varKey("spacing")] ?? defaultTypography[varKey("spacing")] ?? "";
26097
+ const color = theme.variables[varKey("color")] ?? defaultTypography[varKey("color")] ?? "var(--canvas-text)";
26098
+ const effectiveFont = font || globalFont;
26099
+ const resolvedColor = resolveBrandingColor(color);
26100
+ return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
26101
+ /* @__PURE__ */ jsxs(
26102
+ "button",
26103
+ {
26104
+ type: "button",
26105
+ onClick: () => setExpanded(!expanded),
26106
+ className: "w-full flex items-center justify-between gap-3 text-left cursor-pointer",
26107
+ children: [
26108
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
26109
+ /* @__PURE__ */ jsx(
26110
+ "span",
26111
+ {
26112
+ className: "block truncate",
26113
+ style: {
26114
+ fontFamily: effectiveFont,
26115
+ fontWeight: weight || void 0,
26116
+ letterSpacing: spacing || void 0,
26117
+ color: resolvedColor,
26118
+ fontSize: "14px"
26119
+ },
26120
+ children: label
26121
+ }
26122
+ ),
26123
+ description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)] mt-0.5", children: description })
26124
+ ] }),
26125
+ /* @__PURE__ */ jsx(
26126
+ ChevronDown,
26127
+ {
26128
+ className: cn(
26129
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
26130
+ expanded && "rotate-180"
26131
+ )
26132
+ }
26133
+ )
26134
+ ]
26135
+ }
26136
+ ),
26137
+ /* @__PURE__ */ jsxs(
26138
+ "div",
26139
+ {
26140
+ className: cn(
26141
+ "overflow-hidden transition-all duration-200 ease-out",
26142
+ expanded ? "mt-3 max-h-[500px] opacity-100" : "max-h-0 opacity-0"
26143
+ ),
26144
+ children: [
26145
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
26146
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26147
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font Family" }),
26148
+ /* @__PURE__ */ jsxs(
26149
+ Select,
26217
26150
  {
26218
- style: {
26219
- fontSize: "11px",
26220
- color: "#9ca3af",
26221
- transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
26222
- transition: "transform 150ms"
26151
+ value: font || "__global__",
26152
+ onValueChange: (v) => {
26153
+ if (v === "__global__") {
26154
+ theme.setVariable(varKey("font"), "");
26155
+ } else {
26156
+ loadGoogleFont(v);
26157
+ theme.setVariable(varKey("font"), v);
26158
+ }
26223
26159
  },
26224
- children: "\u25BC"
26160
+ children: [
26161
+ /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", className: "bg-white", children: /* @__PURE__ */ jsx(SelectValue, { children: font ? font : `Use Global (${globalFont})` }) }),
26162
+ /* @__PURE__ */ jsxs(SelectContent, { children: [
26163
+ /* @__PURE__ */ jsxs(SelectItem, { value: "__global__", className: "text-xs", children: [
26164
+ "Use Global (",
26165
+ globalFont,
26166
+ ")"
26167
+ ] }),
26168
+ fontOptions.map((f) => /* @__PURE__ */ jsx(
26169
+ SelectItem,
26170
+ {
26171
+ value: f.value,
26172
+ className: "text-xs",
26173
+ style: { fontFamily: f.value },
26174
+ children: f.label
26175
+ },
26176
+ f.value
26177
+ ))
26178
+ ] })
26179
+ ]
26225
26180
  }
26226
26181
  )
26227
- ]
26228
- }
26229
- ),
26230
- expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "12px" }, children: [
26231
- /* @__PURE__ */ jsxs(
26232
- "div",
26182
+ ] }),
26183
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26184
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Size" }),
26185
+ /* @__PURE__ */ jsx(
26186
+ TextInput,
26187
+ {
26188
+ inputSize: "sm",
26189
+ value: theme.variables[varKey("size")] ?? "",
26190
+ onChange: (e) => theme.setVariable(varKey("size"), e.target.value),
26191
+ className: "w-full font-mono",
26192
+ placeholder: "e.g. 16px"
26193
+ }
26194
+ )
26195
+ ] })
26196
+ ] }),
26197
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
26198
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26199
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Mobile Size" }),
26200
+ /* @__PURE__ */ jsx(
26201
+ TextInput,
26202
+ {
26203
+ inputSize: "sm",
26204
+ value: theme.variables[varKey("size-mobile")] ?? "",
26205
+ onChange: (e) => theme.setVariable(varKey("size-mobile"), e.target.value),
26206
+ className: "w-full font-mono",
26207
+ placeholder: "e.g. 14px"
26208
+ }
26209
+ )
26210
+ ] }),
26211
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26212
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Weight" }),
26213
+ /* @__PURE__ */ jsxs(
26214
+ Select,
26215
+ {
26216
+ value: theme.variables[varKey("weight")] ?? "",
26217
+ onValueChange: (v) => theme.setVariable(varKey("weight"), v),
26218
+ children: [
26219
+ /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", className: "bg-white", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Default" }) }),
26220
+ /* @__PURE__ */ jsx(SelectContent, { children: fontWeightOptions.map((w) => /* @__PURE__ */ jsx(SelectItem, { value: w.value, className: "text-xs", children: w.label }, w.value)) })
26221
+ ]
26222
+ }
26223
+ )
26224
+ ] })
26225
+ ] }),
26226
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
26227
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26228
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Letter Spacing" }),
26229
+ /* @__PURE__ */ jsx(
26230
+ TextInput,
26231
+ {
26232
+ inputSize: "sm",
26233
+ value: theme.variables[varKey("spacing")] ?? "",
26234
+ onChange: (e) => theme.setVariable(varKey("spacing"), e.target.value),
26235
+ className: "w-full font-mono",
26236
+ placeholder: "e.g. -0.02em"
26237
+ }
26238
+ )
26239
+ ] }),
26240
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26241
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Line Height" }),
26242
+ /* @__PURE__ */ jsx(
26243
+ TextInput,
26244
+ {
26245
+ inputSize: "sm",
26246
+ value: theme.variables[varKey("line-height")] ?? "",
26247
+ onChange: (e) => theme.setVariable(varKey("line-height"), e.target.value),
26248
+ className: "w-full font-mono",
26249
+ placeholder: "e.g. 1.5"
26250
+ }
26251
+ )
26252
+ ] })
26253
+ ] }),
26254
+ /* @__PURE__ */ jsx(
26255
+ ColorInputRow,
26233
26256
  {
26234
- style: {
26235
- display: "grid",
26236
- gridTemplateColumns: "1fr 1fr",
26237
- gap: "8px",
26238
- marginBottom: "8px"
26239
- },
26257
+ label: "Color",
26258
+ value: theme.variables[varKey("color")] ?? "var(--canvas-text)",
26259
+ onChange: (val) => theme.setVariable(varKey("color"), val),
26260
+ variableOptions: typographyColorOptions
26261
+ }
26262
+ ),
26263
+ hasMutedColor && /* @__PURE__ */ jsx(
26264
+ ColorInputRow,
26265
+ {
26266
+ label: "Muted Color",
26267
+ value: theme.variables[varKey("color-muted")] ?? "var(--canvas-text-muted)",
26268
+ onChange: (val) => theme.setVariable(varKey("color-muted"), val),
26269
+ variableOptions: typographyColorOptions
26270
+ }
26271
+ ),
26272
+ /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsxs(
26273
+ "button",
26274
+ {
26275
+ onClick: () => theme.resetCategory("--typo-" + prefix),
26276
+ className: "text-[11px] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] bg-transparent border-none cursor-pointer px-2 py-1 rounded hover:bg-[var(--canvas-surface)]",
26240
26277
  children: [
26241
- /* @__PURE__ */ jsxs("div", { children: [
26242
- /* @__PURE__ */ jsx(
26243
- "label",
26244
- {
26245
- style: {
26246
- display: "block",
26247
- fontSize: "11px",
26248
- color: "#6b7280",
26249
- marginBottom: "4px"
26250
- },
26251
- children: "Font Family"
26252
- }
26253
- ),
26254
- /* @__PURE__ */ jsxs(
26255
- "select",
26256
- {
26257
- value: theme.variables[varKey("font")] ?? "",
26258
- onChange: (e) => {
26259
- const v = e.target.value;
26260
- if (v) {
26261
- loadGoogleFont(v);
26262
- theme.setVariable(varKey("font"), v);
26263
- } else {
26264
- theme.setVariable(varKey("font"), "");
26265
- }
26266
- },
26267
- style: {
26268
- width: "100%",
26269
- height: "30px",
26270
- fontSize: "12px",
26271
- padding: "0 6px",
26272
- border: "1px solid #e5e7eb",
26273
- borderRadius: "4px",
26274
- color: "#374151",
26275
- background: "#ffffff",
26276
- cursor: "pointer"
26277
- },
26278
- children: [
26279
- /* @__PURE__ */ jsxs("option", { value: "", style: { fontFamily: globalFont }, children: [
26280
- "Use Global (",
26281
- globalFont,
26282
- ")"
26283
- ] }),
26284
- fontOptions.map((f) => /* @__PURE__ */ jsx(
26285
- "option",
26286
- {
26287
- value: f.value,
26288
- style: { fontFamily: f.value },
26289
- children: f.label
26290
- },
26291
- f.value
26292
- ))
26293
- ]
26294
- }
26295
- )
26296
- ] }),
26297
- /* @__PURE__ */ jsxs("div", { children: [
26298
- /* @__PURE__ */ jsx(
26299
- "label",
26300
- {
26301
- style: {
26302
- display: "block",
26303
- fontSize: "11px",
26304
- color: "#6b7280",
26305
- marginBottom: "4px"
26306
- },
26307
- children: "Size"
26308
- }
26309
- ),
26310
- /* @__PURE__ */ jsx(
26311
- "input",
26312
- {
26313
- type: "text",
26314
- value: theme.variables[varKey("size")] ?? "",
26315
- onChange: (e) => theme.setVariable(varKey("size"), e.target.value),
26316
- placeholder: "e.g. 16px",
26317
- style: {
26318
- width: "100%",
26319
- height: "30px",
26320
- fontSize: "12px",
26321
- fontFamily: "monospace",
26322
- padding: "0 8px",
26323
- border: "1px solid #e5e7eb",
26324
- borderRadius: "4px",
26325
- color: "#374151",
26326
- background: "#ffffff",
26327
- boxSizing: "border-box"
26328
- }
26329
- }
26330
- )
26331
- ] })
26332
- ]
26333
- }
26334
- ),
26335
- /* @__PURE__ */ jsxs(
26336
- "div",
26337
- {
26338
- style: {
26339
- display: "grid",
26340
- gridTemplateColumns: "1fr 1fr",
26341
- gap: "8px",
26342
- marginBottom: "8px"
26343
- },
26344
- children: [
26345
- /* @__PURE__ */ jsxs("div", { children: [
26346
- /* @__PURE__ */ jsx(
26347
- "label",
26348
- {
26349
- style: {
26350
- display: "block",
26351
- fontSize: "11px",
26352
- color: "#6b7280",
26353
- marginBottom: "4px"
26354
- },
26355
- children: "Mobile Size"
26356
- }
26357
- ),
26358
- /* @__PURE__ */ jsx(
26359
- "input",
26360
- {
26361
- type: "text",
26362
- value: theme.variables[varKey("size-mobile")] ?? "",
26363
- onChange: (e) => theme.setVariable(varKey("size-mobile"), e.target.value),
26364
- placeholder: "e.g. 14px",
26365
- style: {
26366
- width: "100%",
26367
- height: "30px",
26368
- fontSize: "12px",
26369
- fontFamily: "monospace",
26370
- padding: "0 8px",
26371
- border: "1px solid #e5e7eb",
26372
- borderRadius: "4px",
26373
- color: "#374151",
26374
- background: "#ffffff",
26375
- boxSizing: "border-box"
26376
- }
26377
- }
26378
- )
26379
- ] }),
26380
- /* @__PURE__ */ jsxs("div", { children: [
26381
- /* @__PURE__ */ jsx(
26382
- "label",
26383
- {
26384
- style: {
26385
- display: "block",
26386
- fontSize: "11px",
26387
- color: "#6b7280",
26388
- marginBottom: "4px"
26389
- },
26390
- children: "Weight"
26391
- }
26392
- ),
26393
- /* @__PURE__ */ jsxs(
26394
- "select",
26395
- {
26396
- value: theme.variables[varKey("weight")] ?? "",
26397
- onChange: (e) => theme.setVariable(varKey("weight"), e.target.value),
26398
- style: {
26399
- width: "100%",
26400
- height: "30px",
26401
- fontSize: "12px",
26402
- padding: "0 6px",
26403
- border: "1px solid #e5e7eb",
26404
- borderRadius: "4px",
26405
- color: "#374151",
26406
- background: "#ffffff",
26407
- cursor: "pointer"
26408
- },
26409
- children: [
26410
- /* @__PURE__ */ jsx("option", { value: "", children: "Default" }),
26411
- fontWeightOptions.map((w) => /* @__PURE__ */ jsx("option", { value: w.value, children: w.label }, w.value))
26412
- ]
26413
- }
26414
- )
26415
- ] })
26416
- ]
26417
- }
26418
- ),
26419
- /* @__PURE__ */ jsxs(
26420
- "div",
26421
- {
26422
- style: {
26423
- display: "grid",
26424
- gridTemplateColumns: "1fr 1fr",
26425
- gap: "8px",
26426
- marginBottom: "8px"
26427
- },
26428
- children: [
26429
- /* @__PURE__ */ jsxs("div", { children: [
26430
- /* @__PURE__ */ jsx(
26431
- "label",
26432
- {
26433
- style: {
26434
- display: "block",
26435
- fontSize: "11px",
26436
- color: "#6b7280",
26437
- marginBottom: "4px"
26438
- },
26439
- children: "Letter Spacing"
26440
- }
26441
- ),
26442
- /* @__PURE__ */ jsx(
26443
- "input",
26444
- {
26445
- type: "text",
26446
- value: theme.variables[varKey("spacing")] ?? "",
26447
- onChange: (e) => theme.setVariable(varKey("spacing"), e.target.value),
26448
- placeholder: "e.g. -0.02em",
26449
- style: {
26450
- width: "100%",
26451
- height: "30px",
26452
- fontSize: "12px",
26453
- fontFamily: "monospace",
26454
- padding: "0 8px",
26455
- border: "1px solid #e5e7eb",
26456
- borderRadius: "4px",
26457
- color: "#374151",
26458
- background: "#ffffff",
26459
- boxSizing: "border-box"
26460
- }
26461
- }
26462
- )
26463
- ] }),
26464
- /* @__PURE__ */ jsxs("div", { children: [
26465
- /* @__PURE__ */ jsx(
26466
- "label",
26467
- {
26468
- style: {
26469
- display: "block",
26470
- fontSize: "11px",
26471
- color: "#6b7280",
26472
- marginBottom: "4px"
26473
- },
26474
- children: "Line Height"
26475
- }
26476
- ),
26477
- /* @__PURE__ */ jsx(
26478
- "input",
26479
- {
26480
- type: "text",
26481
- value: theme.variables[varKey("line-height")] ?? "",
26482
- onChange: (e) => theme.setVariable(varKey("line-height"), e.target.value),
26483
- placeholder: "e.g. 1.5",
26484
- style: {
26485
- width: "100%",
26486
- height: "30px",
26487
- fontSize: "12px",
26488
- fontFamily: "monospace",
26489
- padding: "0 8px",
26490
- border: "1px solid #e5e7eb",
26491
- borderRadius: "4px",
26492
- color: "#374151",
26493
- background: "#ffffff",
26494
- boxSizing: "border-box"
26495
- }
26496
- }
26497
- )
26498
- ] })
26278
+ "Reset ",
26279
+ label
26499
26280
  ]
26500
26281
  }
26501
- ),
26502
- /* @__PURE__ */ jsx(
26503
- ColorInputRow,
26504
- {
26505
- label: "Color",
26506
- value: theme.variables[varKey("color")] ?? "var(--canvas-text)",
26507
- onChange: (val) => theme.setVariable(varKey("color"), val),
26508
- variableOptions: typographyColorOptions
26509
- }
26510
- ),
26511
- hasMutedColor && /* @__PURE__ */ jsx(
26512
- ColorInputRow,
26513
- {
26514
- label: "Muted Color",
26515
- value: theme.variables[varKey("color-muted")] ?? "var(--canvas-text-muted)",
26516
- onChange: (val) => theme.setVariable(varKey("color-muted"), val),
26517
- variableOptions: typographyColorOptions
26518
- }
26519
- ),
26520
- /* @__PURE__ */ jsx(
26521
- "div",
26522
- {
26523
- style: {
26524
- display: "flex",
26525
- justifyContent: "flex-end",
26526
- marginTop: "8px"
26527
- },
26528
- children: /* @__PURE__ */ jsxs(
26529
- "button",
26530
- {
26531
- onClick: () => theme.resetCategory("--typo-" + prefix),
26532
- style: {
26533
- fontSize: "11px",
26534
- color: "#6b7280",
26535
- background: "none",
26536
- border: "none",
26537
- cursor: "pointer",
26538
- padding: "4px 8px",
26539
- borderRadius: "4px"
26540
- },
26541
- onMouseEnter: (e) => {
26542
- e.currentTarget.style.color = "#374151";
26543
- e.currentTarget.style.background = "#f3f4f6";
26544
- },
26545
- onMouseLeave: (e) => {
26546
- e.currentTarget.style.color = "#6b7280";
26547
- e.currentTarget.style.background = "none";
26548
- },
26549
- children: [
26550
- "Reset ",
26551
- label
26552
- ]
26553
- }
26554
- )
26555
- }
26556
- )
26557
- ] })
26558
- ]
26559
- }
26560
- );
26282
+ ) })
26283
+ ]
26284
+ }
26285
+ )
26286
+ ] });
26561
26287
  }
26562
26288
  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" }
26289
+ { id: "mini", label: "Mini", description: "28px height, 12px font", prefix: "--btn-mini" },
26290
+ { id: "small", label: "Small", description: "32px height, 14px font", prefix: "--btn-small" },
26291
+ { id: "standard", label: "Standard", description: "40px height, 14px font", prefix: "--btn-standard" },
26292
+ { id: "large", label: "Large", description: "48px height, 16px font", prefix: "--btn-large" }
26567
26293
  ];
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" }
26294
+ var fontWeightOptions2 = [
26295
+ { value: "300", label: "Light (300)" },
26296
+ { value: "400", label: "Regular (400)" },
26297
+ { value: "500", label: "Medium (500)" },
26298
+ { value: "600", label: "Semibold (600)" },
26299
+ { value: "700", label: "Bold (700)" },
26300
+ { value: "800", label: "Extra Bold (800)" }
26576
26301
  ];
26577
26302
  var buttonColorVariableOptions = [
26303
+ // Brand colors
26578
26304
  { value: "var(--canvas-primary)", label: "Primary" },
26579
- { value: "var(--canvas-primary-dark)", label: "Primary Dark" },
26580
26305
  { value: "var(--canvas-primary-foreground)", label: "Primary Text" },
26306
+ { value: "var(--canvas-primary-dark)", label: "Primary Dark" },
26307
+ { value: "var(--canvas-destructive)", label: "Destructive" },
26308
+ // Background colors
26581
26309
  { value: "var(--canvas-background)", label: "Background" },
26582
26310
  { value: "var(--canvas-surface)", label: "Surface" },
26583
26311
  { value: "var(--canvas-surface-hover)", label: "Surface Hover" },
26584
26312
  { value: "var(--canvas-surface-brand)", label: "Brand Surface" },
26585
26313
  { value: "var(--canvas-outline-bg)", label: "Outline Bg" },
26314
+ { value: "var(--canvas-flair-bg)", label: "Flair Background" },
26315
+ // Text colors
26586
26316
  { value: "var(--canvas-text)", label: "Text" },
26587
26317
  { value: "var(--canvas-text-muted)", label: "Text Muted" },
26318
+ { value: "var(--canvas-text-placeholder)", label: "Text Placeholder" },
26319
+ // Border colors
26588
26320
  { value: "var(--canvas-border)", label: "Border" },
26589
26321
  { value: "var(--canvas-border-input)", label: "Input Border" },
26590
- { value: "var(--canvas-destructive)", label: "Destructive" },
26322
+ { value: "var(--canvas-border-input-focus)", label: "Input Border Focused" },
26323
+ { value: "var(--canvas-border-input-invalid)", label: "Input Border Invalid" },
26324
+ { value: "var(--canvas-border-disabled)", label: "Border Disabled" },
26325
+ // Sidebar colors - Light
26326
+ { value: "var(--canvas-sidebar-light-bg)", label: "Sidebar Light BG" },
26327
+ { value: "var(--canvas-sidebar-light-active-bg)", label: "Sidebar Light Active BG" },
26328
+ { value: "var(--canvas-sidebar-light-active-text)", label: "Sidebar Light Active Text" },
26329
+ { value: "var(--canvas-sidebar-light-text)", label: "Sidebar Light Text" },
26330
+ // Sidebar colors - Dark
26331
+ { value: "var(--canvas-sidebar-dark-bg)", label: "Sidebar Dark BG" },
26332
+ { value: "var(--canvas-sidebar-dark-active-bg)", label: "Sidebar Dark Active BG" },
26333
+ { value: "var(--canvas-sidebar-dark-active-text)", label: "Sidebar Dark Active Text" },
26334
+ { value: "var(--canvas-sidebar-dark-text)", label: "Sidebar Dark Text" },
26335
+ // Special
26591
26336
  { value: "var(--canvas-transparent)", label: "Transparent" }
26592
26337
  ];
26593
26338
  function ButtonsPanel({ theme }) {
26594
26339
  return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-5 p-4", children: [
26595
26340
  /* @__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
- ),
26341
+ /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide mb-3", children: "Button Sizes" }),
26610
26342
  buttonSizeConfigs.map((size) => /* @__PURE__ */ jsx(SizeGroup, { size, theme }, size.id))
26611
26343
  ] }),
26612
26344
  /* @__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: [
26345
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
26346
+ /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide", children: "Color Styles" }),
26661
26347
  /* @__PURE__ */ jsx(
26662
- "h4",
26348
+ "button",
26663
26349
  {
26664
- style: {
26665
- fontSize: "11px",
26666
- fontWeight: 600,
26667
- color: "#6b7280",
26668
- marginBottom: "12px"
26669
- },
26670
- children: "Custom Styles"
26350
+ onClick: theme.addCustomButtonStyle,
26351
+ 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)]",
26352
+ children: "+ Add Style"
26671
26353
  }
26672
- ),
26354
+ )
26355
+ ] }),
26356
+ defaultButtonColorStyles.map((style) => /* @__PURE__ */ jsx(ButtonColorGroup, { style, theme }, style.id)),
26357
+ theme.customButtonStyles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--canvas-border)]", children: [
26358
+ /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] mb-3", children: "Custom Styles" }),
26673
26359
  theme.customButtonStyles.map((style) => /* @__PURE__ */ jsx(
26674
26360
  CustomButtonColorGroup,
26675
26361
  {
@@ -26687,508 +26373,440 @@ function SizeGroup({
26687
26373
  theme
26688
26374
  }) {
26689
26375
  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
- }
26745
- )
26746
- ]
26747
- }
26748
- ),
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(
26757
- "div",
26758
- {
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
- ]
26376
+ const heightVar = `${size.prefix}-height`;
26377
+ const fontSizeVar = `${size.prefix}-font-size`;
26378
+ const pxVar = `${size.prefix}-px`;
26379
+ const radiusVar = `${size.prefix}-radius`;
26380
+ const fontWeightVar = `${size.prefix}-font-weight`;
26381
+ const letterSpacingVar = `${size.prefix}-letter-spacing`;
26382
+ const height = theme.variables[heightVar] || defaultButtonSizes[heightVar];
26383
+ const fontSize = theme.variables[fontSizeVar] || defaultButtonSizes[fontSizeVar];
26384
+ const px = theme.variables[pxVar] || defaultButtonSizes[pxVar];
26385
+ const radius = theme.variables[radiusVar] || defaultButtonSizes[radiusVar];
26386
+ const fontWeight = theme.variables[fontWeightVar] || defaultButtonSizes[fontWeightVar];
26387
+ const letterSpacing = theme.variables[letterSpacingVar] || defaultButtonSizes[letterSpacingVar];
26388
+ return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
26389
+ /* @__PURE__ */ jsxs(
26390
+ "button",
26391
+ {
26392
+ type: "button",
26393
+ onClick: () => setExpanded(!expanded),
26394
+ className: "w-full flex items-center justify-between gap-3 text-left cursor-pointer",
26395
+ children: [
26396
+ /* @__PURE__ */ jsx(
26397
+ "div",
26398
+ {
26399
+ className: "shrink-0 flex items-center justify-center text-white",
26400
+ style: {
26401
+ height,
26402
+ fontSize,
26403
+ paddingLeft: px,
26404
+ paddingRight: px,
26405
+ borderRadius: radius,
26406
+ backgroundColor: "#0d121c",
26407
+ fontWeight,
26408
+ letterSpacing
26807
26409
  },
26808
- key
26809
- );
26810
- })
26811
- ] })
26812
- ]
26813
- }
26814
- );
26815
- }
26816
- function ButtonColorGroup({
26817
- style,
26818
- theme
26819
- }) {
26820
- const [expanded, setExpanded] = React13__default.useState(false);
26821
- 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
- }
26410
+ children: size.label
26411
+ }
26412
+ ),
26413
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)]", children: size.description }) }),
26414
+ /* @__PURE__ */ jsx(
26415
+ ChevronDown,
26416
+ {
26417
+ className: cn(
26418
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
26419
+ expanded && "rotate-180"
26862
26420
  )
26863
- ]
26864
- }
26421
+ }
26422
+ )
26423
+ ]
26424
+ }
26425
+ ),
26426
+ /* @__PURE__ */ jsxs(
26427
+ "div",
26428
+ {
26429
+ className: cn(
26430
+ "grid grid-cols-2 gap-3 overflow-hidden transition-all duration-200 ease-out",
26431
+ expanded ? "mt-3 max-h-[400px] opacity-100" : "max-h-0 opacity-0"
26865
26432
  ),
26866
- expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-1", children: [
26867
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
26868
- /* @__PURE__ */ jsx(
26869
- "span",
26870
- {
26871
- style: {
26872
- fontSize: "11px",
26873
- fontWeight: 600,
26874
- color: "#9ca3af",
26875
- textTransform: "uppercase",
26876
- letterSpacing: "0.05em"
26877
- },
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
- ),
26433
+ children: [
26434
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26435
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font" }),
26890
26436
  /* @__PURE__ */ jsx(
26891
- ColorInputRow,
26437
+ "div",
26892
26438
  {
26893
- label: "Text",
26894
- value: theme.variables[`${prefix}-text`] ?? "",
26895
- onChange: (val) => theme.setVariable(`${prefix}-text`, val),
26896
- variableOptions: buttonColorVariableOptions
26439
+ 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)]",
26440
+ title: "Set in Typography \u2192 Button Text",
26441
+ children: "Uses Button Text style"
26897
26442
  }
26898
- ),
26443
+ )
26444
+ ] }),
26445
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26446
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font Size" }),
26899
26447
  /* @__PURE__ */ jsx(
26900
- ColorInputRow,
26448
+ TextInput,
26901
26449
  {
26902
- label: "Border",
26903
- value: theme.variables[`${prefix}-border`] ?? "",
26904
- onChange: (val) => theme.setVariable(`${prefix}-border`, val),
26905
- variableOptions: buttonColorVariableOptions
26450
+ inputSize: "sm",
26451
+ value: fontSize,
26452
+ onChange: (e) => theme.setVariable(fontSizeVar, e.target.value),
26453
+ className: "w-full font-mono",
26454
+ placeholder: "16px"
26906
26455
  }
26907
26456
  )
26908
26457
  ] }),
26909
- /* @__PURE__ */ jsxs("div", { children: [
26458
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26459
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font Weight" }),
26460
+ /* @__PURE__ */ jsxs(Select, { value: fontWeight, onValueChange: (v) => theme.setVariable(fontWeightVar, v), children: [
26461
+ /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", className: "bg-white", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
26462
+ /* @__PURE__ */ jsx(SelectContent, { children: fontWeightOptions2.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, className: "text-xs", children: opt.label }, opt.value)) })
26463
+ ] })
26464
+ ] }),
26465
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26466
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Letter Spacing" }),
26910
26467
  /* @__PURE__ */ jsx(
26911
- "span",
26468
+ TextInput,
26912
26469
  {
26913
- style: {
26914
- fontSize: "11px",
26915
- fontWeight: 600,
26916
- color: "#9ca3af",
26917
- textTransform: "uppercase",
26918
- letterSpacing: "0.05em"
26919
- },
26920
- children: "Hover"
26470
+ inputSize: "sm",
26471
+ value: letterSpacing,
26472
+ onChange: (e) => theme.setVariable(letterSpacingVar, e.target.value),
26473
+ className: "w-full font-mono",
26474
+ placeholder: "0em"
26921
26475
  }
26922
- ),
26476
+ )
26477
+ ] }),
26478
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26479
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Height" }),
26923
26480
  /* @__PURE__ */ jsx(
26924
- ColorInputRow,
26481
+ TextInput,
26925
26482
  {
26926
- label: "Background",
26927
- value: theme.variables[`${prefix}-bg-hover`] ?? "",
26928
- onChange: (val) => theme.setVariable(`${prefix}-bg-hover`, val),
26929
- variableOptions: buttonColorVariableOptions
26483
+ inputSize: "sm",
26484
+ value: height,
26485
+ onChange: (e) => theme.setVariable(heightVar, e.target.value),
26486
+ className: "w-full font-mono",
26487
+ placeholder: "40px"
26930
26488
  }
26931
- ),
26489
+ )
26490
+ ] }),
26491
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26492
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Horizontal Padding" }),
26932
26493
  /* @__PURE__ */ jsx(
26933
- ColorInputRow,
26494
+ TextInput,
26934
26495
  {
26935
- label: "Text",
26936
- value: theme.variables[`${prefix}-text-hover`] ?? "",
26937
- onChange: (val) => theme.setVariable(`${prefix}-text-hover`, val),
26938
- variableOptions: buttonColorVariableOptions
26496
+ inputSize: "sm",
26497
+ value: px,
26498
+ onChange: (e) => theme.setVariable(pxVar, e.target.value),
26499
+ className: "w-full font-mono",
26500
+ placeholder: "16px"
26939
26501
  }
26940
- ),
26502
+ )
26503
+ ] }),
26504
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 col-span-2", children: [
26505
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Border Radius" }),
26941
26506
  /* @__PURE__ */ jsx(
26942
- ColorInputRow,
26507
+ TextInput,
26943
26508
  {
26944
- label: "Border",
26945
- value: theme.variables[`${prefix}-border-hover`] ?? "",
26946
- onChange: (val) => theme.setVariable(`${prefix}-border-hover`, val),
26947
- variableOptions: buttonColorVariableOptions
26509
+ inputSize: "sm",
26510
+ value: radius,
26511
+ onChange: (e) => theme.setVariable(radiusVar, e.target.value),
26512
+ className: "w-full font-mono",
26513
+ placeholder: "8px"
26948
26514
  }
26949
26515
  )
26950
26516
  ] })
26951
- ] })
26952
- ]
26953
- }
26954
- );
26517
+ ]
26518
+ }
26519
+ )
26520
+ ] });
26955
26521
  }
26956
- function CustomButtonColorGroup({
26522
+ function ButtonColorGroup({
26957
26523
  style,
26958
26524
  theme
26959
26525
  }) {
26960
26526
  const [expanded, setExpanded] = React13__default.useState(false);
26961
- 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: [
26527
+ const prefix = `--btn-${style.id}`;
26528
+ const bg = theme.variables[`${prefix}-bg`] ?? defaultButtonColors[`${prefix}-bg`] ?? "";
26529
+ const text = theme.variables[`${prefix}-text`] ?? defaultButtonColors[`${prefix}-text`] ?? "";
26530
+ const border = theme.variables[`${prefix}-border`] ?? defaultButtonColors[`${prefix}-border`] ?? "";
26531
+ const resolvedBg = resolveBrandingColor(bg);
26532
+ const resolvedText = resolveBrandingColor(text);
26533
+ const resolvedBorder = resolveBrandingColor(border);
26534
+ return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
26535
+ /* @__PURE__ */ jsxs(
26536
+ "button",
26537
+ {
26538
+ type: "button",
26539
+ onClick: () => setExpanded(!expanded),
26540
+ className: "w-full flex items-center justify-between gap-2 text-left cursor-pointer",
26541
+ children: [
26542
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: [
27063
26543
  /* @__PURE__ */ jsx(
27064
- "span",
26544
+ "div",
27065
26545
  {
26546
+ className: "w-8 h-6 rounded border shrink-0 flex items-center justify-center text-xs",
27066
26547
  style: {
27067
- fontSize: "11px",
27068
- fontWeight: 600,
27069
- color: "#9ca3af",
27070
- textTransform: "uppercase",
27071
- letterSpacing: "0.05em"
26548
+ backgroundColor: resolvedBg === "transparent" ? "white" : resolvedBg,
26549
+ color: resolvedText,
26550
+ borderColor: resolvedBorder === "transparent" ? void 0 : resolvedBorder
27072
26551
  },
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
26552
+ children: "Aa"
27092
26553
  }
27093
26554
  ),
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
- }
27102
- )
26555
+ /* @__PURE__ */ jsxs("div", { children: [
26556
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--canvas-text)]", children: style.label }),
26557
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)]", children: style.description })
26558
+ ] })
27103
26559
  ] }),
27104
- /* @__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
- ),
26560
+ /* @__PURE__ */ jsx(
26561
+ ChevronDown,
26562
+ {
26563
+ className: cn(
26564
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
26565
+ expanded && "rotate-180"
26566
+ )
26567
+ }
26568
+ )
26569
+ ]
26570
+ }
26571
+ ),
26572
+ /* @__PURE__ */ jsxs(
26573
+ "div",
26574
+ {
26575
+ className: cn(
26576
+ "overflow-hidden transition-all duration-200 ease-out",
26577
+ expanded ? "mt-3 max-h-[400px] opacity-100" : "max-h-0 opacity-0"
26578
+ ),
26579
+ children: [
26580
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
26581
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Normal" }),
26582
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
26583
+ /* @__PURE__ */ jsx(
26584
+ ColorInputRow,
26585
+ {
26586
+ label: "Background",
26587
+ value: bg,
26588
+ onChange: (val) => theme.setVariable(`${prefix}-bg`, val),
26589
+ variableOptions: buttonColorVariableOptions
26590
+ }
26591
+ ),
26592
+ /* @__PURE__ */ jsx(
26593
+ ColorInputRow,
26594
+ {
26595
+ label: "Text",
26596
+ value: text,
26597
+ onChange: (val) => theme.setVariable(`${prefix}-text`, val),
26598
+ variableOptions: buttonColorVariableOptions
26599
+ }
26600
+ ),
26601
+ /* @__PURE__ */ jsx(
26602
+ ColorInputRow,
26603
+ {
26604
+ label: "Border",
26605
+ value: border,
26606
+ onChange: (val) => theme.setVariable(`${prefix}-border`, val),
26607
+ variableOptions: buttonColorVariableOptions
26608
+ }
26609
+ )
26610
+ ] })
26611
+ ] }),
26612
+ /* @__PURE__ */ jsxs("div", { children: [
26613
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Hover" }),
26614
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
26615
+ /* @__PURE__ */ jsx(
26616
+ ColorInputRow,
26617
+ {
26618
+ label: "Background",
26619
+ value: theme.variables[`${prefix}-bg-hover`] ?? "",
26620
+ onChange: (val) => theme.setVariable(`${prefix}-bg-hover`, val),
26621
+ variableOptions: buttonColorVariableOptions
26622
+ }
26623
+ ),
26624
+ /* @__PURE__ */ jsx(
26625
+ ColorInputRow,
26626
+ {
26627
+ label: "Text",
26628
+ value: theme.variables[`${prefix}-text-hover`] ?? "",
26629
+ onChange: (val) => theme.setVariable(`${prefix}-text-hover`, val),
26630
+ variableOptions: buttonColorVariableOptions
26631
+ }
26632
+ ),
26633
+ /* @__PURE__ */ jsx(
26634
+ ColorInputRow,
26635
+ {
26636
+ label: "Border",
26637
+ value: theme.variables[`${prefix}-border-hover`] ?? "",
26638
+ onChange: (val) => theme.setVariable(`${prefix}-border-hover`, val),
26639
+ variableOptions: buttonColorVariableOptions
26640
+ }
26641
+ )
26642
+ ] })
26643
+ ] })
26644
+ ]
26645
+ }
26646
+ )
26647
+ ] });
26648
+ }
26649
+ function CustomButtonColorGroup({
26650
+ style,
26651
+ theme
26652
+ }) {
26653
+ const [expanded, setExpanded] = React13__default.useState(false);
26654
+ const [editing, setEditing] = React13__default.useState(false);
26655
+ const resolvedBg = resolveBrandingColor(style.bg);
26656
+ const resolvedText = resolveBrandingColor(style.text);
26657
+ const resolvedBorder = resolveBrandingColor(style.border);
26658
+ return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
26659
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
26660
+ editing ? /* @__PURE__ */ jsx(
26661
+ "input",
26662
+ {
26663
+ type: "text",
26664
+ value: style.label,
26665
+ onChange: (e) => theme.updateCustomButtonStyle(style.id, { label: e.target.value }),
26666
+ onBlur: () => setEditing(false),
26667
+ onKeyDown: (e) => e.key === "Enter" && setEditing(false),
26668
+ autoFocus: true,
26669
+ 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"
26670
+ }
26671
+ ) : /* @__PURE__ */ jsxs(
26672
+ "button",
26673
+ {
26674
+ onClick: () => setExpanded(!expanded),
26675
+ className: "flex items-center gap-3 flex-1 min-w-0 text-left cursor-pointer",
26676
+ onDoubleClick: (e) => {
26677
+ e.stopPropagation();
26678
+ setEditing(true);
26679
+ },
26680
+ children: [
27127
26681
  /* @__PURE__ */ jsx(
27128
- ColorInputRow,
26682
+ "div",
27129
26683
  {
27130
- label: "Text",
27131
- value: style.textHover,
27132
- onChange: (val) => theme.updateCustomButtonStyle(style.id, { textHover: val }),
27133
- variableOptions: buttonColorVariableOptions
26684
+ className: "w-8 h-6 rounded border shrink-0 flex items-center justify-center text-xs",
26685
+ style: {
26686
+ backgroundColor: resolvedBg === "transparent" ? "white" : resolvedBg,
26687
+ color: resolvedText,
26688
+ borderColor: resolvedBorder === "transparent" ? void 0 : resolvedBorder
26689
+ },
26690
+ children: "Aa"
27134
26691
  }
27135
26692
  ),
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
- }
26693
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--canvas-text)]", children: style.label })
26694
+ ]
26695
+ }
26696
+ ),
26697
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
26698
+ /* @__PURE__ */ jsx(
26699
+ "button",
26700
+ {
26701
+ onClick: () => theme.deleteCustomButtonStyle(style.id),
26702
+ className: "text-[11px] text-[var(--canvas-destructive)] bg-transparent border-none cursor-pointer px-1.5 py-0.5",
26703
+ children: "Delete"
26704
+ }
26705
+ ),
26706
+ /* @__PURE__ */ jsx(
26707
+ ChevronDown,
26708
+ {
26709
+ onClick: () => setExpanded(!expanded),
26710
+ className: cn(
26711
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200 cursor-pointer",
26712
+ expanded && "rotate-180"
27144
26713
  )
26714
+ }
26715
+ )
26716
+ ] })
26717
+ ] }),
26718
+ /* @__PURE__ */ jsxs(
26719
+ "div",
26720
+ {
26721
+ className: cn(
26722
+ "overflow-hidden transition-all duration-200 ease-out",
26723
+ expanded ? "mt-3 max-h-[400px] opacity-100" : "max-h-0 opacity-0"
26724
+ ),
26725
+ children: [
26726
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
26727
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Normal" }),
26728
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
26729
+ /* @__PURE__ */ jsx(
26730
+ ColorInputRow,
26731
+ {
26732
+ label: "Background",
26733
+ value: style.bg,
26734
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { bg: val }),
26735
+ variableOptions: buttonColorVariableOptions
26736
+ }
26737
+ ),
26738
+ /* @__PURE__ */ jsx(
26739
+ ColorInputRow,
26740
+ {
26741
+ label: "Text",
26742
+ value: style.text,
26743
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { text: val }),
26744
+ variableOptions: buttonColorVariableOptions
26745
+ }
26746
+ ),
26747
+ /* @__PURE__ */ jsx(
26748
+ ColorInputRow,
26749
+ {
26750
+ label: "Border",
26751
+ value: style.border,
26752
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { border: val }),
26753
+ variableOptions: buttonColorVariableOptions
26754
+ }
26755
+ )
26756
+ ] })
26757
+ ] }),
26758
+ /* @__PURE__ */ jsxs("div", { children: [
26759
+ /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Hover" }),
26760
+ /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
26761
+ /* @__PURE__ */ jsx(
26762
+ ColorInputRow,
26763
+ {
26764
+ label: "Background",
26765
+ value: style.bgHover,
26766
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { bgHover: val }),
26767
+ variableOptions: buttonColorVariableOptions
26768
+ }
26769
+ ),
26770
+ /* @__PURE__ */ jsx(
26771
+ ColorInputRow,
26772
+ {
26773
+ label: "Text",
26774
+ value: style.textHover,
26775
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { textHover: val }),
26776
+ variableOptions: buttonColorVariableOptions
26777
+ }
26778
+ ),
26779
+ /* @__PURE__ */ jsx(
26780
+ ColorInputRow,
26781
+ {
26782
+ label: "Border",
26783
+ value: style.borderHover,
26784
+ onChange: (val) => theme.updateCustomButtonStyle(style.id, { borderHover: val }),
26785
+ variableOptions: buttonColorVariableOptions
26786
+ }
26787
+ )
26788
+ ] })
27145
26789
  ] })
27146
- ] })
27147
- ]
27148
- }
27149
- );
26790
+ ]
26791
+ }
26792
+ )
26793
+ ] });
27150
26794
  }
27151
26795
  var inputSizeConfigs = [
27152
- { id: "small", label: "Small", prefix: "--input-small" },
27153
- { id: "standard", label: "Standard", prefix: "--input-standard" },
27154
- { id: "large", label: "Large", prefix: "--input-large" },
27155
- { id: "expandable", label: "Expandable", prefix: "--input-expandable" }
27156
- ];
27157
- var inputFields = [
27158
- { suffix: "-height", label: "Height" },
27159
- { suffix: "-font-size", label: "Font Size" },
27160
- { suffix: "-px", label: "Padding X" },
27161
- { suffix: "-radius", label: "Radius" }
26796
+ { id: "small", label: "Small", description: "Compact inputs (30px)", prefix: "--input-small" },
26797
+ { id: "standard", label: "Standard", description: "Default inputs (40px)", prefix: "--input-standard" },
26798
+ { id: "large", label: "Large", description: "Hero inputs (64px)", prefix: "--input-large" },
26799
+ { id: "expandable", label: "Expandable", description: "TextArea, uploaders (80px)", prefix: "--input-expandable" }
27162
26800
  ];
27163
26801
  function InputsPanel({ theme }) {
27164
26802
  return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-5 p-4", children: [
27165
26803
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
27166
- /* @__PURE__ */ jsx(
27167
- "h3",
27168
- {
27169
- style: {
27170
- fontSize: "13px",
27171
- fontWeight: 600,
27172
- color: "#374151",
27173
- textTransform: "uppercase",
27174
- letterSpacing: "0.05em"
27175
- },
27176
- children: "Input Sizes"
27177
- }
27178
- ),
26804
+ /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide", children: "Input Sizes" }),
27179
26805
  /* @__PURE__ */ jsx(
27180
26806
  "button",
27181
26807
  {
27182
26808
  onClick: () => theme.resetCategory("--input-"),
27183
- style: {
27184
- fontSize: "11px",
27185
- color: "#6b7280",
27186
- background: "none",
27187
- border: "none",
27188
- cursor: "pointer",
27189
- padding: "2px 6px",
27190
- borderRadius: "4px"
27191
- },
26809
+ className: "text-[11px] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] bg-transparent border-none cursor-pointer px-1.5 py-0.5 rounded hover:bg-[var(--canvas-surface)]",
27192
26810
  children: "Reset All"
27193
26811
  }
27194
26812
  )
@@ -27201,121 +26819,114 @@ function InputSizeGroup({
27201
26819
  theme
27202
26820
  }) {
27203
26821
  const [expanded, setExpanded] = React13__default.useState(false);
27204
- const previewStyle = {
27205
- height: theme.variables[`${size.prefix}-height`] || "40px",
27206
- fontSize: theme.variables[`${size.prefix}-font-size`] || "14px",
27207
- paddingLeft: theme.variables[`${size.prefix}-px`] || "14px",
27208
- paddingRight: theme.variables[`${size.prefix}-px`] || "14px",
27209
- borderRadius: theme.variables[`${size.prefix}-radius`] || "8px",
27210
- border: "1px solid #d1d9e0",
27211
- color: "#374151",
27212
- background: "#ffffff",
27213
- width: "100%",
27214
- boxSizing: "border-box"
27215
- };
27216
- return /* @__PURE__ */ jsxs(
27217
- "div",
27218
- {
27219
- style: {
27220
- border: "1px solid #e5e7eb",
27221
- borderRadius: "8px",
27222
- overflow: "hidden"
27223
- },
27224
- children: [
27225
- /* @__PURE__ */ jsxs(
27226
- "button",
27227
- {
27228
- onClick: () => setExpanded(!expanded),
27229
- style: {
27230
- display: "flex",
27231
- alignItems: "center",
27232
- justifyContent: "space-between",
27233
- width: "100%",
27234
- padding: "10px 12px",
27235
- background: "#f9fafb",
27236
- border: "none",
27237
- cursor: "pointer",
27238
- fontSize: "13px",
27239
- fontWeight: 600,
27240
- color: "#374151"
27241
- },
27242
- children: [
27243
- /* @__PURE__ */ jsx("span", { children: size.label }),
27244
- /* @__PURE__ */ jsx(
27245
- "span",
27246
- {
27247
- style: {
27248
- fontSize: "11px",
27249
- color: "#9ca3af",
27250
- transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
27251
- transition: "transform 150ms"
27252
- },
27253
- children: "\u25BC"
27254
- }
27255
- )
27256
- ]
27257
- }
27258
- ),
27259
- expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-2", children: [
27260
- /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
27261
- "input",
26822
+ const heightVar = `${size.prefix}-height`;
26823
+ const fontSizeVar = `${size.prefix}-font-size`;
26824
+ const pxVar = `${size.prefix}-px`;
26825
+ const radiusVar = `${size.prefix}-radius`;
26826
+ const height = theme.variables[heightVar] || defaultInputSizes[heightVar];
26827
+ const fontSize = theme.variables[fontSizeVar] || defaultInputSizes[fontSizeVar];
26828
+ const px = theme.variables[pxVar] || defaultInputSizes[pxVar];
26829
+ const radius = theme.variables[radiusVar] || defaultInputSizes[radiusVar];
26830
+ return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
26831
+ /* @__PURE__ */ jsxs(
26832
+ "button",
26833
+ {
26834
+ type: "button",
26835
+ onClick: () => setExpanded(!expanded),
26836
+ className: "w-full flex items-center justify-between gap-3 text-left cursor-pointer",
26837
+ children: [
26838
+ /* @__PURE__ */ jsx(
26839
+ "div",
27262
26840
  {
27263
- type: "text",
27264
- placeholder: `${size.label} input preview`,
27265
- readOnly: true,
27266
- style: previewStyle
26841
+ className: "shrink-0 flex items-center border border-[var(--canvas-border-input)] bg-white",
26842
+ style: {
26843
+ width: "160px",
26844
+ height,
26845
+ fontSize,
26846
+ paddingLeft: px,
26847
+ paddingRight: px,
26848
+ borderRadius: radius
26849
+ },
26850
+ children: /* @__PURE__ */ jsx("span", { className: "text-[var(--canvas-text-placeholder)]", children: size.label })
27267
26851
  }
27268
- ) }),
27269
- inputFields.map((field) => {
27270
- const key = `${size.prefix}${field.suffix}`;
27271
- return /* @__PURE__ */ jsxs(
27272
- "div",
26852
+ ),
26853
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)]", children: size.description }) }),
26854
+ /* @__PURE__ */ jsx(
26855
+ ChevronDown,
26856
+ {
26857
+ className: cn(
26858
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
26859
+ expanded && "rotate-180"
26860
+ )
26861
+ }
26862
+ )
26863
+ ]
26864
+ }
26865
+ ),
26866
+ /* @__PURE__ */ jsxs(
26867
+ "div",
26868
+ {
26869
+ className: cn(
26870
+ "grid grid-cols-2 gap-3 overflow-hidden transition-all duration-200 ease-out",
26871
+ expanded ? "mt-3 max-h-[200px] opacity-100" : "max-h-0 opacity-0"
26872
+ ),
26873
+ children: [
26874
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26875
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Height" }),
26876
+ /* @__PURE__ */ jsx(
26877
+ TextInput,
27273
26878
  {
27274
- style: {
27275
- display: "flex",
27276
- alignItems: "center",
27277
- gap: "8px"
27278
- },
27279
- children: [
27280
- /* @__PURE__ */ jsx(
27281
- "label",
27282
- {
27283
- style: {
27284
- fontSize: "12px",
27285
- color: "#6b7280",
27286
- width: "80px",
27287
- flexShrink: 0
27288
- },
27289
- children: field.label
27290
- }
27291
- ),
27292
- /* @__PURE__ */ jsx(
27293
- "input",
27294
- {
27295
- type: "text",
27296
- value: theme.variables[key] ?? "",
27297
- onChange: (e) => theme.setVariable(key, e.target.value),
27298
- style: {
27299
- flex: 1,
27300
- fontSize: "12px",
27301
- fontFamily: "monospace",
27302
- padding: "4px 8px",
27303
- border: "1px solid #e5e7eb",
27304
- borderRadius: "4px",
27305
- color: "#374151",
27306
- background: "#ffffff"
27307
- }
27308
- }
27309
- )
27310
- ]
27311
- },
27312
- key
27313
- );
27314
- })
27315
- ] })
27316
- ]
27317
- }
27318
- );
26879
+ inputSize: "sm",
26880
+ value: height,
26881
+ onChange: (e) => theme.setVariable(heightVar, e.target.value),
26882
+ className: "w-full font-mono",
26883
+ placeholder: "40px"
26884
+ }
26885
+ )
26886
+ ] }),
26887
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26888
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font Size" }),
26889
+ /* @__PURE__ */ jsx(
26890
+ TextInput,
26891
+ {
26892
+ inputSize: "sm",
26893
+ value: fontSize,
26894
+ onChange: (e) => theme.setVariable(fontSizeVar, e.target.value),
26895
+ className: "w-full font-mono",
26896
+ placeholder: "14px"
26897
+ }
26898
+ )
26899
+ ] }),
26900
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26901
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Padding X" }),
26902
+ /* @__PURE__ */ jsx(
26903
+ TextInput,
26904
+ {
26905
+ inputSize: "sm",
26906
+ value: px,
26907
+ onChange: (e) => theme.setVariable(pxVar, e.target.value),
26908
+ className: "w-full font-mono",
26909
+ placeholder: "14px"
26910
+ }
26911
+ )
26912
+ ] }),
26913
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
26914
+ /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Border Radius" }),
26915
+ /* @__PURE__ */ jsx(
26916
+ TextInput,
26917
+ {
26918
+ inputSize: "sm",
26919
+ value: radius,
26920
+ onChange: (e) => theme.setVariable(radiusVar, e.target.value),
26921
+ className: "w-full font-mono",
26922
+ placeholder: "8px"
26923
+ }
26924
+ )
26925
+ ] })
26926
+ ]
26927
+ }
26928
+ )
26929
+ ] });
27319
26930
  }
27320
26931
 
27321
26932
  // src/components/theme-drawer/utils/generate-bake-prompt.ts