@crossed/demo/lib/module/primitive/createList/separator.native.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { createList } from "@crossed/primitive";
import { styled } from "@crossed/styled";
import { YBox } from "@crossed/ui";
import { Fragment, useId } from "react";
import { Text, View } from "react-native";
const List = createList({
  Root: ({ children, ...props }) => {
    const id = useId();
    return /* @__PURE__ */ jsx(
      View,
      {
        ...props,
        style: [
          {
            borderWidth: 1,
            borderColor: "gray",
            borderRadius: 5
          },
          props.style
        ],
        children: Array.isArray(children) ? children.map((c, i) => {
          return /* @__PURE__ */ jsxs(Fragment, { children: [
            c,
            i + 1 !== children.length && /* @__PURE__ */ jsx(
              View,
              {
                role: "separator",
                style: { borderTopWidth: 1, borderColor: "gray" }
              }
            )
          ] }, `${id}-${i}`);
        }) : children
      }
    );
  },
  Item: (props) => {
    return /* @__PURE__ */ jsx(
      View,
      {
        ...props,
        style: [
          {
            paddingVertical: 8,
            paddingHorizontal: 12
          },
          props.style
        ]
      }
    );
  },
  SubTitle: (props) => {
    return /* @__PURE__ */ jsx(Text, { ...props, style: [{ color: "gray" }, props.style] });
  },
  Title: (props) => {
    return /* @__PURE__ */ jsx(
      Text,
      {
        ...props,
        style: [{ color: "white", fontWeight: "700" }, props.style]
      }
    );
  },
  Divider: styled(View, { className: ["border-t border-neutral-800"] }),
  Label: styled(Text, {
    className: ["text-neutral-500 text-base font-bold", "px-3 py-1.5"],
    variants: { danger: { true: { className: ["text-red-800"] } } }
  })
});
const CreateListWithSeparatorNativeDemo = () => {
  return /* @__PURE__ */ jsx(YBox, { space: "md", children: /* @__PURE__ */ jsxs(List, { children: [
    /* @__PURE__ */ jsxs(List.Item, { children: [
      /* @__PURE__ */ jsx(List.Title, { children: "Number 1" }),
      /* @__PURE__ */ jsx(List.SubTitle, { children: "Description Number 1" })
    ] }),
    /* @__PURE__ */ jsxs(List.Item, { children: [
      /* @__PURE__ */ jsx(List.Title, { children: "Number 2" }),
      /* @__PURE__ */ jsx(List.SubTitle, { children: "Description 2" })
    ] }),
    /* @__PURE__ */ jsxs(List.Item, { children: [
      /* @__PURE__ */ jsx(List.Title, { children: "Number 3" }),
      /* @__PURE__ */ jsx(List.SubTitle, { children: "Number 3 have description" })
    ] })
  ] }) });
};
export {
  CreateListWithSeparatorNativeDemo
};
//# sourceMappingURL=separator.native.js.map