@smicolon/fasla-ui 0.6.0 → 0.8.0

package/registry/blocks/hero-orbit-track/HeroOrbitTrack.tsx

@@ -0,0 +1,238 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Orbit Track Hero.
+ *
+ * A studio introduction on an inverse band: a frosted pill, a light two-line
+ * headline, a paragraph and three frosted figure cards. Beside them runs a
+ * racetrack, a thick rounded band with nine round photos on it, each in a
+ * coloured ring, and a short caption inside the loop.
+ *
+ * Desktop sets the copy at the start and the track beside it, 900 × 420, its
+ * far end running off the block's edge as Figma's does; thin guide lines
+ * frame the block 48px in. Tablet stacks the copy over the whole track,
+ * scaled to 720 × 336, with the caption set smaller. Mobile drops the track
+ * and its photos and keeps the caption alone, centred under the cards, which
+ * go two by two.
+ *
+ * In Arabic the track mirrors: the copy sits on the right, the photos ring
+ * the right end of the loop and the track runs off the left edge. Numbers
+ * stay left to right. The photos themselves are never flipped.
+ *
+ * Each photo's place is Figma's: its centre as a share of the track's width
+ * and height. The track keeps one shape at every width, so the same numbers
+ * serve Desktop and Tablet, and they are placed from the inline start, so
+ * they draw the mirrored track in Arabic.
+ *
+ * The band is an inverse surface, a deliberate contrast band rather than a
+ * photo, so it uses the inverse tokens with no `dark:` switch, and the
+ * frosted cards the light foreground at 20%, which follows them.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container. Mobile is the base; `[@container(min-width:48rem)]:` is Figma's
+ * Tablet (768) and `[@container(min-width:90rem)]:` its Desktop, from 1440px:
+ * the width Figma draws it at. Narrower, the track crowds the copy, so
+ * Tablet's layout covers 768 to 1439.
+ */
+
+export interface HeroOrbitTrackPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface HeroOrbitTrackStat {
+  /** The figure. Shown left to right in either language. */
+  value: React.ReactNode
+  label: React.ReactNode
+}
+
+export interface HeroOrbitTrackCopy {
+  /** The frosted pill above the headline. Hidden when empty. */
+  label: React.ReactNode
+  /** The headline, an `h1`. A line break in the string breaks the line. */
+  headline: React.ReactNode
+  /** The paragraph under the headline. */
+  description: React.ReactNode
+  /** The figure cards under the paragraph. Figma shows three. */
+  stats: HeroOrbitTrackStat[]
+  /** The line inside the track; on Mobile, under the cards. Hidden when empty. */
+  caption: React.ReactNode
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", HeroOrbitTrackCopy> = {
+  en: {
+    label: "OUR STUDIO",
+    headline: "Many projects,\none shared ambition",
+    description: "A small team of designers, writers and engineers shaping how people experience brands online.",
+    stats: [
+      { value: "84", label: "Projects shipped" },
+      { value: "12", label: "Countries served" },
+      { value: "05", label: "Product launches" },
+    ],
+    caption: "Twelve countries. One studio.",
+  },
+  ar: {
+    label: "استوديونا",
+    headline: "مشاريع كثيرة\nوطموح واحد",
+    description: "فريق صغير من المصممين والكتّاب والمهندسين يرسم طريقة تفاعل الناس مع العلامات على الإنترنت.",
+    stats: [
+      { value: "84", label: "مشروعًا مُنجزًا" },
+      { value: "12", label: "دولة نخدمها" },
+      { value: "05", label: "إطلاقات منتجات" },
+    ],
+    caption: "اثنتا عشرة دولة، واستوديو واحد.",
+  },
+}
+
+/**
+ * The nine photos in Figma's order: three along the top from the middle
+ * outwards, three round the start end of the loop, three along the bottom.
+ * `x` and `y` are the photo's centre as percentages of the track's width and
+ * height, measured on Desktop's 900 × 420 track (Tablet's is the same shape at
+ * 0.8), all on the middle line of the band. `ring` is its ring's token.
+ */
+const PLACES = [
+  { x: 40, y: 9.524, ring: "bg-chart-1" },
+  { x: 57.778, y: 9.524, ring: "bg-chart-2" },
+  { x: 75.556, y: 9.524, ring: "bg-chart-4" },
+  { x: 8.111, y: 26.19, ring: "bg-chart-5" },
+  { x: 4.556, y: 50, ring: "bg-info" },
+  { x: 8.111, y: 73.81, ring: "bg-success" },
+  { x: 40, y: 90.476, ring: "bg-chart-1" },
+  { x: 57.778, y: 90.476, ring: "bg-chart-2" },
+  { x: 75.556, y: 90.476, ring: "bg-chart-4" },
+] as const
+
+export interface HeroOrbitTrackProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroOrbitTrackCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The nine photos on the track, in Figma's order: three along the top,
+   * three round the start end, three along the bottom. Photos past the ninth
+   * are not shown; Mobile shows none. None by default: `muted` circles in
+   * their rings.
+   * @default none: `muted` placeholders
+   */
+  photos?: HeroOrbitTrackPhoto[]
+}
+
+export function HeroOrbitTrack({
+  locale = "en",
+  label,
+  headline,
+  description,
+  stats,
+  caption,
+  photos,
+  className,
+  ...props
+}: HeroOrbitTrackProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const pill = label ?? copy.label
+  const figures = stats ?? copy.stats
+  const line = caption ?? copy.caption
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("relative overflow-hidden [container-type:inline-size] bg-background-inverse", className)}
+      {...props}
+    >
+      {/* Figma's guide lines across the block, 48px in from the top and bottom, on Desktop only. */}
+      <div aria-hidden className="absolute inset-x-0 top-12 hidden h-px bg-foreground-inverse/10 [@container(min-width:90rem)]:block" />
+      <div aria-hidden className="absolute inset-x-0 bottom-12 hidden h-px bg-foreground-inverse/10 [@container(min-width:90rem)]:block" />
+
+      {/*
+         * The section's colour fills the whole width; its content does not.
+         * From Tablet up to Desktop the content keeps Figma's Tablet width,
+         * 720px inside 24px padding, and centres, so a wide container shows
+         * Figma's Tablet layout rather than a stretched one.
+         */}
+      <div className="relative mx-auto flex w-full max-w-[1440px] [@container(min-width:48rem)]:max-w-[48rem] [@container(min-width:90rem)]:max-w-[1440px] flex-col gap-10 px-4 py-8 [@container(min-width:48rem)]:gap-12 [@container(min-width:48rem)]:px-6 [@container(min-width:48rem)]:py-16 [@container(min-width:90rem)]:min-h-[900px] [@container(min-width:90rem)]:flex-row [@container(min-width:90rem)]:items-center [@container(min-width:90rem)]:gap-[104px] [@container(min-width:90rem)]:py-24 [@container(min-width:90rem)]:pe-0 [@container(min-width:90rem)]:ps-24">
+        {/* The guide lines down the block, 48px in from each side. */}
+        <div aria-hidden className="absolute inset-y-0 start-12 hidden w-px bg-foreground-inverse/10 [@container(min-width:90rem)]:block" />
+        <div aria-hidden className="absolute inset-y-0 end-12 hidden w-px bg-foreground-inverse/10 [@container(min-width:90rem)]:block" />
+
+        <div className="flex min-w-0 flex-col items-start gap-6 [@container(min-width:90rem)]:w-[560px] [@container(min-width:90rem)]:shrink-0">
+          {pill ? (
+            <p className="whitespace-nowrap rounded-full bg-primary-foreground/20 px-3 py-1 text-xs font-medium text-foreground-inverse">{pill}</p>
+          ) : null}
+          <h1
+            id={headingId}
+            className="whitespace-pre-line text-3xl font-light text-foreground-inverse [@container(min-width:48rem)]:text-5xl [@container(min-width:90rem)]:text-6xl"
+          >
+            {headline ?? copy.headline}
+          </h1>
+          <p className="text-pretty text-base text-muted-foreground-inverse [@container(min-width:90rem)]:max-w-[440px]">
+            {description ?? copy.description}
+          </p>
+          <dl className="grid w-full grid-cols-2 gap-3 [@container(min-width:48rem)]:w-auto [@container(min-width:48rem)]:grid-cols-[repeat(3,minmax(148px,max-content))]">
+            {figures.map((stat, index) => (
+              <div key={index} className="flex min-w-0 flex-col-reverse gap-2 rounded-lg bg-primary-foreground/20 p-4">
+                <dt className="whitespace-nowrap text-xs text-muted-foreground-inverse dark:text-foreground-inverse">{stat.label}</dt>
+                <dd className="text-2xl text-foreground-inverse [@container(min-width:48rem)]:text-3xl">
+                  <bdi dir="ltr">{stat.value}</bdi>
+                </dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+
+        {/*
+         * The track: the band and its photos from Tablet up, 15:7 at every
+         * width. On Mobile only the caption is left, in the flow.
+         */}
+        <div className="relative [@container(min-width:48rem)]:aspect-[15/7] [@container(min-width:48rem)]:w-full [@container(min-width:90rem)]:w-[900px] [@container(min-width:90rem)]:shrink-0">
+          <div aria-hidden className="absolute inset-0 hidden rounded-full bg-foreground-inverse/10 [@container(min-width:48rem)]:block">
+            <div className="absolute inset-16 rounded-full bg-background-inverse [@container(min-width:90rem)]:inset-20" />
+          </div>
+
+          {line ? (
+            // A zero-width anchor at Figma's spot, a little past the middle,
+            // so the caption centres on it in either direction.
+            <p className="text-balance text-center text-base font-medium text-foreground-inverse [@container(min-width:48rem)]:absolute [@container(min-width:48rem)]:start-[54.4%] [@container(min-width:48rem)]:top-1/2 [@container(min-width:48rem)]:flex [@container(min-width:48rem)]:w-0 [@container(min-width:48rem)]:-translate-y-1/2 [@container(min-width:48rem)]:justify-center [@container(min-width:48rem)]:text-xs [@container(min-width:90rem)]:text-base">
+              <span className="[@container(min-width:48rem)]:whitespace-nowrap">{line}</span>
+            </p>
+          ) : null}
+
+          <ul className="absolute inset-0 hidden [@container(min-width:48rem)]:block">
+            {PLACES.map((place, index) => {
+              const photo = photos?.[index]
+              return (
+                <li
+                  key={index}
+                  style={{ insetInlineStart: `${place.x}%`, top: `${place.y}%` }}
+                  className={cn(
+                    // Placed by its centre: the start offset less half the ring.
+                    "absolute -ms-[27px] -mt-[27px] size-[54px] rounded-full p-[3px] [@container(min-width:90rem)]:-ms-[34px] [@container(min-width:90rem)]:-mt-[34px] [@container(min-width:90rem)]:size-[68px] [@container(min-width:90rem)]:p-1",
+                    place.ring
+                  )}
+                >
+                  <div className="relative size-full overflow-hidden rounded-full bg-muted">
+                    {photo ? (
+                      <img src={photo.src} alt={photo.alt} decoding="async" className="absolute inset-0 size-full object-cover" />
+                    ) : null}
+                  </div>
+                </li>
+              )
+            })}
+          </ul>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const heroOrbitTrackCopy = COPY

package/registry/blocks/hero-orbit-track/index.ts

@@ -0,0 +1,8 @@
+export {
+  HeroOrbitTrack,
+  heroOrbitTrackCopy,
+  type HeroOrbitTrackCopy,
+  type HeroOrbitTrackPhoto,
+  type HeroOrbitTrackProps,
+  type HeroOrbitTrackStat,
+} from "./HeroOrbitTrack"

package/registry/blocks/hero-photo-constellation/HeroPhotoConstellation.tsx

@@ -0,0 +1,228 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../../src/lib/utils"
+import { buttonVariants } from "../../ui/button/button"
+
+/*
+ * Figma: `Hero` (46552:249264), Type=Photo Constellation Hero.
+ *
+ * A centred pitch on a dark band, ringed by a loose scatter of photo tiles:
+ * a frosted pill, a two-line headline, a paragraph and a light button. Each
+ * tile has its own size and place, and some are dimmed to 55%, so the field
+ * reads as near and far.
+ *
+ * Desktop scatters fourteen tiles over the whole block, around and behind
+ * the copy; the one at the bottom start corner runs off the block's foot, as
+ * Figma's does. Tablet keeps the first nine, five along the top and four
+ * along the foot, smaller, with the copy centred between them; Mobile keeps
+ * the first eight, four and four, and its button runs full width.
+ *
+ * The band is the inverse background in both modes, a deliberate contrast
+ * band rather than a photo, so the inverse tokens carry it with no `dark:`
+ * switch.
+ *
+ * In Arabic the scatter mirrors: the first tile stands at the top right.
+ * The photographs themselves are never flipped.
+ *
+ * Each tile's place is Figma's: its start and top edges as shares of the
+ * field, its size in px and whether it is dimmed, held in the tile's own
+ * `--hero-tile-*` variables. The tiles are placed from the inline start, so
+ * the same numbers draw the mirrored scatter in Arabic.
+ *
+ * Sized by the block's own width, not the window's: the section is a query
+ * container. Mobile is the base; `[@container(min-width:48rem)]:` is Figma's
+ * Tablet (768) and `[@container(min-width:90rem)]:` its Desktop, from 1440px:
+ * the width Figma draws it at, and the width its tile places are measured
+ * on. Narrower, the fourteen tiles crowd the copy, so Tablet's layout covers
+ * 768 to 1439.
+ */
+
+export interface HeroPhotoConstellationAction {
+  label: React.ReactNode
+  href: string
+}
+
+export interface HeroPhotoConstellationPhoto {
+  src: string
+  /** Describes the photo. Pass "" for a purely decorative one. */
+  alt: string
+}
+
+export interface HeroPhotoConstellationCopy {
+  /** The frosted pill above the headline. Hidden when empty. */
+  label: React.ReactNode
+  /** The headline, an `h1`. A line break in the string breaks the line. */
+  headline: React.ReactNode
+  /** The paragraph under the headline. */
+  description: React.ReactNode
+  /** The light button. */
+  action: HeroPhotoConstellationAction
+}
+
+/** Figma's copy, English and Arabic. */
+const COPY: Record<"en" | "ar", HeroPhotoConstellationCopy> = {
+  en: {
+    label: "Introducing shared collections",
+    headline: "Your space for\neveryday inspiration.",
+    description: "Discover, save and share the images and ideas that move your work forward.",
+    action: { label: "Join for free", href: "#join" },
+  },
+  ar: {
+    label: "جديد: المجموعات المشتركة",
+    headline: "مساحتك\nللإلهام كل يوم.",
+    description: "اكتشف الصور والأفكار التي تدفع عملك إلى الأمام، واحفظها وشاركها.",
+    action: { label: "انضم مجانًا", href: "#join" },
+  },
+}
+
+/** A tile in Figma's px: its start and top edges in the field, its size, and whether it is dimmed to 55%. */
+type Place = { x: number; y: number; w: number; h: number; dim?: boolean }
+
+/** The field each breakpoint's places are measured in: Figma's frame, width × height. */
+const FIELD = { d: [1440, 900], t: [768, 960], m: [360, 760] } as const
+
+/**
+ * The fourteen tiles in Figma's order, from the top start corner. Tablet
+ * shows tiles 1–9, Mobile 1–8.
+ */
+const PLACES: { desktop: Place; tablet?: Place; mobile?: Place }[] = [
+  { desktop: { x: 40, y: 40, w: 150, h: 190 }, tablet: { x: 24, y: 40, w: 120, h: 150 }, mobile: { x: 16, y: 24, w: 72, h: 90 } },
+  { desktop: { x: 250, y: 110, w: 120, h: 150, dim: true }, tablet: { x: 176, y: 24, w: 90, h: 70, dim: true }, mobile: { x: 108, y: 16, w: 64, h: 52, dim: true } },
+  { desktop: { x: 430, y: 30, w: 140, h: 110 }, tablet: { x: 330, y: 56, w: 110, h: 88 }, mobile: { x: 200, y: 32, w: 64, h: 80 } },
+  { desktop: { x: 880, y: 40, w: 130, h: 170 }, tablet: { x: 500, y: 24, w: 96, h: 124 }, mobile: { x: 284, y: 20, w: 60, h: 76, dim: true } },
+  { desktop: { x: 1080, y: 90, w: 170, h: 130 }, tablet: { x: 640, y: 64, w: 104, h: 130, dim: true }, mobile: { x: 16, y: 640, w: 64, h: 80, dim: true } },
+  { desktop: { x: 1300, y: 30, w: 120, h: 160, dim: true }, tablet: { x: 24, y: 770, w: 110, h: 140, dim: true }, mobile: { x: 110, y: 684, w: 72, h: 60 } },
+  { desktop: { x: 60, y: 330, w: 130, h: 130, dim: true }, tablet: { x: 180, y: 840, w: 110, h: 90 }, mobile: { x: 200, y: 650, w: 64, h: 84 } },
+  { desktop: { x: 1260, y: 300, w: 150, h: 200 }, tablet: { x: 470, y: 800, w: 120, h: 100 }, mobile: { x: 284, y: 676, w: 60, h: 64, dim: true } },
+  { desktop: { x: 110, y: 560, w: 150, h: 190 }, tablet: { x: 630, y: 760, w: 110, h: 150 } },
+  { desktop: { x: 30, y: 790, w: 140, h: 150, dim: true } },
+  { desktop: { x: 480, y: 720, w: 130, h: 170 } },
+  { desktop: { x: 840, y: 740, w: 150, h: 120 } },
+  { desktop: { x: 1070, y: 610, w: 160, h: 210 } },
+  { desktop: { x: 1290, y: 720, w: 130, h: 160, dim: true } },
+]
+
+/** A breakpoint's place as the tile's custom properties; a hidden tile gets none. */
+function placeVars(prefix: keyof typeof FIELD, place?: Place): Record<string, string> {
+  if (!place) return {}
+  const [width, height] = FIELD[prefix]
+  return {
+    [`--hero-tile-${prefix}x`]: `${(place.x / width) * 100}%`,
+    [`--hero-tile-${prefix}y`]: `${(place.y / height) * 100}%`,
+    [`--hero-tile-${prefix}w`]: `${place.w}px`,
+    [`--hero-tile-${prefix}h`]: `${place.h}px`,
+    [`--hero-tile-${prefix}o`]: place.dim ? "0.55" : "1",
+  }
+}
+
+export interface HeroPhotoConstellationProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, "title">,
+    Partial<HeroPhotoConstellationCopy> {
+  /** Which language the default copy is in. The page's `dir` sets the direction. */
+  locale?: "en" | "ar"
+  /**
+   * The fourteen tile photos, in Figma's order from the top start corner.
+   * Tablet shows the first nine, Mobile the first eight. Photos past the
+   * fourteenth are not shown. None by default: `muted` tiles.
+   * @default none: `muted` placeholders
+   */
+  photos?: HeroPhotoConstellationPhoto[]
+}
+
+export function HeroPhotoConstellation({
+  locale = "en",
+  label,
+  headline,
+  description,
+  action,
+  photos,
+  className,
+  ...props
+}: HeroPhotoConstellationProps) {
+  const copy = COPY[locale]
+  const headingId = React.useId()
+  const pill = label ?? copy.label
+  const button = action ?? copy.action
+
+  return (
+    <section
+      aria-labelledby={headingId}
+      className={cn("relative overflow-hidden [container-type:inline-size] bg-background-inverse", className)}
+      {...props}
+    >
+      {/*
+         * The section's colour fills the whole width; its content does not.
+         * From Tablet up to Desktop the content keeps Figma's Tablet width,
+         * 720px inside 24px padding, and centres, so a wide container shows
+         * Figma's Tablet layout rather than a stretched one.
+         */}
+      <div className="relative mx-auto flex min-h-[760px] w-full max-w-[1440px] [@container(min-width:48rem)]:max-w-[48rem] [@container(min-width:90rem)]:max-w-[1440px] flex-col justify-center px-4 py-8 [@container(min-width:48rem)]:min-h-[960px] [@container(min-width:48rem)]:px-6 [@container(min-width:48rem)]:py-16 [@container(min-width:90rem)]:min-h-[900px] [@container(min-width:90rem)]:justify-start [@container(min-width:90rem)]:px-[220px] [@container(min-width:90rem)]:pb-20 [@container(min-width:90rem)]:pt-[290px]">
+
+        <div className="relative z-10 flex w-full flex-col items-center gap-6 text-center">
+          {pill ? (
+            <p className="whitespace-nowrap rounded-full bg-primary-foreground/20 px-3 py-1 text-xs font-medium text-foreground-inverse">{pill}</p>
+          ) : null}
+          <h1
+            id={headingId}
+            className="whitespace-pre-line text-5xl font-medium text-foreground-inverse [@container(min-width:48rem)]:text-6xl [@container(min-width:90rem)]:text-8xl"
+          >
+            {headline ?? copy.headline}
+          </h1>
+          <p className="text-balance text-base text-muted-foreground-inverse [@container(min-width:48rem)]:text-lg [@container(min-width:90rem)]:max-w-[560px]">
+            {description ?? copy.description}
+          </p>
+          <a
+            href={button.href}
+            className={cn(buttonVariants({ variant: "secondary", size: "lg", radius: "rounded" }), "w-full [@container(min-width:48rem)]:w-auto")}
+          >
+            {button.label}
+          </a>
+        </div>
+
+        {/*
+         * The field: the whole block, behind the copy. It comes after the
+         * copy in the source, so a screen reader reaches the headline before
+         * fourteen photos.
+         */}
+        <ul className="absolute inset-0">
+          {PLACES.map((place, index) => {
+            const photo = photos?.[index]
+            return (
+              <li
+                key={index}
+                style={
+                  {
+                    ...placeVars("d", place.desktop),
+                    ...placeVars("t", place.tablet),
+                    ...placeVars("m", place.mobile),
+                  } as React.CSSProperties
+                }
+                className={cn(
+                  "absolute overflow-hidden rounded-md bg-muted",
+                  "start-[var(--hero-tile-mx)] top-[var(--hero-tile-my)] h-[var(--hero-tile-mh)] w-[var(--hero-tile-mw)] opacity-[var(--hero-tile-mo)]",
+                  "[@container(min-width:48rem)]:start-[var(--hero-tile-tx)] [@container(min-width:48rem)]:top-[var(--hero-tile-ty)] [@container(min-width:48rem)]:h-[var(--hero-tile-th)] [@container(min-width:48rem)]:w-[var(--hero-tile-tw)] [@container(min-width:48rem)]:opacity-[var(--hero-tile-to)]",
+                  "[@container(min-width:90rem)]:start-[var(--hero-tile-dx)] [@container(min-width:90rem)]:top-[var(--hero-tile-dy)] [@container(min-width:90rem)]:h-[var(--hero-tile-dh)] [@container(min-width:90rem)]:w-[var(--hero-tile-dw)] [@container(min-width:90rem)]:opacity-[var(--hero-tile-do)]",
+                  !place.mobile && "hidden",
+                  !place.tablet && "[@container(min-width:48rem)]:hidden",
+                  !place.mobile && place.tablet && "[@container(min-width:48rem)]:block",
+                  "[@container(min-width:90rem)]:block"
+                )}
+              >
+                {photo ? (
+                  <img src={photo.src} alt={photo.alt} decoding="async" className="absolute inset-0 size-full object-cover" />
+                ) : null}
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    </section>
+  )
+}
+
+/**
+ * The default copy, English and Arabic, as `locale` picks it. Spread it to
+ * change a few strings and keep the rest.
+ */
+export const heroPhotoConstellationCopy = COPY

package/registry/blocks/hero-photo-constellation/index.ts

@@ -0,0 +1,8 @@
+export {
+  HeroPhotoConstellation,
+  heroPhotoConstellationCopy,
+  type HeroPhotoConstellationAction,
+  type HeroPhotoConstellationCopy,
+  type HeroPhotoConstellationPhoto,
+  type HeroPhotoConstellationProps,
+} from "./HeroPhotoConstellation"