@lotte-innovate/ui-component-test 0.1.17 → 0.1.18
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/lib/components/AlertDialog/AlertDialogAction.js +4 -2
- package/dist/lib/components/AlertDialog/AlertDialogCancel.js +9 -5
- package/dist/lib/components/AlertDialog/AlertDialogContent.js +4 -2
- package/dist/lib/components/AlertDialog/AlertDialogDescription.js +4 -2
- package/dist/lib/components/AlertDialog/AlertDialogRoot.d.ts +16 -0
- package/dist/lib/components/AlertDialog/AlertDialogRoot.js +41 -0
- package/dist/lib/components/AlertDialog/AlertDialogTitle.js +4 -2
- package/dist/lib/components/AlertDialog/AlertDialogTrigger.js +1 -1
- package/dist/lib/components/AlertDialog/index.d.ts +10 -19
- package/dist/lib/components/AlertDialog/index.js +15 -35
- package/package.json +1 -1
@@ -26,6 +26,7 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
28
|
import { appearanceStyle, primaryColorStyle, weightVariants } from '../../../lib/constants';
|
29
|
+
import { useAlertDialogContext } from './AlertDialogRoot';
|
29
30
|
export var alertDialogActionVariants = cva("inline-flex items-center justify-center px-[15px] outline-none focus:shadow-[0_0_0_2px] font-normal", {
|
30
31
|
variants: {
|
31
32
|
radius: {
|
@@ -52,8 +53,9 @@ export var alertDialogActionVariants = cva("inline-flex items-center justify-cen
|
|
52
53
|
},
|
53
54
|
});
|
54
55
|
export var AlertDialogAction = forwardRef(function (_a, ref) {
|
55
|
-
var className = _a.className, children = _a.children,
|
56
|
+
var className = _a.className, children = _a.children, weight = _a.weight, props = __rest(_a, ["className", "children", "weight"]);
|
57
|
+
var _b = useAlertDialogContext(), size = _b.size, radius = _b.radius, _c = _b.color, color = _c === void 0 ? 'red' : _c, _d = _b.appearance, appearance = _d === void 0 ? 'solid' : _d;
|
56
58
|
var buttonClassName = cn(alertDialogActionVariants({ radius: radius, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
|
57
59
|
return (_jsx(AlertDialogPrimitive.Action, __assign({ ref: ref, className: buttonClassName }, props, { children: children })));
|
58
60
|
});
|
59
|
-
AlertDialogAction.displayName = '
|
61
|
+
AlertDialogAction.displayName = 'AlertDialog.Action';
|
@@ -25,8 +25,9 @@ import { forwardRef } from 'react';
|
|
25
25
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
|
-
import { weightVariants } from '../../../lib/constants';
|
29
|
-
|
28
|
+
import { appearanceStyle, weightVariants } from '../../../lib/constants';
|
29
|
+
import { useAlertDialogContext } from './AlertDialogRoot';
|
30
|
+
export var alertDialogCancelVariants = cva("inline-flex justify-center items-center outline-none", {
|
30
31
|
variants: {
|
31
32
|
radius: {
|
32
33
|
none: 'rounded-none',
|
@@ -50,7 +51,10 @@ export var alertDialogCancelVariants = cva("inline-flex justify-center items-cen
|
|
50
51
|
},
|
51
52
|
});
|
52
53
|
export var AlertDialogCancel = forwardRef(function (_a, ref) {
|
53
|
-
var className = _a.className, children = _a.children,
|
54
|
-
|
54
|
+
var className = _a.className, children = _a.children, weight = _a.weight, props = __rest(_a, ["className", "children", "weight"]);
|
55
|
+
var _b = useAlertDialogContext(), size = _b.size, radius = _b.radius, _c = _b.appearance, appearance = _c === void 0 ? 'solid' : _c;
|
56
|
+
var disabledButtonStyle = "border-none text-slate-11 bg-slate-3 \n active:bg-slate-4 active:border-none hover:cursor-pointer hover:bg-slateA-4\n dark:text-slateDark-11 dark:bg-slateDark-3 dark:hover:bg-slateDarkA-4";
|
57
|
+
var buttonClassName = cn(alertDialogCancelVariants({ radius: radius, size: size, weight: weight }), appearanceStyle(appearance, 'slate'), disabledButtonStyle, className);
|
58
|
+
return (_jsx(AlertDialogPrimitive.Cancel, __assign({ ref: ref }, props, { className: buttonClassName, children: children })));
|
55
59
|
});
|
56
|
-
AlertDialogCancel.displayName = '
|
60
|
+
AlertDialogCancel.displayName = 'AlertDialog.Cancel';
|
@@ -26,6 +26,7 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
28
|
import { radiusVariants, scalingVariants } from '../../../lib/constants';
|
29
|
+
import { useAlertDialogContext } from './AlertDialogRoot';
|
29
30
|
export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[50%] focus:outline-none\n translate-x-[-50%] translate-y-[-50%] data-[state=open]:animate-contentShow bg-white dark:bg-slateDark-1 \n shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px]", {
|
30
31
|
variants: {
|
31
32
|
size: {
|
@@ -43,7 +44,8 @@ export var alertDialogContentVariants = cva("fixed max-h-[85vh] top-[50%] left-[
|
|
43
44
|
},
|
44
45
|
});
|
45
46
|
export var AlertDialogContent = forwardRef(function (_a, ref) {
|
46
|
-
var className = _a.className, children = _a.children,
|
47
|
+
var className = _a.className, children = _a.children, scaling = _a.scaling, props = __rest(_a, ["className", "children", "scaling"]);
|
48
|
+
var _b = useAlertDialogContext(), radius = _b.radius, size = _b.size;
|
47
49
|
return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed data-[state=open]:animate-overlayShow inset-0" }), _jsx(AlertDialogPrimitive.Content, __assign({ className: cn(alertDialogContentVariants({ radius: radius, size: size, scaling: scaling }), className), ref: ref }, props, { children: children }))] }));
|
48
50
|
});
|
49
|
-
AlertDialogContent.displayName = '
|
51
|
+
AlertDialogContent.displayName = 'AlertDialog.Content';
|
@@ -25,6 +25,7 @@ import { forwardRef } from 'react';
|
|
25
25
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
|
+
import { useAlertDialogContext } from './AlertDialogRoot';
|
28
29
|
export var alertDialogDescriptionVariants = cva("text-slate-12 dark:text-slateDark-12 font-normal", {
|
29
30
|
variants: {
|
30
31
|
size: {
|
@@ -39,7 +40,8 @@ export var alertDialogDescriptionVariants = cva("text-slate-12 dark:text-slateDa
|
|
39
40
|
},
|
40
41
|
});
|
41
42
|
export var AlertDialogDescription = forwardRef(function (_a, ref) {
|
42
|
-
var className = _a.className, children = _a.children,
|
43
|
+
var className = _a.className, children = _a.children, contentText = _a.contentText, props = __rest(_a, ["className", "children", "contentText"]);
|
44
|
+
var size = useAlertDialogContext().size;
|
43
45
|
return (_jsx(AlertDialogPrimitive.Description, __assign({ className: cn(alertDialogDescriptionVariants({ size: size }), className), ref: ref }, props, { children: contentText !== null && contentText !== void 0 ? contentText : children })));
|
44
46
|
});
|
45
|
-
AlertDialogDescription.displayName = '
|
47
|
+
AlertDialogDescription.displayName = 'AlertDialog.Description';
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
4
|
+
import { alertDialogContentVariants } from './AlertDialogContent';
|
5
|
+
import { alertDialogTitleVariants } from './AlertDialogTitle';
|
6
|
+
import { alertDialogDescriptionVariants } from './AlertDialogDescription';
|
7
|
+
import { alertDialogActionVariants } from './AlertDialogAction';
|
8
|
+
import { IAppearance, IColor } from '../../../lib/types';
|
9
|
+
export interface AlertDialogProps extends VariantProps<typeof alertDialogContentVariants>, VariantProps<typeof alertDialogTitleVariants>, VariantProps<typeof alertDialogDescriptionVariants>, VariantProps<typeof alertDialogActionVariants> {
|
10
|
+
titleText?: string;
|
11
|
+
contentText?: string;
|
12
|
+
color?: IColor;
|
13
|
+
appearance?: IAppearance;
|
14
|
+
}
|
15
|
+
export declare const useAlertDialogContext: () => AlertDialogProps;
|
16
|
+
export declare const AlertDialogRoot: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogProps & AlertDialogProps & React.RefAttributes<never>>;
|
@@ -0,0 +1,41 @@
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
2
|
+
__assign = Object.assign || function(t) {
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
+
s = arguments[i];
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
+
t[p] = s[p];
|
7
|
+
}
|
8
|
+
return t;
|
9
|
+
};
|
10
|
+
return __assign.apply(this, arguments);
|
11
|
+
};
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
+
var t = {};
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
+
t[p] = s[p];
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
+
t[p[i]] = s[p[i]];
|
20
|
+
}
|
21
|
+
return t;
|
22
|
+
};
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
+
import { forwardRef, createContext, useContext } from 'react';
|
25
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
26
|
+
var AlertDialogContext = createContext({
|
27
|
+
size: 'medium',
|
28
|
+
scaling: '100%',
|
29
|
+
color: 'red',
|
30
|
+
radius: 'medium',
|
31
|
+
appearance: 'solid',
|
32
|
+
});
|
33
|
+
export var useAlertDialogContext = function () {
|
34
|
+
return useContext(AlertDialogContext);
|
35
|
+
};
|
36
|
+
export var AlertDialogRoot = forwardRef(function (_a, ref) {
|
37
|
+
var children = _a.children, radius = _a.radius, size = _a.size, scaling = _a.scaling, color = _a.color, props = __rest(_a, ["children", "radius", "size", "scaling", "color"]);
|
38
|
+
var contextValue = { radius: radius, size: size, scaling: scaling, color: color };
|
39
|
+
return (_jsx(AlertDialogContext.Provider, { value: contextValue, children: _jsx("div", { ref: ref, children: _jsx(AlertDialogPrimitive.Root, __assign({}, props, { children: children })) }) }));
|
40
|
+
});
|
41
|
+
AlertDialogRoot.displayName = 'AlertDialog.Root';
|
@@ -25,6 +25,7 @@ import { forwardRef } from 'react';
|
|
25
25
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
26
26
|
import { cva } from 'class-variance-authority';
|
27
27
|
import { cn } from '../../../lib/utils/utils';
|
28
|
+
import { useAlertDialogContext } from './AlertDialogRoot';
|
28
29
|
export var alertDialogTitleVariants = cva("m-0 text-slate-12 dark:text-slateDark-12 font-bold", {
|
29
30
|
variants: {
|
30
31
|
size: {
|
@@ -39,7 +40,8 @@ export var alertDialogTitleVariants = cva("m-0 text-slate-12 dark:text-slateDark
|
|
39
40
|
},
|
40
41
|
});
|
41
42
|
export var AlertDialogTitle = forwardRef(function (_a, ref) {
|
42
|
-
var className = _a.className, children = _a.children,
|
43
|
+
var className = _a.className, children = _a.children, titleText = _a.titleText, props = __rest(_a, ["className", "children", "titleText"]);
|
44
|
+
var size = useAlertDialogContext().size;
|
43
45
|
return (_jsx(AlertDialogPrimitive.Title, __assign({ className: cn(alertDialogTitleVariants({ size: size }), className), ref: ref }, props, { children: titleText !== null && titleText !== void 0 ? titleText : children })));
|
44
46
|
});
|
45
|
-
AlertDialogTitle.displayName = '
|
47
|
+
AlertDialogTitle.displayName = 'AlertDialog.Title';
|
@@ -52,4 +52,4 @@ export var AlertDialogTrigger = forwardRef(function (_a, ref) {
|
|
52
52
|
var buttonClassName = cn(buttonVariants({ radius: radius, scaling: scaling, size: size, weight: weight, color: color }), appearanceStyle(appearance, color), className);
|
53
53
|
return (_jsx(AlertDialogPrimitive.Trigger, __assign({ asChild: true, ref: ref, className: buttonClassName }, props, { children: children })));
|
54
54
|
});
|
55
|
-
AlertDialogTrigger.displayName = '
|
55
|
+
AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
|
@@ -1,20 +1,11 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
import
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
export * from './AlertDialogDescription';
|
12
|
-
export * from './AlertDialogCancel';
|
13
|
-
export * from './AlertDialogAction';
|
14
|
-
export interface AlertDialogProps extends VariantProps<typeof alertDialogContentVariants>, VariantProps<typeof alertDialogTitleVariants>, VariantProps<typeof alertDialogDescriptionVariants> {
|
15
|
-
titleText?: string;
|
16
|
-
contentText?: string;
|
17
|
-
color?: IColor;
|
18
|
-
}
|
19
|
-
export declare const AlertDialog: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogProps & AlertDialogProps & React.RefAttributes<never>>;
|
1
|
+
/// <reference types="react" />
|
2
|
+
declare const AlertDialog: {
|
3
|
+
Root: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogProps & import("./AlertDialogRoot").AlertDialogProps & import("react").RefAttributes<never>>;
|
4
|
+
Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./AlertDialogTrigger").ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
|
5
|
+
Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("./AlertDialogContent").AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
6
|
+
Title: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("./AlertDialogTitle").AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
|
7
|
+
Description: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("./AlertDialogDescription").AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
8
|
+
Cancel: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./AlertDialogCancel").AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>>;
|
9
|
+
Action: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-alert-dialog").AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("./AlertDialogAction").AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>>;
|
10
|
+
};
|
20
11
|
export default AlertDialog;
|
@@ -1,37 +1,17 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
1
|
+
import { AlertDialogRoot as Root } from './AlertDialogRoot';
|
2
|
+
import { AlertDialogTrigger as Trigger } from './AlertDialogTrigger';
|
3
|
+
import { AlertDialogContent as Content } from './AlertDialogContent';
|
4
|
+
import { AlertDialogTitle as Title } from './AlertDialogTitle';
|
5
|
+
import { AlertDialogDescription as Description } from './AlertDialogDescription';
|
6
|
+
import { AlertDialogCancel as Cancel } from './AlertDialogCancel';
|
7
|
+
import { AlertDialogAction as Action } from './AlertDialogAction';
|
8
|
+
var AlertDialog = {
|
9
|
+
Root: Root,
|
10
|
+
Trigger: Trigger,
|
11
|
+
Content: Content,
|
12
|
+
Title: Title,
|
13
|
+
Description: Description,
|
14
|
+
Cancel: Cancel,
|
15
|
+
Action: Action
|
11
16
|
};
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
-
var t = {};
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
-
t[p] = s[p];
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
-
t[p[i]] = s[p[i]];
|
20
|
-
}
|
21
|
-
return t;
|
22
|
-
};
|
23
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
24
|
-
import { forwardRef } from 'react';
|
25
|
-
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
26
|
-
export * from './AlertDialogTrigger';
|
27
|
-
export * from './AlertDialogContent';
|
28
|
-
export * from './AlertDialogTitle';
|
29
|
-
export * from './AlertDialogDescription';
|
30
|
-
export * from './AlertDialogCancel';
|
31
|
-
export * from './AlertDialogAction';
|
32
|
-
export var AlertDialog = forwardRef(function (_a, ref) {
|
33
|
-
var children = _a.children, props = __rest(_a, ["children"]);
|
34
|
-
return (_jsx("div", { ref: ref, children: _jsx(AlertDialogPrimitive.Root, __assign({}, props, { children: children })) }));
|
35
|
-
});
|
36
|
-
AlertDialog.displayName = 'AlertDialog';
|
37
17
|
export default AlertDialog;
|