@optilogic/core 1.4.0 → 1.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.
- package/dist/index.cjs +249 -102
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +59 -10
- package/dist/index.d.ts +59 -10
- package/dist/index.js +247 -103
- package/dist/index.js.map +1 -1
- package/dist/styles.css +12 -0
- package/dist/tailwind-preset.cjs +10 -2
- package/dist/tailwind-preset.cjs.map +1 -1
- package/dist/tailwind-preset.js +10 -2
- package/dist/tailwind-preset.js.map +1 -1
- package/package.json +2 -2
- package/src/components/confirmation-modal.tsx +41 -6
- package/src/components/data-grid/components/CellEditor.tsx +5 -2
- package/src/components/data-grid/components/FilterPopover.tsx +7 -4
- package/src/components/data-grid/utils/dataProcessing.ts +2 -1
- package/src/components/modal.tsx +55 -1
- package/src/components/resizable-panel.tsx +1 -1
- package/src/components/theme-picker.tsx +4 -2
- package/src/index.ts +3 -0
- package/src/styles.css +12 -0
- package/src/tailwind-preset.ts +9 -0
- package/src/theme/index.ts +3 -0
- package/src/theme/presets.ts +166 -91
- package/src/theme/types.ts +8 -0
- package/src/theme/utils.ts +57 -0
package/dist/index.js
CHANGED
|
@@ -2092,7 +2092,9 @@ function Modal({
|
|
|
2092
2092
|
size = "md",
|
|
2093
2093
|
zIndex = 50,
|
|
2094
2094
|
className,
|
|
2095
|
-
contentClassName
|
|
2095
|
+
contentClassName,
|
|
2096
|
+
responsive = false,
|
|
2097
|
+
forceMobile = false
|
|
2096
2098
|
}) {
|
|
2097
2099
|
React20.useEffect(() => {
|
|
2098
2100
|
if (!isOpen) return;
|
|
@@ -2123,10 +2125,18 @@ function Modal({
|
|
|
2123
2125
|
"2xl": "max-w-6xl",
|
|
2124
2126
|
full: "max-w-[95vw]"
|
|
2125
2127
|
};
|
|
2128
|
+
const responsiveOuter = "[@media(pointer:coarse)and(hover:none)]:!p-0";
|
|
2129
|
+
const responsiveFrame = "[@media(pointer:coarse)and(hover:none)]:!w-screen [@media(pointer:coarse)and(hover:none)]:!h-[100dvh] [@media(pointer:coarse)and(hover:none)]:!max-h-[100dvh] [@media(pointer:coarse)and(hover:none)]:!max-w-none [@media(pointer:coarse)and(hover:none)]:!rounded-none [@media(pointer:coarse)and(hover:none)]:!border-0";
|
|
2130
|
+
const forcedOuter = "!p-0";
|
|
2131
|
+
const forcedFrame = "!w-screen !h-[100dvh] !max-h-[100dvh] !max-w-none !rounded-none !border-0";
|
|
2126
2132
|
return /* @__PURE__ */ jsxs(
|
|
2127
2133
|
"div",
|
|
2128
2134
|
{
|
|
2129
|
-
className:
|
|
2135
|
+
className: cn(
|
|
2136
|
+
"fixed inset-0 flex items-center justify-center p-4",
|
|
2137
|
+
responsive && responsiveOuter,
|
|
2138
|
+
forceMobile && forcedOuter
|
|
2139
|
+
),
|
|
2130
2140
|
style: { zIndex },
|
|
2131
2141
|
onClick: onClose,
|
|
2132
2142
|
children: [
|
|
@@ -2140,6 +2150,8 @@ function Modal({
|
|
|
2140
2150
|
"flex flex-col",
|
|
2141
2151
|
"max-h-[90vh]",
|
|
2142
2152
|
sizeClasses[size],
|
|
2153
|
+
responsive && responsiveFrame,
|
|
2154
|
+
forceMobile && forcedFrame,
|
|
2143
2155
|
contentClassName
|
|
2144
2156
|
),
|
|
2145
2157
|
onClick: (e) => e.stopPropagation(),
|
|
@@ -2185,6 +2197,27 @@ function ModalButton({
|
|
|
2185
2197
|
}
|
|
2186
2198
|
);
|
|
2187
2199
|
}
|
|
2200
|
+
var mobileSheetContentClasses = [
|
|
2201
|
+
"[@media(pointer:coarse)and(hover:none)]:!top-auto",
|
|
2202
|
+
"[@media(pointer:coarse)and(hover:none)]:!bottom-0",
|
|
2203
|
+
"[@media(pointer:coarse)and(hover:none)]:!left-0",
|
|
2204
|
+
"[@media(pointer:coarse)and(hover:none)]:!translate-x-0",
|
|
2205
|
+
"[@media(pointer:coarse)and(hover:none)]:!translate-y-0",
|
|
2206
|
+
"[@media(pointer:coarse)and(hover:none)]:!w-screen",
|
|
2207
|
+
"[@media(pointer:coarse)and(hover:none)]:!max-w-none",
|
|
2208
|
+
"[@media(pointer:coarse)and(hover:none)]:!rounded-t-xl",
|
|
2209
|
+
"[@media(pointer:coarse)and(hover:none)]:!rounded-b-none",
|
|
2210
|
+
"[@media(pointer:coarse)and(hover:none)]:!pb-[calc(1.5rem+env(safe-area-inset-bottom))]"
|
|
2211
|
+
].join(" ");
|
|
2212
|
+
var mobileSheetFooterClasses = [
|
|
2213
|
+
// Stack buttons full-width with comfortable tap targets on touch devices.
|
|
2214
|
+
"[@media(pointer:coarse)and(hover:none)]:!flex-col",
|
|
2215
|
+
"[@media(pointer:coarse)and(hover:none)]:!gap-2"
|
|
2216
|
+
].join(" ");
|
|
2217
|
+
var mobileSheetActionClasses = [
|
|
2218
|
+
"[@media(pointer:coarse)and(hover:none)]:!w-full",
|
|
2219
|
+
"[@media(pointer:coarse)and(hover:none)]:!min-h-11"
|
|
2220
|
+
].join(" ");
|
|
2188
2221
|
function ConfirmationModal({
|
|
2189
2222
|
open,
|
|
2190
2223
|
onOpenChange,
|
|
@@ -2204,18 +2237,28 @@ function ConfirmationModal({
|
|
|
2204
2237
|
onConfirm();
|
|
2205
2238
|
onOpenChange(false);
|
|
2206
2239
|
};
|
|
2207
|
-
return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
|
|
2240
|
+
return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { className: mobileSheetContentClasses, children: [
|
|
2208
2241
|
/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
|
|
2209
2242
|
/* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
|
|
2210
2243
|
/* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
|
|
2211
2244
|
] }),
|
|
2212
|
-
/* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
|
|
2213
|
-
/* @__PURE__ */ jsx(
|
|
2245
|
+
/* @__PURE__ */ jsxs(AlertDialogFooter, { className: mobileSheetFooterClasses, children: [
|
|
2246
|
+
/* @__PURE__ */ jsx(
|
|
2247
|
+
AlertDialogCancel,
|
|
2248
|
+
{
|
|
2249
|
+
onClick: handleCancel,
|
|
2250
|
+
className: mobileSheetActionClasses,
|
|
2251
|
+
children: cancelLabel
|
|
2252
|
+
}
|
|
2253
|
+
),
|
|
2214
2254
|
/* @__PURE__ */ jsx(
|
|
2215
2255
|
AlertDialogAction,
|
|
2216
2256
|
{
|
|
2217
2257
|
onClick: handleConfirm,
|
|
2218
|
-
className:
|
|
2258
|
+
className: [
|
|
2259
|
+
destructive ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "",
|
|
2260
|
+
mobileSheetActionClasses
|
|
2261
|
+
].filter(Boolean).join(" "),
|
|
2219
2262
|
children: confirmLabel
|
|
2220
2263
|
}
|
|
2221
2264
|
)
|
|
@@ -2410,7 +2453,7 @@ function ResizablePanel({
|
|
|
2410
2453
|
const currentWidthVW = isExpanded ? (isDragging && localWidth !== null ? localWidth : expandedWidthVW) || collapsedSizeVW : collapsedSizeVW;
|
|
2411
2454
|
const clampWidth = React20.useCallback(
|
|
2412
2455
|
(width) => {
|
|
2413
|
-
|
|
2456
|
+
const effectiveMinWidth = minWidthVW;
|
|
2414
2457
|
let effectiveMaxWidth = maxWidthVW;
|
|
2415
2458
|
if (orientation === "right" && leftWidthVW !== void 0 && !isOverlay) {
|
|
2416
2459
|
const availableSpace = 100 - leftWidthVW - 3;
|
|
@@ -3300,7 +3343,7 @@ function FilterPopover({
|
|
|
3300
3343
|
] })
|
|
3301
3344
|
] });
|
|
3302
3345
|
const renderDateFilter = () => {
|
|
3303
|
-
const dateValue =
|
|
3346
|
+
const dateValue = (() => {
|
|
3304
3347
|
if (!value) return void 0;
|
|
3305
3348
|
if (value instanceof Date) return value;
|
|
3306
3349
|
if (typeof value === "string") {
|
|
@@ -3308,8 +3351,8 @@ function FilterPopover({
|
|
|
3308
3351
|
return isValid(parsed) ? parsed : void 0;
|
|
3309
3352
|
}
|
|
3310
3353
|
return void 0;
|
|
3311
|
-
}
|
|
3312
|
-
const dateToValue =
|
|
3354
|
+
})();
|
|
3355
|
+
const dateToValue = (() => {
|
|
3313
3356
|
if (!valueTo) return void 0;
|
|
3314
3357
|
if (valueTo instanceof Date) return valueTo;
|
|
3315
3358
|
if (typeof valueTo === "string") {
|
|
@@ -3317,7 +3360,7 @@ function FilterPopover({
|
|
|
3317
3360
|
return isValid(parsed) ? parsed : void 0;
|
|
3318
3361
|
}
|
|
3319
3362
|
return void 0;
|
|
3320
|
-
}
|
|
3363
|
+
})();
|
|
3321
3364
|
const handleDateChange = (date) => {
|
|
3322
3365
|
setValue(date ? format(date, "yyyy-MM-dd") : "");
|
|
3323
3366
|
};
|
|
@@ -3707,7 +3750,7 @@ function CellEditor({
|
|
|
3707
3750
|
}
|
|
3708
3751
|
);
|
|
3709
3752
|
const renderDateEditor = () => {
|
|
3710
|
-
const dateValue =
|
|
3753
|
+
const dateValue = (() => {
|
|
3711
3754
|
if (!currentValue) return void 0;
|
|
3712
3755
|
if (currentValue instanceof Date) return currentValue;
|
|
3713
3756
|
if (typeof currentValue === "string") {
|
|
@@ -3715,7 +3758,7 @@ function CellEditor({
|
|
|
3715
3758
|
return isValid(parsed) ? parsed : void 0;
|
|
3716
3759
|
}
|
|
3717
3760
|
return void 0;
|
|
3718
|
-
}
|
|
3761
|
+
})();
|
|
3719
3762
|
const handleDateChange = (date) => {
|
|
3720
3763
|
const stringValue = date ? format(date, "yyyy-MM-dd") : "";
|
|
3721
3764
|
if (validate(stringValue)) {
|
|
@@ -4678,10 +4721,11 @@ function applyFilterOperator(value, filterValue, filterValueTo, operator, filter
|
|
|
4678
4721
|
return numValue < numFilterValue;
|
|
4679
4722
|
case "lte":
|
|
4680
4723
|
return numValue <= numFilterValue;
|
|
4681
|
-
case "between":
|
|
4724
|
+
case "between": {
|
|
4682
4725
|
const singleFilterValueTo = extractSingleValue(filterValueTo);
|
|
4683
4726
|
const numFilterValueTo = Number(singleFilterValueTo);
|
|
4684
4727
|
return numValue >= numFilterValue && numValue <= numFilterValueTo;
|
|
4728
|
+
}
|
|
4685
4729
|
default:
|
|
4686
4730
|
return true;
|
|
4687
4731
|
}
|
|
@@ -6369,104 +6413,112 @@ function CopyButton({ content, className, size = "md" }) {
|
|
|
6369
6413
|
}
|
|
6370
6414
|
|
|
6371
6415
|
// src/theme/presets.ts
|
|
6372
|
-
var
|
|
6373
|
-
id: "optilogic-
|
|
6374
|
-
name: "Optilogic
|
|
6375
|
-
description: "
|
|
6416
|
+
var OPTILOGIC_LIGHT_THEME = {
|
|
6417
|
+
id: "optilogic-light",
|
|
6418
|
+
name: "Optilogic Light",
|
|
6419
|
+
description: "The default Optilogic light theme",
|
|
6376
6420
|
author: "Optilogic",
|
|
6377
|
-
background: "#
|
|
6378
|
-
foreground: "#
|
|
6379
|
-
card: "#
|
|
6380
|
-
cardForeground: "#
|
|
6381
|
-
popover: "#
|
|
6382
|
-
popoverForeground: "#
|
|
6383
|
-
primary: "#
|
|
6384
|
-
primaryForeground: "#
|
|
6385
|
-
|
|
6421
|
+
background: "#F3F4FF",
|
|
6422
|
+
foreground: "#000000",
|
|
6423
|
+
card: "#EDEEFF",
|
|
6424
|
+
cardForeground: "#000000",
|
|
6425
|
+
popover: "#EDEEFF",
|
|
6426
|
+
popoverForeground: "#000000",
|
|
6427
|
+
primary: "#5766F2",
|
|
6428
|
+
primaryForeground: "#000000",
|
|
6429
|
+
primaryHover: "#4555E0",
|
|
6430
|
+
accent: "#929BEF",
|
|
6386
6431
|
accentForeground: "#0C0A5A",
|
|
6387
|
-
secondary: "#
|
|
6388
|
-
secondaryForeground: "#
|
|
6389
|
-
muted: "#
|
|
6390
|
-
mutedForeground: "#
|
|
6391
|
-
destructive: "#
|
|
6432
|
+
secondary: "#CFD4FB",
|
|
6433
|
+
secondaryForeground: "#000000",
|
|
6434
|
+
muted: "#E8ECFF",
|
|
6435
|
+
mutedForeground: "#2E2D5E",
|
|
6436
|
+
destructive: "#DC2626",
|
|
6392
6437
|
destructiveForeground: "#FFFFFF",
|
|
6393
|
-
success: "#
|
|
6394
|
-
successForeground: "#
|
|
6395
|
-
warning: "#
|
|
6396
|
-
warningForeground: "#
|
|
6397
|
-
chip: "#
|
|
6398
|
-
chipForeground: "#
|
|
6399
|
-
border: "#
|
|
6400
|
-
input: "#
|
|
6438
|
+
success: "#929BEF",
|
|
6439
|
+
successForeground: "#0C0A5A",
|
|
6440
|
+
warning: "#B45309",
|
|
6441
|
+
warningForeground: "#FFFFFF",
|
|
6442
|
+
chip: "#5766F2",
|
|
6443
|
+
chipForeground: "#FFFFFF",
|
|
6444
|
+
border: "#C8CEFF",
|
|
6445
|
+
input: "#C8CEFF",
|
|
6401
6446
|
ring: "#5766F2",
|
|
6402
|
-
popoverBorder: "#
|
|
6403
|
-
divider: "#
|
|
6404
|
-
toggleTrack: "#
|
|
6447
|
+
popoverBorder: "#C8CEFF",
|
|
6448
|
+
divider: "#B8BEE0",
|
|
6449
|
+
toggleTrack: "#929BEF",
|
|
6405
6450
|
toggleTrackForeground: "#FFFFFF",
|
|
6406
6451
|
inputHover: "#5766F2",
|
|
6407
|
-
chart1: "#
|
|
6408
|
-
chart2: "#
|
|
6409
|
-
chart3: "#
|
|
6410
|
-
chart4: "#
|
|
6411
|
-
chart5: "#
|
|
6412
|
-
chart6: "#
|
|
6413
|
-
chart7: "#
|
|
6414
|
-
chart8: "#
|
|
6415
|
-
chart9: "#
|
|
6416
|
-
chart10: "#
|
|
6417
|
-
chart11: "#
|
|
6418
|
-
chart12: "#
|
|
6419
|
-
radius: "0.5rem"
|
|
6452
|
+
chart1: "#5766F2",
|
|
6453
|
+
chart2: "#929BEF",
|
|
6454
|
+
chart3: "#CFD4FB",
|
|
6455
|
+
chart4: "#0C0A5A",
|
|
6456
|
+
chart5: "#B45309",
|
|
6457
|
+
chart6: "#DC2626",
|
|
6458
|
+
chart7: "#A855F7",
|
|
6459
|
+
chart8: "#EC4899",
|
|
6460
|
+
chart9: "#55548C",
|
|
6461
|
+
chart10: "#0C0A5A",
|
|
6462
|
+
chart11: "#C05621",
|
|
6463
|
+
chart12: "#06B6D4",
|
|
6464
|
+
radius: "0.5rem",
|
|
6465
|
+
brandGradientFrom: "#1A7B4A",
|
|
6466
|
+
brandGradientTo: "#72DA60"
|
|
6420
6467
|
};
|
|
6421
6468
|
var OPTILOGIC_DARK_THEME = {
|
|
6422
6469
|
id: "optilogic-dark",
|
|
6423
6470
|
name: "Optilogic Dark",
|
|
6424
|
-
description: "Optilogic
|
|
6471
|
+
description: "The default Optilogic dark theme",
|
|
6425
6472
|
author: "Optilogic",
|
|
6426
|
-
background: "#
|
|
6427
|
-
foreground: "#
|
|
6428
|
-
card: "#
|
|
6429
|
-
cardForeground: "#
|
|
6430
|
-
popover: "#
|
|
6431
|
-
popoverForeground: "#
|
|
6432
|
-
primary: "#
|
|
6433
|
-
primaryForeground: "#
|
|
6434
|
-
|
|
6435
|
-
|
|
6436
|
-
|
|
6437
|
-
|
|
6438
|
-
|
|
6439
|
-
|
|
6473
|
+
background: "#141826",
|
|
6474
|
+
foreground: "#E8EAF0",
|
|
6475
|
+
card: "#2D3252",
|
|
6476
|
+
cardForeground: "#E8EAF0",
|
|
6477
|
+
popover: "#2D3252",
|
|
6478
|
+
popoverForeground: "#E8EAF0",
|
|
6479
|
+
primary: "#5766F2",
|
|
6480
|
+
primaryForeground: "#FFFFFF",
|
|
6481
|
+
primaryHover: "#7B8FF7",
|
|
6482
|
+
accent: "#5766F2",
|
|
6483
|
+
accentForeground: "#FFFFFF",
|
|
6484
|
+
accentHover: "#7B8FF7",
|
|
6485
|
+
secondary: "#2D3252",
|
|
6486
|
+
secondaryForeground: "#E8EAF0",
|
|
6487
|
+
muted: "#2D3252",
|
|
6488
|
+
mutedForeground: "#C5C9D4",
|
|
6440
6489
|
destructive: "#EF4444",
|
|
6441
6490
|
destructiveForeground: "#FFFFFF",
|
|
6442
|
-
success: "#
|
|
6443
|
-
successForeground: "#
|
|
6444
|
-
warning: "#
|
|
6445
|
-
warningForeground: "#
|
|
6446
|
-
chip: "#
|
|
6447
|
-
chipForeground: "#
|
|
6448
|
-
border: "#
|
|
6449
|
-
input: "#
|
|
6450
|
-
ring: "#
|
|
6451
|
-
popoverBorder: "#
|
|
6452
|
-
divider: "#
|
|
6453
|
-
toggleTrack: "#
|
|
6454
|
-
toggleTrackForeground: "#
|
|
6455
|
-
inputHover: "#
|
|
6456
|
-
chart1: "#
|
|
6457
|
-
chart2: "#
|
|
6458
|
-
chart3: "#
|
|
6459
|
-
chart4: "#
|
|
6460
|
-
chart5: "#
|
|
6491
|
+
success: "#22C55E",
|
|
6492
|
+
successForeground: "#141826",
|
|
6493
|
+
warning: "#F59E0B",
|
|
6494
|
+
warningForeground: "#141826",
|
|
6495
|
+
chip: "#5766F2",
|
|
6496
|
+
chipForeground: "#FFFFFF",
|
|
6497
|
+
border: "#3A3F5C",
|
|
6498
|
+
input: "#2D3252",
|
|
6499
|
+
ring: "#7B8FF7",
|
|
6500
|
+
popoverBorder: "#3A3F5C",
|
|
6501
|
+
divider: "#363B5C",
|
|
6502
|
+
toggleTrack: "#4A5068",
|
|
6503
|
+
toggleTrackForeground: "#141826",
|
|
6504
|
+
inputHover: "#7B8FF7",
|
|
6505
|
+
chart1: "#7B8FF7",
|
|
6506
|
+
chart2: "#5766F2",
|
|
6507
|
+
chart3: "#22D3EE",
|
|
6508
|
+
chart4: "#22C55E",
|
|
6509
|
+
chart5: "#F59E0B",
|
|
6461
6510
|
chart6: "#EF4444",
|
|
6462
|
-
chart7: "#
|
|
6511
|
+
chart7: "#A855F7",
|
|
6463
6512
|
chart8: "#EC4899",
|
|
6464
|
-
chart9: "#
|
|
6513
|
+
chart9: "#C5C9D4",
|
|
6465
6514
|
chart10: "#14B8A6",
|
|
6466
|
-
chart11: "#
|
|
6467
|
-
chart12: "#
|
|
6468
|
-
radius: "0.5rem"
|
|
6515
|
+
chart11: "#FB923C",
|
|
6516
|
+
chart12: "#60A5FA",
|
|
6517
|
+
radius: "0.5rem",
|
|
6518
|
+
brandGradientFrom: "#1A7B4A",
|
|
6519
|
+
brandGradientTo: "#50FFA7"
|
|
6469
6520
|
};
|
|
6521
|
+
var OPTILOGIC_LEGACY_THEME = OPTILOGIC_LIGHT_THEME;
|
|
6470
6522
|
var MODERN_LIGHT_THEME = {
|
|
6471
6523
|
id: "modern-light",
|
|
6472
6524
|
name: "Modern Light",
|
|
@@ -6615,22 +6667,72 @@ var DARK_ELEGANT_THEME = {
|
|
|
6615
6667
|
chart12: "#F06292",
|
|
6616
6668
|
radius: "0.5rem"
|
|
6617
6669
|
};
|
|
6670
|
+
var GREEN_THEME = {
|
|
6671
|
+
id: "green-theme",
|
|
6672
|
+
name: "Green Theme",
|
|
6673
|
+
description: "A green theme with natural, earthy tones",
|
|
6674
|
+
author: "Optilogic",
|
|
6675
|
+
background: "#1a2820",
|
|
6676
|
+
foreground: "#E6F5EC",
|
|
6677
|
+
card: "#2d4038",
|
|
6678
|
+
cardForeground: "#E6F5EC",
|
|
6679
|
+
popover: "#243630",
|
|
6680
|
+
popoverForeground: "#E6F5EC",
|
|
6681
|
+
primary: "#6FCF97",
|
|
6682
|
+
primaryForeground: "#1a2820",
|
|
6683
|
+
accent: "#6FCF97",
|
|
6684
|
+
accentForeground: "#1a2820",
|
|
6685
|
+
secondary: "#1f3329",
|
|
6686
|
+
secondaryForeground: "#E6F5EC",
|
|
6687
|
+
muted: "#354840",
|
|
6688
|
+
mutedForeground: "#9DB8A8",
|
|
6689
|
+
destructive: "#EB5757",
|
|
6690
|
+
destructiveForeground: "#E6F5EC",
|
|
6691
|
+
success: "#6FCF97",
|
|
6692
|
+
successForeground: "#1a2820",
|
|
6693
|
+
warning: "#F2C94C",
|
|
6694
|
+
warningForeground: "#1a2820",
|
|
6695
|
+
chip: "#3a5045",
|
|
6696
|
+
chipForeground: "#C5E3D1",
|
|
6697
|
+
border: "#243630",
|
|
6698
|
+
input: "#243630",
|
|
6699
|
+
ring: "#6FCF97",
|
|
6700
|
+
chart1: "#6FCF97",
|
|
6701
|
+
chart2: "#8FE3B0",
|
|
6702
|
+
chart3: "#9DB8A8",
|
|
6703
|
+
chart4: "#2d4038",
|
|
6704
|
+
chart5: "#354840",
|
|
6705
|
+
chart6: "#EB5757",
|
|
6706
|
+
chart7: "#F2C94C",
|
|
6707
|
+
chart8: "#56CCF2",
|
|
6708
|
+
chart9: "#BB6BD9",
|
|
6709
|
+
chart10: "#4ECDC4",
|
|
6710
|
+
chart11: "#A8D8B9",
|
|
6711
|
+
chart12: "#E07B39",
|
|
6712
|
+
radius: "0.5rem"
|
|
6713
|
+
};
|
|
6618
6714
|
var PRESET_THEMES = [
|
|
6619
|
-
|
|
6715
|
+
OPTILOGIC_LIGHT_THEME,
|
|
6620
6716
|
OPTILOGIC_DARK_THEME,
|
|
6621
6717
|
MODERN_LIGHT_THEME,
|
|
6622
6718
|
MODERN_DARK_THEME,
|
|
6623
|
-
|
|
6719
|
+
GREEN_THEME
|
|
6624
6720
|
];
|
|
6625
6721
|
var ALL_THEMES = PRESET_THEMES;
|
|
6722
|
+
var LEGACY_THEME_ID_MAP = {
|
|
6723
|
+
"optilogic-legacy": OPTILOGIC_LIGHT_THEME.id,
|
|
6724
|
+
"dark-elegant": OPTILOGIC_DARK_THEME.id
|
|
6725
|
+
};
|
|
6626
6726
|
function getPresetTheme(id) {
|
|
6627
|
-
|
|
6727
|
+
const resolvedId = LEGACY_THEME_ID_MAP[id] ?? id;
|
|
6728
|
+
return ALL_THEMES.find((theme) => theme.id === resolvedId);
|
|
6628
6729
|
}
|
|
6629
6730
|
function getDefaultTheme() {
|
|
6630
|
-
return
|
|
6731
|
+
return OPTILOGIC_LIGHT_THEME;
|
|
6631
6732
|
}
|
|
6632
6733
|
function isPresetTheme(themeId) {
|
|
6633
|
-
|
|
6734
|
+
const resolvedId = LEGACY_THEME_ID_MAP[themeId] ?? themeId;
|
|
6735
|
+
return ALL_THEMES.some((theme) => theme.id === resolvedId);
|
|
6634
6736
|
}
|
|
6635
6737
|
|
|
6636
6738
|
// src/theme/utils.ts
|
|
@@ -6712,6 +6814,21 @@ function themeToHsl(theme) {
|
|
|
6712
6814
|
chart12: hexToHsl(theme.chart12)
|
|
6713
6815
|
};
|
|
6714
6816
|
}
|
|
6817
|
+
function blendHex(base, blend, amount) {
|
|
6818
|
+
const a = base.replace(/^#/, "");
|
|
6819
|
+
const b = blend.replace(/^#/, "");
|
|
6820
|
+
const ar = parseInt(a.substring(0, 2), 16);
|
|
6821
|
+
const ag = parseInt(a.substring(2, 4), 16);
|
|
6822
|
+
const ab = parseInt(a.substring(4, 6), 16);
|
|
6823
|
+
const br = parseInt(b.substring(0, 2), 16);
|
|
6824
|
+
const bg = parseInt(b.substring(2, 4), 16);
|
|
6825
|
+
const bb = parseInt(b.substring(4, 6), 16);
|
|
6826
|
+
const r = Math.round(ar + (br - ar) * amount);
|
|
6827
|
+
const g = Math.round(ag + (bg - ag) * amount);
|
|
6828
|
+
const bl = Math.round(ab + (bb - ab) * amount);
|
|
6829
|
+
const hex = (v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0");
|
|
6830
|
+
return "#" + hex(r) + hex(g) + hex(bl);
|
|
6831
|
+
}
|
|
6715
6832
|
function deriveInputHoverHsl(hslTheme) {
|
|
6716
6833
|
const parts = hslTheme.foreground.split(/\s+/);
|
|
6717
6834
|
if (parts.length >= 3) {
|
|
@@ -6784,6 +6901,27 @@ function applyTheme(theme, targetElement) {
|
|
|
6784
6901
|
"--hover",
|
|
6785
6902
|
`${hslTheme.hover ?? deriveHoverChannels(theme, hslTheme)} / 0.18`
|
|
6786
6903
|
);
|
|
6904
|
+
if (theme.primaryHover) {
|
|
6905
|
+
element.style.setProperty("--primary-hover", hexToHsl(theme.primaryHover));
|
|
6906
|
+
} else {
|
|
6907
|
+
element.style.removeProperty("--primary-hover");
|
|
6908
|
+
}
|
|
6909
|
+
if (theme.card && theme.accent) {
|
|
6910
|
+
const accentHover = theme.accentHover ? theme.accentHover : blendHex(theme.card, theme.accent, 0.08);
|
|
6911
|
+
const accentActive = blendHex(theme.card, theme.accent, 0.15);
|
|
6912
|
+
element.style.setProperty("--accent-hover", hexToHsl(accentHover));
|
|
6913
|
+
element.style.setProperty("--accent-active", hexToHsl(accentActive));
|
|
6914
|
+
}
|
|
6915
|
+
if (theme.brandGradientFrom) {
|
|
6916
|
+
element.style.setProperty("--brand-from", hexToHsl(theme.brandGradientFrom));
|
|
6917
|
+
} else {
|
|
6918
|
+
element.style.removeProperty("--brand-from");
|
|
6919
|
+
}
|
|
6920
|
+
if (theme.brandGradientTo) {
|
|
6921
|
+
element.style.setProperty("--brand-to", hexToHsl(theme.brandGradientTo));
|
|
6922
|
+
} else {
|
|
6923
|
+
element.style.removeProperty("--brand-to");
|
|
6924
|
+
}
|
|
6787
6925
|
element.style.setProperty("--chart-1", hslTheme.chart1);
|
|
6788
6926
|
element.style.setProperty("--chart-2", hslTheme.chart2);
|
|
6789
6927
|
element.style.setProperty("--chart-3", hslTheme.chart3);
|
|
@@ -6902,6 +7040,10 @@ function areThemesEqual(theme1, theme2) {
|
|
|
6902
7040
|
"toggleTrackForeground",
|
|
6903
7041
|
"inputHover",
|
|
6904
7042
|
"hover",
|
|
7043
|
+
"primaryHover",
|
|
7044
|
+
"accentHover",
|
|
7045
|
+
"brandGradientFrom",
|
|
7046
|
+
"brandGradientTo",
|
|
6905
7047
|
"chart1",
|
|
6906
7048
|
"chart2",
|
|
6907
7049
|
"chart3",
|
|
@@ -7056,17 +7198,19 @@ function ThemePicker({
|
|
|
7056
7198
|
const currentIndex = themes.findIndex((t) => t.id === selectedTheme?.id);
|
|
7057
7199
|
switch (e.key) {
|
|
7058
7200
|
case "ArrowRight":
|
|
7059
|
-
case "ArrowDown":
|
|
7201
|
+
case "ArrowDown": {
|
|
7060
7202
|
e.preventDefault();
|
|
7061
7203
|
const nextIndex = (currentIndex + 1) % themes.length;
|
|
7062
7204
|
handleThemeSelect(themes[nextIndex]);
|
|
7063
7205
|
break;
|
|
7206
|
+
}
|
|
7064
7207
|
case "ArrowLeft":
|
|
7065
|
-
case "ArrowUp":
|
|
7208
|
+
case "ArrowUp": {
|
|
7066
7209
|
e.preventDefault();
|
|
7067
7210
|
const prevIndex = currentIndex <= 0 ? themes.length - 1 : currentIndex - 1;
|
|
7068
7211
|
handleThemeSelect(themes[prevIndex]);
|
|
7069
7212
|
break;
|
|
7213
|
+
}
|
|
7070
7214
|
}
|
|
7071
7215
|
};
|
|
7072
7216
|
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
@@ -8538,6 +8682,6 @@ var DataStarIcon = forwardRef(
|
|
|
8538
8682
|
);
|
|
8539
8683
|
DataStarIcon.displayName = "DataStarIcon";
|
|
8540
8684
|
|
|
8541
|
-
export { ALL_THEMES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, Badge, Board, BoardContent, BoardHeader, Button, Calendar, Card, CardActions, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardImage, CardList, CardTitle, CellEditor, Checkbox, Chip, CodeRenderer, Combobox, ConfirmationModal, ContextMenu, CopyButton, CosmicFrogIcon, CsvRenderer, DARK_ELEGANT_THEME, DEFAULT_RENDERERS, DataGrid, DataStarIcon, DataTable, DatePicker, DatePickerInput, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileView, FilterPopover, HeaderCell, HtmlRenderer, IconButton, ImageRenderer, Input, Label, LoadingSpinner, MINIMALIST_LIGHT_THEME, MODERN_DARK_THEME, MODERN_LIGHT_THEME, MarkdownRenderer, Modal, ModalButton, MultiSelect, OPTILOGIC_DARK_THEME, OPTILOGIC_LEGACY_THEME, OptilogicLogo, OptilogicLogoWithText, PRESET_THEMES, PlainTextRenderer, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ResizablePanel, ResizeHandle, Select, SelectContent, SelectGroup, SelectItem, SelectItemDescription, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, boardVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, detectContentType, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getFileExtension, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, isTextContentType, isUrlContentType, labelVariants, loadingSpinnerVariants, mergeRenderers, resolveRenderer, tabsListVariants, tabsTriggerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContentType, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
|
|
8685
|
+
export { ALL_THEMES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, Badge, Board, BoardContent, BoardHeader, Button, Calendar, Card, CardActions, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardImage, CardList, CardTitle, CellEditor, Checkbox, Chip, CodeRenderer, Combobox, ConfirmationModal, ContextMenu, CopyButton, CosmicFrogIcon, CsvRenderer, DARK_ELEGANT_THEME, DEFAULT_RENDERERS, DataGrid, DataStarIcon, DataTable, DatePicker, DatePickerInput, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileView, FilterPopover, GREEN_THEME, HeaderCell, HtmlRenderer, IconButton, ImageRenderer, Input, LEGACY_THEME_ID_MAP, Label, LoadingSpinner, MINIMALIST_LIGHT_THEME, MODERN_DARK_THEME, MODERN_LIGHT_THEME, MarkdownRenderer, Modal, ModalButton, MultiSelect, OPTILOGIC_DARK_THEME, OPTILOGIC_LEGACY_THEME, OPTILOGIC_LIGHT_THEME, OptilogicLogo, OptilogicLogoWithText, PRESET_THEMES, PlainTextRenderer, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ResizablePanel, ResizeHandle, Select, SelectContent, SelectGroup, SelectItem, SelectItemDescription, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, boardVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, detectContentType, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getFileExtension, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, isTextContentType, isUrlContentType, labelVariants, loadingSpinnerVariants, mergeRenderers, resolveRenderer, tabsListVariants, tabsTriggerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContentType, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
|
|
8542
8686
|
//# sourceMappingURL=index.js.map
|
|
8543
8687
|
//# sourceMappingURL=index.js.map
|