@celestia-island/hikari 0.4.4

package/src/components/HkSpinner.scss

@@ -0,0 +1,67 @@
+/* HkSpinner — pure-CSS infinite spinner. */
+.hk-spinner-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+}
+
+.hk-spinner-centered {
+  justify-content: center;
+  padding: var(--space-32) 0;
+}
+
+.hk-spinner {
+  border: 2px solid rgb(var(--color-border) / 20%);
+  border-top-color: rgb(var(--color-primary));
+  border-radius: 50%;
+  animation: hk-spinner-rotate 0.7s linear infinite;
+}
+
+/* tone="current" — same shape/duration as the default, but colored with
+   currentcolor so the spinner matches surrounding text (e.g. inside a
+   colored HkButton). Track = faded currentcolor, arc = full currentcolor. */
+.hk-spinner-current {
+  border-color: color-mix(in srgb, currentcolor 30%, transparent);
+  border-top-color: currentcolor;
+}
+
+.hk-spinner-xs {
+  width: 12px;
+  height: 12px;
+  border-width: 1.5px;
+}
+
+.hk-spinner-sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.hk-spinner-md {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+
+.hk-spinner-lg {
+  width: 36px;
+  height: 36px;
+  border-width: 3px;
+}
+
+.hk-spinner-xl {
+  width: 48px;
+  height: 48px;
+  border-width: 4px;
+}
+
+.hk-spinner-text {
+  font-size: var(--text-base);
+  color: color-mix(in srgb, rgb(var(--color-muted)) 70%, rgb(var(--color-background)));
+}
+
+@keyframes hk-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/HkSpinner.tsx

@@ -0,0 +1,41 @@
+import { computed, defineComponent, type PropType } from "vue";
+import "./HkSpinner.scss";
+
+export type SpinnerSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export default defineComponent({
+  name: "HkSpinner",
+  props: {
+    size: {
+      type: [String, Number] as PropType<SpinnerSize | number>,
+      default: "md",
+    },
+    text: { type: String, default: undefined },
+    center: { type: Boolean, default: false },
+    tone: { type: String as PropType<"primary" | "current">, default: "primary" },
+  },
+  setup(props) {
+    const sizeClass = computed(() =>
+      typeof props.size === "string" ? `hk-spinner-${props.size}` : "",
+    );
+    const sizeStyle = computed(() =>
+      typeof props.size === "number"
+        ? { width: `${props.size}px`, height: `${props.size}px` }
+        : null,
+    );
+
+    return () => (
+      <div class={["hk-spinner-wrapper", props.center && "hk-spinner-centered"]}>
+        <div
+          class={[
+            "hk-spinner",
+            sizeClass.value,
+            props.tone === "current" && "hk-spinner-current",
+          ]}
+          style={sizeStyle.value ?? undefined}
+        />
+        {props.text ? <span class="hk-spinner-text">{props.text}</span> : null}
+      </div>
+    );
+  },
+});

package/src/components/HkSplash.scss

@@ -0,0 +1,60 @@
+.hk-splash {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: var(--hi-color-bg-canvas, #0d1117);
+  color: var(--hi-color-text-primary, #c9d1d9);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+.hk-splash-main {
+  text-align: center;
+  max-width: 480px;
+  padding: 2rem;
+}
+
+.hk-splash-logo {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 1.5rem;
+  border-radius: 16px;
+}
+
+.hk-splash-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--hi-color-primary, #58a6ff);
+  margin: 0 0 0.5rem;
+}
+
+.hk-splash-subtitle {
+  font-size: 1.1rem;
+  color: var(--hi-color-text-secondary, #8b949e);
+  margin: 0 0 0.5rem;
+}
+
+.hk-splash-description {
+  font-size: 0.9rem;
+  color: var(--hi-color-text-tertiary, #6e7681);
+  margin-bottom: 1rem;
+}
+
+.hk-splash-status {
+  margin-bottom: 1.5rem;
+}
+
+.hk-splash-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.hk-splash-footer {
+  margin-top: auto;
+  padding: 1rem;
+  font-size: 0.75rem;
+  color: var(--hi-color-text-tertiary, #484f58);
+}

package/src/components/HkSplash.tsx

@@ -0,0 +1,40 @@
+import { defineComponent, type PropType } from "vue";
+import HBadge from "./HkBadge";
+import "./HkSplash.scss";
+
+export default defineComponent({
+  name: "HkSplash",
+  props: {
+    logo: { type: String, default: "" },
+    title: { type: String, default: "" },
+    subtitle: { type: String, default: "" },
+    status: { type: String as PropType<"online" | "offline" | "loading" | "coming-soon">, default: "coming-soon" },
+    statusLabel: { type: String, default: "" },
+  },
+  setup(props, { slots }) {
+    const statusVariant: Record<string, "success" | "error" | "warning" | "primary"> = {
+      online: "success",
+      offline: "error",
+      loading: "warning",
+      "coming-soon": "primary",
+    };
+
+    return () => (
+      <div class="hk-splash">
+        <main class="hk-splash-main">
+          {props.logo ? <img class="hk-splash-logo" src={props.logo} alt={props.title || "logo"} /> : null}
+          <h1 class="hk-splash-title">{props.title || slots.title?.()}</h1>
+          {props.subtitle ? <p class="hk-splash-subtitle">{props.subtitle}</p> : null}
+          {slots.description ? <div class="hk-splash-description">{slots.description?.()}</div> : null}
+          <div class="hk-splash-status">
+            <HBadge variant={statusVariant[props.status] || "primary"} size="md">
+              {props.statusLabel || props.status}
+            </HBadge>
+          </div>
+          {slots.actions ? <div class="hk-splash-actions">{slots.actions?.()}</div> : null}
+        </main>
+        {slots.footer ? <footer class="hk-splash-footer">{slots.footer?.()}</footer> : null}
+      </div>
+    );
+  },
+});

package/src/components/HkSwitch.scss

@@ -0,0 +1,157 @@
+.hk-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+
+  &[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.hk-switch-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* --- Track --- */
+
+.hk-switch-track {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 9999px;
+  border: 1px solid var(--hi-color-border);
+  background: var(--hi-color-surface);
+  transition:
+    background-color 0.3s ease,
+    border-color 0.3s ease;
+  flex-shrink: 0;
+  overflow: hidden;
+
+  .hk-switch-sm & {
+    width: 2rem;
+    height: 1.125rem;
+  }
+
+  .hk-switch-md & {
+    width: 2.5rem;
+    height: 1.375rem;
+  }
+
+  .hk-switch-lg & {
+    width: 3rem;
+    height: 1.625rem;
+  }
+
+  .hk-switch-primary[data-checked] & {
+    background: var(--hi-color-primary);
+    border-color: var(--hi-color-primary);
+  }
+
+  .hk-switch-secondary[data-checked] & {
+    background: var(--hi-color-secondary);
+    border-color: var(--hi-color-secondary);
+  }
+
+  .hk-switch-danger[data-checked] & {
+    background: var(--hi-color-danger);
+    border-color: var(--hi-color-danger);
+  }
+
+  .hk-switch-warning[data-checked] & {
+    background: var(--hi-color-warning);
+    border-color: var(--hi-color-warning);
+  }
+}
+
+/* --- Thumb --- */
+
+.hk-switch-thumb {
+  position: absolute;
+  border-radius: 50%;
+  background: var(--hi-color-text-on-primary, #fff);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+
+  .hk-switch-sm & {
+    width: 0.75rem;
+    height: 0.75rem;
+    left: 2px;
+  }
+
+  .hk-switch-md & {
+    width: 0.9375rem;
+    height: 0.9375rem;
+    left: 2px;
+  }
+
+  .hk-switch-lg & {
+    width: 1.125rem;
+    height: 1.125rem;
+    left: 2px;
+  }
+
+  .hk-switch-sm[data-checked] & {
+    transform: translateX(0.813rem);
+  }
+
+  .hk-switch-md[data-checked] & {
+    transform: translateX(1.12rem);
+  }
+
+  .hk-switch-lg[data-checked] & {
+    transform: translateX(1.375rem);
+  }
+}
+
+/* --- Content text inside track --- */
+
+.hk-switch-content {
+  position: absolute;
+  font-size: 0.5625rem;
+  font-weight: 700;
+  line-height: 1;
+  white-space: nowrap;
+  z-index: 0;
+  transition: opacity 0.2s ease;
+
+  .hk-switch-sm & {
+    font-size: 0.4375rem;
+  }
+
+  .hk-switch-lg & {
+    font-size: 0.625rem;
+  }
+
+  &-off {
+    right: 4px;
+    color: var(--hi-color-text-secondary);
+  }
+
+  &-on {
+    left: 4px;
+    color: var(--hi-color-text-on-primary, #fff);
+  }
+}
+
+/* --- Label --- */
+
+.hk-switch-label-text {
+  font-size: 0.875rem;
+  color: var(--hi-color-text-primary);
+
+  .hk-switch-sm & {
+    font-size: 0.75rem;
+  }
+
+  .hk-switch-lg & {
+    font-size: 1rem;
+  }
+}

package/src/components/HkSwitch.tsx

@@ -0,0 +1,72 @@
+import { computed, defineComponent, type PropType } from "vue";
+import "./HkSwitch.scss";
+
+export default defineComponent({
+  name: "HkSwitch",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    size: {
+      type: String as PropType<"sm" | "md" | "lg">,
+      default: "md",
+    },
+    color: {
+      type: String as PropType<"primary" | "secondary" | "danger" | "warning">,
+      default: "primary",
+    },
+    label: { type: String, default: undefined },
+    checkedContent: { type: String, default: undefined },
+    uncheckedContent: { type: String, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_value: boolean) => true,
+  },
+  setup(props, { emit }) {
+    function toggle() {
+      if (props.disabled) return;
+      emit("update:modelValue", !props.modelValue);
+    }
+
+    return () => (
+      <label
+        class={[
+          "hk-switch",
+          `hk-switch-${props.size}`,
+          `hk-switch-${props.color}`,
+        ]}
+        data-checked={props.modelValue ? "" : undefined}
+        data-disabled={props.disabled ? "" : undefined}
+      >
+        <input
+          class="hk-switch-input"
+          type="checkbox"
+          checked={props.modelValue}
+          disabled={props.disabled}
+          onChange={toggle}
+        />
+        <span
+          class="hk-switch-track"
+          onClick={(e: MouseEvent) => {
+            e.preventDefault();
+            toggle();
+          }}
+        >
+          <span class="hk-switch-thumb" />
+          {props.uncheckedContent && !props.modelValue ? (
+            <span class="hk-switch-content hk-switch-content-off">
+              {props.uncheckedContent}
+            </span>
+          ) : null}
+          {props.checkedContent && props.modelValue ? (
+            <span class="hk-switch-content hk-switch-content-on">
+              {props.checkedContent}
+            </span>
+          ) : null}
+        </span>
+        {props.label ? (
+          <span class="hk-switch-label-text">{props.label}</span>
+        ) : null}
+      </label>
+    );
+  },
+});

package/src/components/HkTable.scss

@@ -0,0 +1,198 @@
+.hk-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.hk-table {
+  width: 100%;
+  font-size: var(--hi-text-base, 1rem);
+  border-collapse: collapse;
+  color: var(--hi-color-text-primary, #c9d1d9);
+}
+
+.hk-table-header-row {
+  border-bottom: 1px solid var(--hi-color-border, rgba(255, 255, 255, 0.08));
+}
+
+.hk-table-header-cell {
+  padding: var(--hi-space-12, 12px) var(--hi-space-16, 16px);
+  text-align: left;
+  font-size: var(--hi-text-xs, 0.75rem);
+  font-weight: 600;
+  color: var(--hi-color-text-secondary, #8b949e);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.hk-table-header-sortable {
+  cursor: pointer;
+  transition: color var(--hi-duration-short, 0.15s) var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
+
+  &:hover {
+    color: var(--hi-color-primary, #58a6ff);
+  }
+}
+
+.hk-table-header-sorted {
+  color: var(--hi-color-primary, #58a6ff);
+}
+
+.hk-table-header-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.hk-table-sort-icon {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+  vertical-align: middle;
+  transition: transform var(--hi-duration-short, 0.15s) var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.hk-table-sort-icon-desc {
+  transform: rotate(180deg);
+}
+
+.hk-table-body {
+  .hk-table-row {
+    border-bottom: 1px solid var(--hi-color-border, rgba(255, 255, 255, 0.05));
+  }
+}
+
+.hk-table-hover .hk-table-row:hover {
+  background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.04));
+}
+
+.hk-table-striped .hk-table-row:nth-child(even) {
+  background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.03));
+}
+
+.hk-table-bordered {
+  border: 1px solid var(--hi-color-border, rgba(255, 255, 255, 0.1));
+  border-radius: var(--hi-radius-md, 8px);
+
+  .hk-table-header-cell,
+  .hk-table-cell {
+    border: 1px solid var(--hi-color-border, rgba(255, 255, 255, 0.06));
+  }
+
+  .hk-table-header-cell {
+    border-bottom: 2px solid var(--hi-color-border, rgba(255, 255, 255, 0.1));
+  }
+}
+
+.hk-table-cell {
+  padding: var(--hi-space-12, 12px) var(--hi-space-16, 16px);
+  color: var(--hi-color-text-primary, #c9d1d9);
+  vertical-align: middle;
+}
+
+/* Size variants */
+.hk-table-sm {
+  .hk-table-header-cell,
+  .hk-table-cell {
+    padding: var(--hi-space-4, 4px) var(--hi-space-8, 8px);
+    font-size: var(--hi-text-xs, 0.75rem);
+  }
+}
+
+.hk-table-md {
+  .hk-table-header-cell,
+  .hk-table-cell {
+    padding: var(--hi-space-8, 8px) var(--hi-space-12, 12px);
+  }
+}
+
+.hk-table-lg {
+  .hk-table-header-cell,
+  .hk-table-cell {
+    padding: var(--hi-space-16, 16px) var(--hi-space-24, 24px);
+  }
+}
+
+.hk-table-empty {
+  padding: var(--hi-space-32, 32px) var(--hi-space-16, 16px);
+  text-align: center;
+  color: var(--hi-color-text-secondary, #8b949e);
+}
+
+/* Alignment helpers */
+.hk-text-left {
+  text-align: left;
+}
+
+.hk-text-center {
+  text-align: center;
+}
+
+.hk-text-right {
+  text-align: right;
+}
+
+/* Checkbox styles inline */
+.hk-table-checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.hk-table-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.hk-table-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 2px solid var(--hi-color-border, rgba(255, 255, 255, 0.2));
+  border-radius: var(--hi-radius-sm, 4px);
+  background: transparent;
+  transition:
+    background-color var(--hi-duration-short, 0.15s) var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1)),
+    border-color var(--hi-duration-short, 0.15s) var(--hi-ease-default, cubic-bezier(0.4, 0, 0.2, 1));
+
+  &-md {
+    width: 16px;
+    height: 16px;
+  }
+
+  &-checked {
+    background: var(--hi-color-primary, #58a6ff);
+    border-color: var(--hi-color-primary, #58a6ff);
+  }
+
+  .hk-table-checkbox-input:focus-visible + & {
+    box-shadow:
+      0 0 0 2px var(--hi-color-bg-canvas, #0d1117),
+      0 0 0 4px var(--hi-color-primary, #58a6ff);
+  }
+}
+
+.hk-table-checkbox-icon {
+  width: 12px;
+  height: 12px;
+  color: var(--hi-color-text-on-primary, #ffffff);
+}
+
+/* SR-only utility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}