@celestia-island/hikari 0.32.2 → 0.32.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.32.2",
+  "version": "0.32.3",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",
@@ -32,7 +32,6 @@
       "import": "./src/styles/index.scss"
     },
     "./styles/*": "./src/styles/*",
-    "./theme/*": "./src/theme/*",
     "./components/*": "./src/components/*",
     "./plugins": {
       "import": "./src/plugins/index.ts",

package/src/components/HkPhoneInput.scss

@@ -0,0 +1,140 @@
+.hk-phone-input {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* The dial-code chip riding the field's LEFT edge — flag glyph + "+86"
+ * + caret, mirroring the language-tag chip pattern of HkLocalizedInput
+ * (which rides the right edge). A button so it is focusable and
+ * AT-reachable; mousedown is suppressed in TSX so clicking it never
+ * steals focus from the number field before the menu opens. */
+.hk-phone-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  max-width: 11rem;
+  padding: 2px 6px 2px 4px;
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-text));
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+
+  &:hover:not(:disabled),
+  &:focus-visible:not(:disabled) {
+    background: rgb(var(--color-primary) / 14%);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.6;
+  }
+}
+
+.hk-phone-chip-flag {
+  flex: none;
+  font-size: calc(var(--text-sm, 14px) * 1.05);
+  line-height: 1;
+  /* Windows has no color flag font — the regional-indicator letters it
+   * substitutes are tiny; nudge them to the visible size. */
+  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
+    sans-serif;
+}
+
+.hk-phone-chip-dial {
+  font-weight: 600;
+  font-size: var(--text-sm, 14px);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.hk-phone-chip-caret {
+  flex: none;
+  color: rgb(var(--color-muted));
+}
+
+/* ── country list (menu) ────────────────────────────────────────────
+ * The search box caps the menu header; rows below it scroll inside the
+ * popup/sheet list surface (HkSelectPanel caps and scrolls the popout,
+ * and the mobile sheet body scrolls natively). */
+.hk-phone-dial-search {
+  padding: 8px 10px 6px;
+}
+
+.hk-phone-dial-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  padding: 4px 6px 8px;
+  /* Roomier than the 2px HkMenu gutter so rows read as a picker. */
+  min-width: 13rem;
+  max-width: min(19rem, calc(100vw - 2rem));
+}
+
+.hk-phone-dial-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 2.25rem;
+  padding: 4px 8px;
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-text));
+  font-size: var(--text-sm, 14px);
+  text-align: left;
+  cursor: pointer;
+  appearance: none;
+  transition: background 0.1s ease;
+
+  &:hover,
+  &:focus-visible {
+    background: rgb(var(--color-primary) / 10%);
+    outline: none;
+  }
+
+  &[data-active] {
+    background: rgb(var(--color-primary) / 16%);
+    font-weight: 600;
+  }
+}
+
+.hk-phone-dial-flag {
+  flex: none;
+  font-size: calc(var(--text-base, 15px) * 1.05);
+  line-height: 1;
+  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji",
+    sans-serif;
+}
+
+.hk-phone-dial-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hk-phone-dial-code {
+  flex: none;
+  color: rgb(var(--color-muted));
+  font-size: calc(var(--text-sm, 14px) * 0.9);
+  font-variant-numeric: tabular-nums;
+}
+
+.hk-phone-dial-empty {
+  padding: 14px 12px;
+  color: rgb(var(--color-muted));
+  font-size: var(--text-sm, 14px);
+  text-align: center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-phone-chip,
+  .hk-phone-dial-row {
+    transition: none;
+  }
+}

package/src/components/HkPhoneInput.test.tsx

@@ -0,0 +1,133 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import { HkPhoneInput } from "./HkPhoneInput";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+interface MountOptions {
+  modelValue?: string;
+  dialCode?: string;
+  disabled?: boolean;
+}
+
+function mountPhone(opts: MountOptions = {}) {
+  const events = {
+    modelValue: [] as string[],
+    dialCode: [] as string[],
+    dialchange: [] as string[],
+    change: [] as string[],
+  };
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () =>
+      h(HkPhoneInput, {
+        modelValue: opts.modelValue ?? "",
+        dialCode: opts.dialCode ?? "+86",
+        disabled: opts.disabled ?? false,
+        "onUpdate:modelValue": (v: string) => {
+          events.modelValue.push(v);
+        },
+        "onUpdate:dialCode": (v: string) => {
+          events.dialCode.push(v);
+        },
+        onDialchange: (v: string) => {
+          events.dialchange.push(v);
+        },
+        onChange: (v: string) => {
+          events.change.push(v);
+        },
+      }),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return { events, container };
+}
+
+afterEach(() => {
+  while (mounts.length > 0) {
+    const { app, container } = mounts.pop()!;
+    app.unmount();
+    container.remove();
+  }
+});
+
+function queryChip(container: HTMLElement): HTMLButtonElement {
+  const chip = container.querySelector<HTMLButtonElement>(".hk-phone-chip");
+  expect(chip, "dial-code chip renders inside the field").toBeTruthy();
+  return chip!;
+}
+
+function queryField(container: HTMLElement): HTMLInputElement {
+  const field = container.querySelector<HTMLInputElement>(".hk-input-element");
+  expect(field).toBeTruthy();
+  return field!;
+}
+
+async function openPicker(container: HTMLElement) {
+  queryChip(container).click();
+  await nextTick();
+  await nextTick();
+}
+
+function pickerRows(): HTMLElement[] {
+  return [...document.querySelectorAll<HTMLButtonElement>(".hk-phone-dial-row")];
+}
+
+describe("HkPhoneInput", () => {
+  it("renders the dial chip with the canonical code", () => {
+    const { container } = mountPhone({ dialCode: "86" });
+    expect(queryChip(container).querySelector(".hk-phone-chip-dial")?.textContent).toBe("+86");
+    expect(queryField(container).getAttribute("inputmode")).toBe("tel");
+  });
+
+  it("shows a bare code when the dial matches no catalog entry", () => {
+    const { container } = mountPhone({ dialCode: "+999" });
+    expect(queryChip(container).querySelector(".hk-phone-chip-dial")?.textContent).toBe("+999");
+  });
+
+  it("sanitizes typed numbers to digits, spaces and dashes", () => {
+    const { container, events } = mountPhone();
+    const field = queryField(container);
+    field.value = "138 1234-5678x+86";
+    field.dispatchEvent(new Event("input"));
+    expect(events.modelValue.at(-1)).toBe("138 1234-567886");
+  });
+
+  it("emits the composed E.164 on blur", () => {
+    const { container, events } = mountPhone({ modelValue: "13812345678" });
+    queryField(container).dispatchEvent(new Event("blur"));
+    expect(events.change.at(-1)).toBe("+8613812345678");
+  });
+
+  it("lists catalog rows with flags and codes when opened", async () => {
+    const { container } = mountPhone();
+    await openPicker(container);
+    const rows = pickerRows();
+    expect(rows.length).toBeGreaterThan(50);
+    const first = rows[0];
+    expect(first.textContent).toContain("China");
+    expect(first.textContent).toContain("+86");
+  });
+
+  it("picks a country from the list and refocuses the number field", async () => {
+    const { container, events } = mountPhone();
+    await openPicker(container);
+    const rows = pickerRows();
+    const japan = rows.find((r) => r.textContent?.includes("Japan"))!;
+    expect(japan).toBeTruthy();
+    japan.click();
+    await nextTick();
+    expect(events.dialCode.at(-1)).toBe("+81");
+    expect(events.dialchange.at(-1)).toBe("+81");
+    // The picker plays its leave transition, then unmounts.
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    expect(pickerRows()).toHaveLength(0);
+  });
+
+  it("disables the chip when the field is disabled", () => {
+    const { container } = mountPhone({ disabled: true });
+    expect(queryChip(container).disabled).toBe(true);
+  });
+});

package/src/components/HkPhoneInput.tsx

@@ -0,0 +1,310 @@
+import { computed, defineComponent, nextTick, ref, useAttrs, watch, type PropType } from "vue";
+
+import { ChevronDown, Search } from "lucide-vue-next";
+
+import { useI18n } from "../i18n/context";
+
+import {
+  DIAL_CODES,
+  dialCodeName,
+  flagEmoji,
+  formatE164,
+  normalizeDial,
+  resolveDial,
+  type DialCodeEntry,
+} from "../data/dialCodes";
+
+import HkInput from "./HkInput";
+import HkMenu from "./HkMenu";
+import "./HkPhoneInput.scss";
+
+/**
+ * HkPhoneInput — phone-number field with a country dial-code picker.
+ *
+ * Mirrors the language-tag chip pattern of HkLocalizedInput but for
+ * dial codes: a leading chip inside the field (flag glyph + "+86" +
+ * caret) opens a searchable country list. The chip rides the LEFT edge
+ * of the field — the natural reading order for "which country, then
+ * which number" — while the number itself is typed after it.
+ *
+ *   - `modelValue` is the NATIONAL number only ("13812345678"); the
+ *     country selection lives in `dialCode` ("+86" shape, normalized on
+ *     emit). Splitting the two keeps callers free to store whatever
+ *     they already store (a bare "86" works too — matched by dial).
+ *   - The chip shows the resolved country's flag plus the dial code in
+ *     canonical "+…" shape. Unknown dial codes fall back to showing
+ *     the normalized code alone (no flag).
+ *   - The picker menu (`HkMenu`, desktop popout + mobile bottom sheet)
+ *     lists the catalog in its defined order, flag + localized name +
+ *     dial code per row, with a live filter field on top. Filtering
+ *     matches the country's English/Chinese name, its ISO code, and
+ *     the bare dial digits ("86", "0086" or "86" both hit China).
+ *   - Picking a row emits `update:dialCode` ("+…"), `dialchange`
+ *     (same value) and refocuses the number field. Blurring the field
+ *     emits `change` with the composed E.164 — use it to validate or
+ *     submit without recomputing `formatE164` yourself.
+ *
+ * The number input sanitizes itself: only digits, spaces and dashes
+ * survive (pasted "+86 138-1234-5678" becomes "138 1234-5678"), and
+ * `inputmode="tel"` raises the dial pad on touch devices. The
+ * catalog defaults to the bundled dictionary (China first); pass
+ * `countries` to scope the list (e.g. mainland-only deployments).
+ */
+export const HkPhoneInput = defineComponent({
+  name: "HkPhoneInput",
+  // The root wrapper carries no meaningful semantics; DOM attributes
+  // (inputmode, maxlength, aria-*) belong on the inner input.
+  inheritAttrs: false,
+  props: {
+    /** National number only — never includes the dial code. */
+    modelValue: { type: String, default: "" },
+    /** Dial code in any shape: "+86", "86", "0086". Kept as given
+     *  (canonicalized only for matching), so v-model round-trips. */
+    dialCode: { type: String, default: "+86" },
+    /** Country catalog. Defaults to the bundled dictionary. */
+    countries: {
+      type: Array as PropType<readonly DialCodeEntry[]>,
+      default: () => DIAL_CODES,
+    },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    size: { type: String as PropType<"sm" | "md" | "lg">, default: "md" },
+    label: { type: String, default: undefined },
+    error: { type: String, default: undefined },
+    hint: { type: String, default: undefined },
+    required: { type: Boolean, default: false },
+    name: { type: String, default: undefined },
+    /** Fired when Enter is pressed inside the number field (form
+     *  submit). Forwarded to the inner HkInput. */
+    submitOnEnter: { type: Function, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_value: string) => true,
+    "update:dialCode": (_dial: string) => true,
+    /** Country picked from the list — payload "+86" shape. */
+    dialchange: (_dial: string) => true,
+    /** Field blurred — payload the composed E.164 ("" when empty). */
+    change: (_e164: string) => true,
+    focus: (_e: FocusEvent) => true,
+    blur: (_e: FocusEvent) => true,
+  },
+  setup(props, { emit }) {
+    const { t, locale } = useI18n();
+    const attrs = useAttrs();
+
+    const menuOpen = ref(false);
+    const chipRef = ref<HTMLElement | null>(null);
+    const rootRef = ref<HTMLElement | null>(null);
+    const query = ref("");
+
+    // A fresh open starts with an empty filter.
+    watch(menuOpen, (open) => {
+      if (!open) query.value = "";
+    });
+
+    /** Canonical "+86" derived from the prop, whatever shape it is in. */
+    const canonicalDial = computed(() => {
+      const bare = normalizeDial(props.dialCode);
+      return bare ? `+${bare}` : "";
+    });
+
+    /** The country the current dial code resolves to (first catalog
+     *  match for shared prefixes like +1). */
+    const activeEntry = computed(() =>
+      resolveDial(props.dialCode, undefined, props.countries),
+    );
+
+    /** Searchable rows: filter against en/zh names, ISO code, dial. */
+    const filteredRows = computed(() => {
+      const q = query.value.trim().toLowerCase();
+      const qDial = q.replace(/\D/g, "");
+      if (!q) return props.countries;
+      return props.countries.filter((c) => {
+        if (c.iso.toLowerCase().includes(q)) return true;
+        if (qDial && c.dial.includes(qDial)) return true;
+        return (
+          c.en.toLowerCase().includes(q) ||
+          c.zh.toLowerCase().includes(q)
+        );
+      });
+    });
+
+    function pickCountry(entry: DialCodeEntry) {
+      const dial = `+${entry.dial}`;
+      menuOpen.value = false;
+      emit("update:dialCode", dial);
+      emit("dialchange", dial);
+      // Refocus the number field so pick-then-type flows without a
+      // second tap (the chip's menu is the only focusable sibling).
+      nextTick(() => {
+        const el = rootRef.value?.querySelector<HTMLElement>("input");
+        el?.focus();
+      });
+    }
+
+    /** Emit the composed E.164 on blur ("" when the number is empty). */
+    function onBlur(e: FocusEvent) {
+      emit("blur", e);
+      emit("change", formatE164(canonicalDial.value, props.modelValue));
+    }
+
+    function onInput(value: string) {
+      // Digits, spaces and dashes only; everything else (plus signs,
+      // parentheses, stray letters from a paste) drops out.
+      const cleaned = value.replace(/[^\d\s-]/g, "");
+      emit("update:modelValue", cleaned);
+    }
+
+    function chipLabel(): string {
+      const bare = normalizeDial(props.dialCode);
+      return bare ? `+${bare}` : t("hikari::phoneInput.dialCode", "+…");
+    }
+
+    return () => {
+      const rows = filteredRows.value;
+      const active = activeEntry.value;
+      const nameFor = (entry: DialCodeEntry) =>
+        dialCodeName(entry, locale);
+      const inputAttrs = {
+        inputmode: "tel" as const,
+        maxlength: 18,
+        ...attrs,
+      };
+      delete (inputAttrs as Record<string, unknown>).class;
+      delete (inputAttrs as Record<string, unknown>).style;
+      return (
+        <div class="hk-phone-input" ref={rootRef}>
+          <HkInput
+            modelValue={props.modelValue}
+            onUpdate:modelValue={onInput}
+            placeholder={props.placeholder}
+            disabled={props.disabled}
+            readonly={props.readonly}
+            size={props.size}
+            label={props.label}
+            error={props.error}
+            hint={props.hint}
+            required={props.required}
+            name={props.name}
+            onBlur={onBlur}
+            autocomplete="tel-national"
+            submitOnEnter={props.submitOnEnter}
+            {...inputAttrs}
+          >
+            {{
+              prefix: () => (
+                <button
+                  ref={(el: unknown) => {
+                    chipRef.value = (el as HTMLElement) ?? null;
+                  }}
+                  type="button"
+                  class="hk-phone-chip"
+                  disabled={props.disabled || props.readonly}
+                  aria-haspopup="menu"
+                  aria-expanded={menuOpen.value}
+                  aria-label={t(
+                    "hikari::phoneInput.chooseCountry",
+                    "Choose country code",
+                  )}
+                  title={active ? `${nameFor(active)} ${chipLabel()}` : chipLabel()}
+                  onMousedown={(e: MouseEvent) => e.preventDefault()}
+                  onClick={(e: MouseEvent) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!props.disabled && !props.readonly) {
+                      menuOpen.value = !menuOpen.value;
+                    }
+                  }}
+                >
+                  <span class="hk-phone-chip-flag" aria-hidden="true">
+                    {active ? flagEmoji(active.iso) : ""}
+                  </span>
+                  <span class="hk-phone-chip-dial">{chipLabel()}</span>
+                  <ChevronDown size={12} class="hk-phone-chip-caret" aria-hidden="true" />
+                </button>
+              ),
+            }}
+          </HkInput>
+          <HkMenu
+            variant="popup"
+            items={[]}
+            open={menuOpen.value}
+            onUpdate:open={(v: boolean) => {
+              menuOpen.value = v;
+            }}
+            anchorRef={chipRef.value}
+            placement="bottom-start"
+            matchAnchorWidth={false}
+            title={t("hikari::phoneInput.chooseCountry", "Choose country code")}
+          >
+            {{
+              header: () => (
+                <div class="hk-phone-dial-search" role="search">
+                  <HkInput
+                    modelValue={query.value}
+                    onUpdate:modelValue={(v: string) => {
+                      query.value = v;
+                    }}
+                    size="sm"
+                    placeholder={t(
+                      "hikari::phoneInput.searchCountries",
+                      "Search country or code",
+                    )}
+                    aria-label={t(
+                      "hikari::phoneInput.searchCountries",
+                      "Search country or code",
+                    )}
+                    autocomplete="off"
+                    onKeydown={(e: KeyboardEvent) => {
+                      // Enter picks the first filtered row.
+                      if (e.key === "Enter" && !e.isComposing && rows.length > 0) {
+                        e.preventDefault();
+                        pickCountry(rows[0]);
+                      }
+                    }}
+                  >
+                    {{
+                      prefixIcon: () => (
+                        <Search size={13} aria-hidden="true" />
+                      ),
+                    }}
+                  </HkInput>
+                </div>
+              ),
+              default: () =>
+                rows.length > 0 ? (
+                  <div class="hk-phone-dial-list">
+                    {rows.map((entry) => {
+                      const selected = entry.iso === active?.iso;
+                      return (
+                        <button
+                          key={entry.iso}
+                          type="button"
+                          class="hk-phone-dial-row"
+                          data-active={selected || undefined}
+                          onClick={() => pickCountry(entry)}
+                        >
+                          <span class="hk-phone-dial-flag" aria-hidden="true">
+                            {flagEmoji(entry.iso)}
+                          </span>
+                          <span class="hk-phone-dial-name">{nameFor(entry)}</span>
+                          <span class="hk-phone-dial-code">+{entry.dial}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <div class="hk-phone-dial-empty">
+                    {t("hikari::phoneInput.noMatches", "No matching country")}
+                  </div>
+                ),
+            }}
+          </HkMenu>
+        </div>
+      );
+    };
+  },
+});
+
+export default HkPhoneInput;

package/src/components/HkQrCode.scss

@@ -0,0 +1,23 @@
+.hk-qr-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-6, 6px);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.hk-qr-canvas {
+  display: block;
+  border-radius: var(--radius-sm, 4px);
+  // Always a white backing so the QR stays scannable regardless of theme.
+  background: #ffffff;
+  box-shadow: 0 1px 6px rgb(0 0 0 / 0.08);
+}
+
+.hk-qr-label {
+  font-size: var(--text-2xs, 0.75rem);
+  line-height: 1.4;
+  color: rgb(var(--color-muted, 120 113 108));
+  text-align: center;
+}

package/src/components/HkQrCode.test.tsx

@@ -0,0 +1,66 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+import { HkQrCode } from "./HkQrCode";
+
+const OTPAUTH =
+  "otpauth://totp/Example:langyo%40example.com?secret=JBSWY3DPEHPK3PXP&issuer=Example";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountQr(props: Record<string, unknown> = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({
+    render: () => h(HkQrCode, props),
+  });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  while (mounts.length > 0) {
+    const { app, container } = mounts.pop()!;
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkQrCode", () => {
+  it("renders a labeled canvas for a value", async () => {
+    const container = mountQr({ value: OTPAUTH });
+    await nextTick();
+    const canvas = container.querySelector("canvas.hk-qr-canvas");
+    expect(canvas).toBeTruthy();
+    expect(canvas!.getAttribute("role")).toBe("img");
+    expect(canvas!.getAttribute("aria-label")).toBe("QR code");
+    expect((canvas as HTMLElement).style.width).toBe("168px");
+  });
+
+  it("shows the caption label under the QR", async () => {
+    const container = mountQr({ value: OTPAUTH, label: "Scan with your app" });
+    await nextTick();
+    expect(container.querySelector(".hk-qr-label")?.textContent).toBe(
+      "Scan with your app",
+    );
+    // The aria-label falls back to the caption.
+    expect(container.querySelector("canvas")?.getAttribute("aria-label")).toBe(
+      "Scan with your app",
+    );
+  });
+
+  it("renders nothing for an empty value", async () => {
+    const container = mountQr({ value: "" });
+    await nextTick();
+    expect(container.querySelector("canvas")).toBeNull();
+    expect(container.querySelector(".hk-qr-card")?.getAttribute("data-empty")).toBe("true");
+  });
+
+  it("re-encodes when the value changes", async () => {
+    const container = mountQr({ value: OTPAUTH, size: 200 });
+    await nextTick();
+    const canvas = container.querySelector("canvas") as HTMLCanvasElement;
+    expect((canvas.style.width)).toBe("200px");
+  });
+});