myoperator-mcp 0.2.16 → 0.2.18
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 +123 -123
- 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}
|
|
@@ -1487,7 +1487,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1487
1487
|
<button
|
|
1488
1488
|
type="button"
|
|
1489
1489
|
onClick={onBackClick}
|
|
1490
|
-
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]"
|
|
1491
1491
|
aria-label="Go back"
|
|
1492
1492
|
>
|
|
1493
1493
|
<ArrowLeft className="w-5 h-5" />
|
|
@@ -1496,7 +1496,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1496
1496
|
}
|
|
1497
1497
|
if (icon) {
|
|
1498
1498
|
return (
|
|
1499
|
-
<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]">
|
|
1500
1500
|
{icon}
|
|
1501
1501
|
</div>
|
|
1502
1502
|
)
|
|
@@ -1512,7 +1512,7 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1512
1512
|
className={cn(
|
|
1513
1513
|
pageHeaderVariants(),
|
|
1514
1514
|
"h-[76px] px-4",
|
|
1515
|
-
showBorder && "border-b border-[#
|
|
1515
|
+
showBorder && "border-b border-[#E9EAEB]",
|
|
1516
1516
|
className
|
|
1517
1517
|
)}
|
|
1518
1518
|
{...props}
|
|
@@ -1527,17 +1527,17 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
|
|
|
1527
1527
|
{/* Content Section: Title + Description */}
|
|
1528
1528
|
<div className="flex-1 min-w-0">
|
|
1529
1529
|
<div className="flex items-center gap-2">
|
|
1530
|
-
<h1 className="text-base font-semibold text-[#
|
|
1530
|
+
<h1 className="text-base font-semibold text-[#181D27] truncate">
|
|
1531
1531
|
{title}
|
|
1532
1532
|
</h1>
|
|
1533
1533
|
{infoIcon && (
|
|
1534
|
-
<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]">
|
|
1535
1535
|
{infoIcon}
|
|
1536
1536
|
</span>
|
|
1537
1537
|
)}
|
|
1538
1538
|
</div>
|
|
1539
1539
|
{description && (
|
|
1540
|
-
<p className="text-sm text-[#
|
|
1540
|
+
<p className="text-sm text-[#181D27] font-normal mt-1 truncate">
|
|
1541
1541
|
{description}
|
|
1542
1542
|
</p>
|
|
1543
1543
|
)}
|
|
@@ -1723,10 +1723,10 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1723
1723
|
{label && (
|
|
1724
1724
|
<label
|
|
1725
1725
|
htmlFor={selectId}
|
|
1726
|
-
className={cn("text-sm font-medium text-[#
|
|
1726
|
+
className={cn("text-sm font-medium text-[#181D27]", labelClassName)}
|
|
1727
1727
|
>
|
|
1728
1728
|
{label}
|
|
1729
|
-
{required && <span className="text-[#
|
|
1729
|
+
{required && <span className="text-[#F04438] ml-0.5">*</span>}
|
|
1730
1730
|
</label>
|
|
1731
1731
|
)}
|
|
1732
1732
|
|
|
@@ -1752,7 +1752,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1752
1752
|
>
|
|
1753
1753
|
<SelectValue placeholder={placeholder} />
|
|
1754
1754
|
{loading && (
|
|
1755
|
-
<Loader2 className="absolute right-8 size-4 animate-spin text-[#
|
|
1755
|
+
<Loader2 className="absolute right-8 size-4 animate-spin text-[#717680]" />
|
|
1756
1756
|
)}
|
|
1757
1757
|
</SelectTrigger>
|
|
1758
1758
|
<SelectContent>
|
|
@@ -1764,7 +1764,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1764
1764
|
placeholder={searchPlaceholder}
|
|
1765
1765
|
value={searchQuery}
|
|
1766
1766
|
onChange={handleSearchChange}
|
|
1767
|
-
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"
|
|
1768
1768
|
// Prevent closing dropdown when clicking input
|
|
1769
1769
|
onClick={(e) => e.stopPropagation()}
|
|
1770
1770
|
onKeyDown={(e) => e.stopPropagation()}
|
|
@@ -1805,7 +1805,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1805
1805
|
searchQuery &&
|
|
1806
1806
|
groupedOptions.ungrouped.length === 0 &&
|
|
1807
1807
|
Object.keys(groupedOptions.groups).length === 0 && (
|
|
1808
|
-
<div className="py-6 text-center text-sm text-[#
|
|
1808
|
+
<div className="py-6 text-center text-sm text-[#717680]">
|
|
1809
1809
|
No results found
|
|
1810
1810
|
</div>
|
|
1811
1811
|
)}
|
|
@@ -1816,11 +1816,11 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
|
|
|
1816
1816
|
{(error || helperText) && (
|
|
1817
1817
|
<div className="flex justify-between items-start gap-2">
|
|
1818
1818
|
{error ? (
|
|
1819
|
-
<span id={errorId} className="text-xs text-[#
|
|
1819
|
+
<span id={errorId} className="text-xs text-[#F04438]">
|
|
1820
1820
|
{error}
|
|
1821
1821
|
</span>
|
|
1822
1822
|
) : helperText ? (
|
|
1823
|
-
<span id={helperId} className="text-xs text-[#
|
|
1823
|
+
<span id={helperId} className="text-xs text-[#717680]">
|
|
1824
1824
|
{helperText}
|
|
1825
1825
|
</span>
|
|
1826
1826
|
) : null}
|
|
@@ -1845,12 +1845,12 @@ import { cn } from "@/lib/utils"
|
|
|
1845
1845
|
* SelectTrigger variants matching TextField styling
|
|
1846
1846
|
*/
|
|
1847
1847
|
const selectTriggerVariants = cva(
|
|
1848
|
-
"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",
|
|
1849
1849
|
{
|
|
1850
1850
|
variants: {
|
|
1851
1851
|
state: {
|
|
1852
|
-
default: "border border-[#
|
|
1853
|
-
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)]",
|
|
1854
1854
|
},
|
|
1855
1855
|
},
|
|
1856
1856
|
defaultVariants: {
|
|
@@ -1880,7 +1880,7 @@ const SelectTrigger = React.forwardRef<
|
|
|
1880
1880
|
>
|
|
1881
1881
|
{children}
|
|
1882
1882
|
<SelectPrimitive.Icon asChild>
|
|
1883
|
-
<ChevronDown className="size-4 text-[#
|
|
1883
|
+
<ChevronDown className="size-4 text-[#717680] opacity-70" />
|
|
1884
1884
|
</SelectPrimitive.Icon>
|
|
1885
1885
|
</SelectPrimitive.Trigger>
|
|
1886
1886
|
))
|
|
@@ -1898,7 +1898,7 @@ const SelectScrollUpButton = React.forwardRef<
|
|
|
1898
1898
|
)}
|
|
1899
1899
|
{...props}
|
|
1900
1900
|
>
|
|
1901
|
-
<ChevronUp className="size-4 text-[#
|
|
1901
|
+
<ChevronUp className="size-4 text-[#717680]" />
|
|
1902
1902
|
</SelectPrimitive.ScrollUpButton>
|
|
1903
1903
|
))
|
|
1904
1904
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
|
@@ -1915,7 +1915,7 @@ const SelectScrollDownButton = React.forwardRef<
|
|
|
1915
1915
|
)}
|
|
1916
1916
|
{...props}
|
|
1917
1917
|
>
|
|
1918
|
-
<ChevronDown className="size-4 text-[#
|
|
1918
|
+
<ChevronDown className="size-4 text-[#717680]" />
|
|
1919
1919
|
</SelectPrimitive.ScrollDownButton>
|
|
1920
1920
|
))
|
|
1921
1921
|
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
|
|
@@ -1928,7 +1928,7 @@ const SelectContent = React.forwardRef<
|
|
|
1928
1928
|
<SelectPrimitive.Content
|
|
1929
1929
|
ref={ref}
|
|
1930
1930
|
className={cn(
|
|
1931
|
-
"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",
|
|
1932
1932
|
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
1933
1933
|
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
1934
1934
|
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
@@ -1963,7 +1963,7 @@ const SelectLabel = React.forwardRef<
|
|
|
1963
1963
|
>(({ className, ...props }, ref) => (
|
|
1964
1964
|
<SelectPrimitive.Label
|
|
1965
1965
|
ref={ref}
|
|
1966
|
-
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)}
|
|
1967
1967
|
{...props}
|
|
1968
1968
|
/>
|
|
1969
1969
|
))
|
|
@@ -1976,8 +1976,8 @@ const SelectItem = React.forwardRef<
|
|
|
1976
1976
|
<SelectPrimitive.Item
|
|
1977
1977
|
ref={ref}
|
|
1978
1978
|
className={cn(
|
|
1979
|
-
"relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-4 pr-8 text-sm text-[#
|
|
1980
|
-
"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]",
|
|
1981
1981
|
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
|
1982
1982
|
className
|
|
1983
1983
|
)}
|
|
@@ -1985,7 +1985,7 @@ const SelectItem = React.forwardRef<
|
|
|
1985
1985
|
>
|
|
1986
1986
|
<span className="absolute right-2 flex size-4 items-center justify-center">
|
|
1987
1987
|
<SelectPrimitive.ItemIndicator>
|
|
1988
|
-
<Check className="size-4 text-[#
|
|
1988
|
+
<Check className="size-4 text-[#2BBCCA]" />
|
|
1989
1989
|
</SelectPrimitive.ItemIndicator>
|
|
1990
1990
|
</span>
|
|
1991
1991
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
@@ -1999,7 +1999,7 @@ const SelectSeparator = React.forwardRef<
|
|
|
1999
1999
|
>(({ className, ...props }, ref) => (
|
|
2000
2000
|
<SelectPrimitive.Separator
|
|
2001
2001
|
ref={ref}
|
|
2002
|
-
className={cn("-mx-1 my-1 h-px bg-[#
|
|
2002
|
+
className={cn("-mx-1 my-1 h-px bg-[#E9EAEB]", className)}
|
|
2003
2003
|
{...props}
|
|
2004
2004
|
/>
|
|
2005
2005
|
))
|
|
@@ -2029,7 +2029,7 @@ import { cn } from "@/lib/utils"
|
|
|
2029
2029
|
* Switch track variants (the outer container)
|
|
2030
2030
|
*/
|
|
2031
2031
|
const switchVariants = cva(
|
|
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-[#
|
|
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]",
|
|
2033
2033
|
{
|
|
2034
2034
|
variants: {
|
|
2035
2035
|
size: {
|
|
@@ -2133,7 +2133,7 @@ const Switch = React.forwardRef<
|
|
|
2133
2133
|
{labelPosition === "left" && (
|
|
2134
2134
|
<span className={cn(
|
|
2135
2135
|
labelSizeVariants({ size }),
|
|
2136
|
-
"text-[#
|
|
2136
|
+
"text-[#181D27]",
|
|
2137
2137
|
disabled && "opacity-50"
|
|
2138
2138
|
)}>
|
|
2139
2139
|
{label}
|
|
@@ -2143,7 +2143,7 @@ const Switch = React.forwardRef<
|
|
|
2143
2143
|
{labelPosition === "right" && (
|
|
2144
2144
|
<span className={cn(
|
|
2145
2145
|
labelSizeVariants({ size }),
|
|
2146
|
-
"text-[#
|
|
2146
|
+
"text-[#181D27]",
|
|
2147
2147
|
disabled && "opacity-50"
|
|
2148
2148
|
)}>
|
|
2149
2149
|
{label}
|
|
@@ -2218,7 +2218,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
|
|
|
2218
2218
|
({ className, size, withoutBorder, ...props }, ref) => (
|
|
2219
2219
|
<div className={cn(
|
|
2220
2220
|
"relative w-full overflow-auto",
|
|
2221
|
-
!withoutBorder && "rounded-lg border border-[#
|
|
2221
|
+
!withoutBorder && "rounded-lg border border-[#E9EAEB]"
|
|
2222
2222
|
)}>
|
|
2223
2223
|
<table
|
|
2224
2224
|
ref={ref}
|
|
@@ -2236,7 +2236,7 @@ const TableHeader = React.forwardRef<
|
|
|
2236
2236
|
>(({ className, ...props }, ref) => (
|
|
2237
2237
|
<thead
|
|
2238
2238
|
ref={ref}
|
|
2239
|
-
className={cn("bg-[#
|
|
2239
|
+
className={cn("bg-[#FAFAFA] [&_tr]:border-b", className)}
|
|
2240
2240
|
{...props}
|
|
2241
2241
|
/>
|
|
2242
2242
|
))
|
|
@@ -2261,7 +2261,7 @@ const TableFooter = React.forwardRef<
|
|
|
2261
2261
|
<tfoot
|
|
2262
2262
|
ref={ref}
|
|
2263
2263
|
className={cn(
|
|
2264
|
-
"border-t bg-[#
|
|
2264
|
+
"border-t bg-[#FAFAFA] font-medium [&>tr]:last:border-b-0",
|
|
2265
2265
|
className
|
|
2266
2266
|
)}
|
|
2267
2267
|
{...props}
|
|
@@ -2279,10 +2279,10 @@ const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
|
|
|
2279
2279
|
<tr
|
|
2280
2280
|
ref={ref}
|
|
2281
2281
|
className={cn(
|
|
2282
|
-
"border-b border-[#
|
|
2282
|
+
"border-b border-[#E9EAEB] transition-colors",
|
|
2283
2283
|
highlighted
|
|
2284
|
-
? "bg-[#
|
|
2285
|
-
: "hover:bg-[#
|
|
2284
|
+
? "bg-[#ECF1FB]"
|
|
2285
|
+
: "hover:bg-[#FAFAFA]/50 data-[state=selected]:bg-[#F5F5F5]",
|
|
2286
2286
|
className
|
|
2287
2287
|
)}
|
|
2288
2288
|
{...props}
|
|
@@ -2305,8 +2305,8 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
|
|
|
2305
2305
|
<th
|
|
2306
2306
|
ref={ref}
|
|
2307
2307
|
className={cn(
|
|
2308
|
-
"h-12 px-4 text-left align-middle font-medium text-[#
|
|
2309
|
-
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",
|
|
2310
2310
|
sortDirection && "cursor-pointer select-none",
|
|
2311
2311
|
className
|
|
2312
2312
|
)}
|
|
@@ -2315,12 +2315,12 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
|
|
|
2315
2315
|
<div className="flex items-center gap-1">
|
|
2316
2316
|
{children}
|
|
2317
2317
|
{sortDirection && (
|
|
2318
|
-
<span className="text-[#
|
|
2318
|
+
<span className="text-[#A4A7AE]">
|
|
2319
2319
|
{sortDirection === 'asc' ? '\u2191' : '\u2193'}
|
|
2320
2320
|
</span>
|
|
2321
2321
|
)}
|
|
2322
2322
|
{infoTooltip && (
|
|
2323
|
-
<span className="text-[#
|
|
2323
|
+
<span className="text-[#A4A7AE] cursor-help" title={infoTooltip}>
|
|
2324
2324
|
\u24D8
|
|
2325
2325
|
</span>
|
|
2326
2326
|
)}
|
|
@@ -2340,7 +2340,7 @@ const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
|
|
|
2340
2340
|
<td
|
|
2341
2341
|
ref={ref}
|
|
2342
2342
|
className={cn(
|
|
2343
|
-
"px-4 align-middle text-[#
|
|
2343
|
+
"px-4 align-middle text-[#181D27] [&:has([role=checkbox])]:pr-0",
|
|
2344
2344
|
sticky && "sticky left-0 bg-white z-10",
|
|
2345
2345
|
className
|
|
2346
2346
|
)}
|
|
@@ -2356,7 +2356,7 @@ const TableCaption = React.forwardRef<
|
|
|
2356
2356
|
>(({ className, ...props }, ref) => (
|
|
2357
2357
|
<caption
|
|
2358
2358
|
ref={ref}
|
|
2359
|
-
className={cn("mt-4 text-sm text-[#
|
|
2359
|
+
className={cn("mt-4 text-sm text-[#717680]", className)}
|
|
2360
2360
|
{...props}
|
|
2361
2361
|
/>
|
|
2362
2362
|
))
|
|
@@ -2378,7 +2378,7 @@ const TableSkeleton = ({ rows = 5, columns = 5 }: TableSkeletonProps) => (
|
|
|
2378
2378
|
<TableRow key={rowIndex}>
|
|
2379
2379
|
{Array.from({ length: columns }).map((_, colIndex) => (
|
|
2380
2380
|
<TableCell key={colIndex}>
|
|
2381
|
-
<div className="h-4 bg-[#
|
|
2381
|
+
<div className="h-4 bg-[#E9EAEB] rounded animate-pulse"
|
|
2382
2382
|
style={{ width: colIndex === 1 ? '80%' : colIndex === 2 ? '30%' : '60%' }} />
|
|
2383
2383
|
</TableCell>
|
|
2384
2384
|
))}
|
|
@@ -2400,7 +2400,7 @@ export interface TableEmptyProps {
|
|
|
2400
2400
|
|
|
2401
2401
|
const TableEmpty = ({ colSpan, children }: TableEmptyProps) => (
|
|
2402
2402
|
<TableRow>
|
|
2403
|
-
<TableCell colSpan={colSpan} className="text-center py-8 text-[#
|
|
2403
|
+
<TableCell colSpan={colSpan} className="text-center py-8 text-[#717680]">
|
|
2404
2404
|
{children || "No data available"}
|
|
2405
2405
|
</TableCell>
|
|
2406
2406
|
</TableRow>
|
|
@@ -2472,14 +2472,14 @@ const tagVariants = cva(
|
|
|
2472
2472
|
{
|
|
2473
2473
|
variants: {
|
|
2474
2474
|
variant: {
|
|
2475
|
-
default: "bg-[#
|
|
2476
|
-
primary: "bg-[#
|
|
2477
|
-
accent: "bg-[#
|
|
2478
|
-
secondary: "bg-[#
|
|
2479
|
-
success: "bg-[#
|
|
2480
|
-
warning: "bg-[#
|
|
2481
|
-
error: "bg-[#
|
|
2482
|
-
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]",
|
|
2483
2483
|
},
|
|
2484
2484
|
size: {
|
|
2485
2485
|
default: "px-2 py-1",
|
|
@@ -2611,11 +2611,11 @@ const textFieldContainerVariants = cva(
|
|
|
2611
2611
|
{
|
|
2612
2612
|
variants: {
|
|
2613
2613
|
state: {
|
|
2614
|
-
default: "border border-[#
|
|
2615
|
-
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)]",
|
|
2616
2616
|
},
|
|
2617
2617
|
disabled: {
|
|
2618
|
-
true: "cursor-not-allowed opacity-50 bg-[#
|
|
2618
|
+
true: "cursor-not-allowed opacity-50 bg-[#FAFAFA]",
|
|
2619
2619
|
false: "",
|
|
2620
2620
|
},
|
|
2621
2621
|
},
|
|
@@ -2630,12 +2630,12 @@ const textFieldContainerVariants = cva(
|
|
|
2630
2630
|
* TextField input variants (standalone without container)
|
|
2631
2631
|
*/
|
|
2632
2632
|
const textFieldInputVariants = cva(
|
|
2633
|
-
"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]",
|
|
2634
2634
|
{
|
|
2635
2635
|
variants: {
|
|
2636
2636
|
state: {
|
|
2637
|
-
default: "border border-[#
|
|
2638
|
-
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)]",
|
|
2639
2639
|
},
|
|
2640
2640
|
},
|
|
2641
2641
|
defaultVariants: {
|
|
@@ -2753,7 +2753,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2753
2753
|
id={inputId}
|
|
2754
2754
|
className={cn(
|
|
2755
2755
|
hasAddons
|
|
2756
|
-
? "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"
|
|
2757
2757
|
: textFieldInputVariants({ state: derivedState, className })
|
|
2758
2758
|
)}
|
|
2759
2759
|
disabled={disabled || loading}
|
|
@@ -2773,10 +2773,10 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2773
2773
|
{label && (
|
|
2774
2774
|
<label
|
|
2775
2775
|
htmlFor={inputId}
|
|
2776
|
-
className={cn("text-sm font-medium text-[#
|
|
2776
|
+
className={cn("text-sm font-medium text-[#181D27]", labelClassName)}
|
|
2777
2777
|
>
|
|
2778
2778
|
{label}
|
|
2779
|
-
{required && <span className="text-[#
|
|
2779
|
+
{required && <span className="text-[#F04438] ml-0.5">*</span>}
|
|
2780
2780
|
</label>
|
|
2781
2781
|
)}
|
|
2782
2782
|
|
|
@@ -2789,12 +2789,12 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2789
2789
|
inputContainerClassName
|
|
2790
2790
|
)}
|
|
2791
2791
|
>
|
|
2792
|
-
{prefix && <span className="text-sm text-[#
|
|
2793
|
-
{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>}
|
|
2794
2794
|
{inputElement}
|
|
2795
|
-
{loading && <Loader2 className="animate-spin size-4 text-[#
|
|
2796
|
-
{!loading && rightIcon && <span className="ml-2 text-[#
|
|
2797
|
-
{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>}
|
|
2798
2798
|
</div>
|
|
2799
2799
|
) : (
|
|
2800
2800
|
inputElement
|
|
@@ -2804,11 +2804,11 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2804
2804
|
{(error || helperText || (showCount && maxLength)) && (
|
|
2805
2805
|
<div className="flex justify-between items-start gap-2">
|
|
2806
2806
|
{error ? (
|
|
2807
|
-
<span id={errorId} className="text-xs text-[#
|
|
2807
|
+
<span id={errorId} className="text-xs text-[#F04438]">
|
|
2808
2808
|
{error}
|
|
2809
2809
|
</span>
|
|
2810
2810
|
) : helperText ? (
|
|
2811
|
-
<span id={helperId} className="text-xs text-[#
|
|
2811
|
+
<span id={helperId} className="text-xs text-[#717680]">
|
|
2812
2812
|
{helperText}
|
|
2813
2813
|
</span>
|
|
2814
2814
|
) : (
|
|
@@ -2818,7 +2818,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
|
|
|
2818
2818
|
<span
|
|
2819
2819
|
className={cn(
|
|
2820
2820
|
"text-xs",
|
|
2821
|
-
charCount > maxLength ? "text-[#
|
|
2821
|
+
charCount > maxLength ? "text-[#F04438]" : "text-[#717680]"
|
|
2822
2822
|
)}
|
|
2823
2823
|
>
|
|
2824
2824
|
{charCount}/{maxLength}
|
package/package.json
CHANGED