@ternent/core 0.0.1

package/packages/ui/src/primitives/Dialog/Dialog.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Dialog as ArkDialog } from "@ark-ui/vue/dialog";
+import { computed, useSlots } from "vue";
+import { dialogProps } from "./Dialog.props";
+import {
+  dialogBackdropClass,
+  dialogBodyClass,
+  dialogCloseClass,
+  dialogContentBaseClass,
+  dialogContentSizeClasses,
+  dialogDescriptionClass,
+  dialogFooterClass,
+  dialogHeaderClass,
+  dialogPositionerClass,
+  dialogTitleClass,
+} from "./Dialog.variants";
+
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps(dialogProps);
+const slots = useSlots();
+
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || slots.header || props.showClose),
+);
+</script>
+
+<template>
+  <ArkDialog.Root
+    v-model:open="open"
+    :close-on-escape="props.closeOnEscape"
+    :close-on-interact-outside="props.closeOnInteractOutside"
+    lazy-mount
+    unmount-on-exit
+  >
+    <ArkDialog.Trigger v-if="$slots.trigger" as-child>
+      <slot name="trigger" />
+    </ArkDialog.Trigger>
+    <ArkDialog.Backdrop :class="dialogBackdropClass" />
+    <ArkDialog.Positioner :class="dialogPositionerClass">
+      <ArkDialog.Content :class="[dialogContentBaseClass, dialogContentSizeClasses[props.size]]">
+        <div v-if="hasHeader" :class="dialogHeaderClass">
+          <slot name="header">
+            <div class="min-w-0 flex-1">
+              <ArkDialog.Title v-if="props.title" :class="dialogTitleClass">
+                {{ props.title }}
+              </ArkDialog.Title>
+              <ArkDialog.Description v-if="props.description" :class="dialogDescriptionClass">
+                {{ props.description }}
+              </ArkDialog.Description>
+            </div>
+          </slot>
+          <ArkDialog.CloseTrigger
+            v-if="props.showClose"
+            :class="dialogCloseClass"
+            aria-label="Close dialog"
+          >
+            <svg viewBox="0 0 24 24" fill="none" class="size-4" aria-hidden="true">
+              <path
+                d="M6 6l12 12M18 6 6 18"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+              />
+            </svg>
+          </ArkDialog.CloseTrigger>
+        </div>
+
+        <div :class="dialogBodyClass">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" :class="dialogFooterClass">
+          <slot name="footer" />
+        </div>
+      </ArkDialog.Content>
+    </ArkDialog.Positioner>
+  </ArkDialog.Root>
+</template>

package/packages/ui/src/primitives/Drawer/Drawer.props.ts

@@ -0,0 +1,33 @@
+import type { PropType } from "vue";
+import type { DrawerSide, DrawerSize } from "./Drawer.types";
+
+export const drawerProps = {
+  title: {
+    type: String,
+    default: undefined,
+  },
+  description: {
+    type: String,
+    default: undefined,
+  },
+  side: {
+    type: String as PropType<DrawerSide>,
+    default: "right",
+  },
+  size: {
+    type: String as PropType<DrawerSize>,
+    default: "md",
+  },
+  showClose: {
+    type: Boolean,
+    default: true,
+  },
+  closeOnEscape: {
+    type: Boolean,
+    default: true,
+  },
+  closeOnInteractOutside: {
+    type: Boolean,
+    default: true,
+  },
+};

package/packages/ui/src/primitives/Drawer/Drawer.spec.md

@@ -0,0 +1,50 @@
+# Drawer
+
+## Purpose
+
+Side-sheet overlay primitive for longer workflows or contextual panels.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `open` via `v-model:open`
+- `title`
+- `description`
+- `side`: `left | right`
+- `size`: `sm | md | lg`
+- `showClose`
+- `closeOnEscape`
+- `closeOnInteractOutside`
+
+Slots:
+
+- `trigger`
+- `header`
+- default content
+- `footer`
+
+## Accessibility
+
+- built on Ark dialog semantics
+- traps focus while open
+- behaves like a modal side sheet rather than a resizable app-specific panel
+
+## Keyboard behavior
+
+- focus moves into the drawer on open
+- Escape closes when enabled
+
+## Example
+
+```vue
+<Drawer v-model:open="open" title="Filters" side="right">
+  <template #trigger>
+    <Button variant="secondary">Open filters</Button>
+  </template>
+</Drawer>
+```

package/packages/ui/src/primitives/Drawer/Drawer.types.ts

@@ -0,0 +1,5 @@
+export const drawerSideValues = ["left", "right"] as const;
+export const drawerSizeValues = ["sm", "md", "lg"] as const;
+
+export type DrawerSide = (typeof drawerSideValues)[number];
+export type DrawerSize = (typeof drawerSizeValues)[number];

package/packages/ui/src/primitives/Drawer/Drawer.variants.ts

@@ -0,0 +1,35 @@
+import type { DrawerSide, DrawerSize } from "./Drawer.types";
+
+export const drawerBackdropClass = "fixed inset-0 z-40 bg-[var(--ui-fg)]/40 backdrop-blur-sm";
+export const drawerPositionerBaseClass = "fixed inset-0 z-50 flex";
+export const drawerPositionerSideClasses: Record<DrawerSide, string> = {
+  left: "justify-start",
+  right: "justify-end",
+};
+
+export const drawerContentBaseClass =
+  "flex h-full w-full max-w-full flex-col overflow-hidden border-[var(--ui-border)] bg-[var(--ui-surface)] text-[var(--ui-fg)] shadow-[var(--ui-shadow-md)]";
+
+export const drawerContentSideClasses: Record<DrawerSide, string> = {
+  left: "border-r",
+  right: "border-l",
+};
+
+export const drawerContentSizeClasses: Record<DrawerSize, string> = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl",
+};
+
+export const drawerHeaderClass =
+  "flex items-start justify-between gap-4 border-b border-[var(--ui-border)] px-4 py-3";
+export const drawerTitleClass = "text-base font-semibold text-[var(--ui-fg)]";
+export const drawerDescriptionClass = "mt-1 text-sm text-[var(--ui-fg-muted)]";
+export const drawerBodyClass = "flex-1 overflow-auto px-4 py-4";
+export const drawerFooterClass =
+  "flex items-center justify-end gap-3 border-t border-[var(--ui-border)] px-4 py-3";
+export const drawerCloseClass =
+  "inline-flex size-9 items-center justify-center rounded-[var(--ui-radius-sm)] border border-[var(--ui-border)] " +
+  "text-[var(--ui-fg-muted)] transition-[border-color,background-color,color] duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
+  "hover:border-[var(--ui-primary-muted)] hover:bg-[var(--ui-tonal-secondary)] hover:text-[var(--ui-fg)] " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)]";

package/packages/ui/src/primitives/Drawer/Drawer.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { Dialog as ArkDialog } from "@ark-ui/vue/dialog";
+import { computed, useSlots } from "vue";
+import { drawerProps } from "./Drawer.props";
+import {
+  drawerBackdropClass,
+  drawerBodyClass,
+  drawerCloseClass,
+  drawerContentBaseClass,
+  drawerContentSideClasses,
+  drawerContentSizeClasses,
+  drawerDescriptionClass,
+  drawerFooterClass,
+  drawerHeaderClass,
+  drawerPositionerBaseClass,
+  drawerPositionerSideClasses,
+  drawerTitleClass,
+} from "./Drawer.variants";
+
+const open = defineModel<boolean>("open", { default: false });
+const props = defineProps(drawerProps);
+const slots = useSlots();
+
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || slots.header || props.showClose),
+);
+</script>
+
+<template>
+  <ArkDialog.Root
+    v-model:open="open"
+    :close-on-escape="props.closeOnEscape"
+    :close-on-interact-outside="props.closeOnInteractOutside"
+    lazy-mount
+    unmount-on-exit
+  >
+    <ArkDialog.Trigger v-if="$slots.trigger" as-child>
+      <slot name="trigger" />
+    </ArkDialog.Trigger>
+    <ArkDialog.Backdrop :class="drawerBackdropClass" />
+    <ArkDialog.Positioner
+      :class="[drawerPositionerBaseClass, drawerPositionerSideClasses[props.side]]"
+    >
+      <ArkDialog.Content
+        :class="[
+          drawerContentBaseClass,
+          drawerContentSideClasses[props.side],
+          drawerContentSizeClasses[props.size],
+        ]"
+      >
+        <div v-if="hasHeader" :class="drawerHeaderClass">
+          <slot name="header">
+            <div class="min-w-0 flex-1">
+              <ArkDialog.Title v-if="props.title" :class="drawerTitleClass">
+                {{ props.title }}
+              </ArkDialog.Title>
+              <ArkDialog.Description v-if="props.description" :class="drawerDescriptionClass">
+                {{ props.description }}
+              </ArkDialog.Description>
+            </div>
+          </slot>
+          <ArkDialog.CloseTrigger
+            v-if="props.showClose"
+            :class="drawerCloseClass"
+            aria-label="Close drawer"
+          >
+            <svg viewBox="0 0 24 24" fill="none" class="size-4" aria-hidden="true">
+              <path
+                d="M6 6l12 12M18 6 6 18"
+                stroke="currentColor"
+                stroke-width="1.75"
+                stroke-linecap="round"
+              />
+            </svg>
+          </ArkDialog.CloseTrigger>
+        </div>
+
+        <div :class="drawerBodyClass">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" :class="drawerFooterClass">
+          <slot name="footer" />
+        </div>
+      </ArkDialog.Content>
+    </ArkDialog.Positioner>
+  </ArkDialog.Root>
+</template>

package/packages/ui/src/primitives/FieldMessage/FieldMessage.props.ts

@@ -0,0 +1,17 @@
+import type { PropType } from "vue";
+import type { FieldMessageSize, FieldMessageTone } from "./FieldMessage.types";
+
+export const fieldMessageProps = {
+  id: {
+    type: String,
+    default: undefined,
+  },
+  size: {
+    type: String as PropType<FieldMessageSize>,
+    default: "md",
+  },
+  tone: {
+    type: String as PropType<FieldMessageTone>,
+    default: "muted",
+  },
+};

package/packages/ui/src/primitives/FieldMessage/FieldMessage.spec.md

@@ -0,0 +1,35 @@
+# FieldMessage
+
+## Purpose
+
+Supporting field copy primitive for descriptions, hints, and validation messages.
+
+## Category
+
+Primitive
+
+## Public API
+
+Props:
+
+- `id`: string
+- `size`: `sm | md | lg`
+- `tone`: `muted | critical`
+
+## Accessibility
+
+- uses a simple text container
+- critical messages use `role="alert"`
+- designed to be referenced from controls via `aria-describedby`
+
+## Examples
+
+```vue
+<FieldMessage id="email-help">We will never share your email.</FieldMessage>
+```
+
+```vue
+<FieldMessage id="email-error" tone="critical">
+  Enter a valid email address.
+</FieldMessage>
+```

package/packages/ui/src/primitives/FieldMessage/FieldMessage.types.ts

@@ -0,0 +1,5 @@
+export const fieldMessageSizeValues = ["sm", "md", "lg"] as const;
+export const fieldMessageToneValues = ["muted", "critical"] as const;
+
+export type FieldMessageSize = (typeof fieldMessageSizeValues)[number];
+export type FieldMessageTone = (typeof fieldMessageToneValues)[number];

package/packages/ui/src/primitives/FieldMessage/FieldMessage.variants.ts

@@ -0,0 +1,14 @@
+import type { FieldMessageSize, FieldMessageTone } from "./FieldMessage.types";
+
+export const fieldMessageBaseClass = "text-[var(--ui-fg-muted)]";
+
+export const fieldMessageSizeClasses: Record<FieldMessageSize, string> = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base",
+};
+
+export const fieldMessageToneClasses: Record<FieldMessageTone, string> = {
+  muted: "text-[var(--ui-fg-muted)]",
+  critical: "text-[var(--ui-critical)]",
+};

package/packages/ui/src/primitives/FieldMessage/FieldMessage.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, normalizeClass, useAttrs } from "vue";
+import { twMerge } from "tailwind-merge";
+import { fieldMessageProps } from "./FieldMessage.props";
+import {
+  fieldMessageBaseClass,
+  fieldMessageSizeClasses,
+  fieldMessageToneClasses,
+} from "./FieldMessage.variants";
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const props = defineProps(fieldMessageProps);
+
+const classes = computed(() =>
+  twMerge(
+    fieldMessageBaseClass,
+    fieldMessageSizeClasses[props.size],
+    fieldMessageToneClasses[props.tone],
+    normalizeClass(attrs.class),
+  ),
+);
+
+const fieldMessageAttrs = computed(() => {
+  const { class: _class, role: _role, ...rest } = attrs;
+  return rest;
+});
+</script>
+
+<template>
+  <p
+    :id="props.id"
+    :class="classes"
+    :role="props.tone === 'critical' ? 'alert' : undefined"
+    v-bind="fieldMessageAttrs"
+  >
+    <slot />
+  </p>
+</template>

package/packages/ui/src/primitives/FileInput/FileInput.props.ts

@@ -0,0 +1,41 @@
+import type { PropType } from "vue";
+import type { FileInputSize, FileInputValue, FileInputVariant } from "./FileInput.types";
+
+export const fileInputProps = {
+  modelValue: {
+    type: [Object, Array, null] as PropType<FileInputValue>,
+    default: null,
+  },
+  accept: {
+    type: String,
+    default: undefined,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  invalid: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<FileInputSize>,
+    default: "md",
+  },
+  variant: {
+    type: String as PropType<FileInputVariant>,
+    default: "default",
+  },
+  placeholder: {
+    type: String,
+    default: "Choose file",
+  },
+  dropzoneTitle: {
+    type: String,
+    default: "Drop files here or click to browse",
+  },
+};

package/packages/ui/src/primitives/FileInput/FileInput.types.ts

@@ -0,0 +1,6 @@
+export const fileInputVariantValues = ["default", "dropzone"] as const;
+export const fileInputSizeValues = ["sm", "md", "lg"] as const;
+
+export type FileInputVariant = (typeof fileInputVariantValues)[number];
+export type FileInputSize = (typeof fileInputSizeValues)[number];
+export type FileInputValue = File | File[] | null;

package/packages/ui/src/primitives/FileInput/FileInput.variants.ts

@@ -0,0 +1,46 @@
+import type { FileInputSize } from "./FileInput.types";
+
+export const fileInputRootClass = "flex w-full flex-col gap-3";
+
+export const fileInputButtonBaseClass =
+  "inline-flex w-full items-center gap-3 rounded-[var(--ui-radius-md)] border bg-[var(--ui-surface)] " +
+  "text-left text-[var(--ui-fg)] transition-[background-color,border-color,box-shadow,color] " +
+  "duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] " +
+  "border-[var(--ui-border)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)] focus-visible:border-[var(--ui-primary)]";
+
+export const fileInputButtonStateClasses = {
+  default: "hover:border-[var(--ui-primary-muted)] hover:bg-[var(--ui-surface-hover)]",
+  invalid:
+    "border-[var(--ui-critical)] focus-visible:border-[var(--ui-critical)] focus-visible:ring-[var(--ui-critical-muted)]",
+  disabled: "pointer-events-none cursor-not-allowed opacity-50",
+} as const;
+
+export const fileInputButtonSizeClasses: Record<FileInputSize, string> = {
+  sm: "min-h-10 px-3 py-2 text-sm",
+  md: "min-h-11 px-4 py-3 text-sm",
+  lg: "min-h-12 px-4 py-3 text-base",
+};
+
+export const fileInputTextMutedClass = "text-[var(--ui-fg-muted)]";
+export const fileInputTextStrongClass = "font-medium text-[var(--ui-fg)]";
+export const fileInputIconClass =
+  "inline-flex size-10 shrink-0 items-center justify-center rounded-[var(--ui-radius-md)] border border-[var(--ui-border)] bg-[var(--ui-tonal-secondary)] text-[var(--ui-primary)]";
+
+export const fileInputDropzoneBaseClass =
+  "flex w-full flex-col items-center justify-center rounded-[var(--ui-radius-lg)] border border-dashed " +
+  "border-[var(--ui-border)] bg-[var(--ui-tonal-tertiary)] text-center transition-[background-color,border-color,box-shadow,color] " +
+  "duration-[var(--ui-duration-normal)] ease-[var(--ui-ease-out)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-ring)] focus-visible:border-[var(--ui-primary)]";
+
+export const fileInputDropzoneStateClasses = {
+  default: "hover:border-[var(--ui-primary-muted)] hover:bg-[var(--ui-tonal-secondary)]",
+  drag: "border-[var(--ui-primary)] bg-[var(--ui-primary-muted)]",
+  invalid:
+    "border-[var(--ui-critical)] focus-visible:border-[var(--ui-critical)] focus-visible:ring-[var(--ui-critical-muted)]",
+  disabled: "pointer-events-none cursor-not-allowed opacity-50",
+} as const;
+
+export const fileInputDropzoneSizeClasses: Record<FileInputSize, string> = {
+  sm: "min-h-36 px-4 py-5",
+  md: "min-h-44 px-6 py-6",
+  lg: "min-h-52 px-8 py-8",
+};

package/packages/ui/src/primitives/FileInput/FileInput.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, normalizeClass, ref, useAttrs, useId } from "vue";
+import { twMerge } from "tailwind-merge";
+import { fileInputProps } from "./FileInput.props";
+import {
+  fileInputButtonBaseClass,
+  fileInputButtonSizeClasses,
+  fileInputButtonStateClasses,
+  fileInputDropzoneBaseClass,
+  fileInputDropzoneSizeClasses,
+  fileInputDropzoneStateClasses,
+  fileInputIconClass,
+  fileInputRootClass,
+  fileInputTextMutedClass,
+  fileInputTextStrongClass,
+} from "./FileInput.variants";
+import type { FileInputValue } from "./FileInput.types";
+
+defineOptions({ inheritAttrs: false });
+
+const emit = defineEmits<{
+  "update:modelValue": [value: FileInputValue];
+  "update:filename": [value: string];
+}>();
+
+const attrs = useAttrs();
+const props = defineProps(fileInputProps);
+
+const inputId = useId();
+const isDragOver = ref(false);
+
+const rootClass = computed(() => twMerge(fileInputRootClass, normalizeClass(attrs.class)));
+
+const rootAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const selectedLabel = computed(() => {
+  const value = props.modelValue;
+
+  if (Array.isArray(value)) {
+    return value.length ? value.map((item) => item.name).join(", ") : props.placeholder;
+  }
+
+  return value?.name || props.placeholder;
+});
+
+const defaultButtonClass = computed(() =>
+  twMerge(
+    fileInputButtonBaseClass,
+    fileInputButtonSizeClasses[props.size],
+    props.invalid ? fileInputButtonStateClasses.invalid : fileInputButtonStateClasses.default,
+    props.disabled ? fileInputButtonStateClasses.disabled : "",
+  ),
+);
+
+const dropzoneClass = computed(() =>
+  twMerge(
+    fileInputDropzoneBaseClass,
+    fileInputDropzoneSizeClasses[props.size],
+    props.invalid ? fileInputDropzoneStateClasses.invalid : fileInputDropzoneStateClasses.default,
+    isDragOver.value ? fileInputDropzoneStateClasses.drag : "",
+    props.disabled ? fileInputDropzoneStateClasses.disabled : "",
+  ),
+);
+
+function emitFiles(fileList: FileList | File[]) {
+  const files = Array.from(fileList);
+
+  if (!files.length) {
+    emit("update:modelValue", null);
+    emit("update:filename", "");
+    return;
+  }
+
+  if (props.multiple) {
+    emit("update:modelValue", files);
+    emit("update:filename", files.map((file) => file.name).join(", "));
+    return;
+  }
+
+  emit("update:modelValue", files[0] ?? null);
+  emit("update:filename", files[0]?.name ?? "");
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement;
+  emitFiles(target.files ?? []);
+}
+
+function handleDragOver(event: DragEvent) {
+  if (props.disabled) return;
+  event.preventDefault();
+  isDragOver.value = true;
+}
+
+function handleDragLeave() {
+  isDragOver.value = false;
+}
+
+function handleDrop(event: DragEvent) {
+  if (props.disabled) return;
+  event.preventDefault();
+  isDragOver.value = false;
+  emitFiles(event.dataTransfer?.files ?? []);
+}
+</script>
+
+<template>
+  <div :class="rootClass" v-bind="rootAttrs">
+    <input
+      :id="inputId"
+      class="sr-only"
+      type="file"
+      :accept="props.accept"
+      :multiple="props.multiple"
+      :disabled="props.disabled"
+      @change="handleInput"
+    />
+
+    <label
+      v-if="props.variant === 'dropzone'"
+      :for="inputId"
+      :class="dropzoneClass"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+    >
+      <span :class="fileInputIconClass" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" class="size-5">
+          <path
+            d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+      <span :class="fileInputTextStrongClass">{{ props.dropzoneTitle }}</span>
+      <span :class="fileInputTextMutedClass">{{ selectedLabel }}</span>
+    </label>
+
+    <label v-else :for="inputId" :class="defaultButtonClass">
+      <span :class="fileInputIconClass" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" class="size-5">
+          <path
+            d="M12 16.5V9.75m0 0 3 3m-3-3-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775 5.25 5.25 0 0 1 10.233-2.33 3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+      <span class="min-w-0">
+        <span :class="fileInputTextStrongClass">Upload file</span>
+        <span class="block truncate" :class="fileInputTextMutedClass">{{ selectedLabel }}</span>
+      </span>
+    </label>
+  </div>
+</template>