import { cn } from "../../utils/cn.mjs";
import { cva } from "class-variance-authority";
import { jsx } from "react/jsx-runtime";

//#region src/components/Container/index.tsx
/**
* Container component variants using class-variance-authority
* Provides flexible styling options for background, padding, borders, and layout
*/
const containerVariants = cva("flex flex-col text-text backdrop-blur", {
	variants: {
		roundedSize: {
			none: "rounded-none",
			sm: "rounded-sm",
			md: "rounded-md",
			lg: "rounded-lg",
			xl: "rounded-xl",
			"2xl": "rounded-2xl",
			"3xl": "rounded-3xl",
			full: "rounded-full"
		},
		transparency: {
			none: "bg-card",
			sm: "bg-card/95",
			md: "bg-card/70",
			lg: "bg-card/40",
			xl: "bg-card/20",
			full: ""
		},
		padding: {
			none: "p-0",
			sm: "p-1",
			md: "p-2",
			lg: "p-3",
			xl: "p-4"
		},
		separator: {
			without: "",
			x: "divide-x divide-dashed divide-text/20",
			y: "divide-y divide-dashed divide-text/20",
			both: "divide-x divide-y divide-dashed divide-text/20"
		},
		border: {
			none: "",
			with: "border-[1.5px]"
		},
		borderColor: {
			primary: "border-primary",
			secondary: "border-secondary",
			neutral: "border-neutral",
			text: "border-text",
			error: "border-error",
			warning: "border-warning",
			success: "border-success"
		},
		background: {
			none: "bg-inherit",
			hoverable: "!bg-opacity-5 hover:!bg-opacity-10 focus:!bg-opacity-10 aria-selected:!bg-opacity-15 backdrop-blur-0 hover:backdrop-blur focus:backdrop-blur aria-selected:backdrop-blur",
			with: ""
		},
		gap: {
			none: "gap-0",
			sm: "gap-1",
			md: "gap-3",
			lg: "gap-5",
			xl: "gap-8",
			"2xl": "gap-10"
		}
	},
	defaultVariants: {
		roundedSize: "md",
		border: "none",
		borderColor: "text",
		transparency: "md",
		padding: "none",
		separator: "without",
		gap: "none"
	}
});
/** Available rounded corner sizes for the container */
let ContainerRoundedSize = /* @__PURE__ */ function(ContainerRoundedSize$1) {
	ContainerRoundedSize$1["NONE"] = "none";
	ContainerRoundedSize$1["SM"] = "sm";
	ContainerRoundedSize$1["MD"] = "md";
	ContainerRoundedSize$1["LG"] = "lg";
	ContainerRoundedSize$1["XL"] = "xl";
	ContainerRoundedSize$1["TWO_XL"] = "2xl";
	ContainerRoundedSize$1["THREE_XL"] = "3xl";
	ContainerRoundedSize$1["FULL"] = "full";
	return ContainerRoundedSize$1;
}({});
/** Background transparency levels for the container */
let ContainerTransparency = /* @__PURE__ */ function(ContainerTransparency$1) {
	ContainerTransparency$1["NONE"] = "none";
	ContainerTransparency$1["SM"] = "sm";
	ContainerTransparency$1["MD"] = "md";
	ContainerTransparency$1["LG"] = "lg";
	ContainerTransparency$1["XL"] = "xl";
	ContainerTransparency$1["FULL"] = "full";
	return ContainerTransparency$1;
}({});
/** Padding sizes for container content */
let ContainerPadding = /* @__PURE__ */ function(ContainerPadding$1) {
	ContainerPadding$1["NONE"] = "none";
	ContainerPadding$1["SM"] = "sm";
	ContainerPadding$1["MD"] = "md";
	ContainerPadding$1["LG"] = "lg";
	ContainerPadding$1["XL"] = "xl";
	return ContainerPadding$1;
}({});
/** Separator options for dividing container children */
let ContainerSeparator = /* @__PURE__ */ function(ContainerSeparator$1) {
	ContainerSeparator$1["WITHOUT"] = "without";
	ContainerSeparator$1["X"] = "x";
	ContainerSeparator$1["Y"] = "y";
	ContainerSeparator$1["BOTH"] = "both";
	return ContainerSeparator$1;
}({});
/** Border color options for the container */
let ContainerBorderColor = /* @__PURE__ */ function(ContainerBorderColor$1) {
	ContainerBorderColor$1["PRIMARY"] = "primary";
	ContainerBorderColor$1["SECONDARY"] = "secondary";
	ContainerBorderColor$1["NEUTRAL"] = "neutral";
	ContainerBorderColor$1["TEXT"] = "text";
	ContainerBorderColor$1["ERROR"] = "error";
	ContainerBorderColor$1["WARNING"] = "warning";
	ContainerBorderColor$1["SUCCESS"] = "success";
	return ContainerBorderColor$1;
}({});
/** Background interaction states for the container */
let ContainerBackground = /* @__PURE__ */ function(ContainerBackground$1) {
	ContainerBackground$1["NONE"] = "none";
	ContainerBackground$1["HOVERABLE"] = "hoverable";
	ContainerBackground$1["WITH"] = "with";
	return ContainerBackground$1;
}({});
/** Gap sizes between container children */
let ContainerGap = /* @__PURE__ */ function(ContainerGap$1) {
	ContainerGap$1["NONE"] = "none";
	ContainerGap$1["SM"] = "sm";
	ContainerGap$1["MD"] = "md";
	ContainerGap$1["LG"] = "lg";
	ContainerGap$1["XL"] = "xl";
	ContainerGap$1["TWO_XL"] = "2xl";
	return ContainerGap$1;
}({});
/**
* Container Component
*
* A flexible container component for organizing content with customizable styling options.
* Supports various visual states, layouts, and accessibility features.
*
* ## Features
* - **Flexible Layout**: Supports different padding, gap, and separator options
* - **Visual Variants**: Multiple background transparency levels and border styles
* - **Responsive Design**: Configurable rounded corners and spacing
* - **Semantic HTML**: Proper div element with extensible attributes
*
* ## Accessibility
* - Inherits all standard div accessibility features
* - Supports ARIA attributes through spread props
* - Maintains proper semantic structure for screen readers
*
* @param children - The content to display inside the container
* @param roundedSize - Border radius size (default: 'md')
* @param transparency - Background transparency level (default: 'md')
* @param padding - Internal padding size (default: 'none')
* @param separator - Divider lines between children (default: 'without')
* @param border - Whether to show border (default: false)
* @param borderColor - Color of the border (default: 'text')
* @param background - Background interaction behavior (default: 'none')
* @param gap - Space between child elements (default: 'none')
* @param className - Additional CSS classes
* @param props - Additional HTML div attributes including ARIA attributes
*/
const Container = ({ children, roundedSize, padding, transparency, separator, className, border, borderColor, background, gap,...props }) => /* @__PURE__ */ jsx("div", {
	className: cn(containerVariants({
		roundedSize,
		transparency,
		padding,
		separator,
		border: typeof border === "boolean" ? border ? "with" : "none" : void 0,
		background,
		borderColor,
		gap,
		className
	})),
	...props,
	children
});

//#endregion
export { Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, containerVariants };
//# sourceMappingURL=index.mjs.map