webcoreui 0.7.0 → 0.8.0

package/components/Skeleton/skeleton.module.scss

@@ -0,0 +1,68 @@
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-skeleton-color: var(--w-color-primary-60);
+    --w-skeleton-wave-color: var(--w-color-primary-50);
+}
+
+.skeleton {
+    @include background(var(--w-skeleton-color));
+    @include size(100%);
+
+    text-indent: -9999px;
+
+    &.wave {
+        @include position(relative);
+        @include visibility(hidden);
+
+        &::after {
+            @include position(absolute, t0);
+            @include visibility(block);
+            @include size('w200px', 'h100%');
+
+            content: '';
+            left: -200px;
+            animation: wave 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
+            background: linear-gradient(
+                to right,
+                transparent 0%,
+                var(--w-skeleton-wave-color) 50%,
+                transparent 100%
+            );
+        }
+    }
+
+    &.pulse {
+        animation: pulse 1.3s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
+    }
+
+    &.rounded {
+        @include border-radius();
+    }
+
+    &.circle {
+        @include border-radius(max);
+    }
+}
+
+@keyframes wave {
+    from {
+        left: -200px;
+    }
+    to   {
+        left: 100%;
+    }
+}
+
+
+@keyframes pulse {
+    0% {
+        @include visibility(1);
+    }
+    50% {
+        @include visibility(.7);
+    }
+    100% {
+        @include visibility(1);
+    }
+}

package/components/Skeleton/skeleton.ts

@@ -0,0 +1,9 @@
+export type SkeletonProps = {
+    animate?: 'wave' | 'pulse' | false
+    type?: 'rounded' | 'rectangular' | 'circle'
+    width?: number
+    height?: number
+    color?: string
+    waveColor?: string
+    className?: string
+}

package/components/Slider/slider.module.scss

@@ -1,68 +1,68 @@
-@import '../../scss/config.scss';
-
-body {
-    --w-slider-background: var(--w-color-primary-50);
-    --w-slider-color: var(--w-color-primary);
-    --w-slider-thumb: var(--w-color-primary-50);
-}
-
-.slider {
-    @include border-radius(xl);
-    @include size('w100%');
-    @include visibility(hidden);
-    @include size(h10px);
-    @include spacing(m0);
-
-    -webkit-appearance: none;
-    appearance: none;
-    cursor: pointer;
-
-    &[disabled]::-webkit-slider-runnable-track {
-        @include background(primary-50);
-    }
-    
-    &[disabled]::-moz-range-track {
-        @include background(primary-50);
-    }
-
-    &[disabled]::-webkit-slider-thumb {
-        @include background(primary-50);
-        @include border(primary-30);
-        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
-    }
-
-    &[disabled]::-moz-range-thumb {
-        @include background(primary-50);
-        @include border(primary-30);
-        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
-    }
-}
-
-.slider::-webkit-slider-runnable-track {
-    @include background(var(--w-slider-background));
-}
-
-.slider::-moz-range-track {
-    @include background(var(--w-slider-background));
-    @include size(h10px);
-}
-
-.slider::-webkit-slider-thumb {
-    @include background(var(--w-slider-thumb));
-    @include size(10px);
-    @include border-radius(max);
-    @include border(var(--w-slider-color));
-
-    -webkit-appearance: none;
-    appearance: none;
-    box-shadow: -995px 0 0 990px var(--w-slider-color);
-}
-
-.slider::-moz-range-thumb {
-    @include background(var(--w-slider-thumb));
-    @include size(9px);
-    @include border-radius(max);
-    @include border(var(--w-slider-color));
-
-    box-shadow: -995px 0 0 990px var(--w-slider-color);
-}
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-slider-background: var(--w-color-primary-50);
+    --w-slider-color: var(--w-color-primary);
+    --w-slider-thumb: var(--w-color-primary-50);
+}
+
+.slider {
+    @include border-radius(xl);
+    @include size('w100%');
+    @include visibility(hidden);
+    @include size(h10px);
+    @include spacing(m0);
+
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+
+    &[disabled]::-webkit-slider-runnable-track {
+        @include background(primary-50);
+    }
+    
+    &[disabled]::-moz-range-track {
+        @include background(primary-50);
+    }
+
+    &[disabled]::-webkit-slider-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+
+    &[disabled]::-moz-range-thumb {
+        @include background(primary-50);
+        @include border(primary-30);
+        box-shadow: -995px 0 0 990px var(--w-color-primary-30);
+    }
+}
+
+.slider::-webkit-slider-runnable-track {
+    @include background(var(--w-slider-background));
+}
+
+.slider::-moz-range-track {
+    @include background(var(--w-slider-background));
+    @include size(h10px);
+}
+
+.slider::-webkit-slider-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(10px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    -webkit-appearance: none;
+    appearance: none;
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
+}
+
+.slider::-moz-range-thumb {
+    @include background(var(--w-slider-thumb));
+    @include size(9px);
+    @include border-radius(max);
+    @include border(var(--w-slider-color));
+
+    box-shadow: -995px 0 0 990px var(--w-slider-color);
+}

package/components/Spoiler/spoiler.module.scss

@@ -1,40 +1,40 @@
-@import '../../scss/config.scss';
-
-body {
-    --w-spoiler-color: var(--w-color-primary);
-}
-
-span.spoiler {
-    @include border-radius();
-    @include background(var(--w-spoiler-color));
-    @include typography(hmd);
-    @include visibility(inline);
-
-    color: transparent;
-    user-select: none;
-    cursor: pointer;
-
-    &.anim {
-        @include transition();
-    }
-
-    &.block {
-        @include visibility(block);
-    }
-
-    code {
-        @include border(0);
-    }
-
-    &[data-visible] {
-        @include background(transparent);
-        
-        color: inherit;
-        user-select: auto;
-        cursor: auto;
-
-        code {
-            @include border(primary-50);
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-spoiler-color: var(--w-color-primary);
+}
+
+span.spoiler {
+    @include border-radius();
+    @include background(var(--w-spoiler-color));
+    @include typography(hmd);
+    @include visibility(inline);
+
+    color: transparent;
+    user-select: none;
+    cursor: pointer;
+
+    &.anim {
+        @include transition();
+    }
+
+    &.block {
+        @include visibility(block);
+    }
+
+    code {
+        @include border(0);
+    }
+
+    &[data-visible] {
+        @include background(transparent);
+        
+        color: inherit;
+        user-select: auto;
+        cursor: auto;
+
+        code {
+            @include border(primary-50);
+        }
+    }
+}

package/components/Stepper/stepper.module.scss

@@ -1,102 +1,102 @@
-@import '../../scss/config.scss';
-
-body {
-    --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);
-}
-
-$size: 20px;
-
-.stepper {
-    @include layout(flex, default, column);
-    @include spacing(0);
-    @include size('w100%');
-
-    list-style-type: none;
-
-    &:not(.borderless) .number {
-        border: 2px solid var(--w-stepper-color-border);
-    }
-
-    li {
-        @include layout(flex, sm, v-center);
-        @include typography(normal);
-        @include spacing(m0);
-
-        flex: 1;
-
-        &.connect {
-            @include position(relative);
-
-            &::before {
-                @include position(absolute, l16px);
-                @include background(var(--w-stepper-color-border));
-                @include size(w2px);
-
-                top: -50%;
-                bottom: calc(50% + $size);
-
-                content: '';
-            }
-
-            &.completed::before,
-            &.active::before {
-                @include background(var(--w-stepper-color-complete));
-            }
-        }
-
-        &.active .number {
-            border-color: var(--w-stepper-color-active);
-            color: var(--w-stepper-color-active);
-        }
-
-        &.completed .number {
-            border-color: var(--w-stepper-color-complete);
-            color: var(--w-stepper-color-complete);
-        }
-
-        .number {
-            @include size($size);
-            @include border-radius(max);
-            @include layout(flex, center);
-            @include spacing(p-md);
-            @include typography(bold, md);
-
-            svg {
-                @include position(absolute);
-            }
-        }
-
-        .container {
-            @include layout(flex, column);
-        }
-
-        .muted {
-            @include typography(primary-20, md);
-        }
-    }
-}
-
-@include media(xs) {
-    .stepper:not(.vertical) {
-        @include layout(row);
-
-        li {
-            @include layout(column, xs, v-center);
-
-            &.connect::before {
-                @include size(h2px);
-
-                width: auto;
-                top: 16px;
-                left: calc(-50%);
-                right: calc(50% + $size);
-            }
-
-            .container {
-                @include layout(v-center);
-            }
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+body {
+    --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);
+}
+
+$size: 20px;
+
+.stepper {
+    @include layout(flex, default, column);
+    @include spacing(0);
+    @include size('w100%');
+
+    list-style-type: none;
+
+    &:not(.borderless) .number {
+        border: 2px solid var(--w-stepper-color-border);
+    }
+
+    li {
+        @include layout(flex, sm, v-center);
+        @include typography(normal);
+        @include spacing(m0);
+
+        flex: 1;
+
+        &.connect {
+            @include position(relative);
+
+            &::before {
+                @include position(absolute, l16px);
+                @include background(var(--w-stepper-color-border));
+                @include size(w2px);
+
+                top: -50%;
+                bottom: calc(50% + $size);
+
+                content: '';
+            }
+
+            &.completed::before,
+            &.active::before {
+                @include background(var(--w-stepper-color-complete));
+            }
+        }
+
+        &.active .number {
+            border-color: var(--w-stepper-color-active);
+            color: var(--w-stepper-color-active);
+        }
+
+        &.completed .number {
+            border-color: var(--w-stepper-color-complete);
+            color: var(--w-stepper-color-complete);
+        }
+
+        .number {
+            @include size($size);
+            @include border-radius(max);
+            @include layout(flex, center);
+            @include spacing(p-md);
+            @include typography(bold, md);
+
+            svg {
+                @include position(absolute);
+            }
+        }
+
+        .container {
+            @include layout(flex, column);
+        }
+
+        .muted {
+            @include typography(primary-20, md);
+        }
+    }
+}
+
+@include media(xs) {
+    .stepper:not(.vertical) {
+        @include layout(row);
+
+        li {
+            @include layout(column, xs, v-center);
+
+            &.connect::before {
+                @include size(h2px);
+
+                width: auto;
+                top: 16px;
+                left: calc(-50%);
+                right: calc(50% + $size);
+            }
+
+            .container {
+                @include layout(v-center);
+            }
+        }
+    }
+}

package/components/Table/Table.tsx

@@ -27,7 +27,7 @@ const Table = ({
     ])
 
     const styleVariables = {
-        ...(maxHeight && { 'max-height': maxHeight })
+        ...(maxHeight && { maxHeight })
     } as React.CSSProperties
 
     return (

package/components/Textarea/textarea.module.scss

@@ -1,36 +1,36 @@
-@import '../../scss/config.scss';
-
-.textarea {
-    @include size('w100%');
-    @include background(transparent);
-    @include border-radius(sm);
-    @include border(primary-50);
-    @include spacing(p-sm);
-    @include typography(regular, primary, hlg);
-
-    min-height: 50px;
-    resize: vertical;
-
-    &[disabled] {
-        @include typography(primary-30);
-        cursor: no-drop;
-    }
-
-    &::placeholder {
-        @include typography(primary-30);
-    }
-}
-
-.label-wrapper {
-    @include layout(flex, column);
-
-    .label {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
-    }
-
-    .subtext {
-        @include typography(md, primary-30);
-        @include spacing(mt-xs);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.textarea {
+    @include size('w100%');
+    @include background(transparent);
+    @include border-radius(sm);
+    @include border(primary-50);
+    @include spacing(p-sm);
+    @include typography(regular, primary, hlg);
+
+    min-height: 50px;
+    resize: vertical;
+
+    &[disabled] {
+        @include typography(primary-30);
+        cursor: no-drop;
+    }
+
+    &::placeholder {
+        @include typography(primary-30);
+    }
+}
+
+.label-wrapper {
+    @include layout(flex, column);
+
+    .label {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+
+    .subtext {
+        @include typography(md, primary-30);
+        @include spacing(mt-xs);
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "scripts": {
         "prepare": "husky",
         "pre-commit": "lint-staged",
@@ -30,7 +30,7 @@
         "lint-staged": "15.2.9",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "sass": "1.77.5",
+        "sass": "1.80.6",
         "svelte": "4.2.19",
         "svelte-eslint-parser": "0.41.0",
         "typescript": "5.4.5",

package/react.d.ts

@@ -27,9 +27,11 @@ import type { ReactPopoverProps as WReactPopoverProps } from './components/Popov
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
 import type { ReactRadioProps as WReactRadioProps } from './components/Radio/radio'
 import type { RatingProps as WRatingProps } from './components/Rating/rating'
+import type { ReactRibbonProps as WReactRibbonProps } from './components/Ribbon/ribbon'
 import type { ReactSelectProps as WReactSelectProps } from './components/Select/select'
 import type { ReactSheetProps as WReactSheetProps } from './components/Sheet/sheet'
 import type { ReactSidebarProps as WReactSidebarProps } from './components/Sidebar/sidebar'
+import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { ReactSliderProps as WReactSliderProps } from './components/Slider/slider'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
 import type { ReactSpoilerProps as WReactSpoilerProps } from './components/Spoiler/spoiler'
@@ -72,9 +74,11 @@ declare module 'webcoreui/react' {
 	export const Progress: FC<WProgressProps>
 	export const Radio: FC<WReactRadioProps>
 	export const Rating: FC<WRatingProps>
+	export const Ribbon: FC<WReactRibbonProps>
 	export const Select: FC<WReactSelectProps>
 	export const Sheet: FC<WReactSheetProps>
 	export const Sidebar: FC<WReactSidebarProps>
+	export const Skeleton: FC<WSkeletonProps>
 	export const Slider: FC<WReactSliderProps>
 	export const Spinner: FC<WSpinnerProps>
 	export const Spoiler: FC<WReactSpoilerProps>
@@ -116,9 +120,11 @@ declare module 'webcoreui/react' {
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WReactRadioProps
 	export type RatingProps = WRatingProps
+	export type RibbonProps = WReactRibbonProps
 	export type SelectProps = WReactSelectProps
 	export type SheetProps = WReactSheetProps
 	export type SidebarProps = WReactSidebarProps
+	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WReactSliderProps
 	export type SpinnerProps = WSpinnerProps
 	export type SpoilerProps = WReactSpoilerProps

package/react.js

@@ -26,9 +26,11 @@ import PopoverComponent from './components/Popover/Popover.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
 import RatingComponent from './components/Rating/Rating.tsx'
+import RibbonComponent from './components/Ribbon/Ribbon.tsx'
 import SelectComponent from './components/Select/Select.tsx'
 import SheetComponent from './components/Sheet/Sheet.tsx'
 import SidebarComponent from './components/Sidebar/Sidebar.tsx'
+import SkeletonComponent from './components/Skeleton/Skeleton.tsx'
 import SliderComponent from './components/Slider/Slider.tsx'
 import SpinnerComponent from './components/Spinner/Spinner.tsx'
 import SpoilerComponent from './components/Spoiler/Spoiler.tsx'
@@ -70,9 +72,11 @@ 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

package/scss/config/color-palette.scss

@@ -1,3 +1,5 @@
+@use 'webcore.config.scss' as *;
+
 $colorPalette: (
     'primary': var(--w-color-primary),
     'primary-10': var(--w-color-primary-10),

package/scss/config/css-values.scss

@@ -1,3 +1,5 @@
+@use 'webcore.config.scss' as *;
+
 $overflowValues: auto,
     hidden,
     overlay,