@tekkare/romulus 0.1.0

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface RomulusModuleOptions {
+    /**
+     * Prefix for all Romulus components.
+     * @default 'R'
+     */
+    prefix?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<RomulusModuleOptions, RomulusModuleOptions, false>;
+
+export { _default as default };
+export type { RomulusModuleOptions };

package/dist/module.d.ts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface RomulusModuleOptions {
+    /**
+     * Prefix for all Romulus components.
+     * @default 'R'
+     */
+    prefix?: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<RomulusModuleOptions, RomulusModuleOptions, false>;
+
+export { _default as default };
+export type { RomulusModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@tekkare/romulus",
+  "configKey": "romulus",
+  "compatibility": {
+    "nuxt": ">=3.16.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,28 @@
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { fileURLToPath } from 'node:url';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@tekkare/romulus",
+    configKey: "romulus",
+    compatibility: {
+      nuxt: ">=3.16.0"
+    }
+  },
+  defaults: {
+    prefix: "R"
+  },
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = fileURLToPath(new URL("./runtime", import.meta.url));
+    nuxt.options.css.push(resolve(runtimeDir, "assets/styles/tokens.css"));
+    nuxt.options.css.push(resolve(runtimeDir, "assets/styles/base.css"));
+    await addComponentsDir({
+      path: resolve(runtimeDir, "components"),
+      prefix: options.prefix
+    });
+    addImportsDir(resolve(runtimeDir, "composables"));
+  }
+});
+
+export { module as default };

package/dist/runtime/assets/styles/base.css

@@ -0,0 +1 @@
+*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{color:var(--r-color-gray-900);font-family:var(--r-font-family);font-size:16px;line-height:var(--r-leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{background-color:var(--r-color-white);min-height:100vh}img,svg,video{display:block;max-width:100%}button,input,select,textarea{color:inherit;font:inherit}button{background:none;border:none;cursor:pointer}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:var(--r-font-weight-semibold);line-height:var(--r-leading-tight)}

package/dist/runtime/assets/styles/tokens.css

@@ -0,0 +1 @@
+:root{--r-color-primary-50:#eef2ff;--r-color-primary-100:#e0e7ff;--r-color-primary-200:#c7d2fe;--r-color-primary-300:#a5b4fc;--r-color-primary-400:#818cf8;--r-color-primary-500:#6366f1;--r-color-primary-600:#4f46e5;--r-color-primary-700:#4338ca;--r-color-primary-800:#3730a3;--r-color-primary-900:#312e81;--r-color-gray-50:#f9fafb;--r-color-gray-100:#f3f4f6;--r-color-gray-200:#e5e7eb;--r-color-gray-300:#d1d5db;--r-color-gray-400:#9ca3af;--r-color-gray-500:#6b7280;--r-color-gray-600:#4b5563;--r-color-gray-700:#374151;--r-color-gray-800:#1f2937;--r-color-gray-900:#111827;--r-color-gray-950:#030712;--r-color-success-500:#22c55e;--r-color-success-600:#16a34a;--r-color-warning-500:#f59e0b;--r-color-warning-600:#d97706;--r-color-danger-500:#ef4444;--r-color-danger-600:#dc2626;--r-color-white:#fff;--r-color-black:#000;--r-font-family:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;--r-font-mono:"JetBrains Mono",ui-monospace,"Cascadia Code",monospace;--r-text-xs:0.75rem;--r-text-sm:0.875rem;--r-text-base:1rem;--r-text-lg:1.125rem;--r-text-xl:1.25rem;--r-text-2xl:1.5rem;--r-text-3xl:1.875rem;--r-text-4xl:2.25rem;--r-font-weight-normal:400;--r-font-weight-medium:500;--r-font-weight-semibold:600;--r-font-weight-bold:700;--r-leading-tight:1.25;--r-leading-normal:1.5;--r-leading-relaxed:1.75;--r-space-0:0;--r-space-1:0.25rem;--r-space-2:0.5rem;--r-space-3:0.75rem;--r-space-4:1rem;--r-space-5:1.25rem;--r-space-6:1.5rem;--r-space-8:2rem;--r-space-10:2.5rem;--r-space-12:3rem;--r-space-16:4rem;--r-space-20:5rem;--r-radius-none:0;--r-radius-sm:0.25rem;--r-radius-md:0.375rem;--r-radius-lg:0.5rem;--r-radius-xl:0.75rem;--r-radius-2xl:1rem;--r-radius-full:9999px;--r-shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--r-shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--r-shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--r-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--r-shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--r-transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--r-transition-base:200ms cubic-bezier(0.4,0,0.2,1);--r-transition-slow:300ms cubic-bezier(0.4,0,0.2,1)}

package/dist/runtime/components/Button.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+export interface RButtonProps {
+  /** Visual style variant */
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+  /** Size of the button */
+  size?: 'sm' | 'md' | 'lg'
+  /** Whether the button is disabled */
+  disabled?: boolean
+  /** Render as a full-width button */
+  block?: boolean
+  /** HTML button type attribute */
+  type?: 'button' | 'submit' | 'reset'
+}
+
+withDefaults(defineProps<RButtonProps>(), {
+  variant: 'primary',
+  size: 'md',
+  disabled: false,
+  block: false,
+  type: 'button',
+})
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled"
+    :class="[
+      'r-button',
+      `r-button--${variant}`,
+      `r-button--${size}`,
+      { 'r-button--block': block },
+    ]"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.r-button{align-items:center;border:1px solid transparent;border-radius:var(--r-radius-lg);cursor:pointer;display:inline-flex;font-weight:var(--r-font-weight-medium);gap:var(--r-space-2);justify-content:center;transition:all var(--r-transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.r-button:focus-visible{outline:2px solid var(--r-color-primary-500);outline-offset:2px}.r-button:disabled{cursor:not-allowed;opacity:.5}.r-button--sm{font-size:var(--r-text-sm);height:2rem;padding:var(--r-space-1) var(--r-space-3)}.r-button--md{font-size:var(--r-text-sm);height:2.5rem;padding:var(--r-space-2) var(--r-space-4)}.r-button--lg{font-size:var(--r-text-base);height:3rem;padding:var(--r-space-3) var(--r-space-6)}.r-button--primary{background-color:var(--r-color-primary-600);color:var(--r-color-white)}.r-button--primary:hover:not(:disabled){background-color:var(--r-color-primary-700)}.r-button--primary:active:not(:disabled){background-color:var(--r-color-primary-800)}.r-button--secondary{background-color:var(--r-color-gray-100);color:var(--r-color-gray-800)}.r-button--secondary:hover:not(:disabled){background-color:var(--r-color-gray-200)}.r-button--secondary:active:not(:disabled){background-color:var(--r-color-gray-300)}.r-button--outline{background-color:transparent;border-color:var(--r-color-gray-300);color:var(--r-color-gray-700)}.r-button--outline:hover:not(:disabled){background-color:var(--r-color-gray-50);border-color:var(--r-color-gray-400)}.r-button--outline:active:not(:disabled){background-color:var(--r-color-gray-100)}.r-button--ghost{background-color:transparent;color:var(--r-color-gray-700)}.r-button--ghost:hover:not(:disabled){background-color:var(--r-color-gray-100)}.r-button--ghost:active:not(:disabled){background-color:var(--r-color-gray-200)}.r-button--block{width:100%}
+</style>

package/dist/runtime/components/Card.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+export interface RCardProps {
+  /** Add padding to the card body */
+  padding?: 'none' | 'sm' | 'md' | 'lg'
+  /** Add a subtle border */
+  bordered?: boolean
+  /** Card shadow level */
+  shadow?: 'none' | 'sm' | 'md' | 'lg'
+  /** Make the card hoverable with a lift effect */
+  hoverable?: boolean
+}
+
+withDefaults(defineProps<RCardProps>(), {
+  padding: 'md',
+  bordered: true,
+  shadow: 'sm',
+  hoverable: false,
+})
+</script>
+
+<template>
+  <div
+    :class="[
+      'r-card',
+      `r-card--padding-${padding}`,
+      `r-card--shadow-${shadow}`,
+      {
+        'r-card--bordered': bordered,
+        'r-card--hoverable': hoverable,
+      },
+    ]"
+  >
+    <div v-if="$slots.header" class="r-card__header">
+      <slot name="header" />
+    </div>
+    <div class="r-card__body">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="r-card__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.r-card{background-color:var(--r-color-white);border-radius:var(--r-radius-xl);overflow:hidden;transition:all var(--r-transition-base)}.r-card--bordered{border:1px solid var(--r-color-gray-200)}.r-card--shadow-none{box-shadow:none}.r-card--shadow-sm{box-shadow:var(--r-shadow-sm)}.r-card--shadow-md{box-shadow:var(--r-shadow-md)}.r-card--hoverable:hover,.r-card--shadow-lg{box-shadow:var(--r-shadow-lg)}.r-card--hoverable:hover{transform:translateY(-2px)}.r-card--padding-none .r-card__body{padding:0}.r-card--padding-sm .r-card__body{padding:var(--r-space-3)}.r-card--padding-md .r-card__body{padding:var(--r-space-5)}.r-card--padding-lg .r-card__body{padding:var(--r-space-8)}.r-card__header{border-bottom:1px solid var(--r-color-gray-200);font-weight:var(--r-font-weight-semibold)}.r-card__footer,.r-card__header{padding:var(--r-space-4) var(--r-space-5)}.r-card__footer{background-color:var(--r-color-gray-50);border-top:1px solid var(--r-color-gray-200)}
+</style>

package/dist/runtime/components/Input.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+export interface RInputProps {
+  /** The v-model value */
+  modelValue?: string
+  /** Label text displayed above the input */
+  label?: string
+  /** Placeholder text */
+  placeholder?: string
+  /** Error message to display */
+  error?: string
+  /** Whether the input is disabled */
+  disabled?: boolean
+  /** HTML input type */
+  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
+  /** Whether the field is required */
+  required?: boolean
+}
+
+withDefaults(defineProps<RInputProps>(), {
+  modelValue: '',
+  type: 'text',
+  disabled: false,
+  required: false,
+})
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+</script>
+
+<template>
+  <div class="r-input-wrapper">
+    <label v-if="label" class="r-input-label">
+      {{ label }}
+      <span v-if="required" class="r-input-required">*</span>
+    </label>
+    <input
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      :class="['r-input', { 'r-input--error': error }]"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    <p v-if="error" class="r-input-error">{{ error }}</p>
+  </div>
+</template>
+
+<style scoped>
+.r-input-wrapper{display:flex;flex-direction:column;gap:var(--r-space-1)}.r-input-label{color:var(--r-color-gray-700);font-size:var(--r-text-sm);font-weight:var(--r-font-weight-medium)}.r-input-required{color:var(--r-color-danger-500);margin-left:2px}.r-input{background-color:var(--r-color-white);border:1px solid var(--r-color-gray-300);border-radius:var(--r-radius-lg);color:var(--r-color-gray-900);font-size:var(--r-text-sm);height:2.5rem;line-height:var(--r-leading-normal);padding:var(--r-space-2) var(--r-space-3);transition:all var(--r-transition-fast);width:100%}.r-input::-moz-placeholder{color:var(--r-color-gray-400)}.r-input::placeholder{color:var(--r-color-gray-400)}.r-input:hover:not(:disabled){border-color:var(--r-color-gray-400)}.r-input:focus{border-color:var(--r-color-primary-500);box-shadow:0 0 0 3px var(--r-color-primary-100);outline:none}.r-input:disabled{background-color:var(--r-color-gray-50);cursor:not-allowed;opacity:.5}.r-input--error,.r-input--error:focus{border-color:var(--r-color-danger-500)}.r-input--error:focus{box-shadow:0 0 0 3px rgba(239,68,68,.15)}.r-input-error{color:var(--r-color-danger-500);font-size:var(--r-text-xs);margin-top:var(--r-space-1)}
+</style>

package/dist/runtime/composables/useRomulus.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Core composable for Romulus design system utilities.
+ */
+export declare function useRomulus(): {
+    bem: (block: string, element?: string, modifiers?: Record<string, boolean | undefined>) => string;
+};

package/dist/runtime/composables/useRomulus.js

@@ -0,0 +1,17 @@
+export function useRomulus() {
+  function bem(block, element, modifiers) {
+    const base = element ? `r-${block}__${element}` : `r-${block}`;
+    const classes = [base];
+    if (modifiers) {
+      for (const [key, value] of Object.entries(modifiers)) {
+        if (value) {
+          classes.push(`${base}--${key}`);
+        }
+      }
+    }
+    return classes.join(" ");
+  }
+  return {
+    bem
+  };
+}

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Merge class names, filtering out falsy values.
+ */
+export declare function cx(...classes: (string | boolean | undefined | null)[]): string;

package/dist/runtime/utils/index.js

@@ -0,0 +1,3 @@
+export function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@tekkare/romulus",
+  "version": "0.1.0",
+  "description": "Romulus Design System - Nuxt module by Tekkare",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "module": "./dist/module.mjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "nuxt-module-build build",
+    "dev": "nuxi dev playground",
+"typecheck": "nuxi typecheck"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.16.0"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^0.8.4",
+    "nuxt": "^3.16.0",
+    "typescript": "^5.7.3"
+  }
+}