@astrake/lumora-ui 0.2.0 → 0.2.1

package/package.json

@@ -1,69 +1,94 @@
-{
-  "name": "@astrake/lumora-ui",
-  "version": "0.2.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",
-    "./style": "./src/lumora.css",
-    "./tailwind": "./src/tailwind.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": {
-    "tailwindcss": "^4.0.0",
-    "vue": "^3.5.0"
-  },
-  "dependencies": {
-    "clsx": "^2.1.1",
-    "shiki": "^4.0.2",
-    "tailwind-merge": "^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

@@ -1,16 +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 */
-
+/* 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/LuAlert.vue

@@ -1,33 +0,0 @@
-<template>
-  <div :class="resolvedSkin" role="alert">
-    <div v-if="$slots.icon || icon" :class="resolvedIconWrapperSkin">
-      <slot name="icon">
-        <LuIcon v-if="icon" :name="icon" />
-      </slot>
-    </div>
-    <div :class="resolvedContentSkin">
-      <slot />
-    </div>
-    <div v-if="$slots.action" :class="resolvedActionSkin">
-      <slot name="action" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-import LuIcon from "./LuIcon.vue";
-
-const props = defineProps<{
-  variant?: string;
-  icon?: string;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-
-const resolvedSkin = computed(() => resolveSkin("LuAlert", props.variant));
-const resolvedIconWrapperSkin = computed(() => resolveSkin("LuAlertIcon", props.variant));
-const resolvedContentSkin = computed(() => resolveSkin("LuAlertContent", props.variant));
-const resolvedActionSkin = computed(() => resolveSkin("LuAlertAction", props.variant));
-</script>

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/LuBreadcrumb.vue

@@ -1,63 +0,0 @@
-<template>
-  <nav aria-label="breadcrumb">
-    <ol :class="resolvedSkin">
-      <li v-for="(item, index) in items" :key="index" :class="resolvedItemSkin">
-        <LuLink
-          v-if="item.href || item.to"
-          :href="item.href"
-          :to="item.to"
-          :variant="item.current ? 'nav-active' : 'nav'"
-          :aria-current="item.current ? 'page' : undefined"
-          :class="resolvedLinkSkin"
-        >
-          <LuIcon v-if="item.icon" :name="item.icon" class="mr-2 h-4 w-4" />
-          {{ item.label }}
-        </LuLink>
-        <span
-          v-else
-          :class="resolvedPageSkin"
-          :aria-current="item.current ? 'page' : undefined"
-        >
-          <LuIcon v-if="item.icon" :name="item.icon" class="mr-2 h-4 w-4" />
-          {{ item.label }}
-        </span>
-        <LuIcon
-          v-if="index < items.length - 1"
-          :name="separatorIcon"
-          :class="resolvedSeparatorSkin"
-        />
-      </li>
-    </ol>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-import LuLink from "./LuLink.vue";
-import LuIcon from "./LuIcon.vue";
-
-export interface LuBreadcrumbItem {
-  label: string;
-  href?: string;
-  to?: any;
-  current?: boolean;
-  icon?: string;
-}
-
-const props = withDefaults(defineProps<{
-  items: LuBreadcrumbItem[];
-  variant?: string;
-  separatorIcon?: string;
-}>(), {
-  separatorIcon: 'chevron-right'
-});
-
-const { resolveSkin } = useLumoraConfig();
-
-const resolvedSkin = computed(() => resolveSkin("LuBreadcrumb", props.variant));
-const resolvedItemSkin = computed(() => resolveSkin("LuBreadcrumbItem", props.variant));
-const resolvedLinkSkin = computed(() => resolveSkin("LuBreadcrumbLink", props.variant));
-const resolvedPageSkin = computed(() => resolveSkin("LuBreadcrumbPage", props.variant));
-const resolvedSeparatorSkin = computed(() => resolveSkin("LuBreadcrumbSeparator", 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,27 +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";
-import { resolveLayoutProps, cn } from "../utils";
-
-const props = withDefaults(defineProps<{
-  variant?: string;
-  as?: string;
-  padding?: string | number;
-  width?: string;
-  height?: string;
-}>(), {
-  as: "div"
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => cn(
-  resolveSkin("LuCard", props.variant),
-  resolveLayoutProps(props)
-));
-</script>

package/src/components/LuCheckbox.vue

@@ -1,94 +0,0 @@
-<template>
-  <div :class="resolvedContainerSkin">
-    <input
-      type="checkbox"
-      v-bind="$attrs"
-      :class="resolvedSkin"
-      :checked="modelValue"
-      :name="name"
-      :disabled="formContext?.disabled.value"
-      @change="onChange"
-      @blur="onBlur"
-    />
-    <label v-if="$slots.default || label" :class="resolvedLabelSkin" @click.prevent="toggle">
-      <slot>{{ label }}</slot>
-    </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
-import { useLumoraConfig } from "../context";
-import { LuFormContextKey } from "./LuForm.types";
-
-const props = defineProps<{
-  modelValue?: boolean;
-  variant?: string;
-  name?: string;
-  label?: string;
-  error?: string | null;
-}>();
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "change", value: boolean): void;
-  (e: "blur"): void;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedContainerSkin = computed(() => resolveSkin("LuCheckboxContainer", props.variant));
-const resolvedSkin = computed(() => resolveSkin("LuCheckbox", props.variant));
-const resolvedLabelSkin = computed(() => resolveSkin("LuCheckboxLabel", props.variant));
-
-const formContext = inject(LuFormContextKey, null);
-const internalValue = ref<boolean>(!!props.modelValue);
-
-watch(() => props.modelValue, (newVal) => {
-  internalValue.value = !!newVal;
-});
-
-const onChange = (event: Event) => {
-  const target = event.target as HTMLInputElement;
-  const value = target.checked;
-  internalValue.value = value;
-  emit("update:modelValue", value);
-  emit("change", value);
-  
-  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
-    // trigger validation handled by parent
-  }
-};
-
-const toggle = () => {
-  if (formContext?.disabled.value || ("disabled" in props && (props as any).disabled !== false)) return;
-  const newValue = !internalValue.value;
-  internalValue.value = newValue;
-  emit("update:modelValue", newValue);
-  emit("change", newValue);
-  
-  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
-    // trigger validation handled by parent
-  }
-};
-
-const onBlur = () => {
-  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
-    // trigger validation handled by parent
-  }
-  emit("blur");
-};
-
-onMounted(() => {
-  if (!props.name || !formContext) return;
-  formContext.register({
-    name: props.name,
-    getValue: () => internalValue.value,
-    setValue: (v) => { internalValue.value = !!v; },
-    setError: (_msg) => {},
-  });
-});
-
-onUnmounted(() => {
-  if (props.name && formContext) formContext.unregister(props.name);
-});
-</script>