@yamada-ui/status 1.0.1-next-20241124062938
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +21 -0
- package/README.md +22 -0
- package/dist/chunk-FBZ7ECK2.mjs +71 -0
- package/dist/chunk-FBZ7ECK2.mjs.map +1 -0
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +89 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +8 -0
- package/dist/index.mjs.map +1 -0
- package/dist/status.d.mts +30 -0
- package/dist/status.d.ts +30 -0
- package/dist/status.js +89 -0
- package/dist/status.js.map +1 -0
- package/dist/status.mjs +10 -0
- package/dist/status.mjs.map +1 -0
- package/package.json +79 -0
package/LICENSE
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
MIT License
|
2
|
+
|
3
|
+
Copyright (c) 2023 Hirotomo Yamada
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
# @yamada-ui/status
|
2
|
+
|
3
|
+
## Installation
|
4
|
+
|
5
|
+
```sh
|
6
|
+
pnpm add @yamada-ui/status
|
7
|
+
# or
|
8
|
+
yarn add @yamada-ui/status
|
9
|
+
# or
|
10
|
+
npm install @yamada-ui/status
|
11
|
+
# or
|
12
|
+
bun add @yamada-ui/status
|
13
|
+
```
|
14
|
+
|
15
|
+
## Contribution
|
16
|
+
|
17
|
+
Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/yamada-ui/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
|
18
|
+
|
19
|
+
## License
|
20
|
+
|
21
|
+
This package is licensed under the terms of the
|
22
|
+
[MIT license](https://github.com/yamada-ui/yamada-ui/blob/main/LICENSE).
|
@@ -0,0 +1,71 @@
|
|
1
|
+
"use client"
|
2
|
+
|
3
|
+
// src/status.tsx
|
4
|
+
import {
|
5
|
+
forwardRef,
|
6
|
+
omitThemeProps,
|
7
|
+
ui,
|
8
|
+
useComponentMultiStyle,
|
9
|
+
useTheme
|
10
|
+
} from "@yamada-ui/core";
|
11
|
+
import { cx } from "@yamada-ui/utils";
|
12
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
13
|
+
var defaultStatuses = {
|
14
|
+
error: { colorScheme: "danger" },
|
15
|
+
info: { colorScheme: "info" },
|
16
|
+
success: { colorScheme: "success" },
|
17
|
+
warning: { colorScheme: "warning" }
|
18
|
+
};
|
19
|
+
var getStatusColorScheme = (status, statuses) => {
|
20
|
+
var _a, _b;
|
21
|
+
return (_b = (_a = statuses == null ? void 0 : statuses[status]) == null ? void 0 : _a.colorScheme) != null ? _b : defaultStatuses[status].colorScheme;
|
22
|
+
};
|
23
|
+
var Status = forwardRef(
|
24
|
+
({ colorScheme, value = "info", indicatorProps, labelProps, ...props }, ref) => {
|
25
|
+
var _a, _b, _c;
|
26
|
+
const { theme } = useTheme();
|
27
|
+
const statuses = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.status) == null ? void 0 : _b.statuses) != null ? _c : {};
|
28
|
+
colorScheme != null ? colorScheme : colorScheme = getStatusColorScheme(value, statuses);
|
29
|
+
const [styles, mergedProps] = useComponentMultiStyle("Status", {
|
30
|
+
...props,
|
31
|
+
colorScheme
|
32
|
+
});
|
33
|
+
const { className, children, ...rest } = omitThemeProps(mergedProps);
|
34
|
+
return /* @__PURE__ */ jsxs(
|
35
|
+
ui.div,
|
36
|
+
{
|
37
|
+
className: cx("ui-status", className),
|
38
|
+
__css: { ...styles.container },
|
39
|
+
...rest,
|
40
|
+
children: [
|
41
|
+
/* @__PURE__ */ jsx(
|
42
|
+
ui.div,
|
43
|
+
{
|
44
|
+
ref,
|
45
|
+
className: "ui-status__indicator",
|
46
|
+
__css: { ...styles.indicator },
|
47
|
+
...indicatorProps
|
48
|
+
}
|
49
|
+
),
|
50
|
+
/* @__PURE__ */ jsx(
|
51
|
+
ui.p,
|
52
|
+
{
|
53
|
+
className: "ui-status__label",
|
54
|
+
__css: { ...styles.label },
|
55
|
+
...labelProps,
|
56
|
+
children
|
57
|
+
}
|
58
|
+
)
|
59
|
+
]
|
60
|
+
}
|
61
|
+
);
|
62
|
+
}
|
63
|
+
);
|
64
|
+
Status.displayName = "Status";
|
65
|
+
Status.__ui__ = "Status";
|
66
|
+
|
67
|
+
export {
|
68
|
+
getStatusColorScheme,
|
69
|
+
Status
|
70
|
+
};
|
71
|
+
//# sourceMappingURL=chunk-FBZ7ECK2.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/status.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n Statuses,\n StatusValue,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n useTheme,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\n\nconst defaultStatuses = {\n error: { colorScheme: \"danger\" },\n info: { colorScheme: \"info\" },\n success: { colorScheme: \"success\" },\n warning: { colorScheme: \"warning\" },\n} as const satisfies Statuses\n\nexport const getStatusColorScheme = (\n status: StatusValue,\n statuses?: Statuses,\n): string =>\n statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\ninterface StatusOptions {\n /**\n * The type of the status\n *\n * @default 'info'\n * */\n value?: StatusValue\n /**\n * The props for the status indicator component\n */\n indicatorProps?: HTMLUIProps\n /**\n * The props for the status label component\n */\n labelProps?: HTMLUIProps\n}\n\nexport interface StatusProps\n extends HTMLUIProps,\n ThemeProps<\"Status\">,\n StatusOptions {}\n\n/**\n * `Status` is component that indicate the status of a process or state.\n *\n * @see Docs https://yamada-ui.com/components/data-display/status\n */\nexport const Status = forwardRef<StatusProps, \"div\">(\n (\n { colorScheme, value = \"info\", indicatorProps, labelProps, ...props },\n ref,\n ) => {\n const { theme } = useTheme()\n const statuses = theme.__config?.status?.statuses ?? {}\n\n colorScheme ??= getStatusColorScheme(value, statuses)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Status\", {\n ...props,\n colorScheme,\n })\n const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ui.div\n className={cx(\"ui-status\", className)}\n __css={{ ...styles.container }}\n {...rest}\n >\n <ui.div\n ref={ref}\n className=\"ui-status__indicator\"\n __css={{ ...styles.indicator }}\n {...indicatorProps}\n />\n\n <ui.p\n className=\"ui-status__label\"\n __css={{ ...styles.label }}\n {...labelProps}\n >\n {children}\n </ui.p>\n </ui.div>\n )\n },\n)\n\nStatus.displayName = \"Status\"\nStatus.__ui__ = \"Status\"\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AA2Db,SAKE,KALF;AAzDN,IAAM,kBAAkB;AAAA,EACtB,OAAO,EAAE,aAAa,SAAS;AAAA,EAC/B,MAAM,EAAE,aAAa,OAAO;AAAA,EAC5B,SAAS,EAAE,aAAa,UAAU;AAAA,EAClC,SAAS,EAAE,aAAa,UAAU;AACpC;AAEO,IAAM,uBAAuB,CAClC,QACA,aACQ;AAzBV;AA0BE,0DAAW,YAAX,mBAAoB,gBAApB,YAAmC,gBAAgB,MAAM,EAAE;AAAA;AA6BtD,IAAM,SAAS;AAAA,EACpB,CACE,EAAE,aAAa,QAAQ,QAAQ,gBAAgB,YAAY,GAAG,MAAM,GACpE,QACG;AA3DP;AA4DI,UAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,UAAM,YAAW,uBAAM,aAAN,mBAAgB,WAAhB,mBAAwB,aAAxB,YAAoC,CAAC;AAEtD,sDAAgB,qBAAqB,OAAO,QAAQ;AAEpD,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,UAAU;AAAA,MAC7D,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,GAAG,KAAK,IAAI,eAAe,WAAW;AAEnE,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,aAAa,SAAS;AAAA,QACpC,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,QAC5B,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,cAC5B,GAAG;AAAA;AAAA,UACN;AAAA,UAEA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,cACxB,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;","names":[]}
|
package/dist/index.d.mts
ADDED
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
@@ -0,0 +1,89 @@
|
|
1
|
+
"use client"
|
2
|
+
"use strict";
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
7
|
+
var __export = (target, all) => {
|
8
|
+
for (var name in all)
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
10
|
+
};
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
13
|
+
for (let key of __getOwnPropNames(from))
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
16
|
+
}
|
17
|
+
return to;
|
18
|
+
};
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
20
|
+
|
21
|
+
// src/index.ts
|
22
|
+
var src_exports = {};
|
23
|
+
__export(src_exports, {
|
24
|
+
Status: () => Status
|
25
|
+
});
|
26
|
+
module.exports = __toCommonJS(src_exports);
|
27
|
+
|
28
|
+
// src/status.tsx
|
29
|
+
var import_core = require("@yamada-ui/core");
|
30
|
+
var import_utils = require("@yamada-ui/utils");
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
32
|
+
var defaultStatuses = {
|
33
|
+
error: { colorScheme: "danger" },
|
34
|
+
info: { colorScheme: "info" },
|
35
|
+
success: { colorScheme: "success" },
|
36
|
+
warning: { colorScheme: "warning" }
|
37
|
+
};
|
38
|
+
var getStatusColorScheme = (status, statuses) => {
|
39
|
+
var _a, _b;
|
40
|
+
return (_b = (_a = statuses == null ? void 0 : statuses[status]) == null ? void 0 : _a.colorScheme) != null ? _b : defaultStatuses[status].colorScheme;
|
41
|
+
};
|
42
|
+
var Status = (0, import_core.forwardRef)(
|
43
|
+
({ colorScheme, value = "info", indicatorProps, labelProps, ...props }, ref) => {
|
44
|
+
var _a, _b, _c;
|
45
|
+
const { theme } = (0, import_core.useTheme)();
|
46
|
+
const statuses = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.status) == null ? void 0 : _b.statuses) != null ? _c : {};
|
47
|
+
colorScheme != null ? colorScheme : colorScheme = getStatusColorScheme(value, statuses);
|
48
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Status", {
|
49
|
+
...props,
|
50
|
+
colorScheme
|
51
|
+
});
|
52
|
+
const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
54
|
+
import_core.ui.div,
|
55
|
+
{
|
56
|
+
className: (0, import_utils.cx)("ui-status", className),
|
57
|
+
__css: { ...styles.container },
|
58
|
+
...rest,
|
59
|
+
children: [
|
60
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
61
|
+
import_core.ui.div,
|
62
|
+
{
|
63
|
+
ref,
|
64
|
+
className: "ui-status__indicator",
|
65
|
+
__css: { ...styles.indicator },
|
66
|
+
...indicatorProps
|
67
|
+
}
|
68
|
+
),
|
69
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
70
|
+
import_core.ui.p,
|
71
|
+
{
|
72
|
+
className: "ui-status__label",
|
73
|
+
__css: { ...styles.label },
|
74
|
+
...labelProps,
|
75
|
+
children
|
76
|
+
}
|
77
|
+
)
|
78
|
+
]
|
79
|
+
}
|
80
|
+
);
|
81
|
+
}
|
82
|
+
);
|
83
|
+
Status.displayName = "Status";
|
84
|
+
Status.__ui__ = "Status";
|
85
|
+
// Annotate the CommonJS export names for ESM import in node:
|
86
|
+
0 && (module.exports = {
|
87
|
+
Status
|
88
|
+
});
|
89
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/status.tsx"],"sourcesContent":["export { Status } from \"./status\"\nexport type { StatusProps } from \"./status\"\n","import type {\n HTMLUIProps,\n Statuses,\n StatusValue,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n useTheme,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\n\nconst defaultStatuses = {\n error: { colorScheme: \"danger\" },\n info: { colorScheme: \"info\" },\n success: { colorScheme: \"success\" },\n warning: { colorScheme: \"warning\" },\n} as const satisfies Statuses\n\nexport const getStatusColorScheme = (\n status: StatusValue,\n statuses?: Statuses,\n): string =>\n statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\ninterface StatusOptions {\n /**\n * The type of the status\n *\n * @default 'info'\n * */\n value?: StatusValue\n /**\n * The props for the status indicator component\n */\n indicatorProps?: HTMLUIProps\n /**\n * The props for the status label component\n */\n labelProps?: HTMLUIProps\n}\n\nexport interface StatusProps\n extends HTMLUIProps,\n ThemeProps<\"Status\">,\n StatusOptions {}\n\n/**\n * `Status` is component that indicate the status of a process or state.\n *\n * @see Docs https://yamada-ui.com/components/data-display/status\n */\nexport const Status = forwardRef<StatusProps, \"div\">(\n (\n { colorScheme, value = \"info\", indicatorProps, labelProps, ...props },\n ref,\n ) => {\n const { theme } = useTheme()\n const statuses = theme.__config?.status?.statuses ?? {}\n\n colorScheme ??= getStatusColorScheme(value, statuses)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Status\", {\n ...props,\n colorScheme,\n })\n const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ui.div\n className={cx(\"ui-status\", className)}\n __css={{ ...styles.container }}\n {...rest}\n >\n <ui.div\n ref={ref}\n className=\"ui-status__indicator\"\n __css={{ ...styles.indicator }}\n {...indicatorProps}\n />\n\n <ui.p\n className=\"ui-status__label\"\n __css={{ ...styles.label }}\n {...labelProps}\n >\n {children}\n </ui.p>\n </ui.div>\n )\n },\n)\n\nStatus.displayName = \"Status\"\nStatus.__ui__ = \"Status\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,kBAMO;AACP,mBAAmB;AA2Db;AAzDN,IAAM,kBAAkB;AAAA,EACtB,OAAO,EAAE,aAAa,SAAS;AAAA,EAC/B,MAAM,EAAE,aAAa,OAAO;AAAA,EAC5B,SAAS,EAAE,aAAa,UAAU;AAAA,EAClC,SAAS,EAAE,aAAa,UAAU;AACpC;AAEO,IAAM,uBAAuB,CAClC,QACA,aACQ;AAzBV;AA0BE,0DAAW,YAAX,mBAAoB,gBAApB,YAAmC,gBAAgB,MAAM,EAAE;AAAA;AA6BtD,IAAM,aAAS;AAAA,EACpB,CACE,EAAE,aAAa,QAAQ,QAAQ,gBAAgB,YAAY,GAAG,MAAM,GACpE,QACG;AA3DP;AA4DI,UAAM,EAAE,MAAM,QAAI,sBAAS;AAC3B,UAAM,YAAW,uBAAM,aAAN,mBAAgB,WAAhB,mBAAwB,aAAxB,YAAoC,CAAC;AAEtD,sDAAgB,qBAAqB,OAAO,QAAQ;AAEpD,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,UAAU;AAAA,MAC7D,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEnE,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,eAAW,iBAAG,aAAa,SAAS;AAAA,QACpC,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,QAC5B,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,eAAG;AAAA,YAAH;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,cAC5B,GAAG;AAAA;AAAA,UACN;AAAA,UAEA;AAAA,YAAC,eAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,cACxB,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;","names":[]}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import * as _yamada_ui_core from '@yamada-ui/core';
|
2
|
+
import { StatusValue, Statuses, HTMLUIProps, ThemeProps } from '@yamada-ui/core';
|
3
|
+
|
4
|
+
declare const getStatusColorScheme: (status: StatusValue, statuses?: Statuses) => string;
|
5
|
+
interface StatusOptions {
|
6
|
+
/**
|
7
|
+
* The type of the status
|
8
|
+
*
|
9
|
+
* @default 'info'
|
10
|
+
* */
|
11
|
+
value?: StatusValue;
|
12
|
+
/**
|
13
|
+
* The props for the status indicator component
|
14
|
+
*/
|
15
|
+
indicatorProps?: HTMLUIProps;
|
16
|
+
/**
|
17
|
+
* The props for the status label component
|
18
|
+
*/
|
19
|
+
labelProps?: HTMLUIProps;
|
20
|
+
}
|
21
|
+
interface StatusProps extends HTMLUIProps, ThemeProps<"Status">, StatusOptions {
|
22
|
+
}
|
23
|
+
/**
|
24
|
+
* `Status` is component that indicate the status of a process or state.
|
25
|
+
*
|
26
|
+
* @see Docs https://yamada-ui.com/components/data-display/status
|
27
|
+
*/
|
28
|
+
declare const Status: _yamada_ui_core.Component<"div", StatusProps>;
|
29
|
+
|
30
|
+
export { Status, type StatusProps, getStatusColorScheme };
|
package/dist/status.d.ts
ADDED
@@ -0,0 +1,30 @@
|
|
1
|
+
import * as _yamada_ui_core from '@yamada-ui/core';
|
2
|
+
import { StatusValue, Statuses, HTMLUIProps, ThemeProps } from '@yamada-ui/core';
|
3
|
+
|
4
|
+
declare const getStatusColorScheme: (status: StatusValue, statuses?: Statuses) => string;
|
5
|
+
interface StatusOptions {
|
6
|
+
/**
|
7
|
+
* The type of the status
|
8
|
+
*
|
9
|
+
* @default 'info'
|
10
|
+
* */
|
11
|
+
value?: StatusValue;
|
12
|
+
/**
|
13
|
+
* The props for the status indicator component
|
14
|
+
*/
|
15
|
+
indicatorProps?: HTMLUIProps;
|
16
|
+
/**
|
17
|
+
* The props for the status label component
|
18
|
+
*/
|
19
|
+
labelProps?: HTMLUIProps;
|
20
|
+
}
|
21
|
+
interface StatusProps extends HTMLUIProps, ThemeProps<"Status">, StatusOptions {
|
22
|
+
}
|
23
|
+
/**
|
24
|
+
* `Status` is component that indicate the status of a process or state.
|
25
|
+
*
|
26
|
+
* @see Docs https://yamada-ui.com/components/data-display/status
|
27
|
+
*/
|
28
|
+
declare const Status: _yamada_ui_core.Component<"div", StatusProps>;
|
29
|
+
|
30
|
+
export { Status, type StatusProps, getStatusColorScheme };
|
package/dist/status.js
ADDED
@@ -0,0 +1,89 @@
|
|
1
|
+
"use client"
|
2
|
+
"use strict";
|
3
|
+
var __defProp = Object.defineProperty;
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
7
|
+
var __export = (target, all) => {
|
8
|
+
for (var name in all)
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
10
|
+
};
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
13
|
+
for (let key of __getOwnPropNames(from))
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
16
|
+
}
|
17
|
+
return to;
|
18
|
+
};
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
20
|
+
|
21
|
+
// src/status.tsx
|
22
|
+
var status_exports = {};
|
23
|
+
__export(status_exports, {
|
24
|
+
Status: () => Status,
|
25
|
+
getStatusColorScheme: () => getStatusColorScheme
|
26
|
+
});
|
27
|
+
module.exports = __toCommonJS(status_exports);
|
28
|
+
var import_core = require("@yamada-ui/core");
|
29
|
+
var import_utils = require("@yamada-ui/utils");
|
30
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
31
|
+
var defaultStatuses = {
|
32
|
+
error: { colorScheme: "danger" },
|
33
|
+
info: { colorScheme: "info" },
|
34
|
+
success: { colorScheme: "success" },
|
35
|
+
warning: { colorScheme: "warning" }
|
36
|
+
};
|
37
|
+
var getStatusColorScheme = (status, statuses) => {
|
38
|
+
var _a, _b;
|
39
|
+
return (_b = (_a = statuses == null ? void 0 : statuses[status]) == null ? void 0 : _a.colorScheme) != null ? _b : defaultStatuses[status].colorScheme;
|
40
|
+
};
|
41
|
+
var Status = (0, import_core.forwardRef)(
|
42
|
+
({ colorScheme, value = "info", indicatorProps, labelProps, ...props }, ref) => {
|
43
|
+
var _a, _b, _c;
|
44
|
+
const { theme } = (0, import_core.useTheme)();
|
45
|
+
const statuses = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.status) == null ? void 0 : _b.statuses) != null ? _c : {};
|
46
|
+
colorScheme != null ? colorScheme : colorScheme = getStatusColorScheme(value, statuses);
|
47
|
+
const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("Status", {
|
48
|
+
...props,
|
49
|
+
colorScheme
|
50
|
+
});
|
51
|
+
const { className, children, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
52
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
53
|
+
import_core.ui.div,
|
54
|
+
{
|
55
|
+
className: (0, import_utils.cx)("ui-status", className),
|
56
|
+
__css: { ...styles.container },
|
57
|
+
...rest,
|
58
|
+
children: [
|
59
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
60
|
+
import_core.ui.div,
|
61
|
+
{
|
62
|
+
ref,
|
63
|
+
className: "ui-status__indicator",
|
64
|
+
__css: { ...styles.indicator },
|
65
|
+
...indicatorProps
|
66
|
+
}
|
67
|
+
),
|
68
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
69
|
+
import_core.ui.p,
|
70
|
+
{
|
71
|
+
className: "ui-status__label",
|
72
|
+
__css: { ...styles.label },
|
73
|
+
...labelProps,
|
74
|
+
children
|
75
|
+
}
|
76
|
+
)
|
77
|
+
]
|
78
|
+
}
|
79
|
+
);
|
80
|
+
}
|
81
|
+
);
|
82
|
+
Status.displayName = "Status";
|
83
|
+
Status.__ui__ = "Status";
|
84
|
+
// Annotate the CommonJS export names for ESM import in node:
|
85
|
+
0 && (module.exports = {
|
86
|
+
Status,
|
87
|
+
getStatusColorScheme
|
88
|
+
});
|
89
|
+
//# sourceMappingURL=status.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/status.tsx"],"sourcesContent":["import type {\n HTMLUIProps,\n Statuses,\n StatusValue,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n useTheme,\n} from \"@yamada-ui/core\"\nimport { cx } from \"@yamada-ui/utils\"\n\nconst defaultStatuses = {\n error: { colorScheme: \"danger\" },\n info: { colorScheme: \"info\" },\n success: { colorScheme: \"success\" },\n warning: { colorScheme: \"warning\" },\n} as const satisfies Statuses\n\nexport const getStatusColorScheme = (\n status: StatusValue,\n statuses?: Statuses,\n): string =>\n statuses?.[status]?.colorScheme ?? defaultStatuses[status].colorScheme\n\ninterface StatusOptions {\n /**\n * The type of the status\n *\n * @default 'info'\n * */\n value?: StatusValue\n /**\n * The props for the status indicator component\n */\n indicatorProps?: HTMLUIProps\n /**\n * The props for the status label component\n */\n labelProps?: HTMLUIProps\n}\n\nexport interface StatusProps\n extends HTMLUIProps,\n ThemeProps<\"Status\">,\n StatusOptions {}\n\n/**\n * `Status` is component that indicate the status of a process or state.\n *\n * @see Docs https://yamada-ui.com/components/data-display/status\n */\nexport const Status = forwardRef<StatusProps, \"div\">(\n (\n { colorScheme, value = \"info\", indicatorProps, labelProps, ...props },\n ref,\n ) => {\n const { theme } = useTheme()\n const statuses = theme.__config?.status?.statuses ?? {}\n\n colorScheme ??= getStatusColorScheme(value, statuses)\n\n const [styles, mergedProps] = useComponentMultiStyle(\"Status\", {\n ...props,\n colorScheme,\n })\n const { className, children, ...rest } = omitThemeProps(mergedProps)\n\n return (\n <ui.div\n className={cx(\"ui-status\", className)}\n __css={{ ...styles.container }}\n {...rest}\n >\n <ui.div\n ref={ref}\n className=\"ui-status__indicator\"\n __css={{ ...styles.indicator }}\n {...indicatorProps}\n />\n\n <ui.p\n className=\"ui-status__label\"\n __css={{ ...styles.label }}\n {...labelProps}\n >\n {children}\n </ui.p>\n </ui.div>\n )\n },\n)\n\nStatus.displayName = \"Status\"\nStatus.__ui__ = \"Status\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAMO;AACP,mBAAmB;AA2Db;AAzDN,IAAM,kBAAkB;AAAA,EACtB,OAAO,EAAE,aAAa,SAAS;AAAA,EAC/B,MAAM,EAAE,aAAa,OAAO;AAAA,EAC5B,SAAS,EAAE,aAAa,UAAU;AAAA,EAClC,SAAS,EAAE,aAAa,UAAU;AACpC;AAEO,IAAM,uBAAuB,CAClC,QACA,aACQ;AAzBV;AA0BE,0DAAW,YAAX,mBAAoB,gBAApB,YAAmC,gBAAgB,MAAM,EAAE;AAAA;AA6BtD,IAAM,aAAS;AAAA,EACpB,CACE,EAAE,aAAa,QAAQ,QAAQ,gBAAgB,YAAY,GAAG,MAAM,GACpE,QACG;AA3DP;AA4DI,UAAM,EAAE,MAAM,QAAI,sBAAS;AAC3B,UAAM,YAAW,uBAAM,aAAN,mBAAgB,WAAhB,mBAAwB,aAAxB,YAAoC,CAAC;AAEtD,sDAAgB,qBAAqB,OAAO,QAAQ;AAEpD,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,UAAU;AAAA,MAC7D,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AACD,UAAM,EAAE,WAAW,UAAU,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEnE,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,eAAW,iBAAG,aAAa,SAAS;AAAA,QACpC,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,QAC5B,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,eAAG;AAAA,YAAH;AAAA,cACC;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,UAAU;AAAA,cAC5B,GAAG;AAAA;AAAA,UACN;AAAA,UAEA;AAAA,YAAC,eAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,cACxB,GAAG;AAAA,cAEH;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;AACrB,OAAO,SAAS;","names":[]}
|
package/dist/status.mjs
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/package.json
ADDED
@@ -0,0 +1,79 @@
|
|
1
|
+
{
|
2
|
+
"name": "@yamada-ui/status",
|
3
|
+
"version": "1.0.1-next-20241124062938",
|
4
|
+
"description": "Yamada UI status component",
|
5
|
+
"keywords": [
|
6
|
+
"yamada",
|
7
|
+
"yamada ui",
|
8
|
+
"react",
|
9
|
+
"emotion",
|
10
|
+
"component",
|
11
|
+
"ui",
|
12
|
+
"uikit",
|
13
|
+
"styled",
|
14
|
+
"style-props",
|
15
|
+
"styled-component",
|
16
|
+
"css-in-js"
|
17
|
+
],
|
18
|
+
"author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
|
19
|
+
"license": "MIT",
|
20
|
+
"main": "dist/index.js",
|
21
|
+
"files": [
|
22
|
+
"dist"
|
23
|
+
],
|
24
|
+
"sideEffects": false,
|
25
|
+
"publishConfig": {
|
26
|
+
"access": "public"
|
27
|
+
},
|
28
|
+
"homepage": "https://yamada-ui.com",
|
29
|
+
"repository": {
|
30
|
+
"type": "git",
|
31
|
+
"url": "https://github.com/yamada-ui/yamada-ui",
|
32
|
+
"directory": "packages/components/status"
|
33
|
+
},
|
34
|
+
"bugs": {
|
35
|
+
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
36
|
+
},
|
37
|
+
"dependencies": {
|
38
|
+
"@yamada-ui/core": "1.16.0-next-20241124062938",
|
39
|
+
"@yamada-ui/utils": "1.5.4"
|
40
|
+
},
|
41
|
+
"devDependencies": {
|
42
|
+
"react": "^18.0.0",
|
43
|
+
"clean-package": "2.2.0"
|
44
|
+
},
|
45
|
+
"peerDependencies": {
|
46
|
+
"react": ">=18"
|
47
|
+
},
|
48
|
+
"clean-package": "../../../clean-package.config.json",
|
49
|
+
"tsup": {
|
50
|
+
"clean": true,
|
51
|
+
"target": "es2019",
|
52
|
+
"format": [
|
53
|
+
"cjs",
|
54
|
+
"esm"
|
55
|
+
],
|
56
|
+
"banner": {
|
57
|
+
"js": "\"use client\""
|
58
|
+
},
|
59
|
+
"sourcemap": true
|
60
|
+
},
|
61
|
+
"module": "dist/index.mjs",
|
62
|
+
"types": "dist/index.d.ts",
|
63
|
+
"exports": {
|
64
|
+
".": {
|
65
|
+
"types": "./dist/index.d.ts",
|
66
|
+
"import": "./dist/index.mjs",
|
67
|
+
"require": "./dist/index.js"
|
68
|
+
},
|
69
|
+
"./package.json": "./package.json"
|
70
|
+
},
|
71
|
+
"scripts": {
|
72
|
+
"dev": "pnpm build:fast -- --watch",
|
73
|
+
"build": "tsup src --dts",
|
74
|
+
"build:fast": "tsup src",
|
75
|
+
"clean": "rimraf dist .turbo",
|
76
|
+
"typecheck": "tsc --noEmit",
|
77
|
+
"gen:docs": "tsx ../../../scripts/generate-docs"
|
78
|
+
}
|
79
|
+
}
|