@celestia-island/hikari 0.4.4

package/src/components/HkSearchInput.scss

@@ -0,0 +1,132 @@
+.hk-search-input {
+  display: flex;
+  align-items: center;
+  background: var(--hi-color-surface);
+  border: 1px solid var(--hi-color-border);
+  border-radius: var(--hi-radius-md, 6px);
+  overflow: hidden;
+  transition:
+    background-color var(--hi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
+    border-color var(--hi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1)),
+    box-shadow var(--hi-transition-base, 200ms cubic-bezier(0.4, 0, 0.2, 1));
+
+  &:hover {
+    border-color: var(--hi-color-primary);
+  }
+
+  &:focus-within {
+    border-color: var(--hi-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary) 12%, transparent);
+  }
+
+  &-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.hk-search-input-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding-left: 0.75rem;
+  color: var(--hi-color-muted);
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.hk-search-input-field {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--hi-color-text-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0 0.5rem;
+
+  &::placeholder {
+    color: var(--hi-color-muted);
+    opacity: 0.6;
+  }
+
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+}
+
+.hk-search-input-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1.75rem;
+  height: 100%;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: var(--hi-color-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--hi-duration-fast, 0.15s) ease,
+    color var(--hi-duration-fast, 0.15s) ease;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  &:hover {
+    background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
+    color: var(--hi-color-text-primary);
+  }
+}
+
+/* --- Size variants --- */
+
+.hk-search-input-sm .hk-search-input-field {
+  font-size: 0.75rem;
+  height: 1.75rem;
+}
+
+.hk-search-input-sm .hk-search-input-icon {
+  padding-left: 0.5rem;
+
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.hk-search-input-md .hk-search-input-field {
+  font-size: 0.875rem;
+  height: 2.25rem;
+}
+
+.hk-search-input-lg .hk-search-input-field {
+  font-size: 1rem;
+  height: 2.75rem;
+}
+
+.hk-search-input-lg .hk-search-input-icon {
+  padding-left: 1rem;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.hk-search-input-lg .hk-search-input-clear svg {
+  width: 16px;
+  height: 16px;
+}

package/src/components/HkSearchInput.tsx

@@ -0,0 +1,117 @@
+import { defineComponent, onUnmounted, ref, watch, type PropType } from "vue";
+import { useI18n } from "../i18n/context";
+import "./HkSearchInput.scss";
+
+const searchIcon = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const clearIcon = (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+export default defineComponent({
+  name: "HkSearchInput",
+  props: {
+    modelValue: { type: String, default: "" },
+    placeholder: { type: String, default: "Search..." },
+    disabled: { type: Boolean, default: false },
+    size: {
+      type: String as PropType<"sm" | "md" | "lg">,
+      default: "md",
+    },
+    debounce: { type: Number, default: 0 },
+    clearAriaLabel: { type: String, default: "" },
+  },
+  emits: {
+    "update:modelValue": (_value: string) => true,
+    search: (_value: string) => true,
+    clear: () => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    const inputRef = ref<HTMLInputElement | null>(null);
+    let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function flushSearch(val: string) {
+      emit("search", val);
+    }
+
+    function debouncedSearch(val: string) {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      if (props.debounce > 0) {
+        debounceTimer = setTimeout(() => flushSearch(val), props.debounce);
+      } else {
+        flushSearch(val);
+      }
+    }
+
+    watch(
+      () => props.modelValue,
+      (val) => {
+        debouncedSearch(val);
+      },
+    );
+
+    onUnmounted(() => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+    });
+
+    function onInput(e: Event) {
+      const val = (e.target as HTMLInputElement).value;
+      emit("update:modelValue", val);
+    }
+
+    function onKeydown(e: KeyboardEvent) {
+      if (e.key === "Enter") {
+        if (debounceTimer) clearTimeout(debounceTimer);
+        emit("search", (e.target as HTMLInputElement).value);
+      }
+    }
+
+    function clearValue() {
+      emit("update:modelValue", "");
+      emit("clear");
+      inputRef.value?.focus();
+    }
+
+    const wrapperClass = [
+      "hk-search-input",
+      `hk-search-input-${props.size}`,
+      props.disabled ? "hk-search-input-disabled" : "",
+    ];
+
+    return () => (
+      <div class={wrapperClass}>
+        <span class="hk-search-input-icon">{searchIcon}</span>
+        <input
+          ref={inputRef}
+          type="search"
+          class="hk-search-input-field"
+          value={props.modelValue}
+          placeholder={props.placeholder ?? "Search..."}
+          disabled={props.disabled}
+          onInput={onInput}
+          onKeydown={onKeydown}
+        />
+        {props.modelValue && !props.disabled ? (
+          <button
+            type="button"
+            class="hk-search-input-clear"
+            onClick={clearValue}
+            tabindex={-1}
+            aria-label={props.clearAriaLabel || t("hk.searchInput.clear", "Clear search")}
+          >
+            {clearIcon}
+          </button>
+        ) : null}
+      </div>
+    );
+  },
+});

package/src/components/HkSelect.scss

@@ -0,0 +1,143 @@
+@use "../tokens";
+
+/* HkSelect — popup select component */
+
+.hk-select-wrapper {
+  display: block;
+  width: 100%;
+}
+
+.hk-select-label {
+  display: block;
+  font-size: var(--text-base);
+  font-weight: 500;
+  margin-bottom: var(--space-6);
+  color: rgb(var(--color-text));
+}
+
+.hk-select-required {
+  margin-left: var(--space-2);
+  color: rgb(var(--color-error));
+}
+
+.hk-select-trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--space-8) var(--space-32) var(--space-8) var(--space-12);
+  min-height: 2.5rem;
+  background: rgb(var(--color-surface) / var(--opacity-half));
+  backdrop-filter: blur(var(--blur-sm));
+  border: 1px solid var(--border-input);
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-size: var(--text-base);
+  line-height: 1.5;
+  color: rgb(var(--color-text));
+  text-align: center;
+  cursor: pointer;
+  outline: none;
+  transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) var(--ease-standard);
+  position: relative;
+}
+
+.hk-select-trigger:hover:not([data-disabled]) {
+  border-color: var(--c-primary-strong);
+}
+
+.hk-select-trigger:focus,
+.hk-select-trigger[data-state="open"] {
+  border-color: rgb(var(--color-focused-border));
+  box-shadow: var(--shadow-focus);
+  background: rgb(var(--color-surface));
+}
+
+.hk-select-trigger[data-error] {
+  border-color: var(--c-error-strong);
+}
+
+.hk-select-trigger[data-error]:focus,
+.hk-select-trigger[data-error][data-state="open"] {
+  border-color: rgb(var(--color-error));
+  box-shadow: var(--shadow-focus-error);
+}
+
+.hk-select-trigger[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.hk-select-value {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hk-select-arrow {
+  position: absolute;
+  right: 0.75rem;
+  color: color-mix(in srgb, rgb(var(--color-muted)) 70%, rgb(var(--color-background)));
+  pointer-events: none;
+  flex-shrink: 0;
+  transition: transform var(--duration-normal) ease;
+}
+
+.hk-select-trigger[data-state="open"] .hk-select-arrow {
+  transform: rotate(180deg);
+}
+
+.hk-select-popout {
+  position: fixed;
+  z-index: 1100;
+  min-width: 180px;
+  max-height: 240px;
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-4);
+  border-radius: var(--radius-md);
+  overflow-y: auto;
+  background: rgb(var(--color-surface) / var(--opacity-half));
+  backdrop-filter: blur(var(--blur-md));
+  border: 1px solid var(--border-subtle);
+  box-shadow: var(--shadow-dropdown);
+}
+
+.hk-select-option {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+  padding: var(--space-10) var(--space-16);
+  font-size: var(--text-base);
+  color: rgb(var(--color-text));
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  outline: none;
+  transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) ease;
+  text-align: left;
+}
+
+.hk-select-option:hover,
+.hk-select-option[data-highlighted] {
+  background: var(--c-primary-subtle);
+  border-color: var(--c-primary-medium);
+}
+
+.hk-select-option[data-checked] {
+  background: var(--c-primary-dim);
+  border-color: var(--c-primary-strong);
+  color: rgb(var(--color-primary));
+  font-weight: 600;
+}
+
+.hk-select-option[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.hk-select-error {
+  margin-top: var(--space-4);
+  font-size: var(--text-xs);
+  color: rgb(var(--color-error));
+}

package/src/components/HkSelect.tsx

@@ -0,0 +1,230 @@
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  watch,
+  type PropType,
+  Teleport,
+} from "vue";
+import { ChevronDown, Search } from "lucide-vue-next";
+import "./HkSelect.scss";
+
+export interface HkSelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export default defineComponent({
+  name: "HkSelect",
+  props: {
+    modelValue: { type: String, default: "" },
+    label: { type: String, default: undefined },
+    placeholder: { type: String, default: "" },
+    error: { type: String, default: undefined },
+    disabled: { type: Boolean, default: false },
+    required: { type: Boolean, default: false },
+    options: {
+      type: Array as PropType<HkSelectOption[]>,
+      default: () => [] as HkSelectOption[],
+    },
+  },
+  emits: {
+    "update:modelValue": (_value: string) => true,
+  },
+  setup(props, { emit, slots }) {
+    const isOpen = ref(false);
+    const triggerRef = ref<HTMLElement>();
+    const panelRef = ref<HTMLElement>();
+    const highlightedIndex = ref(-1);
+
+    function onDocumentClick(e: MouseEvent) {
+      if (!isOpen.value) return;
+      const target = e.target as Node;
+      if (triggerRef.value?.contains(target)) return;
+      if (panelRef.value?.contains(target)) return;
+      isOpen.value = false;
+    }
+
+    watch(isOpen, (open) => {
+      if (open) {
+        document.addEventListener("click", onDocumentClick, true);
+      } else {
+        document.removeEventListener("click", onDocumentClick, true);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      document.removeEventListener("click", onDocumentClick, true);
+    });
+
+    const normalizedOptions = computed<HkSelectOption[]>(
+      () => props.options ?? [],
+    );
+
+    const displayLabel = computed(() => {
+      if (!props.modelValue) return props.placeholder || "";
+      const opt = normalizedOptions.value.find(
+        (o) => o.value === props.modelValue,
+      );
+      return opt?.label ?? props.modelValue;
+    });
+
+    function toggle() {
+      if (props.disabled) return;
+      isOpen.value = !isOpen.value;
+    }
+
+    function select(value: string) {
+      emit("update:modelValue", value);
+      isOpen.value = false;
+    }
+
+    function onTriggerKeydown(e: KeyboardEvent) {
+      if (props.disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!isOpen.value) {
+          isOpen.value = true;
+          highlightedIndex.value = 0;
+        } else {
+          highlightedIndex.value =
+            (highlightedIndex.value + 1) % normalizedOptions.value.length;
+        }
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!isOpen.value) {
+          isOpen.value = true;
+        } else {
+          highlightedIndex.value =
+            (highlightedIndex.value - 1 + normalizedOptions.value.length) %
+            normalizedOptions.value.length;
+        }
+      } else if (e.key === "Escape") {
+        isOpen.value = false;
+      }
+    }
+
+    function onPopoutKeydown(e: KeyboardEvent) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        highlightedIndex.value =
+          (highlightedIndex.value + 1) % normalizedOptions.value.length;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        highlightedIndex.value =
+          (highlightedIndex.value - 1 + normalizedOptions.value.length) %
+          normalizedOptions.value.length;
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const opt = normalizedOptions.value[highlightedIndex.value];
+        if (opt && !opt.disabled) {
+          select(opt.value);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        isOpen.value = false;
+      }
+    }
+
+    watch(isOpen, (open) => {
+      if (open) {
+        const idx = normalizedOptions.value.findIndex(
+          (o) => o.value === props.modelValue,
+        );
+        highlightedIndex.value = idx;
+        nextTick(() => {
+          scrollToHighlighted();
+        });
+      } else {
+        highlightedIndex.value = -1;
+      }
+    });
+
+    function scrollToHighlighted() {
+      const el = panelRef.value?.querySelector(
+        `[data-select-index="${highlightedIndex.value}"]`,
+      );
+      if (el) {
+        el.scrollIntoView({ block: "nearest" });
+      }
+    }
+
+    watch(highlightedIndex, () => {
+      scrollToHighlighted();
+    });
+
+    const triggerCoords = computed(() => {
+      if (!triggerRef.value) return {};
+      const rect = triggerRef.value.getBoundingClientRect();
+      return {
+        position: "fixed" as const,
+        top: `${rect.bottom + 4}px`,
+        left: `${rect.left}px`,
+        minWidth: `${rect.width}px`,
+      };
+    });
+
+    return () => (
+      <div class="hk-select-wrapper">
+        {props.label ? (
+          <label class="hk-select-label">
+            {props.label}
+            {props.required && <span class="hk-select-required">*</span>}
+          </label>
+        ) : null}
+        <button
+          ref={triggerRef}
+          type="button"
+          class="hk-select-trigger"
+          data-error={props.error || undefined}
+          data-disabled={props.disabled || undefined}
+          data-state={isOpen.value ? "open" : "closed"}
+          disabled={props.disabled}
+          onClick={toggle}
+          onKeydown={onTriggerKeydown}
+        >
+          <span class="hk-select-value">{displayLabel.value || props.placeholder}</span>
+          <ChevronDown size={16} class="hk-select-arrow" />
+        </button>
+        {isOpen.value && (
+          <Teleport to="body">
+            <div
+              ref={panelRef}
+              class="hk-select-popout"
+              style={triggerCoords.value}
+              onKeydown={onPopoutKeydown}
+            >
+              {slots.default
+                ? slots.default()
+                : normalizedOptions.value.map((opt, i) => (
+                    <div
+                      key={opt.value}
+                      class="hk-select-option"
+                      data-highlighted={highlightedIndex.value === i || undefined}
+                      data-select-index={i}
+                      data-checked={opt.value === props.modelValue || undefined}
+                      data-disabled={opt.disabled || undefined}
+                      onClick={() => {
+                        if (!opt.disabled) select(opt.value);
+                      }}
+                      onPointerenter={() => {
+                        highlightedIndex.value = i;
+                      }}
+                    >
+                      <span>{opt.label}</span>
+                    </div>
+                  ))}
+            </div>
+          </Teleport>
+        )}
+        {props.error ? <p class="hk-select-error">{props.error}</p> : null}
+      </div>
+    );
+  },
+});