@mkbabb/glass-ui 0.3.0 → 2.1.0

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

@@ -1,115 +0,0 @@
-<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/timeline/GlassTimeline.vue

@@ -1,174 +0,0 @@
-<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

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

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

@@ -1,239 +0,0 @@
-<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>