@sewadah/selaras 0.1.1

package/dist/runtime/components/FileTree.d.vue.ts

@@ -0,0 +1,28 @@
+import type { FileTreeThemeSlots } from '../theme/file-tree.js';
+import type { UiProp } from '../utils/ui.js';
+export interface FileTreeNode {
+    name: string;
+    /** A node with children renders as a directory, one without as a file - the same convention ContentNavigation's own tree uses. */
+    children?: FileTreeNode[];
+    icon?: string;
+}
+export interface FileTreeProps {
+    items: FileTreeNode[];
+    /** The currently selected file, by reference - highlights its row. */
+    selected?: FileTreeNode;
+    /** Whether a directory starts expanded. @default true */
+    defaultExpanded?: boolean;
+    /** Internal - true for a recursive call rendering a directory's children, skipping the outer box. */
+    isNested?: boolean;
+    ui?: UiProp<FileTreeThemeSlots>;
+}
+export interface FileTreeEmits {
+    'update:selected': [node: FileTreeNode];
+}
+declare const __VLS_export: import("vue").DefineComponent<FileTreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (node: FileTreeNode) => any;
+}, string, import("vue").PublicProps, Readonly<FileTreeProps> & Readonly<{
+    "onUpdate:selected"?: ((node: FileTreeNode) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FileTree.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { fileTreeTheme } from "../theme/file-tree";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  selected: { type: Object, required: false },
+  defaultExpanded: { type: Boolean, required: false, default: true },
+  isNested: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:selected"]);
+const icons = useIcons();
+const expanded = ref(new Set(props.defaultExpanded ? props.items.flatMap((node, index) => node.children ? [index] : []) : []));
+function isExpanded(index) {
+  return expanded.value.has(index);
+}
+function toggle(index) {
+  const next = new Set(expanded.value);
+  if (next.has(index))
+    next.delete(index);
+  else
+    next.add(index);
+  expanded.value = next;
+}
+function selectFile(node) {
+  emit("update:selected", node);
+}
+function iconFor(node, index) {
+  if (node.icon)
+    return node.icon;
+  if (!node.children)
+    return icons.value.file;
+  return isExpanded(index) ? icons.value.folderOpen : icons.value.folder;
+}
+const theme = useComponentTheme("fileTree", fileTreeTheme);
+const ui = computed(() => theme.value({ isNested: props.isNested }));
+const rootProps = useRootProps(() => props.isNested ? ui.value.list : ui.value.root, () => props.isNested ? props.ui?.list : props.ui?.root);
+const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
+function rowProps(node) {
+  return resolveSlot(theme.value({ selected: props.selected === node }).row, props.ui?.row);
+}
+</script>
+
+<template>
+  <ul v-bind="rootProps">
+    <li v-for="(node, index) in items" :key="node.name" v-bind="itemProps">
+      <button type="button" v-bind="rowProps(node)" @click="node.children ? toggle(index) : selectFile(node)">
+        <Icon :name="iconFor(node, index)" v-bind="iconProps" />
+        <span v-bind="labelProps">{{ node.name }}</span>
+      </button>
+      <FileTree
+        v-if="node.children && isExpanded(index)"
+        :items="node.children"
+        is-nested
+        :selected="selected"
+        :default-expanded="defaultExpanded"
+        :ui="props.ui"
+        @update:selected="emit('update:selected', $event)"
+      />
+    </li>
+  </ul>
+</template>

package/dist/runtime/components/FileTree.vue.d.ts

@@ -0,0 +1,28 @@
+import type { FileTreeThemeSlots } from '../theme/file-tree.js';
+import type { UiProp } from '../utils/ui.js';
+export interface FileTreeNode {
+    name: string;
+    /** A node with children renders as a directory, one without as a file - the same convention ContentNavigation's own tree uses. */
+    children?: FileTreeNode[];
+    icon?: string;
+}
+export interface FileTreeProps {
+    items: FileTreeNode[];
+    /** The currently selected file, by reference - highlights its row. */
+    selected?: FileTreeNode;
+    /** Whether a directory starts expanded. @default true */
+    defaultExpanded?: boolean;
+    /** Internal - true for a recursive call rendering a directory's children, skipping the outer box. */
+    isNested?: boolean;
+    ui?: UiProp<FileTreeThemeSlots>;
+}
+export interface FileTreeEmits {
+    'update:selected': [node: FileTreeNode];
+}
+declare const __VLS_export: import("vue").DefineComponent<FileTreeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:selected": (node: FileTreeNode) => any;
+}, string, import("vue").PublicProps, Readonly<FileTreeProps> & Readonly<{
+    "onUpdate:selected"?: ((node: FileTreeNode) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FileUpload.d.vue.ts

@@ -0,0 +1,68 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { FileUploadThemeSlots } from '../theme/file-upload.js';
+import type { UiProp } from '../utils/ui.js';
+import { fileUploadTheme } from '../theme/file-upload.js';
+type FileUploadVariants = VariantProps<typeof fileUploadTheme>;
+type __VLS_Slots = FileUploadSlots;
+export interface FileUploadProps {
+    id?: string;
+    modelValue?: File[];
+    /** Comma-separated MIME types/wildcards (`image/*`) or extensions (`.pdf`) - applied to both the native file dialog and dropped files (drops bypass the dialog's own filtering entirely). */
+    accept?: string;
+    /** @default false */
+    multiple?: boolean;
+    /** Only meaningful with `multiple` - excess files beyond this count are rejected, not silently dropped. */
+    maxFiles?: number;
+    /** Bytes. */
+    maxSize?: number;
+    /** Shows an image thumbnail (an object URL) for image files. @default true */
+    preview?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: FileUploadVariants['size'];
+    color?: FileUploadVariants['color'];
+    name?: string;
+    required?: boolean;
+    ui?: UiProp<FileUploadThemeSlots>;
+}
+export interface FileUploadEmits {
+    'update:modelValue': [value: File[]];
+    /** Fires whenever one or more files are rejected (wrong type, too large, or the count limit was hit) - one reason per rejected file. */
+    'error': [errors: {
+        file: File;
+        reason: string;
+    }[]];
+}
+export interface FileUploadSlots {
+    /** Replaces the dropzone's own default icon/label/description content. */
+    default?: (props: {
+        isDragging: boolean;
+    }) => any;
+    /** Replaces one file row's content. */
+    file?: (props: {
+        file: File;
+        index: number;
+        remove: () => void;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<FileUploadProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (errors: {
+        file: File;
+        reason: string;
+    }[]) => any;
+    "update:modelValue": (value: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<FileUploadProps> & Readonly<{
+    onError?: ((errors: {
+        file: File;
+        reason: string;
+    }[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FileUpload.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useFormField } from "../composables/use-form-field";
+import { useIcons } from "../composables/use-icons";
+import { useLocale } from "../composables/use-locale";
+import { useMessages } from "../composables/use-messages";
+import { fileUploadTheme } from "../theme/file-upload";
+import { formatBytes } from "../utils/format-bytes";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  id: { type: String, required: false },
+  modelValue: { type: Array, required: false },
+  accept: { type: String, required: false },
+  multiple: { type: Boolean, required: false },
+  maxFiles: { type: Number, required: false },
+  maxSize: { type: Number, required: false },
+  preview: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false },
+  invalid: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  name: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:modelValue", "error"]);
+defineSlots();
+const field = useFormField();
+const fileUploadId = computed(() => props.id ?? field?.id);
+const fileUploadInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
+const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
+const describedBy = computed(() => field?.describedBy.value);
+const icons = useIcons();
+const messages = useMessages();
+const effectiveLocale = useLocale();
+const internalFiles = ref(props.modelValue ?? []);
+watch(() => props.modelValue, (value) => {
+  if (value !== void 0)
+    internalFiles.value = value;
+});
+const isDragging = ref(false);
+const dropzoneEl = ref();
+const inputEl = ref();
+const previewUrls = /* @__PURE__ */ new WeakMap();
+function previewUrlFor(file) {
+  if (!props.preview || !file.type.startsWith("image/"))
+    return void 0;
+  let url = previewUrls.get(file);
+  if (!url) {
+    url = URL.createObjectURL(file);
+    previewUrls.set(file, url);
+  }
+  return url;
+}
+function revokePreview(file) {
+  const url = previewUrls.get(file);
+  if (url) {
+    URL.revokeObjectURL(url);
+    previewUrls.delete(file);
+  }
+}
+function matchesAccept(file, accept) {
+  return accept.split(",").map((p) => p.trim()).filter(Boolean).some((pattern) => {
+    if (pattern.startsWith("."))
+      return file.name.toLowerCase().endsWith(pattern.toLowerCase());
+    if (pattern.endsWith("/*"))
+      return file.type.startsWith(pattern.slice(0, -1));
+    return file.type === pattern;
+  });
+}
+function validate(file, acceptedSoFar) {
+  if (props.accept && !matchesAccept(file, props.accept))
+    return messages.value.invalidFileType(file.name);
+  if (props.maxSize && file.size > props.maxSize)
+    return messages.value.invalidFileSize(file.name, formatBytes(props.maxSize, effectiveLocale.value));
+  if (props.multiple && props.maxFiles && internalFiles.value.length + acceptedSoFar >= props.maxFiles)
+    return messages.value.tooManyFiles(props.maxFiles);
+  return void 0;
+}
+function processFiles(fileList) {
+  if (props.disabled)
+    return;
+  const incoming = Array.from(fileList);
+  const accepted = [];
+  const errors = [];
+  for (const file of incoming) {
+    const reason = validate(file, accepted.length);
+    if (reason)
+      errors.push({ file, reason });
+    else
+      accepted.push(file);
+  }
+  if (accepted.length) {
+    const next = props.multiple ? [...internalFiles.value, ...accepted] : accepted.slice(0, 1);
+    internalFiles.value = next;
+    emit("update:modelValue", next);
+  }
+  if (errors.length)
+    emit("error", errors);
+}
+function openDialog() {
+  if (!props.disabled)
+    inputEl.value?.click();
+}
+function onInputChange(event) {
+  const target = event.target;
+  if (target.files?.length)
+    processFiles(target.files);
+  target.value = "";
+}
+function onDragEnter(event) {
+  event.preventDefault();
+  if (!props.disabled)
+    isDragging.value = true;
+}
+function onDragOver(event) {
+  event.preventDefault();
+}
+function onDragLeave(event) {
+  const related = event.relatedTarget;
+  if (!related || !dropzoneEl.value?.contains(related))
+    isDragging.value = false;
+}
+function onDrop(event) {
+  event.preventDefault();
+  isDragging.value = false;
+  if (event.dataTransfer?.files.length)
+    processFiles(event.dataTransfer.files);
+}
+function removeFile(index) {
+  const file = internalFiles.value[index];
+  if (file)
+    revokePreview(file);
+  const next = internalFiles.value.filter((_, i) => i !== index);
+  internalFiles.value = next;
+  emit("update:modelValue", next);
+}
+const theme = useComponentTheme("fileUpload", fileUploadTheme);
+const ui = computed(() => theme.value({
+  size: effectiveSize.value,
+  color: props.color,
+  invalid: fileUploadInvalid.value
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const dropzoneProps = computed(() => resolveSlot(ui.value.dropzone, props.ui?.dropzone));
+const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
+const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const inputProps = computed(() => resolveSlot(ui.value.input, props.ui?.input));
+const fileListProps = computed(() => resolveSlot(ui.value.fileList, props.ui?.fileList));
+const fileProps = computed(() => resolveSlot(ui.value.file, props.ui?.file));
+const fileThumbnailProps = computed(() => resolveSlot(ui.value.fileThumbnail, props.ui?.fileThumbnail));
+const fileIconProps = computed(() => resolveSlot(ui.value.fileIcon, props.ui?.fileIcon));
+const fileInfoProps = computed(() => resolveSlot(ui.value.fileInfo, props.ui?.fileInfo));
+const fileNameProps = computed(() => resolveSlot(ui.value.fileName, props.ui?.fileName));
+const fileSizeProps = computed(() => resolveSlot(ui.value.fileSize, props.ui?.fileSize));
+const fileRemoveProps = computed(() => resolveSlot(ui.value.fileRemove, props.ui?.fileRemove));
+const removeButtonSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <button
+      ref="dropzoneEl"
+      type="button"
+      :disabled="disabled"
+      :data-dragging="isDragging ? '' : void 0"
+      v-bind="dropzoneProps"
+      @click="openDialog"
+      @dragenter="onDragEnter"
+      @dragover="onDragOver"
+      @dragleave="onDragLeave"
+      @drop="onDrop"
+    >
+      <slot :is-dragging="isDragging">
+        <Icon :name="icons.upload" v-bind="iconProps" />
+        <span v-bind="labelProps">{{ messages.dropFiles }}</span>
+        <span v-if="accept || maxSize" v-bind="descriptionProps">
+          <template v-if="accept">{{ accept }}</template>
+          <template v-if="accept && maxSize"> · </template>
+          <template v-if="maxSize">{{ messages.upToSize(formatBytes(maxSize, effectiveLocale)) }}</template>
+        </span>
+      </slot>
+      <input
+        :id="fileUploadId"
+        ref="inputEl"
+        type="file"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        :name="name ?? field?.name"
+        :required="required"
+        :aria-invalid="fileUploadInvalid || void 0"
+        :aria-describedby="describedBy"
+        tabindex="-1"
+        v-bind="inputProps"
+        @click.stop
+        @change="onInputChange"
+      >
+    </button>
+    <ul v-if="internalFiles.length" v-bind="fileListProps">
+      <li v-for="(file, index) in internalFiles" :key="index" v-bind="fileProps">
+        <slot name="file" :file="file" :index="index" :remove="() => removeFile(index)">
+          <img v-if="previewUrlFor(file)" :src="previewUrlFor(file)" :alt="file.name" v-bind="fileThumbnailProps">
+          <Icon v-else :name="icons.file" v-bind="fileIconProps" />
+          <span v-bind="fileInfoProps">
+            <span v-bind="fileNameProps">{{ file.name }}</span>
+            <span v-bind="fileSizeProps">{{ formatBytes(file.size, effectiveLocale) }}</span>
+          </span>
+          <Button
+            :size="removeButtonSize"
+            variant="text"
+            color="neutral"
+            :icon="icons.close"
+            :aria-label="messages.removeItem(file.name)"
+            v-bind="fileRemoveProps"
+            @click="removeFile(index)"
+          />
+        </slot>
+      </li>
+    </ul>
+  </div>
+</template>

package/dist/runtime/components/FileUpload.vue.d.ts

@@ -0,0 +1,68 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { FileUploadThemeSlots } from '../theme/file-upload.js';
+import type { UiProp } from '../utils/ui.js';
+import { fileUploadTheme } from '../theme/file-upload.js';
+type FileUploadVariants = VariantProps<typeof fileUploadTheme>;
+type __VLS_Slots = FileUploadSlots;
+export interface FileUploadProps {
+    id?: string;
+    modelValue?: File[];
+    /** Comma-separated MIME types/wildcards (`image/*`) or extensions (`.pdf`) - applied to both the native file dialog and dropped files (drops bypass the dialog's own filtering entirely). */
+    accept?: string;
+    /** @default false */
+    multiple?: boolean;
+    /** Only meaningful with `multiple` - excess files beyond this count are rejected, not silently dropped. */
+    maxFiles?: number;
+    /** Bytes. */
+    maxSize?: number;
+    /** Shows an image thumbnail (an object URL) for image files. @default true */
+    preview?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: FileUploadVariants['size'];
+    color?: FileUploadVariants['color'];
+    name?: string;
+    required?: boolean;
+    ui?: UiProp<FileUploadThemeSlots>;
+}
+export interface FileUploadEmits {
+    'update:modelValue': [value: File[]];
+    /** Fires whenever one or more files are rejected (wrong type, too large, or the count limit was hit) - one reason per rejected file. */
+    'error': [errors: {
+        file: File;
+        reason: string;
+    }[]];
+}
+export interface FileUploadSlots {
+    /** Replaces the dropzone's own default icon/label/description content. */
+    default?: (props: {
+        isDragging: boolean;
+    }) => any;
+    /** Replaces one file row's content. */
+    file?: (props: {
+        file: File;
+        index: number;
+        remove: () => void;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<FileUploadProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (errors: {
+        file: File;
+        reason: string;
+    }[]) => any;
+    "update:modelValue": (value: File[]) => any;
+}, string, import("vue").PublicProps, Readonly<FileUploadProps> & Readonly<{
+    onError?: ((errors: {
+        file: File;
+        reason: string;
+    }[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: File[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormField.d.vue.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { FormFieldThemeSlots } from '../theme/form-field.js';
+import type { UiProp } from '../utils/ui.js';
+import { formFieldTheme } from '../theme/form-field.js';
+type FormFieldVariants = VariantProps<typeof formFieldTheme>;
+export interface FormFieldProps {
+    label?: string;
+    name?: string;
+    /** A second, muted line under the label, before the control - for context the user should read before reaching it (e.g. "We'll use this to send your receipt"). Distinct from `hint`, which sits below the control instead. */
+    description?: string;
+    hint?: string;
+    error?: string | boolean;
+    required?: boolean;
+    size?: FormFieldVariants['size'];
+    /** 'vertical' (default) stacks the label above the control; 'horizontal' places the label beside it, with the control filling the remaining row width. */
+    orientation?: FormFieldVariants['orientation'];
+    ui?: UiProp<FormFieldThemeSlots>;
+}
+declare var __VLS_1: {}, __VLS_3: {
+    id: string;
+    invalid: boolean;
+    describedBy: string | undefined;
+};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/FormField.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { computed, useId } from "vue";
+import { provideFormField } from "../composables/use-form-field";
+import { formFieldTheme } from "../theme/form-field";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  label: { type: String, required: false },
+  name: { type: String, required: false },
+  description: { type: String, required: false },
+  hint: { type: String, required: false },
+  error: { type: [String, Boolean], required: false },
+  required: { type: Boolean, required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "vertical" },
+  ui: { type: Object, required: false }
+});
+const id = useId();
+const invalid = computed(() => !!props.error);
+const errorMessage = computed(() => typeof props.error === "string" ? props.error : void 0);
+const describedBy = computed(() => {
+  if (invalid.value && errorMessage.value)
+    return `${id}-error`;
+  if (props.hint)
+    return `${id}-hint`;
+  return void 0;
+});
+provideFormField({
+  id,
+  name: props.name,
+  size: props.size,
+  invalid,
+  describedBy
+});
+const theme = useComponentTheme("formField", formFieldTheme);
+const ui = computed(() => theme.value({ size: props.size, orientation: props.orientation }));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const bodyProps = computed(() => resolveSlot(ui.value.body, props.ui?.body));
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const labelProps = computed(() => resolveSlot(ui.value.label, props.ui?.label));
+const requiredProps = computed(() => resolveSlot(ui.value.required, props.ui?.required));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const containerProps = computed(() => resolveSlot(ui.value.container, props.ui?.container));
+const hintProps = computed(() => resolveSlot(ui.value.hint, props.ui?.hint));
+const errorProps = computed(() => resolveSlot(ui.value.error, props.ui?.error));
+</script>
+
+<template>
+  <div v-bind="rootProps">
+    <div v-bind="bodyProps">
+      <div v-bind="headerProps">
+        <label v-if="label" :for="id" v-bind="labelProps">
+          {{ label }}<span v-if="required" v-bind="requiredProps">*</span>
+        </label>
+        <p v-if="description" v-bind="descriptionProps">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </p>
+      </div>
+      <div v-bind="containerProps">
+        <slot :id="id" :invalid="invalid" :described-by="describedBy" />
+      </div>
+    </div>
+    <p v-if="invalid && errorMessage" :id="`${id}-error`" role="alert" v-bind="errorProps">
+      {{ errorMessage }}
+    </p>
+    <p v-else-if="hint" :id="`${id}-hint`" v-bind="hintProps">
+      {{ hint }}
+    </p>
+  </div>
+</template>

package/dist/runtime/components/FormField.vue.d.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { FormFieldThemeSlots } from '../theme/form-field.js';
+import type { UiProp } from '../utils/ui.js';
+import { formFieldTheme } from '../theme/form-field.js';
+type FormFieldVariants = VariantProps<typeof formFieldTheme>;
+export interface FormFieldProps {
+    label?: string;
+    name?: string;
+    /** A second, muted line under the label, before the control - for context the user should read before reaching it (e.g. "We'll use this to send your receipt"). Distinct from `hint`, which sits below the control instead. */
+    description?: string;
+    hint?: string;
+    error?: string | boolean;
+    required?: boolean;
+    size?: FormFieldVariants['size'];
+    /** 'vertical' (default) stacks the label above the control; 'horizontal' places the label beside it, with the control filling the remaining row width. */
+    orientation?: FormFieldVariants['orientation'];
+    ui?: UiProp<FormFieldThemeSlots>;
+}
+declare var __VLS_1: {}, __VLS_3: {
+    id: string;
+    invalid: boolean;
+    describedBy: string | undefined;
+};
+type __VLS_Slots = {} & {
+    description?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Header.d.vue.ts

@@ -0,0 +1,20 @@
+import type { HeaderThemeSlots } from '../theme/header.js';
+import type { UiProp } from '../utils/ui.js';
+export interface HeaderProps {
+    ui?: UiProp<HeaderThemeSlots>;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    right?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<HeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};