fulldev-ui 0.7.0 → 0.9.0

package/public/r/image.json

@@ -1,17 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "image",
-  "type": "registry:ui",
-  "files": [
-    {
-      "path": "src/components/ui/image/image.astro",
-      "content": "---\nimport { Image as AstroImage } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial<ComponentProps<typeof AstroImage>>\n\nconst { class: className, alt = \"\", src, ...props } = Astro.props\n---\n\n{\n  src && (\n    <AstroImage\n      class={cn(\"h-auto w-full\", className)}\n      alt={alt}\n      src={src}\n      inferSize={true}\n      {...(props as any)}\n    />\n  )\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/image/index.ts",
-      "content": "export { default as Image } from \"./image.astro\"\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/public/r/list.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "list",
-  "type": "registry:ui",
-  "files": [
-    {
-      "path": "src/components/ui/list/list.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends HTMLAttributes<\"ul\"> {}\n\nconst { class: className, ...props } = Astro.props\n\nconst slot = await Astro.slots.render(\"default\")\n---\n\n{\n  slot?.trim().length > 0 && (\n    <ul class={cn(\"list-disc space-y-2\", className)} {...props}>\n      <Fragment set:html={slot} />\n    </ul>\n  )\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/list/list-item.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\"\n\ninterface Props {\n  class?: string\n  icon?: boolean\n}\n\nconst { class: className, icon = true, ...props } = Astro.props\n\nconst slot = await Astro.slots.render(\"default\")\n---\n\n{\n  slot?.trim().length > 0 && (\n    <li\n      class={cn(\n        \"flex shrink-0 items-start gap-3 text-start not-first:mt-2 [&_svg]:shrink-0 [&_svg]:translate-y-[30%] [&_svg:not([class*='size-'])]:size-[1em]\",\n        className\n      )}\n      {...props}\n    >\n      <Fragment set:html={slot} />\n    </li>\n  )\n}\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/list/index.ts",
-      "content": "export { default as List } from \"./list.astro\"\nexport { default as ListItem } from \"./list-item.astro\"\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/public/r/native-carousel.json

@@ -1,37 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "native-carousel",
-  "type": "registry:ui",
-  "files": [
-    {
-      "path": "src/components/ui/native-carousel/native-carousel.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends HTMLAttributes<\"div\"> {\n  orientation?: \"horizontal\" | \"vertical\"\n}\n\nconst { class: className, orientation = \"horizontal\", ...props } = Astro.props\n---\n\n<div\n  class={cn(\"relative\", className)}\n  data-slot=\"native-carousel\"\n  data-orientation={orientation}\n  {...props}\n>\n  <slot />\n</div>\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/native-carousel/native-carousel-content.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends HTMLAttributes<\"div\"> {}\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  class={cn(\n    \"flex snap-x snap-mandatory overflow-x-auto scroll-smooth\",\n    \"scrollbar-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n    \"group-data-[orientation=vertical]/native-carousel:snap-y group-data-[orientation=vertical]/native-carousel:flex-col group-data-[orientation=vertical]/native-carousel:overflow-y-auto\",\n    className\n  )}\n  data-slot=\"native-carousel-content\"\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  // Add smooth scrolling behavior and snap support\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const carousels = document.querySelectorAll('[data-slot=\"native-carousel\"]')\n\n    carousels.forEach((carousel) => {\n      const content = carousel.querySelector(\n        '[data-slot=\"native-carousel-content\"]'\n      ) as HTMLElement\n      const prevButton = carousel.querySelector(\n        '[data-slot=\"native-carousel-previous\"]'\n      ) as HTMLButtonElement\n      const nextButton = carousel.querySelector(\n        '[data-slot=\"native-carousel-next\"]'\n      ) as HTMLButtonElement\n\n      if (!content) return\n\n      const orientation =\n        carousel.getAttribute(\"data-orientation\") || \"horizontal\"\n      const isVertical = orientation === \"vertical\"\n\n      const updateButtons = () => {\n        if (!prevButton || !nextButton) return\n\n        const scrollPos = isVertical ? content.scrollTop : content.scrollLeft\n        const maxScroll = isVertical\n          ? content.scrollHeight - content.clientHeight\n          : content.scrollWidth - content.clientWidth\n\n        prevButton.disabled = scrollPos <= 0\n        nextButton.disabled = scrollPos >= maxScroll - 1\n      }\n\n      const scroll = (direction: \"next\" | \"prev\") => {\n        const items = Array.from(\n          content.querySelectorAll('[data-slot=\"native-carousel-item\"]')\n        ) as HTMLElement[]\n\n        if (items.length === 0) return\n\n        const itemSize = isVertical\n          ? items[0].offsetHeight\n          : items[0].offsetWidth\n        const scrollAmount =\n          itemSize + parseFloat(getComputedStyle(items[0]).marginRight || \"0\")\n\n        const delta = direction === \"next\" ? scrollAmount : -scrollAmount\n\n        if (isVertical) {\n          content.scrollBy({ top: delta, behavior: \"smooth\" })\n        } else {\n          content.scrollBy({ left: delta, behavior: \"smooth\" })\n        }\n      }\n\n      if (prevButton) {\n        prevButton.addEventListener(\"click\", () => scroll(\"prev\"))\n      }\n\n      if (nextButton) {\n        nextButton.addEventListener(\"click\", () => scroll(\"next\"))\n      }\n\n      content.addEventListener(\"scroll\", updateButtons)\n      updateButtons()\n    })\n  })\n</script>\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/native-carousel/native-carousel-item.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends HTMLAttributes<\"div\"> {}\n\nconst { class: className, ...props } = Astro.props\n---\n\n<div\n  class={cn(\"min-w-0 shrink-0 grow-0 basis-full snap-start\", className)}\n  data-slot=\"native-carousel-item\"\n  {...props}\n>\n  <slot />\n</div>\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/native-carousel/native-carousel-next.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronRightIcon from \"lucide-static/icons/chevron-right.svg\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends Omit<HTMLAttributes<\"button\">, \"type\"> {}\n\nconst { class: className, ...props } = Astro.props\n---\n\n<button\n  type=\"button\"\n  class={cn(\n    \"border-input bg-background hover:bg-accent hover:text-accent-foreground absolute top-1/2 -right-12 z-10 flex size-8 -translate-y-1/2 items-center justify-center rounded-md border shadow-sm transition-colors disabled:pointer-events-none disabled:opacity-50\",\n    \"group-data-[orientation=vertical]/native-carousel:top-auto group-data-[orientation=vertical]/native-carousel:right-1/2 group-data-[orientation=vertical]/native-carousel:-bottom-12 group-data-[orientation=vertical]/native-carousel:-translate-x-1/2 group-data-[orientation=vertical]/native-carousel:translate-y-0 group-data-[orientation=vertical]/native-carousel:rotate-90\",\n    className\n  )}\n  data-slot=\"native-carousel-next\"\n  {...props}\n>\n  <ChevronRightIcon class=\"size-4\" aria-hidden=\"true\" />\n  <span class=\"sr-only\">Next slide</span>\n</button>\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/native-carousel/native-carousel-previous.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ChevronLeftIcon from \"lucide-static/icons/chevron-left.svg\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface Props extends Omit<HTMLAttributes<\"button\">, \"type\"> {}\n\nconst { class: className, ...props } = Astro.props\n---\n\n<button\n  type=\"button\"\n  class={cn(\n    \"border-input bg-background hover:bg-accent hover:text-accent-foreground absolute top-1/2 -left-12 z-10 flex size-8 -translate-y-1/2 items-center justify-center rounded-md border shadow-sm transition-colors disabled:pointer-events-none disabled:opacity-50\",\n    \"group-data-[orientation=vertical]/native-carousel:-top-12 group-data-[orientation=vertical]/native-carousel:left-1/2 group-data-[orientation=vertical]/native-carousel:-translate-x-1/2 group-data-[orientation=vertical]/native-carousel:translate-y-0 group-data-[orientation=vertical]/native-carousel:rotate-90\",\n    className\n  )}\n  data-slot=\"native-carousel-previous\"\n  {...props}\n>\n  <ChevronLeftIcon class=\"size-4\" aria-hidden=\"true\" />\n  <span class=\"sr-only\">Previous slide</span>\n</button>\n",
-      "type": "registry:ui"
-    },
-    {
-      "path": "src/components/ui/native-carousel/index.ts",
-      "content": "export { default as NativeCarousel } from \"./native-carousel.astro\"\nexport { default as NativeCarouselContent } from \"./native-carousel-content.astro\"\nexport { default as NativeCarouselItem } from \"./native-carousel-item.astro\"\nexport { default as NativeCarouselPrevious } from \"./native-carousel-previous.astro\"\nexport { default as NativeCarouselNext } from \"./native-carousel-next.astro\"\n",
-      "type": "registry:ui"
-    }
-  ]
-}

package/public/r/page.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "page",
-  "type": "registry:file",
-  "registryDependencies": [
-    "@fulldev/layout",
-    "@fulldev/blocks",
-    "@fulldev/components"
-  ],
-  "files": [
-    {
-      "path": "src/pages/[...page].astro",
-      "content": "---\nimport { getCollection, getEntry, render } from \"astro:content\"\n\nimport Layout from \"@/components/layout.astro\"\n\nexport async function getStaticPaths() {\n  const pages = await getCollection(\"pages\")\n  return pages.map((page) => {\n    return {\n      params: {\n        page: page.id === \"index\" ? undefined : page.id,\n      },\n      props: page,\n    }\n  })\n}\n\nconst page = Astro.props\nconst { layout } = page.data\nconst { Content } = await render(Astro.props)\n\nconst indexLayout = await getEntry(\"layouts\", \"index\")\nconst pageLayout = layout ? await getEntry(\"layouts\", layout) : undefined\n---\n\n<Layout\n  {...indexLayout?.data}\n  {...pageLayout?.data}\n  {...page.data}\n  sections={[\n    ...(page.data?.sections || []),\n    ...(pageLayout?.data?.sections || []),\n    ...(indexLayout?.data?.sections || []),\n  ]}\n>\n  <Content />\n</Layout>\n",
-      "type": "registry:file",
-      "target": "src/pages/[...page].astro"
-    }
-  ]
-}

package/public/r/pricings-1.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "pricings-1",
-  "type": "registry:block",
-  "registryDependencies": [
-    "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/list",
-    "@fulldev/price",
-    "@fulldev/section",
-    "@fulldev/tile"
-  ],
-  "files": [
-    {
-      "path": "src/components/blocks/pricings-1.astro",
-      "content": "---\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { List, ListItem } from \"@/components/ui/list\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionGrid,\n  SectionProse,\n} from \"@/components/ui/section\"\nimport {\n  Tile,\n  TileActions,\n  TileContent,\n  TileDescription,\n  TileTitle,\n} from \"@/components/ui/tile\"\n\ninterface Props {\n  class?: string\n  id?: string\n  items?: {\n    title?: string\n    description?: string\n    icon?: string\n    list?: string[]\n    links?: {\n      text?: string\n      href?: string\n      target?: string\n    }[]\n    price?: string | number\n    unit?: string\n  }[]\n}\n\nconst { class: className, id, items } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionProse>\n    <slot />\n  </SectionProse>\n  <SectionGrid>\n    {\n      items?.map(({ title, description, links, list, price, unit }) => (\n        <Tile variant=\"floating\" class=\"justify-between\">\n          <TileContent>\n            <TileTitle class=\"text-xl\">{title}</TileTitle>\n            <TileDescription>{description}</TileDescription>\n            <Price>\n              <PriceValue price={price} />\n              <PriceUnit>{unit}</PriceUnit>\n            </Price>\n            <List class=\"mt-4 text-sm\">\n              {list?.map((item) => (\n                <ListItem>\n                  <Icon class=\"-mt-0.5\" name=\"check\" />\n                  {item}\n                </ListItem>\n              ))}\n            </List>\n          </TileContent>\n          <TileActions class=\"mt-auto w-full\">\n            {links?.map(({ text, ...link }, i) => (\n              <Button\n                class=\"w-full\"\n                size=\"sm\"\n                variant={i === 0 ? \"default\" : \"outline\"}\n                {...link}\n              >\n                {text}\n              </Button>\n            ))}\n          </TileActions>\n        </Tile>\n      ))\n    }\n  </SectionGrid>\n</Section>\n",
-      "type": "registry:block"
-    }
-  ]
-}

package/public/r/pricings-2.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "pricings-2",
-  "type": "registry:block",
-  "registryDependencies": [
-    "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/list",
-    "@fulldev/price",
-    "@fulldev/section",
-    "@fulldev/tile"
-  ],
-  "files": [
-    {
-      "path": "src/components/blocks/pricings-2.astro",
-      "content": "---\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { List, ListItem } from \"@/components/ui/list\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionGrid,\n  SectionProse,\n  SectionSplit,\n} from \"@/components/ui/section\"\nimport {\n  Tile,\n  TileActions,\n  TileContent,\n  TileDescription,\n  TileTitle,\n} from \"@/components/ui/tile\"\n\ninterface Props {\n  class?: string\n  id?: string\n  items?: {\n    title?: string\n    description?: string\n    icon?: string\n    list?: string[]\n    links?: {\n      text?: string\n      href?: string\n      target?: string\n    }[]\n    price?: string | number\n    unit?: string\n  }[]\n}\n\nconst { class: className, id, items } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionSplit>\n    <SectionProse>\n      <slot />\n    </SectionProse>\n    <SectionGrid class=\"grid-cols-1\">\n      {\n        items?.map(({ title, description, links, list, price, unit }) => (\n          <Tile variant=\"floating\">\n            <TileContent>\n              <TileTitle>{title}</TileTitle>\n              <TileDescription>{description}</TileDescription>\n              <Price>\n                <PriceValue price={price} />\n                <PriceUnit>{unit}</PriceUnit>\n              </Price>\n              <List class=\"mt-4 text-sm\">\n                {list?.map((item) => (\n                  <ListItem>\n                    <Icon class=\"-mt-0.5\" name=\"check\" />\n                    {item}\n                  </ListItem>\n                ))}\n              </List>\n            </TileContent>\n            <TileActions class=\"mt-auto w-full\">\n              {links?.map(({ text, ...link }, i) => (\n                <Button\n                  class=\"w-full\"\n                  size=\"sm\"\n                  variant={i === 0 ? \"default\" : \"outline\"}\n                  {...link}\n                >\n                  {text}\n                </Button>\n              ))}\n            </TileActions>\n          </Tile>\n        ))\n      }\n    </SectionGrid>\n  </SectionSplit>\n</Section>\n",
-      "type": "registry:block"
-    }
-  ]
-}

package/public/r/pricings-3.json

@@ -1,20 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "pricings-3",
-  "type": "registry:block",
-  "registryDependencies": [
-    "@fulldev/button",
-    "@fulldev/icon",
-    "@fulldev/list",
-    "@fulldev/price",
-    "@fulldev/section",
-    "@fulldev/tile"
-  ],
-  "files": [
-    {
-      "path": "src/components/blocks/pricings-3.astro",
-      "content": "---\nimport { Button } from \"@/components/ui/button\"\nimport { Icon } from \"@/components/ui/icon\"\nimport { List, ListItem } from \"@/components/ui/list\"\nimport { Price, PriceUnit, PriceValue } from \"@/components/ui/price\"\nimport {\n  Section,\n  SectionProse,\n  SectionSpread,\n} from \"@/components/ui/section\"\nimport {\n  Tile,\n  TileActions,\n  TileContent,\n  TileDescription,\n  TileTitle,\n} from \"@/components/ui/tile\"\n\ninterface Props {\n  class?: string\n  id?: string\n  items?: {\n    title?: string\n    description?: string\n    icon?: string\n    list?: string[]\n    links?: {\n      text?: string\n      href?: string\n      target?: string\n    }[]\n    price?: string | number\n    unit?: string\n  }[]\n}\n\nconst { class: className, id, items } = Astro.props\n---\n\n<Section class={className} id={id}>\n  <SectionProse>\n    <slot />\n  </SectionProse>\n  <SectionSpread>\n    {\n      items?.map(({ title, description, links, list, price, unit }) => (\n        <Tile variant=\"floating\">\n          <TileContent>\n            <TileTitle>{title}</TileTitle>\n            <TileDescription>{description}</TileDescription>\n            <Price>\n              <PriceValue class=\"text-3xl\" price={price} />\n              <PriceUnit class=\"mt-3\">{unit}</PriceUnit>\n            </Price>\n            <List class=\"mt-4 text-sm\">\n              {list?.map((item) => (\n                <ListItem>\n                  <Icon class=\"-mt-0.5\" name=\"check\" />\n                  {item}\n                </ListItem>\n              ))}\n            </List>\n          </TileContent>\n          <TileActions class=\"mt-auto w-full\">\n            {links?.map(({ text, ...link }, i) => (\n              <Button\n                class=\"w-full\"\n                size=\"sm\"\n                variant={i === 0 ? \"default\" : \"outline\"}\n                {...link}\n              >\n                {text}\n              </Button>\n            ))}\n          </TileActions>\n        </Tile>\n      ))\n    }\n  </SectionSpread>\n</Section>\n",
-      "type": "registry:block"
-    }
-  ]
-}

package/site.json

@@ -1,12 +0,0 @@
-{
-  "site": "https://ui.full.dev",
-  "name": "fulldev/ui",
-  "defaultLocale": "en",
-  "locales": ["en"],
-  "favicon": "src/assets/logo-fulldev.svg",
-  "theme": "",
-  "fonts": {
-    "base": "Inter",
-    "heading": "Inter"
-  }
-}

package/src/assets/logo-fulldev.svg

@@ -1,4 +0,0 @@
-<svg width="480" height="480" viewBox="0 0 480 480" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="480" height="480" rx="60" fill="#EA580D"/>
-<path d="M328.233 157.369H302.616C291.608 157.369 283.499 159.973 278.291 165.182C273.201 170.272 269.769 177.433 267.993 186.666L264.947 204.954H319.484L310.074 261.772H255.482L235.29 383H159.867L180.109 261.772H141.75L151.16 204.954H189.596L192.887 185.246C196.083 165.478 202.593 149.083 212.418 136.062C222.361 123.042 234.612 113.276 249.172 106.766C263.85 100.255 279.711 97 296.757 97H338.25L328.233 157.369Z" fill="#F8FAFC"/>
-</svg>

package/src/components/_skeletons/split-grid.astro

@@ -1,47 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionGrid,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Tile, TileContent, TileMedia } from "@/components/ui/tile"
----
-
-<Section>
-  <SectionSplit>
-    <SectionContent>
-      <SectionProse>
-        <Skeleton class="h-12 w-8/10" />
-        <Skeleton class="h-4 w-9/10" />
-        <Skeleton class="h-4 w-9/10" />
-        <Skeleton class="h-4 w-7/10" />
-      </SectionProse>
-      <SectionActions>
-        <Skeleton class="h-9 w-32" />
-        <Skeleton class="h-9 w-32" />
-      </SectionActions>
-    </SectionContent>
-    <SectionGrid>
-      {
-        Array.from({ length: 6 }).map(() => (
-          <Tile>
-            <TileMedia>
-              <Skeleton class="aspect-video w-full" />
-            </TileMedia>
-            <TileContent>
-              <div class="space-y-2">
-                <Skeleton class="h-4 w-8/10" />
-                <Skeleton class="h-2 w-9/10" />
-                <Skeleton class="h-2 w-7/10" />
-              </div>
-            </TileContent>
-          </Tile>
-        ))
-      }
-    </SectionGrid>
-  </SectionSplit>
-</Section>

package/src/components/_skeletons/split-masonry.astro

@@ -1,57 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMasonry,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Tile, TileContent, TileMedia } from "@/components/ui/tile"
----
-
-<Section>
-  <SectionSplit>
-    <SectionContent>
-      <SectionProse>
-        <Skeleton class="h-12 w-8/10" />
-        <Skeleton class="h-4 w-9/10" />
-        <Skeleton class="h-4 w-9/10" />
-        <Skeleton class="h-4 w-7/10" />
-      </SectionProse>
-      <SectionActions>
-        <Skeleton class="h-9 w-32" />
-        <Skeleton class="h-9 w-32" />
-      </SectionActions>
-    </SectionContent>
-    <SectionMasonry>
-      {
-        Array.from({ length: 6 }).map((_, index) => (
-          <Tile>
-            <TileMedia>
-              <Skeleton
-                class:list={[
-                  `w-full`,
-                  {
-                    "h-32": index % 4 === 0,
-                    "h-56": index % 4 === 1,
-                    "h-44": index % 4 === 2,
-                    "h-34": index % 4 === 3,
-                  },
-                ]}
-              />
-            </TileMedia>
-            <TileContent>
-              <div class="space-y-2">
-                <Skeleton class="h-4 w-8/10" />
-                <Skeleton class="h-2 w-9/10" />
-                <Skeleton class="h-2 w-7/10" />
-              </div>
-            </TileContent>
-          </Tile>
-        ))
-      }
-    </SectionMasonry>
-  </SectionSplit>
-</Section>

package/src/components/_skeletons/split-media.astro

@@ -1,31 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-  SectionSplit,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
----
-
-<Section>
-  <SectionSplit>
-    <SectionContent>
-      <SectionProse>
-        <Skeleton class="h-12 w-8/10" />
-        <Skeleton class="h-4 w-9/10" />
-        <Skeleton class="h-4 w-9/10" />
-        <Skeleton class="h-4 w-7/10" />
-      </SectionProse>
-      <SectionActions>
-        <Skeleton class="h-9 w-32" />
-        <Skeleton class="h-9 w-32" />
-      </SectionActions>
-    </SectionContent>
-    <SectionMedia>
-      <Skeleton class="aspect-video w-full" />
-    </SectionMedia>
-  </SectionSplit>
-</Section>

package/src/components/_skeletons/spread-grid.astro

@@ -1,49 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionGrid,
-  SectionProse,
-  SectionSpread,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Tile, TileContent, TileMedia } from "@/components/ui/tile"
----
-
-<Section>
-  <SectionSpread>
-    <SectionContent>
-      <SectionProse>
-        <Skeleton class="mb-6 h-12 w-3/4" />
-        <Skeleton class="mt-2 h-4 w-full" />
-        <Skeleton class="mt-2 h-4 w-full" />
-        <Skeleton class="mt-2 h-4 w-80" />
-      </SectionProse>
-    </SectionContent>
-    <SectionContent>
-      <SectionActions>
-        <Skeleton class="h-8 w-32" />
-        <Skeleton class="h-8 w-32" />
-      </SectionActions>
-    </SectionContent>
-  </SectionSpread>
-  <SectionGrid>
-    {
-      Array.from({ length: 8 }).map(() => (
-        <Tile>
-          <TileMedia>
-            <Skeleton class="aspect-video w-full" />
-          </TileMedia>
-          <TileContent>
-            <div class="space-y-2">
-              <Skeleton class="h-4 w-8/10" />
-              <Skeleton class="h-2 w-9/10" />
-              <Skeleton class="h-2 w-7/10" />
-            </div>
-          </TileContent>
-        </Tile>
-      ))
-    }
-  </SectionGrid>
-</Section>

package/src/components/_skeletons/spread-masonry.astro

@@ -1,59 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMasonry,
-  SectionProse,
-  SectionSpread,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Tile, TileContent, TileMedia } from "@/components/ui/tile"
----
-
-<Section>
-  <SectionSpread>
-    <SectionContent>
-      <SectionProse>
-        <Skeleton class="mb-6 h-12 w-3/4" />
-        <Skeleton class="mt-2 h-4 w-full" />
-        <Skeleton class="mt-2 h-4 w-full" />
-        <Skeleton class="mt-2 h-4 w-80" />
-      </SectionProse>
-    </SectionContent>
-    <SectionContent>
-      <SectionActions>
-        <Skeleton class="h-8 w-32" />
-        <Skeleton class="h-8 w-32" />
-      </SectionActions>
-    </SectionContent>
-  </SectionSpread>
-  <SectionMasonry class="mt-8">
-    {
-      Array.from({ length: 8 }).map((_, index) => (
-        <Tile>
-          <TileMedia>
-            <Skeleton
-              class:list={[
-                `w-full`,
-                {
-                  "h-32": index % 4 === 0,
-                  "h-56": index % 4 === 1,
-                  "h-44": index % 4 === 2,
-                  "h-34": index % 4 === 3,
-                },
-              ]}
-            />
-          </TileMedia>
-          <TileContent>
-            <div class="space-y-2">
-              <Skeleton class="h-4 w-8/10" />
-              <Skeleton class="h-2 w-9/10" />
-              <Skeleton class="h-2 w-7/10" />
-            </div>
-          </TileContent>
-        </Tile>
-      ))
-    }
-  </SectionMasonry>
-</Section>

package/src/components/_skeletons/spread-media.astro

@@ -1,33 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-  SectionSpread,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
----
-
-<Section>
-  <SectionSpread>
-    <SectionContent>
-      <SectionProse>
-        <Skeleton class="mb-6 h-12 w-3/4" />
-        <Skeleton class="mt-2 h-4 w-full" />
-        <Skeleton class="mt-2 h-4 w-full" />
-        <Skeleton class="mt-2 h-4 w-80" />
-      </SectionProse>
-    </SectionContent>
-    <SectionContent>
-      <SectionActions>
-        <Skeleton class="h-8 w-32" />
-        <Skeleton class="h-8 w-32" />
-      </SectionActions>
-    </SectionContent>
-  </SectionSpread>
-  <SectionMedia>
-    <Skeleton class="aspect-video w-full" />
-  </SectionMedia>
-</Section>

package/src/components/_skeletons/stack-grid.astro

@@ -1,44 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionGrid,
-  SectionProse,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Tile, TileContent, TileMedia } from "@/components/ui/tile"
----
-
-<Section>
-  <SectionContent>
-    <SectionProse>
-      <Skeleton class="h-12 w-8/10" />
-      <Skeleton class="h-4 w-9/10" />
-      <Skeleton class="h-4 w-9/10" />
-      <Skeleton class="h-4 w-7/10" />
-    </SectionProse>
-    <SectionActions>
-      <Skeleton class="h-9 w-32" />
-      <Skeleton class="h-9 w-32" />
-    </SectionActions>
-  </SectionContent>
-  <SectionGrid>
-    {
-      Array.from({ length: 8 }).map(() => (
-        <Tile>
-          <TileMedia>
-            <Skeleton class="aspect-video w-full" />
-          </TileMedia>
-          <TileContent>
-            <div class="space-y-2">
-              <Skeleton class="h-4 w-8/10" />
-              <Skeleton class="h-2 w-9/10" />
-              <Skeleton class="h-2 w-7/10" />
-            </div>
-          </TileContent>
-        </Tile>
-      ))
-    }
-  </SectionGrid>
-</Section>

package/src/components/_skeletons/stack-masonry.astro

@@ -1,54 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMasonry,
-  SectionProse,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
-import { Tile, TileContent, TileMedia } from "@/components/ui/tile"
----
-
-<Section>
-  <SectionContent>
-    <SectionProse>
-      <Skeleton class="h-12 w-8/10" />
-      <Skeleton class="h-4 w-9/10" />
-      <Skeleton class="h-4 w-9/10" />
-      <Skeleton class="h-4 w-7/10" />
-    </SectionProse>
-    <SectionActions>
-      <Skeleton class="h-9 w-32" />
-      <Skeleton class="h-9 w-32" />
-    </SectionActions>
-  </SectionContent>
-  <SectionMasonry>
-    {
-      Array.from({ length: 8 }).map((_, index) => (
-        <Tile>
-          <TileMedia>
-            <Skeleton
-              class:list={[
-                `w-full`,
-                {
-                  "h-32": index % 4 === 0,
-                  "h-56": index % 4 === 1,
-                  "h-44": index % 4 === 2,
-                  "h-34": index % 4 === 3,
-                },
-              ]}
-            />
-          </TileMedia>
-          <TileContent>
-            <div class="space-y-2">
-              <Skeleton class="h-4 w-8/10" />
-              <Skeleton class="h-2 w-9/10" />
-              <Skeleton class="h-2 w-7/10" />
-            </div>
-          </TileContent>
-        </Tile>
-      ))
-    }
-  </SectionMasonry>
-</Section>

package/src/components/_skeletons/stack-media.astro

@@ -1,28 +0,0 @@
----
-import {
-  Section,
-  SectionActions,
-  SectionContent,
-  SectionMedia,
-  SectionProse,
-} from "@/components/ui/section"
-import { Skeleton } from "@/components/ui/skeleton"
----
-
-<Section>
-  <SectionContent>
-    <SectionProse>
-      <Skeleton class="h-12 w-8/10" />
-      <Skeleton class="h-4 w-9/10" />
-      <Skeleton class="h-4 w-9/10" />
-      <Skeleton class="h-4 w-7/10" />
-    </SectionProse>
-    <SectionActions>
-      <Skeleton class="h-9 w-32" />
-      <Skeleton class="h-9 w-32" />
-    </SectionActions>
-  </SectionContent>
-  <SectionMedia>
-    <Skeleton class="aspect-video w-full" />
-  </SectionMedia>
-</Section>