@celestia-island/hikari 0.4.4

package/src/components/HkMorphingTabs.scss

@@ -0,0 +1,141 @@
+.hk-morphing-tabs {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.hk-morphing-tabs-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.hk-morphing-tabs-triggers {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  border-radius: var(--hi-radius-sm, 4px);
+  border: 1px solid color-mix(in srgb, var(--hi-color-border) 12%, transparent);
+  padding: 2px;
+  background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
+}
+
+.hk-morphing-tabs-indicator {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  height: calc(100% - 4px);
+  width: calc((100% - 4px) / var(--tab-count, 1));
+  border-radius: var(--hi-radius-sm, 4px);
+  background: color-mix(in srgb, var(--hi-color-primary) 12%, transparent);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 8%);
+  pointer-events: none;
+  z-index: 0;
+  transform: translateX(calc(var(--tab-index, 0) * 100%));
+  transition: transform var(--hi-duration-normal, 0.3s) ease;
+}
+
+.hk-morphing-tabs-trigger {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 0;
+  padding: 4px 14px;
+  font-size: var(--hi-text-sm, 0.875rem);
+  font-weight: 600;
+  border-radius: var(--hi-radius-sm, 4px);
+  border: none;
+  background: transparent;
+  color: var(--hi-color-muted);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--hi-duration-normal, 0.3s) ease;
+
+  &:hover:not(:disabled) {
+    color: var(--hi-color-text-primary);
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.hk-morphing-tabs-trigger-active {
+  color: var(--hi-color-primary, rgb(88 166 255));
+}
+
+.hk-morphing-tabs-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-morphing-tabs-panel {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-morphing-tabs-footer {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows var(--hi-duration-normal, 0.3s) ease;
+  overflow: hidden;
+}
+
+.hk-morphing-tabs-footer-inner {
+  width: 100%;
+  min-height: 0;
+}
+
+.hk-morphing-crossfade-enter-active {
+  transition:
+    opacity var(--hi-duration-normal, 0.3s) ease,
+    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-morphing-crossfade-leave-active {
+  transition:
+    opacity var(--hi-duration-fast, 0.15s) ease,
+    transform var(--hi-duration-fast, 0.15s) ease-in;
+}
+
+.hk-morphing-crossfade-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.hk-morphing-crossfade-leave-to {
+  opacity: 0;
+  transform: translateY(4px);
+}
+
+.hk-morphing-bar-enter-active {
+  transition:
+    opacity var(--hi-duration-normal, 0.3s) ease,
+    transform var(--hi-duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-morphing-bar-leave-active {
+  transition:
+    opacity var(--hi-duration-fast, 0.15s) ease,
+    transform var(--hi-duration-fast, 0.15s) ease-in;
+}
+
+.hk-morphing-bar-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+.hk-morphing-bar-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}

package/src/components/HkMorphingTabs.tsx

@@ -0,0 +1,113 @@
+import { computed, defineComponent, onMounted, ref, Teleport, Transition, type PropType } from "vue";
+
+import "./HkMorphingTabs.scss";
+
+export interface TabItem {
+  key: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export default defineComponent({
+  name: "HkMorphingTabs",
+  props: {
+    modelValue: { type: String, required: true },
+    tabs: { type: Array as PropType<TabItem[]>, required: true },
+    teleportTo: { type: String, default: undefined },
+    tag: { type: String, default: "div" },
+    hideTriggers: { type: Boolean, default: false },
+  },
+  emits: {
+    "update:modelValue": (_value: string) => true,
+  },
+  setup(props, { emit, slots }) {
+    const activeKey = computed(() => props.modelValue);
+    const ready = ref(false);
+
+    const tabCount = computed(() => props.tabs.length);
+    const tabIndex = computed(() => {
+      const idx = props.tabs.findIndex((t) => t.key === activeKey.value);
+      return idx >= 0 ? idx : 0;
+    });
+
+    const indicatorStyle = computed(
+      () =>
+        ({
+          "--tab-count": tabCount.value,
+          "--tab-index": tabIndex.value,
+        }) as Record<string, string | number>,
+    );
+
+    onMounted(() => {
+      ready.value = true;
+    });
+
+    function renderTriggers() {
+      if (props.hideTriggers) return null;
+      return (
+        <div class="hk-morphing-tabs-triggers" role="tablist">
+          <div class="hk-morphing-tabs-indicator" style={indicatorStyle.value} />
+          {props.tabs.map((tab) => {
+            const isActive = activeKey.value === tab.key;
+            return (
+              <button
+                key={tab.key}
+                role="tab"
+                aria-selected={isActive}
+                aria-controls={`hk-morphing-tabpanel-${tab.key}`}
+                tabindex={isActive ? 0 : -1}
+                disabled={tab.disabled}
+                class={[
+                  "hk-morphing-tabs-trigger",
+                  { "hk-morphing-tabs-trigger-active": isActive },
+                ]}
+                onClick={() => emit("update:modelValue", tab.key)}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+      );
+    }
+
+    return () => {
+      const Tag = props.tag as "div" | "section" | "nav";
+      const triggerContent = renderTriggers();
+
+      return (
+        <Tag class="hk-morphing-tabs">
+          {props.teleportTo ? (
+            ready.value && <Teleport to={props.teleportTo}>{triggerContent}</Teleport>
+          ) : (
+            <div class="hk-morphing-tabs-header">{triggerContent}</div>
+          )}
+
+          <div class="hk-morphing-tabs-content">
+            <Transition name="hk-morphing-crossfade" mode="out-in" appear>
+              <div
+                key={activeKey.value}
+                class="hk-morphing-tabs-panel"
+                role="tabpanel"
+                id={`hk-morphing-tabpanel-${activeKey.value}`}
+                aria-label={props.tabs.find((t) => t.key === activeKey.value)?.label}
+              >
+                {slots[activeKey.value]?.()}
+              </div>
+            </Transition>
+          </div>
+
+          {slots.footer && (
+            <div class="hk-morphing-tabs-footer">
+              <Transition name="hk-morphing-bar" mode="out-in" appear>
+                <div key={activeKey.value} class="hk-morphing-tabs-footer-inner">
+                  {slots.footer({ activeKey: activeKey.value })}
+                </div>
+              </Transition>
+            </div>
+          )}
+        </Tag>
+      );
+    };
+  },
+});

package/src/components/HkNavItem.scss

@@ -0,0 +1,81 @@
+.hk-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--hi-radius-md, 6px);
+  color: var(--hi-color-muted);
+  font-size: 0.875rem;
+  font-family: inherit;
+  line-height: 1.4;
+  text-decoration: none;
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color var(--hi-duration-fast, 0.15s) ease,
+    color var(--hi-duration-fast, 0.15s) ease;
+  user-select: none;
+
+  &:hover:not([data-disabled]) {
+    background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
+    color: var(--hi-color-text-primary);
+  }
+
+  &[data-active] {
+    background: color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
+    color: var(--hi-color-primary);
+    font-weight: 600;
+  }
+
+  &[data-disabled] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
+
+.hk-nav-item-button {
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--hi-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+.hk-nav-item-link {
+  &:focus-visible {
+    outline: 2px solid var(--hi-color-primary);
+    outline-offset: 2px;
+  }
+}
+
+.hk-nav-item-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+}
+
+.hk-nav-item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hk-nav-item-arrow {
+  transition: transform 0.2s;
+}
+
+.hk-nav-item-arrow-expanded {
+  transform: rotate(90deg);
+}
+
+.hk-nav-item-children {
+  padding-left: 1rem;
+  overflow: hidden;
+}

package/src/components/HkNavItem.tsx

@@ -0,0 +1,157 @@
+import { defineComponent, computed, ref, type PropType } from "vue";
+import type { Component } from "vue";
+import { ChevronRight } from "lucide-vue-next";
+import "./HkNavItem.scss";
+
+interface NavItemChild {
+  id: string;
+  label: string;
+  icon?: Component;
+  active?: boolean;
+  badge?: string;
+}
+
+function buildClass(props: { active: boolean; disabled: boolean }, extra: string[] = []) {
+  return [
+    "hk-nav-item",
+    ...extra,
+    props.active ? "hk-nav-item-active" : "",
+    props.disabled ? "hk-nav-item-disabled" : "",
+  ];
+}
+
+export default defineComponent({
+  name: "HkNavItem",
+  props: {
+    active: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    to: { type: String, default: undefined },
+    href: { type: String, default: undefined },
+    children: { type: Array as PropType<NavItemChild[]>, default: undefined },
+  },
+  emits: {
+    click: (_e: MouseEvent) => true,
+  },
+  setup(props, { slots, emit }) {
+    const expanded = ref(false);
+
+    function toggle() {
+      expanded.value = !expanded.value;
+    }
+
+    const content = () => (
+      <>
+        {slots.icon ? <span class="hk-nav-item-icon">{slots.icon()}</span> : null}
+        {slots.default ? <span class="hk-nav-item-label">{slots.default()}</span> : null}
+      </>
+    );
+
+    const dataAttrs = computed(() => ({
+      "data-active": props.active ? "" : undefined,
+      "data-disabled": props.disabled ? "" : undefined,
+    }));
+
+    function onClick(e: MouseEvent) {
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      emit("click", e);
+    }
+
+    const arrow = () => (
+      <ChevronRight
+        size={16}
+        class={["hk-nav-item-arrow", expanded.value ? "hk-nav-item-arrow-expanded" : ""]}
+      />
+    );
+
+    const childItems = () => {
+      if (!props.children) return null;
+      return (
+        <div class="hk-nav-item-children">
+          {props.children.map((child) => (
+            <a
+              key={child.id}
+              href={`#${child.id}`}
+              class={[
+                "hk-nav-item",
+                "hk-nav-item-link",
+                child.active ? "hk-nav-item-active" : "",
+              ]}
+              data-active={child.active ? "" : undefined}
+            >
+              {child.icon ? <span class="hk-nav-item-icon">{child.icon}</span> : null}
+              <span class="hk-nav-item-label">{child.label}</span>
+              {child.badge ? <span class="hk-nav-item-badge">{child.badge}</span> : null}
+            </a>
+          ))}
+        </div>
+      );
+    };
+
+    return () => {
+      if (props.children) {
+        const cls = buildClass(props, ["hk-nav-item-button"]);
+        return (
+          <div>
+            <button
+              type="button"
+              class={cls}
+              {...dataAttrs.value}
+              disabled={props.disabled}
+              onClick={toggle}
+            >
+              {content()}
+              {arrow()}
+            </button>
+            {expanded.value ? childItems() : null}
+          </div>
+        );
+      }
+
+      const cls = buildClass(props, ["hk-nav-item-link"]);
+
+      if (props.to) {
+        return (
+          <a
+            href={props.to}
+            class={cls}
+            {...dataAttrs.value}
+            aria-disabled={props.disabled}
+            aria-current={props.active ? "page" : undefined}
+            onClick={onClick}
+          >
+            {content()}
+          </a>
+        );
+      }
+
+      if (props.href) {
+        return (
+          <a
+            href={props.href}
+            class={cls}
+            {...dataAttrs.value}
+            aria-disabled={props.disabled}
+            onClick={onClick}
+          >
+            {content()}
+          </a>
+        );
+      }
+
+      return (
+        <button
+          type="button"
+          class={buildClass(props, ["hk-nav-item-button"])}
+          {...dataAttrs.value}
+          disabled={props.disabled}
+          onClick={(e: MouseEvent) => emit("click", e)}
+        >
+          {content()}
+        </button>
+      );
+    };
+  },
+});

package/src/components/HkNumberInput.scss

@@ -0,0 +1,154 @@
+.hk-number-input {
+  display: block;
+  width: 100%;
+
+  &-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.hk-number-input-inner {
+  display: flex;
+  align-items: center;
+  background: var(--hi-color-surface);
+  border: 1px solid var(--hi-color-border);
+  border-radius: var(--hi-radius-md, 6px);
+  overflow: hidden;
+  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));
+
+  &:hover {
+    border-color: var(--hi-color-primary);
+  }
+
+  &:focus-within {
+    border-color: var(--hi-color-primary);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary) 12%, transparent);
+  }
+}
+
+.hk-number-input-field {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--hi-color-text-primary);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0 0.75rem;
+
+  &::placeholder {
+    color: var(--hi-color-muted);
+    opacity: 0.6;
+  }
+
+  -moz-appearance: textfield;
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+.hk-number-input-prefix,
+.hk-number-input-suffix {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--hi-color-muted);
+  font-size: 0.875rem;
+}
+
+.hk-number-input-prefix {
+  padding-left: 0.75rem;
+}
+
+.hk-number-input-suffix {
+  padding-right: 0.5rem;
+}
+
+.hk-number-input-steppers {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-left: 1px solid var(--hi-color-border);
+}
+
+.hk-number-input-step {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 50%;
+  padding: 0;
+  background: transparent;
+  border: none;
+  color: var(--hi-color-muted);
+  cursor: pointer;
+  transition:
+    background-color var(--hi-duration-fast, 0.15s) ease,
+    color var(--hi-duration-fast, 0.15s) ease;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--hi-color-surface) 60%, transparent);
+    color: var(--hi-color-text-primary);
+  }
+
+  &:active:not(:disabled) {
+    background: color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
+    color: var(--hi-color-primary);
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+}
+
+/* --- Size variants --- */
+
+.hk-number-input-sm .hk-number-input-field {
+  font-size: 0.75rem;
+  padding: 0 0.5rem;
+  height: 1.75rem;
+}
+
+.hk-number-input-sm .hk-number-input-step {
+  width: 1.25rem;
+}
+
+.hk-number-input-sm .hk-number-input-step svg {
+  width: 12px;
+  height: 12px;
+}
+
+.hk-number-input-md .hk-number-input-field {
+  font-size: 0.875rem;
+  padding: 0 0.75rem;
+  height: 2.25rem;
+}
+
+.hk-number-input-md .hk-number-input-step {
+  width: 1.5rem;
+}
+
+.hk-number-input-lg .hk-number-input-field {
+  font-size: 1rem;
+  padding: 0 1rem;
+  height: 2.75rem;
+}
+
+.hk-number-input-lg .hk-number-input-step {
+  width: 1.75rem;
+}
+
+.hk-number-input-lg .hk-number-input-step svg {
+  width: 16px;
+  height: 16px;
+}