@lotte-innovate/ui-component-test 0.1.17 → 0.1.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/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;
|