canvas-ui-sdk 0.3.11 → 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 +333 -640
  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,334 +26091,166 @@ 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",
26217
- {
26218
- style: {
26219
- fontSize: "11px",
26220
- color: "#9ca3af",
26221
- transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
26222
- transition: "transform 150ms"
26223
- },
26224
- children: "\u25BC"
26225
- }
26226
- )
26227
- ]
26228
- }
26229
- ),
26230
- expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "12px" }, children: [
26231
- /* @__PURE__ */ jsxs(
26232
- "div",
26233
- {
26234
- style: {
26235
- display: "grid",
26236
- gridTemplateColumns: "1fr 1fr",
26237
- gap: "8px",
26238
- marginBottom: "8px"
26239
- },
26240
- 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",
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,
26421
26127
  {
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
- ] })
26499
- ]
26128
+ className: cn(
26129
+ "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
26130
+ expanded && "rotate-180"
26131
+ )
26500
26132
  }
26501
- ),
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,
26150
+ {
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
+ }
26159
+ },
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
+ ]
26180
+ }
26181
+ )
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
+ ] }),
26502
26254
  /* @__PURE__ */ jsx(
26503
26255
  ColorInputRow,
26504
26256
  {
@@ -26517,47 +26269,21 @@ function TypographyRow({
26517
26269
  variableOptions: typographyColorOptions
26518
26270
  }
26519
26271
  ),
26520
- /* @__PURE__ */ jsx(
26521
- "div",
26272
+ /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsxs(
26273
+ "button",
26522
26274
  {
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
- )
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)]",
26277
+ children: [
26278
+ "Reset ",
26279
+ label
26280
+ ]
26555
26281
  }
26556
- )
26557
- ] })
26558
- ]
26559
- }
26560
- );
26282
+ ) })
26283
+ ]
26284
+ }
26285
+ )
26286
+ ] });
26561
26287
  }
26562
26288
  var buttonSizeConfigs = [
26563
26289
  { id: "mini", label: "Mini", description: "28px height, 12px font", prefix: "--btn-mini" },
@@ -27067,46 +26793,20 @@ function CustomButtonColorGroup({
27067
26793
  ] });
27068
26794
  }
27069
26795
  var inputSizeConfigs = [
27070
- { id: "small", label: "Small", prefix: "--input-small" },
27071
- { id: "standard", label: "Standard", prefix: "--input-standard" },
27072
- { id: "large", label: "Large", prefix: "--input-large" },
27073
- { id: "expandable", label: "Expandable", prefix: "--input-expandable" }
27074
- ];
27075
- var inputFields = [
27076
- { suffix: "-height", label: "Height" },
27077
- { suffix: "-font-size", label: "Font Size" },
27078
- { suffix: "-px", label: "Padding X" },
27079
- { 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" }
27080
26800
  ];
27081
26801
  function InputsPanel({ theme }) {
27082
26802
  return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-5 p-4", children: [
27083
26803
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
27084
- /* @__PURE__ */ jsx(
27085
- "h3",
27086
- {
27087
- style: {
27088
- fontSize: "13px",
27089
- fontWeight: 600,
27090
- color: "#374151",
27091
- textTransform: "uppercase",
27092
- letterSpacing: "0.05em"
27093
- },
27094
- children: "Input Sizes"
27095
- }
27096
- ),
26804
+ /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide", children: "Input Sizes" }),
27097
26805
  /* @__PURE__ */ jsx(
27098
26806
  "button",
27099
26807
  {
27100
26808
  onClick: () => theme.resetCategory("--input-"),
27101
- style: {
27102
- fontSize: "11px",
27103
- color: "#6b7280",
27104
- background: "none",
27105
- border: "none",
27106
- cursor: "pointer",
27107
- padding: "2px 6px",
27108
- borderRadius: "4px"
27109
- },
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)]",
27110
26810
  children: "Reset All"
27111
26811
  }
27112
26812
  )
@@ -27119,121 +26819,114 @@ function InputSizeGroup({
27119
26819
  theme
27120
26820
  }) {
27121
26821
  const [expanded, setExpanded] = React13__default.useState(false);
27122
- const previewStyle = {
27123
- height: theme.variables[`${size.prefix}-height`] || "40px",
27124
- fontSize: theme.variables[`${size.prefix}-font-size`] || "14px",
27125
- paddingLeft: theme.variables[`${size.prefix}-px`] || "14px",
27126
- paddingRight: theme.variables[`${size.prefix}-px`] || "14px",
27127
- borderRadius: theme.variables[`${size.prefix}-radius`] || "8px",
27128
- border: "1px solid #d1d9e0",
27129
- color: "#374151",
27130
- background: "#ffffff",
27131
- width: "100%",
27132
- boxSizing: "border-box"
27133
- };
27134
- return /* @__PURE__ */ jsxs(
27135
- "div",
27136
- {
27137
- style: {
27138
- border: "1px solid #e5e7eb",
27139
- borderRadius: "8px",
27140
- overflow: "hidden"
27141
- },
27142
- children: [
27143
- /* @__PURE__ */ jsxs(
27144
- "button",
27145
- {
27146
- onClick: () => setExpanded(!expanded),
27147
- style: {
27148
- display: "flex",
27149
- alignItems: "center",
27150
- justifyContent: "space-between",
27151
- width: "100%",
27152
- padding: "10px 12px",
27153
- background: "#f9fafb",
27154
- border: "none",
27155
- cursor: "pointer",
27156
- fontSize: "13px",
27157
- fontWeight: 600,
27158
- color: "#374151"
27159
- },
27160
- children: [
27161
- /* @__PURE__ */ jsx("span", { children: size.label }),
27162
- /* @__PURE__ */ jsx(
27163
- "span",
27164
- {
27165
- style: {
27166
- fontSize: "11px",
27167
- color: "#9ca3af",
27168
- transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
27169
- transition: "transform 150ms"
27170
- },
27171
- children: "\u25BC"
27172
- }
27173
- )
27174
- ]
27175
- }
27176
- ),
27177
- expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-2", children: [
27178
- /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
27179
- "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",
27180
26840
  {
27181
- type: "text",
27182
- placeholder: `${size.label} input preview`,
27183
- readOnly: true,
27184
- 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 })
27185
26851
  }
27186
- ) }),
27187
- inputFields.map((field) => {
27188
- const key = `${size.prefix}${field.suffix}`;
27189
- return /* @__PURE__ */ jsxs(
27190
- "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,
27191
26878
  {
27192
- style: {
27193
- display: "flex",
27194
- alignItems: "center",
27195
- gap: "8px"
27196
- },
27197
- children: [
27198
- /* @__PURE__ */ jsx(
27199
- "label",
27200
- {
27201
- style: {
27202
- fontSize: "12px",
27203
- color: "#6b7280",
27204
- width: "80px",
27205
- flexShrink: 0
27206
- },
27207
- children: field.label
27208
- }
27209
- ),
27210
- /* @__PURE__ */ jsx(
27211
- "input",
27212
- {
27213
- type: "text",
27214
- value: theme.variables[key] ?? "",
27215
- onChange: (e) => theme.setVariable(key, e.target.value),
27216
- style: {
27217
- flex: 1,
27218
- fontSize: "12px",
27219
- fontFamily: "monospace",
27220
- padding: "4px 8px",
27221
- border: "1px solid #e5e7eb",
27222
- borderRadius: "4px",
27223
- color: "#374151",
27224
- background: "#ffffff"
27225
- }
27226
- }
27227
- )
27228
- ]
27229
- },
27230
- key
27231
- );
27232
- })
27233
- ] })
27234
- ]
27235
- }
27236
- );
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
+ ] });
27237
26930
  }
27238
26931
 
27239
26932
  // src/components/theme-drawer/utils/generate-bake-prompt.ts