@mkbabb/glass-ui 0.2.0

package/src/components/custom/tabs/UnderlineTabs.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted, nextTick, type HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+export interface TabOption {
+    label: string;
+    value: string;
+}
+
+const props = defineProps<{
+    options: TabOption[];
+    modelValue: string;
+    class?: HTMLAttributes["class"];
+}>();
+
+const emit = defineEmits<{
+    "update:modelValue": [value: string];
+}>();
+
+const containerRef = ref<HTMLElement | null>(null);
+const buttonRefs = ref<HTMLElement[]>([]);
+const underlineStyle = ref<Record<string, string>>({
+    width: "0px",
+    transform: "translateX(0px)",
+});
+
+function updateUnderline() {
+    const idx = props.options.findIndex((o) => o.value === props.modelValue);
+    if (idx < 0 || !buttonRefs.value[idx]) return;
+    const btn = buttonRefs.value[idx];
+    underlineStyle.value = {
+        width: `${btn.offsetWidth}px`,
+        transform: `translateX(${btn.offsetLeft}px)`,
+    };
+}
+
+function select(value: string) {
+    emit("update:modelValue", value);
+}
+
+watch(() => props.modelValue, () => nextTick(updateUnderline));
+watch(() => props.options, () => nextTick(updateUnderline), { deep: true });
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+    nextTick(updateUnderline);
+    if (containerRef.value) {
+        resizeObserver = new ResizeObserver(() => updateUnderline());
+        resizeObserver.observe(containerRef.value);
+    }
+});
+
+onUnmounted(() => {
+    resizeObserver?.disconnect();
+});
+</script>
+
+<template>
+    <div ref="containerRef" :class="cn('underline-tabs', props.class)">
+        <div class="underline-indicator" :style="underlineStyle" />
+        <button
+            v-for="(option, idx) in options"
+            :key="option.value"
+            :ref="(el) => { if (el) buttonRefs[idx] = el as HTMLElement }"
+            class="underline-tab"
+            :class="{ 'is-active': modelValue === option.value }"
+            @click="select(option.value)"
+        >
+            {{ option.label }}
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.underline-tabs {
+    position: relative;
+    display: flex;
+    gap: 0.25rem;
+}
+
+.underline-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background: var(--foreground);
+    border-radius: var(--radius-sm);
+    transition:
+        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
+        width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.underline-tab {
+    position: relative;
+    border: none;
+    background: none;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    padding: 0.375rem 0.75rem;
+    font: inherit;
+    color: var(--muted-foreground);
+    transition: color var(--duration-normal) var(--ease-standard);
+    border-radius: 0.25rem;
+}
+
+.underline-tab:hover {
+    color: color-mix(in srgb, var(--foreground) 70%, transparent);
+}
+
+.underline-tab.is-active {
+    color: var(--foreground);
+}
+</style>

package/src/components/custom/tabs/index.ts

@@ -0,0 +1,5 @@
+export { default as UnderlineTabs } from "./UnderlineTabs.vue";
+export { default as BouncyTabs } from "./BouncyTabs.vue";
+export { default as BouncyToggle } from "./BouncyToggle.vue";
+export type { TabOption } from "./UnderlineTabs.vue";
+export type { ToggleOption, BouncyToggleProps } from "./BouncyToggle.vue";

package/src/components/custom/timeline/GlassTimeline.vue

@@ -0,0 +1,174 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps<{
+    modelValue: number;
+    label?: string;
+}>();
+
+const emit = defineEmits<{
+    "update:modelValue": [v: number];
+    scrubStart: [];
+    scrubEnd: [];
+}>();
+
+const trackRef = ref<HTMLElement>();
+const scrubbing = ref(false);
+
+function tFromPointer(e: PointerEvent): number {
+    const rect = trackRef.value!.getBoundingClientRect();
+    return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+}
+
+function onTrackDown(e: PointerEvent) {
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    scrubbing.value = true;
+    emit("scrubStart");
+    emit("update:modelValue", tFromPointer(e));
+}
+
+function onTrackMove(e: PointerEvent) {
+    if (!scrubbing.value) return;
+    emit("update:modelValue", tFromPointer(e));
+}
+
+function onTrackUp() {
+    scrubbing.value = false;
+    emit("scrubEnd");
+}
+
+function onTrackKeydown(e: KeyboardEvent) {
+    const step = e.shiftKey ? 0.1 : 0.01;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        emit("update:modelValue", Math.min(1, props.modelValue + step));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        emit("update:modelValue", Math.max(0, props.modelValue - step));
+    }
+}
+</script>
+
+<template>
+    <div class="timeline-row">
+        <div v-if="label" class="timeline-caret" :style="{ left: (modelValue * 100) + '%' }">
+            <span class="caret-value font-mono-code">{{ label }}</span>
+        </div>
+        <div
+            ref="trackRef"
+            class="glass-track"
+            role="slider"
+            tabindex="0"
+            :aria-valuenow="modelValue"
+            aria-valuemin="0"
+            aria-valuemax="1"
+            aria-label="Timeline"
+            @pointerdown="onTrackDown"
+            @pointermove="onTrackMove"
+            @pointerup="onTrackUp"
+            @pointercancel="onTrackUp"
+            @keydown="onTrackKeydown"
+        >
+            <div class="glass-fill" :style="{ width: (modelValue * 100) + '%' }" />
+            <div class="glass-thumb" :style="{ left: (modelValue * 100) + '%' }" />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.timeline-row {
+    flex: 1 1 0;
+    min-width: 0;
+    padding: 0 0.25rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.timeline-caret {
+    position: absolute;
+    bottom: calc(100% + 6px);
+    transform: translateX(-50%);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+    z-index: var(--z-popover);
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.timeline-row:hover .timeline-caret,
+.timeline-row:has(.glass-track:active) .timeline-caret {
+    opacity: 1;
+}
+
+.caret-value {
+    display: block;
+    padding: 0.125rem 0.375rem;
+    font-size: var(--type-small);
+    font-weight: 500;
+    color: var(--popover-foreground);
+    background: var(--popover);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-sm);
+    white-space: nowrap;
+}
+
+.glass-track {
+    position: relative;
+    width: 100%;
+    height: 24px;
+    border-radius: var(--radius-pill);
+    background: color-mix(in srgb, var(--foreground) 5%, transparent);
+    backdrop-filter: var(--glass-blur-subtle);
+    -webkit-backdrop-filter: var(--glass-blur-subtle);
+    cursor: pointer;
+    touch-action: none;
+    overflow: hidden;
+    transition: background var(--duration-fast) var(--ease-standard);
+    outline: none;
+}
+
+.glass-track:hover,
+.glass-track:focus-visible {
+    background: color-mix(in srgb, var(--foreground) 8%, transparent);
+}
+
+.glass-track:focus-visible {
+    box-shadow: var(--focus-ring-shadow);
+}
+
+.glass-fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    background: color-mix(in srgb, var(--foreground) 7%, transparent);
+    border-radius: var(--radius-pill);
+    pointer-events: none;
+}
+
+.glass-thumb {
+    position: absolute;
+    top: 50%;
+    transform: translate(calc(-50% - 3px), -50%);
+    width: 6px;
+    height: 16px;
+    border-radius: var(--radius-sm);
+    background: color-mix(in srgb, var(--foreground) 25%, transparent);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--duration-fast) var(--ease-standard),
+        width var(--duration-fast) var(--ease-standard),
+        height var(--duration-fast) var(--ease-standard),
+        background var(--duration-fast) var(--ease-standard);
+}
+
+.glass-track:hover .glass-thumb {
+    opacity: 1;
+    width: 8px;
+    height: 18px;
+    background: color-mix(in srgb, var(--foreground) 40%, transparent);
+}
+</style>

package/src/components/custom/timeline/index.ts

@@ -0,0 +1 @@
+export { default as GlassTimeline } from "./GlassTimeline.vue";

package/src/components/custom/typewriter/TypewriterText.vue

@@ -0,0 +1,239 @@
+<template>
+    <span class="tw-root">
+        <span
+            v-for="(char, index) in leadingChars"
+            :key="index"
+            :class="charClass"
+            @click="handleCharClick(index)"
+        >
+            {{ char }}
+        </span>
+        <span v-if="tailChar !== null" class="tw-tail">
+            <span :class="charClass" @click="handleCharClick(displayTextChars.length - 1)">
+                {{ tailChar }}
+            </span>
+            <span
+                v-if="cursorVisible"
+                class="tw-cursor"
+                :class="{
+                    'tw-cursor--blink': cursorBlink && !typewriter.isTyping.value,
+                }"
+            >
+                {{ cursorChar }}
+            </span>
+        </span>
+        <span
+            v-else-if="cursorVisible"
+            class="tw-cursor"
+            :class="{
+                'tw-cursor--blink': cursorBlink && !typewriter.isTyping.value,
+            }"
+        >
+            {{ cursorChar }}
+        </span>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { watch, onMounted, onUnmounted, computed } from "vue";
+import { useTypewriter } from "./composables/useTypewriter";
+import type { TypewriterWord } from "./types";
+
+interface Props {
+    /** Single text to type. Use this OR `words`, not both. */
+    text?: string;
+    /** Array of words to cycle through in rotation mode. Use this OR `text`, not both. */
+    words?: TypewriterWord[];
+    ngramSize?: number | { min: number; max: number };
+    baseSpeed?: number;
+    variance?: number;
+    errorRate?: number;
+    firstAnimationSpeedFactor?: number;
+    maxCharsBeforeNotice?: number;
+    continueAfterTypoProbability?: number;
+    sequentialTypoDecay?: number;
+    correctionSpeedMultiplier?: number;
+    cursorVisible?: boolean;
+    cursorBlink?: boolean;
+    cursorChar?: string;
+    startDelay?: number;
+    loop?: boolean;
+    /** Pause after typing a word before deleting (ms). Word-rotation mode only. */
+    pauseAfterType?: number;
+    /** Pause after deleting a word before typing the next (ms). Word-rotation mode only. */
+    pauseAfterDelete?: number;
+    /** Backspace speed in word-rotation mode (ms per char). */
+    deletingSpeed?: number;
+    /** Whether clicking characters triggers interactive backspace. */
+    interactive?: boolean;
+    respectReducedMotion?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    text: undefined,
+    words: undefined,
+    ngramSize: () => ({ min: 1, max: 3 }),
+    baseSpeed: 150,
+    variance: 0.4,
+    errorRate: 0.015,
+    firstAnimationSpeedFactor: 0.6,
+    maxCharsBeforeNotice: 4,
+    continueAfterTypoProbability: 0.6,
+    sequentialTypoDecay: 0.3,
+    correctionSpeedMultiplier: 0.5,
+    cursorVisible: true,
+    cursorBlink: true,
+    cursorChar: "|",
+    startDelay: 0,
+    loop: false,
+    pauseAfterType: 3000,
+    pauseAfterDelete: 800,
+    deletingSpeed: 70,
+    interactive: true,
+    respectReducedMotion: true,
+});
+
+const emit = defineEmits<{
+    complete: [];
+    start: [];
+    /** Emitted after each word finishes typing in word-rotation mode. */
+    wordComplete: [index: number];
+}>();
+
+const typewriter = useTypewriter({
+    text: props.text,
+    words: props.words,
+    ngramSize: props.ngramSize,
+    baseSpeed: props.baseSpeed,
+    variance: props.variance,
+    errorRate: props.errorRate,
+    firstAnimationSpeedFactor: props.firstAnimationSpeedFactor,
+    maxCharsBeforeNotice: props.maxCharsBeforeNotice,
+    continueAfterTypoProbability: props.continueAfterTypoProbability,
+    sequentialTypoDecay: props.sequentialTypoDecay,
+    correctionSpeedMultiplier: props.correctionSpeedMultiplier,
+    cursorVisible: props.cursorVisible,
+    cursorBlink: props.cursorBlink,
+    cursorChar: props.cursorChar,
+    loop: props.loop,
+    pauseAfterType: props.pauseAfterType,
+    pauseAfterDelete: props.pauseAfterDelete,
+    deletingSpeed: props.deletingSpeed,
+    respectReducedMotion: props.respectReducedMotion,
+    onComplete: () => emit("complete"),
+    onWordComplete: (index: number) => emit("wordComplete", index),
+});
+
+const { displayText, startTyping, stopTyping, reset, backspaceToPosition } = typewriter;
+
+const displayTextChars = computed(() => displayText.value.split(""));
+const leadingChars = computed(() => displayTextChars.value.slice(0, -1));
+const tailChar = computed(() =>
+    displayTextChars.value.length > 0
+        ? displayTextChars.value[displayTextChars.value.length - 1]
+        : null,
+);
+
+const charClass = computed(() => (props.interactive ? "tw-char tw-char--interactive" : "tw-char"));
+
+function handleCharClick(clickedIndex: number) {
+    if (!props.interactive) return;
+    if (clickedIndex >= displayText.value.length) return;
+
+    if (typewriter.isTyping.value) {
+        stopTyping();
+        setTimeout(() => backspaceToPosition(clickedIndex + 1), 50);
+    } else {
+        backspaceToPosition(clickedIndex + 1);
+    }
+}
+
+// Watch for text changes in single-text mode
+watch(
+    () => props.text,
+    (newText, oldText) => {
+        if (newText !== oldText && newText) {
+            stopTyping();
+            typewriter.updateText(newText);
+            setTimeout(() => {
+                emit("start");
+                startTyping();
+            }, props.startDelay);
+        }
+    },
+);
+
+onMounted(() => {
+    const hasContent = props.text || (props.words && props.words.length > 0);
+    if (hasContent) {
+        setTimeout(() => {
+            emit("start");
+            startTyping();
+        }, props.startDelay);
+    }
+});
+
+onUnmounted(() => {
+    stopTyping();
+});
+
+defineExpose({
+    startTyping,
+    stopTyping,
+    reset,
+    isTyping: typewriter.isTyping,
+    isDeleting: typewriter.isDeleting,
+    currentWord: typewriter.currentWord,
+    currentWordIndex: typewriter.currentWordIndex,
+    pause: typewriter.pause,
+    resume: typewriter.resume,
+    setCharPosition: typewriter.setCharPosition,
+    forceWord: typewriter.forceWord,
+});
+</script>
+
+<style scoped>
+.tw-root {
+    display: inline;
+}
+
+.tw-tail {
+    white-space: nowrap;
+}
+
+.tw-char {
+    display: inline;
+}
+
+.tw-char--interactive {
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    padding: 0 1px;
+    margin: 0 -1px;
+    transition: background-color var(--duration-fast) var(--ease-standard);
+}
+
+.tw-char--interactive:hover {
+    background-color: rgba(128, 128, 128, 0.15);
+}
+
+.tw-cursor {
+    display: inline-block;
+    font-weight: 100;
+}
+
+.tw-cursor--blink {
+    animation: tw-cursor-blink 1.06s step-end infinite;
+}
+
+@keyframes tw-cursor-blink {
+    0%,
+    50% {
+        opacity: 1;
+    }
+    51%,
+    100% {
+        opacity: 0;
+    }
+}
+</style>

package/src/components/custom/typewriter/composables/index.ts

@@ -0,0 +1 @@
+export { useTypewriter } from "./useTypewriter";