@arolariu/components/dist/components/ui/item.js

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

import { jsx } from "react/jsx-runtime";
import { Separator } from "./separator.js";
import { cn } from "../../lib/utilities.js";
import item_module from "./item.module.js";
import * as __rspack_external_react from "react";
const ItemGroup = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        role: "list",
        "data-slot": "item-group",
        className: cn(item_module.group, className),
        ...props
    }));
const ItemSeparator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Separator, {
        ref: ref,
        "data-slot": "item-separator",
        orientation: "horizontal",
        className: cn(item_module.separator, className),
        ...props
    }));
const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = "default", size = "default", asChild = false, children, ...props }, ref)=>{
    const mergedClassName = cn(item_module.item, "outline" === variant && item_module.outline, "muted" === variant && item_module.muted, "sm" === size ? item_module.sizeSm : item_module.sizeDefault, className);
    if (asChild && /*#__PURE__*/ __rspack_external_react.isValidElement(children)) {
        const child = children;
        return /*#__PURE__*/ __rspack_external_react.cloneElement(child, {
            ...props,
            ref,
            "data-size": size,
            "data-slot": "item",
            "data-variant": variant,
            className: cn(mergedClassName, child.props.className)
        });
    }
    return /*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "item",
        "data-size": size,
        "data-variant": variant,
        className: mergedClassName,
        ...props,
        children: children
    });
});
const ItemMedia = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = "default", ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "item-media",
        "data-variant": variant,
        className: cn(item_module.media, "icon" === variant && item_module.mediaIcon, "image" === variant && item_module.mediaImage, className),
        ...props
    }));
const ItemContent = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "item-content",
        className: cn(item_module.content, className),
        ...props
    }));
const ItemTitle = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "item-title",
        className: cn(item_module.title, className),
        ...props
    }));
const ItemDescription = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("p", {
        ref: ref,
        "data-slot": "item-description",
        className: cn(item_module.description, className),
        ...props
    }));
const ItemActions = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "item-actions",
        className: cn(item_module.actions, className),
        ...props
    }));
const ItemHeader = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "item-header",
        className: cn(item_module.header, className),
        ...props
    }));
const ItemFooter = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
        ref: ref,
        "data-slot": "item-footer",
        className: cn(item_module.footer, className),
        ...props
    }));
ItemGroup.displayName = "ItemGroup";
ItemSeparator.displayName = "ItemSeparator";
Item.displayName = "Item";
ItemMedia.displayName = "ItemMedia";
ItemContent.displayName = "ItemContent";
ItemTitle.displayName = "ItemTitle";
ItemDescription.displayName = "ItemDescription";
ItemActions.displayName = "ItemActions";
ItemHeader.displayName = "ItemHeader";
ItemFooter.displayName = "ItemFooter";
export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

//# sourceMappingURL=item.js.map