fulldev-ui 0.7.0-beta.9 → 0.7.0

package/src/components/blocks/video-3.astro

@@ -0,0 +1,73 @@
+---
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import { Image } from "@/components/ui/image"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionGrid,
+  SectionProse,
+  SectionSplit,
+} from "@/components/ui/section"
+import { Video } from "@/components/ui/video"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  video?: string
+  images?: {
+    src: string
+    alt: string
+  }[]
+  title?: string
+  description?: string
+}
+
+const {
+  class: className,
+  id,
+  links,
+  video,
+  images,
+  title,
+  description,
+} = Astro.props
+---
+
+<Section
+  class={cn("-mt-(--header-height) @5xl:gap-1 @5xl:pt-1", className)}
+  id={id}
+>
+  <SectionSplit class="@5xl:grid-cols-[1fr_3fr] @5xl:items-start">
+    <SectionContent
+      class="@5xl:sticky @5xl:top-[calc(24px+var(--header-height,0px))]"
+    >
+      <SectionProse class="text-balance" size="sm">
+        {title && <h1>{title}</h1>}
+        {description && <p>{description}</p>}
+      </SectionProse>
+      <SectionActions>
+        {
+          links?.map(({ href, text, ...link }) => (
+            <Button variant="link" class="h-auto p-0!" href={href} {...link}>
+              {text}
+              {href && <Icon name="arrow-up-right" />}
+            </Button>
+          ))
+        }
+      </SectionActions>
+    </SectionContent>
+    <SectionGrid class="-mx-5 grid-cols-1 gap-1 @5xl:grid-cols-2">
+      <Video class="@5xl:col-span-2" src={video} />
+      {images?.map(({ ...image }) => <Image {...image} />)}
+    </SectionGrid>
+  </SectionSplit>
+</Section>

package/src/components/blocks/videos-1.astro

@@ -0,0 +1,63 @@
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionGrid,
+  SectionProse,
+} from "@/components/ui/section"
+import { Tile, TileContent, TileMedia, TileTitle } from "@/components/ui/tile"
+import { Video } from "@/components/ui/video"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    href?: string
+    title?: string
+    video?: string
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionContent>
+    <SectionProse>
+      <slot />
+    </SectionProse>
+    <SectionActions>
+      {
+        links?.map(({ icon, text, ...link }, i) => (
+          <Button variant={i === 0 ? "default" : "outline"} {...link}>
+            {icon && <Icon name={icon} />}
+            {text}
+          </Button>
+        ))
+      }
+    </SectionActions>
+  </SectionContent>
+  <SectionGrid size="lg">
+    {
+      items?.map(({ href, title, video }) => (
+        <Tile href={href}>
+          <TileMedia>
+            <Video src={video} />
+          </TileMedia>
+          <TileContent>
+            <TileTitle>{title}</TileTitle>
+          </TileContent>
+        </Tile>
+      ))
+    }
+  </SectionGrid>
+</Section>

package/src/components/blocks/videos-2.astro

@@ -0,0 +1,66 @@
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionGrid,
+  SectionProse,
+  SectionSplit,
+} from "@/components/ui/section"
+import { Tile, TileContent, TileMedia, TileTitle } from "@/components/ui/tile"
+import { Video } from "@/components/ui/video"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    href?: string
+    title?: string
+    video?: string
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionSplit>
+    <SectionContent>
+      <SectionProse>
+        <slot />
+      </SectionProse>
+      <SectionActions>
+        {
+          links?.map(({ icon, text, ...link }, i) => (
+            <Button variant={i === 0 ? "default" : "outline"} {...link}>
+              {icon && <Icon name={icon} />}
+              {text}
+            </Button>
+          ))
+        }
+      </SectionActions>
+    </SectionContent>
+    <SectionGrid>
+      {
+        items?.map(({ href, title, video }) => (
+          <Tile href={href}>
+            <TileMedia>
+              <Video src={video} />
+            </TileMedia>
+            <TileContent>
+              <TileTitle>{title}</TileTitle>
+            </TileContent>
+          </Tile>
+        ))
+      }
+    </SectionGrid>
+  </SectionSplit>
+</Section>

package/src/components/blocks/videos-3.astro

@@ -0,0 +1,68 @@
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionGrid,
+  SectionProse,
+  SectionSpread,
+} from "@/components/ui/section"
+import { Tile, TileContent, TileMedia, TileTitle } from "@/components/ui/tile"
+import { Video } from "@/components/ui/video"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    href?: string
+    title?: string
+    video?: string
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionSpread class="@5xl:items-end">
+    <SectionContent>
+      <SectionProse>
+        <slot />
+      </SectionProse>
+    </SectionContent>
+    <SectionContent>
+      <SectionActions>
+        {
+          links?.map(({ icon, text, ...link }, i) => (
+            <Button variant={i === 0 ? "default" : "outline"} {...link}>
+              {icon && <Icon name={icon} />}
+              {text}
+            </Button>
+          ))
+        }
+      </SectionActions>
+    </SectionContent>
+  </SectionSpread>
+  <SectionGrid>
+    {
+      items?.map(({ href, title, video }) => (
+        <Tile href={href}>
+          <TileMedia>
+            <Video src={video} />
+          </TileMedia>
+          <TileContent>
+            <TileTitle>{title}</TileTitle>
+          </TileContent>
+        </Tile>
+      ))
+    }
+  </SectionGrid>
+</Section>

package/src/components/blocks/videos-4.astro

@@ -0,0 +1,64 @@
+---
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionGrid,
+  SectionProse,
+} from "@/components/ui/section"
+import { Tile, TileContent, TileMedia, TileTitle } from "@/components/ui/tile"
+import { Video } from "@/components/ui/video"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    href?: string
+    title?: string
+    video?: string
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={cn("gap-12", className)} id={id}>
+  <SectionContent>
+    <SectionProse>
+      <slot />
+    </SectionProse>
+    <SectionActions>
+      {
+        links?.map(({ icon, text, ...link }, i) => (
+          <Button variant={i === 0 ? "default" : "outline"} {...link}>
+            {icon && <Icon name={icon} />}
+            {text}
+          </Button>
+        ))
+      }
+    </SectionActions>
+  </SectionContent>
+  <SectionGrid class="grid-cols-1 gap-1 @5xl:grid-cols-2">
+    {
+      items?.map(({ href, title, video }) => (
+        <Tile href={href} class="dark overflow-hidden bg-black! ring-0!">
+          <TileMedia class="w-full transition duration-500 ease-in-out group-hover/tile:scale-103">
+            <Video src={video} />
+          </TileMedia>
+          <TileContent class="absolute right-0 bottom-0 left-0 z-10 p-6 opacity-0 transition duration-500 ease-in-out group-hover/tile:opacity-100">
+            <TileTitle class="text-foreground">{title}</TileTitle>
+          </TileContent>
+        </Tile>
+      ))
+    }
+  </SectionGrid>
+</Section>

package/src/components/layout.astro

@@ -0,0 +1,195 @@
+---
+import { getImage } from "astro:assets"
+
+import "@/styles/global.css"
+
+import { Font } from "astro:assets"
+import site from "site.json"
+
+import type { PageSchema } from "@/lib/schemas"
+import { ThemeProvider } from "@/components/ui/theme-toggle"
+import Block from "@/components/block.astro"
+
+type Props = PageSchema
+
+const baseUrl = Astro.site?.origin || Astro.url.origin
+const pagePathname = Astro.url.pathname.endsWith("/")
+  ? Astro.url.pathname
+  : `${Astro.url.pathname}/`
+const pageUrl = `${baseUrl}${pagePathname}`
+
+const { headers, sections, footers, block, seo, head, ...props } = Astro.props
+
+const title = seo?.title || props?.title
+const description = seo?.description || props?.description
+const image = seo?.image || props?.image
+const transformedImage = image?.src
+  ? await getImage({
+      src: image.src,
+      format: "png",
+      width: 1200,
+      height: 630,
+      quality: "medium",
+    })
+  : undefined
+---
+
+<html class={site.theme} lang={Astro.currentLocale}>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+    <meta charset="UTF-8" />
+    <link rel="canonical" href={seo?.canonical} />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={pageUrl} />
+    <meta property="og:locale" content={Astro.currentLocale} />
+    <meta property="og:image" content={`${baseUrl}${transformedImage?.src}`} />
+    <meta
+      property="og:image:url"
+      content={`${baseUrl}${transformedImage?.src}`}
+    />
+    <meta
+      property="og:image:secure_url"
+      content={`${baseUrl}${transformedImage?.src}`}
+    />
+    <meta
+      property="og:image:type"
+      content={transformedImage?.attributes.format || "image/png"}
+    />
+    <meta
+      property="og:image:width"
+      content={transformedImage?.attributes.width.toString()}
+    />
+    <meta
+      property="og:image:height"
+      content={transformedImage?.attributes.height.toString()}
+    />
+    <meta property="og:image:alt" content={image?.alt} />
+    <meta
+      name="robots"
+      content={`${seo?.noindex ? "noindex" : "index"}, ${seo?.nofollow ? "nofollow" : "follow"}`}
+    />
+    <Fragment
+      set:html={`<script type="application/ld+json">${JSON.stringify(
+        {
+          "@context": "https://schema.org",
+          "@type": "WebSite",
+          name: site.name,
+          url: pageUrl,
+          logo: {
+            "@type": "ImageObject",
+            url: `${baseUrl}${transformedImage?.src}`,
+            alt: image?.alt,
+            width: transformedImage?.attributes.width.toString(),
+            height: transformedImage?.attributes.height.toString(),
+          },
+          description: description,
+          headline: title,
+          creator: {
+            "@type": "Organization",
+            name: site.name,
+            url: pageUrl,
+          },
+        },
+        null,
+        2
+      )}</script>`}
+    />
+    <Font cssVariable="--font-base" preload />
+    <Font cssVariable="--font-heading" preload />
+    <ThemeProvider />
+    <Fragment set:html={Astro.props.head} />
+    <slot name="head" />
+    <script is:inline>
+      !(function (t, e) {
+        var o, n, p, r
+        e.__SV ||
+          (window.posthog && window.posthog.__loaded) ||
+          ((window.posthog = e),
+          (e._i = []),
+          (e.init = function (i, s, a) {
+            function g(t, e) {
+              var o = e.split(".")
+              ;(2 == o.length && ((t = t[o[0]]), (e = o[1])),
+                (t[e] = function () {
+                  t.push([e].concat(Array.prototype.slice.call(arguments, 0)))
+                }))
+            }
+            ;(((p = t.createElement("script")).type = "text/javascript"),
+              (p.crossOrigin = "anonymous"),
+              (p.async = !0),
+              (p.src =
+                s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") +
+                "/static/array.js"),
+              (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(
+                p,
+                r
+              ))
+            var u = e
+            for (
+              void 0 !== a ? (u = e[a] = []) : (a = "posthog"),
+                u.people = u.people || [],
+                u.toString = function (t) {
+                  var e = "posthog"
+                  return (
+                    "posthog" !== a && (e += "." + a),
+                    t || (e += " (stub)"),
+                    e
+                  )
+                },
+                u.people.toString = function () {
+                  return u.toString(1) + ".people (stub)"
+                },
+                o =
+                  "init Br Vr ci Wr Jr zr qr capture Ni calculateEventProperties Xr register register_once register_for_session unregister unregister_for_session es getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Zr Yr createPersonProfile ts Nr rs opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing Kr debug O Qr getPageViewId captureTraceFeedback captureTraceMetric Dr".split(
+                    " "
+                  ),
+                n = 0;
+              n < o.length;
+              n++
+            )
+              g(u, o[n])
+            e._i.push([i, s, a])
+          }),
+          (e.__SV = 1))
+      })(document, window.posthog || [])
+      posthog.init("phc_mVacbe8Xydu0UZlh4bNw5EGisvzyRcpqXEEuEEp5lOY", {
+        api_host: "https://eu.i.posthog.com",
+        defaults: "2025-11-30",
+        person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+      })
+    </script>
+  </head>
+  <body
+    class="text-foreground bg-background font-base @container overscroll-none antialiased"
+    id={Astro.url.pathname}
+  >
+    {headers?.map((header) => <Block {...header} />)}
+    <main class="@container flex flex-col">
+      <Block
+        data-cms-bind="#"
+        data-cms-bind-style="sidebar"
+        block={block}
+        {...props}
+      >
+        <slot />
+      </Block>
+      {
+        sections?.map((section, i) => (
+          <div data-cms-bind={`#sections[${i}]`} data-cms-bind-style="sidebar">
+            <Block {...section} />
+          </div>
+        ))
+      }
+    </main>
+    {footers?.map((footer) => <Block {...footer} />)}
+  </body><style>
+    body {
+      font-family: var(--font-base);
+    }
+  </style>
+</html>

package/src/components/live-code-layout.astro

@@ -0,0 +1,14 @@
+<div
+  class="live-code-layout not-content text-foreground bg-background font-base antialiased; overscroll-none"
+>
+  <div
+    class="bg-background flex items-center justify-center gap-6 rounded-t-lg border border-b-0 p-10"
+  >
+    <slot name="example" />
+  </div>
+  <div
+    class="bg-muted [&_pre]:bg-muted [&_pre]:max-h-[400px] [&_pre]:overflow-y-auto [&_pre]:rounded-b-lg"
+  >
+    <slot name="code" />
+  </div>
+</div>

package/src/components/starlight-head.astro

@@ -0,0 +1,65 @@
+---
+import Default from "@astrojs/starlight/components/Head.astro"
+---
+
+<Default>
+  <script is:inline>
+    !(function (t, e) {
+      var o, n, p, r
+      e.__SV ||
+        (window.posthog && window.posthog.__loaded) ||
+        ((window.posthog = e),
+        (e._i = []),
+        (e.init = function (i, s, a) {
+          function g(t, e) {
+            var o = e.split(".")
+            ;(2 == o.length && ((t = t[o[0]]), (e = o[1])),
+              (t[e] = function () {
+                t.push([e].concat(Array.prototype.slice.call(arguments, 0)))
+              }))
+          }
+          ;(((p = t.createElement("script")).type = "text/javascript"),
+            (p.crossOrigin = "anonymous"),
+            (p.async = !0),
+            (p.src =
+              s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") +
+              "/static/array.js"),
+            (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(
+              p,
+              r
+            ))
+          var u = e
+          for (
+            void 0 !== a ? (u = e[a] = []) : (a = "posthog"),
+              u.people = u.people || [],
+              u.toString = function (t) {
+                var e = "posthog"
+                return (
+                  "posthog" !== a && (e += "." + a),
+                  t || (e += " (stub)"),
+                  e
+                )
+              },
+              u.people.toString = function () {
+                return u.toString(1) + ".people (stub)"
+              },
+              o =
+                "init Br Vr ci Wr Jr zr qr capture Ni calculateEventProperties Xr register register_once register_for_session unregister unregister_for_session es getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Zr Yr createPersonProfile ts Nr rs opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing Kr debug O Qr getPageViewId captureTraceFeedback captureTraceMetric Dr".split(
+                  " "
+                ),
+              n = 0;
+            n < o.length;
+            n++
+          )
+            g(u, o[n])
+          e._i.push([i, s, a])
+        }),
+        (e.__SV = 1))
+    })(document, window.posthog || [])
+    posthog.init("phc_mVacbe8Xydu0UZlh4bNw5EGisvzyRcpqXEEuEEp5lOY", {
+      api_host: "https://eu.i.posthog.com",
+      defaults: "2025-11-30",
+      person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+    })
+  </script>
+</Default>

package/src/components/starlight-icons.astro

@@ -0,0 +1,36 @@
+---
+import { getEntry } from "astro:content"
+
+import { Button } from "@/components/ui/button"
+import { HeaderActions } from "@/components/ui/header"
+import { Icon } from "@/components/ui/icon"
+import { ThemeToggle } from "@/components/ui/theme-toggle"
+
+const layout = await getEntry("layouts", "index")
+
+const socials = layout?.data?.headers?.[1]?.socials
+
+const githubStarCount = (
+  await (await fetch("https://api.github.com/repos/fulldotdev/ui")).json()
+).stargazers_count
+---
+
+<HeaderActions>
+  <ThemeToggle />
+  {
+    socials?.map((social) => (
+      <Button variant="ghost" size="icon-sm" href={social} target="_blank">
+        <Icon href={social} />
+      </Button>
+    ))
+  }
+  <Button
+    variant="outline"
+    size="sm"
+    href="https://github.com/fulldotdev/ui"
+    target="_blank"
+  >
+    <Icon name="github" />
+    {githubStarCount}
+  </Button>
+</HeaderActions>