@tunji_xy/ui 0.0.0-stage → 0.10.0

package/app/components/Modal.vue

@@ -0,0 +1,210 @@
+<template>
+  <dialog
+    ref="dialog"
+    v-bind="passthroughAttrs"
+    data-ui-modal
+    :data-size="size"
+    :data-closing="closing || undefined"
+    :class="dialogClasses"
+    :aria-labelledby="title || $slots.header ? titleId : undefined"
+    :aria-describedby="description ? descriptionId : undefined"
+    @cancel="onCancel"
+    @close="onClose"
+    @pointerdown="onPointerDown"
+    @click="onClick"
+  >
+    <!-- Only the content scrolls, so the header, × and footer stay in view.
+         The bottom padding clears the iPhone home indicator under a sheet. -->
+    <div
+      class="relative flex min-h-0 grow flex-col gap-4 p-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
+    >
+      <header v-if="title || description || $slots.header" class="pr-8">
+        <div :id="titleId">
+          <slot name="header" :close="close">
+            <h2 v-if="title" class="text-lg font-semibold leading-snug">
+              {{ title }}
+            </h2>
+          </slot>
+        </div>
+        <p
+          v-if="description"
+          :id="descriptionId"
+          class="mt-1 text-sm/relaxed text-muted-foreground"
+        >
+          {{ description }}
+        </p>
+      </header>
+
+      <button
+        v-if="!hideClose"
+        type="button"
+        class="absolute right-4 top-4 inline-flex size-8 cursor-pointer items-center justify-center rounded-control text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-primary/35"
+        aria-label="Close"
+        @click="close"
+      >
+        <XIcon class="size-4.5" />
+      </button>
+
+      <div
+        v-if="$slots.default"
+        class="-mx-6 -my-1 min-h-0 grow overflow-y-auto overscroll-contain px-6 py-1 text-sm/relaxed outline-none focus-visible:ring-3 focus-visible:ring-primary/35 focus-visible:ring-inset"
+      >
+        <slot :close="close" />
+      </div>
+
+      <footer
+        v-if="$slots.footer"
+        class="flex flex-wrap justify-end gap-2 pt-2"
+      >
+        <slot name="footer" :close="close" />
+      </footer>
+    </div>
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useAttrs,
+  useId,
+  useTemplateRef,
+  watch,
+} from "vue";
+import { XIcon } from "@lucide/vue";
+import { cn } from "../lib/cn";
+
+/*
+ * Built on the native <dialog> element, so the browser provides the focus trap,
+ * Esc handling, the top layer (no z-index fights) and returns focus to the
+ * element that opened it.
+ *
+ * Its layout per screen size and its open / close animations are in main.css
+ * (the UiModal section), in the components layer so an app's class wins.
+ */
+
+export interface ModalProps {
+  title?: string;
+  description?: string;
+  /** sm, md and lg are a bottom sheet on phones; full fills the screen everywhere. */
+  size?: "sm" | "md" | "lg" | "full";
+  overlay?: "blur" | "transparent" | "dim";
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  hideClose?: boolean;
+}
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  size: "md",
+  overlay: "blur",
+  closeOnBackdrop: true,
+  closeOnEsc: true,
+  hideClose: false,
+});
+
+const open = defineModel<boolean>("open", { default: false });
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+defineSlots<{
+  default?: (props: { close: () => void }) => unknown;
+  header?: (props: { close: () => void }) => unknown;
+  footer?: (props: { close: () => void }) => unknown;
+}>();
+
+// A `class` passed by the app is merged onto the <dialog> (e.g. class="max-w-xl").
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const passthroughAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const overlays = {
+  blur: "backdrop:bg-overlay/50 backdrop:backdrop-blur-sm",
+  dim: "backdrop:bg-overlay",
+  transparent: "backdrop:bg-transparent",
+} as const;
+
+const dialogClasses = computed(() =>
+  cn(
+    "overflow-auto border-0 bg-surface p-0 text-foreground shadow-2xl open:flex open:flex-col",
+    overlays[props.overlay],
+    attrs.class as string,
+  ),
+);
+
+const dialogEl = useTemplateRef<HTMLDialogElement>("dialog");
+const baseId = useId();
+const titleId = `ui-modal-${baseId}-title`;
+const descriptionId = `ui-modal-${baseId}-description`;
+
+function close() {
+  open.value = false;
+}
+
+const closing = ref(false);
+let run = 0;
+
+const sync = async (isOpen: boolean) => {
+  const dialog = dialogEl.value;
+  if (!dialog) return;
+  const thisRun = ++run;
+
+  if (isOpen) {
+    closing.value = false;
+    if (!dialog.open) dialog.showModal();
+    return;
+  }
+
+  if (!dialog.open) return;
+  closing.value = true;
+  await nextTick();
+  await Promise.allSettled(dialog.getAnimations().map((a) => a.finished));
+  if (thisRun !== run) return;
+  closing.value = false;
+  dialog.close();
+};
+
+// <dialog> only exists in the browser, so sync after mount (safe for SSR).
+onMounted(() => sync(open.value));
+
+watch(open, sync, { flush: "post" });
+
+onBeforeUnmount(() => {
+  if (dialogEl.value?.open) dialogEl.value.close();
+});
+
+const onCancel = (event: Event) => {
+  event.preventDefault();
+  if (props.closeOnEsc) close();
+};
+
+const onClose = () => {
+  closing.value = false;
+  if (open.value) open.value = false;
+  emit("close");
+};
+
+let pressStartedOnBackdrop = false;
+
+const onPointerDown = (event: PointerEvent) => {
+  pressStartedOnBackdrop = event.target === dialogEl.value;
+};
+
+const onClick = (event: MouseEvent) => {
+  if (
+    props.closeOnBackdrop &&
+    pressStartedOnBackdrop &&
+    event.target === dialogEl.value
+  ) {
+    close();
+  }
+  pressStartedOnBackdrop = false;
+};
+</script>

package/app/components/OtpInput.vue

@@ -0,0 +1,251 @@
+<template>
+  <div
+    :class="cn('flex flex-col gap-1 text-foreground', attrs.class as string)"
+  >
+    <label v-if="label" :for="inputId" class="text-sm font-semibold">
+      {{ label }}
+      <span v-if="required" class="ml-0.5 text-danger" aria-hidden="true"
+        >*</span
+      >
+    </label>
+
+    <div
+      :class="
+        cn(
+          'group relative grid w-fit items-center',
+          sizes[size].group,
+          disabled && 'cursor-not-allowed opacity-60',
+        )
+      "
+      :style="{ gridTemplateColumns: columns }"
+    >
+      <template v-for="box in boxes" :key="box.index">
+        <span
+          v-if="box.separated"
+          class="mx-1 h-0.5 w-3 shrink-0 rounded-full bg-muted-foreground"
+          aria-hidden="true"
+        />
+        <div :class="boxClasses(box.active)" aria-hidden="true">
+          <template v-if="box.char">{{ mask ? "*" : box.char }}</template>
+          <span
+            v-else-if="box.active"
+            class="h-[1em] w-px animate-caret-blink bg-foreground motion-reduce:animate-none"
+          />
+        </div>
+      </template>
+
+      <!-- iOS zooms into inputs under 16px, hence text-base on invisible text. -->
+      <input
+        :id="inputId"
+        ref="input"
+        autocomplete="one-time-code"
+        autocapitalize="off"
+        autocorrect="off"
+        :spellcheck="false"
+        v-bind="inputAttrs"
+        type="text"
+        class="absolute inset-0 size-full cursor-text bg-transparent text-base text-transparent caret-transparent outline-none selection:bg-transparent disabled:cursor-not-allowed"
+        :value="model"
+        :inputmode="numeric ? 'numeric' : 'text'"
+        :pattern="pattern"
+        :maxlength="length"
+        :name="name"
+        :disabled="disabled"
+        :required="required"
+        :aria-invalid="error ? true : undefined"
+        :aria-describedby="message ? messageId : undefined"
+        @input="onInput"
+        @paste="onPaste"
+        @focus="onFocus"
+        @blur="onBlur"
+        @click="syncCaret"
+        @keyup="syncCaret"
+        @select="syncCaret"
+      />
+    </div>
+
+    <p
+      v-if="message"
+      :id="messageId"
+      :class="cn('text-sm', error ? 'text-danger' : 'text-muted-foreground')"
+      :role="error ? 'alert' : undefined"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs, useId, useTemplateRef, watch } from "vue";
+import { cn } from "../lib/cn";
+
+export interface OtpInputProps {
+  length?: 4 | 6 | 8;
+  mask?: boolean;
+  /** Adds a dash after every `separator` boxes. */
+  separator?: number;
+  numeric?: boolean;
+  label?: string;
+  hint?: string;
+  error?: string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  name?: string;
+}
+
+const props = withDefaults(defineProps<OtpInputProps>(), {
+  length: 6,
+  mask: false,
+  numeric: true,
+  size: "md",
+});
+
+const model = defineModel<string>({ default: "" });
+
+const emit = defineEmits<{
+  complete: [code: string];
+}>();
+
+// `class` styles the outer wrapper; every other attribute and listener
+// (aria-label, autofocus, @focus, data-*) goes to the <input> itself.
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const inputAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const autoId = useId();
+const inputId = computed(() => props.id ?? `ui-otp-input-${autoId}`);
+const messageId = computed(() => `${inputId.value}-message`);
+const message = computed(() => props.error || props.hint);
+
+// Makes a partly filled code fail form validation, not just an empty one.
+const pattern = computed(
+  () => `${props.numeric ? "\\d" : "."}{${props.length}}`,
+);
+
+const focused = ref(false);
+const allSelected = ref(false);
+
+const boxes = computed(() => {
+  const code = model.value;
+  const current = Math.min(code.length, props.length - 1);
+  return Array.from({ length: props.length }, (_, index) => ({
+    index,
+    char: code[index] ?? "",
+    active:
+      focused.value && (allSelected.value ? index < code.length : index === current),
+    separated:
+      !!props.separator && index > 0 && index % props.separator === 0,
+  }));
+});
+
+const sizes = {
+  sm: { group: "gap-1.5", box: "text-sm", width: "2.25rem" },
+  md: { group: "gap-2", box: "text-base", width: "2.5rem" },
+  lg: { group: "gap-2.5", box: "text-lg", width: "3rem" },
+} as const;
+
+// Grid columns rather than fixed widths, so the boxes shrink to fit a narrow
+// screen (8 boxes on a phone) but never grow past their size.
+const columns = computed(() =>
+  boxes.value
+    .map(
+      (box) =>
+        `${box.separated ? "auto " : ""}minmax(0, ${sizes[props.size].width})`,
+    )
+    .join(" "),
+);
+
+const boxClasses = (active: boolean) =>
+  cn(
+    "flex aspect-square min-h-0 w-full items-center justify-center rounded-control border border-border bg-surface leading-none font-medium " +
+      "transition-[border-color,box-shadow]",
+    sizes[props.size].box,
+    props.error && "border-danger",
+    active &&
+      (props.error
+        ? "ring-3 ring-danger/30"
+        : "border-primary ring-3 ring-primary/35"),
+    !active &&
+      !props.error &&
+      !props.disabled &&
+      "group-hover:border-border-strong",
+    props.disabled && "bg-muted",
+  );
+
+const inputEl = useTemplateRef<HTMLInputElement>("input");
+
+const clean = (text: string) => {
+  const chars = text.replace(/\s/g, "");
+  return (props.numeric ? chars.replace(/\D/g, "") : chars).slice(
+    0,
+    props.length,
+  );
+};
+
+// The caret stays after the last character, so typing fills the next box and
+// Backspace clears the last one. Select-all is kept so the code can be replaced.
+const syncCaret = () => {
+  const el = inputEl.value;
+  if (!el) return;
+  const end = el.value.length;
+  allSelected.value =
+    end > 0 && el.selectionStart === 0 && el.selectionEnd === end;
+  if (
+    !allSelected.value &&
+    (el.selectionStart !== end || el.selectionEnd !== end)
+  ) {
+    el.setSelectionRange(end, end);
+  }
+};
+
+const setCode = (el: HTMLInputElement, code: string) => {
+  // Written back directly: if a filtered character left the model unchanged,
+  // Vue wouldn't re-render and the character would stay in the field.
+  el.value = code;
+  model.value = code;
+  syncCaret();
+  if (code.length === props.length) emit("complete", code);
+};
+
+const onInput = (event: Event) => {
+  const el = event.target as HTMLInputElement;
+  setCode(el, clean(el.value));
+};
+
+// A paste replaces the whole code, minus any spaces or dashes ("123-456").
+const onPaste = (event: ClipboardEvent) => {
+  event.preventDefault();
+  const code = clean(
+    (event.clipboardData?.getData("text") ?? "").replace(/-/g, ""),
+  );
+  if (code) setCode(event.target as HTMLInputElement, code);
+};
+
+const onFocus = () => {
+  focused.value = true;
+  syncCaret();
+};
+
+const onBlur = () => {
+  focused.value = false;
+  allSelected.value = false;
+};
+
+watch(
+  () => [props.length, props.numeric],
+  () => {
+    const code = clean(model.value);
+    if (code !== model.value) model.value = code;
+  },
+);
+
+defineExpose({
+  focus: () => inputEl.value?.focus(),
+  el: inputEl,
+});
+</script>

package/app/components/ProgressBar.vue

@@ -0,0 +1,122 @@
+<template>
+  <div
+    :class="cn('flex flex-col gap-1.5 text-foreground', attrs.class as string)"
+  >
+    <div
+      v-if="label || valueShown"
+      class="flex items-baseline justify-between gap-4 text-sm"
+    >
+      <span v-if="label" :id="labelId" class="font-semibold">{{ label }}</span>
+      <!-- Hidden from screen readers, which announce aria-valuenow instead. -->
+      <span
+        v-if="valueShown"
+        class="ml-auto text-muted-foreground tabular-nums"
+        aria-hidden="true"
+      >
+        {{ Math.round(percent) }}%
+      </span>
+    </div>
+
+    <div
+      v-bind="barAttrs"
+      role="progressbar"
+      aria-valuemin="0"
+      :aria-valuemax="max"
+      :aria-valuenow="indeterminate ? undefined : clamped"
+      :aria-labelledby="label ? labelId : undefined"
+      :class="
+        cn(
+          'relative w-full overflow-hidden bg-foreground/10',
+          sizes[size],
+          rounded ? 'rounded-full' : 'rounded-none',
+        )
+      "
+    >
+      <div :class="fillClasses" :style="fillStyle" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId } from "vue";
+import { cn } from "../lib/cn";
+
+export interface ProgressBarProps {
+  value?: number;
+  max?: number;
+  indeterminate?: boolean;
+  showValue?: boolean;
+  striped?: boolean;
+  /** A theme colour, or any CSS colour such as "#f472b6". */
+  color?: "primary" | "danger" | (string & {});
+  rounded?: boolean;
+  size?: "sm" | "md" | "lg";
+  label?: string;
+}
+
+const props = withDefaults(defineProps<ProgressBarProps>(), {
+  value: 0,
+  max: 100,
+  indeterminate: false,
+  showValue: false,
+  striped: false,
+  color: "primary",
+  rounded: true,
+  size: "md",
+});
+
+// `class` styles the outer wrapper; every other attribute
+// (aria-label, data-*) goes to the bar itself.
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const barAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const labelId = `ui-progress-${useId()}`;
+
+const max = computed(() => (props.max > 0 ? props.max : 100));
+const clamped = computed(() =>
+  Math.min(max.value, Math.max(0, props.value)),
+);
+const percent = computed(() => (clamped.value / max.value) * 100);
+const valueShown = computed(() => props.showValue && !props.indeterminate);
+
+const sizes = {
+  sm: "h-1.5",
+  md: "h-2.5",
+  lg: "h-4",
+} as const;
+
+const colors = {
+  primary: "bg-primary",
+  danger: "bg-danger",
+} as const;
+
+const themeColor = computed(() =>
+  props.color in colors ? colors[props.color as keyof typeof colors] : null,
+);
+
+const stripes =
+  "bg-[linear-gradient(45deg,rgb(255_255_255/0.2)_25%,transparent_25%,transparent_50%,rgb(255_255_255/0.2)_50%,rgb(255_255_255/0.2)_75%,transparent_75%,transparent)] " +
+  "bg-[length:1rem_1rem]";
+
+// With reduced motion, an indeterminate bar pulses in place instead of sliding.
+const fillClasses = computed(() =>
+  cn(
+    "h-full",
+    props.rounded ? "rounded-full" : "rounded-none",
+    props.indeterminate
+      ? "absolute inset-y-0 left-0 w-2/5 animate-progress-indeterminate motion-reduce:w-full motion-reduce:animate-pulse"
+      : "transition-[width] duration-300 ease-out motion-reduce:transition-none",
+    themeColor.value,
+    props.striped && stripes,
+  ),
+);
+
+const fillStyle = computed(() => ({
+  width: props.indeterminate ? undefined : `${percent.value}%`,
+  backgroundColor: themeColor.value ? undefined : props.color,
+}));
+</script>