adonis-atlas 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fachri Hawari
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,150 @@
+# Adonis Atlas
+
+A modern, dark-themed Admin Panel for AdonisJS 6. Built with Vue 3, Inertia.js, and Tailwind-free custom CSS.
+
+## Features
+
+- 🚀 **Zero-Config Frontend**: No boilerplate needed.
+- 🌑 **Dark Mode**: Beautiful dark theme by default.
+- 🛠 **Resource Generator**: Quickly generate CRUD interfaces for your Lucid models.
+- ⚡️ **Powered by Inertia**: SPA-like experience without the complexity.
+- 🔌 **Prefix Agnostic**: Mount it at `/atlas`, `/admin`, or anywhere else.
+
+## Installation
+
+```bash
+pnpm add adonis-atlas
+pnpm add vue @inertiajs/vue3 # Peer dependencies
+```
+
+## Setup
+
+### 1. Configure Vite (Frontend)
+
+Atlas comes with a pre-built frontend entry point so you don't have to write any Vue code.
+Update your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite'
+import adonisjs from '@adonisjs/vite/client'
+
+export default defineConfig({
+  plugins: [
+    adonisjs({
+      /**
+       * Use the Atlas boot file as your entry point
+       */
+      entrypoints: ['adonis-atlas/boot'],
+      
+      /**
+       * Reload on Edge template changes
+       */
+      reload: ['resources/views/**/*.edge'],
+    }),
+  ],
+})
+```
+
+### 2. Register Routes (Backend)
+
+By default, Atlas **automatically registers its routes** during the boot process. You don't have to do anything! 
+
+Default paths:
+- Dashboard: `/atlas/*`
+- API: `/atlas/api/*`
+
+#### Customizing the Prefix
+If you want to change the prefix, update your `config/atlas.ts` (created during `node ace configure adonis-atlas`):
+
+```typescript
+export default defineConfig({
+  prefix: '/admin',
+})
+```
+
+#### Manual Registration (Optional)
+If you need full control (e.g. adding custom middleware), disable auto-mounting in `config/atlas.ts`:
+
+```typescript
+export default defineConfig({
+  mountRoutes: false,
+})
+```
+
+Then register them manually in `start/routes.ts`:
+
+```typescript
+import { registerAtlasRoutes } from 'adonis-atlas'
+
+registerAtlasRoutes('/custom-admin')
+```
+
+### 3. Configure Shield (Security)
+
+Since Atlas uses its own API endpoints, you need to exclude them from CSRF protection in `config/shield.ts`.
+
+```typescript
+export const csrf = {
+  enabled: true,
+  exceptRoutes: (ctx) => {
+    // Exclude Atlas API routes
+    return ctx.request.url().includes('/api/')
+  },
+  enableXsrfCookie: true,
+  methods: ['POST', 'PUT', 'PATCH', 'DELETE'],
+}
+```
+
+## Usage
+
+### defining Resources
+
+Create a resource class to define how your model should be displayed.
+
+```typescript
+// app/atlas/resources/user_resource.ts
+import { Resource } from 'adonis-atlas'
+import { TextField, EmailField, DateTimeField } from 'adonis-atlas'
+import User from '#models/user'
+
+export default class UserResource extends Resource {
+  static model = User
+  static title = 'Users'
+
+  fields() {
+    return [
+      TextField.make('id').sortable(),
+      
+      TextField.make('fullName')
+        .label('Full Name')
+        .sortable()
+        .rules('required', 'max:255'),
+        
+      EmailField.make('email')
+        .sortable()
+        .rules('required', 'email'),
+        
+      DateTimeField.make('createdAt')
+        .label('Joined')
+        .sortable(),
+    ]
+  }
+}
+```
+
+### Registering Resources
+
+Register your resources in the Atlas registry (usually in a service provider or preload file).
+
+```typescript
+import app from '@adonisjs/core/services/app'
+import { ResourceRegistry } from 'adonis-atlas'
+import UserResource from '#app/atlas/resources/user_resource'
+
+const registry = await app.container.make('atlas.registry')
+registry.register('user', UserResource)
+```
+
+## License
+
+MIT

package/build/chunk-7QVYU63E.js

@@ -0,0 +1,7 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+export {
+  __name
+};
+//# sourceMappingURL=chunk-7QVYU63E.js.map

package/build/chunk-7QVYU63E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/build/client/app.js

@@ -0,0 +1,20 @@
+import {
+  __name
+} from "../chunk-7QVYU63E.js";
+const atlasPages = {
+  "atlas/Index": /* @__PURE__ */ __name(() => import("./resources/pages/atlas/Index.vue"), "atlas/Index"),
+  "atlas/Create": /* @__PURE__ */ __name(() => import("./resources/pages/atlas/Create.vue"), "atlas/Create"),
+  "atlas/Edit": /* @__PURE__ */ __name(() => import("./resources/pages/atlas/Edit.vue"), "atlas/Edit")
+};
+function resolveAtlasPage(name) {
+  const loader = atlasPages[name];
+  if (!loader) {
+    throw new Error(`Atlas page not found: ${name}. Available: ${Object.keys(atlasPages).join(", ")}`);
+  }
+  return loader();
+}
+__name(resolveAtlasPage, "resolveAtlasPage");
+export {
+  resolveAtlasPage
+};
+//# sourceMappingURL=app.js.map

package/build/client/app.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/app.ts"],"sourcesContent":["// Atlas client-side page resolver\n// Used by the host app's Inertia resolve function to load Atlas pages\n// from within the adonis-atlas package.\n//\n// Usage in host app's inertia/app/app.ts:\n//   import { resolveAtlasPage } from 'adonis-atlas/client'\n//   resolve: (name) => {\n//     if (name.startsWith('atlas/')) return resolveAtlasPage(name)\n//     return resolvePageComponent(...)\n//   }\n\nconst atlasPages: Record<string, () => Promise<unknown>> = {\n  'atlas/Index': () => import('./resources/pages/atlas/Index.vue'),\n  'atlas/Create': () => import('./resources/pages/atlas/Create.vue'),\n  'atlas/Edit': () => import('./resources/pages/atlas/Edit.vue'),\n}\n\nexport function resolveAtlasPage(name: string): Promise<unknown> {\n  const loader = atlasPages[name]\n  if (!loader) {\n    throw new Error(\n      `Atlas page not found: ${name}. Available: ${Object.keys(atlasPages).join(', ')}`\n    )\n  }\n  return loader()\n}\n"],"mappings":";;;AAWA,MAAMA,aAAqD;EACzD,eAAe,6BAAM,OAAO,mCAAA,GAAb;EACf,gBAAgB,6BAAM,OAAO,oCAAA,GAAb;EAChB,cAAc,6BAAM,OAAO,kCAAA,GAAb;AAChB;AAEO,SAASC,iBAAiBC,MAAY;AAC3C,QAAMC,SAASH,WAAWE,IAAAA;AAC1B,MAAI,CAACC,QAAQ;AACX,UAAM,IAAIC,MACR,yBAAyBF,IAAAA,gBAAoBG,OAAOC,KAAKN,UAAAA,EAAYO,KAAK,IAAA,CAAA,EAAO;EAErF;AACA,SAAOJ,OAAAA;AACT;AARgBF;","names":["atlasPages","resolveAtlasPage","name","loader","Error","Object","keys","join"]}

package/build/client/boot.js

@@ -0,0 +1,23 @@
+import {
+  __name
+} from "../chunk-7QVYU63E.js";
+import "./resources/css/atlas.css";
+import { createApp, h } from "vue";
+import { createInertiaApp } from "@inertiajs/vue3";
+import { resolveAtlasPage } from "./app.js";
+const appName = import.meta.env.VITE_APP_NAME || "Adonis Atlas";
+createInertiaApp({
+  progress: {
+    color: "#5468FF"
+  },
+  title: /* @__PURE__ */ __name((title) => `${title} - ${appName}`, "title"),
+  // Only resolves Atlas pages.
+  // If you need custom pages, create your own app.ts and use resolveAtlasPage helper.
+  resolve: /* @__PURE__ */ __name((name) => resolveAtlasPage(name), "resolve"),
+  setup({ el, App, props, plugin }) {
+    createApp({
+      render: /* @__PURE__ */ __name(() => h(App, props), "render")
+    }).use(plugin).mount(el);
+  }
+});
+//# sourceMappingURL=boot.js.map

package/build/client/boot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/client/boot.ts"],"sourcesContent":["/**\n * Default entry point for Adonis Atlas applications.\n * Import this file in your Vite config entrypoints if you don't need custom frontend code.\n */\nimport './resources/css/atlas.css'\nimport { createApp, h } from 'vue'\nimport { createInertiaApp } from '@inertiajs/vue3'\nimport { resolveAtlasPage } from './app.js'\n\nconst appName = import.meta.env.VITE_APP_NAME || 'Adonis Atlas'\n\ncreateInertiaApp({\n  progress: { color: '#5468FF' },\n\n  title: (title) => `${title} - ${appName}`,\n\n  // Only resolves Atlas pages.\n  // If you need custom pages, create your own app.ts and use resolveAtlasPage helper.\n  resolve: (name) => resolveAtlasPage(name),\n\n  setup({ el, App, props, plugin }) {\n    createApp({ render: () => h(App, props) })\n      .use(plugin)\n      .mount(el)\n  },\n})\n"],"mappings":";;;AAIA,OAAO;AACP,SAASA,WAAWC,SAAS;AAC7B,SAASC,wBAAwB;AACjC,SAASC,wBAAwB;AAEjC,MAAMC,UAAU,YAAYC,IAAIC,iBAAiB;AAEjDJ,iBAAiB;EACfK,UAAU;IAAEC,OAAO;EAAU;EAE7BC,OAAO,wBAACA,UAAU,GAAGA,KAAAA,MAAWL,OAAAA,IAAzB;;;EAIPM,SAAS,wBAACC,SAASR,iBAAiBQ,IAAAA,GAA3B;EAETC,MAAM,EAAEC,IAAIC,KAAKC,OAAOC,OAAM,GAAE;AAC9BhB,cAAU;MAAEiB,QAAQ,6BAAMhB,EAAEa,KAAKC,KAAAA,GAAb;IAAoB,CAAA,EACrCG,IAAIF,MAAAA,EACJG,MAAMN,EAAAA;EACX;AACF,CAAA;","names":["createApp","h","createInertiaApp","resolveAtlasPage","appName","env","VITE_APP_NAME","progress","color","title","resolve","name","setup","el","App","props","plugin","render","use","mount"]}

package/build/client/resources/components/DataTable.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+interface FieldDef {
+  name: string
+  label: string
+  component: string
+  sortable: boolean
+  value?: any
+}
+
+interface Row {
+  id: number | string
+  fields: FieldDef[]
+}
+
+const props = defineProps<{
+  rows: Row[]
+  sort?: string
+  order?: string
+}>()
+
+const emit = defineEmits<{
+  sort: [field: string]
+  edit: [id: number | string]
+  delete: [id: number | string]
+}>()
+
+function columns(): FieldDef[] {
+  if (props.rows.length === 0) return []
+  return props.rows[0].fields.filter((f) => f.component !== 'PasswordField')
+}
+
+function getSortDir(fieldName: string): string | null {
+  if (props.sort !== fieldName) return null
+  return props.order || 'asc'
+}
+
+function formatValue(value: any, component: string): string {
+  if (value === null || value === undefined) return '—'
+  if (component === 'BooleanField') return value ? 'Yes' : 'No'
+  if (component === 'DateTimeField') {
+    try {
+      return new Date(value).toLocaleString()
+    } catch {
+      return String(value)
+    }
+  }
+  return String(value)
+}
+</script>
+
+<template>
+  <div class="atlas-card">
+    <div class="atlas-table-wrapper">
+      <table class="atlas-table">
+        <thead>
+          <tr>
+            <th
+              v-for="col in columns()"
+              :key="col.name"
+              :class="{
+                sortable: col.sortable,
+                sorted: sort === col.name,
+              }"
+              @click="col.sortable ? emit('sort', col.name) : null"
+            >
+              {{ col.label }}
+              <span v-if="col.sortable" class="sort-indicator">
+                {{ getSortDir(col.name) === 'asc' ? '↑' : getSortDir(col.name) === 'desc' ? '↓' : '↕' }}
+              </span>
+            </th>
+            <th style="width: 100px; text-align: right">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="row in rows" :key="row.id">
+            <td v-for="field in row.fields.filter((f) => f.component !== 'PasswordField')" :key="field.name">
+              {{ formatValue(field.value, field.component) }}
+            </td>
+            <td>
+              <div class="atlas-table__actions">
+                <button class="atlas-btn atlas-btn--secondary atlas-btn--sm" @click="emit('edit', row.id)">
+                  Edit
+                </button>
+                <button class="atlas-btn atlas-btn--danger atlas-btn--sm" @click="emit('delete', row.id)">
+                  Delete
+                </button>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="rows.length === 0">
+            <td :colspan="columns().length + 1">
+              <div class="atlas-empty">
+                <div class="atlas-empty__title">No records found</div>
+                <div class="atlas-empty__text">Try adjusting your search or create a new record.</div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <slot name="footer" />
+  </div>
+</template>

package/build/client/resources/components/FormField.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+
+interface FieldDef {
+  name: string
+  label: string
+  component: string
+  rules: string[]
+  value?: any
+}
+
+defineProps<{
+  field: FieldDef
+  modelValue: any
+  error?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: any]
+}>()
+
+const componentMap: Record<string, any> = {
+  TextField: defineAsyncComponent(() => import('./fields/TextField.vue')),
+  EmailField: defineAsyncComponent(() => import('./fields/EmailField.vue')),
+  NumberField: defineAsyncComponent(() => import('./fields/NumberField.vue')),
+  BooleanField: defineAsyncComponent(() => import('./fields/BooleanField.vue')),
+  DateTimeField: defineAsyncComponent(() => import('./fields/DateTimeField.vue')),
+  PasswordField: defineAsyncComponent(() => import('./fields/PasswordField.vue')),
+}
+</script>
+
+<template>
+  <component
+    :is="componentMap[field.component] || componentMap.TextField"
+    :field="field"
+    :modelValue="modelValue"
+    :error="error"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  />
+</template>

package/build/client/resources/components/Layout.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
+
+interface NavItem {
+  label: string
+  uriKey: string
+}
+
+defineProps<{
+  navigation: NavItem[]
+  resourceTitle?: string
+  breadcrumbs?: { label: string; href?: string }[]
+  rootUrl?: string
+}>()
+</script>
+
+<template>
+  <div class="atlas-app">
+    <div class="atlas-layout">
+      <!-- Sidebar -->
+      <aside class="atlas-sidebar">
+        <div class="atlas-sidebar__brand">
+          <div class="atlas-sidebar__brand-icon">A</div>
+          <span class="atlas-sidebar__brand-text">Atlas</span>
+        </div>
+
+        <div class="atlas-sidebar__label">Resources</div>
+        <nav class="atlas-sidebar__nav">
+          <Link
+            v-for="item in navigation"
+            :key="item.uriKey"
+            :href="`${rootUrl || '/atlas'}/${item.uriKey}`"
+            class="atlas-sidebar__link"
+            :class="{ 'atlas-sidebar__link--active': resourceTitle === item.label }"
+          >
+            <svg class="atlas-sidebar__link-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="3" y="3" width="7" height="7" />
+              <rect x="14" y="3" width="7" height="7" />
+              <rect x="14" y="14" width="7" height="7" />
+              <rect x="3" y="14" width="7" height="7" />
+            </svg>
+            {{ item.label }}
+          </Link>
+        </nav>
+      </aside>
+
+      <!-- Main -->
+      <div class="atlas-main">
+        <header class="atlas-topbar">
+          <div class="atlas-topbar__breadcrumb">
+            <Link :href="rootUrl || '/atlas'">Atlas</Link>
+            <template v-if="breadcrumbs">
+              <template v-for="(crumb, i) in breadcrumbs" :key="i">
+                <span class="atlas-topbar__breadcrumb-sep">›</span>
+                <Link v-if="crumb.href" :href="crumb.href">{{ crumb.label }}</Link>
+                <span v-else>{{ crumb.label }}</span>
+              </template>
+            </template>
+          </div>
+        </header>
+
+        <div class="atlas-content atlas-fade-in">
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/build/client/resources/components/Pagination.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+interface Meta {
+  total: number
+  perPage: number
+  currentPage: number
+  lastPage: number
+}
+
+defineProps<{
+  meta: Meta
+}>()
+
+const emit = defineEmits<{
+  page: [page: number]
+}>()
+
+function pages(meta: Meta): number[] {
+  const result: number[] = []
+  const start = Math.max(1, meta.currentPage - 2)
+  const end = Math.min(meta.lastPage, meta.currentPage + 2)
+  for (let i = start; i <= end; i++) result.push(i)
+  return result
+}
+</script>
+
+<template>
+  <div class="atlas-pagination" v-if="meta.lastPage > 1">
+    <div class="atlas-pagination__info">
+      Showing {{ (meta.currentPage - 1) * meta.perPage + 1 }}–{{ Math.min(meta.currentPage * meta.perPage, meta.total) }} of {{ meta.total }}
+    </div>
+
+    <div class="atlas-pagination__controls">
+      <button
+        class="atlas-pagination__btn"
+        :disabled="meta.currentPage <= 1"
+        @click="emit('page', meta.currentPage - 1)"
+      >
+        ← Prev
+      </button>
+
+      <button
+        v-for="p in pages(meta)"
+        :key="p"
+        class="atlas-pagination__btn"
+        :class="{ 'atlas-pagination__btn--active': p === meta.currentPage }"
+        @click="emit('page', p)"
+      >
+        {{ p }}
+      </button>
+
+      <button
+        class="atlas-pagination__btn"
+        :disabled="meta.currentPage >= meta.lastPage"
+        @click="emit('page', meta.currentPage + 1)"
+      >
+        Next →
+      </button>
+    </div>
+  </div>
+</template>

package/build/client/resources/components/SearchBar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const local = ref(props.modelValue || '')
+let debounceTimer: ReturnType<typeof setTimeout>
+
+watch(local, (val) => {
+  clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    emit('update:modelValue', val)
+  }, 300)
+})
+
+onMounted(() => {
+  local.value = props.modelValue || ''
+})
+</script>
+
+<template>
+  <div class="atlas-search">
+    <svg class="atlas-search__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <input
+      v-model="local"
+      type="text"
+      class="atlas-search__input"
+      :placeholder="placeholder || 'Search...'"
+    />
+  </div>
+</template>

package/build/client/resources/components/fields/BooleanField.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean
+  field: { name: string; label: string }
+  error?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>
+
+<template>
+  <div class="atlas-form__group">
+    <label class="atlas-form__label">{{ field.label }}</label>
+    <div class="atlas-toggle" @click="$emit('update:modelValue', !modelValue)">
+      <div class="atlas-toggle__track" :class="{ 'atlas-toggle__track--active': modelValue }">
+        <div class="atlas-toggle__knob" />
+      </div>
+      <span style="font-size: 13px; color: var(--atlas-text-secondary)">
+        {{ modelValue ? 'Yes' : 'No' }}
+      </span>
+    </div>
+    <div v-if="error" class="atlas-form__error">{{ error }}</div>
+  </div>
+</template>

package/build/client/resources/components/fields/DateTimeField.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: string
+  field: { name: string; label: string }
+  error?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <div class="atlas-form__group">
+    <label :for="`field-${field.name}`" class="atlas-form__label">{{ field.label }}</label>
+    <input
+      :id="`field-${field.name}`"
+      type="datetime-local"
+      class="atlas-form__input"
+      :class="{ 'atlas-form__input--error': error }"
+      :value="modelValue"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    <div v-if="error" class="atlas-form__error">{{ error }}</div>
+  </div>
+</template>

package/build/client/resources/components/fields/EmailField.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: string
+  field: { name: string; label: string }
+  error?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <div class="atlas-form__group">
+    <label :for="`field-${field.name}`" class="atlas-form__label">{{ field.label }}</label>
+    <input
+      :id="`field-${field.name}`"
+      type="email"
+      class="atlas-form__input"
+      :class="{ 'atlas-form__input--error': error }"
+      :value="modelValue"
+      :placeholder="`Enter ${field.label.toLowerCase()}`"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    <div v-if="error" class="atlas-form__error">{{ error }}</div>
+  </div>
+</template>

package/build/client/resources/components/fields/NumberField.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: number | string
+  field: { name: string; label: string }
+  error?: string
+}>()
+
+defineEmits<{
+  'update:modelValue': [value: number]
+}>()
+</script>
+
+<template>
+  <div class="atlas-form__group">
+    <label :for="`field-${field.name}`" class="atlas-form__label">{{ field.label }}</label>
+    <input
+      :id="`field-${field.name}`"
+      type="number"
+      class="atlas-form__input"
+      :class="{ 'atlas-form__input--error': error }"
+      :value="modelValue"
+      :placeholder="`Enter ${field.label.toLowerCase()}`"
+      @input="$emit('update:modelValue', Number(($event.target as HTMLInputElement).value))"
+    />
+    <div v-if="error" class="atlas-form__error">{{ error }}</div>
+  </div>
+</template>