myshell-react-lib 0.1.54 → 0.1.55
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 +23 -23
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +23 -23
- package/dist/index.js.map +1 -1
- package/dist/styles/components-dark.scss +20 -20
- package/dist/styles/components-light.scss +1 -1
- package/dist/styles/design2-dark.scss +19 -21
- package/dist/styles/design2-light.scss +3 -2
- package/dist/styles/new-tokens.scss +5 -5
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5044,7 +5044,7 @@ function createButtonWithVariant(props, ref) {
|
|
|
5044
5044
|
size: size
|
|
5045
5045
|
}),
|
|
5046
5046
|
/* @__PURE__ */ jsxs2("span", {
|
|
5047
|
-
className: cn("inline-flex w-full items-center justify-center", loading ? "opacity-0" : "opacity-100", variant === "plain" && "font-medium"),
|
|
5047
|
+
className: cn("inline-flex w-full items-center justify-center space-x-1.5", loading ? "opacity-0" : "opacity-100", variant === "plain" && "font-medium"),
|
|
5048
5048
|
children: [
|
|
5049
5049
|
!asset && icon && !iconOutBox && iconDirection === "left" && renderIcon(icon, "left", {
|
|
5050
5050
|
loading: loading,
|
|
@@ -5449,7 +5449,7 @@ var PopoverContent = React8.forwardRef(function(_param, ref) {
|
|
|
5449
5449
|
arrowPadding: arrowPadding,
|
|
5450
5450
|
side: side,
|
|
5451
5451
|
forceMount: true,
|
|
5452
|
-
className: cn("relative z-[49] mx-4 w-fit max-w-72 rounded-md border border-Colors-Border-Opaque p-3 text-left text-xs shadow-modal-default outline-none 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 [&[data-state=open]>span]:animate-none", variant === "default" ? mode === "popover" ? "bg-Colors-Background-
|
|
5452
|
+
className: cn("relative z-[49] mx-4 w-fit max-w-72 rounded-md border border-Colors-Border-Opaque p-3 text-left text-xs shadow-modal-default outline-none 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 [&[data-state=open]>span]:animate-none", variant === "default" ? mode === "popover" ? "bg-Colors-Background-Utilities-Modal border-Colors-Border-Opaque text-Colors-Text-Default" : "bg-cc-Tooltip-bg-default text-cc-Tooltip-fg-default border border-cc-Tooltip-border-default" : "bg-Colors-Utility-Lake-Blue-50 text-Colors-Text-Static-White", className)
|
|
5453
5453
|
}, props), {
|
|
5454
5454
|
children: [
|
|
5455
5455
|
children,
|
|
@@ -6072,7 +6072,7 @@ var DropdownMenuSubTrigger = React13.forwardRef(function(_param, ref) {
|
|
|
6072
6072
|
]);
|
|
6073
6073
|
return /* @__PURE__ */ jsxs7(DropdownMenuPrimitive.SubTrigger, _object_spread_props(_object_spread({
|
|
6074
6074
|
ref: ref,
|
|
6075
|
-
className: cn("flex cursor-default select-none items-center rounded-
|
|
6075
|
+
className: cn("flex cursor-default select-none items-center rounded-sm px-3 py-2 outline-none focus:bg-Colors-Background-Neutral-Primary-Default data-[state=open]:bg-Colors-Background-Neutral-Primary-Default", inset && "pl-8", className)
|
|
6076
6076
|
}, props), {
|
|
6077
6077
|
children: [
|
|
6078
6078
|
children,
|
|
@@ -6089,7 +6089,7 @@ var DropdownMenuSubContent = React13.forwardRef(function(_param, ref) {
|
|
|
6089
6089
|
]);
|
|
6090
6090
|
return /* @__PURE__ */ jsx18(DropdownMenuPrimitive.SubContent, _object_spread({
|
|
6091
6091
|
ref: ref,
|
|
6092
|
-
className: cn("z-50 min-w-[8rem] overflow-hidden rounded-
|
|
6092
|
+
className: cn("z-50 min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Default bg-Colors-Background-Utilities-Modal p-2 text-Colors-Text-Default shadow-modal-default 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", className)
|
|
6093
6093
|
}, props));
|
|
6094
6094
|
});
|
|
6095
6095
|
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
|
|
@@ -6101,7 +6101,7 @@ var DropdownMenuContent = React13.forwardRef(function(_param, ref) {
|
|
|
6101
6101
|
return /* @__PURE__ */ jsx18(DropdownMenuPrimitive.Content, _object_spread({
|
|
6102
6102
|
ref: ref,
|
|
6103
6103
|
sideOffset: sideOffset,
|
|
6104
|
-
className: cn("z-[100] min-w-[8rem] overflow-hidden rounded-
|
|
6104
|
+
className: cn("z-[100] min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Opaque bg-Colors-Background-Normal-Primary-Default p-1 text-Colors-Text-Default shadow-modal-default 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", className)
|
|
6105
6105
|
}, props));
|
|
6106
6106
|
});
|
|
6107
6107
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
|
|
@@ -6112,7 +6112,7 @@ var DropdownMenuItem = React13.forwardRef(function(_param, ref) {
|
|
|
6112
6112
|
]);
|
|
6113
6113
|
return /* @__PURE__ */ jsx18(DropdownMenuPrimitive.Item, _object_spread({
|
|
6114
6114
|
ref: ref,
|
|
6115
|
-
className: cn("relative flex cursor-default select-none items-center rounded-
|
|
6115
|
+
className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1 outline-none transition-colors focus:bg-Colors-Background-Neutral-Primary-Default data-[disabled]:pointer-events-none data-[disabled]:opacity-30", inset && "pl-8", className)
|
|
6116
6116
|
}, props));
|
|
6117
6117
|
});
|
|
6118
6118
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
|
|
@@ -6124,7 +6124,7 @@ var DropdownMenuCheckboxItem = React13.forwardRef(function(_param, ref) {
|
|
|
6124
6124
|
]);
|
|
6125
6125
|
return /* @__PURE__ */ jsxs7(DropdownMenuPrimitive.CheckboxItem, _object_spread_props(_object_spread({
|
|
6126
6126
|
ref: ref,
|
|
6127
|
-
className: cn("relative flex cursor-default select-none items-center rounded-
|
|
6127
|
+
className: cn("relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-30", className),
|
|
6128
6128
|
checked: checked
|
|
6129
6129
|
}, props), {
|
|
6130
6130
|
children: [
|
|
@@ -6148,7 +6148,7 @@ var DropdownMenuRadioItem = React13.forwardRef(function(_param, ref) {
|
|
|
6148
6148
|
]);
|
|
6149
6149
|
return /* @__PURE__ */ jsxs7(DropdownMenuPrimitive.RadioItem, _object_spread_props(_object_spread({
|
|
6150
6150
|
ref: ref,
|
|
6151
|
-
className: cn("relative flex cursor-default select-none items-center rounded-
|
|
6151
|
+
className: cn("relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50", className)
|
|
6152
6152
|
}, props), {
|
|
6153
6153
|
children: [
|
|
6154
6154
|
/* @__PURE__ */ jsx18("span", {
|
|
@@ -7822,7 +7822,7 @@ var ModalContent = React27.forwardRef(function(_param, ref) {
|
|
|
7822
7822
|
"children"
|
|
7823
7823
|
]);
|
|
7824
7824
|
return /* @__PURE__ */ jsx34(DialogPrimitive2.Content, _object_spread_props(_object_spread({
|
|
7825
|
-
className: cn("absolute left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 !touch-auto !select-text", "duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] focus
|
|
7825
|
+
className: cn("absolute left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 !touch-auto !select-text", "duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] outline-none focus-visible:!outline-none ", className)
|
|
7826
7826
|
}, props), {
|
|
7827
7827
|
children: children
|
|
7828
7828
|
}));
|
|
@@ -7858,7 +7858,7 @@ var ModalTitle = React27.forwardRef(function(_param, ref) {
|
|
|
7858
7858
|
}));
|
|
7859
7859
|
});
|
|
7860
7860
|
ModalTitle.displayName = DialogPrimitive2.Title.displayName;
|
|
7861
|
-
var modalVariants = cva12("", {
|
|
7861
|
+
var modalVariants = cva12("focus-visible:outline-none", {
|
|
7862
7862
|
variants: {
|
|
7863
7863
|
size: {
|
|
7864
7864
|
lg: "w-[720px] max-h-[600px]",
|
|
@@ -7908,7 +7908,7 @@ var Modal = function(_param) {
|
|
|
7908
7908
|
var isMobile2 = useMedia4("(max-width: 768px)");
|
|
7909
7909
|
if (isMobile2 && !modalOnly && !isNotification) {
|
|
7910
7910
|
var drawerContent = /* @__PURE__ */ jsxs17(DrawerPrimitive2.Content, {
|
|
7911
|
-
className: cn("fixed inset-x-0 bottom-0 z-50 h-auto overflow-hidden no-scrollbar border-Colors-Border-Opaque bg-Colors-Background-
|
|
7911
|
+
className: cn("fixed inset-x-0 bottom-0 z-50 h-auto overflow-hidden no-scrollbar border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal shadow-modal-default focus:outline-none", fullScreen ? "rounded-t-none max-h-full" : "rounded-t-md max-h-[85vh]", contentClassName),
|
|
7912
7912
|
onOpenAutoFocus: function(e) {
|
|
7913
7913
|
!autoFocus && e.preventDefault();
|
|
7914
7914
|
},
|
|
@@ -8003,7 +8003,7 @@ var Modal = function(_param) {
|
|
|
8003
8003
|
}
|
|
8004
8004
|
};
|
|
8005
8005
|
var dialogContent = /* @__PURE__ */ jsxs17(ModalContent, {
|
|
8006
|
-
className: cn("rounded-md border-Colors-Border-Opaque bg-Colors-Background-
|
|
8006
|
+
className: cn("rounded-md border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal shadow-modal-default overflow-hidden", !isMobile2 ? modalVariants({
|
|
8007
8007
|
size: size,
|
|
8008
8008
|
zIndex: zIndex
|
|
8009
8009
|
}) : isLogin ? "w-[90%]" : "w-[80%]", isNotification && "w-[312px] md:w-[380px]", contentClassName),
|
|
@@ -10806,14 +10806,14 @@ function TopNavigationBar(param) {
|
|
|
10806
10806
|
href: backUrl,
|
|
10807
10807
|
className: "flex justify-center items-center",
|
|
10808
10808
|
children: /* @__PURE__ */ jsx44(IconButton, {
|
|
10809
|
-
variant:
|
|
10810
|
-
color:
|
|
10809
|
+
variant: "plain",
|
|
10810
|
+
color: "default",
|
|
10811
10811
|
size: "md",
|
|
10812
10812
|
icon: ArrowLeftIcon
|
|
10813
10813
|
})
|
|
10814
10814
|
}) : /* @__PURE__ */ jsx44(IconButton, {
|
|
10815
|
-
variant:
|
|
10816
|
-
color:
|
|
10815
|
+
variant: "plain",
|
|
10816
|
+
color: "default",
|
|
10817
10817
|
size: "md",
|
|
10818
10818
|
icon: ArrowLeftIcon,
|
|
10819
10819
|
onClick: onBack
|
|
@@ -11681,7 +11681,7 @@ var Tab = React37.forwardRef(function(_param, ref) {
|
|
|
11681
11681
|
}, tooltip), {
|
|
11682
11682
|
children: /* @__PURE__ */ jsx51(TabsPrimitive.Trigger, _object_spread_props(_object_spread({
|
|
11683
11683
|
ref: ref,
|
|
11684
|
-
className: cn("tabtrigger min-w-fit", tabVariants({
|
|
11684
|
+
className: cn("tabtrigger min-w-fit outline-none focus:!outline-none focus-visible:!outline-none", tabVariants({
|
|
11685
11685
|
variant: variant,
|
|
11686
11686
|
size: size,
|
|
11687
11687
|
rounded: rounded
|
|
@@ -11760,7 +11760,7 @@ var Textarea = React38.forwardRef(function(_param, ref) {
|
|
|
11760
11760
|
className: "relative",
|
|
11761
11761
|
children: [
|
|
11762
11762
|
/* @__PURE__ */ jsx52("textarea", _object_spread({
|
|
11763
|
-
className: cn("w-full min-h-[123px] p-3
|
|
11763
|
+
className: cn("w-full min-h-[123px] p-3 rounded-sm border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Active ", "text-sm text-Colors-Text-Default placeholder:text-Colors-Text-Subtlest", "hover:border-Colors-Border-Hover bg-cc-Input-bg-default hover:bg-cc-Input-bg-hover disabled:bg-cc-Input-bg-disabled aria-[invalid=true]:border-Colors-Border-Critical aria-[invalid=true]:hover:bg-Colors-Background-Critical-Subtle", "aria-[invalid=true]:focus-visible:ring-error file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-Colors-Text-Subtler", "disabled:cursor-not-allowed disabled:opacity-30", maxLength && ((value1 === null || value1 === void 0 ? void 0 : (_value_toString = value1.toString()) === null || _value_toString === void 0 ? void 0 : _value_toString.length) || 0) > maxLength || error ? "border-Colors-Border-Critical hover:bg-Colors-Background-Critical-Subtle focus-visible:ring-error" : "", className),
|
|
11764
11764
|
ref: ref,
|
|
11765
11765
|
maxLength: maxLength,
|
|
11766
11766
|
value: value1,
|
|
@@ -12156,10 +12156,10 @@ ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
|
|
12156
12156
|
var toastVariants = cva20("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-sm border border-Colors-Border-Opaque p-6 pr-8 shadow-modal-default transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 max-w-md", {
|
|
12157
12157
|
variants: {
|
|
12158
12158
|
variant: {
|
|
12159
|
-
info: "bg-Colors-Background-
|
|
12160
|
-
warning: "bg-Colors-Background-
|
|
12161
|
-
error: "bg-Colors-Background-
|
|
12162
|
-
success: "bg-Colors-Background-
|
|
12159
|
+
info: "bg-Colors-Background-Utilities-Modal p-4",
|
|
12160
|
+
warning: "bg-Colors-Background-Utilities-Modal p-4",
|
|
12161
|
+
error: "bg-Colors-Background-Utilities-Modal p-4",
|
|
12162
|
+
success: "bg-Colors-Background-Utilities-Modal p-4"
|
|
12163
12163
|
},
|
|
12164
12164
|
position: {
|
|
12165
12165
|
"top-left": "data-[state=open]:slide-in-from-left-full data-[state=closed]:slide-out-to-left-full",
|
|
@@ -12724,7 +12724,7 @@ function CustomNotification(param) {
|
|
|
12724
12724
|
return /* @__PURE__ */ jsx62("div", {
|
|
12725
12725
|
children: /* @__PURE__ */ jsx62("div", {
|
|
12726
12726
|
id: id,
|
|
12727
|
-
className: "z-[10000000] min-h-10 w-fit max-w-[90vw] rounded-full border border-Colors-Border-Opaque bg-Colors-Background-
|
|
12727
|
+
className: "z-[10000000] min-h-10 w-fit max-w-[90vw] rounded-full border border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal px-3 py-2 shadow-modal-default md:max-w-[560px]",
|
|
12728
12728
|
children: /* @__PURE__ */ jsxs36("div", {
|
|
12729
12729
|
className: "flex w-full items-center justify-center gap-2",
|
|
12730
12730
|
children: [
|