'use client';

// src/base/Typography/Typography.tsx
import { cn } from "@paalan/react-shared/lib";
import { forwardRef as forwardRef2 } from "@paalan/react-shared/utils";

// src/base/Box/Box.tsx
import { StyledComponent, WithStyledComponent } from "@paalan/react-shared/system";
import { forwardRef } from "@paalan/react-shared/utils";
import { jsx } from "react/jsx-runtime";
var Box = forwardRef((props, ref) => {
  return /* @__PURE__ */ jsx(StyledComponent, { ...props, ref });
});
Box.withComponent = WithStyledComponent;

// src/base/Typography/Typography.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
var H1 = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "h1",
    ref,
    className: cn("scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className),
    ...props
  }
));
H1.displayName = "H1";
var H2 = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "h2",
    ref,
    className: cn(
      "mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0",
      className
    ),
    ...props
  }
));
H2.displayName = "H2";
var H3 = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "h3",
    ref,
    className: cn("mt-8 scroll-m-20 text-2xl font-semibold tracking-tight", className),
    ...props
  }
));
H3.displayName = "H3";
var H4 = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "h4", ref, className: cn("scroll-m-20 text-xl font-semibold tracking-tight", className), ...props }));
H4.displayName = "H4";
var H5 = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "h5", ref, className: cn("scroll-m-20 text-lg font-semibold tracking-tight", className), ...props }));
H5.displayName = "H5";
var H6 = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "h6", ref, className: cn("scroll-m-20 text-base font-semibold tracking-tight", className), ...props }));
H6.displayName = "H6";
var P = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "p", ref, className: cn("leading-7 [&:not(:first-child)]:mt-4", className), ...props }));
P.displayName = "P";
var BlockQuote = forwardRef2(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
    Box,
    {
      as: "blockquote",
      ref,
      className: cn(
        "mt-6 border-l-2 border-slate-300 pl-6 italic text-slate-800 dark:border-slate-600 dark:text-slate-200",
        className
      ),
      ...props
    }
  )
);
BlockQuote.displayName = "BlockQuote";
var TableLayout = forwardRef2(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "table", ref, className: cn("w-full", className), ...props })
);
TableLayout.displayName = "Table";
var THead = forwardRef2(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "thead", ref, className: cn("", className), ...props })
);
THead.displayName = "THead";
var TBody = forwardRef2(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "tbody", ref, className: cn("", className), ...props })
);
TBody.displayName = "TBody";
var TR = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "tr",
    ref,
    className: cn(
      "m-0 border-t border-slate-300 p-0 even:bg-slate-100 dark:border-slate-700 dark:even:bg-slate-800",
      className
    ),
    ...props
  }
));
TR.displayName = "TR";
var TD = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "td",
    ref,
    className: cn(
      "border border-slate-200 px-4 py-2 text-left dark:border-slate-700 [&[align=center]]:text-center [&[align=right]]:text-right",
      className
    ),
    ...props
  }
));
TD.displayName = "TD";
var TH = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "th",
    ref,
    className: cn(
      "border border-slate-200 px-4 py-2 text-left font-bold dark:border-slate-700 [&[align=center]]:text-center [&[align=right]]:text-right",
      className
    ),
    ...props
  }
));
TH.displayName = "TH";
var UL = forwardRef2(({ className, unstyled = false, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "ul",
    ref,
    className: cn(
      {
        "m-4 list-disc [&>li]:mt-2": !unstyled
      },
      className
    ),
    ...props
  }
));
UL.displayName = "UL";
var OL = forwardRef2(({ className, unstyled = false, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "ol",
    ref,
    className: cn(
      {
        "m-4 list-decimal [&>li]:mt-2": !unstyled
      },
      className
    ),
    ...props
  }
));
OL.displayName = "OL";
var LI = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "li", ref, className: cn("", className), ...props }));
LI.displayName = "LI";
var Code = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
  Box,
  {
    as: "code",
    ref,
    className: cn("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-normal", className),
    ...props
  }
));
Code.displayName = "Code";
var Lead = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "p", ref, className: cn("text-xl text-muted-foreground", className), ...props }));
Lead.displayName = "Lead";
var Large = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "div", ref, className: cn("text-lg font-semibold", className), ...props }));
Large.displayName = "Large";
var Small = forwardRef2(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "small", ref, className: cn("text-sm font-medium leading-none", className), ...props })
);
Small.displayName = "Small";
var Subtle = forwardRef2(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "p", ref, className: cn("text-sm text-muted-foreground", className), ...props }));
Subtle.displayName = "Subtle";
var Strong = forwardRef2(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(Box, { as: "strong", ref, className: cn("font-semibold", className), ...props })
);
Strong.displayName = "Strong";
export {
  BlockQuote,
  Code,
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  LI,
  Large,
  Lead,
  OL,
  P,
  Small,
  Strong,
  Subtle,
  TBody,
  TD,
  TH,
  THead,
  TR,
  TableLayout,
  UL
};
