@octabits-io/nuxt-ui-kit 0.2.0

package/src/components/AiResultReviewCard.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+// Shipped as source: the consumer's Vite compiles this SFC. All imports are
+// explicit — no reliance on the consumer's auto-import configuration.
+// i18n key contract: ai.review.title / description / currentValue / apply / dismiss.
+import { useI18n } from 'vue-i18n'
+import UCard from '@nuxt/ui/components/Card.vue'
+import UIcon from '@nuxt/ui/components/Icon.vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+
+const { t } = useI18n()
+
+export interface AiResultField {
+  label: string
+  value: string
+  currentValue?: string | null
+}
+
+defineProps<{
+  fields: AiResultField[]
+}>()
+
+const emit = defineEmits<{
+  apply: []
+  dismiss: []
+}>()
+</script>
+
+<template>
+  <UCard class="mb-4">
+    <template #header>
+      <div class="flex items-center">
+        <UIcon name="i-lucide-sparkles" class="mr-2 size-4 text-primary" />
+        <span class="font-medium">{{ t('ai.review.title') }}</span>
+      </div>
+    </template>
+
+    <p class="mb-3 text-sm text-muted">
+      {{ t('ai.review.description') }}
+    </p>
+
+    <div v-for="(field, index) in fields" :key="index" class="mb-4 last:mb-0">
+      <div class="mb-1 text-xs font-medium text-muted">{{ field.label }}</div>
+      <div class="rounded-md bg-elevated p-3 text-sm">
+        {{ field.value }}
+      </div>
+      <div v-if="field.currentValue" class="mt-1 text-xs text-muted">
+        {{ t('ai.review.currentValue') }}: {{ field.currentValue }}
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          :label="t('ai.review.dismiss')"
+          variant="ghost"
+          color="neutral"
+          @click="emit('dismiss')"
+        />
+        <UButton
+          :label="t('ai.review.apply')"
+          color="primary"
+          @click="emit('apply')"
+        />
+      </div>
+    </template>
+  </UCard>
+</template>

package/src/components/ConfirmDialog.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+// Shipped as source: the consumer's Vite compiles this SFC. All imports are
+// explicit — no reliance on the consumer's auto-import configuration. The
+// composable comes from the package root (self-reference) so its singleton
+// dialog state is shared with feature code calling useConfirm().
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import UModal from '@nuxt/ui/components/Modal.vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+import { useConfirmState } from '@octabits-io/nuxt-ui-kit'
+
+const props = defineProps<{
+  /**
+   * Tailwind z-index class applied to overlay + content (e.g. `z-[100]`) so
+   * the dialog stacks above slideovers/modals that triggered it.
+   */
+  zIndexClass?: string
+  /** i18n key for the cancel button default. */
+  cancelTextKey?: string
+  /** i18n key for the confirm button default. */
+  confirmTextKey?: string
+}>()
+
+const { isOpen, options, handleConfirm, handleCancel } = useConfirmState()
+const { t } = useI18n()
+
+const ui = computed(() =>
+  props.zIndexClass ? { overlay: props.zIndexClass, content: props.zIndexClass } : undefined,
+)
+</script>
+
+<template>
+  <UModal v-model:open="isOpen" :ui="ui">
+    <template #header>
+      <h3 class="text-lg font-semibold">{{ options.title }}</h3>
+    </template>
+
+    <template #body>
+      <p v-if="options.message" class="text-sm text-muted">
+        {{ options.message }}
+      </p>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          :label="options.cancelText ?? t(props.cancelTextKey ?? 'common.cancel')"
+          color="neutral"
+          variant="outline"
+          @click="handleCancel"
+        />
+        <UButton
+          :label="options.confirmText ?? t(props.confirmTextKey ?? 'common.confirm')"
+          :color="options.dangerous ? 'error' : 'primary'"
+          @click="handleConfirm"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>

package/src/components/DateInput.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+// Shipped as source: the consumer's Vite compiles this SFC. All imports are
+// explicit — no reliance on the consumer's auto-import configuration.
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { CalendarDate, parseDate } from '@internationalized/date'
+import UPopover from '@nuxt/ui/components/Popover.vue'
+import UButton from '@nuxt/ui/components/Button.vue'
+import UCalendar from '@nuxt/ui/components/Calendar.vue'
+
+/**
+ * Single-date input built on the Nuxt UI 4 date primitives (`UPopover` +
+ * `UCalendar`). The model is an ISO `YYYY-MM-DD` string so it drops into Zod
+ * schemas and API payloads without conversion. Use this instead of a raw
+ * `<UInput type="date">`.
+ */
+const props = withDefaults(defineProps<{
+  modelValue: string
+  placeholder?: string
+  disabled?: boolean
+}>(), { placeholder: undefined, disabled: false })
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const { locale } = useI18n()
+const open = ref(false)
+
+const calendarValue = computed<CalendarDate | undefined>({
+  get() {
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(props.modelValue)) return undefined
+    try {
+      return parseDate(props.modelValue)
+    } catch {
+      return undefined
+    }
+  },
+  set(val) {
+    emit('update:modelValue', val ? val.toString() : '')
+    open.value = false
+  },
+})
+
+const label = computed(() => {
+  const v = calendarValue.value
+  if (!v) return ''
+  return new Date(v.year, v.month - 1, v.day).toLocaleDateString(locale.value)
+})
+</script>
+
+<template>
+  <UPopover v-model:open="open">
+    <UButton
+      variant="outline"
+      color="neutral"
+      icon="i-lucide-calendar"
+      class="w-full justify-start font-normal"
+      :class="{ 'text-dimmed': !calendarValue }"
+      :disabled="disabled"
+    >
+      {{ label || placeholder }}
+    </UButton>
+    <template #content>
+      <UCalendar v-model="calendarValue" class="p-2" />
+    </template>
+  </UPopover>
+</template>