webcoreui 1.4.0 → 1.5.0-beta.1

package/components/Radio/radio.module.scss

@@ -1,10 +1,8 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-radio-color: var(--w-color-primary);
-}
-
 .radio {
+    --color: var(--w-radio-color, var(--w-color-primary));
+
     @include layout(flex, column, sm);
 
     &.inline {
@@ -37,7 +35,7 @@ body {
             @include position(absolute, 't50%', 'l50%');
             @include size(8px);
             @include border-radius(max);
-            @include background(var(--w-radio-color));
+            @include background(var(--color));
 
             content: '';
             transform: translate(-50%, -50%) scale(0);
@@ -65,7 +63,7 @@ body {
 
         display: inline-block;
         min-width: 16px;
-        border: 1px solid var(--w-radio-color);
+        border: 1px solid var(--color);
     }
 
     .subtext {

package/components/Radio/radio.ts

@@ -1,24 +1,13 @@
-import type { InputTarget } from '../Input/input'
-
-export type RadioProps = {
+export type RadioProps<T extends object = object> = {
     items: {
         label: string
         value: string
         subText?: string
         selected?: boolean
         disabled?: boolean
+        required?: boolean
     }[]
-    name: string
     color?: string
     inline?: boolean
     className?: string
-    [key: string]: any
-}
-
-export type SvelteRadioProps = {
-    onChange?: (event: Event & InputTarget) => void
-} & RadioProps
-
-export type ReactRadioProps = {
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-} & RadioProps
+} & T

package/components/RangeSlider/RangeSlider.astro

@@ -9,7 +9,7 @@ import { interpolate } from '../../utils/interpolate'
 
 import styles from './rangeslider.module.scss'
 
-interface Props extends RangeSliderProps {}
+export type Props = RangeSliderProps
 
 const {
     min = 0,
@@ -31,7 +31,8 @@ const {
     maxIcon,
     interactiveLabels,
     updateLabels,
-    className
+    className,
+    ...rest
 } = Astro.props
 
 const styleVariables = classNames([
@@ -93,6 +94,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
                 step={step}
                 disabled={disabled}
                 data-min="true"
+                {...rest}
             />
             <input
                 type="range"
@@ -104,6 +106,7 @@ const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
                 step={step}
                 disabled={disabled}
                 data-max="true"
+                {...rest}
             />
         </div>
 

package/components/RangeSlider/RangeSlider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { SvelteRangeSliderProps } from './rangeslider'
+    import type { RangeSliderEventType, RangeSliderProps } from './rangeslider'
 
     import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte'
 
@@ -8,6 +8,10 @@
 
     import styles from './rangeslider.module.scss'
 
+    export type Props = RangeSliderProps & {
+        onChange?: (event: RangeSliderEventType) => void
+    }
+
     const {
         min = 0,
         max = 100,
@@ -28,33 +32,26 @@
         interactiveLabels,
         updateLabels,
         className,
-        onChange
-    }: SvelteRangeSliderProps = $props()
+        onChange,
+        ...rest
+    }: Props = $props()
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-range-slider-color: ${color};`,
         background && `--w-range-slider-background: ${background};`,
         thumb && `--w-range-slider-thumb: ${thumb};`
-    ])
+    ]))
 
-    const minLabelWidth = `${String(max).length}ch`
-    const labelStyle = updateLabels ? `min-width:${minLabelWidth};` : null
+    let minValue = $derived(selectedMin ?? min)
+    let maxValue = $derived(selectedMax ?? max)
 
-    let minValue = $state(selectedMin || min)
-    let maxValue = $state(selectedMax || max)
-    let dynamicMinLabel = $state(minLabel)
-    let dynamicMaxLabel = $state(maxLabel)
+    const labelStyle = $derived(updateLabels ? `min-width:${String(max).length}ch;` : null)
+    const dynamicMinLabel = $derived(minLabel?.replace(/\d+(\.\d+)?/, String(minValue)))
+    const dynamicMaxLabel = $derived(maxLabel?.replace(/\d+(\.\d+)?/, String(maxValue)))
 
     const rangeLeftPercent = $derived(interpolate((minValue || min), [min, max], [0, 100]))
     const rangeRightPercent = $derived(interpolate((maxValue || max), [min, max], [100, 0]))
 
-    const updateDynamicLabels = (minValue: number, maxValue: number) => {
-        if (dynamicMinLabel && dynamicMaxLabel) {
-            dynamicMinLabel = dynamicMinLabel.replace(/\d+(\.\d+)?/, String(minValue))
-            dynamicMaxLabel = dynamicMaxLabel.replace(/\d+(\.\d+)?/, String(maxValue))
-        }
-    }
-
     const handleInput = (event: Event) => {
         const target = event.target
 
@@ -63,10 +60,6 @@
         }
 
         if (maxValue - minValue >= minGap) {
-            if (updateLabels) {
-                updateDynamicLabels(minValue, maxValue)
-            }
-
             onChange?.({
                 min: minValue,
                 max: maxValue
@@ -80,13 +73,7 @@
         }
     }
 
-    const handleClick = (event: Event, direction: 'left' | 'right') => {
-        const target = event.currentTarget
-
-        if (!(target instanceof HTMLButtonElement)) {
-            return
-        }
-
+    const handleClick = (direction: 'left' | 'right') => {
         const dir = direction === 'left' ? -1 : 1
         const updatedMinValue = Number(minValue) + (dir * step)
         const updatedMaxValue = Number(maxValue) + (dir * step)
@@ -98,10 +85,6 @@
         minValue = updatedMinValue
         maxValue = updatedMaxValue
 
-        if (updateLabels) {
-            updateDynamicLabels(minValue, maxValue)
-        }
-
         onChange?.({
             min: minValue,
             max: maxValue
@@ -125,7 +108,7 @@
         <ConditionalWrapper
             element="button"
             condition={!!interactiveLabels}
-            onclick={(e: Event) => handleClick(e, 'left')}
+            onclick={() => handleClick('left')}
         >
             {#if minIcon}
                 {@html minIcon}
@@ -154,6 +137,7 @@
                 disabled={disabled}
                 oninput={handleInput}
                 data-min="true"
+                {...rest}
             />
             <input
                 type="range"
@@ -165,13 +149,14 @@
                 disabled={disabled}
                 oninput={handleInput}
                 data-max="true"
+                {...rest}
             />
         </div>
 
         <ConditionalWrapper
             element="button"
             condition={!!interactiveLabels}
-            onclick={(e: Event) => handleClick(e, 'right')}
+            onclick={() => handleClick('right')}
         >
             {#if dynamicMaxLabel}
                 <span style={labelStyle}>{dynamicMaxLabel}</span>

package/components/RangeSlider/RangeSlider.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
 import React, { useEffect, useRef, useState } from 'react'
-import type { ReactRangeSliderProps } from './rangeslider'
+import type { RangeSliderEventType, RangeSliderProps } from './rangeslider'
 
 import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 
@@ -9,6 +9,10 @@ import { interpolate } from '../../utils/interpolate'
 
 import styles from './rangeslider.module.scss'
 
+export type Props = RangeSliderProps & {
+    onChange?: (event: RangeSliderEventType) => void
+}
+
 const RangeSlider = ({
     min = 0,
     max = 100,
@@ -29,8 +33,9 @@ const RangeSlider = ({
     interactiveLabels,
     updateLabels,
     className,
-    onChange
-}: ReactRangeSliderProps) => {
+    onChange,
+    ...rest
+}: Props) => {
     const [minValue, setMinValue] = useState(selectedMin || min)
     const [maxValue, setMaxValue] = useState(selectedMax || max)
     const [dynamicMinLabel, setDynamicMinLabel] = useState(minLabel)
@@ -54,7 +59,7 @@ const RangeSlider = ({
         }
     }
 
-    const handleInput = (event: React.FormEvent) => {
+    const handleInput = (event: React.InputEvent<HTMLInputElement>) => {
         const target = event.target
 
         if (!(target instanceof HTMLInputElement)) {
@@ -167,6 +172,7 @@ const RangeSlider = ({
                         disabled={disabled}
                         onInput={handleInput}
                         data-min="true"
+                        {...rest}
                     />
                     <input
                         type="range"
@@ -178,6 +184,7 @@ const RangeSlider = ({
                         disabled={disabled}
                         onInput={handleInput}
                         data-max="true"
+                        {...rest}
                     />
                 </div>
 

package/components/RangeSlider/rangeslider.module.scss

@@ -1,11 +1,5 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --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);
-}
-
 .label {
     @include layout(flex, column, xs);
 
@@ -13,6 +7,10 @@ body {
 }
 
 .container {
+    --bg: var(--w-range-slider-background, var(--w-color-primary-50));
+    --color: var(--w-range-slider-color, var(--w-color-primary));
+    --thumb: var(--w-range-slider-thumb, var(--w-color-primary-50));
+
     @include layout(flex, v-center, xs);
 
     svg {
@@ -33,7 +31,7 @@ body {
     @include position(relative);
     @include border-radius(xl);
     @include size(h10px);
-    @include background(var(--w-range-slider-background));
+    @include background(var(--bg));
     @include visibility(hidden);
 
     flex: 1;
@@ -41,7 +39,7 @@ body {
 
 .range {
     @include position(absolute);
-    @include background(var(--w-range-slider-color));
+    @include background(var(--color));
     @include size('h100%');
     @include border-radius();
 
@@ -86,19 +84,19 @@ body {
     }
 
     &[data-min]::-webkit-slider-thumb  {
-        box-shadow: 3px 0 0 3px var(--w-range-slider-color);
+        box-shadow: 3px 0 0 3px var(--color);
     }
 
     &[data-max]::-webkit-slider-thumb  {
-        box-shadow: -3px 0 0 3px var(--w-range-slider-color);
+        box-shadow: -3px 0 0 3px var(--color);
     }
 
     &[data-min]::-moz-range-thumb   {
-        box-shadow: 3px 0 0 3px var(--w-range-slider-color);
+        box-shadow: 3px 0 0 3px var(--color);
     }
 
     &[data-max]::-moz-range-thumb   {
-        box-shadow: -3px 0 0 3px var(--w-range-slider-color);
+        box-shadow: -3px 0 0 3px var(--color);
     }
 
     
@@ -120,10 +118,10 @@ body {
 }
 
 .input::-webkit-slider-thumb {
-    @include background(var(--w-range-slider-thumb));
+    @include background(var(--thumb));
     @include size(10px);
     @include border-radius(max);
-    @include border(var(--w-range-slider-color));
+    @include border(var(--color));
 
     -webkit-appearance: none;
     appearance: none;
@@ -132,10 +130,10 @@ body {
 }
 
 .input::-moz-range-thumb {
-    @include background(var(--w-range-slider-thumb));
+    @include background(var(--thumb));
     @include size(9px);
     @include border-radius(max);
-    @include border(var(--w-range-slider-color));
+    @include border(var(--color));
 
     pointer-events: auto;
     appearance: none;

package/components/RangeSlider/rangeslider.ts

@@ -13,6 +13,7 @@ export type RangeSliderProps = {
     step?: number
     minGap?: number
     disabled?: boolean
+    required?: boolean
     color?: string
     background?: string
     thumb?: string
@@ -27,12 +28,3 @@ export type RangeSliderProps = {
     updateLabels?: boolean
     className?: string
 }
-
-export type SvelteRangeSliderProps = {
-    onChange?: (event: RangeSliderEventType) => void
-} & RangeSliderProps
-
-export type ReactRangeSliderProps = {
-    onChange?: (event: RangeSliderEventType) => void
-} & RangeSliderProps
-

package/components/Rating/Rating.astro

@@ -7,7 +7,7 @@ import { classNames } from '../../utils/classNames'
 
 import styles from './rating.module.scss'
 
-interface Props extends RatingProps {}
+export type Props = RatingProps
 
 const {
     score,

package/components/Rating/Rating.svelte

@@ -6,6 +6,8 @@
     import { classNames } from '../../utils/classNames'
 
     import styles from './rating.module.scss'
+
+    export type Props = RatingProps
 
     const {
         score,
@@ -22,25 +24,26 @@
         emptyColor,
         size,
         className
-    }: RatingProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.rating,
         outline && styles.outline,
         className
-    ])
+    ]))
 
-    const styleVariables = classNames([
+    const styleVariables = $derived(classNames([
         color && `--w-rating-color: ${color};`,
         size && `--w-rating-size: ${size}px;`,
         emptyColor && `--w-rating-empty-color: ${emptyColor};`
-    ])
+    ]))
 
-    const translatedText = text!
+    const translatedText = $derived(text!
         .replace('{0}', `${score}`)
         .replace('{1}', `${total}`)
+    )
 
-    const translatedReviewText = reviewText?.replace('{0}', `${reviewCount}`)
+    const translatedReviewText = $derived(reviewText?.replace('{0}', `${reviewCount}`))
 </script>
 
 

package/components/Rating/Rating.tsx

@@ -6,6 +6,8 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx'
 import { classNames } from '../../utils/classNames'
 
 import styles from './rating.module.scss'
+
+export type Props = RatingProps
 
 const Rating = ({
     score,
@@ -22,7 +24,7 @@ const Rating = ({
     emptyColor,
     size,
     className
-}: RatingProps) => {
+}: Props) => {
     const classes = classNames([
         styles.rating,
         outline && styles.outline,

package/components/Rating/rating.module.scss

@@ -1,32 +1,30 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-rating-color: var(--w-color-primary);
-    --w-rating-empty-color: var(--w-color-primary);
-    --w-rating-empty-background: var(--w-color-primary-70);
-    --w-rating-size: 18px;
-}
-
 .rating {
+    --color: var(--w-rating-color, var(--w-color-primary));
+    --empty-color: var(--w-rating-empty-color, var(--w-color-primary));
+    --empty-background: var(--w-rating-empty-background, var(--w-color-primary-70));
+    --size: var(--w-rating-size, 18px);
+
     @include layout(inline-flex, v-center);
 
-    color: var(--w-rating-color);
-    font-size: var(--w-rating-size);
+    color: var(--color);
+    font-size: var(--size);
 
     &.outline .empty {
         transform: scale(.9);
         transform-origin: left;
-        color: var(--w-rating-empty-background);
+        color: var(--empty-background);
         letter-spacing: 2px;
         text-shadow:
-            -1px 0 var(--w-rating-empty-color),
-            0 1px var(--w-rating-empty-color),
-            1px 0 var(--w-rating-empty-color),
-            0 -1px var(--w-rating-empty-color);
+            -1px 0 var(--empty-color),
+            0 1px var(--empty-color),
+            1px 0 var(--empty-color),
+            0 -1px var(--empty-color);
     }
 
     .empty {
-        color: var(--w-rating-empty-color);
+        color: var(--empty-color);
     }
 
     a:hover .text {

package/components/Ribbon/Ribbon.astro

@@ -3,7 +3,7 @@ import type { RibbonProps } from './ribbon'
 
 import styles from './ribbon.module.scss'
 
-interface Props extends RibbonProps {}
+export type Props = RibbonProps
 
 const {
     offset,

package/components/Ribbon/Ribbon.svelte

@@ -1,24 +1,29 @@
 <script lang="ts">
-    import type { SvelteRibbonProps } from './ribbon'
+    import type { Snippet } from 'svelte'
+    import type { RibbonProps } from './ribbon'
 
     import { classNames } from '../../utils/classNames'
 
     import styles from './ribbon.module.scss'
 
+    export type Props = RibbonProps & {
+        children: Snippet
+    }
+
     const {
         offset,
         type,
         theme,
         className,
         children
-    }: SvelteRibbonProps = $props()
+    }: Props = $props()
 
-    const classes = classNames([
+    const classes = $derived(classNames([
         styles.ribbon,
         theme && styles[theme],
         type && styles[type],
         className
-    ])
+    ]))
 </script>
 
 <span

package/components/Ribbon/Ribbon.tsx

@@ -1,17 +1,21 @@
 import React from 'react'
-import type { ReactRibbonProps } from './ribbon'
+import type { RibbonProps } from './ribbon'
 
 import { classNames } from '../../utils/classNames'
 
 import styles from './ribbon.module.scss'
 
+export type Props = RibbonProps & {
+    children: React.ReactNode
+}
+
 const Ribbon = ({
     offset,
     type,
     theme,
     className,
     children
-}: ReactRibbonProps) => {
+}: Props) => {
     const classes = classNames([
         styles.ribbon,
         theme && styles[theme],

package/components/Ribbon/ribbon.module.scss

@@ -1,18 +1,16 @@
 @use '../../scss/config.scss' as *;
 
-body {
-    --w-ribbon-offset: 20px;
-    --w-ribbon-folded-offset: 10px;
-}
-
 .ribbon {
+    --offset: var(--w-ribbon-offset, 20px);
+    --folded-offset: var(--w-ribbon-folded-offset, 10px);
+
     @include position(absolute);
     @include typography(sm, primary-70);
     @include background(primary);
     @include spacing('px-5xl');
 
-    top: var(--w-ribbon-offset);
-    left: var(--w-ribbon-offset);
+    top: var(--offset);
+    left: var(--offset);
 
     transform: rotate(-45deg) translate(-50%, -50%);
     transform-origin: top left;
@@ -23,7 +21,7 @@ body {
         @include spacing(px-sm);
 
         transform: none;
-        left: calc(var(--w-ribbon-folded-offset) * -1);
+        left: calc(var(--folded-offset) * -1);
 
         &::before {
             @include position(absolute, t15px, l0);
@@ -31,9 +29,9 @@ body {
 
             content: '';
             transform: translateY(-50%);
-            border-right: var(--w-ribbon-folded-offset) solid var(--w-color-primary-20);
-            border-top: var(--w-ribbon-folded-offset) solid transparent;
-            border-bottom: var(--w-ribbon-folded-offset) solid transparent;
+            border-right: var(--folded-offset) solid var(--w-color-primary-20);
+            border-top: var(--folded-offset) solid transparent;
+            border-bottom: var(--folded-offset) solid transparent;
         }
     }
 

package/components/Ribbon/ribbon.ts

@@ -1,5 +1,3 @@
-import type { Snippet } from 'svelte'
-
 export type RibbonProps = {
     offset?: number
     type?: 'folded' | null
@@ -12,11 +10,3 @@ export type RibbonProps = {
         | undefined
     className?: string
 }
-
-export type SvelteRibbonProps = {
-    children: Snippet
-} & RibbonProps
-
-export type ReactRibbonProps = {
-    children: React.ReactNode
-} & RibbonProps

package/components/Select/Select.astro

@@ -12,7 +12,7 @@ import ChevronDown from '../../icons/chevron-down.svg?raw'
 
 import styles from './select.module.scss'
 
-interface Props extends SelectProps {}
+export type Props = SelectProps
 
 const {
     name,
@@ -21,6 +21,7 @@ const {
     label,
     subText,
     disabled,
+    required,
     position,
     updateValue = true,
     className,
@@ -47,6 +48,7 @@ const inputRestProps = Object.fromEntries(
     value={(value && inferredValue) ? inferredValue : value}
     readonly={true}
     disabled={disabled}
+    required={required}
     placeholder={placeholder}
     label={label}
     subText={subText}