@celestia-island/hikari 0.4.4

package/src/components/HkPopupSelect.tsx

@@ -0,0 +1,199 @@
+import { computed, defineComponent, nextTick, onBeforeUnmount, ref, watch, type PropType } from "vue";
+import { ChevronDown } from "lucide-vue-next";
+import HkPopover from "./HkPopover";
+import HkScrollContainer from "./HkScrollContainer";
+import "./HkPopupSelect.scss";
+
+export interface HkPopupSelectOption {
+  value: string;
+  label: string;
+}
+
+const activePopupId = ref<string | null>(null);
+let popupCounter = 0;
+
+export function isAnyPopupOpen(): boolean {
+  return activePopupId.value !== null;
+}
+
+export function closeAllPopups(): void {
+  activePopupId.value = null;
+}
+
+function scrollToElement(selector: string): void {
+  const el = document.querySelector(selector) as HTMLElement | null;
+  el?.scrollIntoView({ block: "nearest" });
+}
+
+export default defineComponent({
+  name: "HkPopupSelect",
+  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<HkPopupSelectOption[]>,
+      default: undefined,
+    },
+  },
+  emits: {
+    "update:modelValue": (_value: string) => true,
+  },
+  setup(props, { emit, slots }) {
+    const instanceId = `hk-popup-select-${++popupCounter}`;
+    const isOpen = ref(false);
+    const triggerRef = ref<HTMLElement>();
+    const highlightedIndex = ref(-1);
+
+    watch(isOpen, (open) => {
+      if (open) {
+        activePopupId.value = instanceId;
+      } else {
+        if (activePopupId.value === instanceId) {
+          activePopupId.value = null;
+        }
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (activePopupId.value === instanceId) {
+        activePopupId.value = null;
+      }
+    });
+
+    watch(activePopupId, (id) => {
+      if (id !== instanceId && isOpen.value) {
+        isOpen.value = false;
+      }
+    });
+
+    const normalizedOptions = computed<HkPopupSelectOption[]>(
+      () => 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;
+      }
+    }
+
+    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() {
+      scrollToElement(`[data-select-index="${highlightedIndex.value}"]`);
+    }
+
+    watch(highlightedIndex, () => {
+      scrollToHighlighted();
+    });
+
+    return () => (
+      <div class="hk-popup-select-wrapper">
+        {props.label ? (
+          <label class="hk-popup-select-label">
+            {props.label}
+            {props.required && <span class="hk-popup-select-required">*</span>}
+          </label>
+        ) : null}
+        <button
+          ref={triggerRef}
+          type="button"
+          class="hk-popup-select-trigger"
+          data-error={props.error || undefined}
+          data-disabled={props.disabled || undefined}
+          disabled={props.disabled}
+          onClick={toggle}
+          onKeydown={onTriggerKeydown}
+          data-state={isOpen.value ? "open" : "closed"}
+        >
+          <span class="hk-popup-select-value">
+            {displayLabel.value || props.placeholder}
+          </span>
+          <ChevronDown size={16} class="hk-popup-select-arrow" />
+        </button>
+        <HkPopover
+          modelValue={isOpen.value}
+          onUpdate:modelValue={(v: boolean) => { isOpen.value = v; }}
+          anchorRef={triggerRef.value ?? null}
+          placement="bottom"
+          offset={4}
+          backdrop={false}
+          class="hk-popup-select-content"
+        >
+          <HkScrollContainer class="hk-popup-select-viewport">
+            {slots.default
+              ? slots.default()
+              : normalizedOptions.value.map((opt, i) => (
+                  <div
+                    key={opt.value}
+                    class="hk-popup-select-item"
+                    data-highlighted={highlightedIndex.value === i || undefined}
+                    data-select-index={i}
+                    data-checked={opt.value === props.modelValue || undefined}
+                    onClick={() => select(opt.value)}
+                    onPointerenter={() => { highlightedIndex.value = i; }}
+                  >
+                    <span>{opt.label}</span>
+                  </div>
+                ))}
+          </HkScrollContainer>
+        </HkPopover>
+        {props.error ? <p class="hk-popup-select-error">{props.error}</p> : null}
+      </div>
+    );
+  },
+});

package/src/components/HkProgressBar.scss

@@ -0,0 +1,106 @@
+.hk-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  width: 100%;
+}
+
+.hk-progress-bar-label {
+  font-size: var(--text-2xs);
+  color: rgb(var(--color-muted));
+  line-height: 1;
+}
+
+.hk-progress-bar-track {
+  width: 100%;
+  height: 4px;
+  border-radius: var(--radius-full);
+  background: rgb(var(--color-muted) / 15%);
+  overflow: hidden;
+  position: relative;
+}
+
+.hk-progress-bar[data-size="xs"] .hk-progress-bar-track {
+  height: 2px;
+}
+
+.hk-progress-bar[data-size="md"] .hk-progress-bar-track {
+  height: 6px;
+}
+
+.hk-progress-bar-secondary {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 0.3;
+
+  &-loading {
+    background: rgb(var(--color-primary));
+  }
+
+  &-done {
+    background: rgb(var(--color-success));
+  }
+
+  &-error {
+    background: rgb(var(--color-error));
+  }
+}
+
+.hk-progress-bar-fill {
+  position: relative;
+  height: 100%;
+  border-radius: var(--radius-full);
+  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  &-loading {
+    background: rgb(var(--color-primary));
+  }
+
+  &-done {
+    background: rgb(var(--color-success));
+  }
+
+  &-error {
+    background: rgb(var(--color-error));
+  }
+}
+
+.hk-progress-bar-indeterminate {
+  height: 100%;
+  width: 40%;
+  border-radius: var(--radius-full);
+  position: absolute;
+  animation: hk-progress-indeterminate 1.4s ease-in-out infinite;
+
+  &-loading {
+    background: rgb(var(--color-primary));
+  }
+
+  &-done {
+    background: rgb(var(--color-success));
+    animation: none;
+    width: 100%;
+  }
+
+  &-error {
+    background: rgb(var(--color-error));
+    animation: none;
+    width: 100%;
+  }
+}
+
+@keyframes hk-progress-indeterminate {
+  0% {
+    left: -40%;
+  }
+  60% {
+    left: 100%;
+  }
+  100% {
+    left: 100%;
+  }
+}

package/src/components/HkProgressBar.tsx

@@ -0,0 +1,61 @@
+import { computed, defineComponent, type PropType } from "vue";
+
+import "./HkProgressBar.scss";
+
+type ProgressBarStatus = "loading" | "done" | "error";
+
+export default defineComponent({
+  name: "HkProgressBar",
+  props: {
+    value: { type: Number, default: null },
+    secondary: { type: Number, default: null },
+    max: { type: Number, default: 100 },
+    status: { type: String as PropType<ProgressBarStatus>, default: "loading" },
+    size: { type: String as PropType<"xs" | "sm" | "md">, default: "sm" },
+    showLabel: { type: Boolean, default: false },
+    label: { type: String, default: undefined },
+  },
+  setup(props) {
+    const pct = computed(() => {
+      if (props.value == null) return null;
+      return Math.min(100, Math.max(0, (props.value / props.max) * 100));
+    });
+
+    const secondaryPct = computed(() => {
+      if (props.secondary == null) return null;
+      return Math.min(100, Math.max(0, (props.secondary / props.max) * 100));
+    });
+
+    const displayLabel = computed(() => {
+      if (props.label) return props.label;
+      if (pct.value == null) return "";
+      return `${Math.round(pct.value)}%`;
+    });
+
+    return () => (
+      <div class="hk-progress-bar" data-size={props.size}>
+        {props.showLabel && (
+          <span class="hk-progress-bar-label">{displayLabel.value}</span>
+        )}
+        <div class="hk-progress-bar-track">
+          {pct.value != null ? (
+            <>
+              {secondaryPct.value != null && (
+                <div
+                  class={["hk-progress-bar-secondary", `hk-progress-bar-secondary-${props.status}`]}
+                  style={{ width: `${secondaryPct.value}%` }}
+                />
+              )}
+              <div
+                class={["hk-progress-bar-fill", `hk-progress-bar-fill-${props.status}`]}
+                style={{ width: `${pct.value}%` }}
+              />
+            </>
+          ) : (
+            <div class={["hk-progress-bar-indeterminate", `hk-progress-bar-indeterminate-${props.status}`]} />
+          )}
+        </div>
+      </div>
+    );
+  },
+});

package/src/components/HkProgressDialog.tsx

@@ -0,0 +1,67 @@
+import { defineComponent, nextTick, ref, watch } from "vue";
+
+import { useProgressDialog } from "../composables/useProgressDialog";
+import HModal from "./HkModal";
+import HProgressBar from "./HkProgressBar";
+import HSpinner from "./HkSpinner";
+
+export default defineComponent({
+  name: "HkProgressDialog",
+  setup() {
+    const state = useProgressDialog();
+    const logRef = ref<HTMLElement>();
+
+    watch(
+      () => state.logs.length,
+      () => {
+        nextTick(() => {
+          const el = logRef.value;
+          if (el) el.scrollTop = el.scrollHeight;
+        });
+      },
+    );
+
+    return () => (
+      <HModal
+        modelValue={state.open}
+        onUpdate:modelValue={() => {
+          /* non-closable */
+        }}
+        closable={false}
+        title={state.title}
+        width="30rem"
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem", padding: "0.25rem 0" }}>
+          {state.value !== null ? (
+            <HProgressBar value={state.value} max={state.max} showLabel size="sm" />
+          ) : (
+            <div style={{ display: "flex", justifyContent: "center", padding: "0.5rem 0" }}>
+              <HSpinner />
+            </div>
+          )}
+          {state.logs.length > 0 ? (
+            <div
+              ref={logRef}
+              style={{
+                maxHeight: "10rem",
+                overflow: "hidden auto",
+                borderRadius: "0.375rem",
+                background: "rgba(0, 0, 0, 0.06)",
+                padding: "0.5rem",
+                fontFamily: "monospace",
+                fontSize: "0.75rem",
+                lineHeight: "1.5",
+              }}
+            >
+              <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
+                {state.logs.map((line, i) => (
+                  <li key={i}>{line}</li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+      </HModal>
+    );
+  },
+});

package/src/components/HkProgressRing.scss

@@ -0,0 +1,56 @@
+.hk-progress-ring {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.hk-progress-ring-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(0deg);
+}
+
+.hk-progress-ring-track {
+  stroke: var(--hk-progress-ring-track, var(--hi-color-border, rgba(0, 0, 0, 0.12)));
+  transition: stroke 0.3s ease;
+}
+
+.hk-progress-ring-fill {
+  stroke: var(--hi-color-primary, #58a6ff);
+  transition:
+    stroke-dashoffset 0.3s ease,
+    stroke 0.3s ease;
+}
+
+.hk-progress-ring-success .hk-progress-ring-fill {
+  stroke: var(--hi-color-success, #3fb950);
+}
+
+.hk-progress-ring-exception .hk-progress-ring-fill {
+  stroke: var(--hi-color-danger, #f85149);
+}
+
+.hk-progress-ring-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  color: var(--hi-color-text-primary, #333);
+  user-select: none;
+  pointer-events: none;
+}
+
+.hk-progress-ring-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  pointer-events: none;
+}

package/src/components/HkProgressRing.tsx

@@ -0,0 +1,82 @@
+import { computed, defineComponent, type PropType } from "vue";
+
+import "./HkProgressRing.scss";
+
+export default defineComponent({
+  name: "HkProgressRing",
+  props: {
+    value: { type: Number, default: 0 },
+    pct: { type: Number, default: undefined },
+    size: { type: Number, default: 120 },
+    strokeWidth: { type: Number, default: 8 },
+    variant: { type: String as PropType<"normal" | "success" | "exception">, default: "normal" },
+    showLabel: { type: Boolean, default: false },
+    /** Whether to render the background track circle. Set false for overlay-only use. */
+    showTrack: { type: Boolean, default: true },
+  },
+  setup(props, { slots }) {
+    const clampedValue = computed(() => Math.min(100, Math.max(0, props.pct ?? props.value)));
+
+    const radius = computed(() => (props.size - props.strokeWidth) / 2);
+    const circumference = computed(() => 2 * Math.PI * radius.value);
+    const dashOffset = computed(() => circumference.value * (1 - clampedValue.value / 100));
+
+    const variantClass = computed(() => {
+      if (props.variant === "success") return "hk-progress-ring-success";
+      if (props.variant === "exception") return "hk-progress-ring-exception";
+      return "";
+    });
+
+    const textSize = computed(() => Math.round(props.size / 5));
+
+    const center = computed(() => props.size / 2);
+
+    return () => (
+      <div
+        class={["hk-progress-ring", variantClass.value]}
+        style={{ width: `${props.size}px`, height: `${props.size}px` }}
+        role="progressbar"
+        aria-valuenow={clampedValue.value}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <svg class="hk-progress-ring-svg" viewBox={`0 0 ${props.size} ${props.size}`}>
+          {props.showTrack && (
+            <circle
+              class="hk-progress-ring-track"
+              cx={center.value}
+              cy={center.value}
+              r={radius.value}
+              fill="none"
+              stroke="currentColor"
+              stroke-width={props.strokeWidth}
+              stroke-linecap="round"
+            />
+          )}
+          <circle
+            class="hk-progress-ring-fill"
+            cx={center.value}
+            cy={center.value}
+            r={radius.value}
+            fill="none"
+            stroke-width={props.strokeWidth}
+            stroke-dasharray={circumference.value}
+            stroke-dashoffset={dashOffset.value}
+            stroke-linecap="round"
+            transform={`rotate(-90 ${center.value} ${center.value})`}
+          />
+        </svg>
+        {props.showLabel && !slots.default && (
+          <span class="hk-progress-ring-label" style={{ fontSize: `${textSize.value}px` }}>
+            {Math.round(clampedValue.value)}%
+          </span>
+        )}
+        {slots.default && (
+          <span class="hk-progress-ring-overlay">
+            {slots.default()}
+          </span>
+        )}
+      </div>
+    );
+  },
+});

package/src/components/HkRadio.scss

@@ -0,0 +1,119 @@
+.hk-radio-group {
+  display: flex;
+  gap: 1rem;
+
+  &-horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  &-vertical {
+    flex-direction: column;
+  }
+
+  &-sm {
+    gap: 0.5rem;
+  }
+
+  &-lg {
+    gap: 1.25rem;
+  }
+}
+
+.hk-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+/* --- Box --- */
+
+.hk-radio-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid var(--hi-color-border);
+  background: var(--hi-color-surface);
+  transition:
+    border-color 0.3s ease,
+    background 0.3s ease;
+  flex-shrink: 0;
+  position: relative;
+
+  [data-size="sm"] & {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  [data-size="md"] & {
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+
+  [data-size="lg"] & {
+    width: 1.375rem;
+    height: 1.375rem;
+  }
+
+  &[data-checked] {
+    background: var(--hi-color-primary);
+    border-color: var(--hi-color-primary);
+  }
+}
+
+.hk-radio:not([data-disabled]):hover .hk-radio-box:not([data-checked]) {
+  border-color: var(--hi-color-primary);
+}
+
+/* --- Hidden input --- */
+
+.hk-radio-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* --- Dot --- */
+
+.hk-radio-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--hi-color-text-on-primary, #fff);
+  z-index: 1;
+
+  [data-size="lg"] & {
+    width: 8px;
+    height: 8px;
+  }
+
+  [data-size="sm"] & {
+    width: 5px;
+    height: 5px;
+  }
+}
+
+/* --- Label --- */
+
+.hk-radio-label-text {
+  font-size: 0.875rem;
+  color: var(--hi-color-text-primary);
+
+  [data-size="sm"] & {
+    font-size: 0.75rem;
+  }
+
+  [data-size="lg"] & {
+    font-size: 1rem;
+  }
+}