@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.js CHANGED
@@ -1148,394 +1148,379 @@ function ThemeGenerator({
1148
1148
  `;
1149
1149
  document.head.appendChild(style);
1150
1150
  }
1151
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
1152
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1153
- "div",
1154
- {
1155
- onClick: () => setIsOpen(false),
1156
- style: {
1157
- position: "fixed",
1158
- inset: 0,
1159
- background: "rgba(0,0,0,0.2)",
1160
- backdropFilter: "blur(1px)",
1161
- zIndex: 40
1162
- }
1163
- }
1164
- ),
1165
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1166
- "div",
1167
- {
1168
- className: cn(className),
1169
- style: {
1170
- position: "fixed",
1171
- zIndex: 50,
1172
- display: "flex",
1173
- flexDirection: "column",
1174
- gap: "16px",
1175
- ...positionStyle
1176
- },
1177
- children: [
1178
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1179
- "div",
1180
- {
1181
- style: {
1182
- position: "absolute",
1183
- ...panelPosition,
1184
- width: isOpen ? "340px" : "180px",
1185
- height: isOpen ? "auto" : "56px",
1186
- opacity: isOpen ? 1 : 0,
1187
- transform: isOpen ? "scale(1) translateY(0)" : "scale(0.9) translateY(32px)",
1188
- pointerEvents: isOpen ? "auto" : "none",
1189
- transformOrigin: panelOrigin,
1190
- transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)",
1191
- borderRadius: "12px",
1192
- border: "1px solid hsl(var(--border))",
1193
- background: "hsl(var(--card))",
1194
- boxShadow: "0 25px 50px rgba(0,0,0,0.15)",
1195
- overflow: "hidden"
1196
- },
1197
- children: [
1198
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1199
- "div",
1200
- {
1201
- style: {
1202
- display: "flex",
1203
- alignItems: "center",
1204
- justifyContent: "space-between",
1205
- padding: "14px 16px",
1206
- borderBottom: "1px solid hsl(var(--border))",
1207
- background: "hsl(var(--muted) / 0.3)"
1208
- },
1209
- children: [
1210
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1211
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SparklesIcon, { className: "dheme-sparkles" }),
1212
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
1213
- ] }),
1214
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1215
- "button",
1216
- {
1217
- onClick: () => setIsOpen(false),
1218
- style: {
1219
- background: "none",
1220
- border: "none",
1221
- cursor: "pointer",
1222
- padding: "2px",
1223
- color: "hsl(var(--muted-foreground))",
1224
- display: "flex",
1225
- alignItems: "center",
1226
- justifyContent: "center",
1227
- borderRadius: "4px"
1228
- },
1229
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, {})
1230
- }
1231
- )
1232
- ]
1233
- }
1234
- ),
1235
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1236
- "div",
1237
- {
1238
- style: {
1239
- maxHeight: "calc(100vh - 200px)",
1240
- overflowY: "auto",
1241
- background: "hsl(var(--background))"
1242
- },
1243
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1244
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1245
- "p",
1246
- {
1247
- style: {
1248
- fontSize: "11px",
1249
- color: "hsl(var(--muted-foreground))",
1250
- margin: 0,
1251
- lineHeight: 1.5
1252
- },
1253
- children: labels.description
1254
- }
1255
- ),
1256
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1257
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.baseColors }),
1258
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1259
- ColorRow,
1260
- {
1261
- label: labels.primary,
1262
- color: localPrimary,
1263
- onColorChange: setLocalPrimary,
1264
- onInputChange: (v) => {
1265
- if (v.length === 6) setLocalPrimary(`#${v}`);
1266
- }
1267
- }
1268
- ),
1269
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1270
- ColorRow,
1271
- {
1272
- label: labels.secondary,
1273
- badge: labels.optional,
1274
- color: localSecondary,
1275
- disabled: !isSecondaryEnabled,
1276
- onColorChange: (c) => {
1277
- if (isSecondaryEnabled) setLocalSecondary(c);
1278
- },
1279
- onInputChange: (v) => {
1280
- if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1281
- },
1282
- actionButton: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1283
- "button",
1284
- {
1285
- onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1286
- style: {
1287
- background: "none",
1288
- border: "none",
1289
- cursor: "pointer",
1290
- padding: "2px",
1291
- color: "hsl(var(--muted-foreground))",
1292
- display: "flex",
1293
- alignItems: "center",
1294
- justifyContent: "center",
1295
- borderRadius: "4px"
1296
- },
1297
- children: isSecondaryEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlusIcon, {})
1298
- }
1299
- )
1300
- }
1301
- )
1302
- ] }),
1303
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1304
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.fineTuning }),
1305
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1306
- SliderRow,
1307
- {
1308
- label: labels.saturation,
1309
- value: localSaturation,
1310
- onChange: setLocalSaturation,
1311
- min: -100,
1312
- max: 100,
1313
- step: 1,
1314
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1315
- }
1316
- ),
1317
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1318
- SliderRow,
1319
- {
1320
- label: labels.lightness,
1321
- value: localLightness,
1322
- onChange: setLocalLightness,
1323
- min: -100,
1324
- max: 100,
1325
- step: 1,
1326
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1327
- }
1328
- ),
1329
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1330
- SliderRow,
1331
- {
1332
- label: labels.borderRadius,
1333
- value: localRadius,
1334
- onChange: setLocalRadius,
1335
- min: 0,
1336
- max: 2,
1337
- step: 0.1,
1338
- display: (v) => `${v.toFixed(1)}rem`
1339
- }
1340
- )
1341
- ] }),
1342
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1343
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.advancedOptions }),
1344
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1345
- ToggleRow,
1346
- {
1347
- label: labels.colorfulCard,
1348
- checked: localCardIsColored,
1349
- onChange: (v) => handleToggle("cardIsColored", v)
1350
- }
1351
- ),
1352
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1353
- ToggleRow,
1354
- {
1355
- label: labels.colorfulBackground,
1356
- checked: localBackgroundIsColored,
1357
- onChange: (v) => handleToggle("backgroundIsColored", v)
1358
- }
1359
- ),
1360
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1361
- ToggleRow,
1362
- {
1363
- label: labels.colorfulBorder,
1364
- checked: localBorderIsColored,
1365
- onChange: (v) => handleToggle("borderIsColored", v)
1366
- }
1367
- )
1368
- ] })
1369
- ] })
1370
- }
1371
- ),
1372
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1373
- "div",
1374
- {
1375
- style: {
1376
- padding: "10px 12px",
1377
- borderTop: "1px solid hsl(var(--border))",
1378
- background: "hsl(var(--muted) / 0.2)"
1379
- },
1380
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1151
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1152
+ "div",
1153
+ {
1154
+ className: cn(className),
1155
+ style: {
1156
+ position: "fixed",
1157
+ zIndex: 50,
1158
+ display: "flex",
1159
+ flexDirection: "column",
1160
+ gap: "16px",
1161
+ ...positionStyle
1162
+ },
1163
+ children: [
1164
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1165
+ "div",
1166
+ {
1167
+ style: {
1168
+ position: "absolute",
1169
+ ...panelPosition,
1170
+ width: isOpen ? "340px" : "180px",
1171
+ height: isOpen ? "auto" : "56px",
1172
+ opacity: isOpen ? 1 : 0,
1173
+ transform: isOpen ? "scale(1) translateY(0)" : "scale(0.9) translateY(32px)",
1174
+ pointerEvents: isOpen ? "auto" : "none",
1175
+ transformOrigin: panelOrigin,
1176
+ transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)",
1177
+ borderRadius: "12px",
1178
+ border: "1px solid hsl(var(--border))",
1179
+ background: "hsl(var(--card))",
1180
+ boxShadow: "0 25px 50px rgba(0,0,0,0.15)",
1181
+ overflow: "hidden"
1182
+ },
1183
+ children: [
1184
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1185
+ "div",
1186
+ {
1187
+ style: {
1188
+ display: "flex",
1189
+ alignItems: "center",
1190
+ justifyContent: "space-between",
1191
+ padding: "14px 16px",
1192
+ borderBottom: "1px solid hsl(var(--border))",
1193
+ background: "hsl(var(--muted) / 0.3)"
1194
+ },
1195
+ children: [
1196
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1197
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SparklesIcon, { className: "dheme-sparkles" }),
1198
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
1199
+ ] }),
1200
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1381
1201
  "button",
1382
1202
  {
1383
- onClick: handleReset,
1203
+ onClick: () => setIsOpen(false),
1384
1204
  style: {
1385
- width: "100%",
1386
- height: "32px",
1387
1205
  background: "none",
1388
- border: "1px solid hsl(var(--border))",
1389
- borderRadius: "6px",
1206
+ border: "none",
1390
1207
  cursor: "pointer",
1208
+ padding: "2px",
1209
+ color: "hsl(var(--muted-foreground))",
1391
1210
  display: "flex",
1392
1211
  alignItems: "center",
1393
1212
  justifyContent: "center",
1394
- gap: "6px",
1395
- fontSize: "12px",
1396
- color: "hsl(var(--muted-foreground))",
1397
- transition: "background 0.15s"
1398
- },
1399
- onMouseEnter: (e) => {
1400
- e.currentTarget.style.background = "hsl(var(--muted))";
1213
+ borderRadius: "4px"
1401
1214
  },
1402
- onMouseLeave: (e) => {
1403
- e.currentTarget.style.background = "none";
1404
- },
1405
- children: [
1406
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcwIcon, {}),
1407
- labels.reset
1408
- ]
1215
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, {})
1409
1216
  }
1410
1217
  )
1411
- }
1412
- )
1413
- ]
1414
- }
1415
- ),
1416
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1417
- "div",
1418
- {
1419
- onClick: () => setIsOpen(true),
1420
- style: {
1421
- width: isOpen ? "56px" : "180px",
1422
- height: "56px",
1423
- borderRadius: "99px",
1424
- border: "1px solid hsl(var(--border))",
1425
- background: "hsl(var(--card))",
1426
- boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
1427
- cursor: isOpen ? "default" : "pointer",
1428
- position: "relative",
1429
- overflow: "hidden",
1430
- opacity: isOpen ? 0 : 1,
1431
- transform: isOpen ? "scale(0.5) translateY(16px)" : "scale(1) translateY(0)",
1432
- pointerEvents: isOpen ? "none" : "auto",
1433
- transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)"
1434
- },
1435
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1218
+ ]
1219
+ }
1220
+ ),
1221
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1436
1222
  "div",
1437
1223
  {
1438
1224
  style: {
1439
- position: "absolute",
1440
- inset: 0,
1441
- display: "flex",
1442
- alignItems: "center",
1443
- justifyContent: "space-between",
1444
- padding: "0 8px 0 12px"
1225
+ maxHeight: "calc(100vh - 200px)",
1226
+ overflowY: "auto",
1227
+ background: "hsl(var(--background))"
1445
1228
  },
1446
- children: [
1229
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1447
1230
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1448
- "div",
1231
+ "p",
1449
1232
  {
1450
1233
  style: {
1451
- width: "32px",
1452
- height: "32px",
1453
- borderRadius: "50%",
1454
- background: localPrimary,
1455
- border: "1px solid hsl(var(--border))",
1456
- boxShadow: "0 0 0 2px hsl(var(--background))",
1457
- flexShrink: 0
1458
- }
1234
+ fontSize: "11px",
1235
+ color: "hsl(var(--muted-foreground))",
1236
+ margin: 0,
1237
+ lineHeight: 1.5
1238
+ },
1239
+ children: labels.description
1459
1240
  }
1460
1241
  ),
1461
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1462
- "div",
1463
- {
1464
- style: {
1465
- display: "flex",
1466
- flexDirection: "column",
1467
- gap: "2px",
1468
- flex: 1,
1469
- padding: "0 8px"
1470
- },
1471
- children: [
1472
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1473
- "span",
1474
- {
1475
- style: {
1476
- fontSize: "10px",
1477
- fontWeight: 700,
1478
- letterSpacing: "0.08em",
1479
- textTransform: "uppercase",
1480
- color: "hsl(var(--foreground))"
1481
- },
1482
- children: labels.fabPrimaryLabel
1483
- }
1484
- ),
1485
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1486
- "div",
1242
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1243
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.baseColors }),
1244
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1245
+ ColorRow,
1246
+ {
1247
+ label: labels.primary,
1248
+ color: localPrimary,
1249
+ onColorChange: setLocalPrimary,
1250
+ onInputChange: (v) => {
1251
+ if (v.length === 6) setLocalPrimary(`#${v}`);
1252
+ }
1253
+ }
1254
+ ),
1255
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1256
+ ColorRow,
1257
+ {
1258
+ label: labels.secondary,
1259
+ badge: labels.optional,
1260
+ color: localSecondary,
1261
+ disabled: !isSecondaryEnabled,
1262
+ onColorChange: (c) => {
1263
+ if (isSecondaryEnabled) setLocalSecondary(c);
1264
+ },
1265
+ onInputChange: (v) => {
1266
+ if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1267
+ },
1268
+ actionButton: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1269
+ "button",
1487
1270
  {
1271
+ onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1488
1272
  style: {
1273
+ background: "none",
1274
+ border: "none",
1275
+ cursor: "pointer",
1276
+ padding: "2px",
1277
+ color: "hsl(var(--muted-foreground))",
1489
1278
  display: "flex",
1490
- gap: "8px",
1491
- fontSize: "10px",
1492
- fontFamily: "monospace",
1493
- color: "hsl(var(--muted-foreground))"
1279
+ alignItems: "center",
1280
+ justifyContent: "center",
1281
+ borderRadius: "4px"
1494
1282
  },
1495
- children: [
1496
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1497
- "S:",
1498
- localSaturation[0] > 0 ? "+" : "",
1499
- localSaturation[0],
1500
- "%"
1501
- ] }),
1502
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1503
- "L:",
1504
- localLightness[0] > 0 ? "+" : "",
1505
- localLightness[0],
1506
- "%"
1507
- ] })
1508
- ]
1283
+ children: isSecondaryEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlusIcon, {})
1509
1284
  }
1510
1285
  )
1511
- ]
1512
- }
1513
- ),
1514
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1515
- "div",
1516
- {
1517
- style: {
1518
- width: "32px",
1519
- height: "32px",
1520
- display: "flex",
1521
- alignItems: "center",
1522
- justifyContent: "center",
1523
- borderRadius: "50%",
1524
- background: "hsl(var(--muted) / 0.5)",
1525
- flexShrink: 0
1526
- },
1527
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUpIcon, {})
1528
- }
1529
- )
1530
- ]
1286
+ }
1287
+ )
1288
+ ] }),
1289
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1290
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.fineTuning }),
1291
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1292
+ SliderRow,
1293
+ {
1294
+ label: labels.saturation,
1295
+ value: localSaturation,
1296
+ onChange: setLocalSaturation,
1297
+ min: -100,
1298
+ max: 100,
1299
+ step: 1,
1300
+ display: (v) => `${v > 0 ? "+" : ""}${v}%`
1301
+ }
1302
+ ),
1303
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1304
+ SliderRow,
1305
+ {
1306
+ label: labels.lightness,
1307
+ value: localLightness,
1308
+ onChange: setLocalLightness,
1309
+ min: -100,
1310
+ max: 100,
1311
+ step: 1,
1312
+ display: (v) => `${v > 0 ? "+" : ""}${v}%`
1313
+ }
1314
+ ),
1315
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1316
+ SliderRow,
1317
+ {
1318
+ label: labels.borderRadius,
1319
+ value: localRadius,
1320
+ onChange: setLocalRadius,
1321
+ min: 0,
1322
+ max: 2,
1323
+ step: 0.1,
1324
+ display: (v) => `${v.toFixed(1)}rem`
1325
+ }
1326
+ )
1327
+ ] }),
1328
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [
1329
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionHeading, { children: labels.advancedOptions }),
1330
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1331
+ ToggleRow,
1332
+ {
1333
+ label: labels.colorfulCard,
1334
+ checked: localCardIsColored,
1335
+ onChange: (v) => handleToggle("cardIsColored", v)
1336
+ }
1337
+ ),
1338
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1339
+ ToggleRow,
1340
+ {
1341
+ label: labels.colorfulBackground,
1342
+ checked: localBackgroundIsColored,
1343
+ onChange: (v) => handleToggle("backgroundIsColored", v)
1344
+ }
1345
+ ),
1346
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1347
+ ToggleRow,
1348
+ {
1349
+ label: labels.colorfulBorder,
1350
+ checked: localBorderIsColored,
1351
+ onChange: (v) => handleToggle("borderIsColored", v)
1352
+ }
1353
+ )
1354
+ ] })
1355
+ ] })
1356
+ }
1357
+ ),
1358
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1359
+ "div",
1360
+ {
1361
+ style: {
1362
+ padding: "10px 12px",
1363
+ borderTop: "1px solid hsl(var(--border))",
1364
+ background: "hsl(var(--muted) / 0.2)"
1365
+ },
1366
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1367
+ "button",
1368
+ {
1369
+ onClick: handleReset,
1370
+ style: {
1371
+ width: "100%",
1372
+ height: "32px",
1373
+ background: "none",
1374
+ border: "1px solid hsl(var(--border))",
1375
+ borderRadius: "6px",
1376
+ cursor: "pointer",
1377
+ display: "flex",
1378
+ alignItems: "center",
1379
+ justifyContent: "center",
1380
+ gap: "6px",
1381
+ fontSize: "12px",
1382
+ color: "hsl(var(--muted-foreground))",
1383
+ transition: "background 0.15s"
1384
+ },
1385
+ onMouseEnter: (e) => {
1386
+ e.currentTarget.style.background = "hsl(var(--muted))";
1387
+ },
1388
+ onMouseLeave: (e) => {
1389
+ e.currentTarget.style.background = "none";
1390
+ },
1391
+ children: [
1392
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RotateCcwIcon, {}),
1393
+ labels.reset
1394
+ ]
1395
+ }
1396
+ )
1531
1397
  }
1532
1398
  )
1533
- }
1534
- )
1535
- ]
1536
- }
1537
- )
1538
- ] });
1399
+ ]
1400
+ }
1401
+ ),
1402
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1403
+ "div",
1404
+ {
1405
+ onClick: () => setIsOpen(true),
1406
+ style: {
1407
+ width: isOpen ? "56px" : "180px",
1408
+ height: "56px",
1409
+ borderRadius: "99px",
1410
+ border: "1px solid hsl(var(--border))",
1411
+ background: "hsl(var(--card))",
1412
+ boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
1413
+ cursor: isOpen ? "default" : "pointer",
1414
+ position: "relative",
1415
+ overflow: "hidden",
1416
+ opacity: isOpen ? 0 : 1,
1417
+ transform: isOpen ? "scale(0.5) translateY(16px)" : "scale(1) translateY(0)",
1418
+ pointerEvents: isOpen ? "none" : "auto",
1419
+ transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)"
1420
+ },
1421
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1422
+ "div",
1423
+ {
1424
+ style: {
1425
+ position: "absolute",
1426
+ inset: 0,
1427
+ display: "flex",
1428
+ alignItems: "center",
1429
+ justifyContent: "space-between",
1430
+ padding: "0 8px 0 12px"
1431
+ },
1432
+ children: [
1433
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1434
+ "div",
1435
+ {
1436
+ style: {
1437
+ width: "32px",
1438
+ height: "32px",
1439
+ borderRadius: "50%",
1440
+ background: localPrimary,
1441
+ border: "1px solid hsl(var(--border))",
1442
+ boxShadow: "0 0 0 2px hsl(var(--background))",
1443
+ flexShrink: 0
1444
+ }
1445
+ }
1446
+ ),
1447
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1448
+ "div",
1449
+ {
1450
+ style: {
1451
+ display: "flex",
1452
+ flexDirection: "column",
1453
+ gap: "2px",
1454
+ flex: 1,
1455
+ padding: "0 8px"
1456
+ },
1457
+ children: [
1458
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1459
+ "span",
1460
+ {
1461
+ style: {
1462
+ fontSize: "10px",
1463
+ fontWeight: 700,
1464
+ letterSpacing: "0.08em",
1465
+ textTransform: "uppercase",
1466
+ color: "hsl(var(--foreground))"
1467
+ },
1468
+ children: labels.fabPrimaryLabel
1469
+ }
1470
+ ),
1471
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
1472
+ "div",
1473
+ {
1474
+ style: {
1475
+ display: "flex",
1476
+ gap: "8px",
1477
+ fontSize: "10px",
1478
+ fontFamily: "monospace",
1479
+ color: "hsl(var(--muted-foreground))"
1480
+ },
1481
+ children: [
1482
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1483
+ "S:",
1484
+ localSaturation[0] > 0 ? "+" : "",
1485
+ localSaturation[0],
1486
+ "%"
1487
+ ] }),
1488
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
1489
+ "L:",
1490
+ localLightness[0] > 0 ? "+" : "",
1491
+ localLightness[0],
1492
+ "%"
1493
+ ] })
1494
+ ]
1495
+ }
1496
+ )
1497
+ ]
1498
+ }
1499
+ ),
1500
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
1501
+ "div",
1502
+ {
1503
+ style: {
1504
+ width: "32px",
1505
+ height: "32px",
1506
+ display: "flex",
1507
+ alignItems: "center",
1508
+ justifyContent: "center",
1509
+ borderRadius: "50%",
1510
+ background: "hsl(var(--muted) / 0.5)",
1511
+ flexShrink: 0
1512
+ },
1513
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronUpIcon, {})
1514
+ }
1515
+ )
1516
+ ]
1517
+ }
1518
+ )
1519
+ }
1520
+ )
1521
+ ]
1522
+ }
1523
+ ) });
1539
1524
  }
1540
1525
 
1541
1526
  // src/hooks/useTheme.ts