@frontlit/page-builder 0.1.0-alpha.5 → 0.1.0-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blocks/index.d.ts +1 -1
- package/dist/blocks/index.js +3 -3
- package/dist/builder/index.js +6 -6
- package/dist/{chunk-LMCEOWQG.js → chunk-HEKBPKGS.js} +6 -6
- package/dist/{chunk-LMCEOWQG.js.map → chunk-HEKBPKGS.js.map} +1 -1
- package/dist/{chunk-USPQ3AOW.js → chunk-I2LRKHSL.js} +6 -6
- package/dist/{chunk-USPQ3AOW.js.map → chunk-I2LRKHSL.js.map} +1 -1
- package/dist/{chunk-J7Z4UW45.js → chunk-KRQWGGAJ.js} +353 -8
- package/dist/chunk-KRQWGGAJ.js.map +1 -0
- package/dist/{chunk-BBI7UHOA.js → chunk-LL6CG6KH.js} +3 -3
- package/dist/{chunk-BBI7UHOA.js.map → chunk-LL6CG6KH.js.map} +1 -1
- package/dist/{chunk-36QHCIPM.js → chunk-QMUIISN3.js} +5 -93
- package/dist/chunk-QMUIISN3.js.map +1 -0
- package/dist/{chunk-5J6TLS5U.js → chunk-XQE4RVNO.js} +5 -5
- package/dist/chunk-XQE4RVNO.js.map +1 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.js +3 -3
- package/dist/{image-Bk8kPXwP.d.ts → image-Cv0aSUHD.d.ts} +3 -1
- package/dist/index.js +6 -6
- package/dist/primitives/index.d.ts +70 -1
- package/dist/primitives/index.js +1 -1
- package/dist/renderer/index.js +5 -5
- package/dist/server/index.js +10 -5
- package/dist/server/index.js.map +1 -1
- package/dist/server/islands/code-snippet.js +1 -1
- package/dist/server/islands/code-snippet.js.map +1 -1
- package/dist/server/islands/header-mobile-menu.js +1 -1
- package/dist/server/islands/header-mobile-menu.js.map +1 -1
- package/dist/server/islands/tabs.d.ts +23 -0
- package/dist/server/islands/tabs.js +86 -0
- package/dist/server/islands/tabs.js.map +1 -0
- package/dist/server/primitives.d.ts +83 -1
- package/dist/server/primitives.js +253 -35
- package/dist/server/primitives.js.map +1 -1
- package/dist/styles.css +78 -0
- package/package.json +1 -1
- package/dist/chunk-36QHCIPM.js.map +0 -1
- package/dist/chunk-5J6TLS5U.js.map +0 -1
- package/dist/chunk-J7Z4UW45.js.map +0 -1
|
@@ -36,7 +36,7 @@ function CodeSnippet({ code, prompt, theme, className }) {
|
|
|
36
36
|
"pre",
|
|
37
37
|
{
|
|
38
38
|
className: cn(
|
|
39
|
-
"min-w-0 flex-1 overflow-x-auto whitespace-pre px-4 py-3 text-left",
|
|
39
|
+
"min-w-0 flex-1 overflow-x-auto whitespace-pre px-4 py-3 text-left [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]",
|
|
40
40
|
typography?.fontFamily ?? "font-jetbrains-mono",
|
|
41
41
|
typography?.fontSize ?? "text-sm",
|
|
42
42
|
typography?.fontWeight,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/primitives/code-snippet.tsx","../../../src/primitives/lib/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { Check, Copy } from \"lucide-react\";\nimport type { ThemeStyle } from \"../models\";\nimport { cn } from \"./lib/utils\";\n\nexport interface CodeSnippetProps {\n code: string;\n /** Prefix shown before the first line, e.g. \"$\". Not copied. */\n prompt?: string;\n theme?: ThemeStyle;\n className?: string;\n}\n\n/**\n * A command or short code sample in a bordered monospace box with a copy\n * button — the `curl … | sh` install box of developer-tool landing pages.\n */\nexport function CodeSnippet({ code, prompt, theme, className }: CodeSnippetProps) {\n const [copied, setCopied] = React.useState(false);\n const typography = theme?.typography?.code;\n const card = theme?.interactives?.card;\n\n React.useEffect(() => {\n if (!copied) return;\n const timeout = setTimeout(() => setCopied(false), 2000);\n return () => clearTimeout(timeout);\n }, [copied]);\n\n return (\n <div\n className={cn(\n \"flex w-full min-w-0 items-start gap-3 border border-border bg-card text-card-foreground\",\n card?.border?.radius ?? \"rounded-md\",\n className,\n )}\n >\n <pre\n className={cn(\n \"min-w-0 flex-1 overflow-x-auto whitespace-pre px-4 py-3 text-left\",\n typography?.fontFamily ?? \"font-jetbrains-mono\",\n typography?.fontSize ?? \"text-sm\",\n typography?.fontWeight,\n typography?.lineHeight ?? \"leading-relaxed\",\n typography?.letterSpacing,\n )}\n >\n {prompt && (\n <span className=\"mr-2 select-none text-muted-foreground\" aria-hidden=\"true\">\n {prompt}\n </span>\n )}\n <code>{code}</code>\n </pre>\n <button\n type=\"button\"\n aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n title={copied ? \"Copied\" : \"Copy\"}\n className=\"m-1.5 inline-flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n onClick={() => {\n void navigator.clipboard?.writeText(code).then(() => setCopied(true));\n }}\n >\n {copied ? (\n <Check className=\"h-4 w-4\" aria-hidden=\"true\" />\n ) : (\n <Copy className=\"h-4 w-4\" aria-hidden=\"true\" />\n )}\n </button>\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,OAAO,WAAW;AAClB,SAAS,OAAO,YAAY;;;ACH5B,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADiCM,SAWI,KAXJ;AAnBC,SAAS,YAAY,EAAE,MAAM,QAAQ,OAAO,UAAU,GAAqB;AAChF,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAChD,QAAM,aAAa,OAAO,YAAY;AACtC,QAAM,OAAO,OAAO,cAAc;AAElC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,UAAU,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACvD,WAAO,MAAM,aAAa,OAAO;AAAA,EACnC,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,MAAM,QAAQ,UAAU;AAAA,QACxB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,YAAY,cAAc;AAAA,cAC1B,YAAY,YAAY;AAAA,cACxB,YAAY;AAAA,cACZ,YAAY,cAAc;AAAA,cAC1B,YAAY;AAAA,YACd;AAAA,YAEC;AAAA,wBACC,oBAAC,UAAK,WAAU,0CAAyC,eAAY,QAClE,kBACH;AAAA,cAEF,oBAAC,UAAM,gBAAK;AAAA;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,SAAS,WAAW;AAAA,YAChC,OAAO,SAAS,WAAW;AAAA,YAC3B,WAAU;AAAA,YACV,SAAS,MAAM;AACb,mBAAK,UAAU,WAAW,UAAU,IAAI,EAAE,KAAK,MAAM,UAAU,IAAI,CAAC;AAAA,YACtE;AAAA,YAEC,mBACC,oBAAC,SAAM,WAAU,WAAU,eAAY,QAAO,IAE9C,oBAAC,QAAK,WAAU,WAAU,eAAY,QAAO;AAAA;AAAA,QAEjD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/primitives/code-snippet.tsx","../../../src/primitives/lib/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { Check, Copy } from \"lucide-react\";\nimport type { ThemeStyle } from \"../models\";\nimport { cn } from \"./lib/utils\";\n\nexport interface CodeSnippetProps {\n code: string;\n /** Prefix shown before the first line, e.g. \"$\". Not copied. */\n prompt?: string;\n theme?: ThemeStyle;\n className?: string;\n}\n\n/**\n * A command or short code sample in a bordered monospace box with a copy\n * button — the `curl … | sh` install box of developer-tool landing pages.\n */\nexport function CodeSnippet({ code, prompt, theme, className }: CodeSnippetProps) {\n const [copied, setCopied] = React.useState(false);\n const typography = theme?.typography?.code;\n const card = theme?.interactives?.card;\n\n React.useEffect(() => {\n if (!copied) return;\n const timeout = setTimeout(() => setCopied(false), 2000);\n return () => clearTimeout(timeout);\n }, [copied]);\n\n return (\n <div\n className={cn(\n \"flex w-full min-w-0 items-start gap-3 border border-border bg-card text-card-foreground\",\n card?.border?.radius ?? \"rounded-md\",\n className,\n )}\n >\n <pre\n className={cn(\n \"min-w-0 flex-1 overflow-x-auto whitespace-pre px-4 py-3 text-left [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin]\",\n typography?.fontFamily ?? \"font-jetbrains-mono\",\n typography?.fontSize ?? \"text-sm\",\n typography?.fontWeight,\n typography?.lineHeight ?? \"leading-relaxed\",\n typography?.letterSpacing,\n )}\n >\n {prompt && (\n <span className=\"mr-2 select-none text-muted-foreground\" aria-hidden=\"true\">\n {prompt}\n </span>\n )}\n <code>{code}</code>\n </pre>\n <button\n type=\"button\"\n aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n title={copied ? \"Copied\" : \"Copy\"}\n className=\"m-1.5 inline-flex h-8 w-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n onClick={() => {\n void navigator.clipboard?.writeText(code).then(() => setCopied(true));\n }}\n >\n {copied ? (\n <Check className=\"h-4 w-4\" aria-hidden=\"true\" />\n ) : (\n <Copy className=\"h-4 w-4\" aria-hidden=\"true\" />\n )}\n </button>\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,OAAO,WAAW;AAClB,SAAS,OAAO,YAAY;;;ACH5B,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADiCM,SAWI,KAXJ;AAnBC,SAAS,YAAY,EAAE,MAAM,QAAQ,OAAO,UAAU,GAAqB;AAChF,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAChD,QAAM,aAAa,OAAO,YAAY;AACtC,QAAM,OAAO,OAAO,cAAc;AAElC,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,UAAU,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AACvD,WAAO,MAAM,aAAa,OAAO;AAAA,EACnC,GAAG,CAAC,MAAM,CAAC;AAEX,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,MAAM,QAAQ,UAAU;AAAA,QACxB;AAAA,MACF;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,YAAY,cAAc;AAAA,cAC1B,YAAY,YAAY;AAAA,cACxB,YAAY;AAAA,cACZ,YAAY,cAAc;AAAA,cAC1B,YAAY;AAAA,YACd;AAAA,YAEC;AAAA,wBACC,oBAAC,UAAK,WAAU,0CAAyC,eAAY,QAClE,kBACH;AAAA,cAEF,oBAAC,UAAM,gBAAK;AAAA;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,SAAS,WAAW;AAAA,YAChC,OAAO,SAAS,WAAW;AAAA,YAC3B,WAAU;AAAA,YACV,SAAS,MAAM;AACb,mBAAK,UAAU,WAAW,UAAU,IAAI,EAAE,KAAK,MAAM,UAAU,IAAI,CAAC;AAAA,YACtE;AAAA,YAEC,mBACC,oBAAC,SAAM,WAAU,WAAU,eAAY,QAAO,IAE9C,oBAAC,QAAK,WAAU,WAAU,eAAY,QAAO;AAAA;AAAA,QAEjD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -286,7 +286,7 @@ function Drawer({
|
|
|
286
286
|
setContainer(root ?? null);
|
|
287
287
|
}, []);
|
|
288
288
|
return /* @__PURE__ */ jsxs2(Sheet, { open, onOpenChange: setOpen, children: [
|
|
289
|
-
/* @__PURE__ */ jsx5(
|
|
289
|
+
/* @__PURE__ */ jsx5("span", { ref: triggerWrapRef, className: "contents", children: /* @__PURE__ */ jsx5(SheetTrigger, { asChild: true, children: trigger }) }),
|
|
290
290
|
/* @__PURE__ */ jsx5(
|
|
291
291
|
SheetContent,
|
|
292
292
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/blocks/header/mobile-menu.tsx","../../../src/components/nav-link.tsx","../../../src/primitives/lib/utils.ts","../../../src/primitives/components/ui/button.tsx","../../../src/primitives/button.tsx","../../../src/primitives/drawer.tsx","../../../src/primitives/components/ui/sheet.tsx","../../../src/primitives/link.tsx","../../../src/blocks/header/header-link.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { MenuIcon } from \"lucide-react\";\nimport type { ThemeStyle } from \"../../models\";\nimport type { HeaderNavLink } from \"./settings\";\nimport { NavLink } from \"../../components/nav-link\";\nimport { Button, Drawer } from \"../../primitives\";\nimport { HeaderLink } from \"./header-link\";\n\n/**\n * The header's mobile drawer. It is the only interactive part of the header,\n * so it is the only part sent to the browser on server-rendered pages.\n */\nexport function HeaderMobileMenu({\n links,\n ctaLabel,\n ctaHref,\n theme,\n}: {\n links: HeaderNavLink[];\n ctaLabel?: string;\n ctaHref?: string;\n theme: ThemeStyle;\n}) {\n const [open, setOpen] = useState(false);\n\n return (\n <Drawer\n open={open}\n setOpen={setOpen}\n side=\"right\"\n theme={theme}\n trigger={\n <Button variant=\"outline\" size=\"sm\" theme={theme}>\n <MenuIcon className=\"h-4 w-4\" />\n <span className=\"sr-only\">Toggle menu</span>\n </Button>\n }\n >\n <div className=\"mt-6 flex flex-col gap-4\">\n {links.map((link) => (\n <HeaderLink\n key={link.id}\n link={link}\n theme={theme}\n onClick={() => setOpen(false)}\n fullWidth\n />\n ))}\n {ctaLabel && ctaHref && (\n <NavLink href={ctaHref} onClick={() => setOpen(false)}>\n <Button theme={theme} className=\"w-full\">\n {ctaLabel}\n </Button>\n </NavLink>\n )}\n </div>\n </Drawer>\n );\n}\n","\"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","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"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\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import type React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport {\n Button as ShadcnButton,\n type ButtonProps as ShadcnButtonProps,\n} from \"./components/ui/button\";\nimport { cn } from \"./lib/utils\";\n\nexport interface ButtonProps extends ShadcnButtonProps {\n theme?: ThemeStyle;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n variant = \"default\",\n size = \"default\",\n disabled = false,\n children,\n className = \"\",\n theme,\n ...props\n}) => {\n const buttonStyles = theme?.interactives?.button;\n const typographyStyles = theme?.typography?.button;\n const isIcon = size === \"icon\";\n\n const classes = cn(\n // Base styles\n \"\",\n // Theme typography\n typographyStyles?.fontFamily,\n typographyStyles?.fontSize,\n typographyStyles?.fontWeight,\n typographyStyles?.lineHeight,\n typographyStyles?.letterSpacing,\n typographyStyles?.textTransform,\n typographyStyles?.textDecoration,\n typographyStyles?.textOverflow,\n // Theme interactivity. Icon buttons stay square — CTA padding\n // would stretch them off the size=\"icon\" box.\n !isIcon && buttonStyles?.padding?.x,\n !isIcon && buttonStyles?.padding?.y,\n buttonStyles?.border?.width,\n buttonStyles?.border?.radius,\n buttonStyles?.border?.style,\n // buttonStyles?.border?.color,\n buttonStyles?.shadow,\n // Theme disabled states\n disabled && buttonStyles?.disabled?.opacity,\n disabled && buttonStyles?.disabled?.cursor,\n disabled && buttonStyles?.disabled?.color,\n disabled && buttonStyles?.disabled?.background,\n disabled && buttonStyles?.disabled?.border,\n // User overrides\n buttonStyles?.custom,\n className,\n );\n\n return (\n <ShadcnButton\n variant={variant}\n size={size}\n disabled={disabled}\n className={classes}\n {...props}\n >\n {children}\n </ShadcnButton>\n );\n};\n","\"use client\";\n\nimport { type ReactNode, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { Sheet, SheetContent, SheetTrigger } from \"./components/ui/sheet\";\nimport { cn } from \"./lib/utils\";\n\ninterface DrawerProps {\n trigger: ReactNode;\n children: ReactNode;\n side?: \"left\" | \"right\" | \"top\" | \"bottom\";\n open: boolean;\n setOpen: (open: boolean) => void;\n style?: React.CSSProperties;\n className?: string;\n theme?: ThemeStyle;\n}\n\nexport function Drawer({\n trigger,\n children,\n side = \"left\",\n open,\n setOpen,\n style,\n className = \"\",\n theme: _theme,\n}: DrawerProps) {\n const triggerWrapRef = useRef<HTMLSpanElement>(null);\n const [container, setContainer] = useState<HTMLElement | null>(null);\n\n useLayoutEffect(() => {\n const root = triggerWrapRef.current?.closest<HTMLElement>(\n \"[data-pb-theme], .pb-theme\",\n );\n // Not `instanceof HTMLElement`: inside the builder's preview iframe the\n // root belongs to the iframe's realm, so that check always fails and the\n // sheet would open over the whole editor instead of the preview.\n setContainer(root ?? null);\n }, []);\n\n return (\n <Sheet open={open} onOpenChange={setOpen}>\n <SheetTrigger asChild>\n <span ref={triggerWrapRef}>{trigger}</span>\n </SheetTrigger>\n <SheetContent\n side={side}\n style={style}\n container={container}\n className={cn(\n \"bg-background text-foreground\",\n !container && \"pb-theme\",\n className,\n )}\n >\n {children}\n </SheetContent>\n </Sheet>\n );\n}\n","import * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Sheet = SheetPrimitive.Root;\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className,\n )}\n {...props}\n ref={ref}\n />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n },\n);\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {\n /** Mount the overlay and panel here so scoped theme tokens still apply. */\n container?: HTMLElement | null;\n}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = \"right\", className, children, container, ...props }, ref) => (\n <SheetPortal container={container ?? undefined}>\n <SheetOverlay />\n <SheetPrimitive.Content\n ref={ref}\n className={cn(sheetVariants({ side }), className)}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nconst SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\"flex flex-col space-y-2 text-center sm:text-left\", className)}\n {...props}\n />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nconst SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className,\n )}\n {...props}\n />\n);\nSheetFooter.displayName = \"SheetFooter\";\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold text-foreground\", className)}\n {...props}\n />\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n};\n","import type React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { cn } from \"./lib/utils\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n children: React.ReactNode;\n className?: string;\n theme?: ThemeStyle;\n disabled?: boolean;\n style?: React.CSSProperties;\n}\n\nexport const Link: React.FC<LinkProps> = ({\n children,\n className = \"\",\n theme,\n disabled = false,\n style,\n ...props\n}) => {\n const typographyStyles = theme?.typography?.link;\n const linkStyles = theme?.interactives?.link;\n const classes = cn(\n // Base styles\n \"font-medium cursor-pointer\",\n // Theme typography\n typographyStyles?.fontFamily,\n typographyStyles?.fontSize,\n typographyStyles?.fontWeight,\n typographyStyles?.lineHeight,\n typographyStyles?.letterSpacing,\n typographyStyles?.textTransform,\n typographyStyles?.textDecoration,\n typographyStyles?.textOverflow,\n // Theme interactivity\n linkStyles?.padding?.x,\n linkStyles?.padding?.y,\n linkStyles?.border?.width,\n linkStyles?.border?.radius,\n linkStyles?.border?.style,\n // Theme disabled states\n disabled && linkStyles?.disabled?.color,\n disabled && linkStyles?.disabled?.background,\n disabled && linkStyles?.disabled?.border,\n disabled && linkStyles?.disabled?.opacity,\n disabled && linkStyles?.disabled?.cursor,\n // User overrides\n linkStyles?.custom,\n className,\n );\n\n return (\n <span\n className={classes}\n style={{\n ...style,\n textShadow: linkStyles?.textShadow || undefined,\n }}\n {...props}\n >\n {children}\n </span>\n );\n};\n","import type { ThemeStyle } from \"../../models\";\nimport type { HeaderNavLink } from \"./settings\";\nimport { NavLink } from \"../../components/nav-link\";\nimport { Button, Link as PrimitiveLink } from \"../../primitives\";\n\nexport function HeaderLink({\n link,\n theme,\n onClick,\n fullWidth = false,\n}: {\n link: HeaderNavLink;\n theme?: ThemeStyle;\n onClick?: () => void;\n /** Mobile menu: button links span the sheet, like the CTA. */\n fullWidth?: boolean;\n}) {\n if (link.isButton) {\n return (\n <NavLink href={link.href} onClick={onClick}>\n <Button\n size={fullWidth ? undefined : \"sm\"}\n theme={theme}\n className={fullWidth ? \"w-full\" : undefined}\n >\n {link.label}\n </Button>\n </NavLink>\n );\n }\n\n return (\n <NavLink href={link.href} onClick={onClick} className=\"no-underline\">\n <PrimitiveLink theme={theme} className=\"no-underline\">\n {link.label}\n </PrimitiveLink>\n </NavLink>\n );\n}\n"],"mappings":";;;;AAEA,SAAS,YAAAA,iBAAgB;AACzB,SAAS,gBAAgB;;;ACDzB,YAAY,WAAW;AAqCnB;AAfJ,IAAM,mBAAmB,uBAAO,IAAI,qCAAqC;AACzE,IAAM,iBAAiB;AAGvB,IAAM,yBAA0B,wEACxB,oBAA+C,IAAI;AAgBpD,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;;;AC3GA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACLA,SAAS,YAAY;AACrB,SAAS,WAA8B;AACvC,YAAYC,YAAW;AA0CjB,gBAAAC,YAAA;AAtCN,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,QACF,SACE;AAAA,QACF,WAAW;AAAA,QACX,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAQA,IAAM,SAAe;AAAA,EACnB,CAAC,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AAChE,UAAM,OAAO,UAAU,OAAO;AAC9B,WACE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,QAC1D;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;;;ACMjB,gBAAAC,YAAA;AA9CG,IAAMC,UAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,OAAO,cAAc;AAC1C,QAAM,mBAAmB,OAAO,YAAY;AAC5C,QAAM,SAAS,SAAS;AAExB,QAAM,UAAU;AAAA;AAAA,IAEd;AAAA;AAAA,IAEA,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA;AAAA;AAAA,IAGlB,CAAC,UAAU,cAAc,SAAS;AAAA,IAClC,CAAC,UAAU,cAAc,SAAS;AAAA,IAClC,cAAc,QAAQ;AAAA,IACtB,cAAc,QAAQ;AAAA,IACtB,cAAc,QAAQ;AAAA;AAAA,IAEtB,cAAc;AAAA;AAAA,IAEd,YAAY,cAAc,UAAU;AAAA,IACpC,YAAY,cAAc,UAAU;AAAA,IACpC,YAAY,cAAc,UAAU;AAAA,IACpC,YAAY,cAAc,UAAU;AAAA,IACpC,YAAY,cAAc,UAAU;AAAA;AAAA,IAEpC,cAAc;AAAA,IACd;AAAA,EACF;AAEA,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AClEA,SAAyB,iBAAiB,QAAQ,gBAAgB;;;ACFlE,YAAY,oBAAoB;AAChC,SAAS,OAAAE,YAA8B;AACvC,SAAS,SAAS;AAClB,YAAYC,YAAW;AAgBrB,gBAAAC,MAiDI,YAjDJ;AAZF,IAAM,QAAuB;AAE7B,IAAM,eAA8B;AAIpC,IAAM,cAA6B;AAEnC,IAAM,eAAqB,kBAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,gBAAAC;AAAA,EAAgB;AAAA,EAAf;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,IACJ;AAAA;AACF,CACD;AACD,aAAa,cAA6B,uBAAQ;AAElD,IAAM,gBAAgBC;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,QACE;AAAA,QACF,MAAM;AAAA,QACN,OACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,IACR;AAAA,EACF;AACF;AASA,IAAM,eAAqB,kBAGzB,CAAC,EAAE,OAAO,SAAS,WAAW,UAAU,WAAW,GAAG,MAAM,GAAG,QAC/D,qBAAC,eAAY,WAAW,aAAa,QACnC;AAAA,kBAAAD,KAAC,gBAAa;AAAA,EACd;AAAA,IAAgB;AAAA,IAAf;AAAA,MACC;AAAA,MACA,WAAW,GAAG,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MAC/C,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,qBAAgB,sBAAf,EAAqB,WAAU,4OAC9B;AAAA,0BAAAA,KAAC,KAAE,WAAU,WAAU;AAAA,UACvB,gBAAAA,KAAC,UAAK,WAAU,WAAU,mBAAK;AAAA,WACjC;AAAA;AAAA;AAAA,EACF;AAAA,GACF,CACD;AACD,aAAa,cAA6B,uBAAQ;AAElD,IAAM,cAAc,CAAC,EAAE,WAAW,GAAG,MAAM,MACzC,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,GAAG,oDAAoD,SAAS;AAAA,IAC1E,GAAG;AAAA;AACN;AAEF,YAAY,cAAc;AAE1B,IAAM,cAAc,CAAC,EAAE,WAAW,GAAG,MAAM,MACzC,gBAAAA;AAAA,EAAC;AAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA;AACN;AAEF,YAAY,cAAc;AAE1B,IAAM,aAAmB,kBAGvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,gBAAAA;AAAA,EAAgB;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW,GAAG,yCAAyC,SAAS;AAAA,IAC/D,GAAG;AAAA;AACN,CACD;AACD,WAAW,cAA6B,qBAAM;AAE9C,IAAM,mBAAyB,kBAG7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAC1B,gBAAAA;AAAA,EAAgB;AAAA,EAAf;AAAA,IACC;AAAA,IACA,WAAW,GAAG,iCAAiC,SAAS;AAAA,IACvD,GAAG;AAAA;AACN,CACD;AACD,iBAAiB,cAA6B,2BAAY;;;AD5EtD,SAEI,OAAAE,MAFJ,QAAAC,aAAA;AAxBG,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,OAAO;AACT,GAAgB;AACd,QAAM,iBAAiB,OAAwB,IAAI;AACnD,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B,IAAI;AAEnE,kBAAgB,MAAM;AACpB,UAAM,OAAO,eAAe,SAAS;AAAA,MACnC;AAAA,IACF;AAIA,iBAAa,QAAQ,IAAI;AAAA,EAC3B,GAAG,CAAC,CAAC;AAEL,SACE,gBAAAA,MAAC,SAAM,MAAY,cAAc,SAC/B;AAAA,oBAAAD,KAAC,gBAAa,SAAO,MACnB,0BAAAA,KAAC,UAAK,KAAK,gBAAiB,mBAAQ,GACtC;AAAA,IACA,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,CAAC,aAAa;AAAA,UACd;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;;;AERI,gBAAAE,YAAA;AAxCG,IAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,mBAAmB,OAAO,YAAY;AAC5C,QAAM,aAAa,OAAO,cAAc;AACxC,QAAM,UAAU;AAAA;AAAA,IAEd;AAAA;AAAA,IAEA,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,kBAAkB;AAAA;AAAA,IAElB,YAAY,SAAS;AAAA,IACrB,YAAY,SAAS;AAAA,IACrB,YAAY,QAAQ;AAAA,IACpB,YAAY,QAAQ;AAAA,IACpB,YAAY,QAAQ;AAAA;AAAA,IAEpB,YAAY,YAAY,UAAU;AAAA,IAClC,YAAY,YAAY,UAAU;AAAA,IAClC,YAAY,YAAY,UAAU;AAAA,IAClC,YAAY,YAAY,UAAU;AAAA,IAClC,YAAY,YAAY,UAAU;AAAA;AAAA,IAElC,YAAY;AAAA,IACZ;AAAA,EACF;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,GAAG;AAAA,QACH,YAAY,YAAY,cAAc;AAAA,MACxC;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;AC3CQ,gBAAAC,YAAA;AAfD,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AACd,GAMG;AACD,MAAI,KAAK,UAAU;AACjB,WACE,gBAAAA,KAAC,WAAQ,MAAM,KAAK,MAAM,SACxB,0BAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAM,YAAY,SAAY;AAAA,QAC9B;AAAA,QACA,WAAW,YAAY,WAAW;AAAA,QAEjC,eAAK;AAAA;AAAA,IACR,GACF;AAAA,EAEJ;AAEA,SACE,gBAAAD,KAAC,WAAQ,MAAM,KAAK,MAAM,SAAkB,WAAU,gBACpD,0BAAAA,KAAC,QAAc,OAAc,WAAU,gBACpC,eAAK,OACR,GACF;AAEJ;;;ARJQ,SACE,OAAAE,MADF,QAAAC,aAAA;AApBD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,CAAC,MAAM,OAAO,IAAIC,UAAS,KAAK;AAEtC,SACE,gBAAAF;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA,SACE,gBAAAC,MAACE,SAAA,EAAO,SAAQ,WAAU,MAAK,MAAK,OAClC;AAAA,wBAAAH,KAAC,YAAS,WAAU,WAAU;AAAA,QAC9B,gBAAAA,KAAC,UAAK,WAAU,WAAU,yBAAW;AAAA,SACvC;AAAA,MAGF,0BAAAC,MAAC,SAAI,WAAU,4BACZ;AAAA,cAAM,IAAI,CAAC,SACV,gBAAAD;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC5B,WAAS;AAAA;AAAA,UAJJ,KAAK;AAAA,QAKZ,CACD;AAAA,QACA,YAAY,WACX,gBAAAA,KAAC,WAAQ,MAAM,SAAS,SAAS,MAAM,QAAQ,KAAK,GAClD,0BAAAA,KAACG,SAAA,EAAO,OAAc,WAAU,UAC7B,oBACH,GACF;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;","names":["useState","React","jsx","jsx","Button","cva","React","jsx","jsx","cva","jsx","jsxs","jsx","jsx","Button","jsx","jsxs","useState","Button"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/blocks/header/mobile-menu.tsx","../../../src/components/nav-link.tsx","../../../src/primitives/lib/utils.ts","../../../src/primitives/components/ui/button.tsx","../../../src/primitives/button.tsx","../../../src/primitives/drawer.tsx","../../../src/primitives/components/ui/sheet.tsx","../../../src/primitives/link.tsx","../../../src/blocks/header/header-link.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { MenuIcon } from \"lucide-react\";\nimport type { ThemeStyle } from \"../../models\";\nimport type { HeaderNavLink } from \"./settings\";\nimport { NavLink } from \"../../components/nav-link\";\nimport { Button, Drawer } from \"../../primitives\";\nimport { HeaderLink } from \"./header-link\";\n\n/**\n * The header's mobile drawer. It is the only interactive part of the header,\n * so it is the only part sent to the browser on server-rendered pages.\n */\nexport function HeaderMobileMenu({\n links,\n ctaLabel,\n ctaHref,\n theme,\n}: {\n links: HeaderNavLink[];\n ctaLabel?: string;\n ctaHref?: string;\n theme: ThemeStyle;\n}) {\n const [open, setOpen] = useState(false);\n\n return (\n <Drawer\n open={open}\n setOpen={setOpen}\n side=\"right\"\n theme={theme}\n trigger={\n <Button variant=\"outline\" size=\"sm\" theme={theme}>\n <MenuIcon className=\"h-4 w-4\" />\n <span className=\"sr-only\">Toggle menu</span>\n </Button>\n }\n >\n <div className=\"mt-6 flex flex-col gap-4\">\n {links.map((link) => (\n <HeaderLink\n key={link.id}\n link={link}\n theme={theme}\n onClick={() => setOpen(false)}\n fullWidth\n />\n ))}\n {ctaLabel && ctaHref && (\n <NavLink href={ctaHref} onClick={() => setOpen(false)}>\n <Button theme={theme} className=\"w-full\">\n {ctaLabel}\n </Button>\n </NavLink>\n )}\n </div>\n </Drawer>\n );\n}\n","\"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","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n \"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\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n);\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\";\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n );\n },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n","import type React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport {\n Button as ShadcnButton,\n type ButtonProps as ShadcnButtonProps,\n} from \"./components/ui/button\";\nimport { cn } from \"./lib/utils\";\n\nexport interface ButtonProps extends ShadcnButtonProps {\n theme?: ThemeStyle;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n variant = \"default\",\n size = \"default\",\n disabled = false,\n children,\n className = \"\",\n theme,\n ...props\n}) => {\n const buttonStyles = theme?.interactives?.button;\n const typographyStyles = theme?.typography?.button;\n const isIcon = size === \"icon\";\n\n const classes = cn(\n // Base styles\n \"\",\n // Theme typography\n typographyStyles?.fontFamily,\n typographyStyles?.fontSize,\n typographyStyles?.fontWeight,\n typographyStyles?.lineHeight,\n typographyStyles?.letterSpacing,\n typographyStyles?.textTransform,\n typographyStyles?.textDecoration,\n typographyStyles?.textOverflow,\n // Theme interactivity. Icon buttons stay square — CTA padding\n // would stretch them off the size=\"icon\" box.\n !isIcon && buttonStyles?.padding?.x,\n !isIcon && buttonStyles?.padding?.y,\n buttonStyles?.border?.width,\n buttonStyles?.border?.radius,\n buttonStyles?.border?.style,\n // buttonStyles?.border?.color,\n buttonStyles?.shadow,\n // Theme disabled states\n disabled && buttonStyles?.disabled?.opacity,\n disabled && buttonStyles?.disabled?.cursor,\n disabled && buttonStyles?.disabled?.color,\n disabled && buttonStyles?.disabled?.background,\n disabled && buttonStyles?.disabled?.border,\n // User overrides\n buttonStyles?.custom,\n className,\n );\n\n return (\n <ShadcnButton\n variant={variant}\n size={size}\n disabled={disabled}\n className={classes}\n {...props}\n >\n {children}\n </ShadcnButton>\n );\n};\n","\"use client\";\n\nimport { type ReactNode, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { Sheet, SheetContent, SheetTrigger } from \"./components/ui/sheet\";\nimport { cn } from \"./lib/utils\";\n\ninterface DrawerProps {\n trigger: ReactNode;\n children: ReactNode;\n side?: \"left\" | \"right\" | \"top\" | \"bottom\";\n open: boolean;\n setOpen: (open: boolean) => void;\n style?: React.CSSProperties;\n className?: string;\n theme?: ThemeStyle;\n}\n\nexport function Drawer({\n trigger,\n children,\n side = \"left\",\n open,\n setOpen,\n style,\n className = \"\",\n theme: _theme,\n}: DrawerProps) {\n const triggerWrapRef = useRef<HTMLSpanElement>(null);\n const [container, setContainer] = useState<HTMLElement | null>(null);\n\n useLayoutEffect(() => {\n const root = triggerWrapRef.current?.closest<HTMLElement>(\n \"[data-pb-theme], .pb-theme\",\n );\n // Not `instanceof HTMLElement`: inside the builder's preview iframe the\n // root belongs to the iframe's realm, so that check always fails and the\n // sheet would open over the whole editor instead of the preview.\n setContainer(root ?? null);\n }, []);\n\n return (\n <Sheet open={open} onOpenChange={setOpen}>\n {/* The trigger itself gets the trigger props (a span with\n type=\"button\" around a button is invalid ARIA); the span only\n finds the theme root. */}\n <span ref={triggerWrapRef} className=\"contents\">\n <SheetTrigger asChild>{trigger}</SheetTrigger>\n </span>\n <SheetContent\n side={side}\n style={style}\n container={container}\n className={cn(\n \"bg-background text-foreground\",\n !container && \"pb-theme\",\n className,\n )}\n >\n {children}\n </SheetContent>\n </Sheet>\n );\n}\n","import * as SheetPrimitive from \"@radix-ui/react-dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst Sheet = SheetPrimitive.Root;\n\nconst SheetTrigger = SheetPrimitive.Trigger;\n\nconst SheetClose = SheetPrimitive.Close;\n\nconst SheetPortal = SheetPrimitive.Portal;\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Overlay>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Overlay\n className={cn(\n \"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className,\n )}\n {...props}\n ref={ref}\n />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n },\n);\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n VariantProps<typeof sheetVariants> {\n /** Mount the overlay and panel here so scoped theme tokens still apply. */\n container?: HTMLElement | null;\n}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Content>,\n SheetContentProps\n>(({ side = \"right\", className, children, container, ...props }, ref) => (\n <SheetPortal container={container ?? undefined}>\n <SheetOverlay />\n <SheetPrimitive.Content\n ref={ref}\n className={cn(sheetVariants({ side }), className)}\n {...props}\n >\n {children}\n <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </SheetPrimitive.Close>\n </SheetPrimitive.Content>\n </SheetPortal>\n));\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nconst SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\"flex flex-col space-y-2 text-center sm:text-left\", className)}\n {...props}\n />\n);\nSheetHeader.displayName = \"SheetHeader\";\n\nconst SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (\n <div\n className={cn(\n \"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n className,\n )}\n {...props}\n />\n);\nSheetFooter.displayName = \"SheetFooter\";\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Title>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold text-foreground\", className)}\n {...props}\n />\n));\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef<typeof SheetPrimitive.Description>,\n React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>\n>(({ className, ...props }, ref) => (\n <SheetPrimitive.Description\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n};\n","import type React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { cn } from \"./lib/utils\";\n\nexport interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n children: React.ReactNode;\n className?: string;\n theme?: ThemeStyle;\n disabled?: boolean;\n style?: React.CSSProperties;\n}\n\nexport const Link: React.FC<LinkProps> = ({\n children,\n className = \"\",\n theme,\n disabled = false,\n style,\n ...props\n}) => {\n const typographyStyles = theme?.typography?.link;\n const linkStyles = theme?.interactives?.link;\n const classes = cn(\n // Base styles\n \"font-medium cursor-pointer\",\n // Theme typography\n typographyStyles?.fontFamily,\n typographyStyles?.fontSize,\n typographyStyles?.fontWeight,\n typographyStyles?.lineHeight,\n typographyStyles?.letterSpacing,\n typographyStyles?.textTransform,\n typographyStyles?.textDecoration,\n typographyStyles?.textOverflow,\n // Theme interactivity\n linkStyles?.padding?.x,\n linkStyles?.padding?.y,\n linkStyles?.border?.width,\n linkStyles?.border?.radius,\n linkStyles?.border?.style,\n // Theme disabled states\n disabled && linkStyles?.disabled?.color,\n disabled && linkStyles?.disabled?.background,\n disabled && linkStyles?.disabled?.border,\n disabled && linkStyles?.disabled?.opacity,\n disabled && linkStyles?.disabled?.cursor,\n // User overrides\n linkStyles?.custom,\n className,\n );\n\n return (\n <span\n className={classes}\n style={{\n ...style,\n textShadow: linkStyles?.textShadow || undefined,\n }}\n {...props}\n >\n {children}\n </span>\n );\n};\n","import type { ThemeStyle } from \"../../models\";\nimport type { HeaderNavLink } from \"./settings\";\nimport { NavLink } from \"../../components/nav-link\";\nimport { Button, Link as PrimitiveLink } from \"../../primitives\";\n\nexport function HeaderLink({\n link,\n theme,\n onClick,\n fullWidth = false,\n}: {\n link: HeaderNavLink;\n theme?: ThemeStyle;\n onClick?: () => void;\n /** Mobile menu: button links span the sheet, like the CTA. */\n fullWidth?: boolean;\n}) {\n if (link.isButton) {\n return (\n <NavLink href={link.href} onClick={onClick}>\n <Button\n size={fullWidth ? undefined : \"sm\"}\n theme={theme}\n className={fullWidth ? \"w-full\" : undefined}\n >\n {link.label}\n </Button>\n </NavLink>\n );\n }\n\n return (\n <NavLink href={link.href} onClick={onClick} className=\"no-underline\">\n <PrimitiveLink theme={theme} className=\"no-underline\">\n {link.label}\n </PrimitiveLink>\n </NavLink>\n );\n}\n"],"mappings":"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","names":["useState","React","jsx","jsx","Button","cva","React","jsx","jsx","cva","jsx","jsxs","jsx","jsx","Button","jsx","jsxs","useState","Button"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { T as ThemeStyle } from '../theme-style-5_AGy-4V.js';
|
|
3
|
+
|
|
4
|
+
interface TabsItem {
|
|
5
|
+
label: React__default.ReactNode;
|
|
6
|
+
content: React__default.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
interface TabsProps {
|
|
9
|
+
items: TabsItem[];
|
|
10
|
+
/** Accessible name of the tab list. */
|
|
11
|
+
label: string;
|
|
12
|
+
defaultIndex?: number;
|
|
13
|
+
theme?: ThemeStyle;
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Accessible tabs (WAI-ARIA tab pattern with arrow-key navigation). Every
|
|
18
|
+
* panel is rendered, inactive ones `hidden`, so server-rendered content is
|
|
19
|
+
* in the HTML before hydration.
|
|
20
|
+
*/
|
|
21
|
+
declare function Tabs({ items, label, defaultIndex, theme, className }: TabsProps): React__default.JSX.Element;
|
|
22
|
+
|
|
23
|
+
export { Tabs, type TabsItem, type TabsProps };
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use client";
|
|
3
|
+
|
|
4
|
+
// src/primitives/tabs.tsx
|
|
5
|
+
import React from "react";
|
|
6
|
+
|
|
7
|
+
// src/primitives/lib/utils.ts
|
|
8
|
+
import { clsx } from "clsx";
|
|
9
|
+
import { twMerge } from "tailwind-merge";
|
|
10
|
+
function cn(...inputs) {
|
|
11
|
+
return twMerge(clsx(inputs));
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// src/primitives/tabs.tsx
|
|
15
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
16
|
+
function Tabs({ items, label, defaultIndex = 0, theme, className }) {
|
|
17
|
+
const [active, setActive] = React.useState(
|
|
18
|
+
Math.min(Math.max(defaultIndex, 0), Math.max(items.length - 1, 0))
|
|
19
|
+
);
|
|
20
|
+
const id = React.useId();
|
|
21
|
+
const tabs = React.useRef([]);
|
|
22
|
+
const typography = theme?.typography?.text2;
|
|
23
|
+
const select = (index) => {
|
|
24
|
+
const next = (index + items.length) % items.length;
|
|
25
|
+
setActive(next);
|
|
26
|
+
tabs.current[next]?.focus();
|
|
27
|
+
};
|
|
28
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-3", className), children: [
|
|
29
|
+
/* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
role: "tablist",
|
|
33
|
+
"aria-label": label,
|
|
34
|
+
className: "flex min-w-0 gap-1 overflow-x-auto overflow-y-hidden border-b border-border [scrollbar-width:none]",
|
|
35
|
+
onKeyDown: (event) => {
|
|
36
|
+
if (event.key === "ArrowRight") select(active + 1);
|
|
37
|
+
else if (event.key === "ArrowLeft") select(active - 1);
|
|
38
|
+
else if (event.key === "Home") select(0);
|
|
39
|
+
else if (event.key === "End") select(items.length - 1);
|
|
40
|
+
else return;
|
|
41
|
+
event.preventDefault();
|
|
42
|
+
},
|
|
43
|
+
children: items.map((item, index) => /* @__PURE__ */ jsx(
|
|
44
|
+
"button",
|
|
45
|
+
{
|
|
46
|
+
ref: (element) => {
|
|
47
|
+
tabs.current[index] = element;
|
|
48
|
+
},
|
|
49
|
+
type: "button",
|
|
50
|
+
role: "tab",
|
|
51
|
+
id: `${id}-tab-${index}`,
|
|
52
|
+
"aria-selected": index === active,
|
|
53
|
+
"aria-controls": `${id}-panel-${index}`,
|
|
54
|
+
tabIndex: index === active ? 0 : -1,
|
|
55
|
+
onClick: () => setActive(index),
|
|
56
|
+
className: cn(
|
|
57
|
+
"shrink-0 whitespace-nowrap border-b-2 px-2 py-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
|
|
58
|
+
typography?.fontFamily,
|
|
59
|
+
typography?.fontSize ?? "text-sm",
|
|
60
|
+
typography?.letterSpacing,
|
|
61
|
+
index === active ? "border-primary font-medium text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
|
|
62
|
+
),
|
|
63
|
+
children: item.label
|
|
64
|
+
},
|
|
65
|
+
index
|
|
66
|
+
))
|
|
67
|
+
}
|
|
68
|
+
),
|
|
69
|
+
items.map((item, index) => /* @__PURE__ */ jsx(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
role: "tabpanel",
|
|
73
|
+
id: `${id}-panel-${index}`,
|
|
74
|
+
"aria-labelledby": `${id}-tab-${index}`,
|
|
75
|
+
hidden: index !== active,
|
|
76
|
+
className: "min-w-0",
|
|
77
|
+
children: item.content
|
|
78
|
+
},
|
|
79
|
+
index
|
|
80
|
+
))
|
|
81
|
+
] });
|
|
82
|
+
}
|
|
83
|
+
export {
|
|
84
|
+
Tabs
|
|
85
|
+
};
|
|
86
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/primitives/tabs.tsx","../../../src/primitives/lib/utils.ts"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { ThemeStyle } from \"../models\";\nimport { cn } from \"./lib/utils\";\n\nexport interface TabsItem {\n label: React.ReactNode;\n content: React.ReactNode;\n}\n\nexport interface TabsProps {\n items: TabsItem[];\n /** Accessible name of the tab list. */\n label: string;\n defaultIndex?: number;\n theme?: ThemeStyle;\n className?: string;\n}\n\n/**\n * Accessible tabs (WAI-ARIA tab pattern with arrow-key navigation). Every\n * panel is rendered, inactive ones `hidden`, so server-rendered content is\n * in the HTML before hydration.\n */\nexport function Tabs({ items, label, defaultIndex = 0, theme, className }: TabsProps) {\n const [active, setActive] = React.useState(\n Math.min(Math.max(defaultIndex, 0), Math.max(items.length - 1, 0)),\n );\n const id = React.useId();\n const tabs = React.useRef<(HTMLButtonElement | null)[]>([]);\n const typography = theme?.typography?.text2;\n\n const select = (index: number) => {\n const next = (index + items.length) % items.length;\n setActive(next);\n tabs.current[next]?.focus();\n };\n\n return (\n <div className={cn(\"flex min-w-0 flex-col gap-3\", className)}>\n <div\n role=\"tablist\"\n aria-label={label}\n className=\"flex min-w-0 gap-1 overflow-x-auto overflow-y-hidden border-b border-border [scrollbar-width:none]\"\n onKeyDown={(event) => {\n if (event.key === \"ArrowRight\") select(active + 1);\n else if (event.key === \"ArrowLeft\") select(active - 1);\n else if (event.key === \"Home\") select(0);\n else if (event.key === \"End\") select(items.length - 1);\n else return;\n event.preventDefault();\n }}\n >\n {items.map((item, index) => (\n <button\n key={index}\n ref={(element) => {\n tabs.current[index] = element;\n }}\n type=\"button\"\n role=\"tab\"\n id={`${id}-tab-${index}`}\n aria-selected={index === active}\n aria-controls={`${id}-panel-${index}`}\n tabIndex={index === active ? 0 : -1}\n onClick={() => setActive(index)}\n className={cn(\n \"shrink-0 whitespace-nowrap border-b-2 px-2 py-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring\",\n typography?.fontFamily,\n typography?.fontSize ?? \"text-sm\",\n typography?.letterSpacing,\n index === active\n ? \"border-primary font-medium text-foreground\"\n : \"border-transparent text-muted-foreground hover:text-foreground\",\n )}\n >\n {item.label}\n </button>\n ))}\n </div>\n {items.map((item, index) => (\n <div\n key={index}\n role=\"tabpanel\"\n id={`${id}-panel-${index}`}\n aria-labelledby={`${id}-tab-${index}`}\n hidden={index !== active}\n className=\"min-w-0\"\n >\n {item.content}\n </div>\n ))}\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,OAAO,WAAW;;;ACFlB,SAA0B,YAAY;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADmCI,SAeM,KAfN;AAfG,SAAS,KAAK,EAAE,OAAO,OAAO,eAAe,GAAG,OAAO,UAAU,GAAc;AACpF,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM;AAAA,IAChC,KAAK,IAAI,KAAK,IAAI,cAAc,CAAC,GAAG,KAAK,IAAI,MAAM,SAAS,GAAG,CAAC,CAAC;AAAA,EACnE;AACA,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,OAAO,MAAM,OAAqC,CAAC,CAAC;AAC1D,QAAM,aAAa,OAAO,YAAY;AAEtC,QAAM,SAAS,CAAC,UAAkB;AAChC,UAAM,QAAQ,QAAQ,MAAM,UAAU,MAAM;AAC5C,cAAU,IAAI;AACd,SAAK,QAAQ,IAAI,GAAG,MAAM;AAAA,EAC5B;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,+BAA+B,SAAS,GACzD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,WAAU;AAAA,QACV,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,aAAc,QAAO,SAAS,CAAC;AAAA,mBACxC,MAAM,QAAQ,YAAa,QAAO,SAAS,CAAC;AAAA,mBAC5C,MAAM,QAAQ,OAAQ,QAAO,CAAC;AAAA,mBAC9B,MAAM,QAAQ,MAAO,QAAO,MAAM,SAAS,CAAC;AAAA,cAChD;AACL,gBAAM,eAAe;AAAA,QACvB;AAAA,QAEC,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK,CAAC,YAAY;AAChB,mBAAK,QAAQ,KAAK,IAAI;AAAA,YACxB;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,IAAI,GAAG,EAAE,QAAQ,KAAK;AAAA,YACtB,iBAAe,UAAU;AAAA,YACzB,iBAAe,GAAG,EAAE,UAAU,KAAK;AAAA,YACnC,UAAU,UAAU,SAAS,IAAI;AAAA,YACjC,SAAS,MAAM,UAAU,KAAK;AAAA,YAC9B,WAAW;AAAA,cACT;AAAA,cACA,YAAY;AAAA,cACZ,YAAY,YAAY;AAAA,cACxB,YAAY;AAAA,cACZ,UAAU,SACN,+CACA;AAAA,YACN;AAAA,YAEC,eAAK;AAAA;AAAA,UArBD;AAAA,QAsBP,CACD;AAAA;AAAA,IACH;AAAA,IACC,MAAM,IAAI,CAAC,MAAM,UAChB;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,IAAI,GAAG,EAAE,UAAU,KAAK;AAAA,QACxB,mBAAiB,GAAG,EAAE,QAAQ,KAAK;AAAA,QACnC,QAAQ,UAAU;AAAA,QAClB,WAAU;AAAA,QAET,eAAK;AAAA;AAAA,MAPD;AAAA,IAQP,CACD;AAAA,KACH;AAEJ;","names":[]}
|
|
@@ -106,6 +106,32 @@ declare const PageCardImage: React__default.FC<PageCardImageProps>;
|
|
|
106
106
|
declare const PageCardContent: React__default.FC<PageCardContentProps>;
|
|
107
107
|
declare const PageCardHeader: React__default.FC<PageCardHeaderProps>;
|
|
108
108
|
|
|
109
|
+
interface CodeSnippetProps {
|
|
110
|
+
code: string;
|
|
111
|
+
/** Prefix shown before the first line, e.g. "$". Not copied. */
|
|
112
|
+
prompt?: string;
|
|
113
|
+
theme?: ThemeStyle;
|
|
114
|
+
className?: string;
|
|
115
|
+
}
|
|
116
|
+
/**
|
|
117
|
+
* A command or short code sample in a bordered monospace box with a copy
|
|
118
|
+
* button — the `curl … | sh` install box of developer-tool landing pages.
|
|
119
|
+
*/
|
|
120
|
+
declare function CodeSnippet({ code, prompt, theme, className }: CodeSnippetProps): React__default.JSX.Element;
|
|
121
|
+
|
|
122
|
+
interface CollapsibleProps {
|
|
123
|
+
summary: React__default.ReactNode;
|
|
124
|
+
children: React__default.ReactNode;
|
|
125
|
+
defaultOpen?: boolean;
|
|
126
|
+
/** `bordered` draws a card-like box; `plain` only the toggle row. */
|
|
127
|
+
variant?: "bordered" | "plain";
|
|
128
|
+
id?: string;
|
|
129
|
+
theme?: ThemeStyle;
|
|
130
|
+
className?: string;
|
|
131
|
+
}
|
|
132
|
+
/** A disclosure built on native `<details>`: works without JavaScript. */
|
|
133
|
+
declare function Collapsible({ summary, children, defaultOpen, variant, id, theme, className, }: CollapsibleProps): React__default.JSX.Element;
|
|
134
|
+
|
|
109
135
|
type HeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
|
|
110
136
|
interface HeadingProps extends TypographyProps {
|
|
111
137
|
/** Element to render. Lets a block pick its heading level independently of its look. */
|
|
@@ -142,9 +168,20 @@ interface ImageProps extends React__default.ImgHTMLAttributes<HTMLImageElement>
|
|
|
142
168
|
alt?: string;
|
|
143
169
|
className?: string;
|
|
144
170
|
theme?: ThemeStyle;
|
|
171
|
+
/** Above-the-fold image (e.g. LCP): fetched eagerly at high priority. */
|
|
172
|
+
priority?: boolean;
|
|
145
173
|
}
|
|
146
174
|
declare const Image: React__default.FC<ImageProps>;
|
|
147
175
|
|
|
176
|
+
interface InlineCodeProps extends React__default.HTMLAttributes<HTMLElement> {
|
|
177
|
+
children: React__default.ReactNode;
|
|
178
|
+
theme?: ThemeStyle;
|
|
179
|
+
/** `muted` drops the background, for secondary details like types. */
|
|
180
|
+
variant?: "default" | "muted";
|
|
181
|
+
}
|
|
182
|
+
/** Code inside running text: identifiers, paths, field names and values. */
|
|
183
|
+
declare function InlineCode({ children, theme, variant, className, ...props }: InlineCodeProps): React__default.JSX.Element;
|
|
184
|
+
|
|
148
185
|
interface InputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
|
|
149
186
|
theme?: ThemeStyle;
|
|
150
187
|
error?: boolean;
|
|
@@ -166,6 +203,15 @@ interface LinkProps extends React__default.AnchorHTMLAttributes<HTMLAnchorElemen
|
|
|
166
203
|
}
|
|
167
204
|
declare const Link: React__default.FC<LinkProps>;
|
|
168
205
|
|
|
206
|
+
interface NativeSelectProps extends React__default.SelectHTMLAttributes<HTMLSelectElement> {
|
|
207
|
+
theme?: ThemeStyle;
|
|
208
|
+
}
|
|
209
|
+
/**
|
|
210
|
+
* A themed native `<select>`. Use it where a page must stay light (it ships
|
|
211
|
+
* no JavaScript); `Select` is the richer Radix-based control.
|
|
212
|
+
*/
|
|
213
|
+
declare const NativeSelect: React__default.ForwardRefExoticComponent<NativeSelectProps & React__default.RefAttributes<HTMLSelectElement>>;
|
|
214
|
+
|
|
169
215
|
declare const Preheader: React__default.FC<TypographyProps>;
|
|
170
216
|
|
|
171
217
|
interface SectionProps extends React__default.HTMLAttributes<HTMLElement> {
|
|
@@ -183,6 +229,42 @@ declare const Subheader1: React__default.FC<TypographyProps & {
|
|
|
183
229
|
|
|
184
230
|
declare const Subheader2: React__default.FC<TypographyProps>;
|
|
185
231
|
|
|
232
|
+
interface TableColumn {
|
|
233
|
+
key: string;
|
|
234
|
+
label: string;
|
|
235
|
+
className?: string;
|
|
236
|
+
}
|
|
237
|
+
interface TableProps {
|
|
238
|
+
columns: TableColumn[];
|
|
239
|
+
rows: Record<string, React__default.ReactNode>[];
|
|
240
|
+
theme?: ThemeStyle;
|
|
241
|
+
className?: string;
|
|
242
|
+
}
|
|
243
|
+
/**
|
|
244
|
+
* A themed data table. On narrow screens each row stacks into a block, with
|
|
245
|
+
* the column name shown before every value.
|
|
246
|
+
*/
|
|
247
|
+
declare function Table({ columns, rows, theme, className }: TableProps): React__default.JSX.Element;
|
|
248
|
+
|
|
249
|
+
interface TabsItem {
|
|
250
|
+
label: React__default.ReactNode;
|
|
251
|
+
content: React__default.ReactNode;
|
|
252
|
+
}
|
|
253
|
+
interface TabsProps {
|
|
254
|
+
items: TabsItem[];
|
|
255
|
+
/** Accessible name of the tab list. */
|
|
256
|
+
label: string;
|
|
257
|
+
defaultIndex?: number;
|
|
258
|
+
theme?: ThemeStyle;
|
|
259
|
+
className?: string;
|
|
260
|
+
}
|
|
261
|
+
/**
|
|
262
|
+
* Accessible tabs (WAI-ARIA tab pattern with arrow-key navigation). Every
|
|
263
|
+
* panel is rendered, inactive ones `hidden`, so server-rendered content is
|
|
264
|
+
* in the HTML before hydration.
|
|
265
|
+
*/
|
|
266
|
+
declare function Tabs({ items, label, defaultIndex, theme, className }: TabsProps): React__default.JSX.Element;
|
|
267
|
+
|
|
186
268
|
declare const Text1: React__default.FC<TypographyProps & {
|
|
187
269
|
component?: "p" | "span";
|
|
188
270
|
}>;
|
|
@@ -197,4 +279,4 @@ interface TextareaProps extends React__default.TextareaHTMLAttributes<HTMLTextAr
|
|
|
197
279
|
}
|
|
198
280
|
declare const Textarea: React__default.ForwardRefExoticComponent<TextareaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
|
|
199
281
|
|
|
200
|
-
export { Badge, type BadgeProps, Button, type ButtonProps, Caption, Display, Header1, Header2, Header3, Header4, type HeadingProps, type HeadingTag, Image, type ImageProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, PageCard, PageCardContent, type PageCardContentProps, PageCardHeader, type PageCardHeaderProps, PageCardImage, type PageCardImageProps, type PageCardProps, Preheader, Section, Subheader1, Subheader2, TAILWIND_TEXT_PX, Text1, Text2, Textarea, type TextareaProps, createHeading, fluidFontSize };
|
|
282
|
+
export { Badge, type BadgeProps, Button, type ButtonProps, Caption, CodeSnippet, type CodeSnippetProps, Collapsible, type CollapsibleProps, Display, Header1, Header2, Header3, Header4, type HeadingProps, type HeadingTag, Image, type ImageProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, NativeSelect, type NativeSelectProps, PageCard, PageCardContent, type PageCardContentProps, PageCardHeader, type PageCardHeaderProps, PageCardImage, type PageCardImageProps, type PageCardProps, Preheader, Section, Subheader1, Subheader2, TAILWIND_TEXT_PX, Table, type TableColumn, type TableProps, Tabs, type TabsItem, type TabsProps, Text1, Text2, Textarea, type TextareaProps, createHeading, fluidFontSize };
|