@yamada-ui/alert 1.0.42-dev-20241005224505 → 1.0.42-dev-20241006032009
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/alert.d.mts +11 -11
- package/dist/alert.d.ts +11 -11
- package/dist/alert.js +11 -11
- package/dist/alert.js.map +1 -1
- package/dist/alert.mjs +1 -1
- package/dist/{chunk-KYRXDK5C.mjs → chunk-55MFOQPT.mjs} +15 -15
- package/dist/chunk-55MFOQPT.mjs.map +1 -0
- package/dist/index.js +11 -11
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +5 -5
- package/dist/chunk-KYRXDK5C.mjs.map +0 -1
package/dist/alert.d.mts
CHANGED
|
@@ -5,29 +5,29 @@ import * as _yamada_ui_icon from '@yamada-ui/icon';
|
|
|
5
5
|
import { LoadingProps } from '@yamada-ui/loading';
|
|
6
6
|
|
|
7
7
|
declare const defaultStatuses: {
|
|
8
|
-
readonly
|
|
8
|
+
readonly error: {
|
|
9
|
+
readonly colorScheme: "danger";
|
|
9
10
|
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
11
|
+
};
|
|
12
|
+
readonly info: {
|
|
10
13
|
readonly colorScheme: "info";
|
|
14
|
+
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
15
|
+
};
|
|
16
|
+
readonly loading: {
|
|
17
|
+
readonly colorScheme: "primary";
|
|
18
|
+
readonly icon: _yamada_ui_core.Component<"svg", LoadingProps>;
|
|
11
19
|
};
|
|
12
20
|
readonly success: {
|
|
13
|
-
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
14
21
|
readonly colorScheme: "success";
|
|
22
|
+
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
15
23
|
};
|
|
16
24
|
readonly warning: {
|
|
17
|
-
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
18
25
|
readonly colorScheme: "warning";
|
|
19
|
-
};
|
|
20
|
-
readonly error: {
|
|
21
26
|
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
22
|
-
readonly colorScheme: "danger";
|
|
23
|
-
};
|
|
24
|
-
readonly loading: {
|
|
25
|
-
readonly icon: _yamada_ui_core.Component<"svg", LoadingProps>;
|
|
26
|
-
readonly colorScheme: "primary";
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
29
|
type Status = keyof typeof defaultStatuses;
|
|
30
|
-
declare const getStatusColorScheme: (status: Status, statuses?: AlertStatuses) => "
|
|
30
|
+
declare const getStatusColorScheme: (status: Status, statuses?: AlertStatuses) => "danger" | "info" | "primary" | "link" | "success" | "warning" | "amber" | "blackAlpha" | "blue" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "neutral" | "orange" | "pink" | "purple" | "red" | "rose" | "secondary" | "sky" | "teal" | "violet" | "whiteAlpha" | "yellow" | ({} & string);
|
|
31
31
|
declare const getStatusIcon: (status: Status, statuses?: AlertStatuses) => react.FC<_yamada_ui_icon.IconProps> | _yamada_ui_core.Component<"svg", LoadingProps> | react.FC;
|
|
32
32
|
interface AlertOptions {
|
|
33
33
|
/**
|
package/dist/alert.d.ts
CHANGED
|
@@ -5,29 +5,29 @@ import * as _yamada_ui_icon from '@yamada-ui/icon';
|
|
|
5
5
|
import { LoadingProps } from '@yamada-ui/loading';
|
|
6
6
|
|
|
7
7
|
declare const defaultStatuses: {
|
|
8
|
-
readonly
|
|
8
|
+
readonly error: {
|
|
9
|
+
readonly colorScheme: "danger";
|
|
9
10
|
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
11
|
+
};
|
|
12
|
+
readonly info: {
|
|
10
13
|
readonly colorScheme: "info";
|
|
14
|
+
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
15
|
+
};
|
|
16
|
+
readonly loading: {
|
|
17
|
+
readonly colorScheme: "primary";
|
|
18
|
+
readonly icon: _yamada_ui_core.Component<"svg", LoadingProps>;
|
|
11
19
|
};
|
|
12
20
|
readonly success: {
|
|
13
|
-
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
14
21
|
readonly colorScheme: "success";
|
|
22
|
+
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
15
23
|
};
|
|
16
24
|
readonly warning: {
|
|
17
|
-
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
18
25
|
readonly colorScheme: "warning";
|
|
19
|
-
};
|
|
20
|
-
readonly error: {
|
|
21
26
|
readonly icon: react.FC<_yamada_ui_icon.IconProps>;
|
|
22
|
-
readonly colorScheme: "danger";
|
|
23
|
-
};
|
|
24
|
-
readonly loading: {
|
|
25
|
-
readonly icon: _yamada_ui_core.Component<"svg", LoadingProps>;
|
|
26
|
-
readonly colorScheme: "primary";
|
|
27
27
|
};
|
|
28
28
|
};
|
|
29
29
|
type Status = keyof typeof defaultStatuses;
|
|
30
|
-
declare const getStatusColorScheme: (status: Status, statuses?: AlertStatuses) => "
|
|
30
|
+
declare const getStatusColorScheme: (status: Status, statuses?: AlertStatuses) => "danger" | "info" | "primary" | "link" | "success" | "warning" | "amber" | "blackAlpha" | "blue" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "indigo" | "lime" | "neutral" | "orange" | "pink" | "purple" | "red" | "rose" | "secondary" | "sky" | "teal" | "violet" | "whiteAlpha" | "yellow" | ({} & string);
|
|
31
31
|
declare const getStatusIcon: (status: Status, statuses?: AlertStatuses) => react.FC<_yamada_ui_icon.IconProps> | _yamada_ui_core.Component<"svg", LoadingProps> | react.FC;
|
|
32
32
|
interface AlertOptions {
|
|
33
33
|
/**
|
package/dist/alert.js
CHANGED
|
@@ -35,11 +35,11 @@ var import_loading = require("@yamada-ui/loading");
|
|
|
35
35
|
var import_utils = require("@yamada-ui/utils");
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var defaultStatuses = {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
error: { colorScheme: "danger", icon: import_icon.WarningIcon },
|
|
39
|
+
info: { colorScheme: "info", icon: import_icon.InfoIcon },
|
|
40
|
+
loading: { colorScheme: "primary", icon: import_loading.Loading },
|
|
41
|
+
success: { colorScheme: "success", icon: import_icon.CheckIcon },
|
|
42
|
+
warning: { colorScheme: "warning", icon: import_icon.WarningIcon }
|
|
43
43
|
};
|
|
44
44
|
var [AlertProvider, useAlert] = (0, import_utils.createContext)({
|
|
45
45
|
name: `AlertStylesContext`,
|
|
@@ -54,7 +54,7 @@ var getStatusIcon = (status, statuses) => {
|
|
|
54
54
|
return (_b = (_a = statuses == null ? void 0 : statuses[status]) == null ? void 0 : _a.icon) != null ? _b : defaultStatuses[status].icon;
|
|
55
55
|
};
|
|
56
56
|
var Alert = (0, import_core.forwardRef)(
|
|
57
|
-
({ status = "info",
|
|
57
|
+
({ colorScheme, status = "info", ...props }, ref) => {
|
|
58
58
|
var _a, _b, _c;
|
|
59
59
|
const { theme } = (0, import_core.useTheme)();
|
|
60
60
|
const statuses = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.alert) == null ? void 0 : _b.statuses) != null ? _c : {};
|
|
@@ -65,11 +65,11 @@ var Alert = (0, import_core.forwardRef)(
|
|
|
65
65
|
});
|
|
66
66
|
const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
|
67
67
|
const css = {
|
|
68
|
-
w: "100%",
|
|
69
|
-
display: "flex",
|
|
70
68
|
alignItems: "center",
|
|
71
|
-
|
|
69
|
+
display: "flex",
|
|
72
70
|
overflow: "hidden",
|
|
71
|
+
position: "relative",
|
|
72
|
+
w: "100%",
|
|
73
73
|
...styles.container
|
|
74
74
|
};
|
|
75
75
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -105,14 +105,14 @@ var AlertIcon = ({
|
|
|
105
105
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
106
|
import_core.ui.span,
|
|
107
107
|
{
|
|
108
|
-
display: "inherit",
|
|
109
108
|
className: (0, import_utils.cx)("ui-alert__icon", className),
|
|
109
|
+
display: "inherit",
|
|
110
110
|
__css: css,
|
|
111
111
|
...rest,
|
|
112
112
|
children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
113
|
Icon,
|
|
114
114
|
{
|
|
115
|
-
...status === "loading" ? {
|
|
115
|
+
...status === "loading" ? { color: "currentcolor", variant } : { boxSize: "100%" }
|
|
116
116
|
}
|
|
117
117
|
)
|
|
118
118
|
}
|
package/dist/alert.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import type {\n
|
|
1
|
+
{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import type {\n AlertStatuses,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n useTheme,\n} from \"@yamada-ui/core\"\nimport { CheckIcon, InfoIcon, WarningIcon } from \"@yamada-ui/icon\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst defaultStatuses = {\n error: { colorScheme: \"danger\", icon: WarningIcon },\n info: { colorScheme: \"info\", icon: InfoIcon },\n loading: { colorScheme: \"primary\", icon: Loading },\n success: { colorScheme: \"success\", icon: CheckIcon },\n warning: { colorScheme: \"warning\", icon: WarningIcon },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ninterface AlertContext {\n status: Status\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n name: `AlertStylesContext`,\n errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n status: Status,\n statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ninterface AlertOptions {\n /**\n * The status of the alert.\n *\n * @default 'info'\n */\n status?: Status\n}\n\nexport interface AlertProps\n extends HTMLUIProps,\n ThemeProps<\"Alert\">,\n AlertOptions {}\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n ({ colorScheme, status = \"info\", ...props }, ref) => {\n const { theme } = useTheme()\n const statuses = theme.__config?.alert?.statuses ?? {}\n\n colorScheme ??= getStatusColorScheme(status, statuses)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Alert\", {\n ...props,\n colorScheme,\n })\n const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n overflow: \"hidden\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }\n\n return (\n <AlertProvider value={{ status, styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-alert\", className)}\n role=\"alert\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.div>\n </AlertProvider>\n )\n },\n)\n\nAlert.displayName = \"Alert\"\nAlert.__ui__ = \"Alert\"\n\nexport interface AlertIconProps extends HTMLUIProps<\"span\"> {\n variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n className,\n children,\n variant = \"oval\",\n ...rest\n}) => {\n const { status, styles } = useAlert()\n const { theme } = useTheme()\n const statuses = theme.__config?.alert?.statuses ?? {}\n\n const Icon = getStatusIcon(status, statuses)\n const css: CSSUIObject = {\n ...styles.icon,\n ...(status === \"loading\" ? styles.loading : {}),\n }\n\n return (\n <ui.span\n className={cx(\"ui-alert__icon\", className)}\n display=\"inherit\"\n __css={css}\n {...rest}\n >\n {children || (\n <Icon\n {...(status === \"loading\"\n ? { color: \"currentcolor\", variant }\n : { boxSize: \"100%\" })}\n />\n )}\n </ui.span>\n )\n}\n\nAlertIcon.displayName = \"AlertIcon\"\nAlertIcon.__ui__ = \"AlertIcon\"\n\nexport interface AlertTitleProps extends HTMLUIProps<\"p\"> {}\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useAlert()\n\n const css: CSSUIObject = {\n display: \"block\",\n ...styles.title,\n }\n\n return (\n <ui.p\n ref={ref}\n className={cx(\"ui-alert__title\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nAlertTitle.displayName = \"AlertTitle\"\nAlertTitle.__ui__ = \"AlertTitle\"\n\nexport interface AlertDescriptionProps extends HTMLUIProps<\"span\"> {}\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useAlert()\n\n const css: CSSUIObject = {\n ...styles.description,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-alert__desc\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nAlertDescription.displayName = \"AlertDescription\"\nAlertDescription.__ui__ = \"AlertDescription\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,kBAMO;AACP,kBAAiD;AACjD,qBAAwB;AACxB,mBAAkC;AAyE1B;AAvER,IAAM,kBAAkB;AAAA,EACtB,OAAO,EAAE,aAAa,UAAU,MAAM,wBAAY;AAAA,EAClD,MAAM,EAAE,aAAa,QAAQ,MAAM,qBAAS;AAAA,EAC5C,SAAS,EAAE,aAAa,WAAW,MAAM,uBAAQ;AAAA,EACjD,SAAS,EAAE,aAAa,WAAW,MAAM,sBAAU;AAAA,EACnD,SAAS,EAAE,aAAa,WAAW,MAAM,wBAAY;AACvD;AASA,IAAM,CAAC,eAAe,QAAQ,QAAI,4BAA4B;AAAA,EAC5D,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAEM,IAAM,uBAAuB,CAClC,QACA,aACA;AA1CF;AA0CK,0DAAW,YAAX,mBAAoB,gBAApB,YAAmC,gBAAgB,MAAM,EAAE;AAAA;AAEzD,IAAM,gBAAgB,CAAC,QAAgB,aAA0B;AA5CxE;AA6CE,0DAAW,YAAX,mBAAoB,SAApB,YAA4B,gBAAgB,MAAM,EAAE;AAAA;AAqB/C,IAAM,YAAQ;AAAA,EACnB,CAAC,EAAE,aAAa,SAAS,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAnEvD;AAoEI,UAAM,EAAE,MAAM,QAAI,sBAAS;AAC3B,UAAM,YAAW,uBAAM,aAAN,mBAAgB,UAAhB,mBAAuB,aAAvB,YAAmC,CAAC;AAErD,sDAAgB,qBAAqB,QAAQ,QAAQ;AAErD,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,SAAS;AAAA,MAC5D,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEnE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,4CAAC,iBAAc,OAAO,EAAE,QAAQ,OAAO,GACrC;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,YAAY,SAAS;AAAA,QACnC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;AACpB,MAAM,SAAS;AAMR,IAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AApHN;AAqHE,QAAM,EAAE,QAAQ,OAAO,IAAI,SAAS;AACpC,QAAM,EAAE,MAAM,QAAI,sBAAS;AAC3B,QAAM,YAAW,uBAAM,aAAN,mBAAgB,UAAhB,mBAAuB,aAAvB,YAAmC,CAAC;AAErD,QAAM,OAAO,cAAc,QAAQ,QAAQ;AAC3C,QAAM,MAAmB;AAAA,IACvB,GAAG,OAAO;AAAA,IACV,GAAI,WAAW,YAAY,OAAO,UAAU,CAAC;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC,eAAW,iBAAG,kBAAkB,SAAS;AAAA,MACzC,SAAQ;AAAA,MACR,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,sBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,WAAW,YACZ,EAAE,OAAO,gBAAgB,QAAQ,IACjC,EAAE,SAAS,OAAO;AAAA;AAAA,MACxB;AAAA;AAAA,EAEJ;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,SAAS;AAE5B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAIb,IAAM,uBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,SAAS;AAE5B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,kBAAkB,SAAS;AAAA,QACzC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;","names":[]}
|
package/dist/alert.mjs
CHANGED
|
@@ -2,22 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
// src/alert.tsx
|
|
4
4
|
import {
|
|
5
|
-
ui,
|
|
6
5
|
forwardRef,
|
|
7
|
-
useComponentMultiStyle,
|
|
8
6
|
omitThemeProps,
|
|
7
|
+
ui,
|
|
8
|
+
useComponentMultiStyle,
|
|
9
9
|
useTheme
|
|
10
10
|
} from "@yamada-ui/core";
|
|
11
|
-
import { InfoIcon, WarningIcon
|
|
11
|
+
import { CheckIcon, InfoIcon, WarningIcon } from "@yamada-ui/icon";
|
|
12
12
|
import { Loading } from "@yamada-ui/loading";
|
|
13
13
|
import { createContext, cx } from "@yamada-ui/utils";
|
|
14
14
|
import { jsx } from "react/jsx-runtime";
|
|
15
15
|
var defaultStatuses = {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
error: { colorScheme: "danger", icon: WarningIcon },
|
|
17
|
+
info: { colorScheme: "info", icon: InfoIcon },
|
|
18
|
+
loading: { colorScheme: "primary", icon: Loading },
|
|
19
|
+
success: { colorScheme: "success", icon: CheckIcon },
|
|
20
|
+
warning: { colorScheme: "warning", icon: WarningIcon }
|
|
21
21
|
};
|
|
22
22
|
var [AlertProvider, useAlert] = createContext({
|
|
23
23
|
name: `AlertStylesContext`,
|
|
@@ -32,7 +32,7 @@ var getStatusIcon = (status, statuses) => {
|
|
|
32
32
|
return (_b = (_a = statuses == null ? void 0 : statuses[status]) == null ? void 0 : _a.icon) != null ? _b : defaultStatuses[status].icon;
|
|
33
33
|
};
|
|
34
34
|
var Alert = forwardRef(
|
|
35
|
-
({ status = "info",
|
|
35
|
+
({ colorScheme, status = "info", ...props }, ref) => {
|
|
36
36
|
var _a, _b, _c;
|
|
37
37
|
const { theme } = useTheme();
|
|
38
38
|
const statuses = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.alert) == null ? void 0 : _b.statuses) != null ? _c : {};
|
|
@@ -43,11 +43,11 @@ var Alert = forwardRef(
|
|
|
43
43
|
});
|
|
44
44
|
const { className, children, ...rest } = omitThemeProps(mergedProps);
|
|
45
45
|
const css = {
|
|
46
|
-
w: "100%",
|
|
47
|
-
display: "flex",
|
|
48
46
|
alignItems: "center",
|
|
49
|
-
|
|
47
|
+
display: "flex",
|
|
50
48
|
overflow: "hidden",
|
|
49
|
+
position: "relative",
|
|
50
|
+
w: "100%",
|
|
51
51
|
...styles.container
|
|
52
52
|
};
|
|
53
53
|
return /* @__PURE__ */ jsx(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ jsx(
|
|
@@ -83,14 +83,14 @@ var AlertIcon = ({
|
|
|
83
83
|
return /* @__PURE__ */ jsx(
|
|
84
84
|
ui.span,
|
|
85
85
|
{
|
|
86
|
-
display: "inherit",
|
|
87
86
|
className: cx("ui-alert__icon", className),
|
|
87
|
+
display: "inherit",
|
|
88
88
|
__css: css,
|
|
89
89
|
...rest,
|
|
90
90
|
children: children || /* @__PURE__ */ jsx(
|
|
91
91
|
Icon,
|
|
92
92
|
{
|
|
93
|
-
...status === "loading" ? {
|
|
93
|
+
...status === "loading" ? { color: "currentcolor", variant } : { boxSize: "100%" }
|
|
94
94
|
}
|
|
95
95
|
)
|
|
96
96
|
}
|
|
@@ -146,4 +146,4 @@ export {
|
|
|
146
146
|
AlertTitle,
|
|
147
147
|
AlertDescription
|
|
148
148
|
};
|
|
149
|
-
//# sourceMappingURL=chunk-
|
|
149
|
+
//# sourceMappingURL=chunk-55MFOQPT.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import type {\n AlertStatuses,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n useTheme,\n} from \"@yamada-ui/core\"\nimport { CheckIcon, InfoIcon, WarningIcon } from \"@yamada-ui/icon\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst defaultStatuses = {\n error: { colorScheme: \"danger\", icon: WarningIcon },\n info: { colorScheme: \"info\", icon: InfoIcon },\n loading: { colorScheme: \"primary\", icon: Loading },\n success: { colorScheme: \"success\", icon: CheckIcon },\n warning: { colorScheme: \"warning\", icon: WarningIcon },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ninterface AlertContext {\n status: Status\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n name: `AlertStylesContext`,\n errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n status: Status,\n statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ninterface AlertOptions {\n /**\n * The status of the alert.\n *\n * @default 'info'\n */\n status?: Status\n}\n\nexport interface AlertProps\n extends HTMLUIProps,\n ThemeProps<\"Alert\">,\n AlertOptions {}\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n ({ colorScheme, status = \"info\", ...props }, ref) => {\n const { theme } = useTheme()\n const statuses = theme.__config?.alert?.statuses ?? {}\n\n colorScheme ??= getStatusColorScheme(status, statuses)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Alert\", {\n ...props,\n colorScheme,\n })\n const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n overflow: \"hidden\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }\n\n return (\n <AlertProvider value={{ status, styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-alert\", className)}\n role=\"alert\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.div>\n </AlertProvider>\n )\n },\n)\n\nAlert.displayName = \"Alert\"\nAlert.__ui__ = \"Alert\"\n\nexport interface AlertIconProps extends HTMLUIProps<\"span\"> {\n variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n className,\n children,\n variant = \"oval\",\n ...rest\n}) => {\n const { status, styles } = useAlert()\n const { theme } = useTheme()\n const statuses = theme.__config?.alert?.statuses ?? {}\n\n const Icon = getStatusIcon(status, statuses)\n const css: CSSUIObject = {\n ...styles.icon,\n ...(status === \"loading\" ? styles.loading : {}),\n }\n\n return (\n <ui.span\n className={cx(\"ui-alert__icon\", className)}\n display=\"inherit\"\n __css={css}\n {...rest}\n >\n {children || (\n <Icon\n {...(status === \"loading\"\n ? { color: \"currentcolor\", variant }\n : { boxSize: \"100%\" })}\n />\n )}\n </ui.span>\n )\n}\n\nAlertIcon.displayName = \"AlertIcon\"\nAlertIcon.__ui__ = \"AlertIcon\"\n\nexport interface AlertTitleProps extends HTMLUIProps<\"p\"> {}\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useAlert()\n\n const css: CSSUIObject = {\n display: \"block\",\n ...styles.title,\n }\n\n return (\n <ui.p\n ref={ref}\n className={cx(\"ui-alert__title\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nAlertTitle.displayName = \"AlertTitle\"\nAlertTitle.__ui__ = \"AlertTitle\"\n\nexport interface AlertDescriptionProps extends HTMLUIProps<\"span\"> {}\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useAlert()\n\n const css: CSSUIObject = {\n ...styles.description,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-alert__desc\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nAlertDescription.displayName = \"AlertDescription\"\nAlertDescription.__ui__ = \"AlertDescription\"\n"],"mappings":";;;AAQA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,UAAU,mBAAmB;AACjD,SAAS,eAAe;AACxB,SAAS,eAAe,UAAU;AAyE1B;AAvER,IAAM,kBAAkB;AAAA,EACtB,OAAO,EAAE,aAAa,UAAU,MAAM,YAAY;AAAA,EAClD,MAAM,EAAE,aAAa,QAAQ,MAAM,SAAS;AAAA,EAC5C,SAAS,EAAE,aAAa,WAAW,MAAM,QAAQ;AAAA,EACjD,SAAS,EAAE,aAAa,WAAW,MAAM,UAAU;AAAA,EACnD,SAAS,EAAE,aAAa,WAAW,MAAM,YAAY;AACvD;AASA,IAAM,CAAC,eAAe,QAAQ,IAAI,cAA4B;AAAA,EAC5D,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAEM,IAAM,uBAAuB,CAClC,QACA,aACA;AA1CF;AA0CK,0DAAW,YAAX,mBAAoB,gBAApB,YAAmC,gBAAgB,MAAM,EAAE;AAAA;AAEzD,IAAM,gBAAgB,CAAC,QAAgB,aAA0B;AA5CxE;AA6CE,0DAAW,YAAX,mBAAoB,SAApB,YAA4B,gBAAgB,MAAM,EAAE;AAAA;AAqB/C,IAAM,QAAQ;AAAA,EACnB,CAAC,EAAE,aAAa,SAAS,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAnEvD;AAoEI,UAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,UAAM,YAAW,uBAAM,aAAN,mBAAgB,UAAhB,mBAAuB,aAAvB,YAAmC,CAAC;AAErD,sDAAgB,qBAAqB,QAAQ,QAAQ;AAErD,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,SAAS;AAAA,MAC5D,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,GAAG,KAAK,IAAI,eAAe,WAAW;AAEnE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,oBAAC,iBAAc,OAAO,EAAE,QAAQ,OAAO,GACrC;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;AACpB,MAAM,SAAS;AAMR,IAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AApHN;AAqHE,QAAM,EAAE,QAAQ,OAAO,IAAI,SAAS;AACpC,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,YAAW,uBAAM,aAAN,mBAAgB,UAAhB,mBAAuB,aAAvB,YAAmC,CAAC;AAErD,QAAM,OAAO,cAAc,QAAQ,QAAQ;AAC3C,QAAM,MAAmB;AAAA,IACvB,GAAG,OAAO;AAAA,IACV,GAAI,WAAW,YAAY,OAAO,UAAU,CAAC;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACzC,SAAQ;AAAA,MACR,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,sBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,WAAW,YACZ,EAAE,OAAO,gBAAgB,QAAQ,IACjC,EAAE,SAAS,OAAO;AAAA;AAAA,MACxB;AAAA;AAAA,EAEJ;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,aAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,SAAS;AAE5B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAIb,IAAM,mBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,SAAS;AAE5B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,kBAAkB,SAAS;AAAA,QACzC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -35,11 +35,11 @@ var import_loading = require("@yamada-ui/loading");
|
|
|
35
35
|
var import_utils = require("@yamada-ui/utils");
|
|
36
36
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
37
|
var defaultStatuses = {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
error: { colorScheme: "danger", icon: import_icon.WarningIcon },
|
|
39
|
+
info: { colorScheme: "info", icon: import_icon.InfoIcon },
|
|
40
|
+
loading: { colorScheme: "primary", icon: import_loading.Loading },
|
|
41
|
+
success: { colorScheme: "success", icon: import_icon.CheckIcon },
|
|
42
|
+
warning: { colorScheme: "warning", icon: import_icon.WarningIcon }
|
|
43
43
|
};
|
|
44
44
|
var [AlertProvider, useAlert] = (0, import_utils.createContext)({
|
|
45
45
|
name: `AlertStylesContext`,
|
|
@@ -54,7 +54,7 @@ var getStatusIcon = (status, statuses) => {
|
|
|
54
54
|
return (_b = (_a = statuses == null ? void 0 : statuses[status]) == null ? void 0 : _a.icon) != null ? _b : defaultStatuses[status].icon;
|
|
55
55
|
};
|
|
56
56
|
var Alert = (0, import_core.forwardRef)(
|
|
57
|
-
({ status = "info",
|
|
57
|
+
({ colorScheme, status = "info", ...props }, ref) => {
|
|
58
58
|
var _a, _b, _c;
|
|
59
59
|
const { theme } = (0, import_core.useTheme)();
|
|
60
60
|
const statuses = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.alert) == null ? void 0 : _b.statuses) != null ? _c : {};
|
|
@@ -65,11 +65,11 @@ var Alert = (0, import_core.forwardRef)(
|
|
|
65
65
|
});
|
|
66
66
|
const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
|
67
67
|
const css = {
|
|
68
|
-
w: "100%",
|
|
69
|
-
display: "flex",
|
|
70
68
|
alignItems: "center",
|
|
71
|
-
|
|
69
|
+
display: "flex",
|
|
72
70
|
overflow: "hidden",
|
|
71
|
+
position: "relative",
|
|
72
|
+
w: "100%",
|
|
73
73
|
...styles.container
|
|
74
74
|
};
|
|
75
75
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AlertProvider, { value: { status, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -105,14 +105,14 @@ var AlertIcon = ({
|
|
|
105
105
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
106
106
|
import_core.ui.span,
|
|
107
107
|
{
|
|
108
|
-
display: "inherit",
|
|
109
108
|
className: (0, import_utils.cx)("ui-alert__icon", className),
|
|
109
|
+
display: "inherit",
|
|
110
110
|
__css: css,
|
|
111
111
|
...rest,
|
|
112
112
|
children: children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
113
113
|
Icon,
|
|
114
114
|
{
|
|
115
|
-
...status === "loading" ? {
|
|
115
|
+
...status === "loading" ? { color: "currentcolor", variant } : { boxSize: "100%" }
|
|
116
116
|
}
|
|
117
117
|
)
|
|
118
118
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/alert.tsx"],"sourcesContent":["export { Alert, AlertIcon, AlertTitle
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/alert.tsx"],"sourcesContent":["export { Alert, AlertDescription, AlertIcon, AlertTitle } from \"./alert\"\nexport type {\n AlertDescriptionProps,\n AlertIconProps,\n AlertProps,\n AlertTitleProps,\n} from \"./alert\"\n","import type {\n AlertStatuses,\n CSSUIObject,\n FC,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n useTheme,\n} from \"@yamada-ui/core\"\nimport { CheckIcon, InfoIcon, WarningIcon } from \"@yamada-ui/icon\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst defaultStatuses = {\n error: { colorScheme: \"danger\", icon: WarningIcon },\n info: { colorScheme: \"info\", icon: InfoIcon },\n loading: { colorScheme: \"primary\", icon: Loading },\n success: { colorScheme: \"success\", icon: CheckIcon },\n warning: { colorScheme: \"warning\", icon: WarningIcon },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ninterface AlertContext {\n status: Status\n styles: { [key: string]: CSSUIObject | undefined }\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n name: `AlertStylesContext`,\n errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n status: Status,\n statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ninterface AlertOptions {\n /**\n * The status of the alert.\n *\n * @default 'info'\n */\n status?: Status\n}\n\nexport interface AlertProps\n extends HTMLUIProps,\n ThemeProps<\"Alert\">,\n AlertOptions {}\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n ({ colorScheme, status = \"info\", ...props }, ref) => {\n const { theme } = useTheme()\n const statuses = theme.__config?.alert?.statuses ?? {}\n\n colorScheme ??= getStatusColorScheme(status, statuses)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Alert\", {\n ...props,\n colorScheme,\n })\n const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\n overflow: \"hidden\",\n position: \"relative\",\n w: \"100%\",\n ...styles.container,\n }\n\n return (\n <AlertProvider value={{ status, styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-alert\", className)}\n role=\"alert\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.div>\n </AlertProvider>\n )\n },\n)\n\nAlert.displayName = \"Alert\"\nAlert.__ui__ = \"Alert\"\n\nexport interface AlertIconProps extends HTMLUIProps<\"span\"> {\n variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n className,\n children,\n variant = \"oval\",\n ...rest\n}) => {\n const { status, styles } = useAlert()\n const { theme } = useTheme()\n const statuses = theme.__config?.alert?.statuses ?? {}\n\n const Icon = getStatusIcon(status, statuses)\n const css: CSSUIObject = {\n ...styles.icon,\n ...(status === \"loading\" ? styles.loading : {}),\n }\n\n return (\n <ui.span\n className={cx(\"ui-alert__icon\", className)}\n display=\"inherit\"\n __css={css}\n {...rest}\n >\n {children || (\n <Icon\n {...(status === \"loading\"\n ? { color: \"currentcolor\", variant }\n : { boxSize: \"100%\" })}\n />\n )}\n </ui.span>\n )\n}\n\nAlertIcon.displayName = \"AlertIcon\"\nAlertIcon.__ui__ = \"AlertIcon\"\n\nexport interface AlertTitleProps extends HTMLUIProps<\"p\"> {}\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useAlert()\n\n const css: CSSUIObject = {\n display: \"block\",\n ...styles.title,\n }\n\n return (\n <ui.p\n ref={ref}\n className={cx(\"ui-alert__title\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nAlertTitle.displayName = \"AlertTitle\"\nAlertTitle.__ui__ = \"AlertTitle\"\n\nexport interface AlertDescriptionProps extends HTMLUIProps<\"span\"> {}\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useAlert()\n\n const css: CSSUIObject = {\n ...styles.description,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-alert__desc\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nAlertDescription.displayName = \"AlertDescription\"\nAlertDescription.__ui__ = \"AlertDescription\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACQA,kBAMO;AACP,kBAAiD;AACjD,qBAAwB;AACxB,mBAAkC;AAyE1B;AAvER,IAAM,kBAAkB;AAAA,EACtB,OAAO,EAAE,aAAa,UAAU,MAAM,wBAAY;AAAA,EAClD,MAAM,EAAE,aAAa,QAAQ,MAAM,qBAAS;AAAA,EAC5C,SAAS,EAAE,aAAa,WAAW,MAAM,uBAAQ;AAAA,EACjD,SAAS,EAAE,aAAa,WAAW,MAAM,sBAAU;AAAA,EACnD,SAAS,EAAE,aAAa,WAAW,MAAM,wBAAY;AACvD;AASA,IAAM,CAAC,eAAe,QAAQ,QAAI,4BAA4B;AAAA,EAC5D,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAEM,IAAM,uBAAuB,CAClC,QACA,aACA;AA1CF;AA0CK,0DAAW,YAAX,mBAAoB,gBAApB,YAAmC,gBAAgB,MAAM,EAAE;AAAA;AAEzD,IAAM,gBAAgB,CAAC,QAAgB,aAA0B;AA5CxE;AA6CE,0DAAW,YAAX,mBAAoB,SAApB,YAA4B,gBAAgB,MAAM,EAAE;AAAA;AAqB/C,IAAM,YAAQ;AAAA,EACnB,CAAC,EAAE,aAAa,SAAS,QAAQ,GAAG,MAAM,GAAG,QAAQ;AAnEvD;AAoEI,UAAM,EAAE,MAAM,QAAI,sBAAS;AAC3B,UAAM,YAAW,uBAAM,aAAN,mBAAgB,UAAhB,mBAAuB,aAAvB,YAAmC,CAAC;AAErD,sDAAgB,qBAAqB,QAAQ,QAAQ;AAErD,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,SAAS;AAAA,MAC5D,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEnE,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,GAAG;AAAA,MACH,GAAG,OAAO;AAAA,IACZ;AAEA,WACE,4CAAC,iBAAc,OAAO,EAAE,QAAQ,OAAO,GACrC;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,YAAY,SAAS;AAAA,QACnC,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;AACpB,MAAM,SAAS;AAMR,IAAM,YAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,MAAM;AApHN;AAqHE,QAAM,EAAE,QAAQ,OAAO,IAAI,SAAS;AACpC,QAAM,EAAE,MAAM,QAAI,sBAAS;AAC3B,QAAM,YAAW,uBAAM,aAAN,mBAAgB,UAAhB,mBAAuB,aAAvB,YAAmC,CAAC;AAErD,QAAM,OAAO,cAAc,QAAQ,QAAQ;AAC3C,QAAM,MAAmB;AAAA,IACvB,GAAG,OAAO;AAAA,IACV,GAAI,WAAW,YAAY,OAAO,UAAU,CAAC;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC,eAAW,iBAAG,kBAAkB,SAAS;AAAA,MACzC,SAAQ;AAAA,MACR,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,sBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,WAAW,YACZ,EAAE,OAAO,gBAAgB,QAAQ,IACjC,EAAE,SAAS,OAAO;AAAA;AAAA,MACxB;AAAA;AAAA,EAEJ;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,iBAAa;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,SAAS;AAE5B,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,mBAAmB,SAAS;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;AACzB,WAAW,SAAS;AAIb,IAAM,uBAAmB;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,OAAO,IAAI,SAAS;AAE5B,UAAM,MAAmB;AAAA,MACvB,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,kBAAkB,SAAS;AAAA,QACzC,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;AAC/B,iBAAiB,SAAS;","names":[]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/alert",
|
|
3
|
-
"version": "1.0.42-dev-
|
|
3
|
+
"version": "1.0.42-dev-20241006032009",
|
|
4
4
|
"description": "Yamada UI alert component",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"yamada",
|
|
@@ -36,10 +36,10 @@
|
|
|
36
36
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@yamada-ui/core": "1.15.2-dev-
|
|
40
|
-
"@yamada-ui/icon": "1.1.8-dev-
|
|
41
|
-
"@yamada-ui/loading": "1.1.18-dev-
|
|
42
|
-
"@yamada-ui/utils": "1.5.
|
|
39
|
+
"@yamada-ui/core": "1.15.2-dev-20241006032009",
|
|
40
|
+
"@yamada-ui/icon": "1.1.8-dev-20241006032009",
|
|
41
|
+
"@yamada-ui/loading": "1.1.18-dev-20241006032009",
|
|
42
|
+
"@yamada-ui/utils": "1.5.3-dev-20241006032009"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"clean-package": "2.2.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/alert.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n ThemeProps,\n CSSUIObject,\n AlertStatuses,\n FC,\n} from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentMultiStyle,\n omitThemeProps,\n useTheme,\n} from \"@yamada-ui/core\"\nimport { InfoIcon, WarningIcon, CheckIcon } from \"@yamada-ui/icon\"\nimport type { LoadingProps } from \"@yamada-ui/loading\"\nimport { Loading } from \"@yamada-ui/loading\"\nimport { createContext, cx } from \"@yamada-ui/utils\"\n\nconst defaultStatuses = {\n info: { icon: InfoIcon, colorScheme: \"info\" },\n success: { icon: CheckIcon, colorScheme: \"success\" },\n warning: { icon: WarningIcon, colorScheme: \"warning\" },\n error: { icon: WarningIcon, colorScheme: \"danger\" },\n loading: { icon: Loading, colorScheme: \"primary\" },\n} as const\n\nexport type Status = keyof typeof defaultStatuses\n\ninterface AlertContext {\n status: Status\n styles: { [key: string]: CSSUIObject }\n}\n\nconst [AlertProvider, useAlert] = createContext<AlertContext>({\n name: `AlertStylesContext`,\n errorMessage: `useAlert returned is 'undefined'. Seems you forgot to wrap the components in \"<Alert />\" `,\n})\n\nexport const getStatusColorScheme = (\n status: Status,\n statuses?: AlertStatuses,\n) => statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\nexport const getStatusIcon = (status: Status, statuses?: AlertStatuses) =>\n statuses?.[status]?.icon ?? defaultStatuses[status].icon\n\ninterface AlertOptions {\n /**\n * The status of the alert.\n *\n * @default 'info'\n */\n status?: Status\n}\n\nexport interface AlertProps\n extends HTMLUIProps,\n ThemeProps<\"Alert\">,\n AlertOptions {}\n\n/**\n * `Alert` is a component that conveys information to the user.\n *\n * @see Docs https://yamada-ui.com/components/feedback/alert\n */\nexport const Alert = forwardRef<AlertProps, \"div\">(\n ({ status = \"info\", colorScheme, ...props }, ref) => {\n const { theme } = useTheme()\n const statuses = theme.__config?.alert?.statuses ?? {}\n\n colorScheme ??= getStatusColorScheme(status, statuses)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Alert\", {\n ...props,\n colorScheme,\n })\n const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n w: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n position: \"relative\",\n overflow: \"hidden\",\n ...styles.container,\n }\n\n return (\n <AlertProvider value={{ status, styles }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-alert\", className)}\n role=\"alert\"\n __css={css}\n {...rest}\n >\n {children}\n </ui.div>\n </AlertProvider>\n )\n },\n)\n\nAlert.displayName = \"Alert\"\nAlert.__ui__ = \"Alert\"\n\nexport interface AlertIconProps extends HTMLUIProps<\"span\"> {\n variant?: LoadingProps[\"variant\"]\n}\n\nexport const AlertIcon: FC<AlertIconProps> = ({\n className,\n children,\n variant = \"oval\",\n ...rest\n}) => {\n const { status, styles } = useAlert()\n const { theme } = useTheme()\n const statuses = theme.__config?.alert?.statuses ?? {}\n\n const Icon = getStatusIcon(status, statuses)\n const css: CSSUIObject = {\n ...styles.icon,\n ...(status === \"loading\" ? styles.loading : {}),\n }\n\n return (\n <ui.span\n display=\"inherit\"\n className={cx(\"ui-alert__icon\", className)}\n __css={css}\n {...rest}\n >\n {children || (\n <Icon\n {...(status === \"loading\"\n ? { variant, color: \"currentcolor\" }\n : { boxSize: \"100%\" })}\n />\n )}\n </ui.span>\n )\n}\n\nAlertIcon.displayName = \"AlertIcon\"\nAlertIcon.__ui__ = \"AlertIcon\"\n\nexport interface AlertTitleProps extends HTMLUIProps<\"p\"> {}\n\nexport const AlertTitle = forwardRef<AlertTitleProps, \"p\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useAlert()\n\n const css: CSSUIObject = {\n display: \"block\",\n ...styles.title,\n }\n\n return (\n <ui.p\n ref={ref}\n className={cx(\"ui-alert__title\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nAlertTitle.displayName = \"AlertTitle\"\nAlertTitle.__ui__ = \"AlertTitle\"\n\nexport interface AlertDescriptionProps extends HTMLUIProps<\"span\"> {}\n\nexport const AlertDescription = forwardRef<AlertDescriptionProps, \"span\">(\n ({ className, ...rest }, ref) => {\n const { styles } = useAlert()\n\n const css: CSSUIObject = {\n ...styles.description,\n }\n\n return (\n <ui.span\n ref={ref}\n className={cx(\"ui-alert__desc\", className)}\n __css={css}\n {...rest}\n />\n )\n },\n)\n\nAlertDescription.displayName = \"AlertDescription\"\nAlertDescription.__ui__ = \"AlertDescription\"\n"],"mappings":"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","names":[]}
|