@astrake/lumora-ui 0.2.0 → 0.2.1

package/src/components/LuCodeBlock.vue

@@ -1,168 +0,0 @@
-<template>
-  <div v-bind="$attrs" :class="resolvedSkin.container">
-    <div v-if="title || description" :class="resolvedSkin.header">
-      <h3 v-if="title" :class="resolvedSkin.title">{{ title }}</h3>
-      <p v-if="description" :class="resolvedSkin.description">{{ description }}</p>
-    </div>
-
-    <template v-if="variant === 'preview'">
-      <div :class="resolvedSkin.card">
-        <template v-if="layout === 'tabbed'">
-          <LuTabs v-model="activeTab" variant="default">
-            <LuTabList variant="card-header">
-              <LuTab value="preview">Preview</LuTab>
-              <LuTab value="code">Code</LuTab>
-            </LuTabList>
-          </LuTabs>
-
-          <div v-if="activeTab === 'preview'" :class="resolvedSkin.previewArea">
-            <slot name="preview" />
-          </div>
-
-          <div v-if="activeTab === 'code'" :class="resolvedSkin.codeArea">
-            <div :class="resolvedSkin.codeHeader">
-              <div :class="resolvedSkin.badge">{{ lang }}</div>
-              <button @click="copyCode" :class="resolvedSkin.copyButton" aria-label="Copy code">
-                <LuIcon :name="copied ? 'check' : 'copy'" class="w-4 h-4" />
-              </button>
-            </div>
-            <div :class="resolvedSkin.codeContent" v-html="html"></div>
-          </div>
-        </template>
-
-        <template v-else-if="layout === 'split'">
-          <div :class="resolvedSkin.splitContainer">
-            <div :class="resolvedSkin.previewArea">
-              <slot name="preview" />
-            </div>
-            <div :class="resolvedSkin.splitCodeArea">
-              <div :class="resolvedSkin.codeHeader">
-                <div :class="resolvedSkin.badge">{{ lang }}</div>
-                <button @click="copyCode" :class="resolvedSkin.copyButton" aria-label="Copy code">
-                  <LuIcon :name="copied ? 'check' : 'copy'" class="w-4 h-4" />
-                </button>
-              </div>
-              <div :class="resolvedSkin.codeContent" v-html="html"></div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </template>
-
-    <template v-else>
-      <div :class="resolvedSkin.card">
-        <div :class="resolvedSkin.codeArea">
-          <div :class="resolvedSkin.codeHeader">
-            <div :class="resolvedSkin.badge">{{ lang }}</div>
-            <button @click="copyCode" :class="resolvedSkin.copyButton" aria-label="Copy code">
-              <LuIcon :name="copied ? 'check' : 'copy'" class="w-4 h-4" />
-            </button>
-          </div>
-          <div :class="resolvedSkin.codeContent" v-html="html"></div>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script lang="ts">
-import { createHighlighter, type Highlighter } from 'shiki';
-
-let globalHighlighter: Highlighter | null = null;
-let highlighterPromise: Promise<Highlighter> | null = null;
-
-async function getHighlighter() {
-  if (globalHighlighter) return globalHighlighter;
-  if (!highlighterPromise) {
-    highlighterPromise = createHighlighter({
-      themes: ['one-dark-pro'],
-      langs: ['bash', 'vue', 'ts', 'html', 'css', 'json']
-    });
-  }
-  globalHighlighter = await highlighterPromise;
-  return globalHighlighter;
-}
-</script>
-
-<script setup lang="ts">
-import { ref, watch, onMounted, computed } from "vue";
-import { useLumoraConfig } from "../context";
-import LuTabs from "./LuTabs.vue";
-import LuTabList from "./LuTabList.vue";
-import LuTab from "./LuTab.vue";
-import LuIcon from "./LuIcon.vue";
-
-const props = withDefaults(defineProps<{
-  code: string;
-  lang?: string;
-  variant?: "default" | "preview";
-  layout?: "tabbed" | "split";
-  title?: string;
-  description?: string;
-}>(), {
-  lang: "vue",
-  variant: "default",
-  layout: "tabbed"
-});
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => {
-  return {
-    container: resolveSkin("LuCodeBlock", "container"),
-    header: resolveSkin("LuCodeBlock", "header"),
-    title: resolveSkin("LuCodeBlock", "title"),
-    description: resolveSkin("LuCodeBlock", "description"),
-    card: resolveSkin("LuCodeBlock", "card"),
-    previewArea: resolveSkin("LuCodeBlock", "previewArea"),
-    codeArea: resolveSkin("LuCodeBlock", "codeArea"),
-    splitCodeArea: resolveSkin("LuCodeBlock", "splitCodeArea"),
-    splitContainer: resolveSkin("LuCodeBlock", "splitContainer"),
-    codeHeader: resolveSkin("LuCodeBlock", "codeHeader"),
-    badge: resolveSkin("LuCodeBlock", "badge"),
-    copyButton: resolveSkin("LuCodeBlock", "copyButton"),
-    codeContent: resolveSkin("LuCodeBlock", "codeContent"),
-  };
-});
-
-const html = ref('');
-const activeTab = ref<'preview' | 'code'>('preview');
-const copied = ref(false);
-
-const highlight = async () => {
-  if (!props.code) {
-    html.value = '';
-    return;
-  }
-  
-  try {
-    const highlighter = await getHighlighter();
-    
-    html.value = highlighter.codeToHtml(props.code, {
-      lang: props.lang || 'vue',
-      theme: 'one-dark-pro'
-    });
-  } catch (e) {
-    console.error('Failed to highlight code', e);
-    // fallback to plain pre
-    html.value = `<pre><code>${props.code.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code></pre>`;
-  }
-};
-
-onMounted(() => {
-  highlight();
-});
-
-watch(() => [props.code, props.lang], () => {
-  highlight();
-});
-
-const copyCode = async () => {
-  try {
-    await navigator.clipboard.writeText(props.code);
-    copied.value = true;
-    setTimeout(() => copied.value = false, 2000);
-  } catch (err) {
-    console.error('Failed to copy', err);
-  }
-};
-</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,82 +0,0 @@
-<template>
-  <div class="relative w-full" v-if="$slots.prepend || $slots.append">
-    <div v-if="$slots.prepend" :class="prependSkin">
-      <slot name="prepend" />
-    </div>
-    <input
-      v-bind="$attrs"
-      :class="[resolvedSkin, $slots.prepend && 'pl-9', $slots.append && 'pr-9']"
-      :value="modelValue"
-      :name="name"
-      :disabled="formContext?.disabled.value"
-      @input="onInput"
-      @blur="onBlur"
-    />
-    <div v-if="$slots.append" :class="appendSkin">
-      <slot name="append" />
-    </div>
-  </div>
-  <input
-    v-else
-    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 prependSkin = computed(() => resolveSkin("LuInputPrepend", props.variant));
-const appendSkin = computed(() => resolveSkin("LuInputAppend", 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>

package/src/components/LuMenu.vue

@@ -1,86 +0,0 @@
-<template>
-  <div :class="resolvedSkin" ref="dropdownRef">
-    <div @click="toggle" :class="resolvedTriggerSkin" aria-haspopup="true" :aria-expanded="isOpen">
-      <slot name="trigger">
-        <LuButton variant="default">Options <LuIcon name="chevron-down" class="ml-2 h-4 w-4" /></LuButton>
-      </slot>
-    </div>
-    <transition
-      enter-active-class="transition ease-out duration-100"
-      enter-from-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-from-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
-    >
-      <div v-if="isOpen" :class="[resolvedContentSkin, alignClass]">
-        <div :class="resolvedGroupSkin" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-          <slot />
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount } from "vue";
-import { useLumoraConfig } from "../context";
-import LuButton from "./LuButton.vue";
-import LuIcon from "./LuIcon.vue";
-
-const props = withDefaults(defineProps<{
-  variant?: string;
-  align?: 'left' | 'right';
-}>(), {
-  align: 'left'
-});
-
-const emit = defineEmits<{
-  (e: "open"): void;
-  (e: "close"): void;
-}>();
-
-const isOpen = ref(false);
-const dropdownRef = ref<HTMLElement | null>(null);
-
-const { resolveSkin } = useLumoraConfig();
-
-const resolvedSkin = computed(() => resolveSkin("LuMenu", props.variant));
-const resolvedTriggerSkin = computed(() => resolveSkin("LuMenuTrigger", props.variant));
-const resolvedContentSkin = computed(() => resolveSkin("LuMenuContent", props.variant));
-const resolvedGroupSkin = computed(() => resolveSkin("LuMenuGroup", props.variant));
-
-const alignClass = computed(() => {
-  return props.align === 'right' ? 'right-0 origin-top-right' : 'left-0 origin-top-left';
-});
-
-const toggle = () => {
-  isOpen.value = !isOpen.value;
-  if (isOpen.value) {
-    emit("open");
-  } else {
-    emit("close");
-  }
-};
-
-const close = () => {
-  if (isOpen.value) {
-    isOpen.value = false;
-    emit("close");
-  }
-};
-
-const handleClickOutside = (event: MouseEvent) => {
-  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
-    close();
-  }
-};
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-</script>

package/src/components/LuMenuItem.vue

@@ -1,37 +0,0 @@
-<template>
-  <button
-    type="button"
-    :class="resolvedSkin"
-    role="menuitem"
-    :disabled="disabled"
-    :data-disabled="disabled ? '' : undefined"
-    @click="onClick"
-  >
-    <slot />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-
-const props = defineProps<{
-  variant?: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: "click", event: MouseEvent): void;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuMenuItem", props.variant));
-
-const onClick = (event: MouseEvent) => {
-  if (props.disabled) {
-    event.preventDefault();
-    return;
-  }
-  emit("click", event);
-};
-</script>