@astrake/lumora-ui 0.1.6 → 0.2.0

package/src/components/LuModal.vue

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

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

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

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

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

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

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

@@ -3,13 +3,13 @@
     role="switch"
     type="button"
     :name="name"
-    :aria-checked="modelValue"
+    :aria-checked="isChecked"
     :disabled="mergedDisabled"
-    :class="[resolvedSkin, modelValue ? activeSkin : '']"
+    :class="cn(resolvedSkin, isChecked ? activeSkin : '')"
     @click="toggle"
     @blur="onBlur"
   >
-    <span :class="[thumbSkin, modelValue ? thumbActiveSkin : '']" />
+    <span :class="cn(thumbSkin, isChecked ? thumbActiveSkin : '')" />
   </button>
 </template>
 
@@ -17,6 +17,7 @@
 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;
@@ -34,19 +35,20 @@ const emit = defineEmits<{
 const { resolveSkin } = useLumoraConfig();
 
 const resolvedSkin = computed(() => resolveSkin("LuSwitch", props.variant));
-const activeSkin = computed(() => resolveSkin("LuSwitch", "active"));
+const activeSkin = computed(() => resolveSkin("LuSwitch", "checked"));
 
 const thumbSkin = computed(() => resolveSkin("LuSwitchThumb", props.variant));
-const thumbActiveSkin = computed(() => resolveSkin("LuSwitchThumb", "active"));
+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 = !props.modelValue;
+  const newValue = !isChecked.value;
   internalValue.value = newValue;
   emit("update:modelValue", newValue);
 };

package/src/components/LuTag.vue

@@ -0,0 +1,35 @@
+<template>
+  <span :class="resolvedSkin">
+    <slot />
+    <button
+      v-if="closable"
+      type="button"
+      :class="resolvedCloseButtonSkin"
+      @click.stop="emit('close')"
+      aria-label="Remove"
+    >
+      <LuIcon name="x" :class="resolvedIconSkin" />
+    </button>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useLumoraConfig } from "../context";
+import LuIcon from "./LuIcon.vue";
+
+const props = defineProps<{
+  variant?: string;
+  closable?: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: "close"): void;
+}>();
+
+const { resolveSkin } = useLumoraConfig();
+
+const resolvedSkin = computed(() => resolveSkin("LuTag", props.variant));
+const resolvedCloseButtonSkin = computed(() => resolveSkin("LuTagCloseButton", props.variant));
+const resolvedIconSkin = computed(() => resolveSkin("LuTagIcon", props.variant));
+</script>

package/src/components/LuTextarea.vue

@@ -0,0 +1,62 @@
+<template>
+  <textarea
+    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("LuTextarea", props.variant));
+
+const formContext = inject(LuFormContextKey, null);
+const internalValue = ref<string | number | undefined>(props.modelValue);
+
+const onInput = (event: Event) => {
+  const value = (event.target as HTMLTextAreaElement).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/LuToggleButton.vue

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

package/src/components/LuToggleGroup.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-bind="$attrs" :class="resolvedSkin" role="group">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, type Ref } from "vue";
+import { useLumoraConfig } from "../context";
+
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  variant?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: string | number | boolean): void;
+}>();
+
+provide("lu-toggle-value", computed(() => props.modelValue));
+provide("lu-toggle-set", (value: string | number | boolean) => {
+  emit("update:modelValue", value);
+});
+
+const { resolveSkin } = useLumoraConfig();
+const resolvedSkin = computed(() => resolveSkin("LuToggleGroup", props.variant));
+</script>

package/src/components/index.ts

@@ -26,4 +26,20 @@ export { default as LuTableRow } from "./LuTableRow.vue";
 export { default as LuTableHeadCell } from "./LuTableHeadCell.vue";
 export { default as LuTableCell } from "./LuTableCell.vue";
 export { default as LuForm } from "./LuForm.vue";
+export { default as LuTextarea } from "./LuTextarea.vue";
+export { default as LuCheckbox } from "./LuCheckbox.vue";
+export { default as LuRadioGroup } from "./LuRadioGroup.vue";
+export { default as LuRadio } from "./LuRadio.vue";
+export { default as LuAlert } from "./LuAlert.vue";
+export { default as LuSpinner } from "./LuSpinner.vue";
+export { default as LuSkeleton } from "./LuSkeleton.vue";
+export { default as LuTag } from "./LuTag.vue";
+export { default as LuBreadcrumb } from "./LuBreadcrumb.vue";
+export { default as LuMenu } from "./LuMenu.vue";
+export { default as LuMenuItem } from "./LuMenuItem.vue";
+export { default as LuPagination } from "./LuPagination.vue";
+export { default as LuModal } from "./LuModal.vue";
+export { default as LuToggleGroup } from "./LuToggleGroup.vue";
+export { default as LuToggleButton } from "./LuToggleButton.vue";
+export { default as LuCodeBlock } from "./LuCodeBlock.vue";
 export type { LuFormRules, LuFormErrors, LuFormValidator, LuFormContext } from "./LuForm.types";