webcoreui 0.0.12 → 0.2.0

package/icons/close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.390524 0.390524C0.911223 -0.130175 1.75544 -0.130175 2.27614 0.390524L12 10.1144L21.7239 0.390524C22.2446 -0.130175 23.0888 -0.130175 23.6095 0.390524C24.1302 0.911223 24.1302 1.75544 23.6095 2.27614L13.8856 12L23.6095 21.7239C24.1302 22.2446 24.1302 23.0888 23.6095 23.6095C23.0888 24.1302 22.2446 24.1302 21.7239 23.6095L12 13.8856L2.27614 23.6095C1.75544 24.1302 0.911223 24.1302 0.390524 23.6095C-0.130175 23.0888 -0.130175 22.2446 0.390524 21.7239L10.1144 12L0.390524 2.27614C-0.130175 1.75544 -0.130175 0.911223 0.390524 0.390524Z" fill="currentColor"/>
+</svg>

package/icons.d.ts

@@ -0,0 +1,12 @@
+declare module 'webcoreui/icons' {
+    export const alert: string
+	export const arrowDown: string
+	export const check: string
+	export const circleCheck: string
+	export const close: string
+	export const github: string
+	export const info: string
+	export const moon: string
+	export const sun: string
+	export const warning: string
+}

package/icons.js

@@ -0,0 +1,10 @@
+export { default as alert } from './icons/alert.svg?raw'
+export { default as arrowDown } from './icons/arrow-down.svg?raw'
+export { default as check } from './icons/check.svg?raw'
+export { default as circleCheck } from './icons/circle-check.svg?raw'
+export { default as close } from './icons/close.svg?raw'
+export { default as github } from './icons/github.svg?raw'
+export { default as info } from './icons/info.svg?raw'
+export { default as moon } from './icons/moon.svg?raw'
+export { default as sun } from './icons/sun.svg?raw'
+export { default as warning } from './icons/warning.svg?raw'

package/index.js

@@ -1,4 +1,6 @@
 export * from './utils/classNames.ts'
 export * from './utils/cookies.ts'
 export * from './utils/event.ts'
+export * from './utils/interpolate.ts'
+export * from './utils/modal.ts'
 export * from './utils/toast.ts'

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "webcoreui",
     "type": "module",
-    "version": "0.0.12",
+    "version": "0.2.0",
     "scripts": {
         "dev": "astro dev",
         "build": "astro check && astro build",
@@ -36,6 +36,8 @@
         "utils",
         "astro.d.ts",
         "astro.js",
+        "icons.d.ts",
+        "icons.js",
         "svelte.d.ts",
         "svelte.js",
         "react.d.ts",

package/react.d.ts

@@ -10,16 +10,18 @@ import type { ReactConditionalWrapperProps } from './components/ConditionalWrapp
 import type { IconProps } from './components/Icon/icon'
 import type { ReactInputProps } from './components/Input/input'
 import type { ReactMenuProps } from './components/Menu/menu'
+import type { ReactModalProps } from './components/Modal/modal'
 import type { ProgressProps } from './components/Progress/progress'
 import type { ReactRadioProps } from './components/Radio/radio'
 import type { RatingProps } from './components/Rating/rating'
+import type { ReactSliderProps } from './components/Slider/slider'
 import type { SpinnerProps } from './components/Spinner/spinner'
 import type { ReactSwitchProps } from './components/Switch/switch'
 import type { TableProps } from './components/Table/table'
 import type { ReactTabsProps } from './components/Tabs/tabs'
 import type { ReactThemeSwitcherProps } from './components/ThemeSwitcher/themeswitcher'
 import type { ReactTimelineProps } from './components/Timeline/timeline'
-import type { TimelineItemProps } from './components/TimelineItem/timelineitem'
+import type { ReactTimelineItemProps } from './components/TimelineItem/timelineitem'
 import type { ReactToastProps } from './components/Toast/toast'
 
 declare module 'webcoreui/react' {
@@ -34,15 +36,17 @@ declare module 'webcoreui/react' {
 	export const Icon: FC<IconProps>
 	export const Input: FC<ReactInputProps>
 	export const Menu: FC<ReactMenuProps>
+	export const Modal: FC<ReactModalProps>
 	export const Progress: FC<ProgressProps>
 	export const Radio: FC<ReactRadioProps>
 	export const Rating: FC<RatingProps>
+	export const Slider: FC<ReactSliderProps>
 	export const Spinner: FC<SpinnerProps>
 	export const Switch: FC<ReactSwitchProps>
 	export const Table: FC<TableProps>
 	export const Tabs: FC<ReactTabsProps>
 	export const ThemeSwitcher: FC<ReactThemeSwitcherProps>
 	export const Timeline: FC<ReactTimelineProps>
-	export const TimelineItem: FC<TimelineItemProps>
+	export const TimelineItem: FC<ReactTimelineItemProps>
 	export const Toast: FC<ReactToastProps>
 }

package/react.js

@@ -9,9 +9,11 @@ import ConditionalWrapperComponent from './components/ConditionalWrapper/Conditi
 import IconComponent from './components/Icon/Icon.tsx'
 import InputComponent from './components/Input/Input.tsx'
 import MenuComponent from './components/Menu/Menu.tsx'
+import ModalComponent from './components/Modal/Modal.tsx'
 import ProgressComponent from './components/Progress/Progress.tsx'
 import RadioComponent from './components/Radio/Radio.tsx'
 import RatingComponent from './components/Rating/Rating.tsx'
+import SliderComponent from './components/Slider/Slider.tsx'
 import SpinnerComponent from './components/Spinner/Spinner.tsx'
 import SwitchComponent from './components/Switch/Switch.tsx'
 import TableComponent from './components/Table/Table.tsx'
@@ -32,9 +34,11 @@ export const ConditionalWrapper = ConditionalWrapperComponent
 export const Icon = IconComponent
 export const Input = InputComponent
 export const Menu = MenuComponent
+export const Modal = ModalComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Switch = SwitchComponent
 export const Table = TableComponent

package/scss/config/color-palette.scss

@@ -0,0 +1,24 @@
+$colorPalette: (
+    'primary': var(--w-color-primary),
+    'primary-10': var(--w-color-primary-10),
+    'primary-20': var(--w-color-primary-20),
+    'primary-30': var(--w-color-primary-30),
+    'primary-40': var(--w-color-primary-40),
+    'primary-50': var(--w-color-primary-50),
+    'primary-60': var(--w-color-primary-60),
+    'primary-70': var(--w-color-primary-70),
+
+    'info': var(--w-color-info),
+    'info-accent': var(--w-color-info-accent),
+    'info-fg': var(--w-color-info-fg),
+    'success': var(--w-color-success),
+    'success-accent': var(--w-color-success-accent),
+    'success-fg': var(--w-color-success-fg),
+    'warning': var(--w-color-warning),
+    'warning-accent': var(--w-color-warning-accent),
+    'warning-fg': var(--w-color-warning-fg),
+    'alert': var(--w-color-alert),
+    'alert-accent': var(--w-color-alert-accent),
+    'alert-fg': var(--w-color-alert-fg),
+    'overlay': var(--w-color-overlay)
+) !default;

package/scss/config/css-values.scss

@@ -0,0 +1,44 @@
+$overflowValues: auto,
+    hidden,
+    overlay,
+    scroll,
+    visible !default;
+
+$displayValues: inline,
+    block,
+    contents,
+    flex,
+    flow,
+    flow-root,
+    grid,
+    inline-block,
+    inline-flex,
+    inline-grid,
+    inline-table,
+    list-item,
+    run-in,
+    table,
+    table-caption,
+    table-column-group,
+    table-header-group,
+    table-footer-group,
+    table-row-group,
+    table-cell,
+    table-column,
+    table-row,
+    none !default;
+
+$positionValues: absolute,
+    fixed,
+    relative,
+    static,
+    sticky !default;
+
+$flexDirectionValues: row
+    column
+    row-reverse
+    column-reverse !default;
+
+$flexWrapValues: wrap
+    nowrap
+    wrap-reverse !default;

package/scss/config/layout.scss

@@ -0,0 +1,41 @@
+$breakpoints: (
+    'xs': 600px,
+    'sm': 800px,
+    'md': 1024px,
+    'lg': 1200px
+) !default;
+
+$layers: (
+    'bg': -1,
+    'default': 0,
+    'fg': 1,
+    'overlay': 2,
+    'popup': 3,
+    'top':  98,
+    'header': 99,
+    'modal': 100
+) !default;
+
+$radius: (
+    'none': 0,
+    'sm': var(--w-sm-radius),
+    'md': var(--w-md-radius),
+    'lg': var(--w-lg-radius),
+    'xl': var(--w-xl-radius),
+    'max': 100%
+) !default;
+
+$spacing: (
+    'none':    0,
+    'xxs':     2px,
+    'xs':      5px,
+    'sm':      10px,
+    'md':      15px,
+    'default': 20px,
+    'lg':      25px,
+    'xl':      30px,
+    '2xl':     35px,
+    '3xl':     40px,
+    '4xl':     45px,
+    '5xl':     50px
+) !default;

package/scss/config/mixins.scss

@@ -1,16 +1,399 @@
-@mixin Transition($property: all, $speed: .3s) {
-    transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:string';
+
+@mixin background($arg) {
+    background: map.get($colorPalette, '#{$arg}') or $arg;
+}
+
+@mixin border($args...) {
+    $width: 1px;
+    $color: map.get($colorPalette, primary);
+    $position: border;
+    $positions: (
+        'top': border-top,
+        'bottom': border-bottom,
+        'left': border-left,
+        'right': border-right,
+        'x': (border-left, border-right),
+        'y': (border-top, border-bottom)
+    );
+
+    @each $arg in $args {
+        @if (map.get($colorPalette, '#{$arg}') or meta.type-of($arg) == color) {
+          $color: map.get($colorPalette, '#{$arg}') or $arg;
+        }
+
+        @if (meta.type-of($arg) == 'number') {
+            $width: $arg;
+        }
+
+        @if (map.get($positions, $arg)) {
+            $position: map.get($positions, $arg);
+        }
+    }
+
+    @if ($width != 0 and $color) {
+        @each $key in $position {
+            #{$key}: $width solid $color;
+        }
+    }
+
+    @if ($width == 0) {
+        @each $key in $position {
+            #{$key}: $width;
+        }
+    }
+}
+
+@mixin border-radius($args...) {
+    $borderRadius: map.get($radius, 'md');
+    $position: null;
+  
+    @each $arg in $args {
+      @if (map.get($radius, $arg)) {
+        $borderRadius: map.get($radius, $arg);
+      }
+  
+      $side: (
+        top: $borderRadius $borderRadius 0 0,
+        bottom: 0 0 $borderRadius $borderRadius,
+        left: $borderRadius 0 0 $borderRadius,
+        right: 0 $borderRadius $borderRadius 0,
+        diagonal: $borderRadius 0,
+        reverse-diagonal: 0 $borderRadius
+      );
+  
+      @if (map.get($side, $arg)) {
+        $position: map.get($side, $arg);
+      }
+    }
+  
+    border-radius: $position or $borderRadius;
+  }
+
+@mixin layer($stack: 'default') {
+    z-index: #{map.get($layers, $stack)};
 }
 
-@mixin Media($size: 'xs') {
-    $sizes: (
-        'xs':   600px,
-        'sm':   800px,
-        'md':   1024px,
-        'lg':   1200px
+@mixin layout($args...) {
+    $layouts: (flex, inline-flex, grid, inline-grid);
+    $alignments: (
+        vertical: (
+            'v-center': center,
+            'v-start': flex-start,
+            'v-end': flex-end,
+            'v-baseline': baseline,
+            'v-stretch': stretch
+        ),
+        horizontal: (
+            'h-center': center,
+            'h-start': flex-start,
+            'h-end': flex-end,
+            'h-between': space-between,
+            'h-around': space-around,
+            'h-evenly': space-evenly,
+            'h-stretch': stretch
+        )
     );
 
-    @media (min-width: #{map-get($sizes, $size)}) {
+    @each $arg in $args {
+        @if (list.index($layouts, $arg)) {
+            display: $arg;
+        }
+
+        @if (map.get($spacing, $arg)) {
+            gap: map.get($spacing, $arg);
+        }
+
+        @if (meta.type-of($arg) == 'string') {
+            @if (string.index($arg, 'v-')) {
+                align-items: map.get(map.get($alignments, vertical), $arg)
+            }
+    
+            @if (string.index($arg, 'h-')) {
+                justify-content: map.get(map.get($alignments, horizontal), $arg)
+            }
+        }
+
+        @if ($arg == 'center') {
+            align-items: center;
+            justify-content: center;
+        }
+
+        @if (list.index($flexDirectionValues, $arg)) {
+            flex-direction: $arg;
+        }
+
+        @if (meta.type-of($arg) == 'number') {
+            grid-template-columns: repeat($arg, minmax(0, 1fr));
+        }
+
+        @if (list.index($flexWrapValues, $arg)) {
+            flex-wrap: $arg;
+        }
+    }
+}
+
+@mixin media($breakpoint: 'xs') {
+    @media (min-width: #{map.get($breakpoints, $breakpoint)}) {
         @content;
     }
 }
+
+@mixin position($args...) {
+    @each $arg in $args {
+        @if (list.index($positionValues, $arg)) {
+            position: $arg;
+        }
+
+        @if (string.index($arg, 't') == 1) {
+            top: #{list.nth(string.split($arg, 't'), 2)};
+        }
+
+        @if (string.index($arg, 'b') == 1) {
+            bottom: #{list.nth(string.split($arg, 'b'), 2)};
+        }
+
+        @if (string.index($arg, 'l') == 1) {
+            left: #{list.nth(string.split($arg, 'l'), 2)};
+        }
+
+        @if (string.index($arg, 'r') == 1 and $arg != relative) {
+            right: #{list.nth(string.split($arg, 'r'), 2)};
+        }
+
+        @if ($arg == 'h-center') {
+            left: 50%;
+            transform: translateX(-50%);
+        }
+      
+        @if ($arg == 'v-center') {
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        @if ($arg == 'center') {
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}
+
+@mixin size($args...) {
+    $singlePrefix: string.slice(list.nth(#{$args}, 1), 1, 1);
+    $isSingle: list.length($args) == 1
+        and $singlePrefix != 'w'
+        and $singlePrefix != 'h';
+
+    @if ($isSingle) {
+        width: $args;
+        height: $args;
+    } @else {
+        @each $arg in $args {
+            @if (meta.type-of($arg) == string) {
+                $prefix: string.slice($arg, 1, 1);
+                $value: string.slice($arg, 2, -1);
+
+                @if ($prefix == 'w') {
+                    width: string.unquote($value);
+                }
+
+                @if ($prefix == 'h') {
+                    height: string.unquote($value);
+                }
+            } @else {
+                @if (index($args, $arg) == 1) {
+                    width: $arg;
+                }
+    
+                @if (index($args, $arg) == 2) {
+                    height: $arg;
+                }
+            }
+        }
+    }
+}
+
+@mixin spacing($args...) {
+    $margin: (0 0 0 0);
+    $padding: (0 0 0 0);
+    $size: 'none';
+    $mx: 0;
+    $my: 0;
+    $px: 0;
+    $py: 0;
+
+    $marginMap: (
+        'mt': 1,
+        'mr': 2,
+        'mb': 3,
+        'ml': 4
+    );
+
+    $paddingMap: (
+        'pt': 1,
+        'pr': 2,
+        'pb': 3,
+        'pl': 4
+    );
+
+    @each $arg in $args {
+        @if (meta.type-of($arg) == string) {
+            $list: string.split($arg, '-');
+            $marginMapKey: map.get($marginMap, string.slice($arg, 1, 2));
+            $paddingMapKey: map.get($paddingMap, string.slice($arg, 1, 2));
+
+            @if (list.length($list) == 2) {
+                $size: map.get($spacing, list.nth(string.split($arg, '-'), 2));
+            }
+
+            // Setting margins
+            @if ($marginMapKey) {
+                $margin: list.set-nth(
+                    $margin,
+                    $marginMapKey,
+                    $size
+                );
+            }
+
+            @if (string.index($arg, 'mx-')) {
+                $mx: $size;
+                $margin: ($my $mx);
+            }
+
+            @if (string.index($arg, 'my-')) {
+                $my: $size;
+                $margin: ($my $mx);
+            }
+
+            @if (string.index($arg, 'm-')) {
+                $margin: $size;
+            }
+            
+            @if (string.index($arg, 'auto')) {
+                margin: map.get($spacing, $size) or $size auto;
+            }
+
+            @if ($arg == 'm0') {
+                margin: 0;
+            }
+
+            // Setting paddings
+            @if ($paddingMapKey) {
+                $padding: list.set-nth(
+                    $padding,
+                    $paddingMapKey,
+                    $size
+                );
+            }
+
+            @if (string.index($arg, 'px-')) {
+                $px: $size;
+                $padding: ($py $px);
+            }
+
+            @if (string.index($arg, 'py-')) {
+                $py: $size;
+                $padding: ($py $px);
+            }
+
+            @if (string.index($arg, 'p-')) {
+                $padding: $size;
+            }
+
+            @if ($arg == 'p0') {
+                padding: 0;
+            }  
+        }
+
+        @if (map.get($spacing, $arg)) {
+            margin: map.get($spacing, $arg);
+            padding: map.get($spacing, $arg);
+        }
+        
+        @if ($arg == 0) {
+            margin: 0;
+            padding: 0;
+        }
+    }
+
+    @if ($margin != (0 0 0 0)) {
+        margin: $margin;
+    }
+
+    @if ($padding != (0 0 0 0)) {
+        padding: $padding;
+    }
+}
+
+@mixin transition($args...) {
+    $property: all;
+    $speed: .3s;
+
+    @each $arg in $args {
+        @if (meta.type-of($arg) == 'number') {
+            $speed: $arg;
+        } @else {
+            $property: $arg;
+        }
+    }
+
+    transition: $property $speed cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+@mixin typography($args...) {
+    @each $arg in $args {
+        $color: map.get($colorPalette, '#{$arg}');
+        $type: map.get($fontTypes, '#{$arg}');
+        $size: map.get($fontSizes, '#{$arg}');
+        $height: map.get($lineHeights, '#{$arg}');
+        $decoration: map.get($decorations, '#{$arg}');
+
+        @if ($color) {
+            color: $color;
+        }
+
+        @if ($type) {
+            font-family: $type;
+        }
+
+        @if ($size) {
+            font-size: $size;
+        }
+
+        @if list.index($fontWeights, $arg) {
+            font-weight: $arg;
+        }
+
+        @if list.index($textAlignValues, $arg) {
+            text-align: $arg;
+        }
+
+        @if ($decoration) {
+            text-decoration: $decoration;
+        }
+
+        @if ($height or (meta.type-of($arg) == 'number' and $arg < 100)) {
+            line-height: $height or $arg;
+        }
+    }
+}
+
+@mixin visibility($args...) {        
+    @each $arg in $args {
+        @if list.index($displayValues, $arg) {
+            display: $arg;
+        }
+
+        @if list.index($overflowValues, $arg) {
+            overflow: $arg;
+        }
+
+        @if (meta.type-of($arg) == 'number') {
+            opacity: $arg;
+        }
+    }
+}