webcoreui 0.6.1 → 0.8.0

package/components/Group/group.module.scss

@@ -1,43 +1,43 @@
-@import '../../scss/config.scss';
-
-.group {
-    @include layout(flex, none);
-    @include visibility(auto);
-
-    button,
-    span {
-        @include border-radius(none);
-
-        &:first-child {
-            @include border-radius(left, md);
-        }
-
-        &:last-child {
-            @include border-radius(right, md);
-        }
-    }
-
-    &.separator button:not(:last-child),
-    &.separator span:not(:last-child) {
-        @include border(1px, right, primary-70);
-    }
-
-    &.outline button
-    &.outline span {
-        @include border(1px, primary-20);
-        box-shadow: none;
-
-        &:hover {
-            @include border(1px, primary);
-            box-shadow: none;
-        }
-
-        &:first-child {
-            @include border(right, 0);
-        }
-
-        &:last-child {
-            @include border(left, 0);
-        }
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.group {
+    @include layout(flex, none);
+    @include visibility(auto);
+
+    button,
+    span {
+        @include border-radius(none);
+
+        &:first-child {
+            @include border-radius(left, md);
+        }
+
+        &:last-child {
+            @include border-radius(right, md);
+        }
+    }
+
+    &.separator button:not(:last-child),
+    &.separator span:not(:last-child) {
+        @include border(1px, right, primary-70);
+    }
+
+    &.outline button
+    &.outline span {
+        @include border(1px, primary-20);
+        box-shadow: none;
+
+        &:hover {
+            @include border(1px, primary);
+            box-shadow: none;
+        }
+
+        &:first-child {
+            @include border(right, 0);
+        }
+
+        &:last-child {
+            @include border(left, 0);
+        }
+    }
+}

package/components/Icon/map.ts

@@ -13,6 +13,7 @@ import Home from '../../icons/home.svg?raw'
 import Info from '../../icons/info.svg?raw'
 import Moon from '../../icons/moon.svg?raw'
 import Order from '../../icons/order.svg?raw'
+import Plus from '../../icons/plus.svg?raw'
 import Search from '../../icons/search.svg?raw'
 import Sun from '../../icons/sun.svg?raw'
 import Warning from '../../icons/warning.svg?raw'
@@ -33,6 +34,7 @@ const iconMap = {
     'info': Info,
     'moon': Moon,
     'order': Order,
+    'plus': Plus,
     'search': Search,
     'sun': Sun,
     'warning': Warning

package/components/Kbd/Kbd.astro

@@ -0,0 +1,20 @@
+---
+import type { KbdProps } from './kbd'
+import { keyMap } from './keyMap'
+
+import styles from './kbd.module.scss'
+
+interface Props extends KbdProps {}
+
+const {
+    keys,
+    className
+} = Astro.props
+
+const classes = [
+    styles.kbd,
+    className
+]
+---
+
+<kbd class:list={classes}>{keys?.map(key => keyMap[key])}<slot /></kbd>

package/components/Kbd/Kbd.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { KbdProps } from './kbd'
+    import { keyMap } from './keyMap'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './kbd.module.scss'
+
+    export let keys: KbdProps['keys'] = []
+    export let className: KbdProps['className'] = ''
+
+    const classes = classNames([
+        styles.kbd,
+        className
+    ])
+</script>
+
+<kbd class={classes}>{keys?.map(key => keyMap[key]).join('')}<slot /></kbd>

package/components/Kbd/Kbd.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { ReactKbdProps } from './kbd'
+import { keyMap } from './keyMap'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './kbd.module.scss'
+
+const Kbd = ({
+    keys,
+    className,
+    children
+}: ReactKbdProps) => {
+    const classes = classNames([
+        styles.kbd,
+        className
+    ])
+
+    return (
+        <kbd className={classes}>
+            {keys?.map(key => keyMap[key]).join('')}
+            {children}
+        </kbd>
+    )
+}
+
+export default Kbd

package/components/Kbd/kbd.module.scss

@@ -0,0 +1,8 @@
+@use '../../scss/config.scss' as *;
+
+.kbd {
+    @include background(primary-50);
+    @include border-radius(md);
+    @include typography(md, regular);
+    @include spacing(py-xs, px-xs);
+}

package/components/Kbd/kbd.ts

@@ -0,0 +1,26 @@
+export type KbdProps = {
+    keys?: ('cmd'
+        | 'shift'
+        | 'ctrl'
+        | 'option'
+        | 'enter'
+        | 'del'
+        | 'esc'
+        | 'tab'
+        | 'capslock'
+        | 'up'
+        | 'down'
+        | 'left'
+        | 'right'
+        | 'pageup'
+        | 'pagedown'
+        | 'home'
+        | 'end'
+        | 'help'
+        | 'space')[]
+    className?: string
+}
+
+export type ReactKbdProps = {
+    children?: React.ReactNode
+} & KbdProps

package/components/Kbd/keyMap.ts

@@ -0,0 +1,21 @@
+export const keyMap = {
+    cmd: '⌘',
+    shift: '⇧',
+    ctrl: '⌃',
+    option: '⌥',
+    enter: '↵',
+    del: '⌫',
+    esc: '⎋',
+    tab: '⇥',
+    capslock: '⇪',
+    up: '↑',
+    down: '↓',
+    left: '←',
+    right: '→',
+    pageup: '⇞',
+    pagedown: '⇟',
+    home: '↖',
+    end: '↘',
+    help: '?',
+    space: '␣'
+}

package/components/List/list.module.scss

@@ -1,91 +1,91 @@
-@import '../../scss/config.scss';
-
-.list {
-    @include spacing(0);
-
-    overflow-y: auto;
-    list-style-type: none;
-
-    &:hover li[data-selected] {
-        @include background(transparent);
-    }
-
-    li {
-        @include transition(background);
-        @include spacing(px-sm, py-xs, m-xs);
-        @include layout(flex, sm, v-center);
-        @include border-radius(md);
-
-        &:not(.title, [data-disabled]) {
-            cursor: pointer;
-        }
-
-        &:not(.title, [data-disabled]):hover,
-        &[data-selected] {
-            @include background(primary-40);
-        }
-
-        &[data-disabled],
-        &[data-disabled] span {
-            @include typography(primary-30);
-
-            cursor: default;
-        }
-
-        &[data-hidden] {
-            @include visibility(none);
-        }
-
-        &[data-id="w-no-results"] {
-            @include layout(h-center);
-            cursor: default;
-
-            &:hover {
-                @include background(transparent);
-            }
-        }
-
-        &.title {
-            @include typography(md, primary-20);
-            @include spacing(m0);
-            
-            padding-bottom: 0;
-            
-            &:not(:first-child) {
-                @include border(top, primary-50);
-            }
-        }
-
-        svg {
-            @include size(18px);
-            pointer-events: none;
-        }
-
-        a,
-        div {
-            @include layout(flex, sm, v-center);
-            @include typography(none);
-            flex: 1;
-        }
-
-        div {
-            pointer-events: none;
-        }
-
-        span {
-            @include typography(md, primary-20);
-            pointer-events: none;
-        }
-    }
-}
-
-.container {
-    @include border-radius(md);
-    @include border(primary-50);
-
-    input {
-        @include border(top, 0);
-        @include border(left, 0);
-        @include border(right, 0);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.list {
+    @include spacing(0);
+
+    overflow-y: auto;
+    list-style-type: none;
+
+    &:hover li[data-selected] {
+        @include background(transparent);
+    }
+
+    li {
+        @include transition(background);
+        @include spacing(px-sm, py-xs, m-xs);
+        @include layout(flex, sm, v-center);
+        @include border-radius(md);
+
+        &:not(.title, [data-disabled]) {
+            cursor: pointer;
+        }
+
+        &:not(.title, [data-disabled]):hover,
+        &[data-selected] {
+            @include background(primary-40);
+        }
+
+        &[data-disabled],
+        &[data-disabled] span {
+            @include typography(primary-30);
+
+            cursor: default;
+        }
+
+        &[data-hidden] {
+            @include visibility(none);
+        }
+
+        &[data-id="w-no-results"] {
+            @include layout(h-center);
+            cursor: default;
+
+            &:hover {
+                @include background(transparent);
+            }
+        }
+
+        &.title {
+            @include typography(md, primary-20);
+            @include spacing(m0);
+            
+            padding-bottom: 0;
+            
+            &:not(:first-child) {
+                @include border(top, primary-50);
+            }
+        }
+
+        svg {
+            @include size(18px);
+            pointer-events: none;
+        }
+
+        a,
+        div {
+            @include layout(flex, sm, v-center);
+            @include typography(none);
+            flex: 1;
+        }
+
+        div {
+            pointer-events: none;
+        }
+
+        span {
+            @include typography(md, primary-20);
+            pointer-events: none;
+        }
+    }
+}
+
+.container {
+    @include border-radius(md);
+    @include border(primary-50);
+
+    input {
+        @include border(top, 0);
+        @include border(left, 0);
+        @include border(right, 0);
+    }
+}

package/components/Masonry/masonry.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 body {
     --w-masonry-gap: 5px;

package/components/Modal/modal.module.scss

@@ -1,110 +1,110 @@
-@import '../../scss/config.scss';
-
-.modal {
-    @include transition();
-    @include position(fixed, 't50%', 'l50%');
-    @include spacing(m0, p-default);
-    @include layer(modal);
-    @include visibility(block, 0);
-    @include border(primary-50);
-    @include background(primary-70);
-    @include typography(primary);
-    @include border-radius(md);
-    @include size('w90%');
-
-    transform: translate(-50%, calc(-50% + 15px));
-    max-width: 500px;
-    pointer-events: none;
-
-    &[data-show="true"] {
-        @include visibility(1);
-
-        transform: translate(-50%, -50%);
-        pointer-events: all;
-
-        + .overlay {
-            @include visibility(1);
-            pointer-events: all;
-        }
-    }
-
-    &.transparent {
-        @include border(0);
-        @include spacing(p0);
-        @include size('wfit-content');
-        @include background(transparent);
-    }
-
-    &.info {
-        @include border(info);
-
-        .title {
-            @include typography(info);
-        }
-    }
-
-    &.success {
-        @include border(success);
-
-        .title {
-            @include typography(success);
-        }
-    }
-
-    &.warning {
-        @include border(warning);
-
-        .title {
-            @include typography(warning);
-        }
-    }
-
-    &.alert {
-        @include border(alert);
-
-        .title {
-            @include typography(alert);
-        }
-    }
-
-    .close {
-        @include position(absolute, t10px, r10px);
-        @include spacing(p-xs);
-
-        svg {
-            @include size(10px);
-        }
-    }
-
-    .title {
-        @include typography(lg);
-        @include spacing(mb-xs);
-        @include layout(flex, v-center, xs);
-
-        svg {
-            @include size(20px);
-        }
-    }
-
-    .subTitle {
-        @include typography(primary-20);
-        @include spacing(mb-xs);
-    }
-}
-
-.overlay {
-    @include transition(opacity);
-    @include position(fixed);
-    @include background(overlay);
-    @include layer(header);
-    @include visibility(0);
-
-    inset: 0;
-    pointer-events: none;
-}
-
-@include media(xs) {
-    .modal {
-        @include size('wauto');
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.modal {
+    @include transition();
+    @include position(fixed, 't50%', 'l50%');
+    @include spacing(m0, p-default);
+    @include layer(modal);
+    @include visibility(block, 0);
+    @include border(primary-50);
+    @include background(primary-70);
+    @include typography(primary);
+    @include border-radius(md);
+    @include size('w90%');
+
+    transform: translate(-50%, calc(-50% + 15px));
+    max-width: 500px;
+    pointer-events: none;
+
+    &[data-show="true"] {
+        @include visibility(1);
+
+        transform: translate(-50%, -50%);
+        pointer-events: all;
+
+        + .overlay {
+            @include visibility(1);
+            pointer-events: all;
+        }
+    }
+
+    &.transparent {
+        @include border(0);
+        @include spacing(p0);
+        @include size('wfit-content');
+        @include background(transparent);
+    }
+
+    &.info {
+        @include border(info);
+
+        .title {
+            @include typography(info);
+        }
+    }
+
+    &.success {
+        @include border(success);
+
+        .title {
+            @include typography(success);
+        }
+    }
+
+    &.warning {
+        @include border(warning);
+
+        .title {
+            @include typography(warning);
+        }
+    }
+
+    &.alert {
+        @include border(alert);
+
+        .title {
+            @include typography(alert);
+        }
+    }
+
+    .close {
+        @include position(absolute, t10px, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+
+    .title {
+        @include typography(lg);
+        @include spacing(mb-xs);
+        @include layout(flex, v-center, xs);
+
+        svg {
+            @include size(20px);
+        }
+    }
+
+    .subTitle {
+        @include typography(primary-20);
+        @include spacing(mb-xs);
+    }
+}
+
+.overlay {
+    @include transition(opacity);
+    @include position(fixed);
+    @include background(overlay);
+    @include layer(header);
+    @include visibility(0);
+
+    inset: 0;
+    pointer-events: none;
+}
+
+@include media(xs) {
+    .modal {
+        @include size('wauto');
+    }
+}

package/components/Pagination/pagination.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 .pagination {
     @include layout(flex, xs, wrap);