@dheme/react 2.5.0 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +345 -360
  2. package/dist/index.mjs +345 -360
  3. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1098,394 +1098,379 @@ function ThemeGenerator({
1098
1098
  `;
1099
1099
  document.head.appendChild(style);
1100
1100
  }
1101
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1102
- isOpen && /* @__PURE__ */ jsx(
1103
- "div",
1104
- {
1105
- onClick: () => setIsOpen(false),
1106
- style: {
1107
- position: "fixed",
1108
- inset: 0,
1109
- background: "rgba(0,0,0,0.2)",
1110
- backdropFilter: "blur(1px)",
1111
- zIndex: 40
1112
- }
1113
- }
1114
- ),
1115
- /* @__PURE__ */ jsxs(
1116
- "div",
1117
- {
1118
- className: cn(className),
1119
- style: {
1120
- position: "fixed",
1121
- zIndex: 50,
1122
- display: "flex",
1123
- flexDirection: "column",
1124
- gap: "16px",
1125
- ...positionStyle
1126
- },
1127
- children: [
1128
- /* @__PURE__ */ jsxs(
1129
- "div",
1130
- {
1131
- style: {
1132
- position: "absolute",
1133
- ...panelPosition,
1134
- width: isOpen ? "340px" : "180px",
1135
- height: isOpen ? "auto" : "56px",
1136
- opacity: isOpen ? 1 : 0,
1137
- transform: isOpen ? "scale(1) translateY(0)" : "scale(0.9) translateY(32px)",
1138
- pointerEvents: isOpen ? "auto" : "none",
1139
- transformOrigin: panelOrigin,
1140
- transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)",
1141
- borderRadius: "12px",
1142
- border: "1px solid hsl(var(--border))",
1143
- background: "hsl(var(--card))",
1144
- boxShadow: "0 25px 50px rgba(0,0,0,0.15)",
1145
- overflow: "hidden"
1146
- },
1147
- children: [
1148
- /* @__PURE__ */ jsxs(
1149
- "div",
1150
- {
1151
- style: {
1152
- display: "flex",
1153
- alignItems: "center",
1154
- justifyContent: "space-between",
1155
- padding: "14px 16px",
1156
- borderBottom: "1px solid hsl(var(--border))",
1157
- background: "hsl(var(--muted) / 0.3)"
1158
- },
1159
- children: [
1160
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1161
- /* @__PURE__ */ jsx(SparklesIcon, { className: "dheme-sparkles" }),
1162
- /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
1163
- ] }),
1164
- /* @__PURE__ */ jsx(
1165
- "button",
1166
- {
1167
- onClick: () => setIsOpen(false),
1168
- style: {
1169
- background: "none",
1170
- border: "none",
1171
- cursor: "pointer",
1172
- padding: "2px",
1173
- color: "hsl(var(--muted-foreground))",
1174
- display: "flex",
1175
- alignItems: "center",
1176
- justifyContent: "center",
1177
- borderRadius: "4px"
1178
- },
1179
- children: /* @__PURE__ */ jsx(XIcon, {})
1180
- }
1181
- )
1182
- ]
1183
- }
1184
- ),
1185
- /* @__PURE__ */ jsx(
1186
- "div",
1187
- {
1188
- style: {
1189
- maxHeight: "calc(100vh - 200px)",
1190
- overflowY: "auto",
1191
- background: "hsl(var(--background))"
1192
- },
1193
- children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1194
- /* @__PURE__ */ jsx(
1195
- "p",
1196
- {
1197
- style: {
1198
- fontSize: "11px",
1199
- color: "hsl(var(--muted-foreground))",
1200
- margin: 0,
1201
- lineHeight: 1.5
1202
- },
1203
- children: labels.description
1204
- }
1205
- ),
1206
- /* @__PURE__ */ jsxs("section", { children: [
1207
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.baseColors }),
1208
- /* @__PURE__ */ jsx(
1209
- ColorRow,
1210
- {
1211
- label: labels.primary,
1212
- color: localPrimary,
1213
- onColorChange: setLocalPrimary,
1214
- onInputChange: (v) => {
1215
- if (v.length === 6) setLocalPrimary(`#${v}`);
1216
- }
1217
- }
1218
- ),
1219
- /* @__PURE__ */ jsx(
1220
- ColorRow,
1221
- {
1222
- label: labels.secondary,
1223
- badge: labels.optional,
1224
- color: localSecondary,
1225
- disabled: !isSecondaryEnabled,
1226
- onColorChange: (c) => {
1227
- if (isSecondaryEnabled) setLocalSecondary(c);
1228
- },
1229
- onInputChange: (v) => {
1230
- if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1231
- },
1232
- actionButton: /* @__PURE__ */ jsx(
1233
- "button",
1234
- {
1235
- onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1236
- style: {
1237
- background: "none",
1238
- border: "none",
1239
- cursor: "pointer",
1240
- padding: "2px",
1241
- color: "hsl(var(--muted-foreground))",
1242
- display: "flex",
1243
- alignItems: "center",
1244
- justifyContent: "center",
1245
- borderRadius: "4px"
1246
- },
1247
- children: isSecondaryEnabled ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
1248
- }
1249
- )
1250
- }
1251
- )
1252
- ] }),
1253
- /* @__PURE__ */ jsxs("section", { children: [
1254
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.fineTuning }),
1255
- /* @__PURE__ */ jsx(
1256
- SliderRow,
1257
- {
1258
- label: labels.saturation,
1259
- value: localSaturation,
1260
- onChange: setLocalSaturation,
1261
- min: -100,
1262
- max: 100,
1263
- step: 1,
1264
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1265
- }
1266
- ),
1267
- /* @__PURE__ */ jsx(
1268
- SliderRow,
1269
- {
1270
- label: labels.lightness,
1271
- value: localLightness,
1272
- onChange: setLocalLightness,
1273
- min: -100,
1274
- max: 100,
1275
- step: 1,
1276
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1277
- }
1278
- ),
1279
- /* @__PURE__ */ jsx(
1280
- SliderRow,
1281
- {
1282
- label: labels.borderRadius,
1283
- value: localRadius,
1284
- onChange: setLocalRadius,
1285
- min: 0,
1286
- max: 2,
1287
- step: 0.1,
1288
- display: (v) => `${v.toFixed(1)}rem`
1289
- }
1290
- )
1291
- ] }),
1292
- /* @__PURE__ */ jsxs("section", { children: [
1293
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.advancedOptions }),
1294
- /* @__PURE__ */ jsx(
1295
- ToggleRow,
1296
- {
1297
- label: labels.colorfulCard,
1298
- checked: localCardIsColored,
1299
- onChange: (v) => handleToggle("cardIsColored", v)
1300
- }
1301
- ),
1302
- /* @__PURE__ */ jsx(
1303
- ToggleRow,
1304
- {
1305
- label: labels.colorfulBackground,
1306
- checked: localBackgroundIsColored,
1307
- onChange: (v) => handleToggle("backgroundIsColored", v)
1308
- }
1309
- ),
1310
- /* @__PURE__ */ jsx(
1311
- ToggleRow,
1312
- {
1313
- label: labels.colorfulBorder,
1314
- checked: localBorderIsColored,
1315
- onChange: (v) => handleToggle("borderIsColored", v)
1316
- }
1317
- )
1318
- ] })
1319
- ] })
1320
- }
1321
- ),
1322
- /* @__PURE__ */ jsx(
1323
- "div",
1324
- {
1325
- style: {
1326
- padding: "10px 12px",
1327
- borderTop: "1px solid hsl(var(--border))",
1328
- background: "hsl(var(--muted) / 0.2)"
1329
- },
1330
- children: /* @__PURE__ */ jsxs(
1101
+ return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
1102
+ "div",
1103
+ {
1104
+ className: cn(className),
1105
+ style: {
1106
+ position: "fixed",
1107
+ zIndex: 50,
1108
+ display: "flex",
1109
+ flexDirection: "column",
1110
+ gap: "16px",
1111
+ ...positionStyle
1112
+ },
1113
+ children: [
1114
+ /* @__PURE__ */ jsxs(
1115
+ "div",
1116
+ {
1117
+ style: {
1118
+ position: "absolute",
1119
+ ...panelPosition,
1120
+ width: isOpen ? "340px" : "180px",
1121
+ height: isOpen ? "auto" : "56px",
1122
+ opacity: isOpen ? 1 : 0,
1123
+ transform: isOpen ? "scale(1) translateY(0)" : "scale(0.9) translateY(32px)",
1124
+ pointerEvents: isOpen ? "auto" : "none",
1125
+ transformOrigin: panelOrigin,
1126
+ transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)",
1127
+ borderRadius: "12px",
1128
+ border: "1px solid hsl(var(--border))",
1129
+ background: "hsl(var(--card))",
1130
+ boxShadow: "0 25px 50px rgba(0,0,0,0.15)",
1131
+ overflow: "hidden"
1132
+ },
1133
+ children: [
1134
+ /* @__PURE__ */ jsxs(
1135
+ "div",
1136
+ {
1137
+ style: {
1138
+ display: "flex",
1139
+ alignItems: "center",
1140
+ justifyContent: "space-between",
1141
+ padding: "14px 16px",
1142
+ borderBottom: "1px solid hsl(var(--border))",
1143
+ background: "hsl(var(--muted) / 0.3)"
1144
+ },
1145
+ children: [
1146
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1147
+ /* @__PURE__ */ jsx(SparklesIcon, { className: "dheme-sparkles" }),
1148
+ /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
1149
+ ] }),
1150
+ /* @__PURE__ */ jsx(
1331
1151
  "button",
1332
1152
  {
1333
- onClick: handleReset,
1153
+ onClick: () => setIsOpen(false),
1334
1154
  style: {
1335
- width: "100%",
1336
- height: "32px",
1337
1155
  background: "none",
1338
- border: "1px solid hsl(var(--border))",
1339
- borderRadius: "6px",
1156
+ border: "none",
1340
1157
  cursor: "pointer",
1158
+ padding: "2px",
1159
+ color: "hsl(var(--muted-foreground))",
1341
1160
  display: "flex",
1342
1161
  alignItems: "center",
1343
1162
  justifyContent: "center",
1344
- gap: "6px",
1345
- fontSize: "12px",
1346
- color: "hsl(var(--muted-foreground))",
1347
- transition: "background 0.15s"
1348
- },
1349
- onMouseEnter: (e) => {
1350
- e.currentTarget.style.background = "hsl(var(--muted))";
1163
+ borderRadius: "4px"
1351
1164
  },
1352
- onMouseLeave: (e) => {
1353
- e.currentTarget.style.background = "none";
1354
- },
1355
- children: [
1356
- /* @__PURE__ */ jsx(RotateCcwIcon, {}),
1357
- labels.reset
1358
- ]
1165
+ children: /* @__PURE__ */ jsx(XIcon, {})
1359
1166
  }
1360
1167
  )
1361
- }
1362
- )
1363
- ]
1364
- }
1365
- ),
1366
- /* @__PURE__ */ jsx(
1367
- "div",
1368
- {
1369
- onClick: () => setIsOpen(true),
1370
- style: {
1371
- width: isOpen ? "56px" : "180px",
1372
- height: "56px",
1373
- borderRadius: "99px",
1374
- border: "1px solid hsl(var(--border))",
1375
- background: "hsl(var(--card))",
1376
- boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
1377
- cursor: isOpen ? "default" : "pointer",
1378
- position: "relative",
1379
- overflow: "hidden",
1380
- opacity: isOpen ? 0 : 1,
1381
- transform: isOpen ? "scale(0.5) translateY(16px)" : "scale(1) translateY(0)",
1382
- pointerEvents: isOpen ? "none" : "auto",
1383
- transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)"
1384
- },
1385
- children: /* @__PURE__ */ jsxs(
1168
+ ]
1169
+ }
1170
+ ),
1171
+ /* @__PURE__ */ jsx(
1386
1172
  "div",
1387
1173
  {
1388
1174
  style: {
1389
- position: "absolute",
1390
- inset: 0,
1391
- display: "flex",
1392
- alignItems: "center",
1393
- justifyContent: "space-between",
1394
- padding: "0 8px 0 12px"
1175
+ maxHeight: "calc(100vh - 200px)",
1176
+ overflowY: "auto",
1177
+ background: "hsl(var(--background))"
1395
1178
  },
1396
- children: [
1179
+ children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1397
1180
  /* @__PURE__ */ jsx(
1398
- "div",
1181
+ "p",
1399
1182
  {
1400
1183
  style: {
1401
- width: "32px",
1402
- height: "32px",
1403
- borderRadius: "50%",
1404
- background: localPrimary,
1405
- border: "1px solid hsl(var(--border))",
1406
- boxShadow: "0 0 0 2px hsl(var(--background))",
1407
- flexShrink: 0
1408
- }
1184
+ fontSize: "11px",
1185
+ color: "hsl(var(--muted-foreground))",
1186
+ margin: 0,
1187
+ lineHeight: 1.5
1188
+ },
1189
+ children: labels.description
1409
1190
  }
1410
1191
  ),
1411
- /* @__PURE__ */ jsxs(
1412
- "div",
1413
- {
1414
- style: {
1415
- display: "flex",
1416
- flexDirection: "column",
1417
- gap: "2px",
1418
- flex: 1,
1419
- padding: "0 8px"
1420
- },
1421
- children: [
1422
- /* @__PURE__ */ jsx(
1423
- "span",
1424
- {
1425
- style: {
1426
- fontSize: "10px",
1427
- fontWeight: 700,
1428
- letterSpacing: "0.08em",
1429
- textTransform: "uppercase",
1430
- color: "hsl(var(--foreground))"
1431
- },
1432
- children: labels.fabPrimaryLabel
1433
- }
1434
- ),
1435
- /* @__PURE__ */ jsxs(
1436
- "div",
1192
+ /* @__PURE__ */ jsxs("section", { children: [
1193
+ /* @__PURE__ */ jsx(SectionHeading, { children: labels.baseColors }),
1194
+ /* @__PURE__ */ jsx(
1195
+ ColorRow,
1196
+ {
1197
+ label: labels.primary,
1198
+ color: localPrimary,
1199
+ onColorChange: setLocalPrimary,
1200
+ onInputChange: (v) => {
1201
+ if (v.length === 6) setLocalPrimary(`#${v}`);
1202
+ }
1203
+ }
1204
+ ),
1205
+ /* @__PURE__ */ jsx(
1206
+ ColorRow,
1207
+ {
1208
+ label: labels.secondary,
1209
+ badge: labels.optional,
1210
+ color: localSecondary,
1211
+ disabled: !isSecondaryEnabled,
1212
+ onColorChange: (c) => {
1213
+ if (isSecondaryEnabled) setLocalSecondary(c);
1214
+ },
1215
+ onInputChange: (v) => {
1216
+ if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1217
+ },
1218
+ actionButton: /* @__PURE__ */ jsx(
1219
+ "button",
1437
1220
  {
1221
+ onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1438
1222
  style: {
1223
+ background: "none",
1224
+ border: "none",
1225
+ cursor: "pointer",
1226
+ padding: "2px",
1227
+ color: "hsl(var(--muted-foreground))",
1439
1228
  display: "flex",
1440
- gap: "8px",
1441
- fontSize: "10px",
1442
- fontFamily: "monospace",
1443
- color: "hsl(var(--muted-foreground))"
1229
+ alignItems: "center",
1230
+ justifyContent: "center",
1231
+ borderRadius: "4px"
1444
1232
  },
1445
- children: [
1446
- /* @__PURE__ */ jsxs("span", { children: [
1447
- "S:",
1448
- localSaturation[0] > 0 ? "+" : "",
1449
- localSaturation[0],
1450
- "%"
1451
- ] }),
1452
- /* @__PURE__ */ jsxs("span", { children: [
1453
- "L:",
1454
- localLightness[0] > 0 ? "+" : "",
1455
- localLightness[0],
1456
- "%"
1457
- ] })
1458
- ]
1233
+ children: isSecondaryEnabled ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
1459
1234
  }
1460
1235
  )
1461
- ]
1462
- }
1463
- ),
1464
- /* @__PURE__ */ jsx(
1465
- "div",
1466
- {
1467
- style: {
1468
- width: "32px",
1469
- height: "32px",
1470
- display: "flex",
1471
- alignItems: "center",
1472
- justifyContent: "center",
1473
- borderRadius: "50%",
1474
- background: "hsl(var(--muted) / 0.5)",
1475
- flexShrink: 0
1476
- },
1477
- children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
1478
- }
1479
- )
1480
- ]
1236
+ }
1237
+ )
1238
+ ] }),
1239
+ /* @__PURE__ */ jsxs("section", { children: [
1240
+ /* @__PURE__ */ jsx(SectionHeading, { children: labels.fineTuning }),
1241
+ /* @__PURE__ */ jsx(
1242
+ SliderRow,
1243
+ {
1244
+ label: labels.saturation,
1245
+ value: localSaturation,
1246
+ onChange: setLocalSaturation,
1247
+ min: -100,
1248
+ max: 100,
1249
+ step: 1,
1250
+ display: (v) => `${v > 0 ? "+" : ""}${v}%`
1251
+ }
1252
+ ),
1253
+ /* @__PURE__ */ jsx(
1254
+ SliderRow,
1255
+ {
1256
+ label: labels.lightness,
1257
+ value: localLightness,
1258
+ onChange: setLocalLightness,
1259
+ min: -100,
1260
+ max: 100,
1261
+ step: 1,
1262
+ display: (v) => `${v > 0 ? "+" : ""}${v}%`
1263
+ }
1264
+ ),
1265
+ /* @__PURE__ */ jsx(
1266
+ SliderRow,
1267
+ {
1268
+ label: labels.borderRadius,
1269
+ value: localRadius,
1270
+ onChange: setLocalRadius,
1271
+ min: 0,
1272
+ max: 2,
1273
+ step: 0.1,
1274
+ display: (v) => `${v.toFixed(1)}rem`
1275
+ }
1276
+ )
1277
+ ] }),
1278
+ /* @__PURE__ */ jsxs("section", { children: [
1279
+ /* @__PURE__ */ jsx(SectionHeading, { children: labels.advancedOptions }),
1280
+ /* @__PURE__ */ jsx(
1281
+ ToggleRow,
1282
+ {
1283
+ label: labels.colorfulCard,
1284
+ checked: localCardIsColored,
1285
+ onChange: (v) => handleToggle("cardIsColored", v)
1286
+ }
1287
+ ),
1288
+ /* @__PURE__ */ jsx(
1289
+ ToggleRow,
1290
+ {
1291
+ label: labels.colorfulBackground,
1292
+ checked: localBackgroundIsColored,
1293
+ onChange: (v) => handleToggle("backgroundIsColored", v)
1294
+ }
1295
+ ),
1296
+ /* @__PURE__ */ jsx(
1297
+ ToggleRow,
1298
+ {
1299
+ label: labels.colorfulBorder,
1300
+ checked: localBorderIsColored,
1301
+ onChange: (v) => handleToggle("borderIsColored", v)
1302
+ }
1303
+ )
1304
+ ] })
1305
+ ] })
1306
+ }
1307
+ ),
1308
+ /* @__PURE__ */ jsx(
1309
+ "div",
1310
+ {
1311
+ style: {
1312
+ padding: "10px 12px",
1313
+ borderTop: "1px solid hsl(var(--border))",
1314
+ background: "hsl(var(--muted) / 0.2)"
1315
+ },
1316
+ children: /* @__PURE__ */ jsxs(
1317
+ "button",
1318
+ {
1319
+ onClick: handleReset,
1320
+ style: {
1321
+ width: "100%",
1322
+ height: "32px",
1323
+ background: "none",
1324
+ border: "1px solid hsl(var(--border))",
1325
+ borderRadius: "6px",
1326
+ cursor: "pointer",
1327
+ display: "flex",
1328
+ alignItems: "center",
1329
+ justifyContent: "center",
1330
+ gap: "6px",
1331
+ fontSize: "12px",
1332
+ color: "hsl(var(--muted-foreground))",
1333
+ transition: "background 0.15s"
1334
+ },
1335
+ onMouseEnter: (e) => {
1336
+ e.currentTarget.style.background = "hsl(var(--muted))";
1337
+ },
1338
+ onMouseLeave: (e) => {
1339
+ e.currentTarget.style.background = "none";
1340
+ },
1341
+ children: [
1342
+ /* @__PURE__ */ jsx(RotateCcwIcon, {}),
1343
+ labels.reset
1344
+ ]
1345
+ }
1346
+ )
1481
1347
  }
1482
1348
  )
1483
- }
1484
- )
1485
- ]
1486
- }
1487
- )
1488
- ] });
1349
+ ]
1350
+ }
1351
+ ),
1352
+ /* @__PURE__ */ jsx(
1353
+ "div",
1354
+ {
1355
+ onClick: () => setIsOpen(true),
1356
+ style: {
1357
+ width: isOpen ? "56px" : "180px",
1358
+ height: "56px",
1359
+ borderRadius: "99px",
1360
+ border: "1px solid hsl(var(--border))",
1361
+ background: "hsl(var(--card))",
1362
+ boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
1363
+ cursor: isOpen ? "default" : "pointer",
1364
+ position: "relative",
1365
+ overflow: "hidden",
1366
+ opacity: isOpen ? 0 : 1,
1367
+ transform: isOpen ? "scale(0.5) translateY(16px)" : "scale(1) translateY(0)",
1368
+ pointerEvents: isOpen ? "none" : "auto",
1369
+ transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)"
1370
+ },
1371
+ children: /* @__PURE__ */ jsxs(
1372
+ "div",
1373
+ {
1374
+ style: {
1375
+ position: "absolute",
1376
+ inset: 0,
1377
+ display: "flex",
1378
+ alignItems: "center",
1379
+ justifyContent: "space-between",
1380
+ padding: "0 8px 0 12px"
1381
+ },
1382
+ children: [
1383
+ /* @__PURE__ */ jsx(
1384
+ "div",
1385
+ {
1386
+ style: {
1387
+ width: "32px",
1388
+ height: "32px",
1389
+ borderRadius: "50%",
1390
+ background: localPrimary,
1391
+ border: "1px solid hsl(var(--border))",
1392
+ boxShadow: "0 0 0 2px hsl(var(--background))",
1393
+ flexShrink: 0
1394
+ }
1395
+ }
1396
+ ),
1397
+ /* @__PURE__ */ jsxs(
1398
+ "div",
1399
+ {
1400
+ style: {
1401
+ display: "flex",
1402
+ flexDirection: "column",
1403
+ gap: "2px",
1404
+ flex: 1,
1405
+ padding: "0 8px"
1406
+ },
1407
+ children: [
1408
+ /* @__PURE__ */ jsx(
1409
+ "span",
1410
+ {
1411
+ style: {
1412
+ fontSize: "10px",
1413
+ fontWeight: 700,
1414
+ letterSpacing: "0.08em",
1415
+ textTransform: "uppercase",
1416
+ color: "hsl(var(--foreground))"
1417
+ },
1418
+ children: labels.fabPrimaryLabel
1419
+ }
1420
+ ),
1421
+ /* @__PURE__ */ jsxs(
1422
+ "div",
1423
+ {
1424
+ style: {
1425
+ display: "flex",
1426
+ gap: "8px",
1427
+ fontSize: "10px",
1428
+ fontFamily: "monospace",
1429
+ color: "hsl(var(--muted-foreground))"
1430
+ },
1431
+ children: [
1432
+ /* @__PURE__ */ jsxs("span", { children: [
1433
+ "S:",
1434
+ localSaturation[0] > 0 ? "+" : "",
1435
+ localSaturation[0],
1436
+ "%"
1437
+ ] }),
1438
+ /* @__PURE__ */ jsxs("span", { children: [
1439
+ "L:",
1440
+ localLightness[0] > 0 ? "+" : "",
1441
+ localLightness[0],
1442
+ "%"
1443
+ ] })
1444
+ ]
1445
+ }
1446
+ )
1447
+ ]
1448
+ }
1449
+ ),
1450
+ /* @__PURE__ */ jsx(
1451
+ "div",
1452
+ {
1453
+ style: {
1454
+ width: "32px",
1455
+ height: "32px",
1456
+ display: "flex",
1457
+ alignItems: "center",
1458
+ justifyContent: "center",
1459
+ borderRadius: "50%",
1460
+ background: "hsl(var(--muted) / 0.5)",
1461
+ flexShrink: 0
1462
+ },
1463
+ children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
1464
+ }
1465
+ )
1466
+ ]
1467
+ }
1468
+ )
1469
+ }
1470
+ )
1471
+ ]
1472
+ }
1473
+ ) });
1489
1474
  }
1490
1475
 
1491
1476
  // src/hooks/useTheme.ts