fix: define component Props type instead of typecasting Astro.props

This surfaces some type errors in props being passed to some components,
particularly in the way Features passes the classes props.

src/components/ui/Background.astro

@@ -1,4 +1,8 @@
 ---
+export interface Props {
+  isDark?: boolean
+}
+
 const { isDark = false } = Astro.props;
 ---
 

src/components/ui/Button.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { twMerge } from 'tailwind-merge';
-import type { CallToAction } from '~/types';
+import type { CallToAction as Props } from '~/types';
 
 const {
   variant = 'secondary',
@@ -11,7 +11,7 @@ const {
   class: className = '',
   type,
   ...rest
-} = Astro.props as CallToAction;
+} = Astro.props;
 
 const variants = {
   primary: 'btn-primary',

src/components/ui/Form.astro

@@ -1,8 +1,8 @@
 ---
-import type { Form } from '~/types';
+import type { Form as Props } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
-const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form;
+const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props;
 ---
 
 <form>

src/components/ui/Headline.astro

@@ -1,5 +1,5 @@
 ---
-import type { Headline } from "~/types";
+import type { Headline as Props } from "~/types";
 import { twMerge } from "tailwind-merge";
 
 const {
@@ -7,7 +7,7 @@ const {
   subtitle = await Astro.slots.render("subtitle"),
   tagline,
   classes = {},
-} = Astro.props as Headline;
+} = Astro.props;
 
 const {
   container: containerClass = "max-w-3xl",

src/components/ui/ItemGrid.astro

@@ -1,10 +1,10 @@
 ---
+import type { ItemGrid as Props } from '~/types';
 import { twMerge } from 'tailwind-merge';
-import type { ItemGrid } from '~/types';
 import Button from './Button.astro';
 import { Icon } from 'astro-icon/components';
 
-const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
+const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
 
 const {
   container: containerClass = '',

src/components/ui/ItemGrid2.astro

@@ -1,7 +1,7 @@
 ---
+import type { ItemGrid as Props } from "~/types";
 import { Icon } from "astro-icon/components";
 import { twMerge } from "tailwind-merge";
-import type { ItemGrid } from "~/types";
 import Button from "./Button.astro";
 
 const {
@@ -9,7 +9,7 @@ const {
   columns,
   defaultIcon = "",
   classes = {},
-} = Astro.props as ItemGrid;
+} = Astro.props;
 
 const {
   container: containerClass = "",

src/components/ui/WidgetWrapper.astro

@@ -1,7 +1,14 @@
 ---
+import type { HTMLTag } from "astro/types";
+import type { Widget } from "~/types";
 import { twMerge } from "tailwind-merge";
 import Background from "./Background.astro";
 
+export interface Props extends Widget {
+  containerClass?: string;
+  ["as"]?: HTMLTag;
+}
+
 const { id, isDark = false, containerClass = "", bg, as = "section" } = Astro.props;
 
 const WrapperTag = as;

src/components/widgets/Brands.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon/components';
-import type { Brands } from '~/types';
+import type { Brands as Props } from '~/types';
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 const {
@@ -13,7 +13,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Brands;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/CallToAction.astro

@@ -2,7 +2,7 @@
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
 import type { CallToAction, Widget } from '~/types';
 import Headline from '~/components/ui/Headline.astro';
-import Button from "~/components/ui/Button.astro"
+import Button from '~/components/ui/Button.astro';
 
 interface Props extends Widget {
   title?: string;
@@ -22,7 +22,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Props;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Contact.astro

@@ -2,7 +2,7 @@
 import FormContainer from '~/components/ui/Form.astro';
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Contact } from '~/types';
+import type { Contact as Props } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -18,7 +18,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Contact;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Content.astro

@@ -1,5 +1,5 @@
 ---
-import type { Content } from '~/types';
+import type { Content as Props } from '~/types';
 import Headline from '../ui/Headline.astro';
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
 import Image from '~/components/common/Image.astro';
@@ -22,7 +22,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Content;
+} = Astro.props;
 ---
 
 <WidgetWrapper

src/components/widgets/FAQs.astro

@@ -2,7 +2,7 @@
 import Headline from '~/components/ui/Headline.astro';
 import ItemGrid from '~/components/ui/ItemGrid.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Faqs } from '~/types';
+import type { Faqs as Props } from '~/types';
 
 const {
   title = '',
@@ -15,7 +15,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Faqs;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Features.astro

@@ -2,7 +2,7 @@
 import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
 import ItemGrid from "~/components/ui/ItemGrid.astro";
 import Headline from "~/components/ui/Headline.astro";
-import type { Features } from "~/types";
+import type { Features as Props } from "~/types";
 
 const {
   title = await Astro.slots.render("title"),
@@ -17,7 +17,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render("bg"),
-} = Astro.props as Features;
+} = Astro.props;
 ---
 
 <WidgetWrapper

src/components/widgets/Features2.astro

@@ -2,7 +2,7 @@
 import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
 import Headline from "~/components/ui/Headline.astro";
 import ItemGrid2 from "~/components/ui/ItemGrid2.astro";
-import type { Features } from "~/types";
+import type { Features as Props } from "~/types";
 
 const {
   title = await Astro.slots.render("title"),
@@ -16,7 +16,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render("bg"),
-} = Astro.props as Features;
+} = Astro.props;
 ---
 
 <WidgetWrapper

src/components/widgets/Features3.astro

@@ -3,7 +3,7 @@ import Headline from '~/components/ui/Headline.astro';
 import ItemGrid from '~/components/ui/ItemGrid.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Image from '~/components/common/Image.astro';
-import type { Features } from '~/types';
+import type { Features as Props } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -20,7 +20,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Features;
+} = Astro.props;
 ---
 
 <WidgetWrapper

src/components/widgets/HeroText.astro

@@ -1,6 +1,16 @@
 ---
+import type { CallToAction } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
+export interface Props {
+  title?: string;
+  subtitle?: string;
+  tagline?: string;
+  content?: string;
+  callToAction?: string | CallToAction;
+  callToAction2?: string | CallToAction;
+}
+
 const {
   title = await Astro.slots.render('title'),
   subtitle = await Astro.slots.render('subtitle'),

src/components/widgets/Pricing.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
 import Button from '~/components/ui/Button.astro';
 import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import type { Pricing } from '~/types';
+import type { Pricing as Props } from '~/types';
 
 const {
   title = '',
@@ -15,7 +15,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Pricing;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-7xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Stats.astro

@@ -1,5 +1,5 @@
 ---
-import type { Stats } from '~/types';
+import type { Stats as Props } from '~/types';
 import WidgetWrapper from '../ui/WidgetWrapper.astro';
 import Headline from '../ui/Headline.astro';
 import { Icon } from 'astro-icon/components';
@@ -14,7 +14,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Stats;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Steps.astro

@@ -3,7 +3,7 @@ import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Timeline from '~/components/ui/Timeline.astro';
 import Headline from '~/components/ui/Headline.astro';
 import Image from '~/components/common/Image.astro';
-import type { Steps } from '~/types';
+import type { Steps as Props } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -17,7 +17,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Steps;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Steps2.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Headline from '~/components/ui/Headline.astro';
 import Button from '~/components/ui/Button.astro';
-import type { Steps } from '~/types';
+import type { Steps as Props } from '~/types';
 
 const {
   title = await Astro.slots.render('title'),
@@ -17,7 +17,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Steps;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>

src/components/widgets/Testimonials.astro

@@ -3,7 +3,7 @@ import Headline from '~/components/ui/Headline.astro';
 import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
 import Button from '~/components/ui/Button.astro';
 import Image from '~/components/common/Image.astro';
-import type { Testimonials } from '~/types';
+import type { Testimonials as Props } from '~/types';
 
 
 const {
@@ -17,7 +17,7 @@ const {
   isDark = false,
   classes = {},
   bg = await Astro.slots.render('bg'),
-} = Astro.props as Testimonials;
+} = Astro.props;
 ---
 
 <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-6xl mx-auto ${classes?.container ?? ''}`} bg={bg}>