@astrake/lumora-ui 0.1.0

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@astrake/lumora-ui",
+  "version": "0.1.0",
+  "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/"
+  },
+  "scripts": {
+    "build": "bun run ../../tools/build.ts",
+    "check": "vue-tsc -p ./tsconfig.json",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}

package/src/components/LuAvatar.vue

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,58 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,34 @@
+<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

@@ -0,0 +1,18 @@
+<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/LuIcon.vue

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,30 @@
+<template>
+  <input
+    v-bind="$attrs"
+    :class="resolvedSkin"
+    :value="modelValue"
+    @input="onInput"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  modelValue?: string | number;
+  variant?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+}>();
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit("update:modelValue", target.value);
+};
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuInput", props.variant));
+</script>

package/src/components/LuLink.vue

@@ -0,0 +1,47 @@
+<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>

package/src/components/LuPageHeader.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin">
+    <LuText :as="level" variant="page-title">{{ title }}</LuText>
+    <LuText v-if="description" as="p" variant="page-subtitle" class="mt-2">{{ description }}</LuText>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+import LuText from "./LuText.vue";
+
+const props = withDefaults(defineProps<{
+  variant?: string;
+  title: string;
+  description?: string;
+  level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}>(), {
+  level: "h1"
+});
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuPageHeader", props.variant));
+</script>

package/src/components/LuProgressBar.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-bind="$attrs" :class="trackSkin">
+    <div :class="fillSkin" :style="{ width: `${percent}%` }"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{ variant?: string; value: number; max?: number }>();
+
+const percent = computed(() => {
+  const m = props.max ?? 100;
+  return Math.max(0, Math.min(100, (props.value / m) * 100));
+});
+
+const { resolveSkin } = useLumoraConfig();
+const trackSkin = computed(() => resolveSkin("LuProgressBar", props.variant));
+const fillSkin = computed(() => resolveSkin("LuProgressBarFill", props.variant));
+</script>

package/src/components/LuSelect.vue

@@ -0,0 +1,35 @@
+<template>
+  <select
+    v-bind="$attrs"
+    :class="resolvedSkin"
+    :value="modelValue"
+    @change="onChange"
+  >
+    <option v-for="opt in options" :key="opt.value" :value="opt.value">
+      {{ opt.label }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  modelValue?: string | number;
+  variant?: string;
+  options: Array<{ value: string | number; label: string }>;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string): void;
+}>();
+
+const onChange = (event: Event) => {
+  const target = event.target as HTMLSelectElement;
+  emit("update:modelValue", target.value);
+};
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuSelect", props.variant));
+</script>

package/src/components/LuSwitch.vue

@@ -0,0 +1,40 @@
+<template>
+  <button
+    role="switch"
+    type="button"
+    :aria-checked="modelValue"
+    :disabled="disabled"
+    :class="[resolvedSkin, modelValue ? activeSkin : '']"
+    @click="toggle"
+  >
+    <span :class="[thumbSkin, modelValue ? thumbActiveSkin : '']" />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  modelValue?: boolean;
+  variant?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+}>();
+
+const toggle = () => {
+  if (props.disabled) return;
+  emit("update:modelValue", !props.modelValue);
+};
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedSkin = computed(() => resolveSkin("LuSwitch", props.variant));
+const activeSkin = computed(() => resolveSkin("LuSwitch", "active"));
+
+const thumbSkin = computed(() => resolveSkin("LuSwitchThumb", props.variant));
+const thumbActiveSkin = computed(() => resolveSkin("LuSwitchThumb", "active"));
+</script>

package/src/components/LuTab.vue

@@ -0,0 +1,26 @@
+<template>
+  <button v-bind="$attrs" :class="[resolvedSkin, isActive ? activeSkin : '']" @click="onClick">
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Ref } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{ variant?: string; value: string | number }>();
+
+const activeTab = inject<Ref<string | number | undefined>>("lu-tabs-active");
+
+const isActive = computed(() => activeTab?.value === props.value);
+
+const onClick = () => {
+  if (activeTab) {
+    activeTab.value = props.value;
+  }
+};
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuTab", props.variant));
+const activeSkin = computed(() => resolveSkin("LuTab", "active"));
+</script>

package/src/components/LuTabList.vue

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

package/src/components/LuTabPanel.vue

@@ -0,0 +1,19 @@
+<template>
+  <div v-show="isActive" v-bind="$attrs" :class="resolvedSkin">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type Ref } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{ variant?: string; value: string | number }>();
+
+const activeTab = inject<Ref<string | number | undefined>>("lu-tabs-active");
+
+const isActive = computed(() => activeTab?.value === props.value);
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuTabPanel", props.variant));
+</script>

package/src/components/LuTable.vue

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

package/src/components/LuTableBody.vue

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

package/src/components/LuTableCell.vue

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

package/src/components/LuTableHead.vue

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

package/src/components/LuTableHeadCell.vue

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

package/src/components/LuTableRow.vue

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

package/src/components/LuTabs.vue

@@ -0,0 +1,30 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref, watch } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  variant?: string;
+  modelValue?: string | number;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number): void;
+}>();
+
+const activeTab = ref(props.modelValue);
+watch(() => props.modelValue, (val) => activeTab.value = val);
+watch(activeTab, (val) => {
+  if (val !== undefined) emit("update:modelValue", val);
+});
+
+provide("lu-tabs-active", activeTab);
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuTabs", props.variant));
+</script>