myoperator-mcp 0.2.15 → 0.2.17
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.js +126 -122
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -21,7 +21,7 @@ const accordionVariants = cva("w-full", {
|
|
|
21
21
|
variants: {
|
|
22
22
|
variant: {
|
|
23
23
|
default: "",
|
|
24
|
-
bordered: "border border-[#
|
|
24
|
+
bordered: "border border-[#E9EAEB] rounded-lg divide-y divide-[#E9EAEB]",
|
|
25
25
|
},
|
|
26
26
|
},
|
|
27
27
|
defaultVariants: {
|
|
@@ -53,7 +53,7 @@ const accordionTriggerVariants = cva(
|
|
|
53
53
|
variants: {
|
|
54
54
|
variant: {
|
|
55
55
|
default: "py-3",
|
|
56
|
-
bordered: "p-4 hover:bg-[#
|
|
56
|
+
bordered: "p-4 hover:bg-[#FAFAFA]",
|
|
57
57
|
},
|
|
58
58
|
},
|
|
59
59
|
defaultVariants: {
|
|
@@ -275,7 +275,7 @@ const AccordionTrigger = React.forwardRef<HTMLButtonElement, AccordionTriggerPro
|
|
|
275
275
|
{showChevron && (
|
|
276
276
|
<ChevronDown
|
|
277
277
|
className={cn(
|
|
278
|
-
"h-4 w-4 shrink-0 text-[#
|
|
278
|
+
"h-4 w-4 shrink-0 text-[#717680] transition-transform duration-300",
|
|
279
279
|
isOpen && "rotate-180"
|
|
280
280
|
)}
|
|
281
281
|
/>
|
|
@@ -351,15 +351,15 @@ const badgeVariants = cva(
|
|
|
351
351
|
variants: {
|
|
352
352
|
variant: {
|
|
353
353
|
// Status-based variants (existing)
|
|
354
|
-
active: "bg-[#
|
|
355
|
-
failed: "bg-[#
|
|
356
|
-
disabled: "bg-[#
|
|
357
|
-
default: "bg-[#
|
|
358
|
-
primary: "bg-[#
|
|
354
|
+
active: "bg-[#ECFDF3] text-[#17B26A]",
|
|
355
|
+
failed: "bg-[#FEF3F2] text-[#F04438]",
|
|
356
|
+
disabled: "bg-[#F5F5F5] text-[#717680]",
|
|
357
|
+
default: "bg-[#F5F5F5] text-[#181D27]",
|
|
358
|
+
primary: "bg-[#F5F5F5] text-[#181D27]",
|
|
359
359
|
// shadcn-style variants (new)
|
|
360
|
-
secondary: "bg-[#
|
|
361
|
-
outline: "border border-[#
|
|
362
|
-
destructive: "bg-[#
|
|
360
|
+
secondary: "bg-[#F5F5F5] text-[#181D27]",
|
|
361
|
+
outline: "border border-[#E9EAEB] bg-transparent text-[#181D27]",
|
|
362
|
+
destructive: "bg-[#FEF3F2] text-[#F04438]",
|
|
363
363
|
},
|
|
364
364
|
size: {
|
|
365
365
|
default: "px-3 py-1",
|
|
@@ -445,22 +445,22 @@ import { Loader2 } from "lucide-react"
|
|
|
445
445
|
import { cn } from "@/lib/utils"
|
|
446
446
|
|
|
447
447
|
const buttonVariants = cva(
|
|
448
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
448
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
449
449
|
{
|
|
450
450
|
variants: {
|
|
451
451
|
variant: {
|
|
452
|
-
default: "bg-[#343E55] text-white hover:bg-[#
|
|
453
|
-
primary: "bg-[#343E55] text-white hover:bg-[#
|
|
452
|
+
default: "bg-[#343E55] text-white hover:bg-[#2F384D]",
|
|
453
|
+
primary: "bg-[#343E55] text-white hover:bg-[#2F384D]",
|
|
454
454
|
destructive:
|
|
455
|
-
"bg-
|
|
455
|
+
"bg-[#F04438] text-white hover:bg-[#D92D20]",
|
|
456
456
|
outline:
|
|
457
457
|
"border border-[#343E55] bg-transparent text-[#343E55] hover:bg-[#343E55] hover:text-white",
|
|
458
458
|
secondary:
|
|
459
|
-
"bg-[#
|
|
460
|
-
ghost: "text-[#
|
|
459
|
+
"bg-[#EBECEE] text-[#343E55] hover:bg-[#D5D7DA]",
|
|
460
|
+
ghost: "text-[#717680] hover:bg-[#F5F5F5] hover:text-[#181D27]",
|
|
461
461
|
link: "text-[#343E55] underline-offset-4 hover:underline",
|
|
462
462
|
dashed:
|
|
463
|
-
"border border-dashed border-[#
|
|
463
|
+
"border border-dashed border-[#D5D7DA] bg-transparent text-[#717680] hover:border-[#343E55] hover:text-[#343E55] hover:bg-[#FAFAFA]",
|
|
464
464
|
},
|
|
465
465
|
size: {
|
|
466
466
|
default: "py-2.5 px-4 [&_svg]:size-4",
|
|
@@ -557,7 +557,7 @@ import { cn } from "@/lib/utils"
|
|
|
557
557
|
* Checkbox box variants (the outer container)
|
|
558
558
|
*/
|
|
559
559
|
const checkboxVariants = cva(
|
|
560
|
-
"peer inline-flex items-center justify-center shrink-0 rounded border-2 transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#343E55] data-[state=checked]:border-[#343E55] data-[state=checked]:text-white data-[state=indeterminate]:bg-[#343E55] data-[state=indeterminate]:border-[#343E55] data-[state=indeterminate]:text-white data-[state=unchecked]:bg-white data-[state=unchecked]:border-[#
|
|
560
|
+
"peer inline-flex items-center justify-center shrink-0 rounded border-2 transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#343E55] data-[state=checked]:border-[#343E55] data-[state=checked]:text-white data-[state=indeterminate]:bg-[#343E55] data-[state=indeterminate]:border-[#343E55] data-[state=indeterminate]:text-white data-[state=unchecked]:bg-white data-[state=unchecked]:border-[#E9EAEB] data-[state=unchecked]:hover:border-[#A4A7AE]",
|
|
561
561
|
{
|
|
562
562
|
variants: {
|
|
563
563
|
size: {
|
|
@@ -685,7 +685,7 @@ const Checkbox = React.forwardRef<
|
|
|
685
685
|
htmlFor={id}
|
|
686
686
|
className={cn(
|
|
687
687
|
labelSizeVariants({ size }),
|
|
688
|
-
"text-[#
|
|
688
|
+
"text-[#181D27] cursor-pointer",
|
|
689
689
|
disabled && "opacity-50 cursor-not-allowed",
|
|
690
690
|
labelClassName
|
|
691
691
|
)}
|
|
@@ -699,7 +699,7 @@ const Checkbox = React.forwardRef<
|
|
|
699
699
|
htmlFor={id}
|
|
700
700
|
className={cn(
|
|
701
701
|
labelSizeVariants({ size }),
|
|
702
|
-
"text-[#
|
|
702
|
+
"text-[#181D27] cursor-pointer",
|
|
703
703
|
disabled && "opacity-50 cursor-not-allowed",
|
|
704
704
|
labelClassName
|
|
705
705
|
)}
|
|
@@ -715,13 +715,13 @@ const Checkbox = React.forwardRef<
|
|
|
715
715
|
return (
|
|
716
716
|
<label className={cn("inline-flex items-center gap-2 cursor-pointer", disabled && "cursor-not-allowed")}>
|
|
717
717
|
{labelPosition === "left" && (
|
|
718
|
-
<span className={cn(labelSizeVariants({ size }), "text-[#
|
|
718
|
+
<span className={cn(labelSizeVariants({ size }), "text-[#181D27]", disabled && "opacity-50", labelClassName)}>
|
|
719
719
|
{label}
|
|
720
720
|
</span>
|
|
721
721
|
)}
|
|
722
722
|
{checkbox}
|
|
723
723
|
{labelPosition === "right" && (
|
|
724
|
-
<span className={cn(labelSizeVariants({ size }), "text-[#
|
|
724
|
+
<span className={cn(labelSizeVariants({ size }), "text-[#181D27]", disabled && "opacity-50", labelClassName)}>
|
|
725
725
|
{label}
|
|
726
726
|
</span>
|
|
727
727
|
)}
|
|
@@ -763,7 +763,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
|
|
|
763
763
|
<DropdownMenuPrimitive.SubTrigger
|
|
764
764
|
ref={ref}
|
|
765
765
|
className={cn(
|
|
766
|
-
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-[#
|
|
766
|
+
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-[#F5F5F5] data-[state=open]:bg-[#F5F5F5]",
|
|
767
767
|
inset && "pl-8",
|
|
768
768
|
className
|
|
769
769
|
)}
|
|
@@ -783,7 +783,7 @@ const DropdownMenuSubContent = React.forwardRef<
|
|
|
783
783
|
<DropdownMenuPrimitive.SubContent
|
|
784
784
|
ref={ref}
|
|
785
785
|
className={cn(
|
|
786
|
-
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-[#
|
|
786
|
+
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-[#E9EAEB] bg-white p-1 text-[#181D27] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
787
787
|
className
|
|
788
788
|
)}
|
|
789
789
|
{...props}
|
|
@@ -801,7 +801,7 @@ const DropdownMenuContent = React.forwardRef<
|
|
|
801
801
|
ref={ref}
|
|
802
802
|
sideOffset={sideOffset}
|
|
803
803
|
className={cn(
|
|
804
|
-
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-[#
|
|
804
|
+
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-[#E9EAEB] bg-white p-1 text-[#181D27] shadow-md",
|
|
805
805
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
|
806
806
|
className
|
|
807
807
|
)}
|
|
@@ -820,7 +820,7 @@ const DropdownMenuItem = React.forwardRef<
|
|
|
820
820
|
<DropdownMenuPrimitive.Item
|
|
821
821
|
ref={ref}
|
|
822
822
|
className={cn(
|
|
823
|
-
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[#
|
|
823
|
+
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[#F5F5F5] focus:text-[#181D27] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
824
824
|
inset && "pl-8",
|
|
825
825
|
className
|
|
826
826
|
)}
|
|
@@ -836,7 +836,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
|
|
|
836
836
|
<DropdownMenuPrimitive.CheckboxItem
|
|
837
837
|
ref={ref}
|
|
838
838
|
className={cn(
|
|
839
|
-
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#
|
|
839
|
+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#F5F5F5] focus:text-[#181D27] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
840
840
|
className
|
|
841
841
|
)}
|
|
842
842
|
checked={checked}
|
|
@@ -860,7 +860,7 @@ const DropdownMenuRadioItem = React.forwardRef<
|
|
|
860
860
|
<DropdownMenuPrimitive.RadioItem
|
|
861
861
|
ref={ref}
|
|
862
862
|
className={cn(
|
|
863
|
-
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#
|
|
863
|
+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-[#F5F5F5] focus:text-[#181D27] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
864
864
|
className
|
|
865
865
|
)}
|
|
866
866
|
{...props}
|
|
@@ -899,7 +899,7 @@ const DropdownMenuSeparator = React.forwardRef<
|
|
|
899
899
|
>(({ className, ...props }, ref) => (
|
|
900
900
|
<DropdownMenuPrimitive.Separator
|
|
901
901
|
ref={ref}
|
|
902
|
-
className={cn("-mx-1 my-1 h-px bg-[#
|
|
902
|
+
className={cn("-mx-1 my-1 h-px bg-[#E9EAEB]", className)}
|
|
903
903
|
{...props}
|
|
904
904
|
/>
|
|
905
905
|
))
|
|
@@ -945,12 +945,12 @@ import { cn } from "@/lib/utils"
|
|
|
945
945
|
* Input variants for different visual states
|
|
946
946
|
*/
|
|
947
947
|
const inputVariants = cva(
|
|
948
|
-
"h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#
|
|
948
|
+
"h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#181D27] transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[#181D27] placeholder:text-[#A2A6B1] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#FAFAFA]",
|
|
949
949
|
{
|
|
950
950
|
variants: {
|
|
951
951
|
state: {
|
|
952
|
-
default: "border border-[#
|
|
953
|
-
error: "border border-[#
|
|
952
|
+
default: "border border-[#E9EAEB] focus:outline-none focus:border-[#2BBCCA]/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
|
|
953
|
+
error: "border border-[#F04438]/40 focus:outline-none focus:border-[#F04438]/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
|
|
954
954
|
},
|
|
955
955
|
},
|
|
956
956
|
defaultVariants: {
|
|
@@ -999,12 +999,12 @@ import { cn } from "@/lib/utils"
|
|
|
999
999
|
* MultiSelect trigger variants matching TextField styling
|
|
1000
1000
|
*/
|
|
1001
1001
|
const multiSelectTriggerVariants = cva(
|
|
1002
|
-
"flex min-h-10 w-full items-center justify-between rounded bg-white px-4 py-2 text-sm text-[#
|
|
1002
|
+
"flex min-h-10 w-full items-center justify-between rounded bg-white px-4 py-2 text-sm text-[#181D27] transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#FAFAFA]",
|
|
1003
1003
|
{
|
|
1004
1004
|
variants: {
|
|
1005
1005
|
state: {
|
|
1006
|
-
default: "border border-[#
|
|
1007
|
-
error: "border border-[#
|
|
1006
|
+
default: "border border-[#E9EAEB] focus:outline-none focus:border-[#2BBCCA]/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
|
|
1007
|
+
error: "border border-[#F04438]/40 focus:outline-none focus:border-[#F04438]/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
|
|
1008
1008
|
},
|
|
1009
1009
|
},
|
|
1010
1010
|
defaultVariants: {
|
|
@@ -1215,10 +1215,10 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1215
1215
|
{label && (
|
|
1216
1216
|
<label
|
|
1217
1217
|
htmlFor={selectId}
|
|
1218
|
-
className={cn("text-sm font-medium text-[#
|
|
1218
|
+
className={cn("text-sm font-medium text-[#181D27]", labelClassName)}
|
|
1219
1219
|
>
|
|
1220
1220
|
{label}
|
|
1221
|
-
{required && <span className="text-[#
|
|
1221
|
+
{required && <span className="text-[#F04438] ml-0.5">*</span>}
|
|
1222
1222
|
</label>
|
|
1223
1223
|
)}
|
|
1224
1224
|
|
|
@@ -1243,12 +1243,12 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1243
1243
|
>
|
|
1244
1244
|
<div className="flex-1 flex flex-wrap gap-1">
|
|
1245
1245
|
{selectedValues.length === 0 ? (
|
|
1246
|
-
<span className="text-[#
|
|
1246
|
+
<span className="text-[#A2A6B1]">{placeholder}</span>
|
|
1247
1247
|
) : (
|
|
1248
1248
|
selectedLabels.map((label, index) => (
|
|
1249
1249
|
<span
|
|
1250
1250
|
key={selectedValues[index]}
|
|
1251
|
-
className="inline-flex items-center gap-1 bg-[#
|
|
1251
|
+
className="inline-flex items-center gap-1 bg-[#F5F5F5] text-[#181D27] text-xs px-2 py-0.5 rounded"
|
|
1252
1252
|
>
|
|
1253
1253
|
{label}
|
|
1254
1254
|
<span
|
|
@@ -1261,7 +1261,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1261
1261
|
removeValue(selectedValues[index], e as unknown as React.MouseEvent)
|
|
1262
1262
|
}
|
|
1263
1263
|
}}
|
|
1264
|
-
className="cursor-pointer hover:text-[#
|
|
1264
|
+
className="cursor-pointer hover:text-[#F04438] focus:outline-none"
|
|
1265
1265
|
aria-label={\`Remove \${label}\`}
|
|
1266
1266
|
>
|
|
1267
1267
|
<X className="size-3" />
|
|
@@ -1282,18 +1282,18 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1282
1282
|
clearAll(e as unknown as React.MouseEvent)
|
|
1283
1283
|
}
|
|
1284
1284
|
}}
|
|
1285
|
-
className="p-0.5 cursor-pointer hover:text-[#
|
|
1285
|
+
className="p-0.5 cursor-pointer hover:text-[#F04438] focus:outline-none"
|
|
1286
1286
|
aria-label="Clear all"
|
|
1287
1287
|
>
|
|
1288
|
-
<X className="size-4 text-[#
|
|
1288
|
+
<X className="size-4 text-[#717680]" />
|
|
1289
1289
|
</span>
|
|
1290
1290
|
)}
|
|
1291
1291
|
{loading ? (
|
|
1292
|
-
<Loader2 className="size-4 animate-spin text-[#
|
|
1292
|
+
<Loader2 className="size-4 animate-spin text-[#717680]" />
|
|
1293
1293
|
) : (
|
|
1294
1294
|
<ChevronDown
|
|
1295
1295
|
className={cn(
|
|
1296
|
-
"size-4 text-[#
|
|
1296
|
+
"size-4 text-[#717680] transition-transform",
|
|
1297
1297
|
isOpen && "rotate-180"
|
|
1298
1298
|
)}
|
|
1299
1299
|
/>
|
|
@@ -1305,7 +1305,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1305
1305
|
{isOpen && (
|
|
1306
1306
|
<div
|
|
1307
1307
|
className={cn(
|
|
1308
|
-
"absolute z-50 mt-1 w-full rounded bg-white border border-[#
|
|
1308
|
+
"absolute z-50 mt-1 w-full rounded bg-white border border-[#E9EAEB] shadow-md",
|
|
1309
1309
|
"top-full"
|
|
1310
1310
|
)}
|
|
1311
1311
|
role="listbox"
|
|
@@ -1313,13 +1313,13 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1313
1313
|
>
|
|
1314
1314
|
{/* Search input */}
|
|
1315
1315
|
{searchable && (
|
|
1316
|
-
<div className="p-2 border-b border-[#
|
|
1316
|
+
<div className="p-2 border-b border-[#E9EAEB]">
|
|
1317
1317
|
<input
|
|
1318
1318
|
type="text"
|
|
1319
1319
|
placeholder={searchPlaceholder}
|
|
1320
1320
|
value={searchQuery}
|
|
1321
1321
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
1322
|
-
className="w-full h-8 px-3 text-sm border border-[#
|
|
1322
|
+
className="w-full h-8 px-3 text-sm border border-[#E9EAEB] rounded bg-white placeholder:text-[#A2A6B1] focus:outline-none focus:border-[#2BBCCA]/50"
|
|
1323
1323
|
onClick={(e) => e.stopPropagation()}
|
|
1324
1324
|
/>
|
|
1325
1325
|
</div>
|
|
@@ -1328,7 +1328,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1328
1328
|
{/* Options */}
|
|
1329
1329
|
<div className="max-h-60 overflow-auto p-1">
|
|
1330
1330
|
{filteredOptions.length === 0 ? (
|
|
1331
|
-
<div className="py-6 text-center text-sm text-[#
|
|
1331
|
+
<div className="py-6 text-center text-sm text-[#717680]">
|
|
1332
1332
|
No results found
|
|
1333
1333
|
</div>
|
|
1334
1334
|
) : (
|
|
@@ -1347,14 +1347,14 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1347
1347
|
disabled={isDisabled}
|
|
1348
1348
|
onClick={() => !isDisabled && toggleOption(option.value)}
|
|
1349
1349
|
className={cn(
|
|
1350
|
-
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#
|
|
1351
|
-
"hover:bg-[#
|
|
1352
|
-
isSelected && "bg-[#
|
|
1350
|
+
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#181D27] outline-none",
|
|
1351
|
+
"hover:bg-[#F5F5F5] focus:bg-[#F5F5F5]",
|
|
1352
|
+
isSelected && "bg-[#F5F5F5]",
|
|
1353
1353
|
isDisabled && "pointer-events-none opacity-50"
|
|
1354
1354
|
)}
|
|
1355
1355
|
>
|
|
1356
1356
|
<span className="absolute right-2 flex size-4 items-center justify-center">
|
|
1357
|
-
{isSelected && <Check className="size-4 text-[#
|
|
1357
|
+
{isSelected && <Check className="size-4 text-[#2BBCCA]" />}
|
|
1358
1358
|
</span>
|
|
1359
1359
|
{option.label}
|
|
1360
1360
|
</button>
|
|
@@ -1365,7 +1365,7 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1365
1365
|
|
|
1366
1366
|
{/* Footer with count */}
|
|
1367
1367
|
{maxSelections && (
|
|
1368
|
-
<div className="p-2 border-t border-[#
|
|
1368
|
+
<div className="p-2 border-t border-[#E9EAEB] text-xs text-[#717680]">
|
|
1369
1369
|
{selectedValues.length} / {maxSelections} selected
|
|
1370
1370
|
</div>
|
|
1371
1371
|
)}
|
|
@@ -1381,11 +1381,11 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
|
|
|
1381
1381
|
{(error || helperText) && (
|
|
1382
1382
|
<div className="flex justify-between items-start gap-2">
|
|
1383
1383
|
{error ? (
|
|
1384
|
-
<span id={errorId} className="text-xs text-[#
|
|
1384
|
+
<span id={errorId} className="text-xs text-[#F04438]">
|
|
1385
1385
|
{error}
|
|
1386
1386
|
</span>
|
|
1387
1387
|
) : helperText ? (
|
|
1388
|
-
<span id={helperId} className="text-xs text-[#
|
|
1388
|
+
<span id={helperId} className="text-xs text-[#717680]">
|
|
1389
1389
|
{helperText}
|
|
1390
1390
|
</span>
|
|
1391
1391
|
) : null}
|
|
@@ -1463,6 +1463,8 @@ export interface PageHeaderProps
|
|
|
1463
1463
|
infoIcon?: React.ReactNode
|
|
1464
1464
|
/** Action buttons/elements rendered on the right side */
|
|
1465
1465
|
actions?: React.ReactNode
|
|
1466
|
+
/** Show bottom border (default: true) */
|
|
1467
|
+
showBorder?: boolean
|
|
1466
1468
|
}
|
|
1467
1469
|
|
|
1468
1470
|
const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
@@ -1475,6 +1477,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1475
1477
|
onBackClick,
|
|
1476
1478
|
infoIcon,
|
|
1477
1479
|
actions,
|
|
1480
|
+
showBorder = true,
|
|
1478
1481
|
...props
|
|
1479
1482
|
}, ref) => {
|
|
1480
1483
|
// Determine what to show on the left: back button, icon, or nothing
|
|
@@ -1484,7 +1487,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1484
1487
|
<button
|
|
1485
1488
|
type="button"
|
|
1486
1489
|
onClick={onBackClick}
|
|
1487
|
-
className="flex items-center justify-center w-10 h-10 rounded hover:bg-[#
|
|
1490
|
+
className="flex items-center justify-center w-10 h-10 rounded hover:bg-[#F5F5F5] transition-colors text-[#181D27]"
|
|
1488
1491
|
aria-label="Go back"
|
|
1489
1492
|
>
|
|
1490
1493
|
<ArrowLeft className="w-5 h-5" />
|
|
@@ -1493,7 +1496,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1493
1496
|
}
|
|
1494
1497
|
if (icon) {
|
|
1495
1498
|
return (
|
|
1496
|
-
<div className="flex items-center justify-center w-10 h-10 [&_svg]:w-6 [&_svg]:h-6 text-[#
|
|
1499
|
+
<div className="flex items-center justify-center w-10 h-10 [&_svg]:w-6 [&_svg]:h-6 text-[#717680]">
|
|
1497
1500
|
{icon}
|
|
1498
1501
|
</div>
|
|
1499
1502
|
)
|
|
@@ -1509,6 +1512,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1509
1512
|
className={cn(
|
|
1510
1513
|
pageHeaderVariants(),
|
|
1511
1514
|
"h-[76px] px-4",
|
|
1515
|
+
showBorder && "border-b border-[#E9EAEB]",
|
|
1512
1516
|
className
|
|
1513
1517
|
)}
|
|
1514
1518
|
{...props}
|
|
@@ -1523,17 +1527,17 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1523
1527
|
{/* Content Section: Title + Description */}
|
|
1524
1528
|
<div className="flex-1 min-w-0">
|
|
1525
1529
|
<div className="flex items-center gap-2">
|
|
1526
|
-
<h1 className="text-base font-semibold text-[#
|
|
1530
|
+
<h1 className="text-base font-semibold text-[#181D27] truncate">
|
|
1527
1531
|
{title}
|
|
1528
1532
|
</h1>
|
|
1529
1533
|
{infoIcon && (
|
|
1530
|
-
<span className="flex-shrink-0 [&_svg]:w-4 [&_svg]:h-4 text-[#
|
|
1534
|
+
<span className="flex-shrink-0 [&_svg]:w-4 [&_svg]:h-4 text-[#717680]">
|
|
1531
1535
|
{infoIcon}
|
|
1532
1536
|
</span>
|
|
1533
1537
|
)}
|
|
1534
1538
|
</div>
|
|
1535
1539
|
{description && (
|
|
1536
|
-
<p className="text-sm text-[#
|
|
1540
|
+
<p className="text-sm text-[#181D27] font-normal mt-1 truncate">
|
|
1537
1541
|
{description}
|
|
1538
1542
|
</p>
|
|
1539
1543
|
)}
|
|
@@ -1719,10 +1723,10 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1719
1723
|
{label && (
|
|
1720
1724
|
<label
|
|
1721
1725
|
htmlFor={selectId}
|
|
1722
|
-
className={cn("text-sm font-medium text-[#
|
|
1726
|
+
className={cn("text-sm font-medium text-[#181D27]", labelClassName)}
|
|
1723
1727
|
>
|
|
1724
1728
|
{label}
|
|
1725
|
-
{required && <span className="text-[#
|
|
1729
|
+
{required && <span className="text-[#F04438] ml-0.5">*</span>}
|
|
1726
1730
|
</label>
|
|
1727
1731
|
)}
|
|
1728
1732
|
|
|
@@ -1748,7 +1752,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1748
1752
|
>
|
|
1749
1753
|
<SelectValue placeholder={placeholder} />
|
|
1750
1754
|
{loading && (
|
|
1751
|
-
<Loader2 className="absolute right-8 size-4 animate-spin text-[#
|
|
1755
|
+
<Loader2 className="absolute right-8 size-4 animate-spin text-[#717680]" />
|
|
1752
1756
|
)}
|
|
1753
1757
|
</SelectTrigger>
|
|
1754
1758
|
<SelectContent>
|
|
@@ -1760,7 +1764,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1760
1764
|
placeholder={searchPlaceholder}
|
|
1761
1765
|
value={searchQuery}
|
|
1762
1766
|
onChange={handleSearchChange}
|
|
1763
|
-
className="w-full h-8 px-3 text-sm border border-[#
|
|
1767
|
+
className="w-full h-8 px-3 text-sm border border-[#E9EAEB] rounded bg-white placeholder:text-[#A2A6B1] focus:outline-none focus:border-[#2BBCCA]/50"
|
|
1764
1768
|
// Prevent closing dropdown when clicking input
|
|
1765
1769
|
onClick={(e) => e.stopPropagation()}
|
|
1766
1770
|
onKeyDown={(e) => e.stopPropagation()}
|
|
@@ -1801,7 +1805,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1801
1805
|
searchQuery &&
|
|
1802
1806
|
groupedOptions.ungrouped.length === 0 &&
|
|
1803
1807
|
Object.keys(groupedOptions.groups).length === 0 && (
|
|
1804
|
-
<div className="py-6 text-center text-sm text-[#
|
|
1808
|
+
<div className="py-6 text-center text-sm text-[#717680]">
|
|
1805
1809
|
No results found
|
|
1806
1810
|
</div>
|
|
1807
1811
|
)}
|
|
@@ -1812,11 +1816,11 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1812
1816
|
{(error || helperText) && (
|
|
1813
1817
|
<div className="flex justify-between items-start gap-2">
|
|
1814
1818
|
{error ? (
|
|
1815
|
-
<span id={errorId} className="text-xs text-[#
|
|
1819
|
+
<span id={errorId} className="text-xs text-[#F04438]">
|
|
1816
1820
|
{error}
|
|
1817
1821
|
</span>
|
|
1818
1822
|
) : helperText ? (
|
|
1819
|
-
<span id={helperId} className="text-xs text-[#
|
|
1823
|
+
<span id={helperId} className="text-xs text-[#717680]">
|
|
1820
1824
|
{helperText}
|
|
1821
1825
|
</span>
|
|
1822
1826
|
) : null}
|
|
@@ -1841,12 +1845,12 @@ import { cn } from "@/lib/utils"
|
|
|
1841
1845
|
* SelectTrigger variants matching TextField styling
|
|
1842
1846
|
*/
|
|
1843
1847
|
const selectTriggerVariants = cva(
|
|
1844
|
-
"flex h-10 w-full items-center justify-between rounded bg-white px-4 py-2.5 text-sm text-[#
|
|
1848
|
+
"flex h-10 w-full items-center justify-between rounded bg-white px-4 py-2.5 text-sm text-[#181D27] transition-all disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#FAFAFA] [&>span]:line-clamp-1",
|
|
1845
1849
|
{
|
|
1846
1850
|
variants: {
|
|
1847
1851
|
state: {
|
|
1848
|
-
default: "border border-[#
|
|
1849
|
-
error: "border border-[#
|
|
1852
|
+
default: "border border-[#E9EAEB] focus:outline-none focus:border-[#2BBCCA]/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
|
|
1853
|
+
error: "border border-[#F04438]/40 focus:outline-none focus:border-[#F04438]/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
|
|
1850
1854
|
},
|
|
1851
1855
|
},
|
|
1852
1856
|
defaultVariants: {
|
|
@@ -1876,7 +1880,7 @@ const SelectTrigger = React.forwardRef<
|
|
|
1876
1880
|
>
|
|
1877
1881
|
{children}
|
|
1878
1882
|
<SelectPrimitive.Icon asChild>
|
|
1879
|
-
<ChevronDown className="size-4 text-[#
|
|
1883
|
+
<ChevronDown className="size-4 text-[#717680] opacity-70" />
|
|
1880
1884
|
</SelectPrimitive.Icon>
|
|
1881
1885
|
</SelectPrimitive.Trigger>
|
|
1882
1886
|
))
|
|
@@ -1894,7 +1898,7 @@ const SelectScrollUpButton = React.forwardRef<
|
|
|
1894
1898
|
)}
|
|
1895
1899
|
{...props}
|
|
1896
1900
|
>
|
|
1897
|
-
<ChevronUp className="size-4 text-[#
|
|
1901
|
+
<ChevronUp className="size-4 text-[#717680]" />
|
|
1898
1902
|
</SelectPrimitive.ScrollUpButton>
|
|
1899
1903
|
))
|
|
1900
1904
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
|
@@ -1911,7 +1915,7 @@ const SelectScrollDownButton = React.forwardRef<
|
|
|
1911
1915
|
)}
|
|
1912
1916
|
{...props}
|
|
1913
1917
|
>
|
|
1914
|
-
<ChevronDown className="size-4 text-[#
|
|
1918
|
+
<ChevronDown className="size-4 text-[#717680]" />
|
|
1915
1919
|
</SelectPrimitive.ScrollDownButton>
|
|
1916
1920
|
))
|
|
1917
1921
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
|
|
@@ -1924,7 +1928,7 @@ const SelectContent = React.forwardRef<
|
|
|
1924
1928
|
<SelectPrimitive.Content
|
|
1925
1929
|
ref={ref}
|
|
1926
1930
|
className={cn(
|
|
1927
|
-
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded bg-white border border-[#
|
|
1931
|
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded bg-white border border-[#E9EAEB] shadow-md",
|
|
1928
1932
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
1929
1933
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
1930
1934
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -1959,7 +1963,7 @@ const SelectLabel = React.forwardRef<
|
|
|
1959
1963
|
>(({ className, ...props }, ref) => (
|
|
1960
1964
|
<SelectPrimitive.Label
|
|
1961
1965
|
ref={ref}
|
|
1962
|
-
className={cn("px-4 py-1.5 text-xs font-medium text-[#
|
|
1966
|
+
className={cn("px-4 py-1.5 text-xs font-medium text-[#717680]", className)}
|
|
1963
1967
|
{...props}
|
|
1964
1968
|
/>
|
|
1965
1969
|
))
|
|
@@ -1972,8 +1976,8 @@ const SelectItem = React.forwardRef<
|
|
|
1972
1976
|
<SelectPrimitive.Item
|
|
1973
1977
|
ref={ref}
|
|
1974
1978
|
className={cn(
|
|
1975
|
-
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#
|
|
1976
|
-
"hover:bg-[#
|
|
1979
|
+
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#181D27] outline-none",
|
|
1980
|
+
"hover:bg-[#F5F5F5] focus:bg-[#F5F5F5]",
|
|
1977
1981
|
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
1978
1982
|
className
|
|
1979
1983
|
)}
|
|
@@ -1981,7 +1985,7 @@ const SelectItem = React.forwardRef<
|
|
|
1981
1985
|
>
|
|
1982
1986
|
<span className="absolute right-2 flex size-4 items-center justify-center">
|
|
1983
1987
|
<SelectPrimitive.ItemIndicator>
|
|
1984
|
-
<Check className="size-4 text-[#
|
|
1988
|
+
<Check className="size-4 text-[#2BBCCA]" />
|
|
1985
1989
|
</SelectPrimitive.ItemIndicator>
|
|
1986
1990
|
</span>
|
|
1987
1991
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
@@ -1995,7 +1999,7 @@ const SelectSeparator = React.forwardRef<
|
|
|
1995
1999
|
>(({ className, ...props }, ref) => (
|
|
1996
2000
|
<SelectPrimitive.Separator
|
|
1997
2001
|
ref={ref}
|
|
1998
|
-
className={cn("-mx-1 my-1 h-px bg-[#
|
|
2002
|
+
className={cn("-mx-1 my-1 h-px bg-[#E9EAEB]", className)}
|
|
1999
2003
|
{...props}
|
|
2000
2004
|
/>
|
|
2001
2005
|
))
|
|
@@ -2025,7 +2029,7 @@ import { cn } from "@/lib/utils"
|
|
|
2025
2029
|
* Switch track variants (the outer container)
|
|
2026
2030
|
*/
|
|
2027
2031
|
const switchVariants = cva(
|
|
2028
|
-
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#343E55] data-[state=unchecked]:bg-[#
|
|
2032
|
+
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#343E55] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#343E55] data-[state=unchecked]:bg-[#E9EAEB]",
|
|
2029
2033
|
{
|
|
2030
2034
|
variants: {
|
|
2031
2035
|
size: {
|
|
@@ -2129,7 +2133,7 @@ const Switch = React.forwardRef<
|
|
|
2129
2133
|
{labelPosition === "left" && (
|
|
2130
2134
|
<span className={cn(
|
|
2131
2135
|
labelSizeVariants({ size }),
|
|
2132
|
-
"text-[#
|
|
2136
|
+
"text-[#181D27]",
|
|
2133
2137
|
disabled && "opacity-50"
|
|
2134
2138
|
)}>
|
|
2135
2139
|
{label}
|
|
@@ -2139,7 +2143,7 @@ const Switch = React.forwardRef<
|
|
|
2139
2143
|
{labelPosition === "right" && (
|
|
2140
2144
|
<span className={cn(
|
|
2141
2145
|
labelSizeVariants({ size }),
|
|
2142
|
-
"text-[#
|
|
2146
|
+
"text-[#181D27]",
|
|
2143
2147
|
disabled && "opacity-50"
|
|
2144
2148
|
)}>
|
|
2145
2149
|
{label}
|
|
@@ -2214,7 +2218,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
|
|
|
2214
2218
|
({ className, size, withoutBorder, ...props }, ref) => (
|
|
2215
2219
|
<div className={cn(
|
|
2216
2220
|
"relative w-full overflow-auto",
|
|
2217
|
-
!withoutBorder && "rounded-lg border border-[#
|
|
2221
|
+
!withoutBorder && "rounded-lg border border-[#E9EAEB]"
|
|
2218
2222
|
)}>
|
|
2219
2223
|
<table
|
|
2220
2224
|
ref={ref}
|
|
@@ -2232,7 +2236,7 @@ const TableHeader = React.forwardRef<
|
|
|
2232
2236
|
>(({ className, ...props }, ref) => (
|
|
2233
2237
|
<thead
|
|
2234
2238
|
ref={ref}
|
|
2235
|
-
className={cn("bg-[#
|
|
2239
|
+
className={cn("bg-[#FAFAFA] [&_tr]:border-b", className)}
|
|
2236
2240
|
{...props}
|
|
2237
2241
|
/>
|
|
2238
2242
|
))
|
|
@@ -2257,7 +2261,7 @@ const TableFooter = React.forwardRef<
|
|
|
2257
2261
|
<tfoot
|
|
2258
2262
|
ref={ref}
|
|
2259
2263
|
className={cn(
|
|
2260
|
-
"border-t bg-[#
|
|
2264
|
+
"border-t bg-[#FAFAFA] font-medium [&>tr]:last:border-b-0",
|
|
2261
2265
|
className
|
|
2262
2266
|
)}
|
|
2263
2267
|
{...props}
|
|
@@ -2275,10 +2279,10 @@ const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
|
|
|
2275
2279
|
<tr
|
|
2276
2280
|
ref={ref}
|
|
2277
2281
|
className={cn(
|
|
2278
|
-
"border-b border-[#
|
|
2282
|
+
"border-b border-[#E9EAEB] transition-colors",
|
|
2279
2283
|
highlighted
|
|
2280
|
-
? "bg-[#
|
|
2281
|
-
: "hover:bg-[#
|
|
2284
|
+
? "bg-[#ECF1FB]"
|
|
2285
|
+
: "hover:bg-[#FAFAFA]/50 data-[state=selected]:bg-[#F5F5F5]",
|
|
2282
2286
|
className
|
|
2283
2287
|
)}
|
|
2284
2288
|
{...props}
|
|
@@ -2301,8 +2305,8 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
|
|
|
2301
2305
|
<th
|
|
2302
2306
|
ref={ref}
|
|
2303
2307
|
className={cn(
|
|
2304
|
-
"h-12 px-4 text-left align-middle font-medium text-[#
|
|
2305
|
-
sticky && "sticky left-0 bg-[#
|
|
2308
|
+
"h-12 px-4 text-left align-middle font-medium text-[#717680] text-sm [&:has([role=checkbox])]:pr-0",
|
|
2309
|
+
sticky && "sticky left-0 bg-[#FAFAFA] z-10",
|
|
2306
2310
|
sortDirection && "cursor-pointer select-none",
|
|
2307
2311
|
className
|
|
2308
2312
|
)}
|
|
@@ -2311,12 +2315,12 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
|
|
|
2311
2315
|
<div className="flex items-center gap-1">
|
|
2312
2316
|
{children}
|
|
2313
2317
|
{sortDirection && (
|
|
2314
|
-
<span className="text-[#
|
|
2318
|
+
<span className="text-[#A4A7AE]">
|
|
2315
2319
|
{sortDirection === 'asc' ? '\u2191' : '\u2193'}
|
|
2316
2320
|
</span>
|
|
2317
2321
|
)}
|
|
2318
2322
|
{infoTooltip && (
|
|
2319
|
-
<span className="text-[#
|
|
2323
|
+
<span className="text-[#A4A7AE] cursor-help" title={infoTooltip}>
|
|
2320
2324
|
\u24D8
|
|
2321
2325
|
</span>
|
|
2322
2326
|
)}
|
|
@@ -2336,7 +2340,7 @@ const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
|
|
|
2336
2340
|
<td
|
|
2337
2341
|
ref={ref}
|
|
2338
2342
|
className={cn(
|
|
2339
|
-
"px-4 align-middle text-[#
|
|
2343
|
+
"px-4 align-middle text-[#181D27] [&:has([role=checkbox])]:pr-0",
|
|
2340
2344
|
sticky && "sticky left-0 bg-white z-10",
|
|
2341
2345
|
className
|
|
2342
2346
|
)}
|
|
@@ -2352,7 +2356,7 @@ const TableCaption = React.forwardRef<
|
|
|
2352
2356
|
>(({ className, ...props }, ref) => (
|
|
2353
2357
|
<caption
|
|
2354
2358
|
ref={ref}
|
|
2355
|
-
className={cn("mt-4 text-sm text-[#
|
|
2359
|
+
className={cn("mt-4 text-sm text-[#717680]", className)}
|
|
2356
2360
|
{...props}
|
|
2357
2361
|
/>
|
|
2358
2362
|
))
|
|
@@ -2374,7 +2378,7 @@ const TableSkeleton = ({ rows = 5, columns = 5 }: TableSkeletonProps) => (
|
|
|
2374
2378
|
<TableRow key={rowIndex}>
|
|
2375
2379
|
{Array.from({ length: columns }).map((_, colIndex) => (
|
|
2376
2380
|
<TableCell key={colIndex}>
|
|
2377
|
-
<div className="h-4 bg-[#
|
|
2381
|
+
<div className="h-4 bg-[#E9EAEB] rounded animate-pulse"
|
|
2378
2382
|
style={{ width: colIndex === 1 ? '80%' : colIndex === 2 ? '30%' : '60%' }} />
|
|
2379
2383
|
</TableCell>
|
|
2380
2384
|
))}
|
|
@@ -2396,7 +2400,7 @@ export interface TableEmptyProps {
|
|
|
2396
2400
|
|
|
2397
2401
|
const TableEmpty = ({ colSpan, children }: TableEmptyProps) => (
|
|
2398
2402
|
<TableRow>
|
|
2399
|
-
<TableCell colSpan={colSpan} className="text-center py-8 text-[#
|
|
2403
|
+
<TableCell colSpan={colSpan} className="text-center py-8 text-[#717680]">
|
|
2400
2404
|
{children || "No data available"}
|
|
2401
2405
|
</TableCell>
|
|
2402
2406
|
</TableRow>
|
|
@@ -2468,14 +2472,14 @@ const tagVariants = cva(
|
|
|
2468
2472
|
{
|
|
2469
2473
|
variants: {
|
|
2470
2474
|
variant: {
|
|
2471
|
-
default: "bg-[#
|
|
2472
|
-
primary: "bg-[#
|
|
2473
|
-
accent: "bg-[#
|
|
2474
|
-
secondary: "bg-[#
|
|
2475
|
-
success: "bg-[#
|
|
2476
|
-
warning: "bg-[#
|
|
2477
|
-
error: "bg-[#
|
|
2478
|
-
destructive: "bg-[#
|
|
2475
|
+
default: "bg-[#F5F5F5] text-[#181D27]",
|
|
2476
|
+
primary: "bg-[#F5F5F5] text-[#181D27]",
|
|
2477
|
+
accent: "bg-[#EBECEE] text-[#343E55]",
|
|
2478
|
+
secondary: "bg-[#E9EAEB] text-[#414651]",
|
|
2479
|
+
success: "bg-[#ECFDF3] text-[#17B26A]",
|
|
2480
|
+
warning: "bg-[#FFFAEB] text-[#F79009]",
|
|
2481
|
+
error: "bg-[#FEF3F2] text-[#F04438]",
|
|
2482
|
+
destructive: "bg-[#FEF3F2] text-[#F04438]",
|
|
2479
2483
|
},
|
|
2480
2484
|
size: {
|
|
2481
2485
|
default: "px-2 py-1",
|
|
@@ -2607,11 +2611,11 @@ const textFieldContainerVariants = cva(
|
|
|
2607
2611
|
{
|
|
2608
2612
|
variants: {
|
|
2609
2613
|
state: {
|
|
2610
|
-
default: "border border-[#
|
|
2611
|
-
error: "border border-[#
|
|
2614
|
+
default: "border border-[#E9EAEB] focus-within:border-[#2BBCCA]/50 focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
|
|
2615
|
+
error: "border border-[#F04438]/40 focus-within:border-[#F04438]/60 focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
|
|
2612
2616
|
},
|
|
2613
2617
|
disabled: {
|
|
2614
|
-
true: "cursor-not-allowed opacity-50 bg-[#
|
|
2618
|
+
true: "cursor-not-allowed opacity-50 bg-[#FAFAFA]",
|
|
2615
2619
|
false: "",
|
|
2616
2620
|
},
|
|
2617
2621
|
},
|
|
@@ -2626,12 +2630,12 @@ const textFieldContainerVariants = cva(
|
|
|
2626
2630
|
* TextField input variants (standalone without container)
|
|
2627
2631
|
*/
|
|
2628
2632
|
const textFieldInputVariants = cva(
|
|
2629
|
-
"h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#
|
|
2633
|
+
"h-10 w-full rounded bg-white px-4 py-2.5 text-sm text-[#181D27] transition-all file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[#181D27] placeholder:text-[#A2A6B1] disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[#FAFAFA]",
|
|
2630
2634
|
{
|
|
2631
2635
|
variants: {
|
|
2632
2636
|
state: {
|
|
2633
|
-
default: "border border-[#
|
|
2634
|
-
error: "border border-[#
|
|
2637
|
+
default: "border border-[#E9EAEB] focus:outline-none focus:border-[#2BBCCA]/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
|
|
2638
|
+
error: "border border-[#F04438]/40 focus:outline-none focus:border-[#F04438]/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
|
|
2635
2639
|
},
|
|
2636
2640
|
},
|
|
2637
2641
|
defaultVariants: {
|
|
@@ -2749,7 +2753,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2749
2753
|
id={inputId}
|
|
2750
2754
|
className={cn(
|
|
2751
2755
|
hasAddons
|
|
2752
|
-
? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-sm text-[#
|
|
2756
|
+
? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-sm text-[#181D27] placeholder:text-[#A2A6B1] disabled:cursor-not-allowed"
|
|
2753
2757
|
: textFieldInputVariants({ state: derivedState, className })
|
|
2754
2758
|
)}
|
|
2755
2759
|
disabled={disabled || loading}
|
|
@@ -2769,10 +2773,10 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2769
2773
|
{label && (
|
|
2770
2774
|
<label
|
|
2771
2775
|
htmlFor={inputId}
|
|
2772
|
-
className={cn("text-sm font-medium text-[#
|
|
2776
|
+
className={cn("text-sm font-medium text-[#181D27]", labelClassName)}
|
|
2773
2777
|
>
|
|
2774
2778
|
{label}
|
|
2775
|
-
{required && <span className="text-[#
|
|
2779
|
+
{required && <span className="text-[#F04438] ml-0.5">*</span>}
|
|
2776
2780
|
</label>
|
|
2777
2781
|
)}
|
|
2778
2782
|
|
|
@@ -2785,12 +2789,12 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2785
2789
|
inputContainerClassName
|
|
2786
2790
|
)}
|
|
2787
2791
|
>
|
|
2788
|
-
{prefix && <span className="text-sm text-[#
|
|
2789
|
-
{leftIcon && <span className="mr-2 text-[#
|
|
2792
|
+
{prefix && <span className="text-sm text-[#717680] mr-2 select-none">{prefix}</span>}
|
|
2793
|
+
{leftIcon && <span className="mr-2 text-[#717680] [&_svg]:size-4 flex-shrink-0">{leftIcon}</span>}
|
|
2790
2794
|
{inputElement}
|
|
2791
|
-
{loading && <Loader2 className="animate-spin size-4 text-[#
|
|
2792
|
-
{!loading && rightIcon && <span className="ml-2 text-[#
|
|
2793
|
-
{suffix && <span className="text-sm text-[#
|
|
2795
|
+
{loading && <Loader2 className="animate-spin size-4 text-[#717680] ml-2 flex-shrink-0" />}
|
|
2796
|
+
{!loading && rightIcon && <span className="ml-2 text-[#717680] [&_svg]:size-4 flex-shrink-0">{rightIcon}</span>}
|
|
2797
|
+
{suffix && <span className="text-sm text-[#717680] ml-2 select-none">{suffix}</span>}
|
|
2794
2798
|
</div>
|
|
2795
2799
|
) : (
|
|
2796
2800
|
inputElement
|
|
@@ -2800,11 +2804,11 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2800
2804
|
{(error || helperText || (showCount && maxLength)) && (
|
|
2801
2805
|
<div className="flex justify-between items-start gap-2">
|
|
2802
2806
|
{error ? (
|
|
2803
|
-
<span id={errorId} className="text-xs text-[#
|
|
2807
|
+
<span id={errorId} className="text-xs text-[#F04438]">
|
|
2804
2808
|
{error}
|
|
2805
2809
|
</span>
|
|
2806
2810
|
) : helperText ? (
|
|
2807
|
-
<span id={helperId} className="text-xs text-[#
|
|
2811
|
+
<span id={helperId} className="text-xs text-[#717680]">
|
|
2808
2812
|
{helperText}
|
|
2809
2813
|
</span>
|
|
2810
2814
|
) : (
|
|
@@ -2814,7 +2818,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2814
2818
|
<span
|
|
2815
2819
|
className={cn(
|
|
2816
2820
|
"text-xs",
|
|
2817
|
-
charCount > maxLength ? "text-[#
|
|
2821
|
+
charCount > maxLength ? "text-[#F04438]" : "text-[#717680]"
|
|
2818
2822
|
)}
|
|
2819
2823
|
>
|
|
2820
2824
|
{charCount}/{maxLength}
|
package/package.json
CHANGED