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