import { isReactText, isString } from "../utils/assertion.js";
import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import "../utils/index.js";
import { useStyleConfig } from "../core/theme.js";
import { styled } from "../core/styled.js";
import { vui } from "../core/vui.js";
import "../core/index.js";
import { useListContext } from "./context.js";
import listIcon_default from "./listIcon.js";
import link_default from "../link/link.js";
import "../link/index.js";
import listText_default from "./listText.js";
import { Fragment } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/list/listItem.tsx
/** Used as optional content wrapper when list item should be a link. */
const ListItemLink = vui((props, ref) => /* @__PURE__ */ jsx(link_default, {
	borderRadius: "none",
	className: "vui-listItemLink vui-linkNoUnderline",
	h: "100%",
	px: 2,
	ref,
	variant: "plain",
	w: "100%",
	...props
}));
const ListItemBase = styled.liBox`
  display: flex;
  line-height: normal;
  outline: none;
  transition-duration: fast;

  &[aria-disabled='true'] {
    cursor: not-allowed;
    user-select: none;
    opacity: 0.5;
  }

  &:focus-visible {
    z-index: 1;
  }
`;
/**
* Displays a list item with text and optional icons. Can be shown as interactive or selected.
* Optionally wraps the content with an <a> element when rendering a link.
*/
const ListItem = vui((props, ref) => {
	const { children, center, centerH, centerV = true, className, column, disabled, iconLeft, iconRight, isInteractive: isInteractiveProp, isSelected, isTruncated, itemLeft, itemRight, linkProps, onClick, text, ...rest } = {
		...useListContext(),
		...props
	};
	const { activeBg, hoverBg, selectedBg, ...itemStyles } = useStyleConfig("List", useListContext()).item;
	const isLinkItem = linkProps !== void 0;
	const isInteractive = isInteractiveProp || isLinkItem || onClick !== void 0;
	const alignItems = (center || (column ? centerH : centerV)) && "center";
	const flexDirection = column && "column";
	const justifyContent = (center || (column ? centerV : centerH)) && "center";
	const ContentWrapper = isLinkItem ? ListItemLink : Fragment;
	const contentWrapperProps = isLinkItem ? {
		alignItems: "center",
		display: "inline-flex"
	} : {};
	const interactiveProps = !disabled && isInteractive ? {
		cursor: "pointer",
		focusVisibleRing: 2,
		hoverBg,
		activeBg,
		tabIndex: !isLinkItem ? 0 : void 0,
		userSelect: "none"
	} : {};
	const aliasedProps = filterUndefined({
		alignItems,
		bg: isSelected ? selectedBg : void 0,
		"aria-disabled": disabled,
		flexDirection,
		justifyContent,
		px: isLinkItem ? 0 : void 0
	});
	return /* @__PURE__ */ jsx(ListItemBase, {
		bg: disabled ? rest.disabledBg || "sandstone.95" : void 0,
		className: cs("vui-listItem", className),
		onClick: !disabled ? onClick : void 0,
		ref,
		...itemStyles,
		...interactiveProps,
		...aliasedProps,
		...rest,
		children: /* @__PURE__ */ jsxs(ContentWrapper, {
			...linkProps,
			...contentWrapperProps,
			children: [
				itemLeft,
				isString(iconLeft) ? /* @__PURE__ */ jsx(listIcon_default, {
					mr: 1,
					name: iconLeft,
					verticalAlign: "middle"
				}) : iconLeft,
				children ?? (isReactText(text) ? /* @__PURE__ */ jsx(listText_default, {
					isTruncated,
					text
				}) : text),
				isString(iconRight) ? /* @__PURE__ */ jsx(listIcon_default, {
					ml: "auto",
					name: iconRight,
					verticalAlign: "middle"
				}) : iconRight,
				itemRight
			]
		})
	});
});
ListItem.displayName = "ListItem";
var listItem_default = ListItem;

//#endregion
export { ListItem, ListItemBase, listItem_default as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=listItem.js.map