@1001-digital/components 0.0.1

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@1001-digital/components",
+  "version": "0.0.1",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "@wagmi/core": ">=3.0.0",
+    "@wagmi/vue": ">=0.4.0",
+    "viem": ">=2.0.0",
+    "vue": "^3.5.0",
+    "@1001-digital/styles": "^0.0.1"
+  },
+  "peerDependenciesMeta": {
+    "@wagmi/core": {
+      "optional": true
+    },
+    "@wagmi/vue": {
+      "optional": true
+    },
+    "viem": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@iconify/vue": "^5.0.0",
+    "@vueuse/core": "^14.2.0",
+    "luxon": "^3.7.0",
+    "qrcode": "^1.5.4",
+    "reka-ui": "^2.8.0"
+  },
+  "devDependencies": {
+    "@types/luxon": "^3.7.0",
+    "@types/qrcode": "^1.5.6",
+    "vue": "^3.5.0"
+  }
+}

package/src/base/components/Actions.vue

@@ -0,0 +1,57 @@
+<template>
+  <menu class="actions">
+    <slot />
+  </menu>
+</template>
+
+<style scoped>
+.actions {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacer-sm);
+
+  &:not(.left) {
+    justify-content: flex-end;
+  }
+
+  &:empty {
+    display: none !important;
+  }
+
+  & :deep(> a),
+  & :deep(> button),
+  & :deep(> .input-group),
+  & :deep(> .input-group > *) {
+    block-size: var(--form-item-height);
+
+    &.small {
+      block-size: var(--form-item-height-sm);
+    }
+  }
+
+  & :deep(> label) {
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    font-weight: var(--ui-font-weight);
+    text-transform: var(--ui-text-transform);
+    letter-spacing: var(--ui-letter-spacing);
+    line-height: var(--ui-line-height);
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-sm);
+    white-space: nowrap;
+  }
+
+  & :deep(.button) {
+    inline-size: auto;
+  }
+
+  & :deep(select) {
+    inline-size: auto;
+  }
+}
+</style>

package/src/base/components/Alert.vue

@@ -0,0 +1,90 @@
+<template>
+  <Transition name="fade">
+    <aside
+      v-if="!dismissed"
+      class="alert"
+      :class="[type]"
+    >
+      <button
+        v-if="dismissable"
+        @click="dismiss"
+        class="close"
+      >
+        <Icon type="close" />
+      </button>
+      <slot />
+    </aside>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import Icon from './Icon.vue'
+
+const props = defineProps<{
+  type?: 'info' | 'error'
+  dismiss?: string
+}>()
+
+const dismissKey = computed(() => `alert:${props.dismiss}`)
+
+const dismissed = useLocalStorage(dismissKey.value, false)
+const dismissable = computed(() => !!props.dismiss)
+
+const dismiss = () => {
+  dismissed.value = true
+}
+</script>
+
+<style scoped>
+@layer components {
+  .alert {
+    position: relative;
+    display: grid;
+    padding: var(--spacer-sm);
+    gap: var(--spacer-sm);
+    border: var(--border);
+    border-color: var(--alert-border-color);
+    background-color: var(--alert-background-color);
+    color: var(--alert-color);
+    font-family: var(--font-family);
+    font-size: var(--ui-font-size);
+    text-transform: var(--ui-text-transform);
+
+    &.info {
+      border-color: var(--alert-info-border-color);
+      background-color: var(--alert-info-background-color);
+      color: var(--alert-info-color);
+    }
+
+    &.error {
+      border-color: var(--alert-error-border-color);
+      background-color: var(--alert-error-background-color);
+      color: var(--alert-error-color);
+    }
+
+    & :deep(> h1) {
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+
+    .close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      inline-size: var(--size-4);
+      block-size: var(--size-4);
+      padding: 0;
+      inset-block-start: var(--spacer-sm);
+      inset-inline-end: var(--spacer-sm);
+      background: none;
+
+      &:is(:hover, :active, :focus, .active) {
+        background: none;
+      }
+    }
+  }
+}
+</style>

package/src/base/components/Button.vue

@@ -0,0 +1,260 @@
+<template>
+  <component
+    v-if="to"
+    :is="linkComponent"
+    v-bind="linkProps"
+    :class="['button']"
+  >
+    <slot />
+  </component>
+  <button v-else>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { LinkComponentKey } from '../link'
+
+const props = withDefaults(
+  defineProps<{
+    to?: string | Record<string, any>
+    target?: string
+    exact?: boolean
+  }>(),
+  {
+    target: '_self',
+  },
+)
+
+const linkComponent = inject(LinkComponentKey, 'a')
+
+const linkProps = computed(() => {
+  if (typeof linkComponent === 'string') {
+    return { href: props.to, target: props.target }
+  }
+  return { to: props.to, target: props.target, exact: props.exact }
+})
+</script>
+
+<style scoped>
+@layer components {
+  button,
+  a.button {
+    position: relative;
+    min-inline-size: fit-content;
+    inline-size: fit-content;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacer-sm);
+
+    &:not(.unstyled) {
+      background: var(--button-background);
+      color: var(--button-color);
+      padding: var(--ui-padding-block) var(--ui-padding-inline);
+      border: none;
+      border-radius: var(--button-border-radius);
+      box-shadow: var(--border-shadow);
+      transition:
+        background var(--speed),
+        box-shadow var(--speed),
+        color var(--speed);
+    }
+
+    > span {
+      display: flex;
+      gap: var(--ui-padding-inline);
+      line-height: var(--ui-line-height);
+      justify-content: center;
+      text-align: center;
+      align-items: center;
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    > .icon {
+      color: var(--button-icon-color);
+      transition: color var(--speed);
+    }
+
+    &:has(> .icon:first-child) {
+      padding-inline-start: calc(var(--ui-padding-inline) - var(--size-1));
+
+      &.small {
+        padding-inline-start: calc(var(--ui-padding-inline) / 2);
+      }
+    }
+
+    &:has(> .icon:first-child:last-child) {
+      padding: var(--ui-padding-block);
+      aspect-ratio: 1;
+
+      &.small {
+        padding: calc(var(--ui-padding-block) / 2);
+      }
+    }
+
+    &.non-interactive,
+    &[disabled]:not([disabled='false']) {
+      pointer-events: none;
+    }
+
+    &[disabled]:not([disabled='false']) {
+      color: var(--muted);
+      opacity: 0.5;
+    }
+
+    &.small {
+      padding: calc(var(--ui-padding-block) / 2)
+        calc(var(--ui-padding-inline) / 2);
+      min-block-size: 0;
+
+      > .icon {
+        inline-size: var(--size-3);
+        block-size: var(--size-3);
+      }
+    }
+
+    &.muted {
+      color: var(--muted);
+
+      > .icon {
+        color: var(--muted);
+      }
+
+      &:is(:hover, :active, :focus, .active) {
+        color: var(--color);
+
+        > .icon {
+          color: var(--color);
+        }
+      }
+    }
+
+    &.link {
+      box-shadow: none;
+      background: transparent;
+      line-height: inherit;
+      color: var(--color);
+      padding: 0;
+
+      > .icon {
+        align-self: center;
+        block-size: 1em;
+        inline-size: 1em;
+      }
+
+      &.muted {
+        color: var(--muted);
+
+        > .icon {
+          color: var(--muted);
+        }
+      }
+    }
+
+    &.inline {
+      display: inline-flex;
+      align-self: baseline;
+      align-items: baseline;
+      block-size: inherit;
+      margin: 0 !important;
+      padding: 0 var(--size-1) !important;
+      gap: 0.2em;
+      inline-size: min-content;
+    }
+
+    &.invisible {
+      position: absolute;
+      inset-inline-start: -200vw;
+      opacity: 0;
+    }
+
+    &.danger {
+      box-shadow: 0 0 0 var(--border-width) var(--error);
+      color: var(--error) !important;
+
+      > .icon {
+        color: var(--error);
+      }
+    }
+
+    /* Primary variant */
+    &.primary {
+      background: var(--button-primary-background);
+      box-shadow: 0 0 0 var(--border-width) var(--button-primary-border-color);
+      color: var(--button-primary-color);
+
+      > .icon {
+        color: var(--button-primary-color);
+      }
+
+      &:is(:hover, :active, :focus, .active) {
+        background: var(--button-primary-background-highlight);
+        box-shadow: 0 0 0 var(--border-width)
+          var(--button-primary-border-color-highlight);
+        color: var(--button-primary-color-highlight);
+
+        > .icon {
+          color: var(--button-primary-color-highlight);
+        }
+      }
+    }
+
+    /* Tertiary variant */
+    &.tertiary {
+      background: var(--button-tertiary-background);
+      box-shadow: 0 0 0 var(--border-width) var(--button-tertiary-border-color);
+      color: var(--button-tertiary-color);
+
+      > .icon {
+        color: var(--button-tertiary-color);
+      }
+
+      &:is(:hover, :active, :focus, .active) {
+        background: var(--button-tertiary-background-highlight);
+        box-shadow: 0 0 0 var(--border-width)
+          var(--button-tertiary-border-color-highlight);
+        color: var(--button-tertiary-color-highlight);
+
+        > .icon {
+          color: var(--button-tertiary-color-highlight);
+        }
+      }
+    }
+
+    &:is(:hover, :active, :focus, .active) {
+      background: var(--button-background-highlight);
+      box-shadow: var(--border-shadow-highlight);
+      color: var(--button-color-highlight);
+
+      > .icon {
+        color: var(--button-icon-color-highlight);
+      }
+
+      &.link {
+        background: transparent !important;
+        box-shadow: none;
+        color: var(--color);
+
+        > .icon {
+          color: var(--gray-z-7);
+        }
+
+        &.muted {
+          color: var(--color);
+
+          > .icon {
+            color: var(--gray-z-7);
+          }
+        }
+      }
+    }
+
+    &.centered {
+      margin: auto;
+    }
+  }
+}
+</style>

package/src/base/components/Card.vue

@@ -0,0 +1,78 @@
+<template>
+  <component
+    :is="as"
+    class="card"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    as?: string
+  }>(),
+  {
+    as: 'article',
+  },
+)
+</script>
+
+<style scoped>
+@layer components {
+  .card {
+    display: grid;
+    gap: var(--spacer);
+    background-color: var(--card-background);
+    block-size: 100%;
+    padding: var(--spacer);
+    transition:
+      background var(--speed),
+      border-color var(--speed);
+
+    &:not(.borderless) {
+      border: var(--card-border);
+      border-radius: var(--card-border-radius);
+
+      &:has(> .card-link) {
+        &:has(> .card-link:hover),
+        &:has(> .card-link:focus) {
+          border-color: var(--card-border-color-highlight);
+        }
+      }
+    }
+
+    &.borderless {
+      padding: 0;
+    }
+
+    &:has(> .card-link) {
+      &:has(> .card-link:hover),
+      &:has(> .card-link:focus) {
+        background-color: var(--card-background-highlight);
+      }
+    }
+
+    &.static {
+      background-color: var(--card-background);
+    }
+
+    &.highlight {
+      background-color: var(--card-background-highlight);
+    }
+
+    > * {
+      inline-size: 100%;
+      place-self: center;
+
+      &:first-child {
+        place-self: flex-start;
+      }
+
+      &:last-child {
+        place-self: flex-end;
+      }
+    }
+  }
+}
+</style>

package/src/base/components/CardLink.vue

@@ -0,0 +1,56 @@
+<template>
+  <component
+    :is="linkComponent"
+    v-bind="linkProps"
+    class="card-link"
+  >
+    <span>{{ title }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { LinkComponentKey } from '../link'
+
+const props = withDefaults(
+  defineProps<{
+    to: string | Record<string, any>
+    title?: string
+  }>(),
+  {
+    title: 'View',
+  },
+)
+
+const linkComponent = inject(LinkComponentKey, 'a')
+
+const linkProps = computed(() => {
+  if (typeof linkComponent === 'string') {
+    return { href: props.to }
+  }
+  return { to: props.to }
+})
+</script>
+
+<style scoped>
+a {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  border: 0;
+
+  span {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+</style>
+
+<style>
+*:has(> .card-link) {
+  position: relative;
+}
+</style>