@astrake/lumora-ui 0.1.6 → 0.2.1

package/dist/utils.d.ts

@@ -0,0 +1,21 @@
+import { type ClassValue } from "clsx";
+import type { SkinMap } from "./types";
+/**
+ * Merges Tailwind classes intelligently
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Extends a base skin with a user skin, intelligently merging Tailwind classes
+ */
+export declare function extendSkin(baseSkin: SkinMap, userSkin: SkinMap): SkinMap;
+/**
+ * Resolves standard layout props to Tailwind classes statically.
+ */
+export declare function resolveLayoutProps(props: {
+    gap?: string | number;
+    padding?: string | number;
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    width?: string;
+    height?: string;
+}): string;

package/package.json

@@ -1,61 +1,94 @@
-{
-  "name": "@astrake/lumora-ui",
-  "version": "0.1.6",
-  "description": "Headless Vue 3 component framework for three surface targets — Mobile, Desktop, and Embedded — with a unified --lu-* design token system.",
-  "author": "Anuvab Chakraborty (https://github.com/madlybong)",
-  "license": "MIT",
-  "type": "module",
-  "exports": {
-    ".": "./src/index.ts",
-    "./layout": "./src/layout/index.ts",
-    "./shell": "./src/shell/index.ts",
-    "./components": "./src/components/index.ts",
-    "./composables": "./src/composables/index.ts",
-    "./skins": "./src/skins/index.ts"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "ui",
-    "components",
-    "mobile",
-    "desktop",
-    "embedded",
-    "headless",
-    "design-tokens",
-    "lumora",
-    "astrake",
-    "typescript"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/madlybong/LumoraUI.git"
-  },
-  "homepage": "https://ui.lumora.astrake.com",
-  "bugs": {
-    "url": "https://github.com/madlybong/LumoraUI/issues"
-  },
-  "funding": {
-    "type": "github",
-    "url": "https://github.com/sponsors/madlybong"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "files": [
-    "src",
-    "tsconfig.json",
-    "README.md",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "prepack": "bun -e \"await Bun.write('README.md', await Bun.file('../../README.md').text()); await Bun.write('CHANGELOG.md', await Bun.file('../../CHANGELOG.md').text())\"",
-    "postpack": "bun -e \"import { unlinkSync } from 'fs'; try { unlinkSync('README.md') } catch(e){} try { unlinkSync('CHANGELOG.md') } catch(e){}\"",
-    "build": "bun run ../../tools/build.ts",
-    "check": "vue-tsc -p ./tsconfig.json"
-  },
-  "peerDependencies": {
-    "vue": "^3.5.0"
-  }
-}
+{
+  "name": "@astrake/lumora-ui",
+  "version": "0.2.1",
+  "description": "Headless Vue 3 component framework for three surface targets — Mobile, Desktop, and Embedded — with a unified --lu-* design token system.",
+  "author": "Anuvab Chakraborty (https://github.com/madlybong)",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./style": "./src/lumora.css",
+    "./tailwind": {
+      "types": "./dist/tailwind.d.ts",
+      "import": "./dist/tailwind.js"
+    },
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout/index.js"
+    },
+    "./shell": {
+      "types": "./dist/shell/index.d.ts",
+      "import": "./dist/shell/index.js"
+    },
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./composables": {
+      "types": "./dist/composables/index.d.ts",
+      "import": "./dist/composables/index.js"
+    },
+    "./skins": {
+      "types": "./dist/skins/index.d.ts",
+      "import": "./dist/skins/index.js"
+    }
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui",
+    "components",
+    "mobile",
+    "desktop",
+    "embedded",
+    "headless",
+    "design-tokens",
+    "lumora",
+    "astrake",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/madlybong/LumoraUI.git"
+  },
+  "homepage": "https://ui.lumora.astrake.com",
+  "bugs": {
+    "url": "https://github.com/madlybong/LumoraUI/issues"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/madlybong"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "files": [
+    "dist",
+    "src/lumora.css",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "prepack": "bun run build && bun -e \"await Bun.write('README.md', await Bun.file('../../README.md').text()); await Bun.write('CHANGELOG.md', await Bun.file('../../CHANGELOG.md').text())\"",
+    "postpack": "bun -e \"import { unlinkSync } from 'fs'; try { unlinkSync('README.md') } catch(e){} try { unlinkSync('CHANGELOG.md') } catch(e){}\"",
+    "build:types": "bun -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && bun run vue-tsc -p tsconfig.build.json",
+    "build": "bun -e \"import { rmSync } from 'node:fs'; rmSync('dist', { recursive: true, force: true })\" && bun run vue-tsc -p tsconfig.build.json && bun run ../../node_modules/vite/bin/vite.js build -c vite.config.ts",
+    "check": "vue-tsc -p ./tsconfig.json"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0",
+    "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "shiki": "^4.0.2",
+    "tailwind-merge": "^3.5.0"
+  }
+}

package/src/lumora.css

@@ -0,0 +1,16 @@
+/* LumoraUI structural baseline — Tailwind v4 Escape Hatch, v0.1.7+ */
+/* Consumers MUST import this: import '@astrake/lumora-ui/style' */
+
+/* 
+  With the transition to Tailwind v4 as the native design engine, 
+  all structural layout classes (e.g., .lu-button, .lu-stack) have been removed.
+  Layout structure is now provided by the defaultSkin (`default.ts`) out of the box.
+
+  This file serves as an escape hatch for:
+  1. Complex [data-state="..."] selector combinations.
+  2. Webkit scrollbar pseudoclasses.
+  3. Keyframe animations that Tailwind v4 cannot natively express.
+*/
+
+/* Example: Webkit Scrollbar overrides can go here */
+

package/src/components/LuAvatar.vue

@@ -1,22 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="containerSkin" :data-size="size">
-    <img v-if="src && !hasError" :src="src" :alt="alt" :class="imageSkin" @error="hasError = true" />
-    <div v-else :class="fallbackSkin">
-      <slot>{{ fallback }}</slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{ variant?: string; src?: string; fallback?: string; alt?: string; size?: string }>();
-
-const hasError = ref(false);
-
-const { resolveSkin } = useLumoraConfig();
-const containerSkin = computed(() => resolveSkin("LuAvatar", props.variant));
-const imageSkin = computed(() => resolveSkin("LuAvatarImage", props.variant));
-const fallbackSkin = computed(() => resolveSkin("LuAvatarFallback", props.variant));
-</script>

package/src/components/LuBadge.vue

@@ -1,15 +0,0 @@
-<template>
-  <component :is="as || 'span'" v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{ variant?: string; as?: string }>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuBadge", props.variant));
-</script>

package/src/components/LuButton.vue

@@ -1,58 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    v-bind="bindingProps"
-    :class="resolvedSkin"
-    @click="emit('click', $event)"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, resolveComponent, useAttrs } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  type?: "button" | "submit" | "reset";
-  disabled?: boolean;
-  variant?: string;
-  as?: string;
-  to?: any;
-  href?: string;
-}>();
-
-const emit = defineEmits<{
-  (e: "click", event: MouseEvent): void;
-}>();
-
-const componentType = computed(() => {
-  if (props.as) return props.as;
-  if (props.to) {
-    const routerLink = resolveComponent("RouterLink");
-    return typeof routerLink === 'string' ? 'a' : routerLink;
-  }
-  if (props.href) return "a";
-  return "button";
-});
-
-const bindingProps = computed(() => {
-  const p: any = { ...props, ...useAttrs() };
-  delete p.variant;
-  delete p.as;
-  
-  if (componentType.value !== 'button') {
-    delete p.type;
-  }
-  if (props.disabled && componentType.value !== 'button') {
-    // Buttons can be natively disabled, but links cannot easily.
-    // However, if disabled is true, we keep it so CSS can style it.
-    // To prevent click navigation on disabled links, we would need to handle the click event.
-    // For now, we pass it down so styling works.
-  }
-  return p;
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuButton", props.variant));
-</script>

package/src/components/LuCard.vue

@@ -1,20 +0,0 @@
-<template>
-  <component :is="as" v-bind="$attrs" :class="resolvedSkin">
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = withDefaults(defineProps<{
-  variant?: string;
-  as?: string;
-}>(), {
-  as: "div"
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuCard", props.variant));
-</script>

package/src/components/LuCollapsible.vue

@@ -1,34 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="wrapperSkin">
-    <button :class="triggerSkin" @click="toggle">
-      <slot name="trigger" :isOpen="isOpen" />
-    </button>
-    <div v-show="isOpen" :class="contentSkin">
-      <slot name="content" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{ variant?: string; modelValue?: boolean; defaultOpen?: boolean }>();
-const emit = defineEmits<{ (e: "update:modelValue", val: boolean): void }>();
-
-const isOpen = ref(props.modelValue ?? props.defaultOpen ?? false);
-
-watch(() => props.modelValue, (val) => {
-  if (val !== undefined) isOpen.value = val;
-});
-
-const toggle = () => {
-  isOpen.value = !isOpen.value;
-  emit("update:modelValue", isOpen.value);
-};
-
-const { resolveSkin } = useLumoraConfig();
-const wrapperSkin = computed(() => resolveSkin("LuCollapsible", props.variant));
-const triggerSkin = computed(() => resolveSkin("LuCollapsibleTrigger", props.variant));
-const contentSkin = computed(() => resolveSkin("LuCollapsibleContent", props.variant));
-</script>

package/src/components/LuDivider.vue

@@ -1,18 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin"></div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = withDefaults(defineProps<{
-  variant?: string;
-  orientation?: "horizontal" | "vertical";
-}>(), {
-  orientation: "horizontal"
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuDivider", props.variant || props.orientation));
-</script>

package/src/components/LuForm.types.ts

@@ -1,24 +0,0 @@
-import type { InjectionKey, Ref } from "vue";
-
-export type LuFormValidator = (value: unknown) => string | null | Promise<string | null>;
-
-export type LuFormRules = Record<string, LuFormValidator | LuFormValidator[]>;
-
-export type LuFormErrors = Record<string, string>;
-
-export interface LuFormFieldRegistration {
-  name: string;
-  getValue: () => unknown;
-  setValue: (v: unknown) => void;
-  setError: (msg: string | null) => void;
-}
-
-export const LuFormContextKey = Symbol("LuFormContext") as InjectionKey<LuFormContext>;
-
-export interface LuFormContext {
-  register(field: LuFormFieldRegistration): void;
-  unregister(name: string): void;
-  getError(name: string): string | null;
-  validateOn: Readonly<Ref<"submit" | "blur" | "both">>;
-  disabled: Readonly<Ref<boolean>>;
-}

package/src/components/LuForm.vue

@@ -1,121 +0,0 @@
-<template>
-  <form @submit.prevent="handleSubmit" @reset.prevent="handleReset">
-    <slot />
-    <slot
-      name="errors"
-      :errors="errors"
-      :has-errors="hasErrors"
-    />
-    <slot
-      name="actions"
-      :submit="handleSubmit"
-      :reset="handleReset"
-      :pending="pending"
-    />
-  </form>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, provide, readonly } from "vue";
-import type { LuFormRules, LuFormErrors, LuFormFieldRegistration, LuFormContext } from "./LuForm.types";
-import { LuFormContextKey } from "./LuForm.types";
-
-const props = withDefaults(defineProps<{
-  rules?: LuFormRules;
-  validateOn?: "submit" | "blur" | "both";
-  resetOnSubmit?: boolean;
-  disabled?: boolean;
-}>(), {
-  rules: () => ({}),
-  validateOn: "submit",
-  resetOnSubmit: false,
-  disabled: false,
-});
-
-const emit = defineEmits<{
-  (e: "submit", values: Record<string, unknown>): void;
-  (e: "reset"): void;
-  (e: "error", errors: LuFormErrors): void;
-}>();
-
-const fields = new Map<string, LuFormFieldRegistration>();
-const errors = ref<LuFormErrors>({});
-const pending = ref(false);
-const hasErrors = computed(() => Object.keys(errors.value).length > 0);
-
-async function validate(): Promise<boolean> {
-  const nextErrors: LuFormErrors = {};
-
-  for (const [name, field] of fields) {
-    const rule = props.rules?.[name];
-    if (!rule) continue;
-
-    const validators = Array.isArray(rule) ? rule : [rule];
-    const value = field.getValue();
-
-    for (const validator of validators) {
-      const result = await validator(value);
-      if (result) {
-        nextErrors[name] = result;
-        field.setError(result);
-        break;
-      } else {
-        field.setError(null);
-      }
-    }
-  }
-
-  errors.value = nextErrors;
-  return Object.keys(nextErrors).length === 0;
-}
-
-async function handleSubmit() {
-  pending.value = true;
-  try {
-    const valid = await validate();
-    if (!valid) {
-      emit("error", errors.value);
-      return;
-    }
-    const values: Record<string, unknown> = {};
-    for (const [name, field] of fields) {
-      values[name] = field.getValue();
-    }
-    emit("submit", values);
-    if (props.resetOnSubmit) handleReset();
-  } finally {
-    pending.value = false;
-  }
-}
-
-function handleReset() {
-  errors.value = {};
-  for (const field of fields.values()) {
-    field.setValue(undefined);
-    field.setError(null);
-  }
-  emit("reset");
-}
-
-const context: LuFormContext = {
-  register(field) { fields.set(field.name, field); },
-  unregister(name) { fields.delete(name); },
-  getError(name) { return errors.value[name] ?? null; },
-  validateOn: computed(() => props.validateOn),
-  disabled: computed(() => props.disabled),
-};
-
-provide(LuFormContextKey, context);
-
-defineExpose({
-  submit: handleSubmit,
-  reset: handleReset,
-  errors: readonly(errors),
-  pending: readonly(pending),
-  values: computed(() => {
-    const v: Record<string, unknown> = {};
-    for (const [name, field] of fields) v[name] = field.getValue();
-    return v;
-  }),
-});
-</script>

package/src/components/LuIcon.vue

@@ -1,39 +0,0 @@
-<template>
-  <span v-bind="$attrs" :class="resolvedSkin" aria-hidden="true" :style="sizeStyle">
-    <slot>
-      <component
-        v-if="resolvedIcon"
-        :is="resolvedIcon"
-        :size="size"
-        :stroke-width="strokeWidth"
-      />
-    </slot>
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  variant?: string;
-  name?: string;
-  size?: number;
-  strokeWidth?: number;
-}>();
-
-const slots = useSlots();
-const { resolveSkin, resolveIcon } = useLumoraConfig();
-
-const resolvedSkin = computed(() => resolveSkin("LuIcon", props.variant));
-
-const resolvedIcon = computed(() => {
-  if (slots.default) return null;
-  if (!props.name) return null;
-  return resolveIcon(props.name, props.size);
-});
-
-const sizeStyle = computed(() =>
-  props.size ? { width: `${props.size}px`, height: `${props.size}px` } : undefined
-);
-</script>

package/src/components/LuInput.vue

@@ -1,62 +0,0 @@
-<template>
-  <input
-    v-bind="$attrs"
-    :class="resolvedSkin"
-    :value="modelValue"
-    :name="name"
-    :disabled="formContext?.disabled.value"
-    @input="onInput"
-    @blur="onBlur"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref } from "vue";
-import { useLumoraConfig } from "../context";
-import { LuFormContextKey } from "./LuForm.types";
-
-const props = defineProps<{
-  modelValue?: string | number;
-  variant?: string;
-  name?: string;
-  error?: string | null;
-}>();
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string): void;
-  (e: "blur"): void;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuInput", props.variant));
-
-const formContext = inject(LuFormContextKey, null);
-const internalValue = ref<string | number | undefined>(props.modelValue);
-
-const onInput = (event: Event) => {
-  const value = (event.target as HTMLInputElement).value;
-  internalValue.value = value;
-  emit("update:modelValue", value);
-};
-
-const onBlur = () => {
-  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
-    // trigger single-field validation — handled by parent LuForm
-  }
-  emit("blur");
-};
-
-onMounted(() => {
-  if (!props.name || !formContext) return;
-  formContext.register({
-    name: props.name,
-    getValue: () => internalValue.value,
-    setValue: (v) => { internalValue.value = v as string; },
-    setError: (_msg) => { /* error display handled via formContext.getError in template if desired */ },
-  });
-});
-
-onUnmounted(() => {
-  if (props.name && formContext) formContext.unregister(props.name);
-});
-</script>

package/src/components/LuLink.vue

@@ -1,47 +0,0 @@
-<template>
-  <component
-    :is="componentType"
-    v-bind="bindingProps"
-    :class="resolvedSkin"
-    @click="emit('click', $event)"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, resolveComponent } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  variant?: string;
-  as?: string;
-  to?: any;
-  href?: string;
-  target?: string;
-}>();
-
-const emit = defineEmits<{
-  (e: "click", event: MouseEvent): void;
-}>();
-
-const componentType = computed(() => {
-  if (props.as) return props.as;
-  if (props.to) {
-    // Attempt to resolve RouterLink if available, otherwise fallback to 'a'
-    const routerLink = resolveComponent("RouterLink");
-    return typeof routerLink === 'string' ? 'a' : routerLink;
-  }
-  return "a";
-});
-
-const bindingProps = computed(() => {
-  const p: any = { ...props };
-  delete p.variant;
-  delete p.as;
-  return p;
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuLink", props.variant));
-</script>