@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/command-palette/scss/index.scss

@@ -0,0 +1,235 @@
+@use 'variables';
+
+.command-palette {
+    display: contents;
+
+
+    &--blur &-dialog.modal::backdrop {
+        backdrop-filter: blur(var(--size-100));
+    }
+
+    &-dialog.modal {
+        --backdrop: var(--dialog-backdrop);
+        --margin-horizontal: var(--size-400);
+        --max-width: var(--dialog-width);
+        --scale: var(--dialog-scale);
+        --transition-duration: var(--open-duration);
+        --transition-timing-function: var(--timing-function);
+        --translateY: 0px;
+        background: var(--dialog-background);
+        border-radius: var(--dialog-border-radius);
+        box-shadow: var(--raised);
+        color: var(--color);
+        // Pinned from the top rather than centered, so the input stays put while filtering resizes the list.
+        margin-block: var(--dialog-offset) auto;
+        overflow: hidden;
+        transform-origin: top;
+
+        &:not(.--active) {
+            --transition-duration: var(--close-duration);
+        }
+    }
+
+    &-empty {
+        color: var(--color-muted);
+        font-size: var(--font-size);
+        padding: var(--size-700) var(--size-400);
+        text-align: center;
+    }
+
+    &-group-label {
+        color: var(--color-muted);
+        font-size: var(--label-font-size);
+        font-weight: var(--font-weight-500);
+        padding: var(--size-100) var(--size-300) calc(var(--size-100) / 2);
+        user-select: none;
+    }
+
+    &-icon {
+        flex-shrink: 0;
+        height: var(--size-400);
+        width: var(--size-400);
+    }
+
+    &-input.input {
+        --color-default: var(--color);
+        --font-size: var(--font-size);
+        --padding-horizontal: 0px;
+        --padding-vertical: 0px;
+        --size: 0px;
+        height: 100%;
+        outline: none;
+
+        &::placeholder {
+            color: var(--color-muted);
+        }
+    }
+
+    &-kbd {
+        align-items: center;
+        background: var(--kbd-background);
+        border: var(--border-width-400) solid var(--kbd-border-color);
+        border-radius: var(--kbd-border-radius);
+        color: var(--color-muted);
+        display: flex;
+        font-family: inherit;
+        font-size: var(--kbd-font-size);
+        height: var(--kbd-size);
+        justify-content: center;
+        line-height: 1;
+        min-width: var(--kbd-size);
+        padding-inline: calc(var(--size-100) / 2);
+    }
+
+    &-keys {
+        display: flex;
+        flex-shrink: 0;
+        gap: 2px;
+    }
+
+    &-label {
+        color: var(--color);
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &--filtered {
+            color: var(--color-muted);
+        }
+    }
+
+    &-list {
+        max-height: var(--list-max-height);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        // Padding plus the option radius equals the dialog radius.
+        padding: calc(var(--size-100) / 2);
+        scroll-padding-block: calc(var(--size-100) / 2);
+
+        &.--empty {
+            display: none;
+        }
+    }
+
+    &-match {
+        color: var(--color);
+    }
+
+    &-option {
+        align-items: center;
+        border-radius: var(--option-border-radius);
+        cursor: default;
+        display: flex;
+        font-size: var(--font-size);
+        gap: var(--size-200);
+        height: var(--option-height);
+        padding-inline: var(--size-300);
+        transition: none;
+        user-select: none;
+
+        &.--active {
+            background: var(--option-background);
+        }
+
+        &-icon {
+            color: var(--color-muted);
+            display: flex;
+            flex-shrink: 0;
+
+            &:empty {
+                display: none;
+            }
+
+            svg {
+                height: var(--size-400);
+                width: var(--size-400);
+            }
+
+            .--active > & {
+                color: var(--color);
+            }
+        }
+    }
+
+    &-panel {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &-search {
+        align-items: center;
+        border-bottom: var(--border-width-400) solid var(--divider-color);
+        color: var(--color-muted);
+        display: flex;
+        flex-shrink: 0;
+        gap: var(--size-200);
+        height: var(--search-height);
+        padding-inline: var(--size-400);
+    }
+
+    &-trigger {
+        align-items: center;
+        background: var(--trigger-background);
+        border: 0;
+        border-radius: var(--trigger-border-radius);
+        box-shadow: var(--raised);
+        color: var(--color-muted);
+        cursor: pointer;
+        display: flex;
+        font: inherit;
+        font-size: var(--font-size);
+        gap: var(--size-100);
+        height: var(--trigger-height);
+        max-width: 100%;
+        outline: none;
+        padding-inline: var(--size-300) 6px;
+        touch-action: manipulation;
+        transition:
+            color var(--open-duration) ease-out,
+            scale var(--open-duration) ease-out;
+        user-select: none;
+        width: var(--trigger-width);
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--color);
+            outline-offset: var(--border-width-500);
+        }
+
+        &:hover {
+            color: var(--color);
+        }
+
+        &-label {
+            flex: 1 1 auto;
+            overflow: hidden;
+            text-align: left;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-dialog.modal {
+            --scale: 1;
+            transition: opacity var(--transition-duration) var(--transition-timing-function);
+
+            &::backdrop {
+                transition: opacity var(--transition-duration) var(--transition-timing-function);
+            }
+        }
+
+        &-trigger {
+            transition: color var(--open-duration) ease-out;
+
+            &:active {
+                scale: 1;
+            }
+        }
+    }
+}

package/src/components/command-palette/scss/variables.scss

@@ -0,0 +1,42 @@
+.command-palette {
+    --close-duration: 0.1s;
+    --color: var(--color-text-500);
+    --color-muted: var(--color-text-300);
+    --dialog-backdrop: color-mix(in srgb, var(--color-text-500) 10%, transparent);
+    --dialog-background: var(--color-white-300);
+    --dialog-border-radius: var(--border-radius-600);
+    --dialog-offset: 20vh;
+    --dialog-scale: 0.98;
+    --dialog-width: 400px;
+    --divider-color: var(--color-border-300);
+    --font-size: calc(var(--font-size-400) * 0.875);
+    --kbd-background: var(--color-white-300);
+    --kbd-border-color: var(--color-border-300);
+    --kbd-border-radius: var(--border-radius-200);
+    --kbd-font-size: calc(var(--font-size-300) * 0.875);
+    --kbd-size: 20px;
+    --label-font-size: var(--font-size-300);
+    --list-max-height: min(320px, 50vh);
+    --open-duration: 0.15s;
+    --option-background: var(--color-grey-400);
+    --option-border-radius: var(--border-radius-400);
+    --option-height: 36px;
+    --raised:
+        0 0 0 1px oklch(from var(--color-black-300) l c h / 0.06),
+        0 1px 2px oklch(from var(--color-black-300) l c h / 0.06),
+        0 6px 16px -6px oklch(from var(--color-black-300) l c h / 0.12);
+    --search-height: 48px;
+    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --trigger-background: var(--color-grey-400);
+    --trigger-border-radius: var(--border-radius-400);
+    --trigger-height: 36px;
+    --trigger-width: 240px;
+
+    &--blur {
+        --dialog-backdrop: color-mix(in srgb, var(--color-black-500) 24%, transparent);
+    }
+
+    &--centered {
+        --dialog-offset: auto;
+    }
+}

package/src/components/composer/index.ts

@@ -0,0 +1,117 @@
+import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import icon from '~/components/icon';
+import textarea from '~/components/textarea';
+import arrow from './svg/arrow-up.svg';
+import './scss/index.scss';
+
+
+const COMPOSER_SEND = Symbol.for('@esportsplus/ui/composer.send');
+
+const COMPOSER_TEXTAREA = Symbol.for('@esportsplus/ui/composer.textarea');
+
+
+type A = Attributes & {
+    [COMPOSER_SEND]?: Attributes & {
+        disabled?: never;
+        onclick?: never;
+    };
+    [COMPOSER_TEXTAREA]?: Parameters<typeof textarea>[0] & {
+        oninput?: never;
+        onkeydown?: never;
+        value?: never;
+    };
+    actions?: Renderable<unknown>;
+    footer?: Renderable<unknown>;
+    state?: { processing: boolean, value: string };
+    submit: (value: string) => Promise<void> | void;
+};
+
+
+type D = Attributes & Pick<A, typeof COMPOSER_SEND | typeof COMPOSER_TEXTAREA>;
+
+
+export default component(
+    function(
+        this: { attributes?: D },
+        {
+            actions,
+            footer,
+            state = reactive({
+                processing: false,
+                value: ''
+            }),
+            submit,
+            ...attributes
+        }: A
+    ) {
+        let disabled = () => state.processing || !state.value.trim();
+
+        let send = async () => {
+            if (disabled()) {
+                return;
+            }
+
+            state.processing = true;
+
+            try {
+                await submit(state.value);
+                state.value = '';
+            }
+            finally {
+                state.processing = false;
+            }
+        };
+
+        return html`
+            <div class='composer' ${this?.attributes} ${attributes}>
+                <div class='composer-input'>
+                    ${textarea({
+                        autoresize: { height: { max: '320px', min: '72px' } },
+                        ...this?.attributes?.[COMPOSER_TEXTAREA],
+                        ...attributes[COMPOSER_TEXTAREA],
+                        oninput: (e: Event) => {
+                            state.value = (e.target as HTMLTextAreaElement).value;
+                        },
+                        onkeydown: (e: KeyboardEvent) => {
+                            if (e.key !== 'Enter' || e.isComposing || e.shiftKey) {
+                                return;
+                            }
+
+                            e.preventDefault();
+                            void send();
+                        },
+                        value: () => state.value
+                    })}
+
+                    <div class='composer-toolbar'>
+                        <div class='composer-actions'>
+                            ${actions}
+                        </div>
+
+                        <button
+                            aria-label='Send'
+                            class='composer-send'
+                            type='button'
+                            ${this?.attributes?.[COMPOSER_SEND]}
+                            ${attributes[COMPOSER_SEND]}
+                            ${{
+                                disabled,
+                                onclick: send
+                            }}
+                        >
+                            ${icon({ 'aria-hidden': true }, arrow)}
+                        </button>
+                    </div>
+                </div>
+
+                ${footer && html`
+                    <div class='composer-footer'>
+                        ${footer}
+                    </div>
+                `}
+            </div>
+        `;
+    },
+    { send: COMPOSER_SEND, textarea: COMPOSER_TEXTAREA }
+);

package/src/components/composer/scss/index.scss

@@ -0,0 +1,105 @@
+@use 'variables';
+
+.composer {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: var(--width);
+
+
+    &-action {
+        align-items: center;
+        background: var(--background);
+        border: 0;
+        border-radius: var(--border-radius);
+        color: var(--color);
+        cursor: pointer;
+        display: inline-flex;
+        flex: 0 0 auto;
+        font-size: var(--font-size);
+        gap: var(--gap);
+        padding: var(--padding-vertical) var(--padding-horizontal);
+        transition:
+            background var(--transition-duration) var(--transition-timing-function),
+            color var(--transition-duration) var(--transition-timing-function);
+        white-space: nowrap;
+    }
+
+    &-actions,
+    &-footer {
+        align-items: center;
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap);
+        min-width: 0;
+    }
+
+    &-footer {
+        padding: var(--padding-vertical) var(--padding-horizontal);
+    }
+
+    &-input {
+        background: var(--background);
+        border: var(--border-width) solid var(--border-color);
+        border-radius: inherit;
+        box-shadow: var(--box-shadow);
+        cursor: text;
+        display: flex;
+        flex-direction: column;
+        transition:
+            border-color var(--transition-duration) var(--transition-timing-function),
+            box-shadow var(--transition-duration) var(--transition-timing-function);
+
+        .textarea {
+            &::placeholder {
+                color: var(--placeholder-color);
+            }
+        }
+    }
+
+    &-send {
+        align-items: center;
+        background: var(--background);
+        border: 0;
+        border-radius: 100%;
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        flex: 0 0 var(--size);
+        height: var(--size);
+        justify-content: center;
+        margin-left: auto;
+        padding: 0;
+        transition:
+            background var(--transition-duration) var(--transition-timing-function),
+            opacity var(--transition-duration) var(--transition-timing-function);
+        width: var(--size);
+
+        &:disabled {
+            background: var(--background-disabled);
+            cursor: default;
+        }
+
+        .icon {
+            --size: var(--icon-size);
+        }
+    }
+
+    &-separator {
+        align-self: center;
+        background: var(--background);
+        flex: 0 0 var(--width);
+        height: var(--height);
+        margin: 0 var(--margin-horizontal);
+        width: var(--width);
+    }
+
+    &-toolbar {
+        align-items: center;
+        display: flex;
+        gap: var(--gap);
+        padding: 0 var(--padding-horizontal) var(--padding-vertical);
+    }
+}

package/src/components/composer/scss/variables.scss

@@ -0,0 +1,82 @@
+@use '/tokens';
+
+.composer {
+    --background: var(--color-grey-400);
+    --border-radius: var(--border-radius-700);
+    --width: 100%;
+
+    &-action {
+        --background: transparent;
+        --background-hover: color-mix(in srgb, var(--color-text-500), transparent 94%);
+        --background-pressed: color-mix(in srgb, var(--color-text-500), transparent 90%);
+        --border-radius: var(--border-radius-300);
+        --color: var(--color-text-400);
+        --color-hover: var(--color-text-500);
+        --font-size: var(--font-size-400);
+        --gap: var(--size-100);
+        --padding-horizontal: var(--size-200);
+        --padding-vertical: var(--size-100);
+
+        @include tokens.state(hover) {
+            --background: var(--background-hover);
+            --color: var(--color-hover);
+        }
+
+        @include tokens.state(pressed) {
+            --background: var(--background-pressed);
+            --color: var(--color-hover);
+        }
+    }
+
+    &-actions,
+    &-footer {
+        --gap: var(--size-100);
+    }
+
+    &-footer {
+        --padding-horizontal: var(--size-300);
+        --padding-vertical: var(--size-200);
+    }
+
+    &-input {
+        --background: var(--color-white-300);
+        --border-color: var(--border-color-default);
+        --border-color-active: var(--color-border-400);
+        --border-color-default: var(--color-border-300);
+        --border-width: var(--border-width-400);
+        --box-shadow: none;
+
+        &:focus-within {
+            --border-color: var(--border-color-active);
+        }
+
+        .textarea {
+            --color-default: var(--color-text-500);
+            --font-size: var(--font-size-400);
+            --padding-horizontal: var(--size-500);
+            --padding-vertical: var(--size-400);
+            --placeholder-color: var(--color-text-300);
+        }
+    }
+
+    &-send {
+        --background: var(--color-text-500);
+        --background-disabled: var(--color-text-300);
+        --color: var(--color-white-300);
+        --icon-size: var(--size-300);
+        --size: var(--size-600);
+    }
+
+    &-separator {
+        --background: var(--color-border-300);
+        --height: var(--size-400);
+        --margin-horizontal: var(--size-100);
+        --width: var(--border-width-400);
+    }
+
+    &-toolbar {
+        --gap: var(--size-300);
+        --padding-horizontal: var(--size-300);
+        --padding-vertical: var(--size-300);
+    }
+}

package/src/components/composer/svg/arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>

package/src/components/container/scss/index.scss

@@ -5,7 +5,8 @@
     flex-wrap: wrap;
     gap: var(--gap-vertical) var(--gap-horizontal);
     justify-content: flex-start;
-    margin: var(--margin-vertical) auto;
+    margin-block: var(--margin-vertical);
+    margin-inline: auto;
     position: relative;
     width: min(var(--max-width), calc(100% - var(--margin-horizontal) * 2));
 }