webcoreui 1.1.0 → 1.2.0

package/README.md

@@ -86,7 +86,7 @@ You can use our CLI tool to create a new Webcore project, or integrate it into a
 npm create webcore@latest
 
 # Update configuration files for an existing Astro project
-npm create webcore@lates config
+npm create webcore@latest config
 
 # Create a new Webcore project with a specific template
 npm create webcore@latest template [TemplateName] [destination]
@@ -145,6 +145,7 @@ 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.
 
 Default component styles can be changed by overriding the following CSS variables:
 
@@ -178,6 +179,11 @@ html body {
     // Radio component
     --w-radio-color: var(--w-color-primary);
 
+    // RangeSlider component
+    --w-range-slider-background: var(--w-color-primary-50);
+    --w-range-slider-color: var(--w-color-primary);
+    --w-range-slider-thumb: var(--w-color-primary-50);
+
     // Rating component
     --w-rating-color: var(--w-color-primary);
     --w-rating-empty-color: var(--w-color-primary);
@@ -298,6 +304,7 @@ import { Accordion } from 'webcoreui/react'
 - [Popover](https://github.com/Frontendland/webcoreui/tree/main/src/components/Popover)
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
+- [RangeSlider](https://github.com/Frontendland/webcoreui/tree/main/src/components/RangeSlider)
 - [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)
@@ -321,6 +328,7 @@ import { Accordion } from 'webcoreui/react'
 ## Blocks
 
 - [Author](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Author)
+- [AvatarWithRating](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/AvatarWithRating)
 - [BlogCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/BlogCard)
 - [ComponentMap](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/ComponentMap)
 - [DeviceMockup](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/DeviceMockup)

package/astro.d.ts

@@ -31,6 +31,7 @@ import type { PaginationProps as WPaginationProps } from './components/Paginatio
 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'
@@ -54,6 +55,7 @@ import type { ToastProps as WToastProps } from './components/Toast/toast'
 import type { DataTableEventType as WDataTableEventType, HeadingObject as WHeadingObject } from './components/DataTable/datatable.ts'
 import type { ListEventType as WListEventType } from './components/List/list.ts'
 import type { PaginationEventType as WPaginationEventType } from './components/Pagination/pagination.ts'
+import type { RangeSliderEventType as WRangeSliderEventType } from './components/RangeSlider/rangeslider.ts'
 import type { SelectEventType as WSelectEventType } from './components/Select/select.ts'
 
 declare module 'webcoreui/astro' {
@@ -90,6 +92,7 @@ declare module 'webcoreui/astro' {
 	export function Popover(_props: WPopoverProps): any
 	export function Progress(_props: WProgressProps): any
 	export function Radio(_props: WRadioProps): any
+	export function RangeSlider(_props: WRangeSliderProps): any
 	export function Rating(_props: WRatingProps): any
 	export function Ribbon(_props: WRibbonProps): any
 	export function Select(_props: WSelectProps): any
@@ -143,6 +146,7 @@ declare module 'webcoreui/astro' {
 	export type PopoverProps = WPopoverProps
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WRadioProps
+	export type RangeSliderProps = WRangeSliderProps
 	export type RatingProps = WRatingProps
 	export type RibbonProps = WRibbonProps
 	export type SelectProps = WSelectProps
@@ -167,5 +171,6 @@ declare module 'webcoreui/astro' {
 	export type HeadingObject = WHeadingObject
 	export type ListEventType = WListEventType
 	export type PaginationEventType = WPaginationEventType
+	export type RangeSliderEventType = WRangeSliderEventType
 	export type SelectEventType = WSelectEventType
 }

package/astro.js

@@ -31,6 +31,7 @@ import PaginationComponent from './components/Pagination/Pagination.astro'
 import PopoverComponent from './components/Popover/Popover.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
+import RangeSliderComponent from './components/RangeSlider/RangeSlider.astro'
 import RatingComponent from './components/Rating/Rating.astro'
 import RibbonComponent from './components/Ribbon/Ribbon.astro'
 import SelectComponent from './components/Select/Select.astro'
@@ -84,6 +85,7 @@ export const Pagination = PaginationComponent
 export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
+export const RangeSlider = RangeSliderComponent
 export const Rating = RatingComponent
 export const Ribbon = RibbonComponent
 export const Select = SelectComponent

package/components/BottomNavigation/BottomNavigation.astro

@@ -5,8 +5,6 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './bottomnavigation.module.scss'
 
-import type { IconProps } from '../Icon/icon'
-
 interface Props extends BottomNavigationProps {}
 
 const {
@@ -39,7 +37,7 @@ const styleVariable = maxWidth
                         <Fragment>
                             {item.icon?.startsWith('<svg')
                                 ? <Fragment set:html={item.icon} />
-                                : <Icon type={item.icon as IconProps['type']} />
+                                : <Icon type={item.icon} />
                             }
                         </Fragment>
                     )}

package/components/Breadcrumb/Breadcrumb.astro

@@ -6,8 +6,6 @@ import Icon from '../Icon/Icon.astro'
 
 import styles from './breadcrumb.module.scss'
 
-import type { IconProps } from '../Icon/icon'
-
 interface Props extends BreadcrumbProps {}
 
 const {
@@ -33,7 +31,7 @@ const classes = [
                     <Fragment>
                         {item.icon.startsWith('<svg')
                             ? <Fragment set:html={item.icon} />
-                            : <Icon type={item.icon as IconProps['type']} />
+                            : <Icon type={item.icon} />
                         }
                     </Fragment>
                 )}

package/components/Carousel/Carousel.astro

@@ -35,10 +35,14 @@ const containerClasses = [
     scrollSnap && styles.snap
 ]
 
+const getItemsPerSlide = () => typeof itemsPerSlide === 'number'
+    ? itemsPerSlide
+    : itemsPerSlide.default || 1
+
 const wrapperClasses = [
     styles.wrapper,
     effect && styles[effect],
-    itemsPerSlide > 1 && styles['no-snap'],
+    getItemsPerSlide() > 1 && styles['no-snap'],
     wrapperClassName
 ]
 
@@ -52,10 +56,10 @@ const paginationClasses = classNames([
     !subText && paginationClassName
 ])
 
-const totalPages = Math.ceil(items / itemsPerSlide)
+const totalPages = Math.ceil(items / getItemsPerSlide())
 const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-const style = itemsPerSlide > 1
-    ? `--w-slide-width: calc(${100 / itemsPerSlide}% - 5px);`
+const style = getItemsPerSlide() > 1
+    ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
     : null
 ---
 
@@ -68,7 +72,8 @@ const style = itemsPerSlide > 1
         <ul
             class:list={wrapperClasses}
             style={style}
-            data-visible-items={itemsPerSlide > 1 ? itemsPerSlide : null}
+            data-visible-items={getItemsPerSlide() > 1 ? getItemsPerSlide() : null}
+            data-breakpoint-items={typeof itemsPerSlide !== 'number' ? JSON.stringify(itemsPerSlide) : null}
         >
             <slot />
         </ul>
@@ -101,6 +106,7 @@ const style = itemsPerSlide > 1
 <script>
     import { debounce } from '../../utils/debounce'
     import { listen } from '../../utils/event'
+    import { getBreakpoint } from '../../utils/getBreakpoint'
 
     const addEventListeners = () => {
         const carousels = Array.from(document.querySelectorAll('[data-id="w-carousel"]'))
@@ -127,7 +133,7 @@ const style = itemsPerSlide > 1
                 }
 
                 for (let i = 0; i < diff; i++) {
-                    triggerButton.click()
+                    triggerButton?.click()
                 }
 
                 Array.from(carouselElement.children).forEach(li => {
@@ -140,12 +146,72 @@ const style = itemsPerSlide > 1
             }
         }
 
+        const updateOnResize = (entries: ResizeObserverEntry[]) => {
+            const target = entries[0].target
+            const carousel = target.querySelector<HTMLUListElement>('ul')
+            const pagination = target.parentElement?.querySelector<HTMLUListElement>('[data-id="w-pagination"]')
+            const breakpoint = getBreakpoint()
+
+            if (!target || !carousel || !pagination) {
+                return
+            }
+
+            if (carousel.dataset.currentBreakpoint === breakpoint) {
+                return
+            }
+
+            const progress = target.parentElement?.querySelector<HTMLDivElement>('.w-carousel-progress')
+            const prevPageButton = pagination.querySelector<HTMLButtonElement>('[data-page="prev"]')
+            const nextPageButton = pagination.querySelector<HTMLButtonElement>('[data-page="next"]')
+            const subText = pagination.nextElementSibling
+            const breakpoints = JSON.parse(carousel.dataset.breakpointItems || '')
+            const itemsPerSlide = breakpoints[breakpoint] || breakpoints.default
+            const totalItems = carousel.children.length
+            const totalPages = Math.ceil(totalItems / itemsPerSlide)
+
+            carousel.dataset.currentBreakpoint = breakpoint
+            carousel.dataset.visibleItems = itemsPerSlide
+            carousel.children[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+            carousel.style.setProperty('--w-slide-width', `calc(${100 / itemsPerSlide}% - 5px)`)
+
+            pagination.dataset.totalPages = String(totalPages)
+
+            if (!(prevPageButton && nextPageButton)) {
+                pagination.innerHTML = Array.from({ length: totalPages }, (_, i) => i + 1)
+                    .map(i => `
+                        <li>
+                            <button
+                                data-active="${i - 1 === 0}"
+                                data-page="${i}"
+                                aria-label="${`page ${i}`}"
+                            ></button>
+                        </li>
+                    `).join('')
+            }
+
+            if (progress && progress.children[0] instanceof HTMLDivElement) {
+                progress.children[0].style.setProperty('--w-progress-width', '0%')
+            }
+
+            if (subText instanceof HTMLSpanElement && subText?.dataset.text) {
+                subText.innerText = subText.dataset.text
+                    .replace('{0}', '1')
+                    .replace('{1}', String(totalPages))
+            }
+        }
+
         carousels.forEach(carousel => {
             const carouselElement = carousel as HTMLDivElement
+            const carouselList = carousel.querySelector<HTMLUListElement>('ul')
+            const observer = new ResizeObserver(updateOnResize)
             const debounceAmount = carouselElement.dataset.debounce
                 ? Number(carouselElement.dataset.debounce)
                 : 20
 
+            if (carouselList?.dataset.breakpointItems) {
+                observer.observe(carouselElement)
+            }
+
             carousel.addEventListener('scroll', debounce((event: Event) => {
                 scroll(event)
             }, debounceAmount))
@@ -169,6 +235,10 @@ const style = itemsPerSlide > 1
                 .filter(index => index < totalItems)
         })
 
+        if (indexes.length < event.page) {
+            return
+        }
+
         const pageIndex = event.direction === 'prev'
             ? indexes[event.page - 1][0]
             : indexes[event.page - 1][indexes[event.page - 1].length - 1]
@@ -194,15 +264,15 @@ const style = itemsPerSlide > 1
         }
 
         if (event.trusted) {
-            const carouselContaienr = target.closest('section').querySelector('[data-id="w-carousel"]')
+            const carouselContainer = target.closest('section').querySelector('[data-id="w-carousel"]')
 
             liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
             liElement.dataset.active = 'true'
 
-            carouselContaienr.dataset.paginated = 'true'
+            carouselContainer.dataset.paginated = 'true'
 
             setTimeout(() => {
-                carouselContaienr.removeAttribute('data-paginated')
+                carouselContainer.removeAttribute('data-paginated')
             }, 300)
         }
     })

package/components/Carousel/Carousel.svelte

@@ -8,6 +8,7 @@
 
     import { classNames } from '../../utils/classNames'
     import { debounce as debounceScroll } from '../../utils/debounce'
+    import { getBreakpoint } from '../../utils/getBreakpoint'
 
     import styles from './carousel.module.scss'
 
@@ -29,12 +30,28 @@
         onScroll
     }: SvelteCarouselProps = $props()
 
+    const getItemsPerSlide = () => {
+        if (carousel) {
+            return typeof itemsPerSlide === 'number'
+                ? itemsPerSlide
+                : itemsPerSlide[getBreakpoint()] || itemsPerSlide.default || 1
+        }
+
+        return typeof itemsPerSlide === 'number'
+            ? itemsPerSlide
+            : itemsPerSlide.default || 1
+    }
+
     let carouselContainer: HTMLDivElement
     let carousel: HTMLUListElement
     let carouselItems: HTMLCollection | NodeListOf<HTMLLIElement>
     let progressValue = $state(0)
     let paginated = false
     let currentPage = $state(1)
+    let totalPages = $state(Math.ceil(items / getItemsPerSlide()))
+    let style = $state(getItemsPerSlide() > 1
+        ? `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+        : null)
 
     const classes = classNames([
         styles.carousel,
@@ -49,7 +66,7 @@
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
-        itemsPerSlide! > 1 && styles['no-snap'],
+        getItemsPerSlide() > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -63,11 +80,7 @@
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = itemsPerSlide! > 1
-        ? `--w-slide-width: calc(${100 / itemsPerSlide!}% - 5px);`
-        : null
 
     const updateValues = () => {
         const activeElement = carouselItems[currentPage - 1] as HTMLLIElement
@@ -104,8 +117,8 @@
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
-            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+        const indexes = Array.from({ length: Math.ceil(items / getItemsPerSlide()) }, (_, i) => {
+            return Array.from({ length: getItemsPerSlide() }, (_, j) => (i * getItemsPerSlide()) + j)
                 .filter(index => index < items)
         })
 
@@ -126,15 +139,33 @@
         }, 300)
     }
 
+    const updateOnResize = () => {
+        currentPage = 1
+        progressValue = 0
+        totalPages = Math.ceil(items / getItemsPerSlide())
+        style = `--w-slide-width: calc(${100 / getItemsPerSlide()}% - 5px);`
+
+        if (subTextValue) {
+            subText = subTextValue
+                .replace('{0}', '1')
+                .replace('{1}', String(totalPages))
+        }
+    }
+
     onMount(() => {
         const usedInAstro = carousel.children[0].nodeName === 'ASTRO-SLOT'
-
-        carouselContainer.addEventListener('scroll', scroll)
+        const observer = new ResizeObserver(updateOnResize)
 
         carouselItems = usedInAstro
             ? carousel.querySelectorAll('li')
             : carousel.children
 
+        carouselContainer.addEventListener('scroll', scroll)
+
+        if (typeof itemsPerSlide !== 'number') {
+            observer.observe(carouselContainer)
+        }
+
         return () => {
             carouselContainer.removeEventListener('scroll', scroll)
         }

package/components/Carousel/Carousel.tsx

@@ -7,6 +7,7 @@ import Progress from '../Progress/Progress.tsx'
 
 import { classNames } from '../../utils/classNames'
 import { debounce as debounceScroll } from '../../utils/debounce'
+import { getBreakpoint } from '../../utils/getBreakpoint'
 
 import styles from './carousel.module.scss'
 
@@ -27,14 +28,30 @@ const Carousel = ({
     onScroll,
     children
 }: ReactCarouselProps) => {
+    const getItemsPerSlide = () => {
+        if (carousel.current) {
+            return typeof itemsPerSlide === 'number'
+                ? itemsPerSlide
+                : itemsPerSlide[getBreakpoint()] || itemsPerSlide.default || 1
+        }
+
+        return typeof itemsPerSlide === 'number'
+            ? itemsPerSlide
+            : itemsPerSlide.default || 1
+    }
+
     const carouselContainer = useRef<HTMLDivElement>(null)
     const carousel = useRef<HTMLUListElement>(null)
     const carouselItems = useRef<any>(null)
     const paginated = useRef(false)
     const currentPage = useRef(1)
+    const totalPages = useRef(Math.ceil(items / getItemsPerSlide()))
 
     const [progressValue, setProgressValue] = useState(0)
     const [updatedSubText, setUpdatedSubText] = useState(subText)
+    const [style, setStyle] = useState(getItemsPerSlide() > 1
+        ? { '--w-slide-width': `calc(${100 / getItemsPerSlide()}% - 5px)` } as React.CSSProperties
+        : undefined)
 
     const classes = classNames([
         styles.carousel,
@@ -49,7 +66,7 @@ const Carousel = ({
     const wrapperClasses = classNames([
         styles.wrapper,
         effect && styles[effect],
-        itemsPerSlide! > 1 && styles['no-snap'],
+        getItemsPerSlide() > 1 && styles['no-snap'],
         wrapperClassName
     ])
 
@@ -63,11 +80,7 @@ const Carousel = ({
         !subText && paginationClassName
     ])
 
-    const totalPages = Math.ceil(items / itemsPerSlide!)
     const subTextValue = subText?.match(/\{0\}|\{1\}/g) ? subText : undefined
-    const style = itemsPerSlide > 1
-        ? { '--w-slide-width': `calc(${100 / itemsPerSlide!}% - 5px);` } as React.CSSProperties
-        : undefined
 
     const updateValues = (page: number) => {
         const activeElement = carouselItems.current[page - 1]
@@ -79,12 +92,12 @@ const Carousel = ({
             setUpdatedSubText(
                 subTextValue
                     .replace('{0}', String(page))
-                    .replace('{1}', String(totalPages))
+                    .replace('{1}', String(totalPages.current))
             )
         }
 
         if (progress) {
-            const percentage = (100 / (totalPages - 1))
+            const percentage = (100 / (totalPages.current - 1))
 
             setProgressValue(percentage * (page - 1))
         }
@@ -106,8 +119,8 @@ const Carousel = ({
     }, debounce)
 
     const paginate = (event: PaginationEventType) => {
-        const indexes = Array.from({ length: Math.ceil(items / itemsPerSlide!) }, (_, i) => {
-            return Array.from({ length: itemsPerSlide! }, (_, j) => (i * itemsPerSlide!) + j)
+        const indexes = Array.from({ length: Math.ceil(items / getItemsPerSlide()) }, (_, i) => {
+            return Array.from({ length: getItemsPerSlide() }, (_, j) => (i * getItemsPerSlide()) + j)
                 .filter(index => index < items)
         })
 
@@ -128,8 +141,26 @@ const Carousel = ({
         }, 300)
     }
 
+    const updateOnResize = () => {
+        currentPage.current = 1
+        setProgressValue(0)
+        totalPages.current = Math.ceil(items / getItemsPerSlide())
+        setStyle(prevStyle => ({
+            ...prevStyle,
+            '--w-slide-width': `calc(${100 / getItemsPerSlide()}% - 5px)`
+        }) as React.CSSProperties)
+
+        if (subTextValue) {
+            setUpdatedSubText(subTextValue
+                .replace('{0}', '1')
+                .replace('{1}', String(totalPages.current))
+            )
+        }
+    }
+
     useEffect(() => {
         const usedInAstro = carousel.current?.children[0].nodeName === 'ASTRO-SLOT'
+        const observer = new ResizeObserver(updateOnResize)
 
         carouselItems.current = usedInAstro
             ? carousel.current?.querySelectorAll('li')
@@ -137,6 +168,10 @@ const Carousel = ({
 
         carouselContainer.current?.addEventListener('scroll', scroll)
 
+        if (typeof itemsPerSlide !== 'number') {
+            observer.observe(carouselContainer.current!)
+        }
+
         return () => {
             carouselContainer.current?.removeEventListener('scroll', scroll)
         }
@@ -162,7 +197,7 @@ const Carousel = ({
                     type="arrows"
                     {...pagination}
                     currentPage={currentPage.current}
-                    totalPages={totalPages}
+                    totalPages={totalPages.current}
                     className={paginationClasses}
                     onChange={paginate}
                 />
@@ -170,7 +205,7 @@ const Carousel = ({
                     <span className={styles.subtext}>
                         {updatedSubText
                             .replace('{0}', '1')
-                            .replace('{1}', String(totalPages))
+                            .replace('{1}', String(totalPages.current))
                         }
                     </span>
                 )}

package/components/Carousel/carousel.ts

@@ -1,10 +1,12 @@
 import type { Snippet } from 'svelte'
 
+import type { Responsive } from '../../utils/getLayoutClasses'
+
 import type { PaginationProps } from '../Pagination/pagination'
 
 export type CarouselProps = {
     items: number
-    itemsPerSlide?: number
+    itemsPerSlide?: number | Responsive<number>
     subText?: string
     autoplay?: boolean
     vertical?: boolean

package/components/Copy/Copy.astro

@@ -8,8 +8,6 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './copy.module.scss'
 
-import type { IconProps } from '../Icon/icon'
-
 interface Props extends CopyProps {}
 
 const {
@@ -42,13 +40,13 @@ const classes = classNames([
         >
             {copyIcon?.startsWith('<svg')
                 ? <Fragment set:html={copyIcon} />
-                : <Icon type={copyIcon as IconProps['type']} />
+                : <Icon type={copyIcon} />
             }
         </button>
         <span class={styles.copied}>
             {copiedIcon?.startsWith('<svg')
                 ? <Fragment set:html={copiedIcon} />
-                : <Icon type={copiedIcon as IconProps['type']} />
+                : <Icon type={copiedIcon} />
             }
         </span>
     </div>
@@ -71,7 +69,7 @@ const classes = classNames([
             copied.style.opacity = '1'
             badge.removeAttribute('data-tooltip')
 
-            navigator.clipboard.writeText(text as string)
+            navigator.clipboard.writeText(text || '')
         }, true)
     }
 

package/components/Copy/Copy.svelte

@@ -41,7 +41,7 @@
         copiedButton!.style.opacity = '1'
         tooltip = ''
 
-        navigator.clipboard.writeText(text as string)
+        navigator.clipboard.writeText(text || '')
     }
 </script>
 

package/components/Copy/Copy.tsx

@@ -42,7 +42,7 @@ const Copy = ({
 
         setTooltipText('')
 
-        navigator.clipboard.writeText(text as string)
+        navigator.clipboard.writeText(text || '')
     }
 
     return (