@astrake/lumora-ui 0.2.0 → 0.2.2

package/dist/skins/layout.d.ts

@@ -0,0 +1,2 @@
+import type { SkinMap } from "../types";
+export declare const layoutSkin: SkinMap;

package/dist/skins/shell/desktop.d.ts

@@ -0,0 +1,2 @@
+import type { SkinMap } from "../../types";
+export declare const desktopSkin: SkinMap;

package/dist/skins/shell/embedded.d.ts

@@ -0,0 +1,2 @@
+import type { SkinMap } from "../../types";
+export declare const embeddedSkin: SkinMap;

package/dist/skins/shell/mobile.d.ts

@@ -0,0 +1,2 @@
+import type { SkinMap } from "../../types";
+export declare const mobileSkin: SkinMap;

package/dist/tailwind.d.ts

@@ -0,0 +1 @@
+export declare function getLumoraSourceDir(importerUrl?: string): string;

package/dist/tailwind.js

@@ -0,0 +1,13 @@
+import { createRequire as o } from "node:module";
+import t from "node:path";
+function m(r) {
+  try {
+    const e = o(r ?? import.meta.url);
+    return t.dirname(e.resolve("@astrake/lumora-ui/package.json"));
+  } catch {
+    return "./node_modules/@astrake/lumora-ui";
+  }
+}
+export {
+  m as getLumoraSourceDir
+};

package/dist/types.d.ts

@@ -0,0 +1,15 @@
+import type { Component, Ref, ComputedRef } from "vue";
+export type SkinMap = {
+    [componentName: string]: {
+        default?: string;
+        [variant: string]: string | undefined;
+    };
+};
+export type IconResolver = (name: string, size?: number) => Component | null;
+export interface LumoraUIConfig {
+    target?: "mobile" | "desktop" | "embedded";
+    skin?: SkinMap | Ref<SkinMap> | ComputedRef<SkinMap>;
+    locale?: string;
+    a11y?: boolean;
+    icons?: IconResolver;
+}

package/dist/useShiki-DPOJfneq.js

@@ -0,0 +1,30 @@
+import { ref as o, computed as i } from "vue";
+import { createHighlighter as l } from "shiki";
+const t = o("system"), n = o(!1);
+if (typeof window < "u") {
+  const r = window.matchMedia("(prefers-color-scheme: dark)");
+  n.value = r.matches, r.addEventListener("change", (s) => {
+    n.value = s.matches;
+  });
+}
+const u = i(() => t.value === "system" ? n.value ? "dark" : "light" : t.value);
+function c() {
+  return {
+    mode: t,
+    resolved: u,
+    setMode: (s) => {
+      t.value = s;
+    }
+  };
+}
+let e = null, a = null;
+async function d() {
+  return e || (a || (a = l({
+    themes: ["one-dark-pro"],
+    langs: ["bash", "vue", "ts", "html", "css", "json"]
+  })), e = await a, e);
+}
+export {
+  d as g,
+  c as u
+};

package/dist/utils.d.ts

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

package/package.json

@@ -1,19 +1,43 @@
 {
   "name": "@astrake/lumora-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "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": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./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"
+    "./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",
@@ -46,15 +70,16 @@
     "registry": "https://registry.npmjs.org/"
   },
   "files": [
-    "src",
-    "tsconfig.json",
+    "dist",
+    "src/lumora.css",
     "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())\"",
+    "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": "bun run ../../tools/build.ts",
+    "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": {

package/src/lumora.css

@@ -14,3 +14,35 @@
 
 /* Example: Webkit Scrollbar overrides can go here */
 
+.lu-collapsible-enter-active,
+.lu-collapsible-leave-active {
+  display: grid;
+  transition: grid-template-rows 200ms ease;
+}
+.lu-collapsible-enter-from,
+.lu-collapsible-leave-to {
+  grid-template-rows: 0fr;
+}
+.lu-collapsible-enter-to,
+.lu-collapsible-leave-from {
+  grid-template-rows: 1fr;
+}
+
+:root {
+  --lu-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes lu-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97) translateY(-3px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.lu-fade-in {
+  animation: lu-fade-in 130ms var(--lu-ease-spring) forwards;
+}

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>