@stratakit/structures
Version:
Medium-sized component structures for the Strata design system
62 lines (61 loc) • 3.08 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import {
createIconFromPath,
forwardRef
} from "@stratakit/foundations/secret-internals";
import cx from "classnames";
const Checkmark = createIconFromPath(
"M11.607 4.191a.5.5 0 0 1 .787.617l-5.5 7a.503.503 0 0 1-.777.012l-2.5-3-.057-.084a.5.5 0 0 1 .752-.627l.072.07 2.105 2.526 5.118-6.514Z"
);
DEV: Checkmark.displayName = "Checkmark";
const Dismiss = createIconFromPath(
"M4.854 4.146a.5.5 0 1 0-.708.708L7.293 8l-3.147 3.146a.5.5 0 1 0 .708.707L8 8.707l3.146 3.146a.5.5 0 1 0 .707-.707L8.707 8l3.146-3.146a.5.5 0 1 0-.707-.708L8 7.293 4.854 4.146Z"
);
DEV: Dismiss.displayName = "Dismiss";
const statusIcons = {
positive: createIconFromPath(
"M7.25 1.855a1.5 1.5 0 0 1 1.5 0l4.196 2.423a1.5 1.5 0 0 1 .75 1.299v4.846a1.5 1.5 0 0 1-.75 1.298L8.75 14.144a1.5 1.5 0 0 1-1.5 0l-4.196-2.423a1.5 1.5 0 0 1-.75-1.298V5.577a1.5 1.5 0 0 1 .75-1.299L7.25 1.855Zm1 .866a.5.5 0 0 0-.5 0L3.554 5.144a.5.5 0 0 0-.25.433v4.846a.5.5 0 0 0 .25.432l4.196 2.423a.5.5 0 0 0 .5 0l4.196-2.423a.5.5 0 0 0 .25-.432V5.577a.5.5 0 0 0-.25-.433L8.25 2.721ZM9.85 5.7a.501.501 0 0 1 .8.6l-3 4a.502.502 0 0 1-.754.053l-1.5-1.5-.064-.078a.5.5 0 0 1 .693-.693l.079.064 1.091 1.092L9.85 5.7Z"
),
attention: createIconFromPath(
"M8 12.75a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5ZM6.68 2.885c.568-1.047 2.072-1.047 2.64 0l4.82 8.9A1.5 1.5 0 0 1 12.82 14H10.5v-1h2.321a.5.5 0 0 0 .44-.738l-4.822-8.9a.5.5 0 0 0-.879 0l-4.821 8.9a.5.5 0 0 0 .44.738h2.32v1H3.18a1.5 1.5 0 0 1-1.319-2.215l4.82-8.9ZM8 6.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V7a.5.5 0 0 1 .5-.5Z"
),
critical: createIconFromPath(
"M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM8 10a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm0-5.5a.5.5 0 0 1 .5.5v3.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"
),
info: createIconFromPath(
"M8 1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm0 1a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11Zm0 4a.5.5 0 0 1 .5.5v3.5h1a.5.5 0 0 1 0 1h-3a.5.5 0 0 1 0-1h1v-3h-1a.5.5 0 0 1 0-1H8Zm-.125-2.25a.625.625 0 1 1 0 1.25.625.625 0 0 1 0-1.25Z"
)
};
const StatusIcon = forwardRef(
(props, forwardedRef) => {
const { tone, ...rest } = props;
const Element = statusIcons[tone];
return /* @__PURE__ */ jsx(Element, { ...rest, ref: forwardedRef });
}
);
DEV: StatusIcon.displayName = "StatusIcon";
const MoreHorizontal = createIconFromPath(
"M4 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"
);
DEV: MoreHorizontal.displayName = "MoreHorizontal";
const ChevronDownBase = createIconFromPath(
"M11.146 6.146a.5.5 0 1 1 .707.708l-3.5 3.5a.5.5 0 0 1-.707 0l-3.5-3.5a.5.5 0 1 1 .708-.708L8 9.293l3.146-3.147Z"
);
const ChevronDown = forwardRef((props, forwardedRef) => {
return /* @__PURE__ */ jsx(
ChevronDownBase,
{
...props,
className: cx("\u{1F95D}-chevron-down", props.className),
ref: forwardedRef
}
);
});
DEV: ChevronDown.displayName = "ChevronDown";
export {
Checkmark,
ChevronDown,
Dismiss,
MoreHorizontal,
StatusIcon
};