webcoreui 0.6.1 → 0.8.0

package/README.md

@@ -52,18 +52,18 @@ Webcore can be used as a standalone project, or it can be integrated into your e
 
 Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
 
-- [Sass](https://www.npmjs.com/package/sass) - `v1.77` and above
-- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4` and above
+- [Sass](https://www.npmjs.com/package/sass) - `v1.80`
+- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4`
 
 Depending on your project setup, you'll also need the following packages:
 
 - **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v4.10` and above
+    - [Astro](https://www.npmjs.com/package/astro) - `v4.16`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2` and above
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2`
 - **For React projects**
-    - [React](https://www.npmjs.com/package/react) - `v18.3` and above
-    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3` and above
+    - [React](https://www.npmjs.com/package/react) - `v18.3`
+    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3`
 
 ### Installation
 
@@ -82,7 +82,7 @@ yarn add webcoreui
 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
-@import 'webcoreui/styles';
+@use 'webcoreui/styles' as *;
 @include setup((
     // Define paths for your fonts
     fontRegular: '/fonts/Inter-Regular.woff2',
@@ -110,6 +110,9 @@ html body {
     // Avatar component
     --w-avatar-border: var(--w-color-primary-70);
 
+    // Banner component
+    --w-banner-top: 0;
+
     // Checkbox component
     --w-checkbox-color: var(--w-color-primary);
 
@@ -135,10 +138,18 @@ html body {
     --w-rating-empty-background: var(--w-color-primary-70);
     --w-rating-size: 18px;
 
+    // Ribbon component
+    --w-ribbon-offset: 20px;
+    --w-ribbon-folded-offset: 10px;
+
     // Scrollbars
     --w-scrollbar-bg: var(--w-color-primary-60);
     --w-scrollbar-fg: var(--w-color-primary-50);
 
+    // Skeleton component
+    --w-skeleton-color: var(--w-color-primary-60);
+    --w-skeleton-wave-color: var(--w-color-primary-50);
+
     // Slider component
     --w-slider-background: var(--w-color-primary-50);
     --w-slider-color: var(--w-color-primary);
@@ -151,6 +162,14 @@ html body {
     --w-spinner-size: 30px;
     --w-spinner-dash: 8;
 
+    // Spoiler component
+    --w-spoiler-color: var(--w-color-primary);
+
+    // Stepper component
+    --w-stepper-color-border: var(--w-color-primary-50);
+    --w-stepper-color-active: var(--w-color-info);
+    --w-stepper-color-complete: var(--w-color-success);
+
     // Switch component
     --w-switch-off-color: var(--w-color-primary-50);
     --w-switch-on-color: var(--w-color-primary);
@@ -199,8 +218,10 @@ import { Accordion } from 'webcoreui/react'
 
 - [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion)
 - [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert)
+- [AspectRatio](https://github.com/Frontendland/webcoreui/tree/main/src/components/AspectRatio)
 - [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar)
 - [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge)
+- [Banner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Banner)
 - [Breadcrumb](https://github.com/Frontendland/webcoreui/tree/main/src/components/Breadcrumb)
 - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button)
 - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card)
@@ -213,6 +234,7 @@ import { Accordion } from 'webcoreui/react'
 - [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
+- [Kbd](https://github.com/Frontendland/webcoreui/tree/main/src/components/Kbd)
 - [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)
 - [Masonry](https://github.com/Frontendland/webcoreui/tree/main/src/components/Masonry)
 - [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)
@@ -222,11 +244,15 @@ import { Accordion } from 'webcoreui/react'
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Ribbon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Ribbon)
 - [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)
 - [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
 - [Sidebar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sidebar)
+- [Skeleton](https://github.com/Frontendland/webcoreui/tree/main/src/components/Skeleton)
 - [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
+- [Spoiler](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spoiler)
+- [Stepper](https://github.com/Frontendland/webcoreui/tree/main/src/components/Stepper)
 - [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch)
 - [Table](https://github.com/Frontendland/webcoreui/tree/main/src/components/Table)
 - [Tabs](https://github.com/Frontendland/webcoreui/tree/main/src/components/Tabs)
@@ -235,3 +261,16 @@ import { Accordion } from 'webcoreui/react'
 - [Timeline](https://github.com/Frontendland/webcoreui/blob/main/src/pages/timeline.astro)
 - [Toast](https://github.com/Frontendland/webcoreui/tree/main/src/components/Toast)
 - [Tooltip](https://github.com/Frontendland/webcoreui/blob/main/src/pages/tooltip.astro)
+
+## Blocks
+
+- [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)
+- [ErrorPage](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ErrorPage)
+- [FAQ](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/FAQ)
+- [Hero](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Hero)
+- [IconList](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/IconList)
+- [SettingCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SettingCard)
+- [SignUp](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SignUp)
+- [SocialProof](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SocialProof)
+- [Tiles](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Tiles)
+- [User](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/User)

package/astro.d.ts

@@ -1,7 +1,9 @@
 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 { 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'
@@ -14,6 +16,7 @@ import type { FooterProps as WFooterProps } from './components/Footer/footer'
 import type { GroupProps as WGroupProps } from './components/Group/group'
 import type { IconProps as WIconProps } from './components/Icon/icon'
 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'
@@ -23,11 +26,15 @@ 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 { 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 { 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'
@@ -40,8 +47,10 @@ import type { ToastProps as WToastProps } from './components/Toast/toast'
 declare module 'webcoreui/astro' {
     export function Accordion(_props: WAccordionProps): any
 	export function Alert(_props: WAlertProps): any
+	export function AspectRatio(_props: WAspectRatioProps): any
 	export function Avatar(_props: WAvatarProps): any
 	export function Badge(_props: WBadgeProps): any
+	export function Banner(_props: WBannerProps): any
 	export function Breadcrumb(_props: WBreadcrumbProps): any
 	export function Button(_props: WButtonProps): any
 	export function Card(_props: WCardProps): any
@@ -54,6 +63,7 @@ declare module 'webcoreui/astro' {
 	export function Group(_props: WGroupProps): any
 	export function Icon(_props: WIconProps): any
 	export function Input(_props: WInputProps): any
+	export function Kbd(_props: WKbdProps): any
 	export function List(_props: WListProps): any
 	export function Masonry(_props: WMasonryProps): any
 	export function Menu(_props: WMenuProps): any
@@ -63,11 +73,15 @@ declare module 'webcoreui/astro' {
 	export function Progress(_props: WProgressProps): any
 	export function Radio(_props: WRadioProps): any
 	export function Rating(_props: WRatingProps): any
+	export function Ribbon(_props: WRibbonProps): any
 	export function Select(_props: WSelectProps): any
 	export function Sheet(_props: WSheetProps): any
 	export function Sidebar(_props: WSidebarProps): any
+	export function Skeleton(_props: WSkeletonProps): any
 	export function Slider(_props: WSliderProps): any
 	export function Spinner(_props: WSpinnerProps): any
+	export function Spoiler(_props: WSpoilerProps): any
+	export function Stepper(_props: WStepperProps): any
 	export function Switch(_props: WSwitchProps): any
 	export function Table(_props: WTableProps): any
 	export function Tabs(_props: WTabsProps): any
@@ -79,8 +93,10 @@ declare module 'webcoreui/astro' {
 
     export type AccordionProps = WAccordionProps
 	export type AlertProps = WAlertProps
+	export type AspectRatioProps = WAspectRatioProps
 	export type AvatarProps = WAvatarProps
 	export type BadgeProps = WBadgeProps
+	export type BannerProps = WBannerProps
 	export type BreadcrumbProps = WBreadcrumbProps
 	export type ButtonProps = WButtonProps
 	export type CardProps = WCardProps
@@ -93,6 +109,7 @@ declare module 'webcoreui/astro' {
 	export type GroupProps = WGroupProps
 	export type IconProps = WIconProps
 	export type InputProps = WInputProps
+	export type KbdProps = WKbdProps
 	export type ListProps = WListProps
 	export type MasonryProps = WMasonryProps
 	export type MenuProps = WMenuProps
@@ -102,11 +119,15 @@ declare module 'webcoreui/astro' {
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WRadioProps
 	export type RatingProps = WRatingProps
+	export type RibbonProps = WRibbonProps
 	export type SelectProps = WSelectProps
 	export type SheetProps = WSheetProps
 	export type SidebarProps = WSidebarProps
+	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WSliderProps
 	export type SpinnerProps = WSpinnerProps
+	export type SpoilerProps = WSpoilerProps
+	export type StepperProps = WStepperProps
 	export type SwitchProps = WSwitchProps
 	export type TableProps = WTableProps
 	export type TabsProps = WTabsProps

package/astro.js

@@ -1,7 +1,9 @@
 import AccordionComponent from './components/Accordion/Accordion.astro'
 import AlertComponent from './components/Alert/Alert.astro'
+import AspectRatioComponent from './components/AspectRatio/AspectRatio.astro'
 import AvatarComponent from './components/Avatar/Avatar.astro'
 import BadgeComponent from './components/Badge/Badge.astro'
+import BannerComponent from './components/Banner/Banner.astro'
 import BreadcrumbComponent from './components/Breadcrumb/Breadcrumb.astro'
 import ButtonComponent from './components/Button/Button.astro'
 import CardComponent from './components/Card/Card.astro'
@@ -14,6 +16,7 @@ import FooterComponent from './components/Footer/Footer.astro'
 import GroupComponent from './components/Group/Group.astro'
 import IconComponent from './components/Icon/Icon.astro'
 import InputComponent from './components/Input/Input.astro'
+import KbdComponent from './components/Kbd/Kbd.astro'
 import ListComponent from './components/List/List.astro'
 import MasonryComponent from './components/Masonry/Masonry.astro'
 import MenuComponent from './components/Menu/Menu.astro'
@@ -23,11 +26,15 @@ import PopoverComponent from './components/Popover/Popover.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
 import RatingComponent from './components/Rating/Rating.astro'
+import RibbonComponent from './components/Ribbon/Ribbon.astro'
 import SelectComponent from './components/Select/Select.astro'
 import SheetComponent from './components/Sheet/Sheet.astro'
 import SidebarComponent from './components/Sidebar/Sidebar.astro'
+import SkeletonComponent from './components/Skeleton/Skeleton.astro'
 import SliderComponent from './components/Slider/Slider.astro'
 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 TableComponent from './components/Table/Table.astro'
 import TabsComponent from './components/Tabs/Tabs.astro'
@@ -39,8 +46,10 @@ import ToastComponent from './components/Toast/Toast.astro'
 
 export const Accordion = AccordionComponent
 export const Alert = AlertComponent
+export const AspectRatio = AspectRatioComponent
 export const Avatar = AvatarComponent
 export const Badge = BadgeComponent
+export const Banner = BannerComponent
 export const Breadcrumb = BreadcrumbComponent
 export const Button = ButtonComponent
 export const Card = CardComponent
@@ -53,6 +62,7 @@ export const Footer = FooterComponent
 export const Group = GroupComponent
 export const Icon = IconComponent
 export const Input = InputComponent
+export const Kbd = KbdComponent
 export const List = ListComponent
 export const Masonry = MasonryComponent
 export const Menu = MenuComponent
@@ -62,11 +72,15 @@ export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Ribbon = RibbonComponent
 export const Select = SelectComponent
 export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
+export const Skeleton = SkeletonComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
+export const Spoiler = SpoilerComponent
+export const Stepper = StepperComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent
 export const Tabs = TabsComponent

package/components/Accordion/Accordion.astro

@@ -2,44 +2,56 @@
 import type { AccordionProps } from './accordion'
 
 import ArrowDown from '../../icons/arrow-down.svg?raw'
+import Plus from '../../icons/plus.svg?raw'
 
 import styles from './accordion.module.scss'
 
 interface Props extends AccordionProps {}
 
 const {
-    items
+    items,
+    icon,
+    reverse,
+    className
 } = Astro.props
+
+const classes = [
+    styles.accordion,
+    reverse && styles.reverse,
+    icon === 'plus' && styles.plus,
+    className
+]
 ---
 
-<ul class={styles.accordion} data-id="w-accordion">
+<ul class:list={classes} data-id="w-accordion">
     {items.map((item: AccordionProps['items'][0]) => (
         <li>
-            <button class={styles.title} data-toggle="true">
+            <button
+                class:list={[styles.title, item.reverse && styles.reverse]}
+                data-toggle="true"
+            >
                 {item.title}
-                <Fragment set:html={ArrowDown} />
+                {icon !== 'none' && (
+                    <Fragment set:html={icon === 'plus' ? Plus : ArrowDown} />
+                )}
             </button>
             <div class={styles.wrapper}>
-                <div class={styles.content}>
-                    <Fragment set:html={item.content} />
-                </div>
+                <div class={styles.content} set:html={item.content} />
             </div>
         </li>
     ))}
 </ul>
 
 <script>
-    const accordions = document.querySelectorAll('[data-id="w-accordion"]')
-
-    Array.from(accordions).forEach(element => {
-        element.addEventListener('click', event => {
-            const target = event.target as HTMLDivElement
-
-            if (target.dataset.toggle) {
-                target.dataset.open = target.dataset.open === 'true'
-                    ? 'false'
-                    : 'true'
-            }
-        })
-    })
+    import { on } from '../../utils/DOMUtils'
+
+    on('[data-id="w-accordion"]', 'click', (event: Event) => {
+        const target = event.target as HTMLDivElement
+
+        if (target.dataset.toggle) {
+            target.dataset.open = target.dataset.open === 'true'
+                ? 'false'
+                : 'true'
+        }
+    }, true)
 </script>

package/components/Accordion/Accordion.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
     import type { AccordionProps } from './accordion'
 
+    import { classNames } from '../../utils/classNames'
+
     import ArrowDown from '../../icons/arrow-down.svg?raw'
+    import Plus from '../../icons/plus.svg?raw'
 
     import styles from './accordion.module.scss'
 
-    export let items: AccordionProps['items']
+    export let items: AccordionProps['items'] = []
+    export let icon: AccordionProps['icon'] = null
+    export let reverse: AccordionProps['reverse'] = false
+    export let className: AccordionProps['className'] = ''
 
     let state = Array(items.length).fill(false)
 
@@ -15,18 +21,30 @@
             : state[i]
         )
     }
+
+    const classes = classNames([
+        styles.accordion,
+        reverse && styles.reverse,
+        icon === 'plus' && styles.plus,
+        className
+    ])
 </script>
 
-<ul class={styles.accordion}>
+<ul class={classes}>
     {#each items as item, index}
         <li>
             <button
-                class={styles.title}
+                class={classNames([
+                    styles.title,
+                    item.reverse && styles.reverse
+                ])}
                 data-open={state[index]}
                 on:click={() => toggle(index)}
             >
                 {item.title}
-                {@html ArrowDown}
+                {#if icon !== 'none'}
+                    {@html icon === 'plus' ? Plus : ArrowDown}
+                {/if}
             </button>
             <div class={styles.wrapper}>
                 <div class={styles.content}>

package/components/Accordion/Accordion.tsx

@@ -1,11 +1,19 @@
 import React, { useState } from 'react'
 import type { AccordionProps } from './accordion'
 
+import { classNames } from '../../utils/classNames'
+
 import ArrowDown from '../../icons/arrow-down.svg?raw'
+import Plus from '../../icons/plus.svg?raw'
 
 import styles from './accordion.module.scss'
 
-const Accordion = ({ items }: AccordionProps) => {
+const Accordion = ({
+    items,
+    icon,
+    reverse,
+    className
+}: AccordionProps) => {
     const [state, setState] = useState(Array(items.length).fill(false))
 
     const toggle = (index: number) => {
@@ -15,20 +23,34 @@ const Accordion = ({ items }: AccordionProps) => {
         ))
     }
 
+    const classes = classNames([
+        styles.accordion,
+        reverse && styles.reverse,
+        icon === 'plus' && styles.plus,
+        className
+    ])
+
     return (
-        <ul className={styles.accordion}>
+        <ul className={classes}>
             {items.map((item, index) => (
                 <li key={index}>
                     <button
-                        className={styles.title}
                         data-open={state[index]}
                         onClick={() => toggle(index)}
-                        dangerouslySetInnerHTML={{ __html: `${item.title} ${ArrowDown}` }}
+                        className={classNames([
+                            styles.title,
+                            item.reverse && styles.reverse
+                        ])}
+                        dangerouslySetInnerHTML={{ __html: icon === 'none'
+                            ? item.title
+                            : `${item.title} ${icon === 'plus' ? Plus : ArrowDown}`
+                        }}
                     />
                     <div className={styles.wrapper}>
-                        <div className={styles.content}>
-                            <div dangerouslySetInnerHTML={{ __html: item.content }} />
-                        </div>
+                        <div
+                            className={styles.content}
+                            dangerouslySetInnerHTML={{ __html: item.content }}
+                        />
                     </div>
                 </li>
             ))}

package/components/Accordion/accordion.module.scss

@@ -4,6 +4,14 @@
     @include spacing(0);
     list-style-type: none;
 
+    &.reverse .title {
+        @include layout(row-reverse, h-end);
+    }
+
+    &.plus .title[data-open="true"] svg {
+        transform: rotate(135deg);
+    }
+
     li {
         @include border(primary-50, bottom);
         @include spacing(py-sm, px-none, m0);
@@ -27,6 +35,10 @@
             background: transparent;
             cursor: pointer;
 
+            &.reverse {
+                @include layout(row-reverse);
+            }
+
             svg {
                 @include transition(transform);
                 @include size(15px);

package/components/Accordion/accordion.ts

@@ -2,5 +2,9 @@ export type AccordionProps = {
     items: {
         title: string
         content: string
+        reverse?: boolean
     }[]
+    icon?: 'plus' | 'none' | undefined | null
+    reverse?: boolean
+    className?: string
 }

package/components/AspectRatio/AspectRatio.astro

@@ -0,0 +1,21 @@
+---
+import type { AspectRatioProps } from './aspectratio'
+
+import styles from './aspect-ratio.module.scss'
+
+interface Props extends AspectRatioProps {}
+
+const {
+    ratio,
+    className
+} = Astro.props
+
+const classes = [
+    styles.ratio,
+    className
+]
+---
+
+<div class:list={classes} style={`aspect-ratio: ${ratio.replace(':', '/')};`}>
+    <slot />
+</div>

package/components/AspectRatio/AspectRatio.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { AspectRatioProps } from './aspectratio'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './aspect-ratio.module.scss'
+
+    export let ratio: AspectRatioProps['ratio'] = ''
+    export let className: AspectRatioProps['className'] = ''
+
+    const classes = classNames([
+        styles.ratio,
+        className
+    ])
+</script>
+
+<div class={classes} style={`aspect-ratio: ${ratio.replace(':', '/')};`}>
+    <slot />
+</div>

package/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import type { ReactAspectRatioProps } from './aspectratio'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './aspect-ratio.module.scss'
+
+const AspectRatio = ({
+    ratio,
+    children,
+    className
+}: ReactAspectRatioProps) => {
+    const classes = classNames([
+        styles.ratio,
+        className
+    ])
+
+    return (
+        <div
+            className={classes}
+            style={{ aspectRatio: ratio.replace(':', '/') }}
+        >
+            {children}
+        </div>
+    )
+}
+
+export default AspectRatio

package/components/AspectRatio/aspect-ratio.module.scss

@@ -0,0 +1,10 @@
+@use '../../scss/config.scss' as *;
+
+div.ratio[style] {
+    @include layout(flex);
+    @include size('w100%');
+
+    * {
+        @include size(100%);
+    }
+}

package/components/AspectRatio/aspectratio.ts

@@ -0,0 +1,8 @@
+export type AspectRatioProps = {
+    ratio: string
+    className?: string
+}
+
+export type ReactAspectRatioProps = {
+    children: React.ReactNode
+} & AspectRatioProps