Add responsive Image component and preload existing fonts

.changeset/responsive-image-formats.md

@@ -0,0 +1,5 @@
+---
+"fulldev-ui": minor
+---
+
+Add an optional Image component with Astro Picture formats, responsive sources and an unchanged single-image default.

public/_redirects

@@ -229,12 +229,11 @@
 /blocks/pricings/  /blocks/pricing/  301!
 
 /docs/components/auto-form/  /components/form/  301!
-/docs/components/image/  /components/  301!
+/docs/components/image/  /components/image/  301!
 /docs/components/list/  /components/typography/  301!
 /docs/components/  /components/  301!
 /docs/components/*  /components/:splat  301!
 /components/gradient/  /components/  301!
-/components/image/  /components/  301!
 /components/tile/  /components/  301!
 
 /docs/cli/  /docs/installation/  301!

public/r/styles/base-luma/components.json

@@ -31,6 +31,7 @@
     "@fulldev/header",
     "@fulldev/hover-card",
     "@fulldev/icon",
+    "@fulldev/image",
     "@fulldev/input",
     "@fulldev/input-group",
     "@fulldev/item",

public/r/styles/base-luma/image.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "image",
+  "title": "Image",
+  "description": "An optional image with responsive picture formats for existing Astro blocks.",
+  "files": [
+    {
+      "path": "src/components/ui/image/image.astro",
+      "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial<ComponentProps<typeof AstroPicture>> & {\n  inferSize?: boolean\n}\n\nconst {\n  class: className,\n  alt,\n  src,\n  inferSize = true,\n  formats,\n  fallbackFormat,\n  pictureAttributes,\n  ...props\n} = Astro.props\n\nconst imageProps = {\n  ...props,\n  src,\n  alt: alt ?? \"\",\n  class: cn(\"h-auto w-full\", className),\n  inferSize,\n} as ComponentProps<typeof AstroImage>\nconst pictureProps = {\n  ...imageProps,\n  formats,\n  fallbackFormat,\n  pictureAttributes: {\n    ...pictureAttributes,\n    class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n  },\n} as ComponentProps<typeof AstroPicture>\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && <AstroPicture {...pictureProps} />}\n{src && !usePicture && <AstroImage {...imageProps} />}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/image/index.ts",
+      "content": "export { default as Image } from \"./image.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/image/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

public/r/styles/base-luma/registry.json

@@ -919,6 +919,26 @@
         }
       ]
     },
+    {
+      "name": "image",
+      "type": "registry:ui",
+      "title": "Image",
+      "description": "An optional image with responsive picture formats for existing Astro blocks.",
+      "categories": [
+        "ui"
+      ],
+      "docs": "https://ui.full.dev/components/image/",
+      "files": [
+        {
+          "path": "src/components/ui/image/image.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/image/index.ts",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "input",
       "type": "registry:ui",
@@ -2547,6 +2567,7 @@
         "@fulldev/header",
         "@fulldev/hover-card",
         "@fulldev/icon",
+        "@fulldev/image",
         "@fulldev/input",
         "@fulldev/input-group",
         "@fulldev/item",

public/r/styles/base-lyra/components.json

@@ -31,6 +31,7 @@
     "@fulldev/header",
     "@fulldev/hover-card",
     "@fulldev/icon",
+    "@fulldev/image",
     "@fulldev/input",
     "@fulldev/input-group",
     "@fulldev/item",

public/r/styles/base-lyra/image.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "image",
+  "title": "Image",
+  "description": "An optional image with responsive picture formats for existing Astro blocks.",
+  "files": [
+    {
+      "path": "src/components/ui/image/image.astro",
+      "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial<ComponentProps<typeof AstroPicture>> & {\n  inferSize?: boolean\n}\n\nconst {\n  class: className,\n  alt,\n  src,\n  inferSize = true,\n  formats,\n  fallbackFormat,\n  pictureAttributes,\n  ...props\n} = Astro.props\n\nconst imageProps = {\n  ...props,\n  src,\n  alt: alt ?? \"\",\n  class: cn(\"h-auto w-full\", className),\n  inferSize,\n} as ComponentProps<typeof AstroImage>\nconst pictureProps = {\n  ...imageProps,\n  formats,\n  fallbackFormat,\n  pictureAttributes: {\n    ...pictureAttributes,\n    class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n  },\n} as ComponentProps<typeof AstroPicture>\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && <AstroPicture {...pictureProps} />}\n{src && !usePicture && <AstroImage {...imageProps} />}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/image/index.ts",
+      "content": "export { default as Image } from \"./image.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/image/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

public/r/styles/base-lyra/registry.json

@@ -919,6 +919,26 @@
         }
       ]
     },
+    {
+      "name": "image",
+      "type": "registry:ui",
+      "title": "Image",
+      "description": "An optional image with responsive picture formats for existing Astro blocks.",
+      "categories": [
+        "ui"
+      ],
+      "docs": "https://ui.full.dev/components/image/",
+      "files": [
+        {
+          "path": "src/components/ui/image/image.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/image/index.ts",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "input",
       "type": "registry:ui",
@@ -2547,6 +2567,7 @@
         "@fulldev/header",
         "@fulldev/hover-card",
         "@fulldev/icon",
+        "@fulldev/image",
         "@fulldev/input",
         "@fulldev/input-group",
         "@fulldev/item",

public/r/styles/base-maia/components.json

@@ -31,6 +31,7 @@
     "@fulldev/header",
     "@fulldev/hover-card",
     "@fulldev/icon",
+    "@fulldev/image",
     "@fulldev/input",
     "@fulldev/input-group",
     "@fulldev/item",

public/r/styles/base-maia/image.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "image",
+  "title": "Image",
+  "description": "An optional image with responsive picture formats for existing Astro blocks.",
+  "files": [
+    {
+      "path": "src/components/ui/image/image.astro",
+      "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial<ComponentProps<typeof AstroPicture>> & {\n  inferSize?: boolean\n}\n\nconst {\n  class: className,\n  alt,\n  src,\n  inferSize = true,\n  formats,\n  fallbackFormat,\n  pictureAttributes,\n  ...props\n} = Astro.props\n\nconst imageProps = {\n  ...props,\n  src,\n  alt: alt ?? \"\",\n  class: cn(\"h-auto w-full\", className),\n  inferSize,\n} as ComponentProps<typeof AstroImage>\nconst pictureProps = {\n  ...imageProps,\n  formats,\n  fallbackFormat,\n  pictureAttributes: {\n    ...pictureAttributes,\n    class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n  },\n} as ComponentProps<typeof AstroPicture>\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && <AstroPicture {...pictureProps} />}\n{src && !usePicture && <AstroImage {...imageProps} />}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/image/index.ts",
+      "content": "export { default as Image } from \"./image.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/image/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

public/r/styles/base-maia/registry.json

@@ -919,6 +919,26 @@
         }
       ]
     },
+    {
+      "name": "image",
+      "type": "registry:ui",
+      "title": "Image",
+      "description": "An optional image with responsive picture formats for existing Astro blocks.",
+      "categories": [
+        "ui"
+      ],
+      "docs": "https://ui.full.dev/components/image/",
+      "files": [
+        {
+          "path": "src/components/ui/image/image.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/image/index.ts",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "input",
       "type": "registry:ui",
@@ -2547,6 +2567,7 @@
         "@fulldev/header",
         "@fulldev/hover-card",
         "@fulldev/icon",
+        "@fulldev/image",
         "@fulldev/input",
         "@fulldev/input-group",
         "@fulldev/item",

public/r/styles/base-mira/components.json

@@ -31,6 +31,7 @@
     "@fulldev/header",
     "@fulldev/hover-card",
     "@fulldev/icon",
+    "@fulldev/image",
     "@fulldev/input",
     "@fulldev/input-group",
     "@fulldev/item",

public/r/styles/base-mira/image.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "image",
+  "title": "Image",
+  "description": "An optional image with responsive picture formats for existing Astro blocks.",
+  "files": [
+    {
+      "path": "src/components/ui/image/image.astro",
+      "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial<ComponentProps<typeof AstroPicture>> & {\n  inferSize?: boolean\n}\n\nconst {\n  class: className,\n  alt,\n  src,\n  inferSize = true,\n  formats,\n  fallbackFormat,\n  pictureAttributes,\n  ...props\n} = Astro.props\n\nconst imageProps = {\n  ...props,\n  src,\n  alt: alt ?? \"\",\n  class: cn(\"h-auto w-full\", className),\n  inferSize,\n} as ComponentProps<typeof AstroImage>\nconst pictureProps = {\n  ...imageProps,\n  formats,\n  fallbackFormat,\n  pictureAttributes: {\n    ...pictureAttributes,\n    class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n  },\n} as ComponentProps<typeof AstroPicture>\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && <AstroPicture {...pictureProps} />}\n{src && !usePicture && <AstroImage {...imageProps} />}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/image/index.ts",
+      "content": "export { default as Image } from \"./image.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/image/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

public/r/styles/base-mira/registry.json

@@ -919,6 +919,26 @@
         }
       ]
     },
+    {
+      "name": "image",
+      "type": "registry:ui",
+      "title": "Image",
+      "description": "An optional image with responsive picture formats for existing Astro blocks.",
+      "categories": [
+        "ui"
+      ],
+      "docs": "https://ui.full.dev/components/image/",
+      "files": [
+        {
+          "path": "src/components/ui/image/image.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/image/index.ts",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "input",
       "type": "registry:ui",
@@ -2547,6 +2567,7 @@
         "@fulldev/header",
         "@fulldev/hover-card",
         "@fulldev/icon",
+        "@fulldev/image",
         "@fulldev/input",
         "@fulldev/input-group",
         "@fulldev/item",

public/r/styles/base-nova/components.json

@@ -31,6 +31,7 @@
     "@fulldev/header",
     "@fulldev/hover-card",
     "@fulldev/icon",
+    "@fulldev/image",
     "@fulldev/input",
     "@fulldev/input-group",
     "@fulldev/item",

public/r/styles/base-nova/image.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "image",
+  "title": "Image",
+  "description": "An optional image with responsive picture formats for existing Astro blocks.",
+  "files": [
+    {
+      "path": "src/components/ui/image/image.astro",
+      "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial<ComponentProps<typeof AstroPicture>> & {\n  inferSize?: boolean\n}\n\nconst {\n  class: className,\n  alt,\n  src,\n  inferSize = true,\n  formats,\n  fallbackFormat,\n  pictureAttributes,\n  ...props\n} = Astro.props\n\nconst imageProps = {\n  ...props,\n  src,\n  alt: alt ?? \"\",\n  class: cn(\"h-auto w-full\", className),\n  inferSize,\n} as ComponentProps<typeof AstroImage>\nconst pictureProps = {\n  ...imageProps,\n  formats,\n  fallbackFormat,\n  pictureAttributes: {\n    ...pictureAttributes,\n    class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n  },\n} as ComponentProps<typeof AstroPicture>\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && <AstroPicture {...pictureProps} />}\n{src && !usePicture && <AstroImage {...imageProps} />}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/image/index.ts",
+      "content": "export { default as Image } from \"./image.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/image/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}

public/r/styles/base-nova/registry.json

@@ -919,6 +919,26 @@
         }
       ]
     },
+    {
+      "name": "image",
+      "type": "registry:ui",
+      "title": "Image",
+      "description": "An optional image with responsive picture formats for existing Astro blocks.",
+      "categories": [
+        "ui"
+      ],
+      "docs": "https://ui.full.dev/components/image/",
+      "files": [
+        {
+          "path": "src/components/ui/image/image.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/image/index.ts",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "input",
       "type": "registry:ui",
@@ -2547,6 +2567,7 @@
         "@fulldev/header",
         "@fulldev/hover-card",
         "@fulldev/icon",
+        "@fulldev/image",
         "@fulldev/input",
         "@fulldev/input-group",
         "@fulldev/item",

public/r/styles/base-rhea/components.json

@@ -31,6 +31,7 @@
     "@fulldev/header",
     "@fulldev/hover-card",
     "@fulldev/icon",
+    "@fulldev/image",
     "@fulldev/input",
     "@fulldev/input-group",
     "@fulldev/item",

public/r/styles/base-rhea/image.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "image",
+  "title": "Image",
+  "description": "An optional image with responsive picture formats for existing Astro blocks.",
+  "files": [
+    {
+      "path": "src/components/ui/image/image.astro",
+      "content": "---\nimport { Image as AstroImage, Picture as AstroPicture } from \"astro:assets\"\nimport type { ComponentProps } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = Partial<ComponentProps<typeof AstroPicture>> & {\n  inferSize?: boolean\n}\n\nconst {\n  class: className,\n  alt,\n  src,\n  inferSize = true,\n  formats,\n  fallbackFormat,\n  pictureAttributes,\n  ...props\n} = Astro.props\n\nconst imageProps = {\n  ...props,\n  src,\n  alt: alt ?? \"\",\n  class: cn(\"h-auto w-full\", className),\n  inferSize,\n} as ComponentProps<typeof AstroImage>\nconst pictureProps = {\n  ...imageProps,\n  formats,\n  fallbackFormat,\n  pictureAttributes: {\n    ...pictureAttributes,\n    class: cn(\"contents [&>source]:hidden\", pictureAttributes?.class),\n  },\n} as ComponentProps<typeof AstroPicture>\nconst usePicture = !!formats?.length\n---\n\n{src && usePicture && <AstroPicture {...pictureProps} />}\n{src && !usePicture && <AstroImage {...imageProps} />}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/image/index.ts",
+      "content": "export { default as Image } from \"./image.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "docs": "https://ui.full.dev/components/image/",
+  "categories": [
+    "ui"
+  ],
+  "type": "registry:ui"
+}