@tunji_xy/ui 0.0.0-stage → 0.10.0

package/app/components/Switch.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    :class="cn('flex flex-col gap-1 text-foreground', attrs.class as string)"
+  >
+    <div
+      :class="
+        cn(
+          'flex items-start',
+          sizes[size].row,
+          disabled && 'cursor-not-allowed opacity-60',
+        )
+      "
+    >
+      <span class="relative flex h-lh shrink-0 items-center">
+        <input
+          :id="inputId"
+          ref="input"
+          v-model="model"
+          v-bind="inputAttrs"
+          type="checkbox"
+          role="switch"
+          :class="trackClasses"
+          :name="name"
+          :disabled="disabled"
+          :required="required"
+          :aria-describedby="message ? messageId : undefined"
+        />
+        <span
+          :class="
+            cn(
+              'pointer-events-none absolute inset-y-0 left-0.5 my-auto rounded-full bg-white shadow-sm ' +
+                'transition-transform motion-reduce:transition-none ' +
+                'forced-color-adjust-none forced-colors:bg-[CanvasText]',
+              sizes[size].thumb,
+            )
+          "
+          aria-hidden="true"
+        />
+      </span>
+
+      <label
+        v-if="label || $slots.default"
+        :for="inputId"
+        :class="
+          cn('select-none', disabled ? 'cursor-not-allowed' : 'cursor-pointer')
+        "
+      >
+        <slot>{{ label }}</slot>
+      </label>
+    </div>
+
+    <p
+      v-if="message"
+      :id="messageId"
+      :class="cn('text-sm', sizes[size].message, 'text-muted-foreground')"
+    >
+      {{ message }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs, useId, useTemplateRef } from "vue";
+import { cn } from "../lib/cn";
+
+export interface SwitchProps {
+  label?: string;
+  hint?: string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  name?: string;
+}
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  size: "md",
+});
+
+const model = defineModel<boolean>({ default: false });
+
+defineSlots<{
+  /** Label content, when it needs more than plain text (e.g. a link). */
+  default?: () => unknown;
+}>();
+
+// `class` styles the outer wrapper; every other attribute and listener
+// (@change, @focus, aria-label, 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-switch-${autoId}`);
+const messageId = computed(() => `${inputId.value}-message`);
+const message = computed(() => props.hint);
+
+// The thumb sits 2px inside the track and slides by (track - thumb - 4px) when on.
+// `message` lines the hint up with the label (track width + gap).
+const sizes = {
+  sm: {
+    row: "gap-2 text-sm",
+    track: "h-4 w-7",
+    thumb: "size-3 peer-checked:translate-x-3",
+    message: "pl-9",
+  },
+  md: {
+    row: "gap-2 text-sm",
+    track: "h-5 w-9",
+    thumb: "size-4 peer-checked:translate-x-4",
+    message: "pl-11",
+  },
+  lg: {
+    row: "gap-3 text-base",
+    track: "h-6 w-11",
+    thumb: "size-5 peer-checked:translate-x-5",
+    message: "pl-14",
+  },
+} as const;
+
+const trackClasses = computed(() =>
+  cn(
+    "peer m-0 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-border-strong outline-none " +
+      "transition-[background-color,box-shadow] checked:bg-primary " +
+      "focus-visible:ring-3 disabled:cursor-not-allowed",
+    sizes[props.size].track,
+    "focus-visible:ring-primary/35",
+    !props.disabled && "checked:hover:bg-primary-hover",
+  ),
+);
+
+const inputEl = useTemplateRef<HTMLInputElement>("input");
+
+defineExpose({
+  focus: () => inputEl.value?.focus(),
+  el: inputEl,
+});
+</script>

package/app/components/Tabs.vue

@@ -0,0 +1,288 @@
+<template>
+  <div :class="cn('flex flex-col gap-4', attrs.class as string)">
+    <div
+      ref="list"
+      v-bind="listAttrs"
+      role="tablist"
+      :class="listClasses"
+      @keydown="onKeydown"
+    >
+      <span
+        v-if="rect"
+        :class="indicatorClasses"
+        :style="{
+          width: `${rect.width}px`,
+          transform: `translateX(${rect.left}px)`,
+        }"
+        aria-hidden="true"
+      />
+      <button
+        v-for="(item, index) in items"
+        :id="tabId(index)"
+        :key="item.value"
+        type="button"
+        role="tab"
+        :class="tabClasses(index)"
+        :disabled="item.disabled"
+        :tabindex="index === selectedIndex ? 0 : -1"
+        :aria-selected="index === selectedIndex"
+        :aria-controls="
+          index === selectedIndex && $slots[String(item.value)]
+            ? panelId
+            : undefined
+        "
+        @click="select(index)"
+      >
+        <span v-if="item.icon" class="inline-flex shrink-0 [&>svg]:size-4">
+          <TabIcon :icon="item.icon" />
+        </span>
+        <span>{{ item.label }}</span>
+        <span
+          v-if="item.badge != null"
+          :class="badgeClasses(index === selectedIndex)"
+        >
+          {{ item.badge }}
+        </span>
+      </button>
+    </div>
+
+    <div
+      v-if="selectedItem && $slots[String(selectedItem.value)]"
+      :id="panelId"
+      role="tabpanel"
+      tabindex="0"
+      :aria-labelledby="tabId(selectedIndex)"
+      class="rounded-control outline-none focus-visible:ring-3 focus-visible:ring-primary/35"
+    >
+      <slot :name="String(selectedItem.value)" :item="selectedItem" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useAttrs,
+  useId,
+  useTemplateRef,
+  watch,
+  type Component,
+  type FunctionalComponent,
+} from "vue";
+import { cn } from "../lib/cn";
+
+export interface TabItem {
+  value: string | number;
+  label: string;
+  icon?: string | Component;
+  badge?: string | number;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  variant?: "line" | "pill" | "segmented";
+  fullWidth?: boolean;
+}
+
+const props = withDefaults(defineProps<TabsProps>(), {
+  variant: "line",
+  fullWidth: false,
+});
+
+const model = defineModel<string | number>();
+
+defineSlots<{
+  /** A tab's panel. Name the slot after the tab's `value`, e.g. <template #inbox>. */
+  [value: string]: ((props: { item: TabItem }) => unknown) | undefined;
+}>();
+
+// `class` styles the outer wrapper; every other attribute
+// (aria-label, data-*) goes to the tablist.
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const listAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const baseId = `ui-tabs-${useId()}`;
+const tabId = (index: number) => `${baseId}-tab-${index}`;
+const panelId = `${baseId}-panel`;
+
+const enabled = computed(() =>
+  props.items.flatMap((item, index) => (item.disabled ? [] : [index])),
+);
+
+// With no v-model, or one that matches no tab, the first enabled tab is selected.
+const selectedIndex = computed(() => {
+  const index = props.items.findIndex((item) => item.value === model.value);
+  return index !== -1 ? index : (enabled.value[0] ?? -1);
+});
+const selectedItem = computed(() => props.items[selectedIndex.value]);
+
+const TabIcon: FunctionalComponent<{ icon: string | Component }> = ({
+  icon,
+}) => (typeof icon === "string" ? icon : h(icon));
+
+const listEl = useTemplateRef<HTMLDivElement>("list");
+const tabEls = () => [
+  ...(listEl.value?.querySelectorAll<HTMLButtonElement>(
+    ':scope > [role="tab"]',
+  ) ?? []),
+];
+
+function select(index: number) {
+  const item = props.items[index];
+  if (item && !item.disabled) model.value = item.value;
+}
+
+// Arrow keys move focus and select in one step, skipping disabled tabs.
+function onKeydown(event: KeyboardEvent) {
+  const tabs = tabEls();
+  const order = enabled.value;
+  const at = order.indexOf(tabs.indexOf(event.target as HTMLButtonElement));
+  const rtl =
+    getComputedStyle(event.currentTarget as Element).direction === "rtl";
+  let next: number | undefined;
+  switch (event.key) {
+    case rtl ? "ArrowLeft" : "ArrowRight":
+      next = order[(at + 1) % order.length];
+      break;
+    case rtl ? "ArrowRight" : "ArrowLeft":
+      next = order[(at - 1 + order.length) % order.length];
+      break;
+    case "Home":
+      next = order[0];
+      break;
+    case "End":
+      next = order.at(-1);
+      break;
+    default:
+      return;
+  }
+  event.preventDefault();
+  if (next === undefined) return;
+  select(next);
+  tabs[next]?.focus();
+}
+
+// Until the first measurement (and during SSR) there's no indicator, and the
+// selected tab wears its look directly, so hydration doesn't flash or slide.
+const rect = ref<{ left: number; width: number } | null>(null);
+const sliding = ref(false);
+
+function measure(slide: boolean) {
+  const tab = tabEls()[selectedIndex.value];
+  sliding.value = slide;
+  rect.value = tab ? { left: tab.offsetLeft, width: tab.offsetWidth } : null;
+}
+
+// Fonts loading, badge counts, a resized container or a hidden parent being
+// shown all move the tabs without a selection change. Only selecting slides.
+let observer: ResizeObserver | undefined;
+function observe() {
+  observer?.disconnect();
+  observer = new ResizeObserver(() => measure(false));
+  if (listEl.value) observer.observe(listEl.value);
+  for (const tab of tabEls()) observer.observe(tab);
+}
+
+onMounted(observe);
+onBeforeUnmount(() => observer?.disconnect());
+
+watch(selectedIndex, () => measure(true), { flush: "post" });
+watch(
+  () => [props.variant, props.fullWidth],
+  () => measure(false),
+  { flush: "post" },
+);
+// Tabs are keyed by value, so new values mean new elements to observe.
+watch(() => props.items.map((item) => item.value).join("\n"), observe, {
+  flush: "post",
+});
+
+// Box variants pad the list by 4px so focus rings aren't clipped by its
+// horizontal scrolling; `pill` has no background, so -m-1 cancels the inset.
+// Their indicators' transparent border is what Windows high-contrast mode
+// draws, since it drops backgrounds.
+const variants = {
+  line: {
+    list: "shadow-[inset_0_-1px_0_var(--color-border)]",
+    tab: "h-10 rounded-t-md px-3 focus-visible:ring-inset",
+    idle: "text-muted-foreground enabled:hover:text-foreground",
+    active: "text-foreground",
+    indicator: "bottom-0 border-b-2 border-primary",
+    fallback: "shadow-[inset_0_-2px_0_var(--color-primary)]",
+    badge: "bg-primary/10 text-primary",
+  },
+  pill: {
+    list: "-m-1 gap-1 p-1",
+    tab: "h-9 rounded px-4",
+    idle: "text-muted-foreground enabled:hover:bg-foreground/5 enabled:hover:text-foreground",
+    active: "text-primary-foreground",
+    indicator: "inset-y-1 rounded border border-transparent bg-primary",
+    fallback: "bg-primary",
+    badge: "bg-primary-foreground/20 text-primary-foreground",
+  },
+  segmented: {
+    list: "rounded-control bg-foreground/5 p-1",
+    // Inner radius = outer radius - padding, so the corners stay concentric.
+    tab: "h-8 rounded-[calc(var(--radius-control)_-_0.25rem)] px-3",
+    idle: "text-muted-foreground enabled:hover:text-foreground",
+    active: "text-foreground",
+    indicator:
+      "inset-y-1 rounded-[calc(var(--radius-control)_-_0.25rem)] border border-transparent bg-surface shadow-sm dark:bg-foreground/15",
+    fallback: "bg-surface shadow-sm dark:bg-foreground/15",
+    badge: "bg-primary/10 text-primary",
+  },
+} as const;
+
+const listClasses = computed(() =>
+  cn(
+    "relative flex overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+    variants[props.variant].list,
+    props.variant === "segmented" && !props.fullWidth && "w-fit max-w-full",
+  ),
+);
+
+const indicatorClasses = computed(() =>
+  cn(
+    "pointer-events-none absolute left-0",
+    variants[props.variant].indicator,
+    sliding.value &&
+      "transition-[transform,width] duration-300 ease-out motion-reduce:transition-none",
+  ),
+);
+
+const tabClasses = (index: number) => {
+  const variant = variants[props.variant];
+  const selected = index === selectedIndex.value;
+  return cn(
+    "relative inline-flex cursor-pointer items-center justify-center gap-2 text-sm font-medium whitespace-nowrap select-none outline-none " +
+      "transition-colors duration-300 focus-visible:ring-3 focus-visible:ring-primary/35 " +
+      "disabled:cursor-not-allowed disabled:opacity-50",
+    variant.tab,
+    props.fullWidth ? "flex-1" : "shrink-0",
+    selected ? variant.active : variant.idle,
+    selected && !rect.value && variant.fallback,
+  );
+};
+
+const badgeClasses = (selected: boolean) =>
+  cn(
+    "inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs leading-none font-semibold transition-colors duration-300",
+    selected
+      ? variants[props.variant].badge
+      : "bg-foreground/10 text-muted-foreground",
+  );
+
+defineExpose({
+  focus: () => tabEls()[selectedIndex.value]?.focus(),
+  el: listEl,
+});
+</script>

package/app/components/Textarea.vue

@@ -0,0 +1,188 @@
+<template>
+  <div
+    :class="cn('flex flex-col gap-1 text-foreground', attrs.class as string)"
+  >
+    <label v-if="label" :for="textareaId" class="text-sm font-semibold">
+      {{ label }}
+      <span v-if="required" class="ml-0.5 text-danger" aria-hidden="true"
+        >*</span
+      >
+    </label>
+
+    <!-- With autoresize, an invisible copy of the text sets the height of the
+         grid cell both share, and the textarea stretches to fill it. -->
+    <div class="grid grid-cols-1">
+      <textarea
+        :id="textareaId"
+        ref="textarea"
+        v-bind="textareaAttrs"
+        :class="textareaClasses"
+        :name="name"
+        :value="model ?? ''"
+        :rows="rows"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :required="required"
+        :autocomplete="autocomplete"
+        :aria-invalid="error ? true : undefined"
+        :aria-describedby="message ? messageId : undefined"
+        @input="onInput"
+        @blur="emit('blur', $event)"
+        @focus="emit('focus', $event)"
+      />
+      <span
+        v-if="autoresize"
+        :class="replicaClasses"
+        :style="{ maxHeight: maxRows ? `${maxRows}lh` : undefined }"
+        >{{ replica }}</span
+      >
+    </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, useAttrs, useId, useTemplateRef } from "vue";
+import { cn } from "../lib/cn";
+
+export interface TextareaProps {
+  label?: string;
+  placeholder?: string;
+  hint?: string;
+  error?: string;
+  variant?: "outline" | "filled" | "ghost";
+  size?: "sm" | "md" | "lg";
+  radius?: "none" | "sm" | "md" | "lg" | "full";
+  rows?: number;
+  autoresize?: boolean;
+  maxRows?: number;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  id?: string;
+  name?: string;
+  autocomplete?: string;
+}
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  variant: "outline",
+  size: "md",
+  rows: 3,
+  autoresize: false,
+});
+
+const model = defineModel<string | null>({ default: "" });
+
+const emit = defineEmits<{
+  blur: [event: FocusEvent];
+  focus: [event: FocusEvent];
+}>();
+
+// `class` styles the outer wrapper (e.g. class="w-96"); every other attribute
+// (maxlength, autofocus, spellcheck, data-*) goes to the <textarea> itself.
+defineOptions({ inheritAttrs: false });
+const attrs = useAttrs();
+const textareaAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+
+const autoId = useId();
+const textareaId = computed(() => props.id ?? `ui-textarea-${autoId}`);
+const messageId = computed(() => `${textareaId.value}-message`);
+const message = computed(() => props.error || props.hint);
+
+// The trailing space gives a final newline its own line, as the textarea does.
+// The placeholder stands in when empty, so a long one isn't cut off.
+const replica = computed(() => `${model.value || props.placeholder || ""} `);
+
+const variants = {
+  outline: "border border-border bg-surface focus:ring-3",
+  filled: "border border-transparent bg-foreground/5 focus:ring-3",
+  ghost: "rounded-none border-b border-border px-0 focus:shadow-[0_1px_0_0]",
+} as const;
+
+const hovers = {
+  outline: "hover:border-border-strong",
+  filled: "hover:bg-foreground/10",
+  // A clicked field is still under the pointer, so don't grey out its underline.
+  ghost: "hover:not-focus:border-border-strong",
+} as const;
+
+// The padding makes one row exactly as tall as a <UiInput> of the same size.
+const sizes = {
+  sm: "px-2 py-1.25 text-sm",
+  md: "px-3 py-2.25 text-base sm:text-sm",
+  lg: "px-4 py-2.75 text-base",
+} as const;
+
+// A pill shape would clip the corners of multi-line text, so `full` rounds
+// generously instead (still a pill while it's a single row).
+const radii = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-3xl",
+} as const;
+
+// Shared by the textarea and its invisible copy, so the text wraps identically.
+const controlClasses = computed(() =>
+  cn(
+    "col-start-1 row-start-1 block w-full min-w-0 rounded-control outline-none transition-[background-color,border-color,box-shadow]",
+    sizes[props.size],
+    props.radius && radii[props.radius],
+    // After the radius, so ghost stays square whatever `radius` says.
+    variants[props.variant],
+    props.error
+      ? "border-danger focus:ring-danger/30 focus:shadow-danger"
+      : "focus:border-primary focus:ring-primary/35 focus:shadow-primary",
+    !props.error && !props.disabled && hovers[props.variant],
+    props.disabled && "cursor-not-allowed opacity-60",
+    props.disabled && props.variant !== "ghost" && "bg-muted",
+  ),
+);
+
+const textareaClasses = computed(() =>
+  cn(
+    controlClasses.value,
+    "placeholder:text-muted-foreground/80",
+    !props.autoresize
+      ? "resize-y"
+      : props.maxRows
+        ? "resize-none overflow-y-auto"
+        : "resize-none overflow-hidden",
+  ),
+);
+
+// content-box, so a `maxRows` cap in `lh` counts text lines, not padding.
+// w-auto: with content-box, w-full would add the padding on top and make the
+// copy wider than the textarea, so it would wrap onto fewer lines.
+const replicaClasses = computed(() =>
+  cn(
+    controlClasses.value,
+    "invisible box-content w-auto overflow-hidden break-words whitespace-pre-wrap",
+  ),
+);
+
+const textareaEl = useTemplateRef<HTMLTextAreaElement>("textarea");
+
+const onInput = (event: Event) => {
+  model.value = (event.target as HTMLTextAreaElement).value;
+};
+
+defineExpose({
+  focus: () => textareaEl.value?.focus(),
+  select: () => textareaEl.value?.select(),
+  el: textareaEl,
+});
+</script>