@frontlit/page-builder 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/server/primitives.js

@@ -351,6 +351,73 @@ var PageCardHeader = ({
   return /* @__PURE__ */ jsx7("div", { className: classes, ...props, children: /* @__PURE__ */ jsx7(Header4, { theme, children }) });
 };
 
+// src/server/primitives.ts
+export * from "./islands/code-snippet.js";
+
+// src/primitives/collapsible.tsx
+import { ChevronRight } from "lucide-react";
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+function Collapsible({
+  summary,
+  children,
+  defaultOpen,
+  variant = "bordered",
+  id,
+  theme,
+  className
+}) {
+  const card = theme?.interactives?.card;
+  const typography = theme?.typography?.text2;
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      id,
+      open: defaultOpen,
+      className: cn(
+        "group min-w-0",
+        variant === "bordered" && [
+          "border border-border bg-card text-card-foreground",
+          card?.border?.radius ?? "rounded-md"
+        ],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "summary",
+          {
+            className: cn(
+              "flex cursor-pointer list-none items-center gap-2 text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&::-webkit-details-marker]:hidden",
+              variant === "bordered" ? "px-3 py-2" : "py-1",
+              typography?.fontFamily,
+              typography?.fontSize ?? "text-sm",
+              typography?.letterSpacing
+            ),
+            children: [
+              /* @__PURE__ */ jsx8(
+                ChevronRight,
+                {
+                  "aria-hidden": "true",
+                  className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-open:rotate-90"
+                }
+              ),
+              /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1", children: summary })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: cn(
+              variant === "bordered" ? "border-t border-border p-3" : "pl-6 pt-1"
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/primitives/display.tsx
 var Display = createHeading(
   "Display",
@@ -383,29 +450,81 @@ var Header3 = createHeading(
   (theme) => theme?.typography?.header3
 );
 
+// src/components/image.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var registry = globalThis;
+function resolveImageAttributes(input) {
+  return registry.__frontlitImageResolver?.(input) ?? null;
+}
+
 // src/primitives/image.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Image = ({
   src,
   alt = "",
   className = "",
   theme,
+  priority = false,
+  sizes,
   ...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 });
+  const optimized = resolveImageAttributes({ src, alt, sizes, priority });
+  return /* @__PURE__ */ jsx10(
+    "img",
+    {
+      src,
+      alt,
+      sizes,
+      loading: priority ? "eager" : "lazy",
+      decoding: "async",
+      fetchPriority: priority ? "high" : void 0,
+      className: classes,
+      ...props,
+      ...optimized
+    }
+  );
 };
 
+// src/primitives/inline-code.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+function InlineCode({
+  children,
+  theme,
+  variant = "default",
+  className,
+  ...props
+}) {
+  const typography = theme?.typography?.code;
+  return /* @__PURE__ */ jsx11(
+    "code",
+    {
+      className: cn(
+        // Code is literal: never inherit a theme's uppercase captions.
+        "break-words normal-case",
+        typography?.fontFamily ?? "font-jetbrains-mono",
+        // Relative to the surrounding text; the theme's code size is for blocks.
+        "text-[0.875em]",
+        typography?.letterSpacing,
+        variant === "default" ? "rounded bg-muted px-1 py-0.5 text-foreground" : "text-muted-foreground",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
 // 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";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var Input = React2.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx12(
       "input",
       {
         type,
@@ -422,7 +541,7 @@ var Input = React2.forwardRef(
 Input.displayName = "Input";
 
 // src/primitives/input.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var Input2 = React3.forwardRef(
   ({
     className = "",
@@ -465,7 +584,7 @@ var Input2 = React3.forwardRef(
       inputStyles?.custom,
       className
     );
-    return /* @__PURE__ */ jsx10(Input, { ref, className: classes, ...props });
+    return /* @__PURE__ */ jsx13(Input, { ref, className: classes, ...props });
   }
 );
 Input2.displayName = "Input";
@@ -477,11 +596,11 @@ import React5 from "react";
 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";
+import { jsx as jsx14 } 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(
+var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   LabelPrimitive.Root,
   {
     ref,
@@ -492,7 +611,7 @@ var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/primitives/label.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Label2 = React5.forwardRef(
   ({ className = "", theme, error = false, ...props }, ref) => {
     const typographyStyles = theme?.typography?.text2;
@@ -510,13 +629,13 @@ var Label2 = React5.forwardRef(
       error && "text-red-500",
       className
     );
-    return /* @__PURE__ */ jsx12(Label, { ref, className: classes, ...props });
+    return /* @__PURE__ */ jsx15(Label, { ref, className: classes, ...props });
   }
 );
 Label2.displayName = "Label";
 
 // src/primitives/link.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Link = ({
   children,
   className = "",
@@ -555,7 +674,7 @@ var Link = ({
     linkStyles?.custom,
     className
   );
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       className: classes,
@@ -569,8 +688,42 @@ var Link = ({
   );
 };
 
+// src/primitives/native-select.tsx
+import React6 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var NativeSelect = React6.forwardRef(
+  ({ className, theme, children, ...props }, ref) => {
+    const input = theme?.interactives?.input;
+    const typography = theme?.typography?.input;
+    return /* @__PURE__ */ jsx17(
+      "select",
+      {
+        ref,
+        className: cn(
+          "flex min-h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base leading-normal text-foreground ring-offset-background 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",
+          typography?.fontFamily,
+          typography?.fontSize,
+          typography?.fontWeight,
+          typography?.letterSpacing,
+          input?.padding?.x,
+          input?.padding?.y,
+          input?.border?.width,
+          input?.border?.style,
+          input?.border?.radius,
+          input?.shadow,
+          input?.custom,
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+NativeSelect.displayName = "NativeSelect";
+
 // src/primitives/preheader.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var Preheader = ({
   children,
   className = "",
@@ -592,11 +745,11 @@ var Preheader = ({
     typographyStyles?.textOverflow,
     className
   );
-  return /* @__PURE__ */ jsx14("p", { className: classes, ...props, children });
+  return /* @__PURE__ */ jsx18("p", { className: classes, ...props, children });
 };
 
 // src/primitives/section.tsx
-import React6 from "react";
+import React7 from "react";
 
 // src/models/media.ts
 function getMediaUrl(media) {
@@ -611,7 +764,7 @@ function getMediaUrl(media) {
 }
 
 // src/primitives/section.tsx
-import { Fragment, jsx as jsx15, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx19, jsxs as jsxs2 } from "react/jsx-runtime";
 function resolveBackgroundLayer(background) {
   const attachment = background.backgroundAttachment || "scroll";
   if (background.type === "color") {
@@ -666,7 +819,7 @@ var Section = ({
   );
   const backgroundLayer = background ? resolveBackgroundLayer(background) : null;
   const isFixed = background && background.type !== "color" && background.backgroundAttachment === "fixed";
-  return /* @__PURE__ */ jsx15(Fragment, { children: React6.createElement(
+  return /* @__PURE__ */ jsx19(Fragment, { children: React7.createElement(
     component,
     {
       // `overflow-clip` keeps a fixed-attachment layer painted
@@ -675,8 +828,8 @@ var Section = ({
       className: cn(classes, isFixed && "overflow-clip"),
       ...props
     },
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      backgroundLayer && /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
+      backgroundLayer && /* @__PURE__ */ jsx19(
         "div",
         {
           "aria-hidden": true,
@@ -687,7 +840,7 @@ var Section = ({
           style: backgroundLayer.style
         }
       ),
-      background && background.type === "image" && /* @__PURE__ */ jsx15(
+      background && background.type === "image" && /* @__PURE__ */ jsx19(
         "div",
         {
           "aria-hidden": true,
@@ -700,7 +853,7 @@ var Section = ({
           }
         }
       ),
-      background && background.type === "image" && /* @__PURE__ */ jsx15(
+      background && background.type === "image" && /* @__PURE__ */ jsx19(
         "div",
         {
           "aria-hidden": true,
@@ -710,11 +863,13 @@ var Section = ({
           }
         }
       ),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx19(
         "div",
         {
           className: cn(
-            "mx-auto z-[3] relative overflow-hidden",
+            // Clips like overflow-hidden without becoming a scroll
+            // container, so sticky children (docs sidebars) still stick.
+            "mx-auto z-[3] relative overflow-clip",
             `lg:${theme?.structure?.page?.width || "max-w-6xl"}`,
             theme?.structure?.section?.padding?.x || "px-4",
             theme?.structure?.section?.padding?.y || "py-4"
@@ -727,7 +882,7 @@ var Section = ({
 };
 
 // src/primitives/subheader1.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var Subheader1 = ({
   children,
   className = "",
@@ -747,11 +902,11 @@ var Subheader1 = ({
     typographyStyles?.textOverflow,
     className
   );
-  return component === "h5" ? /* @__PURE__ */ jsx16("h5", { className: classes, ...props, children }) : /* @__PURE__ */ jsx16("span", { className: classes, ...props, children });
+  return component === "h5" ? /* @__PURE__ */ jsx20("h5", { className: classes, ...props, children }) : /* @__PURE__ */ jsx20("span", { className: classes, ...props, children });
 };
 
 // src/primitives/subheader2.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Subheader2 = ({
   children,
   className = "",
@@ -770,11 +925,70 @@ var Subheader2 = ({
     typographyStyles?.textOverflow,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx17("h6", { className: classes, ...props, children });
+  return /* @__PURE__ */ jsx21("h6", { className: classes, ...props, children });
 };
 
+// src/primitives/table.tsx
+import { jsx as jsx22, jsxs as jsxs3 } from "react/jsx-runtime";
+function Table({ columns, rows, theme, className }) {
+  const typography = theme?.typography?.text2;
+  const card = theme?.interactives?.card;
+  const text = cn(
+    typography?.fontFamily,
+    typography?.fontSize ?? "text-sm",
+    typography?.lineHeight,
+    typography?.letterSpacing
+  );
+  return /* @__PURE__ */ jsx22(
+    "div",
+    {
+      className: cn(
+        "w-full min-w-0 overflow-hidden border border-border",
+        card?.border?.radius ?? "rounded-md",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs3("table", { className: cn("block w-full border-collapse md:table", text), children: [
+        /* @__PURE__ */ jsx22("thead", { className: "hidden md:table-header-group", children: /* @__PURE__ */ jsx22("tr", { className: "border-b border-border bg-muted/50", children: columns.map((column) => /* @__PURE__ */ jsx22(
+          "th",
+          {
+            scope: "col",
+            className: cn(
+              "px-3 py-2 text-left font-medium text-muted-foreground",
+              column.className
+            ),
+            children: column.label
+          },
+          column.key
+        )) }) }),
+        /* @__PURE__ */ jsx22("tbody", { className: "block md:table-row-group", children: rows.map((row, index) => /* @__PURE__ */ jsx22(
+          "tr",
+          {
+            className: "block border-b border-border px-3 py-2 last:border-b-0 md:table-row md:p-0",
+            children: columns.map((column) => /* @__PURE__ */ jsx22(
+              "td",
+              {
+                "data-label": column.label,
+                className: cn(
+                  "block min-w-0 break-words py-1 align-top text-foreground before:mr-2 before:text-muted-foreground before:content-[attr(data-label)':'] md:table-cell md:px-3 md:py-2 md:before:content-none",
+                  column.className
+                ),
+                children: row[column.key]
+              },
+              column.key
+            ))
+          },
+          index
+        )) })
+      ] })
+    }
+  );
+}
+
+// src/server/primitives.ts
+export * from "./islands/tabs.js";
+
 // src/primitives/text1.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Text1 = ({
   children,
   className = "",
@@ -797,11 +1011,11 @@ var Text1 = ({
     typographyStyles?.textOverflow,
     className
   );
-  return component === "p" ? /* @__PURE__ */ jsx18("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx18("span", { className: classes, ...props, children });
+  return component === "p" ? /* @__PURE__ */ jsx23("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx23("span", { className: classes, ...props, children });
 };
 
 // src/primitives/text2.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Text2 = ({
   children,
   className = "",
@@ -824,13 +1038,13 @@ var Text2 = ({
     typographyStyles?.textOverflow,
     className
   );
-  return component === "p" ? /* @__PURE__ */ jsx19("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx19("span", { className: classes, ...props, children });
+  return component === "p" ? /* @__PURE__ */ jsx24("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx24("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(
+import React8 from "react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var Textarea = React8.forwardRef(
   ({ className = "", theme, error = false, ...props }, ref) => {
     const inputStyles = theme?.interactives?.input;
     const typographyStyles = theme?.typography?.input;
@@ -853,7 +1067,7 @@ var Textarea = React7.forwardRef(
       inputStyles?.custom,
       className
     );
-    return /* @__PURE__ */ jsx20("textarea", { ref, className: classes, ...props });
+    return /* @__PURE__ */ jsx25("textarea", { ref, className: classes, ...props });
   }
 );
 Textarea.displayName = "Textarea";
@@ -861,15 +1075,18 @@ export {
   Badge2 as Badge,
   Button2 as Button,
   Caption,
+  Collapsible,
   Display,
   Header1,
   Header2,
   Header3,
   Header4,
   Image,
+  InlineCode,
   Input2 as Input,
   Label2 as Label,
   Link,
+  NativeSelect,
   PageCard,
   PageCardContent,
   PageCardHeader,
@@ -879,6 +1096,7 @@ export {
   Subheader1,
   Subheader2,
   TAILWIND_TEXT_PX,
+  Table,
   Text1,
   Text2,
   Textarea,