@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
229 lines (228 loc) • 6.1 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { withStaticProperties } from "@crossed/core";
import { Text } from "../typography/Text";
import {
composeStyles,
createStyles
} from "@crossed/styled";
import { createContext, memo, useContext } from "react";
import { YBox } from "../layout/YBox";
import { match } from "ts-pattern";
import { AlertTriangle, CheckCircle, Info, XCircle } from "@crossed/unicons";
import {
Button
} from "../buttons/Button";
import { Box } from "../layout/Box";
const alertDescriptionStyles = createStyles(
({ components: { Alert: Alert2 } }) => ({
base: { base: { flexShrink: 1, flexGrow: 1 } },
error: { base: { color: Alert2.error.text } },
success: { base: { color: Alert2.success.text } },
warning: { base: { color: Alert2.warning.text } },
info: { base: { color: Alert2.info.text } }
})
);
const alertActionTextStyles = createStyles(
({ components: { Alert: Alert2 } }) => ({
error: {
"base": { color: Alert2.error.text },
":hover": { color: Alert2.error.text },
":active": { color: Alert2.error.text }
},
success: {
"base": { color: Alert2.success.text },
":hover": { color: Alert2.success.text },
":active": { color: Alert2.success.text }
},
warning: {
"base": { color: Alert2.warning.text },
":hover": { color: Alert2.warning.text },
":active": { color: Alert2.warning.text }
},
info: {
"base": { color: Alert2.info.text },
":hover": { color: Alert2.info.text },
":active": { color: Alert2.info.text }
}
})
);
const alertStyles = createStyles(
({ space }) => ({
containerIcon: {
base: { alignSelf: "center" },
media: { md: { alignSelf: "baseline", paddingTop: 3 } }
},
container: {
base: {
paddingLeft: space.xl,
paddingRight: space.xl,
paddingTop: space.md,
paddingBottom: space.md,
borderRadius: 8,
borderWidth: 1,
borderStyle: "solid",
alignItems: "center",
gap: space.md
},
variants: {},
media: {
md: {
flexDirection: "row",
gap: space.md
}
}
},
group: { base: { flex: 1, flexShrink: 1 } }
})
);
const actionStyles = createStyles(({ components: { Alert: Alert2 } }) => ({
base: {
base: { alignSelf: "center", borderWidth: 0 },
media: { md: { alignSelf: "baseline" } },
web: {
"base": { boxSizing: "border-box" },
":focus": {
outlineWidth: "2px",
outlineOffset: "2px",
outlineStyle: "solid"
}
}
},
error: { web: { ":focus": { outlineColor: Alert2.error.text } } },
success: {
web: { ":focus": { outlineColor: Alert2.success.text } }
},
warning: {
web: { ":focus": { outlineColor: Alert2.warning.text } }
},
info: {
web: { ":focus": { outlineColor: Alert2.info.text } }
}
}));
const containerStyles = createStyles(({ components: { Alert: Alert2 } }) => ({
error: {
base: {
borderColor: Alert2.error.border,
backgroundColor: Alert2.error.background
}
},
success: {
base: {
borderColor: Alert2.success.border,
backgroundColor: Alert2.success.background
}
},
warning: {
base: {
borderColor: Alert2.warning.border,
backgroundColor: Alert2.warning.background
}
},
info: {
base: {
borderColor: Alert2.info.border,
backgroundColor: Alert2.info.background
}
}
}));
const alertContext = createContext({});
const Container = ({
status = "info",
children,
style,
...props
}) => {
return /* @__PURE__ */ jsx(alertContext.Provider, { value: { status }, children: /* @__PURE__ */ jsx(
YBox,
{
space: "md",
role: "alert",
...props,
style: composeStyles(
alertStyles.container,
containerStyles[status],
style
),
children
}
) });
};
Container.displayName = "Alert";
const AlertIcon = ({ style }) => {
const { status } = useContext(alertContext);
const { color } = composeStyles(
alertDescriptionStyles.base,
alertDescriptionStyles[status]
).style().style;
const Comp = match(status).with("error", () => XCircle).with("info", () => Info).with("success", () => CheckCircle).with("warning", () => AlertTriangle).exhaustive();
return /* @__PURE__ */ jsx(Box, { style: composeStyles(alertStyles.containerIcon, style), children: /* @__PURE__ */ jsx(Comp, { color, size: 16 }) });
};
AlertIcon.displayName = "Alert.Icon";
const AlertDescription = memo((props) => {
const { status } = useContext(alertContext);
return /* @__PURE__ */ jsx(
Text,
{
...props,
style: composeStyles(
alertDescriptionStyles.base,
alertDescriptionStyles[status],
props.style
)
}
);
});
AlertDescription.displayName = "Alert.Description";
const AlertGroup = ({ style, ...props }) => {
return /* @__PURE__ */ jsx(
YBox,
{
space: "md",
...props,
style: composeStyles(alertStyles.group, style)
}
);
};
AlertGroup.displayName = "Alert.Group";
const AlertAction = (props) => {
const { status } = useContext(alertContext);
return /* @__PURE__ */ jsx(
Button,
{
variant: "tertiary",
size: false,
...props,
style: composeStyles(actionStyles.base, actionStyles[status])
}
);
};
AlertAction.displayName = "Alert.Action";
const ActionText = (props) => {
const { status } = useContext(alertContext);
return /* @__PURE__ */ jsx(
Button.Text,
{
...props,
style: composeStyles(alertActionTextStyles[status], props.style)
}
);
};
ActionText.displayName = "Alert.Action.Text";
const Alert = withStaticProperties(Container, {
Icon: AlertIcon,
Description: AlertDescription,
Action: withStaticProperties(AlertAction, { Text: ActionText }),
Group: AlertGroup
});
export {
ActionText,
Alert,
AlertDescription,
AlertGroup,
AlertIcon,
alertActionTextStyles,
alertDescriptionStyles,
alertStyles
};
//# sourceMappingURL=Alert.js.map