@dheme/react 2.4.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 (5) hide show
  1. package/dist/index.d.mts +17 -1
  2. package/dist/index.d.ts +17 -1
  3. package/dist/index.js +361 -365
  4. package/dist/index.mjs +361 -365
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -209,12 +209,15 @@ function DhemeProvider({
209
209
  baseUrl,
210
210
  persist = true,
211
211
  autoApply = true,
212
+ onGenerateTheme: customGenerateTheme,
212
213
  onThemeChange,
213
214
  onModeChange,
214
215
  onError,
215
216
  children
216
217
  }) {
217
218
  const client = useMemo(() => new DhemeClient({ apiKey, baseUrl }), [apiKey, baseUrl]);
219
+ const customGenerateThemeRef = useRef(customGenerateTheme);
220
+ customGenerateThemeRef.current = customGenerateTheme;
218
221
  const [theme, setTheme] = useState(null);
219
222
  const [mode, setModeState] = useState(() => {
220
223
  if (typeof window === "undefined") return defaultMode;
@@ -253,14 +256,23 @@ function DhemeProvider({
253
256
  }
254
257
  }
255
258
  }, [theme, mode, autoApply]);
259
+ const fetchTheme = useCallback(
260
+ async (params) => {
261
+ if (customGenerateThemeRef.current) {
262
+ return customGenerateThemeRef.current(params);
263
+ }
264
+ const response = await client.generateTheme(params);
265
+ return response.data;
266
+ },
267
+ [client]
268
+ );
256
269
  const generateTheme = useCallback(
257
270
  async (params) => {
258
271
  abortRef.current?.abort();
259
272
  setIsLoading(true);
260
273
  setError(null);
261
274
  try {
262
- const response = await client.generateTheme(params);
263
- const data = response.data;
275
+ const data = await fetchTheme(params);
264
276
  setTheme(data);
265
277
  setIsReady(true);
266
278
  if (autoApplyRef.current) {
@@ -280,7 +292,7 @@ function DhemeProvider({
280
292
  setIsLoading(false);
281
293
  }
282
294
  },
283
- [client]
295
+ [fetchTheme]
284
296
  );
285
297
  const clearTheme = useCallback(() => {
286
298
  setTheme(null);
@@ -303,9 +315,8 @@ function DhemeProvider({
303
315
  if (autoApply) applyThemeCSSVariables(cached, mode);
304
316
  const controller = new AbortController();
305
317
  abortRef.current = controller;
306
- client.generateTheme(params).then((response) => {
318
+ fetchTheme(params).then((data) => {
307
319
  if (controller.signal.aborted) return;
308
- const data = response.data;
309
320
  const cachedLight = JSON.stringify(cached.colors.light);
310
321
  const freshLight = JSON.stringify(data.colors.light);
311
322
  if (cachedLight !== freshLight) {
@@ -1087,394 +1098,379 @@ function ThemeGenerator({
1087
1098
  `;
1088
1099
  document.head.appendChild(style);
1089
1100
  }
1090
- return /* @__PURE__ */ jsxs(Fragment, { children: [
1091
- isOpen && /* @__PURE__ */ jsx(
1092
- "div",
1093
- {
1094
- onClick: () => setIsOpen(false),
1095
- style: {
1096
- position: "fixed",
1097
- inset: 0,
1098
- background: "rgba(0,0,0,0.2)",
1099
- backdropFilter: "blur(1px)",
1100
- zIndex: 40
1101
- }
1102
- }
1103
- ),
1104
- /* @__PURE__ */ jsxs(
1105
- "div",
1106
- {
1107
- className: cn(className),
1108
- style: {
1109
- position: "fixed",
1110
- zIndex: 50,
1111
- display: "flex",
1112
- flexDirection: "column",
1113
- gap: "16px",
1114
- ...positionStyle
1115
- },
1116
- children: [
1117
- /* @__PURE__ */ jsxs(
1118
- "div",
1119
- {
1120
- style: {
1121
- position: "absolute",
1122
- ...panelPosition,
1123
- width: isOpen ? "340px" : "180px",
1124
- height: isOpen ? "auto" : "56px",
1125
- opacity: isOpen ? 1 : 0,
1126
- transform: isOpen ? "scale(1) translateY(0)" : "scale(0.9) translateY(32px)",
1127
- pointerEvents: isOpen ? "auto" : "none",
1128
- transformOrigin: panelOrigin,
1129
- transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)",
1130
- borderRadius: "12px",
1131
- border: "1px solid hsl(var(--border))",
1132
- background: "hsl(var(--card))",
1133
- boxShadow: "0 25px 50px rgba(0,0,0,0.15)",
1134
- overflow: "hidden"
1135
- },
1136
- children: [
1137
- /* @__PURE__ */ jsxs(
1138
- "div",
1139
- {
1140
- style: {
1141
- display: "flex",
1142
- alignItems: "center",
1143
- justifyContent: "space-between",
1144
- padding: "14px 16px",
1145
- borderBottom: "1px solid hsl(var(--border))",
1146
- background: "hsl(var(--muted) / 0.3)"
1147
- },
1148
- children: [
1149
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1150
- /* @__PURE__ */ jsx(SparklesIcon, { className: "dheme-sparkles" }),
1151
- /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "hsl(var(--foreground))" }, children: labels.title })
1152
- ] }),
1153
- /* @__PURE__ */ jsx(
1154
- "button",
1155
- {
1156
- onClick: () => setIsOpen(false),
1157
- style: {
1158
- background: "none",
1159
- border: "none",
1160
- cursor: "pointer",
1161
- padding: "2px",
1162
- color: "hsl(var(--muted-foreground))",
1163
- display: "flex",
1164
- alignItems: "center",
1165
- justifyContent: "center",
1166
- borderRadius: "4px"
1167
- },
1168
- children: /* @__PURE__ */ jsx(XIcon, {})
1169
- }
1170
- )
1171
- ]
1172
- }
1173
- ),
1174
- /* @__PURE__ */ jsx(
1175
- "div",
1176
- {
1177
- style: {
1178
- maxHeight: "calc(100vh - 200px)",
1179
- overflowY: "auto",
1180
- background: "hsl(var(--background))"
1181
- },
1182
- children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1183
- /* @__PURE__ */ jsx(
1184
- "p",
1185
- {
1186
- style: {
1187
- fontSize: "11px",
1188
- color: "hsl(var(--muted-foreground))",
1189
- margin: 0,
1190
- lineHeight: 1.5
1191
- },
1192
- children: labels.description
1193
- }
1194
- ),
1195
- /* @__PURE__ */ jsxs("section", { children: [
1196
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.baseColors }),
1197
- /* @__PURE__ */ jsx(
1198
- ColorRow,
1199
- {
1200
- label: labels.primary,
1201
- color: localPrimary,
1202
- onColorChange: setLocalPrimary,
1203
- onInputChange: (v) => {
1204
- if (v.length === 6) setLocalPrimary(`#${v}`);
1205
- }
1206
- }
1207
- ),
1208
- /* @__PURE__ */ jsx(
1209
- ColorRow,
1210
- {
1211
- label: labels.secondary,
1212
- badge: labels.optional,
1213
- color: localSecondary,
1214
- disabled: !isSecondaryEnabled,
1215
- onColorChange: (c) => {
1216
- if (isSecondaryEnabled) setLocalSecondary(c);
1217
- },
1218
- onInputChange: (v) => {
1219
- if (isSecondaryEnabled && v.length === 6) setLocalSecondary(`#${v}`);
1220
- },
1221
- actionButton: /* @__PURE__ */ jsx(
1222
- "button",
1223
- {
1224
- onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1225
- style: {
1226
- background: "none",
1227
- border: "none",
1228
- cursor: "pointer",
1229
- padding: "2px",
1230
- color: "hsl(var(--muted-foreground))",
1231
- display: "flex",
1232
- alignItems: "center",
1233
- justifyContent: "center",
1234
- borderRadius: "4px"
1235
- },
1236
- children: isSecondaryEnabled ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
1237
- }
1238
- )
1239
- }
1240
- )
1241
- ] }),
1242
- /* @__PURE__ */ jsxs("section", { children: [
1243
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.fineTuning }),
1244
- /* @__PURE__ */ jsx(
1245
- SliderRow,
1246
- {
1247
- label: labels.saturation,
1248
- value: localSaturation,
1249
- onChange: setLocalSaturation,
1250
- min: -100,
1251
- max: 100,
1252
- step: 1,
1253
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1254
- }
1255
- ),
1256
- /* @__PURE__ */ jsx(
1257
- SliderRow,
1258
- {
1259
- label: labels.lightness,
1260
- value: localLightness,
1261
- onChange: setLocalLightness,
1262
- min: -100,
1263
- max: 100,
1264
- step: 1,
1265
- display: (v) => `${v > 0 ? "+" : ""}${v}%`
1266
- }
1267
- ),
1268
- /* @__PURE__ */ jsx(
1269
- SliderRow,
1270
- {
1271
- label: labels.borderRadius,
1272
- value: localRadius,
1273
- onChange: setLocalRadius,
1274
- min: 0,
1275
- max: 2,
1276
- step: 0.1,
1277
- display: (v) => `${v.toFixed(1)}rem`
1278
- }
1279
- )
1280
- ] }),
1281
- /* @__PURE__ */ jsxs("section", { children: [
1282
- /* @__PURE__ */ jsx(SectionHeading, { children: labels.advancedOptions }),
1283
- /* @__PURE__ */ jsx(
1284
- ToggleRow,
1285
- {
1286
- label: labels.colorfulCard,
1287
- checked: localCardIsColored,
1288
- onChange: (v) => handleToggle("cardIsColored", v)
1289
- }
1290
- ),
1291
- /* @__PURE__ */ jsx(
1292
- ToggleRow,
1293
- {
1294
- label: labels.colorfulBackground,
1295
- checked: localBackgroundIsColored,
1296
- onChange: (v) => handleToggle("backgroundIsColored", v)
1297
- }
1298
- ),
1299
- /* @__PURE__ */ jsx(
1300
- ToggleRow,
1301
- {
1302
- label: labels.colorfulBorder,
1303
- checked: localBorderIsColored,
1304
- onChange: (v) => handleToggle("borderIsColored", v)
1305
- }
1306
- )
1307
- ] })
1308
- ] })
1309
- }
1310
- ),
1311
- /* @__PURE__ */ jsx(
1312
- "div",
1313
- {
1314
- style: {
1315
- padding: "10px 12px",
1316
- borderTop: "1px solid hsl(var(--border))",
1317
- background: "hsl(var(--muted) / 0.2)"
1318
- },
1319
- 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(
1320
1151
  "button",
1321
1152
  {
1322
- onClick: handleReset,
1153
+ onClick: () => setIsOpen(false),
1323
1154
  style: {
1324
- width: "100%",
1325
- height: "32px",
1326
1155
  background: "none",
1327
- border: "1px solid hsl(var(--border))",
1328
- borderRadius: "6px",
1156
+ border: "none",
1329
1157
  cursor: "pointer",
1158
+ padding: "2px",
1159
+ color: "hsl(var(--muted-foreground))",
1330
1160
  display: "flex",
1331
1161
  alignItems: "center",
1332
1162
  justifyContent: "center",
1333
- gap: "6px",
1334
- fontSize: "12px",
1335
- color: "hsl(var(--muted-foreground))",
1336
- transition: "background 0.15s"
1337
- },
1338
- onMouseEnter: (e) => {
1339
- e.currentTarget.style.background = "hsl(var(--muted))";
1163
+ borderRadius: "4px"
1340
1164
  },
1341
- onMouseLeave: (e) => {
1342
- e.currentTarget.style.background = "none";
1343
- },
1344
- children: [
1345
- /* @__PURE__ */ jsx(RotateCcwIcon, {}),
1346
- labels.reset
1347
- ]
1165
+ children: /* @__PURE__ */ jsx(XIcon, {})
1348
1166
  }
1349
1167
  )
1350
- }
1351
- )
1352
- ]
1353
- }
1354
- ),
1355
- /* @__PURE__ */ jsx(
1356
- "div",
1357
- {
1358
- onClick: () => setIsOpen(true),
1359
- style: {
1360
- width: isOpen ? "56px" : "180px",
1361
- height: "56px",
1362
- borderRadius: "99px",
1363
- border: "1px solid hsl(var(--border))",
1364
- background: "hsl(var(--card))",
1365
- boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
1366
- cursor: isOpen ? "default" : "pointer",
1367
- position: "relative",
1368
- overflow: "hidden",
1369
- opacity: isOpen ? 0 : 1,
1370
- transform: isOpen ? "scale(0.5) translateY(16px)" : "scale(1) translateY(0)",
1371
- pointerEvents: isOpen ? "none" : "auto",
1372
- transition: "all 500ms cubic-bezier(0.32, 0.72, 0, 1)"
1373
- },
1374
- children: /* @__PURE__ */ jsxs(
1168
+ ]
1169
+ }
1170
+ ),
1171
+ /* @__PURE__ */ jsx(
1375
1172
  "div",
1376
1173
  {
1377
1174
  style: {
1378
- position: "absolute",
1379
- inset: 0,
1380
- display: "flex",
1381
- alignItems: "center",
1382
- justifyContent: "space-between",
1383
- padding: "0 8px 0 12px"
1175
+ maxHeight: "calc(100vh - 200px)",
1176
+ overflowY: "auto",
1177
+ background: "hsl(var(--background))"
1384
1178
  },
1385
- children: [
1179
+ children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px", display: "flex", flexDirection: "column", gap: "24px" }, children: [
1386
1180
  /* @__PURE__ */ jsx(
1387
- "div",
1181
+ "p",
1388
1182
  {
1389
1183
  style: {
1390
- width: "32px",
1391
- height: "32px",
1392
- borderRadius: "50%",
1393
- background: localPrimary,
1394
- border: "1px solid hsl(var(--border))",
1395
- boxShadow: "0 0 0 2px hsl(var(--background))",
1396
- flexShrink: 0
1397
- }
1184
+ fontSize: "11px",
1185
+ color: "hsl(var(--muted-foreground))",
1186
+ margin: 0,
1187
+ lineHeight: 1.5
1188
+ },
1189
+ children: labels.description
1398
1190
  }
1399
1191
  ),
1400
- /* @__PURE__ */ jsxs(
1401
- "div",
1402
- {
1403
- style: {
1404
- display: "flex",
1405
- flexDirection: "column",
1406
- gap: "2px",
1407
- flex: 1,
1408
- padding: "0 8px"
1409
- },
1410
- children: [
1411
- /* @__PURE__ */ jsx(
1412
- "span",
1413
- {
1414
- style: {
1415
- fontSize: "10px",
1416
- fontWeight: 700,
1417
- letterSpacing: "0.08em",
1418
- textTransform: "uppercase",
1419
- color: "hsl(var(--foreground))"
1420
- },
1421
- children: labels.fabPrimaryLabel
1422
- }
1423
- ),
1424
- /* @__PURE__ */ jsxs(
1425
- "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",
1426
1220
  {
1221
+ onClick: isSecondaryEnabled ? handleDisableSecondary : handleEnableSecondary,
1427
1222
  style: {
1223
+ background: "none",
1224
+ border: "none",
1225
+ cursor: "pointer",
1226
+ padding: "2px",
1227
+ color: "hsl(var(--muted-foreground))",
1428
1228
  display: "flex",
1429
- gap: "8px",
1430
- fontSize: "10px",
1431
- fontFamily: "monospace",
1432
- color: "hsl(var(--muted-foreground))"
1229
+ alignItems: "center",
1230
+ justifyContent: "center",
1231
+ borderRadius: "4px"
1433
1232
  },
1434
- children: [
1435
- /* @__PURE__ */ jsxs("span", { children: [
1436
- "S:",
1437
- localSaturation[0] > 0 ? "+" : "",
1438
- localSaturation[0],
1439
- "%"
1440
- ] }),
1441
- /* @__PURE__ */ jsxs("span", { children: [
1442
- "L:",
1443
- localLightness[0] > 0 ? "+" : "",
1444
- localLightness[0],
1445
- "%"
1446
- ] })
1447
- ]
1233
+ children: isSecondaryEnabled ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(PlusIcon, {})
1448
1234
  }
1449
1235
  )
1450
- ]
1451
- }
1452
- ),
1453
- /* @__PURE__ */ jsx(
1454
- "div",
1455
- {
1456
- style: {
1457
- width: "32px",
1458
- height: "32px",
1459
- display: "flex",
1460
- alignItems: "center",
1461
- justifyContent: "center",
1462
- borderRadius: "50%",
1463
- background: "hsl(var(--muted) / 0.5)",
1464
- flexShrink: 0
1465
- },
1466
- children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
1467
- }
1468
- )
1469
- ]
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
+ )
1470
1347
  }
1471
1348
  )
1472
- }
1473
- )
1474
- ]
1475
- }
1476
- )
1477
- ] });
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
+ ) });
1478
1474
  }
1479
1475
 
1480
1476
  // src/hooks/useTheme.ts