@yamada-ui/status
Version:
Yamada UI status component
71 lines (69 loc) • 2.02 kB
JavaScript
"use client"
// src/status.tsx
import {
forwardRef,
omitThemeProps,
ui,
useComponentMultiStyle,
useTheme
} from "@yamada-ui/core";
import { cx } from "@yamada-ui/utils";
import { jsx, jsxs } from "react/jsx-runtime";
var defaultStatuses = {
error: { colorScheme: "danger" },
info: { colorScheme: "info" },
success: { colorScheme: "success" },
warning: { colorScheme: "warning" }
};
var getStatusColorScheme = (status, statuses) => {
var _a, _b;
return (_b = (_a = statuses == null ? void 0 : statuses[status]) == null ? void 0 : _a.colorScheme) != null ? _b : defaultStatuses[status].colorScheme;
};
var Status = forwardRef(
({ colorScheme, value = "info", indicatorProps, labelProps, ...props }, ref) => {
var _a, _b, _c;
const { theme } = useTheme();
const statuses = (_c = (_b = (_a = theme.__config) == null ? void 0 : _a.status) == null ? void 0 : _b.statuses) != null ? _c : {};
colorScheme != null ? colorScheme : colorScheme = getStatusColorScheme(value, statuses);
const [styles, mergedProps] = useComponentMultiStyle("Status", {
...props,
colorScheme
});
const { className, children, ...rest } = omitThemeProps(mergedProps);
return /* @__PURE__ */ jsxs(
ui.div,
{
className: cx("ui-status", className),
__css: { ...styles.container },
...rest,
children: [
/* @__PURE__ */ jsx(
ui.div,
{
ref,
className: "ui-status__indicator",
__css: { ...styles.indicator },
...indicatorProps
}
),
/* @__PURE__ */ jsx(
ui.p,
{
className: "ui-status__label",
__css: { ...styles.label },
...labelProps,
children
}
)
]
}
);
}
);
Status.displayName = "Status";
Status.__ui__ = "Status";
export {
getStatusColorScheme,
Status
};
//# sourceMappingURL=chunk-FBZ7ECK2.mjs.map