@celestia-island/hikari 0.4.4

package/src/components/HkTable.tsx

@@ -0,0 +1,246 @@
+import { computed, defineComponent, ref, type PropType } from "vue";
+
+import { useI18n } from "../i18n/context";
+import "./HkTable.scss";
+
+interface Column {
+  key: string;
+  title: string;
+  width?: string;
+  sortable?: boolean;
+  align?: "left" | "center" | "right";
+}
+
+export default defineComponent({
+  name: "HkTable",
+  props: {
+    columns: { type: Array as PropType<Column[]>, required: true },
+    rows: { type: Array as PropType<Record<string, unknown>[]>, required: true },
+    rowKey: { type: String, default: undefined },
+    caption: { type: String, default: undefined },
+    size: { type: String as PropType<"sm" | "md" | "lg">, default: "md" },
+    bordered: { type: Boolean, default: false },
+    striped: { type: Boolean, default: false },
+    hover: { type: Boolean, default: false },
+    sortable: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: false },
+    emptyText: { type: String, default: "" },
+  },
+  emits: {
+    "update:selectedRows": (_rows: Record<string, unknown>[]) => true,
+  },
+  setup(props, { emit, slots }) {
+    const { t } = useI18n();
+    const sortKey = ref<string | null>(null);
+    const sortDirection = ref<"asc" | "desc">("asc");
+    const selectedRowKeys = ref<Set<string>>(new Set());
+
+    function getRowKey(row: Record<string, unknown>, index: number): string {
+      if (props.rowKey && row[props.rowKey] != null) return String(row[props.rowKey]);
+      return String(index);
+    }
+
+    function toggleSort(key: string) {
+      if (sortKey.value === key) {
+        sortDirection.value = sortDirection.value === "asc" ? "desc" : "asc";
+      } else {
+        sortKey.value = key;
+        sortDirection.value = "asc";
+      }
+    }
+
+    const sortedRows = computed(() => {
+      if (!sortKey.value) return [...props.rows];
+      const dir = sortDirection.value === "asc" ? 1 : -1;
+      return [...props.rows].sort((a, b) => {
+        const aVal = a[sortKey.value!];
+        const bVal = b[sortKey.value!];
+        if (aVal == null && bVal == null) return 0;
+        if (aVal == null) return 1;
+        if (bVal == null) return -1;
+        if (aVal < bVal) return -1 * dir;
+        if (aVal > bVal) return 1 * dir;
+        return 0;
+      });
+    });
+
+    function toggleRow(row: Record<string, unknown>, index: number) {
+      const key = getRowKey(row, index);
+      const next = new Set(selectedRowKeys.value);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      selectedRowKeys.value = next;
+      emit(
+        "update:selectedRows",
+        sortedRows.value.filter((r, i) => next.has(getRowKey(r, i)))
+      );
+    }
+
+    function toggleAll() {
+      if (selectedRowKeys.value.size === sortedRows.value.length) {
+        selectedRowKeys.value = new Set();
+        emit("update:selectedRows", []);
+      } else {
+        const keys = new Set(sortedRows.value.map((r, i) => getRowKey(r, i)));
+        selectedRowKeys.value = keys;
+        emit("update:selectedRows", [...sortedRows.value]);
+      }
+    }
+
+    const allChecked = computed(
+      () =>
+        props.selectable &&
+        sortedRows.value.length > 0 &&
+        selectedRowKeys.value.size === sortedRows.value.length
+    );
+
+    const tableCls = computed(() => [
+      "hk-table",
+      `hk-table-${props.size}`,
+      props.bordered ? "hk-table-bordered" : "",
+      props.striped ? "hk-table-striped" : "",
+      props.hover ? "hk-table-hover" : "",
+    ]);
+
+    const totalCols = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+
+    return () => (
+      <div class="hk-table-wrapper">
+        <table class={tableCls.value}>
+          {props.caption && <caption class="sr-only">{props.caption}</caption>}
+          <thead>
+            <tr class="hk-table-header-row">
+              {props.selectable && (
+                <th class="hk-table-header-cell" style={{ width: "40px" }}>
+                  <label class="hk-table-checkbox-label">
+                    <input
+                      type="checkbox"
+                      class="hk-table-checkbox-input"
+                      checked={allChecked.value}
+                      onChange={toggleAll}
+                    />
+                    <span
+                      class={[
+                        "hk-table-checkbox",
+                        "hk-table-checkbox-md",
+                        allChecked.value ? "hk-table-checkbox-checked" : "",
+                      ]}
+                    >
+                      {allChecked.value && (
+                        <svg
+                          class="hk-table-checkbox-icon"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="3"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      )}
+                    </span>
+                  </label>
+                </th>
+              )}
+              {props.columns.map((col) => {
+                const canSort = props.sortable || col.sortable;
+                return (
+                  <th
+                    key={col.key}
+                    class={[
+                      "hk-table-header-cell",
+                      col.align ? `hk-text-${col.align}` : "",
+                      canSort ? "hk-table-header-sortable" : "",
+                      canSort && sortKey.value === col.key ? "hk-table-header-sorted" : "",
+                    ]}
+                    style={{ width: col.width }}
+                    onClick={() => canSort && toggleSort(col.key)}
+                  >
+                    <span class="hk-table-header-label">{col.title}</span>
+                    {canSort && sortKey.value === col.key && (
+                      <svg
+                        class={[
+                          "hk-table-sort-icon",
+                          sortDirection.value === "desc" ? "hk-table-sort-icon-desc" : "",
+                        ]}
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <polyline points="18 15 12 9 6 15" />
+                      </svg>
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody class="hk-table-body">
+            {sortedRows.value.length === 0 ? (
+              <tr>
+                <td colspan={totalCols.value} class="hk-table-empty">
+                  {slots.empty ? slots.empty() : (props.emptyText || t("hk.table.noData", "No data"))}
+                </td>
+              </tr>
+            ) : (
+              sortedRows.value.map((row, index) => {
+                const rowKey = getRowKey(row, index);
+                return (
+                  <tr key={rowKey} class="hk-table-row">
+                    {props.selectable && (
+                      <td class="hk-table-cell" style={{ width: "40px" }}>
+                        <label class="hk-table-checkbox-label">
+                          <input
+                            type="checkbox"
+                            class="hk-table-checkbox-input"
+                            checked={selectedRowKeys.value.has(rowKey)}
+                            onChange={() => toggleRow(row, index)}
+                          />
+                          <span
+                            class={[
+                              "hk-table-checkbox",
+                              "hk-table-checkbox-md",
+                              selectedRowKeys.value.has(rowKey) ? "hk-table-checkbox-checked" : "",
+                            ]}
+                          >
+                            {selectedRowKeys.value.has(rowKey) && (
+                              <svg
+                                class="hk-table-checkbox-icon"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="3"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              >
+                                <polyline points="20 6 9 17 4 12" />
+                              </svg>
+                            )}
+                          </span>
+                        </label>
+                      </td>
+                    )}
+                    {props.columns.map((col) => (
+                      <td
+                        key={col.key}
+                        class={["hk-table-cell", col.align ? `hk-text-${col.align}` : ""]}
+                      >
+                        {slots[`cell-${col.key}`]
+                          ? slots[`cell-${col.key}`]!({ row, value: row[col.key], index })
+                          : row[col.key]}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
+    );
+  },
+});

package/src/components/HkTabs.scss

@@ -0,0 +1,109 @@
+/* HkTabs — unified underline / pill tab component */
+
+.hk-tabs {
+  width: 100%;
+}
+
+/* === Shared list === */
+
+.hk-tabs-list {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.hk-tabs-list[data-variant="pill"] {
+  position: relative;
+  display: inline-flex;
+  gap: 0;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-faint);
+  background: rgb(var(--color-surface) / 60%);
+}
+
+/* === Shared trigger === */
+
+.hk-tabs-trigger {
+  font-weight: 500;
+  color: rgb(var(--color-muted));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  transition: color var(--duration-short) ease;
+
+  &:hover {
+    color: rgb(var(--color-text));
+  }
+
+  &[data-active] {
+    color: rgb(var(--color-primary));
+  }
+}
+
+/* === Underline variant === */
+
+.hk-tabs[data-variant="underline"] .hk-tabs-list {
+  border-bottom: 1px solid rgb(var(--color-border) / 15%);
+}
+
+.hk-tabs[data-variant="underline"] .hk-tabs-trigger {
+  padding: var(--space-8) var(--space-16);
+  font-size: var(--text-base);
+  border-bottom: 2px solid transparent;
+  transition: background-color, border-color, color, box-shadow, opacity, transform, filter var(--duration-normal) ease;
+
+  &:hover {
+    background: var(--c-primary-faint);
+  }
+
+  &[data-active] {
+    border-bottom-color: rgb(var(--color-primary));
+  }
+}
+
+/* === Pill variant — mirrors SMorphingTabs exactly === */
+
+.hk-tabs[data-variant="pill"] .hk-tabs-trigger {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6);
+  flex: none;
+  padding: var(--space-4) var(--space-12);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+}
+
+/* === Pill sliding indicator === */
+
+.hk-tabs-indicator {
+  position: absolute;
+  top: 2px;
+  height: calc(100% - 4px);
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-primary) / 12%);
+  pointer-events: none;
+  z-index: 0;
+  transition: left var(--duration-normal) var(--ease-standard),
+              width var(--duration-normal) var(--ease-standard);
+}
+
+/* === Panel === */
+
+.hk-tabs-panel {
+  outline: none;
+
+  &:not([data-active]) {
+    display: none;
+  }
+}
+
+.hk-tabs[data-variant="underline"] .hk-tabs-panel {
+  padding: var(--space-16) 0;
+}

package/src/components/HkTabs.tsx

@@ -0,0 +1,111 @@
+import { defineComponent, nextTick, onMounted, ref, watch, type ComponentPublicInstance, type PropType } from "vue";
+
+import "./HkTabs.scss";
+
+interface TabItem {
+  key: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export default defineComponent({
+  name: "HkTabs",
+  props: {
+    modelValue: { type: String, required: true },
+    tabs: { type: Array as PropType<TabItem[]>, required: true },
+    variant: { type: String as PropType<"underline" | "pill">, default: "underline" },
+    renderPanels: { type: Boolean, default: true },
+  },
+  emits: {
+    "update:modelValue": (_value: string) => true,
+  },
+  setup(props, { emit, slots }) {
+    const triggerRefs = ref<Map<number, HTMLElement>>(new Map());
+    const indicatorStyle = ref<Record<string, string>>({});
+
+    function setTriggerRef(el: Element | ComponentPublicInstance | null, idx: number) {
+      if (el instanceof HTMLElement) {
+        triggerRefs.value.set(idx, el);
+      } else {
+        triggerRefs.value.delete(idx);
+      }
+    }
+
+    function updateIndicator() {
+      if (props.variant !== "pill") return;
+      const idx = props.tabs.findIndex((t) => t.key === props.modelValue);
+      const el = triggerRefs.value.get(idx >= 0 ? idx : 0);
+      if (!el) return;
+      const left = `${el.offsetLeft}px`;
+      const width = `${el.offsetWidth}px`;
+      if (indicatorStyle.value.left === left && indicatorStyle.value.width === width) return;
+      indicatorStyle.value = { left, width };
+    }
+
+    let resizeObserver: ResizeObserver | null = null;
+
+    onMounted(() => {
+      nextTick(updateIndicator);
+      if (props.variant === "pill") {
+        resizeObserver = new ResizeObserver(() => updateIndicator());
+        const firstEl = triggerRefs.value.get(0);
+        if (firstEl?.parentElement) {
+          resizeObserver.observe(firstEl.parentElement);
+        }
+      }
+    });
+
+    watch(() => props.modelValue, () => nextTick(updateIndicator));
+
+    watch(() => props.tabs, () => {
+      triggerRefs.value.clear();
+      nextTick(updateIndicator);
+    }, { deep: true });
+
+    return () => (
+      <div class="hk-tabs" data-variant={props.variant}>
+        <div
+          class="hk-tabs-list"
+          data-variant={props.variant === "pill" ? "pill" : undefined}
+          role="tablist"
+        >
+          {props.variant === "pill" && (
+            <div class="hk-tabs-indicator" style={indicatorStyle.value} />
+          )}
+          {props.tabs.map((tab, idx) => {
+            const active = tab.key === props.modelValue;
+            const disabled = tab.disabled;
+            return (
+              <button
+                key={tab.key}
+                ref={(el) => setTriggerRef(el, idx)}
+                type="button"
+                role="tab"
+                aria-selected={active}
+                aria-disabled={disabled || undefined}
+                class="hk-tabs-trigger"
+                data-active={active || undefined}
+                disabled={disabled}
+                onClick={() => emit("update:modelValue", tab.key)}
+              >
+                {slots[`icon-${tab.key}`]?.()}
+                {tab.label && <span>{tab.label}</span>}
+              </button>
+            );
+          })}
+        </div>
+
+        {props.renderPanels && props.tabs.map((tab) => (
+          <div
+            key={tab.key}
+            role="tabpanel"
+            class="hk-tabs-panel"
+            data-active={(tab.key === props.modelValue) || undefined}
+          >
+            {tab.key === props.modelValue && slots[tab.key]?.()}
+          </div>
+        ))}
+      </div>
+    );
+  },
+});

package/src/components/HkTag.scss

@@ -0,0 +1,88 @@
+.hk-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hi-space-4, 4px);
+  font-size: var(--hi-text-xs, 0.75rem);
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  border-radius: var(--hi-radius-sm, 4px);
+  padding: var(--hi-space-2, 2px) var(--hi-space-8, 8px);
+  user-select: none;
+}
+
+.hk-tag-sm {
+  font-size: 0.625rem;
+  padding: 1px 6px;
+}
+
+.hk-tag-md {
+  font-size: var(--hi-text-xs, 0.75rem);
+  padding: var(--hi-space-2, 2px) var(--hi-space-8, 8px);
+}
+
+.hk-tag-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+.hk-tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.5;
+  padding: 0;
+  margin-left: var(--hi-space-2, 2px);
+  border-radius: var(--hi-radius-sm, 2px);
+  transition: opacity var(--hi-duration-fast, 0.15s) ease;
+}
+
+.hk-tag-close:hover {
+  opacity: 1;
+}
+
+.hk-tag-default {
+  background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
+  color: var(--hi-color-text-primary);
+  border-color: var(--hi-color-border);
+}
+
+.hk-tag-primary {
+  background: color-mix(in srgb, var(--hi-color-primary) 10%, transparent);
+  color: var(--hi-color-primary);
+  border-color: color-mix(in srgb, var(--hi-color-primary) 20%, transparent);
+}
+
+.hk-tag-success {
+  background: color-mix(in srgb, var(--hi-color-success) 10%, transparent);
+  color: var(--hi-color-success);
+  border-color: color-mix(in srgb, var(--hi-color-success) 20%, transparent);
+}
+
+.hk-tag-warning {
+  background: color-mix(in srgb, var(--hi-color-warning) 10%, transparent);
+  color: var(--hi-color-warning);
+  border-color: color-mix(in srgb, var(--hi-color-warning) 20%, transparent);
+}
+
+.hk-tag-danger {
+  background: color-mix(in srgb, var(--hi-color-danger) 10%, transparent);
+  color: var(--hi-color-danger);
+  border-color: color-mix(in srgb, var(--hi-color-danger) 20%, transparent);
+}
+
+.hk-tag-info {
+  background: color-mix(in srgb, var(--hi-color-info) 10%, transparent);
+  color: var(--hi-color-info);
+  border-color: color-mix(in srgb, var(--hi-color-info) 20%, transparent);
+}

package/src/components/HkTag.tsx

@@ -0,0 +1,44 @@
+import { computed, defineComponent, type PropType } from "vue";
+import { X } from "lucide-vue-next";
+import "./HkTag.scss";
+
+export type TagVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
+
+export default defineComponent({
+  name: "HkTag",
+  props: {
+    variant: { type: String as PropType<TagVariant>, default: "default" },
+    size: { type: String as PropType<"sm" | "md">, default: "md" },
+    closable: { type: Boolean, default: false },
+  },
+  emits: {
+    close: () => true,
+  },
+  setup(props, { emit, slots }) {
+    const cls = computed(() => [
+      "hk-tag",
+      `hk-tag-${props.variant}`,
+      `hk-tag-${props.size}`,
+    ]);
+
+    return () => (
+      <span class={cls.value}>
+        {slots.icon && (
+          <span class="hk-tag-icon">
+            {slots.icon()}
+          </span>
+        )}
+        {slots.default?.()}
+        {props.closable && (
+          <button
+            type="button"
+            class="hk-tag-close"
+            onClick={() => emit("close")}
+          >
+            <X size={12} />
+          </button>
+        )}
+      </span>
+    );
+  },
+});

package/src/components/HkTextarea.scss

@@ -0,0 +1,72 @@
+.hk-textarea {
+  display: block;
+  width: 100%;
+
+  &-disabled {
+    opacity: 0.5;
+  }
+
+  &-overlimit .hk-textarea-field {
+    border-color: var(--hi-color-danger);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-danger) 15%, transparent);
+  }
+}
+
+.hk-textarea-field {
+  display: block;
+  width: 100%;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--hi-color-surface);
+  border: 1px solid var(--hi-color-border);
+  border-radius: var(--hi-radius-md, 6px);
+  color: var(--hi-color-text-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  resize: vertical;
+  outline: none;
+  box-sizing: border-box;
+  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));
+
+  &::placeholder {
+    color: var(--hi-color-muted);
+    opacity: 0.6;
+  }
+
+  &:hover:not(:disabled):not(.hk-textarea-disabled &) {
+    border-color: var(--hi-color-primary);
+  }
+
+  &:focus {
+    border-color: var(--hi-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary) 12%, transparent);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 1;
+  }
+}
+
+.hk-textarea-field-autogrow {
+  resize: none;
+  overflow: hidden;
+}
+
+.hk-textarea-count {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.25rem;
+  font-size: var(--hi-text-xs, 0.75rem);
+  color: var(--hi-color-muted);
+  user-select: none;
+}
+
+.hk-textarea-count-over {
+  color: var(--hi-color-danger);
+  font-weight: 600;
+}