@crossed/ui
Version:
A universal & performant styling library for React Native, Next.js & React
113 lines (112 loc) • 2.71 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import {
composeStyles,
createStyles,
inlineStyle,
withReactive
} from "@crossed/styled";
import { Text } from "../typography/Text";
import { YBox } from "../layout/YBox";
import { Divider as D } from "../layout/Divider";
import { withStaticProperties } from "@crossed/core";
import { forwardRef, memo } from "react";
import { Box } from "../layout";
import {
flexDirectionStyles,
justifyContentStyle,
paddingHorizontalStyles,
paddingStyles,
paddingVerticalStyles
} from "../styles";
const rootStyle = createStyles(({ colors }) => ({
default: {
base: {
backgroundColor: colors.background.secondary,
borderRadius: 12
}
},
border: {
base: {
borderWidth: 1,
borderColor: colors.border.primary
}
}
}));
const itemPaddingStyle = composeStyles(
paddingHorizontalStyles.xl,
paddingVerticalStyles.md
);
const Root = memo(
forwardRef(
({ padded = true, bordered = true, ...props }, ref) => {
return /* @__PURE__ */ jsx(
YBox,
{
role: "list",
alignItems: "stretch",
space: padded ? "xs" : void 0,
...props,
style: composeStyles(
rootStyle.default,
bordered && rootStyle.border,
padded && paddingStyles.md,
props.style
),
ref
}
);
}
)
);
Root.displayName = "ItemList.Root";
const ItemListDivider = (props) => /* @__PURE__ */ jsx(D, { ...props });
ItemListDivider.displayName = "ItemList.Divider";
const ItemListItem = withReactive(
({ style, children, ...props }) => {
return /* @__PURE__ */ jsx(
Box,
{
...props,
role: "listitem",
style: composeStyles(
flexDirectionStyles.column,
justifyContentStyle.center,
itemPaddingStyle,
style
),
children
}
);
}
);
ItemListItem.displayName = "ItemList.Item";
const ItemListLabel = ({ style, ...props }) => /* @__PURE__ */ jsx(
Text,
{
...props,
style: composeStyles(
itemPaddingStyle,
inlineStyle(() => ({ base: { marginTop: 0 } })),
style
)
}
);
ItemListLabel.displayName = "ItemList.Label";
const ItemListTitle = (props) => /* @__PURE__ */ jsx(Text, { color: "secondary", ...props });
ItemListTitle.displayName = "ItemList.Title";
const ItemList = withStaticProperties(Root, {
Divider: ItemListDivider,
Item: ItemListItem,
Label: ItemListLabel,
Title: ItemListTitle
});
ItemList.displayName = "ItemList";
export {
ItemList,
ItemListDivider,
ItemListItem,
ItemListLabel,
ItemListTitle
};
//# sourceMappingURL=ItemList.js.map