@frontlit/page-builder 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/server/primitives.js

@@ -0,0 +1,888 @@
+// src/primitives/components/ui/badge.tsx
+import { cva } from "class-variance-authority";
+
+// src/primitives/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/primitives/components/ui/badge.tsx
+import { jsx } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/primitives/badge.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Badge2 = ({
+  variant = "default",
+  children,
+  className = "",
+  style = {},
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.caption;
+  const buttonStyles = theme?.interactives?.button;
+  const classes = cn(
+    // Base styles
+    // "bg-secondary",
+    // Theme typography from caption
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    buttonStyles?.border?.width,
+    buttonStyles?.border?.radius,
+    buttonStyles?.border?.style,
+    className
+  );
+  return /* @__PURE__ */ jsx2(
+    Badge,
+    {
+      variant,
+      className: classes,
+      style: {
+        ...style,
+        backgroundColor: style.backgroundColor,
+        color: style.color
+      },
+      ...props,
+      children
+    }
+  );
+};
+
+// src/primitives/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import * as React from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx3(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/primitives/button.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Button2 = ({
+  variant = "default",
+  size = "default",
+  disabled = false,
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const buttonStyles = theme?.interactives?.button;
+  const typographyStyles = theme?.typography?.button;
+  const isIcon = size === "icon";
+  const classes = cn(
+    // Base styles
+    "",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    // Theme interactivity. Icon buttons stay square — CTA padding
+    // would stretch them off the size="icon" box.
+    !isIcon && buttonStyles?.padding?.x,
+    !isIcon && buttonStyles?.padding?.y,
+    buttonStyles?.border?.width,
+    buttonStyles?.border?.radius,
+    buttonStyles?.border?.style,
+    // buttonStyles?.border?.color,
+    buttonStyles?.shadow,
+    // Theme disabled states
+    disabled && buttonStyles?.disabled?.opacity,
+    disabled && buttonStyles?.disabled?.cursor,
+    disabled && buttonStyles?.disabled?.color,
+    disabled && buttonStyles?.disabled?.background,
+    disabled && buttonStyles?.disabled?.border,
+    // User overrides
+    buttonStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx4(
+    Button,
+    {
+      variant,
+      size,
+      disabled,
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/primitives/caption.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Caption = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.caption;
+  const classes = cn(
+    // Base styles
+    "text-xs leading-7 text-muted-foreground",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return /* @__PURE__ */ jsx5("span", { className: classes, ...props, children });
+};
+
+// src/primitives/heading.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FLUID_MIN_VIEWPORT = 360;
+var FLUID_MAX_VIEWPORT = 1280;
+var TAILWIND_TEXT_PX = {
+  "text-xs": 12,
+  "text-sm": 14,
+  "text-base": 16,
+  "text-lg": 18,
+  "text-xl": 20,
+  "text-2xl": 24,
+  "text-3xl": 30,
+  "text-4xl": 36,
+  "text-5xl": 48,
+  "text-6xl": 60,
+  "text-7xl": 72,
+  "text-8xl": 96,
+  "text-9xl": 128
+};
+var rem = (px) => `${+(px / 16).toFixed(4)}rem`;
+function fluidFontSize({ min, max }) {
+  const slope = (max - min) / (FLUID_MAX_VIEWPORT - FLUID_MIN_VIEWPORT);
+  const intercept = min - slope * FLUID_MIN_VIEWPORT;
+  return `clamp(${rem(Math.min(min, max))}, ${rem(intercept)} + ${+(slope * 100).toFixed(4)}vw, ${rem(Math.max(min, max))})`;
+}
+function themeSize(typography) {
+  if (typography?.fluid) return fluidFontSize(typography.fluid);
+  const px = TAILWIND_TEXT_PX[typography?.fontSize ?? ""];
+  return px ? rem(px) : void 0;
+}
+function createHeading(displayName, defaultTag, baseClasses, getTypography) {
+  const Heading = ({
+    children,
+    className = "",
+    theme,
+    as: Tag = defaultTag,
+    sizeClassName,
+    style,
+    ...props
+  }) => {
+    const typography = getTypography(theme);
+    const fluid = typography?.fluid;
+    const classes = cn(
+      baseClasses,
+      typography?.fontSize,
+      // A class (not an inline font-size) so `sizeClassName` still wins.
+      fluid && "text-[length:var(--pb-theme-size)]",
+      sizeClassName,
+      typography?.fontFamily,
+      typography?.fontWeight,
+      typography?.lineHeight,
+      typography?.letterSpacing,
+      typography?.textTransform,
+      typography?.textDecoration,
+      typography?.textOverflow,
+      className
+    );
+    return /* @__PURE__ */ jsx6(
+      Tag,
+      {
+        className: classes,
+        style: { "--pb-theme-size": themeSize(typography), ...style },
+        ...props,
+        children
+      }
+    );
+  };
+  Heading.displayName = displayName;
+  return Heading;
+}
+
+// src/primitives/header4.tsx
+var Header4 = createHeading(
+  "Header4",
+  "h4",
+  "scroll-m-20 text-xl font-semibold tracking-normal",
+  (theme) => theme?.typography?.header4
+);
+
+// src/primitives/card.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var PageCard = ({
+  isLink,
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const cardStyles = theme?.interactives?.card;
+  const classes = cn(
+    // Base styles
+    "bg-card text-card-foreground",
+    // Theme interactivity
+    cardStyles?.border?.width,
+    cardStyles?.border?.radius,
+    cardStyles?.border?.style,
+    cardStyles?.shadow,
+    isLink ? "cursor-pointer" : "",
+    // User overrides
+    cardStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx7("div", { className: classes, ...props, children });
+};
+var PageCardImage = ({
+  src,
+  alt,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const classes = cn(
+    // Base styles
+    "w-full",
+    className
+  );
+  return /* @__PURE__ */ jsx7("img", { src, alt, className: classes, ...props });
+};
+var PageCardContent = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const cardStyles = theme?.interactives?.card;
+  const classes = cn(
+    // Base styles
+    "p-4",
+    // Theme interactivity
+    cardStyles?.padding?.x,
+    cardStyles?.padding?.y,
+    className
+  );
+  return /* @__PURE__ */ jsx7("div", { className: classes, ...props, children });
+};
+var PageCardHeader = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const classes = cn(
+    // Base styles
+    "pb-4",
+    className
+  );
+  return /* @__PURE__ */ jsx7("div", { className: classes, ...props, children: /* @__PURE__ */ jsx7(Header4, { theme, children }) });
+};
+
+// src/primitives/display.tsx
+var Display = createHeading(
+  "Display",
+  "h1",
+  "scroll-m-20 text-balance text-5xl font-bold tracking-tight",
+  (theme) => theme?.typography?.display ?? theme?.typography?.header1
+);
+
+// src/primitives/header1.tsx
+var Header1 = createHeading(
+  "Header1",
+  "h1",
+  "scroll-m-20 text-balance text-4xl font-bold tracking-tight",
+  (theme) => theme?.typography?.header1
+);
+
+// src/primitives/header2.tsx
+var Header2 = createHeading(
+  "Header2",
+  "h2",
+  "scroll-m-20 text-balance text-3xl font-bold tracking-tight",
+  (theme) => theme?.typography?.header2
+);
+
+// src/primitives/header3.tsx
+var Header3 = createHeading(
+  "Header3",
+  "h3",
+  "scroll-m-20 text-2xl font-semibold tracking-normal",
+  (theme) => theme?.typography?.header3
+);
+
+// src/primitives/image.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Image = ({
+  src,
+  alt = "",
+  className = "",
+  theme,
+  ...props
+}) => {
+  const cardStyles = theme?.interactives?.card;
+  const classes = cn("w-full object-cover", cardStyles?.border?.radius, className);
+  return /* @__PURE__ */ jsx8("img", { src, alt, className: classes, ...props });
+};
+
+// src/primitives/input.tsx
+import React3 from "react";
+
+// src/primitives/components/ui/input.tsx
+import * as React2 from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx9(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/primitives/input.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Input2 = React3.forwardRef(
+  ({
+    className = "",
+    theme,
+    error = false,
+    /*style = {},*/
+    ...props
+  }, ref) => {
+    const inputStyles = theme?.interactives?.input;
+    const typographyStyles = theme?.typography?.input;
+    const classes = cn(
+      // Base styles
+      // "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+      // Theme typography
+      typographyStyles?.fontFamily,
+      typographyStyles?.fontSize,
+      typographyStyles?.fontWeight,
+      typographyStyles?.lineHeight,
+      typographyStyles?.letterSpacing,
+      typographyStyles?.textTransform,
+      typographyStyles?.textDecoration,
+      typographyStyles?.textOverflow,
+      // Theme interactivity
+      inputStyles?.padding?.x,
+      inputStyles?.padding?.y,
+      inputStyles?.border?.width,
+      inputStyles?.border?.style,
+      inputStyles?.border?.radius,
+      // inputStyles?.border?.color,
+      inputStyles?.shadow,
+      // Theme disabled states
+      props.disabled && inputStyles?.disabled?.opacity,
+      props.disabled && inputStyles?.disabled?.cursor,
+      props.disabled && inputStyles?.disabled?.color,
+      props.disabled && inputStyles?.disabled?.background,
+      props.disabled && inputStyles?.disabled?.border,
+      // Error state
+      error && "border-red-300 focus:border-red-500 focus:ring-red-500",
+      // User overrides
+      inputStyles?.custom,
+      className
+    );
+    return /* @__PURE__ */ jsx10(Input, { ref, className: classes, ...props });
+  }
+);
+Input2.displayName = "Input";
+
+// src/primitives/label.tsx
+import React5 from "react";
+
+// src/primitives/components/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva as cva3 } from "class-variance-authority";
+import * as React4 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var labelVariants = cva3(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/primitives/label.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Label2 = React5.forwardRef(
+  ({ className = "", theme, error = false, ...props }, ref) => {
+    const typographyStyles = theme?.typography?.text2;
+    const classes = cn(
+      // Theme typography
+      typographyStyles?.fontFamily,
+      typographyStyles?.fontSize,
+      typographyStyles?.fontWeight,
+      typographyStyles?.lineHeight,
+      typographyStyles?.letterSpacing,
+      typographyStyles?.textTransform,
+      typographyStyles?.textDecoration,
+      typographyStyles?.textOverflow,
+      // Error state
+      error && "text-red-500",
+      className
+    );
+    return /* @__PURE__ */ jsx12(Label, { ref, className: classes, ...props });
+  }
+);
+Label2.displayName = "Label";
+
+// src/primitives/link.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Link = ({
+  children,
+  className = "",
+  theme,
+  disabled = false,
+  style,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.link;
+  const linkStyles = theme?.interactives?.link;
+  const classes = cn(
+    // Base styles
+    "font-medium cursor-pointer",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    // Theme interactivity
+    linkStyles?.padding?.x,
+    linkStyles?.padding?.y,
+    linkStyles?.border?.width,
+    linkStyles?.border?.radius,
+    linkStyles?.border?.style,
+    // Theme disabled states
+    disabled && linkStyles?.disabled?.color,
+    disabled && linkStyles?.disabled?.background,
+    disabled && linkStyles?.disabled?.border,
+    disabled && linkStyles?.disabled?.opacity,
+    disabled && linkStyles?.disabled?.cursor,
+    // User overrides
+    linkStyles?.custom,
+    className
+  );
+  return /* @__PURE__ */ jsx13(
+    "span",
+    {
+      className: classes,
+      style: {
+        ...style,
+        textShadow: linkStyles?.textShadow || void 0
+      },
+      ...props,
+      children
+    }
+  );
+};
+
+// src/primitives/preheader.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Preheader = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.preheader;
+  const classes = cn(
+    // Base styles
+    "text-sm font-medium uppercase tracking-wide",
+    // Theme typography
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return /* @__PURE__ */ jsx14("p", { className: classes, ...props, children });
+};
+
+// src/primitives/section.tsx
+import React6 from "react";
+
+// src/models/media.ts
+function getMediaUrl(media) {
+  if (!media) return null;
+  if (typeof media === "string") return media.trim() || null;
+  if (typeof media === "object") {
+    const obj = media;
+    const url = obj.url ?? obj.file ?? obj.src;
+    return typeof url === "string" && url.trim() ? url.trim() : null;
+  }
+  return null;
+}
+
+// src/primitives/section.tsx
+import { Fragment, jsx as jsx15, jsxs } from "react/jsx-runtime";
+function resolveBackgroundLayer(background) {
+  const attachment = background.backgroundAttachment || "scroll";
+  if (background.type === "color") {
+    return {
+      className: "[background-color:var(--pb-bg)] dark:[background-color:var(--pb-bg-dark,var(--pb-bg))]",
+      style: {
+        "--pb-bg": background.backgroundColor,
+        "--pb-bg-dark": background.backgroundColorDark
+      }
+    };
+  }
+  if (background.type === "image") {
+    const bgUrl = getMediaUrl(background.media);
+    return {
+      style: {
+        backgroundImage: bgUrl ? `url(${bgUrl})` : void 0,
+        backgroundSize: background.backgroundSize || "cover",
+        backgroundPosition: background.backgroundPosition || "center",
+        backgroundRepeat: background.backgroundRepeat || "no-repeat",
+        backgroundAttachment: attachment,
+        maskImage: background.maskImage,
+        WebkitMaskImage: background.maskImage
+      }
+    };
+  }
+  return {
+    className: "[background-image:var(--pb-bg-image)] dark:[background-image:var(--pb-bg-image-dark,var(--pb-bg-image))]",
+    style: {
+      "--pb-bg-image": background.backgroundImage,
+      "--pb-bg-image-dark": background.backgroundImageDark,
+      backgroundSize: background.gradientBackgroundSize || "cover",
+      backgroundPosition: background.gradientBackgroundPosition || "center",
+      backgroundRepeat: background.gradientBackgroundRepeat || "no-repeat",
+      backgroundAttachment: attachment,
+      maskImage: background.gradientMaskImage,
+      WebkitMaskImage: background.gradientMaskImage
+    }
+  };
+}
+var Section = ({
+  children,
+  className = "",
+  theme,
+  background,
+  component = "section",
+  ...props
+}) => {
+  const classes = cn(
+    "bg-background text-foreground relative",
+    component === "section" && theme?.structure?.section?.dividers && "border-t border-border",
+    className
+  );
+  const backgroundLayer = background ? resolveBackgroundLayer(background) : null;
+  const isFixed = background && background.type !== "color" && background.backgroundAttachment === "fixed";
+  return /* @__PURE__ */ jsx15(Fragment, { children: React6.createElement(
+    component,
+    {
+      // `overflow-clip` keeps a fixed-attachment layer painted
+      // only within the section bounds without creating a new
+      // scroll container (unlike overflow-hidden in some cases).
+      className: cn(classes, isFixed && "overflow-clip"),
+      ...props
+    },
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      backgroundLayer && /* @__PURE__ */ jsx15(
+        "div",
+        {
+          "aria-hidden": true,
+          className: cn(
+            "pointer-events-none absolute inset-0 z-0",
+            backgroundLayer.className
+          ),
+          style: backgroundLayer.style
+        }
+      ),
+      background && background.type === "image" && /* @__PURE__ */ jsx15(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 z-[1] [background-color:var(--pb-overlay)] dark:[background-color:var(--pb-overlay-dark,var(--pb-overlay))]",
+          style: {
+            "--pb-overlay": background?.overlay?.color,
+            "--pb-overlay-dark": background?.overlay?.colorDark,
+            opacity: background?.overlay?.opacity ? background.overlay.opacity / 10 : 0,
+            mixBlendMode: background?.overlay?.blendMode
+          }
+        }
+      ),
+      background && background.type === "image" && /* @__PURE__ */ jsx15(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "pointer-events-none absolute inset-0 z-[2]",
+          style: {
+            backdropFilter: background?.blur ? `blur(${background?.blur}px)` : void 0
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "div",
+        {
+          className: cn(
+            "mx-auto z-[3] relative overflow-hidden",
+            `lg:${theme?.structure?.page?.width || "max-w-6xl"}`,
+            theme?.structure?.section?.padding?.x || "px-4",
+            theme?.structure?.section?.padding?.y || "py-4"
+          ),
+          children
+        }
+      )
+    ] })
+  ) });
+};
+
+// src/primitives/subheader1.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Subheader1 = ({
+  children,
+  className = "",
+  theme,
+  component = "h5",
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.subheader1;
+  const classes = cn(
+    typographyStyles?.fontFamily || "font-sans",
+    typographyStyles?.fontSize || "text-lg",
+    typographyStyles?.fontWeight || "font-medium",
+    typographyStyles?.lineHeight || "leading-relaxed",
+    typographyStyles?.letterSpacing || "tracking-normal",
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return component === "h5" ? /* @__PURE__ */ jsx16("h5", { className: classes, ...props, children }) : /* @__PURE__ */ jsx16("span", { className: classes, ...props, children });
+};
+
+// src/primitives/subheader2.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var Subheader2 = ({
+  children,
+  className = "",
+  theme,
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.subheader2;
+  const classes = [
+    typographyStyles?.fontFamily || "font-sans",
+    typographyStyles?.fontSize || "text-base",
+    typographyStyles?.fontWeight || "font-medium",
+    typographyStyles?.lineHeight || "leading-relaxed",
+    typographyStyles?.letterSpacing || "tracking-normal",
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx17("h6", { className: classes, ...props, children });
+};
+
+// src/primitives/text1.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Text1 = ({
+  children,
+  className = "",
+  theme,
+  component = "p",
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.text1;
+  const classes = cn(
+    // Base styles
+    "text-base",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return component === "p" ? /* @__PURE__ */ jsx18("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx18("span", { className: classes, ...props, children });
+};
+
+// src/primitives/text2.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Text2 = ({
+  children,
+  className = "",
+  theme,
+  component = "p",
+  ...props
+}) => {
+  const typographyStyles = theme?.typography?.text2;
+  const classes = cn(
+    // Base styles
+    "text-sm",
+    // Theme overrides
+    typographyStyles?.fontFamily,
+    typographyStyles?.fontSize,
+    typographyStyles?.fontWeight,
+    typographyStyles?.lineHeight,
+    typographyStyles?.letterSpacing,
+    typographyStyles?.textTransform,
+    typographyStyles?.textDecoration,
+    typographyStyles?.textOverflow,
+    className
+  );
+  return component === "p" ? /* @__PURE__ */ jsx19("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx19("span", { className: classes, ...props, children });
+};
+
+// src/primitives/textarea.tsx
+import React7 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Textarea = React7.forwardRef(
+  ({ className = "", theme, error = false, ...props }, ref) => {
+    const inputStyles = theme?.interactives?.input;
+    const typographyStyles = theme?.typography?.input;
+    const classes = cn(
+      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50",
+      typographyStyles?.fontFamily,
+      typographyStyles?.fontSize,
+      typographyStyles?.fontWeight,
+      typographyStyles?.lineHeight,
+      typographyStyles?.letterSpacing,
+      inputStyles?.padding?.x,
+      inputStyles?.padding?.y,
+      inputStyles?.border?.width,
+      inputStyles?.border?.style,
+      inputStyles?.border?.radius,
+      inputStyles?.shadow,
+      props.disabled && inputStyles?.disabled?.opacity,
+      props.disabled && inputStyles?.disabled?.cursor,
+      error && "border-red-300 focus:border-red-500 focus:ring-red-500",
+      inputStyles?.custom,
+      className
+    );
+    return /* @__PURE__ */ jsx20("textarea", { ref, className: classes, ...props });
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  Badge2 as Badge,
+  Button2 as Button,
+  Caption,
+  Display,
+  Header1,
+  Header2,
+  Header3,
+  Header4,
+  Image,
+  Input2 as Input,
+  Label2 as Label,
+  Link,
+  PageCard,
+  PageCardContent,
+  PageCardHeader,
+  PageCardImage,
+  Preheader,
+  Section,
+  Subheader1,
+  Subheader2,
+  TAILWIND_TEXT_PX,
+  Text1,
+  Text2,
+  Textarea,
+  createHeading,
+  fluidFontSize
+};
+//# sourceMappingURL=primitives.js.map