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

package/dist/server/islands/marquee-track.js

@@ -0,0 +1,67 @@
+"use client";
+"use client";
+
+// src/blocks/marquee/marquee-track.tsx
+import { useEffect, useId, useRef, useState } from "react";
+
+// src/primitives/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/blocks/marquee/marquee-track.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function MarqueeTrack({
+  children,
+  speed,
+  direction,
+  pauseOnHover
+}) {
+  const containerRef = useRef(null);
+  const contentRef = useRef(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const animationName = `pb-marquee-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  useEffect(() => {
+    const measure = () => {
+      setContainerWidth(containerRef.current?.offsetWidth ?? 0);
+      setContentWidth(contentRef.current?.offsetWidth ?? 0);
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
+  }, [children, speed]);
+  const duration = contentWidth > 0 ? contentWidth / speed : 0;
+  const duplicatesNeeded = contentWidth > 0 ? Math.max(2, Math.ceil(containerWidth * 2 / contentWidth)) : 2;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "w-full overflow-hidden", children: [
+    contentWidth > 0 && /* @__PURE__ */ jsx("style", { children: `
+                    @keyframes ${animationName} {
+                        from { transform: translateX(0); }
+                        to { transform: translateX(-${contentWidth}px); }
+                    }
+                ` }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex w-max",
+          pauseOnHover && "hover:[animation-play-state:paused]"
+        ),
+        style: contentWidth > 0 ? {
+          animation: `${animationName} ${duration}s linear infinite`,
+          animationDirection: direction === "left" ? "reverse" : "normal"
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: contentRef, className: "inline-flex shrink-0", children }),
+          Array.from({ length: duplicatesNeeded }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "inline-flex shrink-0", "aria-hidden": true, children }, i))
+        ]
+      }
+    )
+  ] });
+}
+export {
+  MarqueeTrack
+};
+//# sourceMappingURL=marquee-track.js.map

package/dist/server/islands/marquee-track.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/blocks/marquee/marquee-track.tsx","../../../src/primitives/lib/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { cn } from \"../../primitives/lib/utils\";\n\n/**\n * Infinite horizontal scroller. Measures the width of one copy of the\n * content, then renders enough duplicate copies to always cover at least\n * twice the container's width, and animates a translateX loop across\n * exactly one content-width — because the duplicates repeat the same\n * sequence, the loop point is visually seamless regardless of how the\n * content width compares to the container width.\n */\nexport function MarqueeTrack({\n  children,\n  speed,\n  direction,\n  pauseOnHover,\n}: {\n  children: React.ReactNode;\n  speed: number;\n  direction: \"left\" | \"right\";\n  pauseOnHover?: boolean;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState(0);\n  const [contentWidth, setContentWidth] = useState(0);\n  const animationName = `pb-marquee-${useId().replace(/[^a-zA-Z0-9]/g, \"\")}`;\n\n  useEffect(() => {\n    const measure = () => {\n      setContainerWidth(containerRef.current?.offsetWidth ?? 0);\n      setContentWidth(contentRef.current?.offsetWidth ?? 0);\n    };\n    measure();\n    window.addEventListener(\"resize\", measure);\n    return () => window.removeEventListener(\"resize\", measure);\n  }, [children, speed]);\n\n  const duration = contentWidth > 0 ? contentWidth / speed : 0;\n  const duplicatesNeeded =\n    contentWidth > 0 ? Math.max(2, Math.ceil((containerWidth * 2) / contentWidth)) : 2;\n\n  return (\n    <div ref={containerRef} className=\"w-full overflow-hidden\">\n      {contentWidth > 0 && (\n        <style>{`\n                    @keyframes ${animationName} {\n                        from { transform: translateX(0); }\n                        to { transform: translateX(-${contentWidth}px); }\n                    }\n                `}</style>\n      )}\n      <div\n        className={cn(\n          \"inline-flex w-max\",\n          pauseOnHover && \"hover:[animation-play-state:paused]\",\n        )}\n        style={\n          contentWidth > 0\n            ? {\n                animation: `${animationName} ${duration}s linear infinite`,\n                animationDirection: direction === \"left\" ? \"reverse\" : \"normal\",\n              }\n            : undefined\n        }\n      >\n        <div ref={contentRef} className=\"inline-flex shrink-0\">\n          {children}\n        </div>\n        {Array.from({ length: duplicatesNeeded }).map((_, i) => (\n          <div key={i} className=\"inline-flex shrink-0\" aria-hidden>\n            {children}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;AAEA,SAAgB,WAAW,OAAO,QAAQ,gBAAgB;;;ACF1D,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AD0CQ,cAOF,YAPE;AAlCD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAClD,QAAM,gBAAgB,cAAc,MAAM,EAAE,QAAQ,iBAAiB,EAAE,CAAC;AAExE,YAAU,MAAM;AACd,UAAM,UAAU,MAAM;AACpB,wBAAkB,aAAa,SAAS,eAAe,CAAC;AACxD,sBAAgB,WAAW,SAAS,eAAe,CAAC;AAAA,IACtD;AACA,YAAQ;AACR,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM,OAAO,oBAAoB,UAAU,OAAO;AAAA,EAC3D,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,QAAM,WAAW,eAAe,IAAI,eAAe,QAAQ;AAC3D,QAAM,mBACJ,eAAe,IAAI,KAAK,IAAI,GAAG,KAAK,KAAM,iBAAiB,IAAK,YAAY,CAAC,IAAI;AAEnF,SACE,qBAAC,SAAI,KAAK,cAAc,WAAU,0BAC/B;AAAA,mBAAe,KACd,oBAAC,WAAO;AAAA,iCACiB,aAAa;AAAA;AAAA,sDAEQ,YAAY;AAAA;AAAA,mBAEhD;AAAA,IAEZ;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB;AAAA,QAClB;AAAA,QACA,OACE,eAAe,IACX;AAAA,UACE,WAAW,GAAG,aAAa,IAAI,QAAQ;AAAA,UACvC,oBAAoB,cAAc,SAAS,YAAY;AAAA,QACzD,IACA;AAAA,QAGN;AAAA,8BAAC,SAAI,KAAK,YAAY,WAAU,wBAC7B,UACH;AAAA,UACC,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,EAAE,IAAI,CAAC,GAAG,MAChD,oBAAC,SAAY,WAAU,wBAAuB,eAAW,MACtD,YADO,CAEV,CACD;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/server/islands/nav-link.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+interface PageBuilderLinkProps {
+    href: string;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+    target?: string;
+    rel?: string;
+}
+/**
+ * Optional host-supplied link. Next.js apps can pass `next/link`; Vite / Remix
+ * / plain React hosts can omit it and NavLink will render a native `<a>`.
+ */
+type PageBuilderLinkComponent = React.ComponentType<PageBuilderLinkProps>;
+declare function PageBuilderLinkProvider({ component, children, }: {
+    component?: PageBuilderLinkComponent | null;
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function usePageBuilderLinkComponent(): PageBuilderLinkComponent;
+interface NavLinkProps {
+    href: string;
+    children?: React.ReactNode;
+    openInSameTab?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+    onClick?: () => void;
+}
+/**
+ * A navigation-aware link used inside block widgets. In-page anchors scroll
+ * to the target. Internal paths (`/...`) use the host `linkComponent` when
+ * one is provided (e.g. Next.js `Link`); everything else is a native `<a>`.
+ */
+declare function NavLink({ href, children, openInSameTab, style, className, onClick, }: NavLinkProps): React.JSX.Element;
+
+export { NavLink, type PageBuilderLinkComponent, type PageBuilderLinkProps, PageBuilderLinkProvider, usePageBuilderLinkComponent };

package/dist/server/islands/nav-link.js

@@ -0,0 +1,67 @@
+"use client";
+"use client";
+
+// src/components/nav-link.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var LINK_CONTEXT_KEY = /* @__PURE__ */ Symbol.for("@frontlit/page-builder/link-context");
+var globalRegistry = globalThis;
+var PageBuilderLinkContext = globalRegistry[LINK_CONTEXT_KEY] ?? (globalRegistry[LINK_CONTEXT_KEY] = React.createContext(null));
+function PageBuilderLinkProvider({
+  component,
+  children
+}) {
+  return /* @__PURE__ */ jsx(PageBuilderLinkContext.Provider, { value: component ?? null, children });
+}
+function usePageBuilderLinkComponent() {
+  return React.useContext(PageBuilderLinkContext);
+}
+function NavLink({
+  href,
+  children,
+  openInSameTab = true,
+  style,
+  className = "",
+  onClick
+}) {
+  const LinkComponent = usePageBuilderLinkComponent();
+  const isInternal = Boolean(href && href.startsWith("/"));
+  const isInPageNavigation = Boolean(href && href.startsWith("#"));
+  const target = openInSameTab ? void 0 : "_blank";
+  const rel = target === "_blank" ? "noopener noreferrer" : void 0;
+  const handleClick = () => {
+    onClick?.();
+  };
+  if (!isInPageNavigation && isInternal && LinkComponent) {
+    return /* @__PURE__ */ jsx(
+      LinkComponent,
+      {
+        href,
+        style,
+        className,
+        onClick: handleClick,
+        target,
+        rel,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      style,
+      className,
+      target,
+      rel,
+      onClick: handleClick,
+      children
+    }
+  );
+}
+export {
+  NavLink,
+  PageBuilderLinkProvider,
+  usePageBuilderLinkComponent
+};
+//# sourceMappingURL=nav-link.js.map

package/dist/server/islands/nav-link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/nav-link.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nexport interface PageBuilderLinkProps {\n  href: string;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n  target?: string;\n  rel?: string;\n}\n\n/**\n * Optional host-supplied link. Next.js apps can pass `next/link`; Vite / Remix\n * / plain React hosts can omit it and NavLink will render a native `<a>`.\n */\nexport type PageBuilderLinkComponent = React.ComponentType<PageBuilderLinkProps>;\n\n// Server-rendered pages load this module more than once (each client island is\n// bundled on its own), so the context is shared through the global registry\n// rather than created per copy. Otherwise a provider from one copy would be\n// invisible to a NavLink from another.\nconst LINK_CONTEXT_KEY = Symbol.for(\"@frontlit/page-builder/link-context\");\nconst globalRegistry = globalThis as typeof globalThis & {\n  [LINK_CONTEXT_KEY]?: React.Context<PageBuilderLinkComponent | null>;\n};\nconst PageBuilderLinkContext = (globalRegistry[LINK_CONTEXT_KEY] ??=\n  React.createContext<PageBuilderLinkComponent | null>(null));\n\nexport function PageBuilderLinkProvider({\n  component,\n  children,\n}: {\n  component?: PageBuilderLinkComponent | null;\n  children: React.ReactNode;\n}) {\n  return (\n    <PageBuilderLinkContext.Provider value={component ?? null}>\n      {children}\n    </PageBuilderLinkContext.Provider>\n  );\n}\n\nexport function usePageBuilderLinkComponent() {\n  return React.useContext(PageBuilderLinkContext);\n}\n\ninterface NavLinkProps {\n  href: string;\n  children?: React.ReactNode;\n  openInSameTab?: boolean;\n  style?: React.CSSProperties;\n  className?: string;\n  onClick?: () => void;\n}\n\n/**\n * A navigation-aware link used inside block widgets. In-page anchors scroll\n * to the target. Internal paths (`/...`) use the host `linkComponent` when\n * one is provided (e.g. Next.js `Link`); everything else is a native `<a>`.\n */\nexport function NavLink({\n  href,\n  children,\n  openInSameTab = true,\n  style,\n  className = \"\",\n  onClick,\n}: NavLinkProps) {\n  const LinkComponent = usePageBuilderLinkComponent();\n  const isInternal = Boolean(href && href.startsWith(\"/\"));\n  const isInPageNavigation = Boolean(href && href.startsWith(\"#\"));\n  const target = openInSameTab ? undefined : \"_blank\";\n  const rel = target === \"_blank\" ? \"noopener noreferrer\" : undefined;\n  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = () => {\n    onClick?.();\n  };\n\n  if (!isInPageNavigation && isInternal && LinkComponent) {\n    return (\n      <LinkComponent\n        href={href}\n        style={style}\n        className={className}\n        onClick={handleClick}\n        target={target}\n        rel={rel}\n      >\n        {children}\n      </LinkComponent>\n    );\n  }\n\n  return (\n    <a\n      href={href}\n      style={style}\n      className={className}\n      target={target}\n      rel={rel}\n      onClick={handleClick}\n    >\n      {children}\n    </a>\n  );\n}\n"],"mappings":";;;;AAEA,YAAY,WAAW;AAqCnB;AAfJ,IAAM,mBAAmB,uBAAO,IAAI,qCAAqC;AACzE,IAAM,iBAAiB;AAGvB,IAAM,yBAA0B,wEACxB,oBAA+C,IAAI;AAEpD,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AACF,GAGG;AACD,SACE,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,aAAa,MAClD,UACH;AAEJ;AAEO,SAAS,8BAA8B;AAC5C,SAAa,iBAAW,sBAAsB;AAChD;AAgBO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAiB;AACf,QAAM,gBAAgB,4BAA4B;AAClD,QAAM,aAAa,QAAQ,QAAQ,KAAK,WAAW,GAAG,CAAC;AACvD,QAAM,qBAAqB,QAAQ,QAAQ,KAAK,WAAW,GAAG,CAAC;AAC/D,QAAM,SAAS,gBAAgB,SAAY;AAC3C,QAAM,MAAM,WAAW,WAAW,wBAAwB;AAC1D,QAAM,cAA0D,MAAM;AACpE,cAAU;AAAA,EACZ;AAEA,MAAI,CAAC,sBAAsB,cAAc,eAAe;AACtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MAER;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/server/islands/support-form.d.ts

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import { T as ThemeStyle } from '../theme-style-5_AGy-4V.js';
+import { P as PageData } from '../widget-YH9BrOwY.js';
+
+/**
+ * The interactive part of the support-form block: the ticket form and its
+ * success message. The block's heading stays server-rendered around it.
+ */
+declare function SupportForm({ theme: overriddenTheme, buttonCaption, successMessage, pageData, editing, }: {
+    theme: ThemeStyle;
+    buttonCaption: string;
+    successMessage: string;
+    pageData: PageData;
+    editing?: boolean;
+}): React__default.JSX.Element;
+
+export { SupportForm };

package/dist/server/islands/support-form.js

@@ -0,0 +1,469 @@
+"use client";
+"use client";
+
+// src/blocks/support-form/form.tsx
+import { useEffect, useRef, useState } from "react";
+
+// 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/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var buttonVariants = cva(
+  "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__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/primitives/button.tsx
+import { jsx as jsx2 } 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__ */ jsx2(
+    Button,
+    {
+      variant,
+      size,
+      disabled,
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+
+// src/primitives/input.tsx
+import React3 from "react";
+
+// src/primitives/components/ui/input.tsx
+import * as React2 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Input = React2.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "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 jsx4 } 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__ */ jsx4(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 cva2 } from "class-variance-authority";
+import * as React4 from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var labelVariants = cva2(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/primitives/label.tsx
+import { jsx as jsx6 } 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__ */ jsx6(Label, { ref, className: classes, ...props });
+  }
+);
+Label2.displayName = "Label";
+
+// src/primitives/text2.tsx
+import { jsx as jsx7 } 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__ */ jsx7("p", { className: classes, ...props, children }) : /* @__PURE__ */ jsx7("span", { className: classes, ...props, children });
+};
+
+// src/blocks/support-form/form.tsx
+import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+function suggestionHref(item) {
+  if (item.kind === "blog") return `/blog/${item.slug}`;
+  if (item.kind === "changelog") return `/changelog`;
+  return `/docs/${item.slug}`;
+}
+async function searchDocumentation(query, pageData) {
+  if (!pageData.teamId || !pageData.publicApiBaseUrl || query.trim().length < 3)
+    return [];
+  try {
+    const res = await fetch(
+      `${pageData.publicApiBaseUrl}/public/${pageData.teamId}/content/documentation/search?q=${encodeURIComponent(query)}&k=3`
+    );
+    if (!res.ok) return [];
+    const body = await res.json();
+    const seen = /* @__PURE__ */ new Set();
+    return body.items.filter(
+      (item) => seen.has(item.documentId) ? false : (seen.add(item.documentId), true)
+    );
+  } catch {
+    return [];
+  }
+}
+async function submitTicket(input, pageData) {
+  if (!pageData.teamId || !pageData.publicApiBaseUrl) {
+    await new Promise((resolve) => setTimeout(resolve, 600));
+    return { success: true };
+  }
+  try {
+    const res = await fetch(
+      `${pageData.publicApiBaseUrl}/public/${pageData.teamId}/tickets`,
+      {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ ...input, source: "form" })
+      }
+    );
+    return { success: res.ok };
+  } catch {
+    return { success: false };
+  }
+}
+function SupportForm({
+  theme: overriddenTheme,
+  buttonCaption,
+  successMessage,
+  pageData,
+  editing
+}) {
+  const [subject, setSubject] = useState("");
+  const [message, setMessage] = useState("");
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+  const [suggestions, setSuggestions] = useState([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const debounceRef = useRef(null);
+  useEffect(() => {
+    if (editing) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      searchDocumentation(subject, pageData).then(setSuggestions);
+    }, 400);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [subject]);
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    if (editing) return;
+    setIsSubmitting(true);
+    try {
+      const result = await submitTicket(
+        { subject, message, email, name: name || void 0 },
+        pageData
+      );
+      if (result.success) {
+        setSuccess(true);
+        setSubject("");
+        setMessage("");
+        setEmail("");
+        setName("");
+        setSuggestions([]);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const inputStyles = overriddenTheme.interactives.input;
+  const inputTypography = overriddenTheme.typography.input;
+  const cardStyles = overriddenTheme.interactives.card;
+  return success ? /* @__PURE__ */ jsx8(Text2, { theme: overriddenTheme, className: "mt-4", children: successMessage }) : /* @__PURE__ */ jsxs("form", { onSubmit, className: "mt-4 flex w-full max-w-lg flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 items-start", children: [
+      /* @__PURE__ */ jsx8(Label2, { theme: overriddenTheme, htmlFor: "subject", children: "Subject" }),
+      /* @__PURE__ */ jsx8(
+        Input2,
+        {
+          theme: overriddenTheme,
+          id: "subject",
+          value: subject,
+          onChange: (e) => setSubject(e.target.value),
+          placeholder: "What do you need help with?",
+          required: true,
+          className: "w-full"
+        }
+      )
+    ] }),
+    suggestions.length > 0 && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-lg border border-border bg-card p-3 text-sm text-card-foreground shadow-sm",
+          cardStyles.border?.width,
+          cardStyles.border?.radius,
+          cardStyles.border?.style,
+          cardStyles.shadow
+        ),
+        children: [
+          /* @__PURE__ */ jsx8("p", { className: "mb-1 font-medium", children: "This might help:" }),
+          /* @__PURE__ */ jsx8("ul", { className: "list-inside list-disc", children: suggestions.map((doc) => /* @__PURE__ */ jsx8("li", { children: /* @__PURE__ */ jsx8(
+            "a",
+            {
+              href: suggestionHref(doc),
+              target: "_blank",
+              rel: "noreferrer",
+              className: "underline",
+              children: doc.title ?? doc.slug
+            }
+          ) }, doc.documentId)) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 items-start", children: [
+      /* @__PURE__ */ jsx8(Label2, { theme: overriddenTheme, htmlFor: "message", children: "Message" }),
+      /* @__PURE__ */ jsx8(
+        "textarea",
+        {
+          id: "message",
+          value: message,
+          onChange: (e) => setMessage(e.target.value),
+          placeholder: "Describe the issue\u2026",
+          required: true,
+          rows: 4,
+          className: cn(
+            "w-full border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            inputTypography.fontFamily,
+            inputTypography.fontSize,
+            inputTypography.fontWeight,
+            inputTypography.lineHeight,
+            inputTypography.letterSpacing,
+            inputStyles.border?.width,
+            inputStyles.border?.style,
+            inputStyles.border?.radius,
+            inputStyles.shadow,
+            inputStyles.custom
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:!flex-row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1 items-start", children: [
+        /* @__PURE__ */ jsx8(Label2, { theme: overriddenTheme, htmlFor: "email", children: "Email" }),
+        /* @__PURE__ */ jsx8(
+          Input2,
+          {
+            theme: overriddenTheme,
+            id: "email",
+            type: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "you@example.com",
+            required: true,
+            className: "w-full"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-1 items-start", children: [
+        /* @__PURE__ */ jsx8(Label2, { theme: overriddenTheme, htmlFor: "name", children: "Name (optional)" }),
+        /* @__PURE__ */ jsx8(
+          Input2,
+          {
+            theme: overriddenTheme,
+            id: "name",
+            value: name,
+            onChange: (e) => setName(e.target.value),
+            placeholder: "Your name",
+            className: "w-full"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8(
+      Button2,
+      {
+        theme: overriddenTheme,
+        type: "submit",
+        disabled: !editing && (isSubmitting || !subject || !message || !email),
+        className: "self-start",
+        children: buttonCaption
+      }
+    )
+  ] });
+}
+export {
+  SupportForm
+};
+//# sourceMappingURL=support-form.js.map