@celestia-island/hikari 0.4.4

package/src/components/HkCheckbox.scss

@@ -0,0 +1,102 @@
+/*
+ * HkCheckbox / HkRadio — unified selection control.
+ */
+
+.hk-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hi-space-8, 0.5rem);
+  cursor: pointer;
+  user-select: none;
+}
+
+.hk-checkbox[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---------- box ---------- */
+
+.hk-checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: var(--hi-radius-xs, 4px);
+  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
+  transition:
+    border-color var(--hi-duration-normal, 0.3s) ease,
+    background var(--hi-duration-normal, 0.3s) ease;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.hk-checkbox[data-type="radio"] .hk-checkbox-box {
+  border-radius: 50%;
+}
+
+.hk-checkbox-box[data-checked] {
+  background: var(--hi-color-primary, #ff6b9d);
+  border-color: var(--hi-color-primary, #ff6b9d);
+  color: var(--hi-color-text-on-primary, #fff);
+}
+
+.hk-checkbox-box[data-indeterminate] {
+  background: var(--hi-color-primary, #ff6b9d);
+  border-color: var(--hi-color-primary, #ff6b9d);
+}
+
+.hk-checkbox:hover .hk-checkbox-box[data-checked],
+.hk-checkbox[data-animating] .hk-checkbox-box[data-checked] {
+  background: var(--hi-color-primary, #ff6b9d);
+  border-color: var(--hi-color-primary, #ff6b9d);
+}
+
+/* ---------- input ---------- */
+
+.hk-checkbox-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* ---------- markers ---------- */
+
+.hk-checkbox-icon {
+  position: relative;
+  z-index: var(--hi-z-above, 1);
+  color: var(--hi-color-text-on-primary, #fff);
+  width: 14px;
+  height: 14px;
+}
+
+.hk-checkbox-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--hi-color-text-on-primary, #fff);
+  z-index: var(--hi-z-above, 1);
+}
+
+.hk-checkbox-indeterminate {
+  width: 8px;
+  height: 2px;
+  border-radius: 1px;
+  background: var(--hi-color-text-on-primary, #fff);
+  z-index: var(--hi-z-above, 1);
+}
+
+/* ---------- label ---------- */
+
+.hk-checkbox[data-animating] .hk-checkbox-box {
+  will-change: border-color, background;
+}
+
+.hk-checkbox-label-text {
+  font-size: var(--hi-text-sm, 0.8125rem);
+  color: var(--hi-color-text-primary, #333);
+}

package/src/components/HkCheckbox.tsx

@@ -0,0 +1,85 @@
+import { defineComponent, ref, type PropType } from "vue";
+import { Check } from "lucide-vue-next";
+import "./HkCheckbox.scss";
+
+export default defineComponent({
+  name: "HkCheckbox",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    label: { type: String, default: undefined },
+    disabled: { type: Boolean, default: false },
+    type: {
+      type: String as PropType<"checkbox" | "radio">,
+      default: "checkbox",
+    },
+    size: {
+      type: String as PropType<"sm" | "md" | "lg">,
+      default: "md",
+    },
+  },
+  emits: {
+    "update:modelValue": (_value: boolean) => true,
+  },
+  setup(props, { emit, slots }) {
+    const animating = ref(false);
+    let animTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function markActive() {
+      animating.value = true;
+      if (animTimer) clearTimeout(animTimer);
+      animTimer = setTimeout(() => {
+        animating.value = false;
+      }, 300);
+    }
+
+    function onChange(e: Event) {
+      if (props.disabled) return;
+      emit("update:modelValue", (e.target as HTMLInputElement).checked);
+      markActive();
+    }
+
+    return () => {
+      const inputType = props.type === "radio" ? "radio" : "checkbox";
+      const isChecked = props.modelValue === true || props.modelValue === null;
+
+      return (
+        <label
+          class={[
+            "hk-checkbox",
+            `hk-checkbox-${props.size}`,
+          ]}
+          data-type={inputType}
+          data-disabled={props.disabled ? "" : undefined}
+          data-animating={animating.value ? "" : undefined}
+        >
+          <span
+            class="hk-checkbox-box"
+            data-checked={props.modelValue ? "" : undefined}
+            data-indeterminate={props.modelValue === null ? "" : undefined}
+          >
+            <input
+              class="hk-checkbox-input"
+              type={inputType}
+              checked={props.modelValue === true}
+              disabled={props.disabled}
+              onChange={onChange}
+            />
+            {props.modelValue === true
+              ? props.type === "radio"
+                ? <span class="hk-checkbox-dot" />
+                : <Check size={14} class="hk-checkbox-icon" />
+              : null}
+            {props.modelValue === null && props.type !== "radio" ? (
+              <span class="hk-checkbox-indeterminate" />
+            ) : null}
+          </span>
+          {props.label || slots.default ? (
+            <span class="hk-checkbox-label-text">
+              {slots.default?.() ?? props.label}
+            </span>
+          ) : null}
+        </label>
+      );
+    };
+  },
+});

package/src/components/HkCollapse.tsx

@@ -0,0 +1,48 @@
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+import "../../../components/src/styles/components/collapse.scss";
+
+export default defineComponent({
+  name: "HkCollapse",
+  props: {
+    title: { type: String },
+    open: { type: Boolean, default: false },
+  },
+  emits: {
+    "update:open": (_value: boolean) => true,
+  },
+  setup(props, { emit, slots }) {
+    const isOpen = ref(props.open ?? false);
+
+    watch(() => props.open, (val) => {
+      if (val != null) isOpen.value = val;
+    });
+
+    function toggle() {
+      isOpen.value = !isOpen.value;
+      emit("update:open", isOpen.value);
+    }
+
+    const contentCls = computed(() => [
+      "hk-collapse-content",
+      isOpen.value ? "hk-collapse-expanded" : "",
+    ]);
+
+    return () => (
+      <div class="hk-collapse">
+        <div class="hk-collapse-header" onClick={toggle}>
+          <span class="hk-collapse-arrow" style={{ transform: isOpen.value ? "rotate(90deg)" : "rotate(0deg)" }}>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="9 18 15 12 9 6" />
+            </svg>
+          </span>
+          <div class="hk-collapse-header-content">
+            {slots.title ? slots.title() : props.title ? <span>{props.title}</span> : null}
+          </div>
+        </div>
+        <div class={contentCls.value}>
+          {slots.default?.()}
+        </div>
+      </div>
+    );
+  },
+});

package/src/components/HkColorPicker.scss

@@ -0,0 +1,148 @@
+.hk-color-picker {
+  display: inline-flex;
+}
+
+.hk-color-picker-trigger {
+  outline: none;
+}
+
+.hk-color-picker-swatch-btn {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 6px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  cursor: pointer;
+  outline: none;
+}
+
+.hk-color-picker-swatch {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  border-radius: calc(var(--radius-xs) - 1px);
+  border: 2px solid rgb(0 0 0 / 10%);
+  transition: border-color var(--duration-short);
+
+  .hk-color-picker-swatch-btn:hover & {
+    border-color: rgb(var(--color-primary));
+  }
+}
+
+.hk-color-picker-label {
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: rgb(var(--color-muted));
+  white-space: nowrap;
+  line-height: 1;
+  transition: color var(--duration-short);
+
+  .hk-color-picker-swatch-btn:hover & {
+    color: rgb(var(--color-primary));
+  }
+}
+
+.hk-color-picker-panel {
+  padding: var(--space-12);
+  background: rgb(var(--color-surface));
+  backdrop-filter: blur(var(--blur-lg));
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-modal);
+  outline: none;
+}
+
+.hk-color-picker-body {
+  display: flex;
+}
+
+.hk-color-picker-controls {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  min-width: 200px;
+}
+
+.hk-color-picker-sliders {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+.hk-color-picker-slider-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.hk-color-picker-slider-label {
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  color: rgb(var(--color-muted));
+  width: 10px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.hk-color-picker-channel-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  height: 14px;
+  touch-action: none;
+  user-select: none;
+}
+
+.hk-color-picker-slider-track {
+  position: relative;
+  flex: 1;
+  min-width: 60px;
+  height: 10px;
+  border-radius: var(--radius-full);
+  display: block;
+  overflow: hidden;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
+}
+
+.hk-color-picker-slider-thumb {
+  display: block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: white;
+  border: 2px solid rgb(255 255 255 / 80%);
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 15%), 0 1px 2px rgb(0 0 0 / 20%);
+  cursor: grab;
+  outline: none;
+  transition: transform 0.1s;
+
+  &:hover { transform: scale(1.15); }
+  &:active { cursor: grabbing; }
+}
+
+.hk-color-picker-slider-value {
+  font-size: var(--text-2xs);
+  font-weight: 500;
+  color: rgb(var(--color-muted));
+  width: 26px;
+  text-align: right;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.hk-color-picker-hex-row {
+  width: 100%;
+}
+
+.hk-color-picker-hex-hash {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: rgb(var(--color-muted));
+  user-select: none;
+  pointer-events: none;
+  line-height: 1;
+}

package/src/components/HkColorPicker.tsx

@@ -0,0 +1,204 @@
+import { computed, defineComponent, ref } from "vue";
+
+import HInput from "./HkInput";
+import HPopover from "./HkPopover";
+import "./HkColorPicker.scss";
+
+const CHANNELS = [
+  { key: "r", label: "R" },
+  { key: "g", label: "G" },
+  { key: "b", label: "B" },
+] as const;
+
+type Channel = "r" | "g" | "b";
+
+function clamp(v: number, min = 0, max = 255): number {
+  return Math.max(min, Math.min(max, v));
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return (
+    "#" +
+    [r, g, b]
+      .map((v) => clamp(v).toString(16).padStart(2, "0"))
+      .join("")
+  );
+}
+
+function channelGradient(r: number, g: number, b: number, ch: Channel): string {
+  const from: Record<Channel, string> = {
+    r: rgbToHex(0, g, b),
+    g: rgbToHex(r, 0, b),
+    b: rgbToHex(r, g, 0),
+  };
+  const to: Record<Channel, string> = {
+    r: rgbToHex(255, g, b),
+    g: rgbToHex(r, 255, b),
+    b: rgbToHex(r, g, 255),
+  };
+  return `linear-gradient(to right, ${from[ch]}, ${to[ch]})`;
+}
+
+const ColorSlider = defineComponent({
+  name: "HkColorSlider",
+  props: {
+    value: { type: Number, required: true },
+    r: { type: Number, required: true },
+    g: { type: Number, required: true },
+    b: { type: Number, required: true },
+    channel: { type: String as () => Channel, required: true },
+  },
+  emits: {
+    change: (_value: number) => true,
+  },
+  setup(props, { emit }) {
+    const trackRef = ref<HTMLElement>();
+    let dragging = false;
+
+    function getValueFromX(clientX: number): number {
+      const el = trackRef.value;
+      if (!el) return props.value;
+      const rect = el.getBoundingClientRect();
+      const pct = clamp((clientX - rect.left) / rect.width, 0, 1);
+      return Math.round(pct * 255);
+    }
+
+    function onPointerDown(e: PointerEvent) {
+      dragging = true;
+      (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+      emit("change", getValueFromX(e.clientX));
+    }
+
+    function onPointerMove(e: PointerEvent) {
+      if (!dragging) return;
+      emit("change", getValueFromX(e.clientX));
+    }
+
+    function onPointerUp() {
+      dragging = false;
+    }
+
+    const pct = computed(() => (props.value / 255) * 100);
+
+    return () => (
+      <div
+        class="hk-color-picker-channel-slider"
+        onPointerdown={onPointerDown}
+        onPointermove={onPointerMove}
+        onPointerup={onPointerUp}
+      >
+        <div
+          ref={trackRef}
+          class="hk-color-picker-slider-track"
+          style={{ background: channelGradient(props.r, props.g, props.b, props.channel) }}
+        />
+        <div
+          class="hk-color-picker-slider-thumb"
+          style={{ left: `${pct.value}%` }}
+        />
+      </div>
+    );
+  },
+});
+
+export default defineComponent({
+  name: "HkColorPicker",
+  props: {
+    r: { type: Number, required: true },
+    g: { type: Number, required: true },
+    b: { type: Number, required: true },
+    label: { type: String, default: "" },
+  },
+  emits: {
+    change: (_rgb: { r: number; g: number; b: number }) => true,
+  },
+  setup(props, { emit }) {
+    const isOpen = ref(false);
+    const triggerRef = ref<HTMLElement>();
+
+    const hex = computed(() => rgbToHex(props.r, props.g, props.b));
+    const hexDisplay = computed(() => hex.value.replace(/^#/, ""));
+
+    function updateChannel(ch: Channel, value: number) {
+      const next = { r: props.r, g: props.g, b: props.b };
+      next[ch] = clamp(value);
+      emit("change", next);
+    }
+
+    function onHexInput(v: string) {
+      if (/^[0-9a-fA-F]{0,6}$/.test(v) && v.length === 6) {
+        emit("change", {
+          r: parseInt(v.slice(0, 2), 16),
+          g: parseInt(v.slice(2, 4), 16),
+          b: parseInt(v.slice(4, 6), 16),
+        });
+      }
+    }
+
+    return () => (
+      <div class="hk-color-picker">
+        <button
+          ref={triggerRef}
+          type="button"
+          class="hk-color-picker-swatch-btn"
+          onClick={() => { isOpen.value = !isOpen.value; }}
+        >
+          <div
+            class="hk-color-picker-swatch"
+            style={{ background: hex.value }}
+          />
+          {props.label && (
+            <span class="hk-color-picker-label">{props.label}</span>
+          )}
+        </button>
+        <HPopover
+          modelValue={isOpen.value}
+          onUpdate:modelValue={(v: boolean) => { isOpen.value = v; }}
+          anchorRef={triggerRef.value ?? null}
+          placement="bottom-start"
+          offset={6}
+          backdrop={false}
+          class="hk-color-picker-panel"
+        >
+          <div class="hk-color-picker-body">
+            <div class="hk-color-picker-controls">
+              <div class="hk-color-picker-sliders">
+                {CHANNELS.map((def) => (
+                  <div key={def.key} class="hk-color-picker-slider-row">
+                    <span class="hk-color-picker-slider-label">
+                      {def.label}
+                    </span>
+                    <ColorSlider
+                      value={props[def.key]}
+                      r={props.r}
+                      g={props.g}
+                      b={props.b}
+                      channel={def.key}
+                      onChange={(v: number) => updateChannel(def.key, v)}
+                    />
+                    <span class="hk-color-picker-slider-value">
+                      {props[def.key]}
+                    </span>
+                  </div>
+                ))}
+              </div>
+
+              <div class="hk-color-picker-hex-row">
+                <HInput
+                  modelValue={hexDisplay.value}
+                  onUpdate:modelValue={onHexInput}
+                >
+                  {{
+                    prefixIcon: () => (
+                      <span class="hk-color-picker-hex-hash">#</span>
+                    ),
+                  }}
+                </HInput>
+              </div>
+            </div>
+          </div>
+        </HPopover>
+      </div>
+    );
+  },
+});

package/src/components/HkConfirmDialog.scss

@@ -0,0 +1,12 @@
+.hk-confirm-dialog-message {
+  margin: 0 0 1.5rem;
+  color: color-mix(in srgb, var(--hi-color-text-secondary) 85%, transparent);
+  font-size: var(--hi-text-sm, 0.875rem);
+  line-height: 1.5;
+}
+
+.hk-confirm-dialog-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}

package/src/components/HkConfirmDialog.tsx

@@ -0,0 +1,75 @@
+import { defineComponent } from "vue";
+
+import "./HkConfirmDialog.scss";
+import HButton from "./HkButton";
+import HModal from "./HkModal";
+import { useI18n } from "../i18n/context";
+
+export default defineComponent({
+  name: "HkConfirmDialog",
+  props: {
+    open: { type: Boolean, required: true },
+    title: { type: String, default: "" },
+    message: { type: String, default: "" },
+    confirmLabel: { type: String, default: "" },
+    confirmVariant: {
+      type: String as () => "primary" | "danger",
+      default: "danger",
+    },
+    cancelLabel: { type: String, default: "" },
+    loading: { type: Boolean, default: false },
+  },
+  emits: {
+    confirm: () => true,
+    cancel: () => true,
+    "update:open": (_value: boolean) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+
+    function onConfirm() {
+      emit("confirm");
+      emit("update:open", false);
+    }
+
+    function onCancel() {
+      emit("cancel");
+      emit("update:open", false);
+    }
+
+    return () => (
+      <HModal
+        modelValue={props.open}
+        title={props.title}
+        closable={!props.loading}
+        onUpdate:modelValue={(v: boolean) => emit("update:open", v)}
+      >
+        {{
+          default: () => (
+            <div class="hk-confirm-dialog">
+              <p class="hk-confirm-dialog-message">{props.message}</p>
+              <div class="hk-confirm-dialog-actions">
+                <HButton
+                  variant="secondary"
+                  size="sm"
+                  disabled={props.loading}
+                  onClick={onCancel}
+                >
+                  {props.cancelLabel || t("hk.confirmDialog.cancel", "Cancel")}
+                </HButton>
+                <HButton
+                  variant={props.confirmVariant}
+                  size="sm"
+                  loading={props.loading}
+                  onClick={onConfirm}
+                >
+                  {props.confirmLabel || t("hk.confirmDialog.confirm", "Confirm")}
+                </HButton>
+              </div>
+            </div>
+          ),
+        }}
+      </HModal>
+    );
+  },
+});