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