@crossed/ui/lib/commonjs/display/ItemList.js

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

"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var ItemList_exports = {};
__export(ItemList_exports, {
  ItemList: () => ItemList,
  ItemListDivider: () => ItemListDivider,
  ItemListItem: () => ItemListItem,
  ItemListLabel: () => ItemListLabel,
  ItemListTitle: () => ItemListTitle
});
module.exports = __toCommonJS(ItemList_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_styled = require("@crossed/styled");
var import_Text = require("../typography/Text");
var import_YBox = require("../layout/YBox");
var import_Divider = require("../layout/Divider");
var import_core = require("@crossed/core");
var import_react = require("react");
var import_layout = require("../layout");
var import_styles = require("../styles");
const rootStyle = (0, import_styled.createStyles)(({ colors }) => ({
  default: {
    base: {
      backgroundColor: colors.background.secondary,
      borderRadius: 12
    }
  },
  border: {
    base: {
      borderWidth: 1,
      borderColor: colors.border.primary
    }
  }
}));
const itemPaddingStyle = (0, import_styled.composeStyles)(
  import_styles.paddingHorizontalStyles.xl,
  import_styles.paddingVerticalStyles.md
);
const Root = (0, import_react.memo)(
  (0, import_react.forwardRef)(
    ({ padded = true, bordered = true, ...props }, ref) => {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_YBox.YBox,
        {
          role: "list",
          alignItems: "stretch",
          space: padded ? "xs" : void 0,
          ...props,
          style: (0, import_styled.composeStyles)(
            rootStyle.default,
            bordered && rootStyle.border,
            padded && import_styles.paddingStyles.md,
            props.style
          ),
          ref
        }
      );
    }
  )
);
Root.displayName = "ItemList.Root";
const ItemListDivider = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { ...props });
ItemListDivider.displayName = "ItemList.Divider";
const ItemListItem = (0, import_styled.withReactive)(
  ({ style, children, ...props }) => {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_layout.Box,
      {
        ...props,
        role: "listitem",
        style: (0, import_styled.composeStyles)(
          import_styles.flexDirectionStyles.column,
          import_styles.justifyContentStyle.center,
          itemPaddingStyle,
          style
        ),
        children
      }
    );
  }
);
ItemListItem.displayName = "ItemList.Item";
const ItemListLabel = ({ style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
  import_Text.Text,
  {
    ...props,
    style: (0, import_styled.composeStyles)(
      itemPaddingStyle,
      (0, import_styled.inlineStyle)(() => ({ base: { marginTop: 0 } })),
      style
    )
  }
);
ItemListLabel.displayName = "ItemList.Label";
const ItemListTitle = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { color: "secondary", ...props });
ItemListTitle.displayName = "ItemList.Title";
const ItemList = (0, import_core.withStaticProperties)(Root, {
  Divider: ItemListDivider,
  Item: ItemListItem,
  Label: ItemListLabel,
  Title: ItemListTitle
});
ItemList.displayName = "ItemList";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ItemList,
  ItemListDivider,
  ItemListItem,
  ItemListLabel,
  ItemListTitle
});
//# sourceMappingURL=ItemList.js.map