@celestia-island/hikari 0.4.4

package/src/components/HkSelectionGrid.scss

@@ -0,0 +1,177 @@
+.hk-selection-grid {
+  margin-bottom: 1rem;
+}
+
+.hk-selection-grid-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  margin: 0 0 0.5rem;
+}
+
+.hk-selection-grid-grid {
+  display: grid;
+  gap: 0.5rem;
+
+  &[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
+  &[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
+  &[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
+
+  &[data-dense] {
+    gap: 0.375rem;
+
+    .hk-selection-grid-item {
+      padding: 0.5rem 0.625rem;
+    }
+  }
+}
+
+.hk-selection-grid-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-radius: 4px;
+  border: 1px solid var(--hi-color-border, #30363d);
+  cursor: pointer;
+  transition:
+    border-color 200ms ease,
+    background 200ms ease,
+    box-shadow 200ms ease;
+  user-select: none;
+
+  &:hover {
+    border-color: var(--hi-color-primary, #58a6ff);
+    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
+    box-shadow: 0 2px 12px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.1);
+  }
+
+  &:active {
+    box-shadow: 0 1px 4px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.06);
+  }
+
+  &[data-selected] {
+    border-color: var(--hi-color-primary, #58a6ff);
+    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.06);
+    box-shadow: 0 0 0 1px var(--hi-color-primary, #58a6ff);
+
+    &:hover {
+      background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.09);
+      box-shadow:
+        0 0 0 1px var(--hi-color-primary, #58a6ff),
+        0 2px 12px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.14);
+    }
+
+    .hk-selection-grid-check {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .hk-selection-grid-icon {
+      color: var(--hi-color-primary, #58a6ff);
+    }
+
+    .hk-selection-grid-name {
+      color: var(--hi-color-primary, #58a6ff);
+      font-weight: 600;
+    }
+  }
+}
+
+.hk-selection-grid-check {
+  position: absolute;
+  top: 0.375rem;
+  right: 0.375rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hi-color-primary, #58a6ff);
+  color: #fff;
+  font-size: 0.625rem;
+  opacity: 0;
+  transform: scale(0.5);
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+}
+
+.hk-selection-grid-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.hk-selection-grid-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.hk-selection-grid-icon {
+  flex-shrink: 0;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  transition: color 200ms ease;
+}
+
+.hk-selection-grid-name {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.4;
+  transition: color 200ms ease;
+}
+
+.hk-selection-grid-desc {
+  font-size: 0.6875rem;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  margin: 0.25rem 0 0;
+  line-height: 1.4;
+}
+
+.hk-selection-grid-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.375rem;
+  height: 1rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  border-radius: 9999px;
+  background: var(--hi-color-bg-subtle, #21262d);
+  color: var(--hi-color-text-tertiary, #8b949e);
+  letter-spacing: 0.02em;
+
+  &[data-variant="primary"] {
+    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.12);
+    color: var(--hi-color-primary, #58a6ff);
+  }
+
+  &[data-variant="success"] {
+    background: rgb(from var(--hi-color-success, #3fb950) r g b / 0.12);
+    color: var(--hi-color-success, #3fb950);
+  }
+
+  &[data-variant="info"] {
+    background: rgb(from var(--hi-color-info, #79c0ff) r g b / 0.12);
+    color: var(--hi-color-info, #79c0ff);
+  }
+}
+
+@media (max-width: 640px) {
+  .hk-selection-grid-grid[data-cols="3"],
+  .hk-selection-grid-grid[data-cols="4"] {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 420px) {
+  .hk-selection-grid-grid[data-cols="2"],
+  .hk-selection-grid-grid[data-cols="3"],
+  .hk-selection-grid-grid[data-cols="4"] {
+    grid-template-columns: 1fr;
+  }
+}

package/src/components/HkSelectionGrid.tsx

@@ -0,0 +1,99 @@
+import { defineComponent, type PropType } from "vue";
+import { Check } from "lucide-vue-next";
+import "./HkSelectionGrid.scss";
+
+export interface SelectionGridItem {
+  id: string;
+  title: string;
+  description?: string;
+  badge?: string;
+  badgeVariant?: string;
+  icon?: ReturnType<typeof defineComponent>;
+}
+
+export type SelectionGridCols = 2 | 3 | 4;
+
+export default defineComponent({
+  name: "HkSelectionGrid",
+  props: {
+    items: { type: Array as PropType<SelectionGridItem[]>, required: true },
+    selectedId: { type: String, default: undefined },
+    columns: { type: Number as PropType<SelectionGridCols>, default: 2 },
+    groupTitle: { type: String, default: undefined },
+    dense: { type: Boolean, default: false },
+  },
+  emits: {
+    select: (_item: SelectionGridItem) => true,
+  },
+  setup(props, { emit }) {
+    return () => {
+      if (!props.items.length) return null;
+
+      return (
+        <div class="hk-selection-grid">
+          {props.groupTitle && (
+            <h4 class="hk-selection-grid-title">{props.groupTitle}</h4>
+          )}
+          <div
+            class="hk-selection-grid-grid"
+            data-cols={props.columns}
+            data-dense={props.dense || undefined}
+          >
+            {props.items.map((item) => {
+              const isSelected = props.selectedId === item.id;
+              const ItemIcon = item.icon;
+
+              return (
+                <div
+                  key={item.id}
+                  role="button"
+                  tabindex={0}
+                  class="hk-selection-grid-item"
+                  data-selected={isSelected || undefined}
+                  aria-selected={isSelected}
+                  onClick={() => emit("select", item)}
+                  onKeydown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      emit("select", item);
+                    }
+                  }}
+                >
+                  <div class="hk-selection-grid-check">
+                    {isSelected && <Check size={14} />}
+                  </div>
+                  <div class="hk-selection-grid-content">
+                    <div class="hk-selection-grid-header">
+                      {ItemIcon && (
+                        <ItemIcon
+                          size={16}
+                          class="hk-selection-grid-icon"
+                        />
+                      )}
+                      <span class="hk-selection-grid-name">
+                        {item.title}
+                      </span>
+                      {item.badge && (
+                        <span
+                          class="hk-selection-grid-badge"
+                          data-variant={item.badgeVariant || undefined}
+                        >
+                          {item.badge}
+                        </span>
+                      )}
+                    </div>
+                    {item.description && (
+                      <p class="hk-selection-grid-desc">
+                        {item.description}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkSelectionWaterfall.scss

@@ -0,0 +1,93 @@
+.hk-selection-waterfall {
+  margin-bottom: 1rem;
+}
+
+.hk-selection-waterfall-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  margin: 0 0 0.5rem;
+}
+
+.hk-selection-waterfall-flow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.hk-selection-waterfall-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 9999px;
+  border: 1px solid var(--hi-color-border, #30363d);
+  font-size: 0.6875rem;
+  cursor: pointer;
+  transition:
+    border-color 200ms ease,
+    background 200ms ease,
+    box-shadow 200ms ease;
+  user-select: none;
+  white-space: nowrap;
+
+  &:hover {
+    border-color: var(--hi-color-primary, #58a6ff);
+    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.04);
+    box-shadow: 0 2px 8px rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.1);
+  }
+
+  &[data-selected] {
+    border-color: var(--hi-color-primary, #58a6ff);
+    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.1);
+    color: var(--hi-color-primary, #58a6ff);
+    font-weight: 500;
+  }
+}
+
+.hk-selection-waterfall-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 50%;
+  background: var(--hi-color-primary, #58a6ff);
+  color: #fff;
+}
+
+.hk-selection-waterfall-name {
+  line-height: 1.5;
+}
+
+.hk-selection-waterfall-tag {
+  font-size: 0.625rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  background: var(--hi-color-bg-subtle, #21262d);
+  color: var(--hi-color-text-tertiary, #8b949e);
+
+  &[data-variant="success"] {
+    background: rgb(from var(--hi-color-success, #3fb950) r g b / 0.12);
+    color: var(--hi-color-success, #3fb950);
+  }
+
+  &[data-variant="info"] {
+    background: rgb(from var(--hi-color-info, #79c0ff) r g b / 0.12);
+    color: var(--hi-color-info, #79c0ff);
+  }
+
+  &[data-variant="primary"] {
+    background: rgb(from var(--hi-color-primary, #58a6ff) r g b / 0.12);
+    color: var(--hi-color-primary, #58a6ff);
+  }
+}
+
+.hk-selection-waterfall-desc {
+  font-size: 0.625rem;
+  color: var(--hi-color-text-tertiary, #8b949e);
+  margin-left: 0.25rem;
+}

package/src/components/HkSelectionWaterfall.tsx

@@ -0,0 +1,90 @@
+import { defineComponent, type PropType } from "vue";
+import { Check } from "lucide-vue-next";
+import "./HkSelectionWaterfall.scss";
+
+export interface WaterfallItem {
+  id: string;
+  title: string;
+  description?: string;
+  tag?: string;
+  tagVariant?: string;
+  image?: string;
+}
+
+export default defineComponent({
+  name: "HkSelectionWaterfall",
+  props: {
+    items: { type: Array as PropType<WaterfallItem[]>, required: true },
+    selectedIds: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    multi: { type: Boolean, default: false },
+    groupTitle: { type: String, default: undefined },
+    minColWidth: { type: Number, default: 140 },
+  },
+  emits: {
+    select: (_item: WaterfallItem) => true,
+  },
+  setup(props, { emit }) {
+    return () => {
+      if (!props.items.length) return null;
+
+      return (
+        <div class="hk-selection-waterfall">
+          {props.groupTitle && (
+            <h4 class="hk-selection-waterfall-title">{props.groupTitle}</h4>
+          )}
+          <div class="hk-selection-waterfall-flow">
+            {props.items.map((item) => {
+              const isSelected = props.multi
+                ? props.selectedIds.includes(item.id)
+                : props.selectedIds.length === 1 &&
+                  props.selectedIds[0] === item.id;
+
+              return (
+                <div
+                  key={item.id}
+                  role="button"
+                  tabindex={0}
+                  class="hk-selection-waterfall-item"
+                  data-selected={isSelected || undefined}
+                  aria-selected={isSelected}
+                  onClick={() => emit("select", item)}
+                  onKeydown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      emit("select", item);
+                    }
+                  }}
+                >
+                  {isSelected && (
+                    <span class="hk-selection-waterfall-check">
+                      <Check size={10} />
+                    </span>
+                  )}
+                  <span class="hk-selection-waterfall-name">
+                    {item.title}
+                  </span>
+                  {item.tag && (
+                    <span
+                      class="hk-selection-waterfall-tag"
+                      data-variant={item.tagVariant || undefined}
+                    >
+                      {item.tag}
+                    </span>
+                  )}
+                  {item.description && (
+                    <span class="hk-selection-waterfall-desc">
+                      {item.description}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkSidebar.scss

@@ -0,0 +1,81 @@
+.hk-sidebar {
+  flex-shrink: 0;
+  height: 100%;
+  transition: width var(--hi-duration-normal, 0.3s) ease;
+}
+
+.hk-sidebar-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--hk-sidebar-bg, var(--hi-color-surface, rgba(255, 255, 255, 0.95)));
+  backdrop-filter: blur(8px);
+  border-right: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  transition: width var(--hi-duration-normal, 0.3s) ease;
+  overflow: hidden;
+}
+
+.hk-sidebar-header {
+  padding: 16px 12px;
+  border-bottom: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  flex-shrink: 0;
+  min-height: 56px;
+  display: flex;
+  align-items: center;
+}
+
+.hk-sidebar-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-block: 20px 4px;
+  padding-inline: var(--space-12);
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--hi-color-border, rgba(0, 0, 0, 0.1));
+    border-radius: 2px;
+  }
+}
+
+.hk-sidebar-footer {
+  padding: 16px 10px;
+  border-top: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.06));
+  flex-shrink: 0;
+}
+
+.hk-sidebar[data-collapsed] {
+  .hk-sidebar-header {
+    justify-content: center;
+    padding: 12px 8px;
+  }
+
+  .hk-sidebar-body {
+    padding-block: 12px 4px;
+  }
+
+  .hk-sidebar-footer {
+    padding: 12px 8px;
+  }
+}
+
+.hk-sidebar[data-mobile] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--hk-sidebar-z, 900);
+  background-color: var(--hk-drawer-overlay-bg, rgba(0, 0, 0, 0.45));
+  width: 100%;
+
+  .hk-sidebar-panel {
+    width: 280px;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
+    border-right: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  }
+}

package/src/components/HkSidebar.tsx

@@ -0,0 +1,45 @@
+import { computed, defineComponent } from "vue";
+
+import "./HkSidebar.scss";
+
+export default defineComponent({
+  name: "HkSidebar",
+  props: {
+    collapsed: { type: Boolean, default: false },
+    mobile: { type: Boolean, default: false },
+    width: { type: String, default: "280px" },
+  },
+  emits: {
+    close: () => true,
+  },
+  setup(props, { emit, slots }) {
+    const panelWidth = computed(() => (props.collapsed ? "56px" : props.width));
+
+    return () => (
+      <aside
+        class="hk-sidebar"
+        data-mobile={props.mobile || undefined}
+        data-collapsed={props.collapsed || undefined}
+        style={props.mobile ? undefined : { width: panelWidth.value }}
+        onClick={(e) => {
+          if (e.target === e.currentTarget && props.mobile) {
+            emit("close");
+          }
+        }}
+      >
+        <nav
+          class="hk-sidebar-panel"
+          style={{ width: props.mobile ? undefined : panelWidth.value }}
+        >
+          {slots.header ? (
+            <header class="hk-sidebar-header">{slots.header()}</header>
+          ) : null}
+          <div class="hk-sidebar-body">{slots.default?.()}</div>
+          {slots.footer ? (
+            <footer class="hk-sidebar-footer">{slots.footer()}</footer>
+          ) : null}
+        </nav>
+      </aside>
+    );
+  },
+});

package/src/components/HkSkeleton.scss

@@ -0,0 +1,44 @@
+.hk-skeleton {
+  display: inline-block;
+  background: color-mix(in srgb, var(--hi-color-primary) 8%, transparent);
+}
+
+.hk-skeleton[data-tone="muted"] {
+  background: color-mix(in srgb, var(--hi-color-text-primary) 12%, transparent);
+}
+
+.hk-skeleton[data-animated] {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--hi-color-primary) 8%, transparent) 25%,
+    color-mix(in srgb, var(--hi-color-primary) 18%, transparent) 50%,
+    color-mix(in srgb, var(--hi-color-primary) 8%, transparent) 75%
+  );
+  background-size: 200% 100%;
+  animation: hk-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.hk-skeleton[data-tone="muted"][data-animated] {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--hi-color-text-primary) 10%, transparent) 25%,
+    color-mix(in srgb, var(--hi-color-text-primary) 22%, transparent) 50%,
+    color-mix(in srgb, var(--hi-color-text-primary) 10%, transparent) 75%
+  );
+  background-size: 200% 100%;
+  animation: hk-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes hk-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.hk-skeleton-list {
+  display: flex;
+  flex-direction: column;
+}

package/src/components/HkSkeleton.tsx

@@ -0,0 +1,30 @@
+import { defineComponent, type PropType } from "vue";
+import "./HkSkeleton.scss";
+
+export type SkeletonTone = "primary" | "muted";
+
+export default defineComponent({
+  name: "HkSkeleton",
+  props: {
+    width: { type: String, default: "100%" },
+    height: { type: String, default: "16px" },
+    radius: { type: String, default: "var(--hk-radius-sm, 4px)" },
+    animated: { type: Boolean, default: true },
+    tone: { type: String as PropType<SkeletonTone>, default: "primary" },
+  },
+  setup(props) {
+    return () => (
+      <div
+        class="hk-skeleton"
+        data-tone={props.tone}
+        data-animated={props.animated || undefined}
+        style={{
+          width: props.width,
+          height: props.height,
+          borderRadius: props.radius,
+        }}
+        aria-hidden="true"
+      />
+    );
+  },
+});

package/src/components/HkSkeletonList.tsx

@@ -0,0 +1,35 @@
+import { defineComponent, type PropType } from "vue";
+import HSkeleton from "./HkSkeleton";
+import type { SkeletonTone } from "./HkSkeleton";
+import "./HkSkeleton.scss";
+
+export default defineComponent({
+  name: "HkSkeletonList",
+  props: {
+    count: { type: Number, default: 3 },
+    itemHeight: { type: String, default: "40px" },
+    gap: { type: String, default: "8px" },
+    tone: { type: String as PropType<SkeletonTone>, default: "primary" },
+  },
+  setup(props) {
+    const items = Array.from({ length: props.count }, (_, i) => i);
+
+    return () => (
+      <div
+        class="hk-skeleton-list"
+        style={{ gap: props.gap }}
+        aria-hidden="true"
+      >
+        {items.map((i) => (
+          <HSkeleton
+            key={i}
+            width="100%"
+            height={props.itemHeight}
+            tone={props.tone}
+            radius={`var(--hk-radius-sm, 4px)`}
+          />
+        ))}
+      </div>
+    );
+  },
+});