import { jsx } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../../lib/utils.js";
import { typographyColorVariants, titleVariants, titleOrderSizeVariants, titleOrderStyleVariants } from "../../../lib/variants.js";
const orderToElement = {
  1: "h1",
  2: "h2",
  3: "h3",
  4: "h4",
  5: "h5",
  6: "h6"
};
function Title({
  order = 2,
  size,
  weight,
  color,
  as,
  render,
  className,
  children,
  ...props
}) {
  const classes = cn(
    // Order-based style defaults (weight, tracking, leading) - always applied
    titleOrderStyleVariants({ order }),
    // Size: use explicit size if provided, otherwise use order-based default
    size ? titleVariants({ size }) : titleOrderSizeVariants({ order }),
    // Weight override if provided (overrides order-based weight)
    weight && titleVariants({ weight }),
    typographyColorVariants({ color }),
    className
  );
  if (render) {
    return React.cloneElement(render, {
      className: cn(classes, render.props.className),
      children,
      ...props
    });
  }
  const Component = as ?? orderToElement[order];
  return /* @__PURE__ */ jsx(Component, { "data-slot": "title", className: classes, ...props, children });
}
export {
  Title
};
//# sourceMappingURL=title.js.map
