webcoreui 1.4.0 → 1.5.0-beta.1

package/README.md

@@ -123,6 +123,9 @@ export default defineConfig({
 })
 ```
 
+> [!TIP]
+> We also recommend adding [`astro-purgecss`](https://www.npmjs.com/package/astro-purgecss) to improve your CSS bundle size.
+
 Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
@@ -146,7 +149,9 @@ The `setup` mixin can also accept the following options:
 | `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
 | `includeTooltip` | `true` | Adds styles for using tooltips.
 | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
-| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness.
+| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness. |
+| `theme` | `dark` | Sets the default theme. Read more about available themes [here](https://webcoreui.dev/docs/themes). |
+| `themes` | `()` | Pass a map to enable multiple themes. Values can be arbitrary CSS selectors that actives the theme. |
 
 Default component styles can be changed by overriding the following CSS variables:
 
@@ -253,6 +258,15 @@ html body {
 }
 ```
 
+Depending on your installed blocks, you can also use the following variables to override default block styles:
+
+```scss
+html body {
+    // Error page
+    --w-error-page-type-color: var(--w-color-info);
+}
+```
+
 ### Using Components
 
 Start using Webcore components in your code by importing them:

package/astro.d.ts

@@ -1,59 +1,61 @@
-import type { AccordionProps as WAccordionProps } from './components/Accordion/accordion'
-import type { AlertProps as WAlertProps } from './components/Alert/alert'
-import type { AspectRatioProps as WAspectRatioProps } from './components/AspectRatio/aspectratio'
-import type { AvatarProps as WAvatarProps } from './components/Avatar/avatar'
-import type { BadgeProps as WBadgeProps } from './components/Badge/badge'
-import type { BannerProps as WBannerProps } from './components/Banner/banner'
-import type { BottomNavigationProps as WBottomNavigationProps } from './components/BottomNavigation/bottomnavigation'
-import type { BreadcrumbProps as WBreadcrumbProps } from './components/Breadcrumb/breadcrumb'
-import type { ButtonProps as WButtonProps } from './components/Button/button'
-import type { CardProps as WCardProps } from './components/Card/card'
-import type { CarouselProps as WCarouselProps } from './components/Carousel/carousel'
-import type { CheckboxProps as WCheckboxProps } from './components/Checkbox/checkbox'
-import type { CollapsibleProps as WCollapsibleProps } from './components/Collapsible/collapsible'
-import type { ConditionalWrapperProps as WConditionalWrapperProps } from './components/ConditionalWrapper/conditionalwrapper'
-import type { ContextMenuProps as WContextMenuProps } from './components/ContextMenu/contextmenu'
-import type { CopyProps as WCopyProps } from './components/Copy/copy'
-import type { CounterProps as WCounterProps } from './components/Counter/counter'
-import type { DataTableProps as WDataTableProps } from './components/DataTable/datatable'
-import type { FlexProps as WFlexProps } from './components/Flex/flex'
-import type { FooterProps as WFooterProps } from './components/Footer/footer'
-import type { GridProps as WGridProps } from './components/Grid/grid'
-import type { GroupProps as WGroupProps } from './components/Group/group'
-import type { IconProps as WIconProps } from './components/Icon/icon'
-import type { ImageProps as WImageProps } from './components/Image/image'
-import type { ImageLoaderProps as WImageLoaderProps } from './components/ImageLoader/imageloader'
-import type { InputProps as WInputProps } from './components/Input/input'
-import type { KbdProps as WKbdProps } from './components/Kbd/kbd'
-import type { ListProps as WListProps } from './components/List/list'
-import type { MasonryProps as WMasonryProps } from './components/Masonry/masonry'
-import type { MenuProps as WMenuProps } from './components/Menu/menu'
-import type { ModalProps as WModalProps } from './components/Modal/modal'
-import type { OTPInputProps as WOTPInputProps } from './components/OTPInput/otpinput'
-import type { PaginationProps as WPaginationProps } from './components/Pagination/pagination'
-import type { PopoverProps as WPopoverProps } from './components/Popover/popover'
-import type { ProgressProps as WProgressProps } from './components/Progress/progress'
-import type { RadioProps as WRadioProps } from './components/Radio/radio'
-import type { RangeSliderProps as WRangeSliderProps } from './components/RangeSlider/rangeslider'
-import type { RatingProps as WRatingProps } from './components/Rating/rating'
-import type { RibbonProps as WRibbonProps } from './components/Ribbon/ribbon'
-import type { SelectProps as WSelectProps } from './components/Select/select'
-import type { SheetProps as WSheetProps } from './components/Sheet/sheet'
-import type { SidebarProps as WSidebarProps } from './components/Sidebar/sidebar'
-import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
-import type { SliderProps as WSliderProps } from './components/Slider/slider'
-import type { SpeedDialProps as WSpeedDialProps } from './components/SpeedDial/speeddial'
-import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
-import type { SpoilerProps as WSpoilerProps } from './components/Spoiler/spoiler'
-import type { StepperProps as WStepperProps } from './components/Stepper/stepper'
-import type { SwitchProps as WSwitchProps } from './components/Switch/switch'
-import type { TableProps as WTableProps } from './components/Table/table'
-import type { TabsProps as WTabsProps } from './components/Tabs/tabs'
-import type { TextareaProps as WTextareaProps } from './components/Textarea/textarea'
-import type { ThemeSwitcherProps as WThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
-import type { TimelineProps as WTimelineProps } from './components/Timeline/timeline'
-import type { TimelineItemProps as WTimelineItemProps } from './components/TimelineItem/timelineitem'
-import type { ToastProps as WToastProps } from './components/Toast/toast'
+import type { Props as WAccordionProps } from './components/Accordion/Accordion.astro'
+import type { Props as WAlertProps } from './components/Alert/Alert.astro'
+import type { Props as WAspectRatioProps } from './components/AspectRatio/AspectRatio.astro'
+import type { Props as WAvatarProps } from './components/Avatar/Avatar.astro'
+import type { Props as WBadgeProps } from './components/Badge/Badge.astro'
+import type { Props as WBannerProps } from './components/Banner/Banner.astro'
+import type { Props as WBottomNavigationProps } from './components/BottomNavigation/BottomNavigation.astro'
+import type { Props as WBreadcrumbProps } from './components/Breadcrumb/Breadcrumb.astro'
+import type { Props as WButtonProps } from './components/Button/Button.astro'
+import type { Props as WCardProps } from './components/Card/Card.astro'
+import type { Props as WCarouselProps } from './components/Carousel/Carousel.astro'
+import type { Props as WCarouselItemProps } from './components/CarouselItem/CarouselItem.astro'
+import type { Props as WCheckboxProps } from './components/Checkbox/Checkbox.astro'
+import type { Props as WCollapsibleProps } from './components/Collapsible/Collapsible.astro'
+import type { Props as WConditionalWrapperProps } from './components/ConditionalWrapper/ConditionalWrapper.astro'
+import type { Props as WContextMenuProps } from './components/ContextMenu/ContextMenu.astro'
+import type { Props as WCopyProps } from './components/Copy/Copy.astro'
+import type { Props as WCounterProps } from './components/Counter/Counter.astro'
+import type { Props as WDataTableProps } from './components/DataTable/DataTable.astro'
+import type { Props as WFlexProps } from './components/Flex/Flex.astro'
+import type { Props as WFooterProps } from './components/Footer/Footer.astro'
+import type { Props as WGridProps } from './components/Grid/Grid.astro'
+import type { Props as WGroupProps } from './components/Group/Group.astro'
+import type { Props as WIconProps } from './components/Icon/Icon.astro'
+import type { Props as WImageProps } from './components/Image/Image.astro'
+import type { Props as WImageLoaderProps } from './components/ImageLoader/ImageLoader.astro'
+import type { Props as WInputProps } from './components/Input/Input.astro'
+import type { Props as WKbdProps } from './components/Kbd/Kbd.astro'
+import type { Props as WListProps } from './components/List/List.astro'
+import type { Props as WMasonryProps } from './components/Masonry/Masonry.astro'
+import type { Props as WMenuProps } from './components/Menu/Menu.astro'
+import type { Props as WModalProps } from './components/Modal/Modal.astro'
+import type { Props as WOTPInputProps } from './components/OTPInput/OTPInput.astro'
+import type { Props as WPaginationProps } from './components/Pagination/Pagination.astro'
+import type { Props as WPopoverProps } from './components/Popover/Popover.astro'
+import type { Props as WProgressProps } from './components/Progress/Progress.astro'
+import type { Props as WRadioProps } from './components/Radio/Radio.astro'
+import type { Props as WRangeSliderProps } from './components/RangeSlider/RangeSlider.astro'
+import type { Props as WRatingProps } from './components/Rating/Rating.astro'
+import type { Props as WRibbonProps } from './components/Ribbon/Ribbon.astro'
+import type { Props as WSelectProps } from './components/Select/Select.astro'
+import type { Props as WSheetProps } from './components/Sheet/Sheet.astro'
+import type { Props as WSidebarProps } from './components/Sidebar/Sidebar.astro'
+import type { Props as WSkeletonProps } from './components/Skeleton/Skeleton.astro'
+import type { Props as WSliderProps } from './components/Slider/Slider.astro'
+import type { Props as WSpeedDialProps } from './components/SpeedDial/SpeedDial.astro'
+import type { Props as WSpinnerProps } from './components/Spinner/Spinner.astro'
+import type { Props as WSpoilerProps } from './components/Spoiler/Spoiler.astro'
+import type { Props as WStepperProps } from './components/Stepper/Stepper.astro'
+import type { Props as WSwitchProps } from './components/Switch/Switch.astro'
+import type { Props as WTabProps } from './components/Tab/Tab.astro'
+import type { Props as WTableProps } from './components/Table/Table.astro'
+import type { Props as WTabsProps } from './components/Tabs/Tabs.astro'
+import type { Props as WTextareaProps } from './components/Textarea/Textarea.astro'
+import type { Props as WThemeSwitcherProps } from './components/ThemeSwitcher/ThemeSwitcher.astro'
+import type { Props as WTimelineProps } from './components/Timeline/Timeline.astro'
+import type { Props as WTimelineItemProps } from './components/TimelineItem/TimelineItem.astro'
+import type { Props as WToastProps } from './components/Toast/Toast.astro'
 
 import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
 import type { ListEventType as WListEventType } from './components/List/list.ts'
@@ -73,6 +75,7 @@ declare module 'webcoreui/astro' {
 	export function Button(_props: WButtonProps): any
 	export function Card(_props: WCardProps): any
 	export function Carousel(_props: WCarouselProps): any
+	export function CarouselItem(_props: WCarouselItemProps): any
 	export function Checkbox(_props: WCheckboxProps): any
 	export function Collapsible(_props: WCollapsibleProps): any
 	export function ConditionalWrapper(_props: WConditionalWrapperProps): any
@@ -111,6 +114,7 @@ declare module 'webcoreui/astro' {
 	export function Spoiler(_props: WSpoilerProps): any
 	export function Stepper(_props: WStepperProps): any
 	export function Switch(_props: WSwitchProps): any
+	export function Tab(_props: WTabProps): any
 	export function Table(_props: WTableProps): any
 	export function Tabs(_props: WTabsProps): any
 	export function Textarea(_props: WTextareaProps): any
@@ -130,6 +134,7 @@ declare module 'webcoreui/astro' {
 	export type ButtonProps = WButtonProps
 	export type CardProps = WCardProps
 	export type CarouselProps = WCarouselProps
+	export type CarouselItemProps = WCarouselItemProps
 	export type CheckboxProps = WCheckboxProps
 	export type CollapsibleProps = WCollapsibleProps
 	export type ConditionalWrapperProps = WConditionalWrapperProps
@@ -168,6 +173,7 @@ declare module 'webcoreui/astro' {
 	export type SpoilerProps = WSpoilerProps
 	export type StepperProps = WStepperProps
 	export type SwitchProps = WSwitchProps
+	export type TabProps = WTabProps
 	export type TableProps = WTableProps
 	export type TabsProps = WTabsProps
 	export type TextareaProps = WTextareaProps

package/astro.js

@@ -9,6 +9,7 @@ import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
 import CarouselComponent from './components/Carousel/Carousel.astro'
+import CarouselItemComponent from './components/CarouselItem/CarouselItem.astro'
 import CheckboxComponent from './components/Checkbox/Checkbox.astro'
 import CollapsibleComponent from './components/Collapsible/Collapsible.astro'
 import ConditionalWrapperComponent from './components/ConditionalWrapper/ConditionalWrapper.astro'
@@ -47,6 +48,7 @@ import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SpoilerComponent from './components/Spoiler/Spoiler.astro'
 import StepperComponent from './components/Stepper/Stepper.astro'
 import SwitchComponent from './components/Switch/Switch.astro'
+import TabComponent from './components/Tab/Tab.astro'
 import TableComponent from './components/Table/Table.astro'
 import TabsComponent from './components/Tabs/Tabs.astro'
 import TextareaComponent from './components/Textarea/Textarea.astro'
@@ -66,6 +68,7 @@ export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
 export const Carousel = CarouselComponent
+export const CarouselItem = CarouselItemComponent
 export const Checkbox = CheckboxComponent
 export const Collapsible = CollapsibleComponent
 export const ConditionalWrapper = ConditionalWrapperComponent
@@ -104,6 +107,7 @@ export const Spinner = SpinnerComponent
 export const Spoiler = SpoilerComponent
 export const Stepper = StepperComponent
 export const Switch = SwitchComponent
+export const Tab = TabComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent
 export const Textarea = TextareaComponent

package/components/Accordion/Accordion.astro

@@ -6,7 +6,7 @@ import Plus from '../../icons/plus.svg?raw'
 
 import styles from './accordion.module.scss'
 
-interface Props extends AccordionProps {}
+export type Props = AccordionProps
 
 const {
     items,

package/components/Accordion/Accordion.svelte

@@ -1,58 +1,60 @@
-<script lang="ts">
-    import type { AccordionProps } from './accordion'
-
-    import { classNames } from '../../utils/classNames'
-
-    import ChevronDown from '../../icons/chevron-down.svg?raw'
-    import Plus from '../../icons/plus.svg?raw'
-
-    import styles from './accordion.module.scss'
-
-    const {
-        items,
-        icon,
-        reverse,
-        className
-    }: AccordionProps = $props()
-
-    let toggleState = $state(items.map(item => item.expanded ?? false))
-
-    const toggle = (index: number) => {
-        toggleState = toggleState.map((_, i) => index === i
-            ? !toggleState[i]
-            : toggleState[i]
-        )
-    }
-
-    const classes = classNames([
-        styles.accordion,
-        reverse && styles.reverse,
-        icon === 'plus' && styles.plus,
-        className
-    ])
-</script>
-
-<ul class={classes}>
-    {#each items as item, index}
-        <li>
-            <button
-                class={classNames([
-                    styles.title,
-                    item.reverse && styles.reverse
-                ])}
-                data-open={toggleState[index]}
-                onclick={() => toggle(index)}
-            >
-                {item.title}
-                {#if icon !== 'none'}
-                    {@html icon === 'plus' ? Plus : ChevronDown}
-                {/if}
-            </button>
-            <div class={styles.wrapper}>
-                <div class={styles.content}>
-                    {@html item.content}
-                </div>
-            </div>
-        </li>
-    {/each}
-</ul>
+<script lang="ts">
+    import type { AccordionProps } from './accordion'
+
+    import { classNames } from '../../utils/classNames'
+
+    import ChevronDown from '../../icons/chevron-down.svg?raw'
+    import Plus from '../../icons/plus.svg?raw'
+
+    import styles from './accordion.module.scss'
+
+    export type Props = AccordionProps
+
+    const {
+        items,
+        icon,
+        reverse,
+        className
+    }: Props = $props()
+
+    let toggleState = $derived(items.map(item => item.expanded ?? false))
+
+    const toggle = (index: number) => {
+        toggleState = toggleState.map((_, i) => index === i
+            ? !toggleState[i]
+            : toggleState[i]
+        )
+    }
+
+    const classes = $derived(classNames([
+        styles.accordion,
+        reverse && styles.reverse,
+        icon === 'plus' && styles.plus,
+        className
+    ]))
+</script>
+
+<ul class={classes}>
+    {#each items as item, index}
+        <li>
+            <button
+                class={classNames([
+                    styles.title,
+                    item.reverse && styles.reverse
+                ])}
+                data-open={toggleState[index]}
+                onclick={() => toggle(index)}
+            >
+                {item.title}
+                {#if icon !== 'none'}
+                    {@html icon === 'plus' ? Plus : ChevronDown}
+                {/if}
+            </button>
+            <div class={styles.wrapper}>
+                <div class={styles.content}>
+                    {@html item.content}
+                </div>
+            </div>
+        </li>
+    {/each}
+</ul>

package/components/Accordion/Accordion.tsx

@@ -7,13 +7,15 @@ import ChevronDown from '../../icons/chevron-down.svg?raw'
 import Plus from '../../icons/plus.svg?raw'
 
 import styles from './accordion.module.scss'
+
+export type Props = AccordionProps
 
 const Accordion = ({
     items,
     icon,
     reverse,
     className
-}: AccordionProps) => {
+}: Props) => {
     const [state, setState] = useState(items.map(item => item.expanded ?? false))
 
     const toggle = (index: number) => {

package/components/Alert/Alert.astro

@@ -1,4 +1,5 @@
 ---
+import type { HTMLAttributes } from 'astro/types'
 import type { AlertProps } from './alert'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro'
@@ -10,7 +11,7 @@ import warning from '../../icons/warning.svg?raw'
 
 import styles from './alert.module.scss'
 
-interface Props extends AlertProps {}
+export type Props = AlertProps<HTMLAttributes<'section'>>
 
 const iconMap = {
     info,

package/components/Alert/Alert.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-    import type { SvelteAlertProps } from './alert'
+    import type { Snippet } from 'svelte'
+    import type { HTMLAttributes } from 'svelte/elements'
+    import type { AlertProps } from './alert'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -10,6 +12,11 @@
 
     import styles from './alert.module.scss'
 
+    export type Props = AlertProps<HTMLAttributes<HTMLElement>> & {
+        icon?: Snippet
+        children: Snippet
+    }
+
     const {
         element = 'section',
         title,
@@ -21,7 +28,7 @@
         icon,
         children,
         ...rest
-    }: SvelteAlertProps = $props()
+    }: Props = $props()
 
     const iconMap = {
         info,
@@ -30,14 +37,14 @@
         alert
     }
 
-    const hasCustomIcon = icon
+    const hasCustomIcon = $derived(icon)
 
-    const classes = [
+    const classes = $derived([
         styles['w-alert'],
         (!hasCustomIcon && !theme) && styles.col,
         theme && styles[theme],
         className
-    ].filter(Boolean).join(' ')
+    ].filter(Boolean).join(' '))
 </script>
 
 <svelte:element this={element} class={classes} {...rest}>

package/components/Alert/Alert.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import type { ReactAlertProps } from './alert'
+import React, { type JSX } from 'react'
+import type { AlertProps } from './alert'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -10,6 +10,13 @@ import warning from '../../icons/warning.svg?raw'
 
 import styles from './alert.module.scss'
 
+export type Props = Omit<AlertProps, 'titleTag' | 'element'> & {
+    Element?: keyof JSX.IntrinsicElements
+    TitleTag?: keyof JSX.IntrinsicElements
+    icon?: React.ReactNode
+    children: React.ReactNode
+}
+
 const iconMap = {
     info,
     success,
@@ -28,7 +35,7 @@ const Alert = ({
     children,
     icon,
     ...rest
-}: ReactAlertProps) => {
+}: Props) => {
     const classes = [
         styles['w-alert'],
         (!icon && !theme) && styles.col,

package/components/Alert/alert.ts

@@ -1,7 +1,4 @@
-import type { JSX } from 'react'
-import type { Snippet } from 'svelte'
-
-export type AlertProps = {
+export type AlertProps<T extends object = object> = {
     element?: string
     title?: string
     titleTag?: string
@@ -12,17 +9,4 @@ export type AlertProps = {
         | 'success'
         | 'warning'
         | 'alert'
-    [key: string]: any
-}
-
-export type SvelteAlertProps = {
-    icon?: Snippet
-    children: Snippet
-} & AlertProps
-
-export type ReactAlertProps = {
-    Element?: keyof JSX.IntrinsicElements
-    TitleTag?: keyof JSX.IntrinsicElements
-    icon?: React.ReactNode
-    children: React.ReactNode
-} & Omit<AlertProps, 'titleTag' | 'element'>
+} & T

package/components/AspectRatio/AspectRatio.astro

@@ -3,7 +3,7 @@ import type { AspectRatioProps } from './aspectratio'
 
 import styles from './aspect-ratio.module.scss'
 
-interface Props extends AspectRatioProps {}
+export type Props = AspectRatioProps
 
 const {
     ratio,

package/components/AspectRatio/AspectRatio.svelte

@@ -1,22 +1,27 @@
-<script lang="ts">
-    import type { SvelteAspectRatioProps } from './aspectratio'
-
-    import { classNames } from '../../utils/classNames'
-
-    import styles from './aspect-ratio.module.scss'
-
-    const {
-        ratio,
-        className,
-        children
-    }: SvelteAspectRatioProps = $props()
-
-    const classes = classNames([
-        styles.ratio,
-        className
-    ])
-</script>
-
-<div class={classes} style={`aspect-ratio: ${ratio.replace(':', '/')};`}>
-    {@render children?.()}
-</div>
+<script lang="ts">
+    import type { Snippet } from 'svelte'
+    import type { AspectRatioProps } from './aspectratio'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './aspect-ratio.module.scss'
+
+    export type Props = AspectRatioProps & {
+        children: Snippet
+    }
+
+    const {
+        ratio,
+        className,
+        children
+    }: Props = $props()
+
+    const classes = $derived(classNames([
+        styles.ratio,
+        className
+    ]))
+</script>
+
+<div class={classes} style={`aspect-ratio: ${ratio.replace(':', '/')};`}>
+    {@render children?.()}
+</div>

package/components/AspectRatio/AspectRatio.tsx

@@ -1,15 +1,18 @@
-import React from 'react'
-import type { ReactAspectRatioProps } from './aspectratio'
+import type { AspectRatioProps } from './aspectratio'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './aspect-ratio.module.scss'
 
+export type Props = AspectRatioProps & {
+    children: React.ReactNode
+}
+
 const AspectRatio = ({
     ratio,
     children,
     className
-}: ReactAspectRatioProps) => {
+}: Props) => {
     const classes = classNames([
         styles.ratio,
         className

package/components/AspectRatio/aspectratio.ts

@@ -1,14 +1,4 @@
-import type { Snippet } from 'svelte'
-
 export type AspectRatioProps = {
     ratio: string
     className?: string
 }
-
-export type SvelteAspectRatioProps = {
-    children: Snippet
-} & AspectRatioProps
-
-export type ReactAspectRatioProps = {
-    children: React.ReactNode
-} & AspectRatioProps

package/components/Avatar/Avatar.astro

@@ -5,7 +5,7 @@ import Image from '../Image/Image.astro'
 
 import styles from './avatar.module.scss'
 
-interface Props extends AvatarProps {}
+export type Props = AvatarProps
 
 const {
     img,

package/components/Avatar/Avatar.svelte

@@ -6,6 +6,8 @@
     import { classNames } from '../../utils/classNames'
 
     import styles from './avatar.module.scss'
+
+    export type Props = AvatarProps
 
     const {
         img,
@@ -17,19 +19,19 @@
         reverse,
         className,
         groupClassName
-    }: AvatarProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.avatar,
         borderless && styles.borderless,
         className
-    ])
+    ]))
 
-    const groupStyles = classNames([
+    const groupStyles = $derived(classNames([
         styles.group,
         reverse && styles.reverse,
         groupClassName
-    ])
+    ]))
 </script>
 
 {#if Array.isArray(img)}