@astrake/lumora-ui 0.2.0 → 0.2.1

package/src/components/LuModal.vue

@@ -1,115 +0,0 @@
-<template>
-  <Teleport to="body">
-    <transition
-      enter-active-class="transition ease-out duration-200"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-      leave-active-class="transition ease-in duration-150"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <div v-if="modelValue" :class="resolvedOverlaySkin" @click="handleOverlayClick" aria-modal="true" role="dialog" tabindex="-1">
-        <transition
-          enter-active-class="transition ease-out duration-200"
-          enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          enter-to-class="opacity-100 translate-y-0 sm:scale-100"
-          leave-active-class="transition ease-in duration-150"
-          leave-from-class="opacity-100 translate-y-0 sm:scale-100"
-          leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          appear
-        >
-          <div v-if="modelValue" :class="resolvedSkin" @click.stop>
-            <div v-if="$slots.header || title" :class="resolvedHeaderSkin">
-              <slot name="header">
-                <LuText variant="section-title">{{ title }}</LuText>
-              </slot>
-              <button v-if="closable" type="button" :class="resolvedCloseButtonSkin" @click="close" aria-label="Close modal">
-                <LuIcon name="x" class="h-5 w-5" />
-              </button>
-            </div>
-            
-            <div :class="resolvedContentSkin">
-              <slot />
-            </div>
-
-            <div v-if="$slots.footer" :class="resolvedFooterSkin">
-              <slot name="footer" />
-            </div>
-          </div>
-        </transition>
-      </div>
-    </transition>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, onBeforeUnmount, watch } from "vue";
-import { useLumoraConfig } from "../context";
-import LuText from "./LuText.vue";
-import LuIcon from "./LuIcon.vue";
-
-const props = withDefaults(defineProps<{
-  modelValue: boolean;
-  title?: string;
-  variant?: string;
-  closable?: boolean;
-  closeOnOverlayClick?: boolean;
-}>(), {
-  closable: true,
-  closeOnOverlayClick: true,
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "close"): void;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-
-const resolvedOverlaySkin = computed(() => resolveSkin("LuModalOverlay", props.variant));
-const resolvedSkin = computed(() => resolveSkin("LuModal", props.variant));
-const resolvedHeaderSkin = computed(() => resolveSkin("LuModalHeader", props.variant));
-const resolvedContentSkin = computed(() => resolveSkin("LuModalContent", props.variant));
-const resolvedFooterSkin = computed(() => resolveSkin("LuModalFooter", props.variant));
-const resolvedCloseButtonSkin = computed(() => resolveSkin("LuModalCloseButton", props.variant));
-
-const close = () => {
-  if (props.closable) {
-    emit("update:modelValue", false);
-    emit("close");
-  }
-};
-
-const handleOverlayClick = () => {
-  if (props.closeOnOverlayClick) {
-    close();
-  }
-};
-
-const handleEscKey = (e: KeyboardEvent) => {
-  if (e.key === 'Escape' && props.modelValue) {
-    close();
-  }
-};
-
-watch(() => props.modelValue, (isOpen) => {
-  if (typeof document !== 'undefined') {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-  }
-}, { immediate: true });
-
-onMounted(() => {
-  document.addEventListener('keydown', handleEscKey);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keydown', handleEscKey);
-  if (typeof document !== 'undefined') {
-    document.body.style.overflow = '';
-  }
-});
-</script>

package/src/components/LuPageHeader.vue

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

@@ -1,118 +0,0 @@
-<template>
-  <nav aria-label="Pagination" :class="resolvedSkin">
-    <LuButton
-      variant="ghost"
-      :disabled="modelValue <= 1"
-      @click="prevPage"
-      :class="resolvedButtonSkin"
-      aria-label="Previous page"
-    >
-      <LuIcon name="chevron-left" class="h-4 w-4" />
-    </LuButton>
-
-    <div :class="resolvedPagesSkin">
-      <template v-for="page in pages" :key="page">
-        <span v-if="page === '...'" :class="resolvedEllipsisSkin">...</span>
-        <LuButton
-          v-else
-          :variant="page === modelValue ? 'primary' : 'ghost'"
-          @click="goToPage(page as number)"
-          :class="resolvedPageButtonSkin"
-          :aria-current="page === modelValue ? 'page' : undefined"
-        >
-          {{ page }}
-        </LuButton>
-      </template>
-    </div>
-
-    <LuButton
-      variant="ghost"
-      :disabled="modelValue >= totalPages"
-      @click="nextPage"
-      :class="resolvedButtonSkin"
-      aria-label="Next page"
-    >
-      <LuIcon name="chevron-right" class="h-4 w-4" />
-    </LuButton>
-  </nav>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useLumoraConfig } from "../context";
-import LuButton from "./LuButton.vue";
-import LuIcon from "./LuIcon.vue";
-
-const props = withDefaults(defineProps<{
-  modelValue: number;
-  total: number;
-  pageSize?: number;
-  siblingCount?: number;
-  variant?: string;
-}>(), {
-  pageSize: 10,
-  siblingCount: 1,
-});
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: number): void;
-  (e: "change", value: number): void;
-}>();
-
-const totalPages = computed(() => Math.ceil(props.total / props.pageSize));
-
-const pages = computed(() => {
-  const current = props.modelValue;
-  const total = totalPages.value;
-  const siblings = props.siblingCount;
-
-  if (total <= 1) return [1];
-
-  const leftSiblingIndex = Math.max(current - siblings, 1);
-  const rightSiblingIndex = Math.min(current + siblings, total);
-
-  const showLeftEllipsis = leftSiblingIndex > 2;
-  const showRightEllipsis = rightSiblingIndex < total - 1;
-
-  if (!showLeftEllipsis && showRightEllipsis) {
-    const leftItemCount = 3 + 2 * siblings;
-    const leftRange = Array.from({ length: Math.min(leftItemCount, total) }, (_, i) => i + 1);
-    return [...leftRange, '...', total];
-  }
-
-  if (showLeftEllipsis && !showRightEllipsis) {
-    const rightItemCount = 3 + 2 * siblings;
-    const rightRange = Array.from({ length: Math.min(rightItemCount, total) }, (_, i) => total - rightItemCount + i + 1);
-    return [1, '...', ...rightRange];
-  }
-
-  if (showLeftEllipsis && showRightEllipsis) {
-    const middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, i) => leftSiblingIndex + i);
-    return [1, '...', ...middleRange, '...', total];
-  }
-
-  return Array.from({ length: total }, (_, i) => i + 1);
-});
-
-const { resolveSkin } = useLumoraConfig();
-
-const resolvedSkin = computed(() => resolveSkin("LuPagination", props.variant));
-const resolvedButtonSkin = computed(() => resolveSkin("LuPaginationButton", props.variant));
-const resolvedPagesSkin = computed(() => resolveSkin("LuPaginationPages", props.variant));
-const resolvedPageButtonSkin = computed(() => resolveSkin("LuPaginationPageButton", props.variant));
-const resolvedEllipsisSkin = computed(() => resolveSkin("LuPaginationEllipsis", props.variant));
-
-const goToPage = (page: number) => {
-  if (page === props.modelValue) return;
-  emit("update:modelValue", page);
-  emit("change", page);
-};
-
-const prevPage = () => {
-  if (props.modelValue > 1) goToPage(props.modelValue - 1);
-};
-
-const nextPage = () => {
-  if (props.modelValue < totalPages.value) goToPage(props.modelValue + 1);
-};
-</script>

package/src/components/LuProgressBar.vue

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

@@ -1,55 +0,0 @@
-<template>
-  <div :class="resolvedContainerSkin">
-    <input
-      type="radio"
-      v-bind="$attrs"
-      :class="resolvedSkin"
-      :name="radioGroup?.name"
-      :value="value"
-      :checked="isChecked"
-      :disabled="radioGroup?.disabled.value || disabled"
-      @change="onChange"
-    />
-    <label v-if="$slots.default || label" :class="resolvedLabelSkin" @click.prevent="onClick">
-      <slot>{{ label }}</slot>
-    </label>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from "vue";
-import { useLumoraConfig } from "../context";
-import { LuRadioGroupContextKey } from "./LuRadioGroup.types";
-
-const props = defineProps<{
-  value: string | number;
-  variant?: string;
-  label?: string;
-  disabled?: boolean;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedContainerSkin = computed(() => resolveSkin("LuRadioContainer", props.variant));
-const resolvedSkin = computed(() => resolveSkin("LuRadio", props.variant));
-const resolvedLabelSkin = computed(() => resolveSkin("LuRadioLabel", props.variant));
-
-const radioGroup = inject(LuRadioGroupContextKey, null);
-
-if (!radioGroup) {
-  console.warn("LuRadio must be used within a LuRadioGroup");
-}
-
-const isChecked = computed(() => {
-  return radioGroup?.modelValue.value === props.value;
-});
-
-const onChange = () => {
-  if (props.disabled || radioGroup?.disabled.value) return;
-  radioGroup?.updateValue(props.value);
-};
-
-const onClick = () => {
-  if (props.disabled || radioGroup?.disabled.value) return;
-  radioGroup?.updateValue(props.value);
-};
-</script>

package/src/components/LuRadioGroup.types.ts

@@ -1,10 +0,0 @@
-import type { InjectionKey, Ref } from 'vue';
-
-export interface LuRadioGroupContext {
-  name: string;
-  modelValue: Ref<string | number | undefined>;
-  updateValue: (value: string | number) => void;
-  disabled: Ref<boolean>;
-}
-
-export const LuRadioGroupContextKey: InjectionKey<LuRadioGroupContext> = Symbol('LuRadioGroupContext');

package/src/components/LuRadioGroup.vue

@@ -1,66 +0,0 @@
-<template>
-  <div :class="resolvedSkin" role="radiogroup" :aria-disabled="disabled || formContext?.disabled.value">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, provide, ref, watch } from "vue";
-import { useLumoraConfig } from "../context";
-import { LuFormContextKey } from "./LuForm.types";
-import { LuRadioGroupContextKey } from "./LuRadioGroup.types";
-
-const props = defineProps<{
-  modelValue?: string | number;
-  name: string;
-  variant?: string;
-  disabled?: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string | number): void;
-  (e: "change", value: string | number): void;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuRadioGroup", props.variant));
-
-const formContext = inject(LuFormContextKey, null);
-const internalValue = ref<string | number | undefined>(props.modelValue);
-
-watch(() => props.modelValue, (newVal) => {
-  internalValue.value = newVal;
-});
-
-const updateValue = (value: string | number) => {
-  if (props.disabled || formContext?.disabled.value) return;
-  internalValue.value = value;
-  emit("update:modelValue", value);
-  emit("change", value);
-  
-  if (props.name && formContext && (formContext.validateOn.value === "blur" || formContext.validateOn.value === "both")) {
-    // validation
-  }
-};
-
-provide(LuRadioGroupContextKey, {
-  name: props.name,
-  modelValue: computed(() => internalValue.value),
-  updateValue,
-  disabled: computed(() => !!props.disabled || !!formContext?.disabled.value)
-});
-
-onMounted(() => {
-  if (!props.name || !formContext) return;
-  formContext.register({
-    name: props.name,
-    getValue: () => internalValue.value,
-    setValue: (v) => { internalValue.value = v as string | number; },
-    setError: (_msg) => {},
-  });
-});
-
-onUnmounted(() => {
-  if (props.name && formContext) formContext.unregister(props.name);
-});
-</script>

package/src/components/LuSelect.vue

@@ -1,67 +0,0 @@
-<template>
-  <select
-    v-bind="$attrs"
-    :class="resolvedSkin"
-    :value="modelValue"
-    :name="name"
-    :disabled="formContext?.disabled.value"
-    @change="onChange"
-    @blur="onBlur"
-  >
-    <option v-for="opt in options" :key="opt.value" :value="opt.value">
-      {{ opt.label }}
-    </option>
-  </select>
-</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;
-  options: Array<{ value: string | number; label: string }>;
-  name?: string;
-  error?: string | null;
-}>();
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: string | number): void;
-  (e: "blur"): void;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-const resolvedSkin = computed(() => resolveSkin("LuSelect", props.variant));
-
-const formContext = inject(LuFormContextKey, null);
-const internalValue = ref<string | number | undefined>(props.modelValue);
-
-const onChange = (event: Event) => {
-  const value = (event.target as HTMLSelectElement).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 | number; },
-    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/LuSkeleton.vue

@@ -1,15 +0,0 @@
-<template>
-  <div :class="resolvedSkin" aria-hidden="true" />
-</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("LuSkeleton", props.variant));
-</script>

package/src/components/LuSpinner.vue

@@ -1,36 +0,0 @@
-<template>
-  <svg
-    :class="resolvedSkin"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    role="status"
-    aria-label="Loading"
-  >
-    <circle
-      class="opacity-25"
-      cx="12"
-      cy="12"
-      r="10"
-      stroke="currentColor"
-      stroke-width="4"
-    ></circle>
-    <path
-      class="opacity-75"
-      fill="currentColor"
-      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-    ></path>
-  </svg>
-</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("LuSpinner", props.variant));
-</script>

package/src/components/LuSwitch.vue

@@ -1,76 +0,0 @@
-<template>
-  <button
-    role="switch"
-    type="button"
-    :name="name"
-    :aria-checked="isChecked"
-    :disabled="mergedDisabled"
-    :class="cn(resolvedSkin, isChecked ? activeSkin : '')"
-    @click="toggle"
-    @blur="onBlur"
-  >
-    <span :class="cn(thumbSkin, isChecked ? thumbActiveSkin : '')" />
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, onMounted, onUnmounted, ref } from "vue";
-import { useLumoraConfig } from "../context";
-import { LuFormContextKey } from "./LuForm.types";
-import { cn } from "../utils";
-
-const props = defineProps<{
-  modelValue?: boolean;
-  variant?: string;
-  disabled?: boolean;
-  name?: string;
-  error?: string | null;
-}>();
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-  (e: "blur"): void;
-}>();
-
-const { resolveSkin } = useLumoraConfig();
-
-const resolvedSkin = computed(() => resolveSkin("LuSwitch", props.variant));
-const activeSkin = computed(() => resolveSkin("LuSwitch", "checked"));
-
-const thumbSkin = computed(() => resolveSkin("LuSwitchThumb", props.variant));
-const thumbActiveSkin = computed(() => resolveSkin("LuSwitchThumb", "checked"));
-
-const formContext = inject(LuFormContextKey, null);
-const internalValue = ref<boolean | undefined>(props.modelValue);
-const isChecked = computed(() => props.modelValue !== undefined ? props.modelValue : !!internalValue.value);
-
-const mergedDisabled = computed(() => props.disabled || formContext?.disabled.value);
-
-const toggle = () => {
-  if (mergedDisabled.value) return;
-  const newValue = !isChecked.value;
-  internalValue.value = newValue;
-  emit("update:modelValue", newValue);
-};
-
-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 = Boolean(v); },
-    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/LuTab.vue

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

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

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