@celestia-island/hikari 0.4.4

package/src/components/HkNumberInput.tsx

@@ -0,0 +1,161 @@
+import { computed, defineComponent, onUnmounted, ref, type PropType } from "vue";
+import "./HkNumberInput.scss";
+
+export default defineComponent({
+  name: "HkNumberInput",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    min: { type: Number, default: undefined },
+    max: { type: Number, default: undefined },
+    step: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: undefined },
+    size: {
+      type: String as PropType<"sm" | "md" | "lg">,
+      default: "md",
+    },
+  },
+  emits: {
+    "update:modelValue": (_value: number) => true,
+  },
+  setup(props, { emit, slots }) {
+    let holdInterval: ReturnType<typeof setInterval> | null = null;
+    let holdTimeout: ReturnType<typeof setTimeout> | null = null;
+    const inputRef = ref<HTMLInputElement | null>(null);
+
+    const canIncrement = computed(() =>
+      props.max != null ? props.modelValue < props.max : true,
+    );
+    const canDecrement = computed(() =>
+      props.min != null ? props.modelValue > props.min : true,
+    );
+
+    function emitValue(val: number) {
+      if (props.min != null && val < props.min) {
+        emit("update:modelValue", props.min);
+        return;
+      }
+      if (props.max != null && val > props.max) {
+        emit("update:modelValue", props.max);
+        return;
+      }
+      emit("update:modelValue", val);
+    }
+
+    function increment() {
+      if (!canIncrement.value) return;
+      emitValue(props.modelValue + props.step);
+    }
+
+    function decrement() {
+      if (!canDecrement.value) return;
+      emitValue(props.modelValue - props.step);
+    }
+
+    function startHold(dir: "up" | "down") {
+      stopHold();
+      holdTimeout = setTimeout(() => {
+        holdInterval = setInterval(() => {
+          if (dir === "up") increment();
+          else decrement();
+        }, 50);
+      }, 300);
+    }
+
+    function stopHold() {
+      if (holdTimeout) clearTimeout(holdTimeout);
+      if (holdInterval) clearInterval(holdInterval);
+      holdTimeout = null;
+      holdInterval = null;
+    }
+
+    onUnmounted(stopHold);
+
+    const wrapperClass = computed(() => [
+      "hk-number-input",
+      `hk-number-input-${props.size}`,
+      props.disabled ? "hk-number-input-disabled" : "",
+    ]);
+
+    return () => (
+      <div class={wrapperClass.value}>
+        <div class="hk-number-input-inner">
+          {slots.prefix ? (
+            <span class="hk-number-input-prefix">{slots.prefix()}</span>
+          ) : null}
+          <input
+            ref={inputRef}
+            type="number"
+            class="hk-number-input-field"
+            value={props.modelValue}
+            min={props.min}
+            max={props.max}
+            step={props.step}
+            disabled={props.disabled}
+            placeholder={props.placeholder}
+            onInput={(e: Event) =>
+              emitValue(Number((e.target as HTMLInputElement).value))
+            }
+          />
+          {slots.suffix ? (
+            <span class="hk-number-input-suffix">{slots.suffix()}</span>
+          ) : null}
+          <div class="hk-number-input-steppers">
+            <button
+              type="button"
+              class="hk-number-input-step hk-number-input-step-up"
+              disabled={!canIncrement.value || props.disabled}
+              onMousedown={(e: MouseEvent) => {
+                e.preventDefault();
+                startHold("up");
+              }}
+              onMouseup={(e: MouseEvent) => {
+                e.preventDefault();
+                stopHold();
+              }}
+              onMouseleave={(e: MouseEvent) => {
+                e.preventDefault();
+                stopHold();
+              }}
+              onClick={(e: MouseEvent) => {
+                e.preventDefault();
+                increment();
+              }}
+              tabindex={-1}
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14">
+                <polyline points="18 15 12 9 6 15" />
+              </svg>
+            </button>
+            <button
+              type="button"
+              class="hk-number-input-step hk-number-input-step-down"
+              disabled={!canDecrement.value || props.disabled}
+              onMousedown={(e: MouseEvent) => {
+                e.preventDefault();
+                startHold("down");
+              }}
+              onMouseup={(e: MouseEvent) => {
+                e.preventDefault();
+                stopHold();
+              }}
+              onMouseleave={(e: MouseEvent) => {
+                e.preventDefault();
+                stopHold();
+              }}
+              onClick={(e: MouseEvent) => {
+                e.preventDefault();
+                decrement();
+              }}
+              tabindex={-1}
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="14" height="14">
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  },
+});

package/src/components/HkPasswordInput.scss

@@ -0,0 +1,289 @@
+.hk-pwd-wrapper {
+  display: block;
+  width: 100%;
+}
+
+.hk-pwd-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-bottom: 0.375rem;
+  color: var(--hi-color-text-primary, #333);
+}
+
+.hk-pwd-required {
+  margin-left: 0.125rem;
+  color: var(--hi-color-danger, #f85149);
+}
+
+.hk-pwd-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--hi-color-surface, rgba(255, 255, 255, 0.95));
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--hi-color-border, rgba(0, 0, 0, 0.08));
+  border-radius: 6px;
+  overflow: hidden;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.hk-pwd-box:hover:not([data-disabled]) {
+  border-color: var(--hi-color-primary, #58a6ff);
+}
+
+.hk-pwd-box:focus-within,
+.hk-pwd-box[data-focused] {
+  border-color: var(--hi-color-primary, #58a6ff);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 15%, transparent);
+}
+
+.hk-pwd-box[data-error] {
+  border-color: var(--hi-color-danger, #f85149);
+}
+
+.hk-pwd-box[data-error][data-focused] {
+  border-color: var(--hi-color-danger, #f85149);
+  box-shadow: 0 0 0 3px rgba(248, 81, 73, 0.15);
+}
+
+.hk-pwd-box[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.hk-pwd-box[data-fw] {
+  border-color: var(--hi-color-warning, #d29922);
+}
+
+.hk-pwd-box[data-flash] {
+  animation: hk-pwd-flash 0.3s ease-out;
+}
+
+@keyframes hk-pwd-flash {
+  0% {
+    border-color: var(--hi-color-primary, #58a6ff);
+    box-shadow:
+      0 0 22px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 38%, transparent),
+      inset 0 0 10px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 7%, transparent);
+  }
+  100% {
+    border-color: var(--hi-color-primary, #58a6ff);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary, #58a6ff) 15%, transparent);
+  }
+}
+
+.hk-pwd-lock {
+  position: relative;
+  z-index: 1;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    color 0.3s ease,
+    filter 0.3s ease;
+}
+
+.hk-pwd-lock-empty {
+  color: var(--hi-color-text-secondary, #666);
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.hk-pwd-lock-filled {
+  color: var(--hi-color-primary, #58a6ff);
+  cursor: pointer;
+}
+
+.hk-pwd-box:focus-within .hk-pwd-lock,
+.hk-pwd-box[data-focused] .hk-pwd-lock {
+  color: var(--hi-color-primary, #58a6ff);
+  filter: drop-shadow(0 0 5px currentColor);
+}
+
+.hk-pwd-lock[data-revealing] {
+  color: var(--hi-color-primary, #58a6ff);
+  filter: drop-shadow(0 0 6px currentColor);
+}
+
+.hk-pwd-dots {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.hk-pwd-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  pointer-events: none;
+  user-select: none;
+  font-size: 0.875rem;
+  color: var(--hi-color-primary, rgba(88, 166, 255, 0.7));
+  animation: hk-pwd-breathe 3s ease-in-out infinite;
+}
+
+.hk-pwd-box[data-focused] .hk-pwd-placeholder {
+  color: var(--hi-color-primary, rgba(88, 166, 255, 0.85));
+}
+
+@keyframes hk-pwd-breathe {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.hk-pwd-blur-hint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  user-select: none;
+  font-size: 0.8125rem;
+  font-style: italic;
+  color: var(--hi-color-text-secondary, #666);
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.hk-pwd-blur-hint:hover {
+  color: var(--hi-color-text-primary, #333);
+}
+
+.hk-pwd-blur-hint:active {
+  color: var(--hi-color-primary, #58a6ff);
+}
+
+.hk-pwd-select-hint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  user-select: none;
+  font-size: 0.8125rem;
+  font-style: italic;
+  color: var(--hi-color-text-secondary, #666);
+  pointer-events: none;
+}
+
+.hk-pwd-reveal-text {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  pointer-events: none;
+  user-select: none;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  font-size: 0.8125rem;
+  letter-spacing: 0.04em;
+  color: var(--hi-color-text-primary, #333);
+}
+
+.hk-pwd-input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: text;
+  font-size: 1rem;
+  z-index: 2;
+}
+
+.hk-pwd-strength {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 50%;
+  z-index: 1;
+  pointer-events: none;
+  transition:
+    background 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+.hk-pwd-strength[data-level="weak"] {
+  background: var(--hi-color-danger, #f85149);
+  box-shadow: 0 0 6px rgba(248, 81, 73, 0.6);
+}
+
+.hk-pwd-strength[data-level="fair"] {
+  background: var(--hi-color-warning, #d29922);
+  box-shadow: 0 0 6px rgba(210, 153, 34, 0.6);
+}
+
+.hk-pwd-strength[data-level="strong"] {
+  background: var(--hi-color-success, #3fb950);
+  box-shadow: 0 0 6px rgba(63, 185, 80, 0.6);
+}
+
+.hk-pwd-hints {
+  min-height: 0;
+}
+
+.hk-pwd-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+}
+
+.hk-pwd-hint[data-variant="caps"] {
+  color: var(--hi-color-warning, #d29922);
+}
+
+.hk-pwd-hint[data-variant="fw"] {
+  color: var(--hi-color-danger, #f85149);
+}
+
+.hk-pwd-hint-enter-active,
+.hk-pwd-hint-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.hk-pwd-hint-enter-from,
+.hk-pwd-hint-leave-to {
+  opacity: 0;
+}
+
+.hk-pwd-error {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--hi-color-danger, #f85149);
+}
+
+.hk-pwd-hint-text {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--hi-color-text-secondary, #666);
+}
+
+.hk-pwd-box input:-webkit-autofill,
+.hk-pwd-box input:-webkit-autofill:hover,
+.hk-pwd-box input:-webkit-autofill:focus,
+.hk-pwd-box input:-webkit-autofill:active {
+  -webkit-text-fill-color: var(--hi-color-text-primary, #333) !important;
+  caret-color: var(--hi-color-text-primary, #333);
+  box-shadow: 0 0 0 1000px var(--hi-color-surface, #fff) inset !important;
+  transition: background-color calc(infinity * 1s) step-end, color calc(infinity * 1s) step-end;
+}