nextuiq/dist/index9.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { cn } from './index38.mjs';
import React__default from 'react';

function Card({
  children,
  className,
  variant = "elevated",
  size = "md",
  clickable = false,
  draggable = false,
  fullWidth = false,
  orientation = "vertical",
  ...props
}) {
  const variantClasses = {
    elevated: "bg-[oklch(var(--theme-background))] shadow-md hover:shadow-lg transition-shadow",
    filled: "bg-[oklch(var(--theme-muted))]",
    outlined: "border border-[oklch(var(--theme-border))] bg-transparent"
  };
  const sizeClasses = {
    sm: "p-3",
    md: "p-4",
    lg: "p-6"
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      className: cn(
        "rounded-xl overflow-hidden",
        variantClasses[variant],
        sizeClasses[size],
        clickable && "cursor-pointer hover:scale-[1.02] transition-transform",
        draggable && "cursor-move",
        fullWidth && "w-full",
        orientation === "horizontal" && "flex",
        className
      ),
      role: clickable ? "button" : "article",
      tabIndex: clickable ? 0 : void 0,
      ...props,
      children
    }
  );
}
function CardHeader({
  className,
  title,
  subtitle,
  avatar,
  action,
  ...props
}) {
  const headerId = React__default.useId();
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "div",
    {
      className: cn("flex items-start gap-4 p-4", className),
      role: "heading",
      "aria-level": 2,
      ...props,
      children: [
        avatar && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", "aria-hidden": "true", children: avatar }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-grow", children: [
          "// In CardHeader",
          title && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: headerId, className: "text-lg font-semibold text-[oklch(var(--theme-foreground))]", children: title }),
          subtitle && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-sm text-[oklch(var(--theme-muted-foreground))]", "aria-describedby": headerId, children: subtitle })
        ] }),
        action && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 ml-auto", children: action })
      ]
    }
  );
}
function CardMedia({
  children,
  className,
  image,
  alt = "",
  height = "h-48",
  ...props
}) {
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      className: cn(height, "relative overflow-hidden", className),
      role: "img",
      "aria-label": alt,
      ...props,
      children: image ? /* @__PURE__ */ jsxRuntimeExports.jsx(
        "img",
        {
          src: image,
          alt,
          className: "w-full h-full object-cover"
        }
      ) : children
    }
  );
}
function CardContent({
  children,
  className,
  ...props
}) {
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      className: cn("p-4 text-[oklch(var(--theme-muted-foreground))]", className),
      role: "region",
      ...props,
      children
    }
  );
}
function CardActions({
  children,
  className,
  position = "end",
  ...props
}) {
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      className: cn(
        "flex items-center gap-2 p-4",
        position === "end" ? "justify-end" : "justify-start",
        className
      ),
      role: "group",
      "aria-label": "Card actions",
      ...props,
      children
    }
  );
}

export { Card, CardActions, CardContent, CardHeader, CardMedia };