@1001-digital/components 0.0.1

package/src/base/components/Loading.vue

@@ -0,0 +1,81 @@
+<template>
+  <div :class="['loader', { stacked }]">
+    <span
+      v-if="spinner"
+      class="spinner"
+      aria-hidden="true"
+    ></span>
+    <span
+      v-if="txt"
+      class="text"
+      >{{ txt }}</span
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    txt?: string
+    spinner?: boolean
+    stacked?: boolean
+  }>(),
+  {
+    txt: 'Loading...',
+    spinner: false,
+  },
+)
+</script>
+
+<style scoped>
+.loader {
+  position: relative;
+  z-index: var(--z-index-ui);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacer-sm);
+
+  .spinner {
+    width: var(--size-3);
+    height: var(--size-3);
+    border: 2px solid var(--muted);
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: spin var(--speed-slow, 1s) linear infinite;
+  }
+
+  .text {
+    @mixin ui-font;
+    color: var(--muted);
+  }
+
+  &:not(.stacked) {
+    .text {
+      width: min-content;
+    }
+  }
+
+  &.stacked {
+    flex-direction: column;
+    gap: var(--spacer);
+  }
+
+  &:not(.inline) {
+    text-align: center;
+    margin: calc(var(--size-6)) 0;
+  }
+
+  &.inline {
+    display: inline-flex;
+    gap: var(--size-1);
+    margin-left: var(--size-1);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/src/base/components/Popover.vue

@@ -0,0 +1,182 @@
+<template>
+  <PopoverRoot
+    v-model:open="open"
+    :modal="modal"
+  >
+    <PopoverTrigger as-child>
+      <slot name="trigger" />
+    </PopoverTrigger>
+
+    <PopoverPortal>
+      <PopoverContent
+        class="popover"
+        :class="props.class"
+        :side="side"
+        :align="align"
+        :side-offset="sideOffset"
+        :align-offset="alignOffset"
+        :avoid-collisions="avoidCollisions"
+        :collision-padding="collisionPadding"
+        @open-auto-focus.prevent="onOpenAutoFocus"
+        @interact-outside="onInteractOutside"
+      >
+        <h1 v-if="title || $slots.title">
+          <slot name="title">{{ title }}</slot>
+        </h1>
+        <PopoverClose
+          v-if="closable"
+          :as="Button"
+          class="popover-close tertiary"
+          aria-label="Close"
+        >
+          <Icon type="close" />
+        </PopoverClose>
+
+        <section>
+          <slot />
+        </section>
+
+        <PopoverArrow
+          v-if="arrow"
+          class="popover-arrow"
+        />
+      </PopoverContent>
+    </PopoverPortal>
+  </PopoverRoot>
+</template>
+
+<script setup lang="ts">
+import Button from './Button.vue'
+import Icon from './Icon.vue'
+import {
+  PopoverArrow,
+  PopoverClose,
+  PopoverContent,
+  PopoverPortal,
+  PopoverRoot,
+  PopoverTrigger,
+} from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<{
+    class?: string | string[] | Record<string, boolean>
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    sideOffset?: number
+    alignOffset?: number
+    avoidCollisions?: boolean
+    collisionPadding?: number
+    title?: string
+    arrow?: boolean
+    closable?: boolean
+    dismissable?: boolean
+    modal?: boolean
+  }>(),
+  {
+    side: 'bottom',
+    align: 'center',
+    sideOffset: 4,
+    avoidCollisions: true,
+    collisionPadding: 8,
+    dismissable: true,
+  },
+)
+
+const open = defineModel<boolean>('open', { required: true })
+
+// Focus the popover itself to prevent the close button from gaining focus
+const onOpenAutoFocus = (e: Event) => {
+  ;(e.target as HTMLElement)?.focus()
+}
+
+const onInteractOutside = (e: Event) => {
+  if (!props.dismissable) e.preventDefault()
+}
+</script>
+
+<style scoped>
+@layer components {
+  :deep(.popover) {
+    background: var(--popover-background);
+    color: var(--color);
+    border: var(--popover-border);
+    border-radius: var(--popover-border-radius);
+    padding: 0;
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    z-index: var(--z-index-ui);
+    min-inline-size: max(
+      var(--popover-min-width, 12rem),
+      var(--reka-popover-trigger-width)
+    );
+    inline-size: min(
+      var(--popover-width, 20rem),
+      calc(100vw - var(--spacer) * 2)
+    );
+    max-block-size: var(--reka-popover-content-available-height);
+    container-type: inline-size;
+    transform-origin: var(--reka-popover-content-transform-origin);
+
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+
+    /* Entry/exit animations */
+    opacity: 1;
+    scale: 1;
+    transition:
+      opacity var(--speed) ease,
+      scale var(--speed) ease;
+
+    @starting-style {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    &[data-state='closed'] {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    > h1:first-child {
+      display: flex;
+      align-items: center;
+      block-size: calc(var(--spacer) * 2);
+      border-start-start-radius: var(--popover-border-radius);
+      border-start-end-radius: var(--popover-border-radius);
+      box-shadow: var(--border-shadow);
+      padding-inline-start: var(--popover-padding);
+      padding-right: calc(var(--spacer) * 3);
+      font-family: var(--font-family);
+      font-size: var(--ui-font-size);
+      text-transform: var(--ui-text-transform);
+      margin: 0;
+    }
+
+    > section {
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      padding: var(--popover-padding);
+      display: grid;
+      gap: var(--spacer);
+    }
+
+    .popover-close {
+      position: absolute !important;
+      top: 0;
+      right: 0;
+      box-shadow: var(--border-shadow) !important;
+      border-radius: 0 !important;
+      border-start-end-radius: var(--popover-border-radius) !important;
+    }
+
+    .popover-arrow {
+      fill: var(--popover-arrow-fill);
+      stroke: var(--border-color);
+    }
+  }
+}
+</style>

package/src/base/components/Tag.vue

@@ -0,0 +1,56 @@
+<template>
+  <span class="tag">
+    <span>
+      <slot />
+    </span>
+    <Button
+      v-if="dismissable"
+      @click="emit('dismiss')"
+    >
+      <Icon type="close" />
+    </Button>
+  </span>
+</template>
+
+<script setup lang="ts">
+import Button from './Button.vue'
+import Icon from './Icon.vue'
+
+defineProps<{
+  dismissable?: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+</script>
+
+<style scoped>
+.tag {
+  border-radius: var(--tag-border-radius);
+  box-shadow: var(--border-shadow);
+  font-family: var(--font-family);
+  font-size: var(--font-sm);
+  font-weight: var(--ui-font-weight);
+  text-transform: var(--ui-text-transform);
+  letter-spacing: var(--ui-letter-spacing);
+  line-height: var(--ui-line-height);
+  color: var(--ui-color);
+  display: flex;
+  align-items: center;
+
+  > span {
+    padding: var(--spacer-sm) var(--spacer);
+
+    + button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      padding: var(--spacer-sm);
+
+      &:is(:hover, :active, :focus, .active) {
+        background: var(--gray-z-1);
+      }
+    }
+  }
+}
+</style>

package/src/base/components/Tags.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="tags">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacer-sm);
+}
+</style>

package/src/base/components/Toasts.vue

@@ -0,0 +1,254 @@
+<template>
+  <ToastProvider
+    :duration="duration"
+    :swipe-direction="swipeDirection"
+  >
+    <ToastRoot
+      v-for="toast in toasts"
+      :key="toast.id"
+      :duration="toast.duration"
+      force-mount
+      class="toast"
+      :class="[toast.variant || 'info']"
+      @update:open="(open) => !open && onClose(toast.id)"
+    >
+      <ToastTitle class="toast-title">
+        {{ toast.title }}
+      </ToastTitle>
+      <ToastClose
+        class="toast-close tertiary"
+        :as="Button"
+        aria-label="Close"
+      >
+        <Icon type="close" />
+      </ToastClose>
+
+      <section v-if="toast.description || toast.action">
+        <ToastDescription
+          v-if="toast.description"
+          class="toast-description"
+        >
+          {{ toast.description }}
+        </ToastDescription>
+        <ToastAction
+          v-if="toast.action"
+          :alt-text="toast.action.label"
+          :as="Actions"
+          class="left"
+        >
+          <Button
+            class="small"
+            @click="toast.action!.onClick()"
+          >
+            {{ toast.action.label }}
+          </Button>
+        </ToastAction>
+      </section>
+    </ToastRoot>
+
+    <ToastViewport
+      class="toast-viewport"
+      :class="[position]"
+    />
+  </ToastProvider>
+</template>
+
+<script setup lang="ts">
+import Actions from './Actions.vue'
+import Button from './Button.vue'
+import Icon from './Icon.vue'
+import { useToast } from '../composables/toast'
+import {
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  ToastViewport,
+} from 'reka-ui'
+
+withDefaults(
+  defineProps<{
+    duration?: number
+    swipeDirection?: 'right' | 'left' | 'up' | 'down'
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+  }>(),
+  {
+    duration: 5_000,
+    swipeDirection: 'right',
+    position: 'bottom-right',
+  },
+)
+
+const { toasts, dismiss } = useToast()
+
+const onClose = (id: string) => {
+  setTimeout(() => dismiss(id), 300)
+}
+</script>
+
+<style scoped>
+@layer components {
+  :deep(.toast-viewport) {
+    position: fixed;
+    z-index: var(--z-index-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--toast-gap);
+    padding: var(--spacer);
+    margin: 0;
+    list-style: none;
+    max-width: 100vw;
+    outline: none;
+
+    &.bottom-right {
+      bottom: 0;
+      right: 0;
+    }
+
+    &.bottom-left {
+      bottom: 0;
+      left: 0;
+    }
+
+    &.top-right {
+      top: 0;
+      right: 0;
+    }
+
+    &.top-left {
+      top: 0;
+      left: 0;
+    }
+  }
+
+  :deep(.toast) {
+    position: relative;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    inline-size: var(--toast-width);
+    max-inline-size: calc(100vw - var(--spacer) * 2);
+    padding: 0;
+    border: var(--border);
+    border-radius: var(--border-radius);
+    overflow: hidden;
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+
+    /* Entry animation */
+    opacity: 1;
+    translate: 0;
+    transition:
+      opacity var(--speed) ease,
+      translate var(--speed) ease;
+
+    @starting-style {
+      opacity: 0;
+      translate: 100% 0;
+    }
+
+    /* Exit animation */
+    &[data-state='closed'] {
+      opacity: 0;
+      translate: 25% 0;
+      transition:
+        opacity var(--speed-fast) ease,
+        translate var(--speed) ease;
+    }
+
+    /* Swipe */
+    &[data-swipe='move'] {
+      translate: var(--reka-toast-swipe-move-x) 0;
+    }
+
+    &[data-swipe='cancel'] {
+      translate: 0;
+      transition: translate var(--speed) ease;
+    }
+
+    &[data-swipe='end'] {
+      translate: var(--reka-toast-swipe-end-x) 0;
+    }
+
+    /* Variants */
+    &.info {
+      --border-color: var(--toast-info-border-color);
+      color: var(--toast-info-color);
+      background: var(--toast-info-background);
+      border-color: var(--toast-info-border-color);
+
+      .toast-close {
+        --button-tertiary-border-color: var(--toast-info-border-color);
+        --button-color-highlight: var(--toast-info-border-color);
+      }
+    }
+
+    &.success {
+      --border-color: var(--toast-success-border-color);
+      color: var(--toast-success-color);
+      background: var(--toast-success-background);
+      border-color: var(--toast-success-border-color);
+
+      .toast-close {
+        --button-tertiary-border-color: var(--toast-success-border-color);
+        --button-color-highlight: var(--toast-success-border-color);
+      }
+    }
+
+    &.error {
+      --border-color: var(--toast-error-border-color);
+      color: var(--toast-error-color);
+      background: var(--toast-error-background);
+      border-color: var(--toast-error-border-color);
+
+      .toast-close {
+        --button-tertiary-border-color: var(--toast-error-border-color);
+        --button-color-highlight: var(--toast-error-border-color);
+      }
+    }
+
+    .toast-title {
+      display: flex;
+      align-items: center;
+      block-size: calc(var(--spacer) * 2);
+      box-shadow: var(--border-shadow);
+      padding-inline-start: var(--ui-padding-inline);
+      padding-right: calc(var(--spacer) * 3);
+      font-family: var(--font-family);
+      font-size: var(--ui-font-size);
+      font-weight: normal;
+      text-transform: var(--ui-text-transform);
+      margin: 0;
+    }
+
+    > section {
+      padding: var(--ui-padding-inline);
+      display: grid;
+      gap: var(--spacer);
+    }
+
+    .toast-description {
+      color: var(--muted);
+      font-size: var(--font-sm);
+    }
+
+    .toast-close {
+      position: absolute !important;
+      top: 0;
+      right: 0;
+      box-shadow: var(--border-shadow) !important;
+      border-radius: 0 !important;
+      border-start-end-radius: var(--border-radius) !important;
+    }
+
+    .actions {
+      width: min-content;
+
+      > * {
+        white-space: nowrap;
+      }
+    }
+  }
+}
+</style>

package/src/base/components/Tooltip.vue

@@ -0,0 +1,100 @@
+<template>
+  <TooltipProvider :delay-duration="delayDuration">
+    <TooltipRoot>
+      <TooltipTrigger as-child>
+        <slot name="trigger" />
+      </TooltipTrigger>
+
+      <TooltipPortal>
+        <TooltipContent
+          class="tooltip"
+          :class="props.class"
+          :side="side"
+          :align="align"
+          :side-offset="sideOffset"
+          :align-offset="alignOffset"
+          :avoid-collisions="avoidCollisions"
+          :collision-padding="collisionPadding"
+        >
+          <slot />
+          <TooltipArrow
+            v-if="arrow"
+            class="tooltip-arrow"
+          />
+        </TooltipContent>
+      </TooltipPortal>
+    </TooltipRoot>
+  </TooltipProvider>
+</template>
+
+<script setup lang="ts">
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
+} from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<{
+    class?: string | string[] | Record<string, boolean>
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    sideOffset?: number
+    alignOffset?: number
+    avoidCollisions?: boolean
+    collisionPadding?: number
+    arrow?: boolean
+    delayDuration?: number
+  }>(),
+  {
+    side: 'top',
+    align: 'center',
+    sideOffset: 4,
+    avoidCollisions: true,
+    collisionPadding: 8,
+    arrow: true,
+    delayDuration: 300,
+  },
+)
+</script>
+
+<style>
+@layer components {
+  .tooltip {
+    background: var(--tooltip-background);
+    color: var(--color);
+    border: var(--tooltip-border);
+    border-radius: var(--tooltip-border-radius);
+    padding: var(--tooltip-padding);
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    z-index: var(--z-index-ui);
+    transform-origin: var(--reka-tooltip-content-transform-origin);
+
+    /* Entry/exit animations */
+    opacity: 1;
+    scale: 1;
+    transition:
+      opacity var(--speed) ease,
+      scale var(--speed) ease;
+
+    @starting-style {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    &[data-state='closed'] {
+      opacity: 0;
+      scale: 0.95;
+    }
+
+    .tooltip-arrow {
+      fill: var(--tooltip-arrow-fill);
+      stroke: var(--border-color);
+    }
+  }
+}
+</style>