@1001-digital/layers.base 0.0.1

package/app/components/Form/FormSelect.vue

@@ -0,0 +1,155 @@
+<template>
+  <SelectRoot v-model="model" :multiple="multiple" :disabled="disabled" :name="name">
+    <SelectTrigger class="form-select-trigger">
+      <SelectValue :placeholder="placeholder" />
+      <SelectIcon class="form-select-icon">
+        <Icon type="chevron-down" />
+      </SelectIcon>
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent position="popper" :side-offset="4" class="form-select-content">
+        <SelectViewport class="form-select-viewport">
+          <SelectItem
+            v-for="option in options"
+            :key="option[valueKey]"
+            :value="option[valueKey]"
+            class="form-select-item"
+          >
+            <SelectItemText>{{ option[labelKey] }}</SelectItemText>
+            <SelectItemIndicator class="form-select-indicator">
+              <Icon type="check" />
+            </SelectItemIndicator>
+          </SelectItem>
+        </SelectViewport>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  SelectContent,
+  SelectIcon,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectPortal,
+  SelectRoot,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+} from 'reka-ui'
+
+const model = defineModel<string | string[]>()
+
+defineProps({
+  options: {
+    type: Array as () => Record<string, any>[],
+    default: () => [],
+  },
+  placeholder: {
+    type: String,
+    default: 'Select...',
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  valueKey: {
+    type: String,
+    default: 'value',
+  },
+  labelKey: {
+    type: String,
+    default: 'label',
+  },
+  name: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<style scoped>
+.form-select-trigger {
+  border: none;
+  background: transparent;
+  padding: var(--ui-padding-block) var(--ui-padding-inline);
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  color: var(--color);
+  inline-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--size-2);
+  cursor: pointer;
+
+  &[data-placeholder] {
+    color: var(--muted);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}
+
+.form-select-icon {
+  color: var(--muted);
+  transition: transform var(--speed);
+
+  [data-state='open'] > & {
+    transform: rotate(180deg);
+  }
+}
+
+:global(.form-select-content) {
+  background: var(--background);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow-lg);
+  z-index: var(--z-index-dropdown);
+  min-width: var(--reka-select-trigger-width);
+  max-height: var(--reka-select-content-available-height);
+  overflow: hidden;
+}
+
+:global(.form-select-viewport) {
+  padding: var(--size-1);
+}
+
+:global(.form-select-item) {
+  padding: var(--size-2) var(--size-3);
+  border-radius: calc(var(--border-radius) / 2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--size-2);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+
+  &[data-highlighted] {
+    background: var(--button-background-highlight);
+  }
+
+  &[data-state='checked'] {
+    font-weight: 500;
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+:global(.form-select-indicator) {
+  color: var(--accent);
+}
+</style>

package/app/components/HelloWorld.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const { myLayer } = useAppConfig()
+</script>
+
+<template>
+  <div>
+    <h1>Hello World!</h1>
+    <pre>{{ myLayer }}</pre>
+  </div>
+</template>

package/app/components/Icon.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const props = defineProps<{ type: string }>()
+
+const ICON_MAP: Record<string, string> = {
+  add: 'lucide:plus',
+  check: 'lucide:check',
+  'chevron-down': 'lucide:chevron-down',
+  'chevron-left': 'lucide:chevron-left',
+  'chevron-right': 'lucide:chevron-right',
+  'chevron-up': 'lucide:chevron-up',
+  close: 'lucide:x',
+  copy: 'lucide:copy',
+  code: 'lucide:code',
+  discord: 'simple-icons:discord',
+  edit: 'lucide:pencil',
+  email: 'lucide:mail',
+  folder: 'lucide:folder',
+  github: 'simple-icons:github',
+  home: 'lucide:home',
+  help: 'lucide:circle-question-mark',
+  image: 'lucide:image',
+  link: 'lucide:link',
+  loader: 'lucide:loader-2',
+  maximize: 'lucide:maximize',
+  times: 'lucide:x',
+  trash: 'lucide:trash-2',
+  twitter: 'simple-icons:x',
+  user: 'lucide:user',
+  website: 'lucide:globe',
+  withdraw: 'lucide:undo',
+}
+
+const iconName = computed(() => ICON_MAP[props.type] || props.type)
+</script>
+
+<template>
+  <NuxtIcon v-if="iconName" :name="iconName" class="icon" />
+</template>
+
+<style scoped>
+.icon {
+  display: inline-flex;
+  width: 1em;
+  height: 1em;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/app/components/Loading.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="loader">
+    <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
+}>(), {
+  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(.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/app/components/Tag.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="tag">
+    <span>
+      <slot />
+    </span>
+    <Button v-if="dismissable" @click="emit('dismiss')">
+      <Icon type="close" />
+    </Button>
+  </span>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  dismissable?: boolean
+}>()
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+</script>
+
+<style scoped>
+.tag {
+  box-shadow: var(--border-shadow);
+  font-family: var(--ui-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 {
+      padding: var(--spacer-sm);
+
+      &:is(:hover, :active, :focus, .active) {
+        background: var(--gray-z-1);
+      }
+    }
+  }
+}
+</style>

package/app/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/app.config.ts

@@ -0,0 +1,14 @@
+export default defineAppConfig({
+  myLayer: {
+    name: 'Hello from Nuxt layer'
+  }
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    myLayer?: {
+      /** Project name */
+      name?: string
+    }
+  }
+}

package/eslint.config.js

@@ -0,0 +1,3 @@
+import withNuxt from './.playground/.nuxt/eslint.config.mjs'
+
+export default withNuxt()

package/nuxt.config.ts

@@ -0,0 +1,19 @@
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+
+  modules: ['@nuxt/icon'],
+
+  icon: {
+    componentName: 'NuxtIcon',
+  },
+
+  css: [
+    join(currentDir, './app/assets/styles/index.css'),
+  ],
+})

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@1001-digital/layers.base",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "./nuxt.config.ts",
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.81",
+    "@iconify-json/simple-icons": "^1.2.63",
+    "@nuxt/eslint": "latest",
+    "@types/node": "^24.10.1",
+    "eslint": "^9.39.1",
+    "nuxt": "^4.2.2",
+    "typescript": "^5.9.3",
+    "vue": "latest"
+  },
+  "dependencies": {
+    "@nuxt/icon": "^1.10.3",
+    "modern-normalize": "^3.0.1",
+    "reka-ui": "^2.6.1"
+  },
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "dev:prepare": "nuxt prepare .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint ."
+  }
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.playground/.nuxt/tsconfig.json"
+}