@mkbabb/glass-ui 0.2.0

package/src/styles/utilities.css

@@ -0,0 +1,697 @@
+/* Shared utility classes */
+
+@layer components {
+    /* ── Popover/dropdown shared animation ── */
+    .popover-animate {
+        @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+    }
+
+    .slide-in-from-side {
+        @apply data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2;
+    }
+
+    /* ── Scrollbar ── */
+    .scrollbar-hidden {
+        scrollbar-width: none;
+    }
+    .scrollbar-hidden::-webkit-scrollbar {
+        display: none;
+    }
+
+    .scrollbar-thin {
+        scrollbar-width: thin;
+        scrollbar-color: color-mix(in srgb, var(--muted-foreground) 25%, transparent) transparent;
+    }
+
+    /* ── Focus ring — auto-activates on :focus-visible ── */
+    .focus-ring:focus-visible {
+        outline: none;
+        border-radius: var(--radius-pill);
+        box-shadow: var(--focus-ring-shadow);
+    }
+
+    /* ── Button press/interactive states ── */
+    .btn-press {
+        transition: transform var(--duration-fast) var(--ease-standard);
+    }
+    .btn-press:active {
+        transform: scale(var(--scale-press-btn));
+    }
+    .btn-press:disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    .btn-interactive {
+        transition: all var(--duration-fast) var(--ease-standard);
+    }
+    .btn-interactive:hover {
+        transform: scale(var(--scale-hover));
+    }
+    .btn-interactive:active {
+        transform: scale(var(--scale-press));
+    }
+    .btn-interactive:disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+    .btn-interactive:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    /* ── Interactive item (hover bg + focus ring + active scale) ── */
+    .interactive-item {
+        border-radius: var(--radius-lg);
+        user-select: none;
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            transform var(--duration-fast) var(--ease-standard);
+    }
+    .interactive-item:hover {
+        background-color: color-mix(in srgb, var(--accent) 50%, transparent);
+    }
+    .interactive-item:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring-shadow);
+    }
+    .interactive-item:active {
+        transform: scale(0.98);
+    }
+    .interactive-item:disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    /* ── Status dot indicator ── */
+    .status-dot {
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: var(--radius-pill);
+        flex-shrink: 0;
+        transition:
+            color var(--duration-fast) var(--ease-standard),
+            background var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+    .status-dot--active {
+        background: var(--color-status-active, hsl(142 71% 45%));
+    }
+    .status-dot--paused {
+        background: var(--color-status-paused, hsl(48 96% 53%));
+    }
+    .status-dot--idle {
+        background: var(--color-status-idle, var(--muted-foreground));
+    }
+
+    /* ── Paper texture backgrounds ── */
+    .bg-paper-clean {
+        background-image: var(--paper-clean-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        background-blend-mode: multiply;
+    }
+    .bg-paper-aged {
+        background-image: var(--paper-aged-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        background-blend-mode: multiply;
+    }
+
+    /* ── Rainbow text ── */
+    .rainbow-text {
+        background: linear-gradient(
+            90deg,
+            hsl(0 85% 70%),
+            hsl(30 85% 65%),
+            hsl(60 85% 60%),
+            hsl(120 65% 55%),
+            hsl(200 85% 60%),
+            hsl(260 75% 65%),
+            hsl(320 80% 65%)
+        );
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    /* ── Rainbow border ── */
+    .rainbow-border {
+        background:
+            linear-gradient(var(--background), var(--background)) padding-box,
+            linear-gradient(
+                    135deg,
+                    hsl(0 85% 70%),
+                    hsl(60 85% 60%),
+                    hsl(120 65% 55%),
+                    hsl(200 85% 60%),
+                    hsl(260 75% 65%),
+                    hsl(320 80% 65%),
+                    hsl(0 85% 70%)
+                )
+                border-box;
+        border: 2px solid transparent;
+    }
+
+    /* ── Depth text (layered shadow with customizable colors) ── */
+    .depth-text {
+        --depth-color-primary: var(--primary);
+        --depth-color-shadow: var(--shadow);
+
+        color: var(--depth-color-primary);
+        text-shadow:
+            1px 1px 0 var(--depth-color-shadow),
+            2px 2px 0 var(--depth-color-shadow),
+            3px 3px 0 var(--depth-color-shadow),
+            4px 4px 0 var(--depth-color-shadow),
+            5px 5px 0 var(--depth-color-shadow),
+            5px 5px 1px rgba(0, 0, 0, 0.1),
+            2px 2px 2px rgba(0, 0, 0, 0.2),
+            4px 4px 5px rgba(0, 0, 0, 0.25),
+            6px 6px 10px rgba(0, 0, 0, 0.15);
+    }
+
+    /* ── Touch gate (iOS Safari) ── */
+    .touch-gate-target {
+        outline: 2px solid transparent;
+        outline-offset: -2px;
+        transition: outline-color var(--duration-fast) var(--ease-standard);
+    }
+    .touch-gate-active {
+        outline-color: color-mix(in srgb, var(--ring) 25%, transparent);
+    }
+
+    /* ── 3D preserve ── */
+    .preserve-3d {
+        transform-style: preserve-3d;
+    }
+
+    /* ── iOS input font-size fix (prevent auto-zoom) ── */
+    .ios input,
+    .ios select,
+    .ios textarea,
+    .ios [contenteditable] {
+        font-size: max(1rem, 1em);
+    }
+
+    /* ── Scroll fade mask ── */
+    .scroll-fade-mask {
+        mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+        -webkit-mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
+    }
+
+    /* ── Shimmer text effects ── */
+    .gold-shimmer {
+        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
+        background-size: 250% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+        animation: shimmer 5s linear infinite;
+    }
+
+    .blue-shimmer {
+        background: linear-gradient(90deg, #1e40af, #60a5fa, #3b82f6, #60a5fa, #1e40af);
+        background-size: 200% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+        animation: shimmer 3s linear infinite;
+    }
+
+    .gold-shimmer-subtle {
+        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold-dark));
+        background-size: 300% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+        animation: shimmer 8s linear infinite;
+    }
+
+    /* ── Keyboard key ── */
+    .kbd {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 1.5rem;
+        min-width: 1.5rem;
+        padding: 0 0.375rem;
+        font-family: var(--font-mono);
+        font-size: var(--type-micro);
+        background: var(--muted);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+        box-shadow: 0 1px 0 1px color-mix(in srgb, var(--border) 30%, transparent);
+        line-height: 1;
+    }
+
+    /* ── Code badge ── */
+    .code-badge {
+        font-family: var(--font-mono, monospace);
+        font-size: 0.75rem;
+        border-radius: var(--radius-md);
+        border: 1px solid var(--border);
+        padding: 0.125rem 0.375rem;
+    }
+
+    /* ── Input bar — glassmorphic inline input container ── */
+    .input-bar {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        border-radius: var(--radius-2xl);
+        border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
+        background: color-mix(in srgb, var(--card) 80%, transparent);
+        backdrop-filter: blur(24px);
+
+        padding: 0 0.75rem;
+        height: 2.25rem;
+        max-width: var(--max-width-input);
+        width: 100%;
+        transition:
+            box-shadow var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard);
+    }
+    .input-bar:focus-within {
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 40%, transparent);
+        border-color: var(--border);
+    }
+
+    .input-bar-field {
+        font-family: var(--font-mono, monospace);
+        font-size: var(--type-small);
+        background: transparent;
+        border: none;
+        outline: none;
+        flex: 1;
+        min-width: 0;
+    }
+    .input-bar-field::placeholder {
+        color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
+    }
+
+    /* ── Dashed well — muted container for adding/selecting items ── */
+    .dashed-well {
+        max-width: var(--max-width-input);
+        border-radius: var(--radius-2xl);
+        border: 2px dashed color-mix(in srgb, var(--primary) 30%, transparent);
+        background: color-mix(in srgb, var(--primary) 5%, transparent);
+        padding: 0.75rem;
+        display: grid;
+        gap: 0.5rem;
+    }
+
+    /* ── Hover lift — translate-y + shadow on hover (3 levels) ── */
+    .hover-lift {
+        transition-property: transform, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: ease;
+    }
+    .hover-lift:hover {
+        transform: translateY(var(--lift-sm));
+        box-shadow: var(--shadow-md);
+    }
+
+    .hover-lift-md {
+        transition-property: transform, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: ease;
+    }
+    .hover-lift-md:hover {
+        transform: translateY(var(--lift-md));
+        box-shadow: var(--shadow-md);
+    }
+
+    .hover-lift-lg {
+        transition-property: transform, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: ease;
+    }
+    .hover-lift-lg:hover {
+        transform: translateY(var(--lift-lg));
+        box-shadow: var(--shadow-lg);
+    }
+
+    /* ── Hover shadow lift — shadow-only hover ── */
+    .hover-shadow-lift {
+        transition-property: box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--spring-smooth);
+    }
+    .hover-shadow-lift:hover {
+        box-shadow: var(--shadow-xl);
+    }
+
+    /* ── Glass overlay — dark backdrop ── */
+    .glass-overlay {
+        background: rgb(0 0 0 / 0.6);
+        backdrop-filter: blur(4px);
+
+    }
+
+    /* ── Cartoon shadows — multi-layer offset shadow + border + translateY ── */
+    .shadow-cartoon-sm {
+        box-shadow:
+            -3px 2px 1px var(--shadow-cartoon-color),
+            0 3px 1px var(--shadow-cartoon-color),
+            -3px 3px 1px var(--shadow-cartoon-color-soft);
+        border: 2px solid var(--border);
+        transform: translateY(-1px);
+    }
+
+    .shadow-cartoon-md {
+        box-shadow:
+            -4px 3px 1px var(--shadow-cartoon-color),
+            0 4px 1px var(--shadow-cartoon-color),
+            -4px 4px 2px var(--shadow-cartoon-color-soft);
+        border: 2px solid var(--border);
+        transform: translateY(-1px);
+    }
+
+    .shadow-cartoon-lg {
+        box-shadow:
+            -6px 4px 1px var(--shadow-cartoon-color),
+            0 6px 1px var(--shadow-cartoon-color),
+            -6px 6px 2px var(--shadow-cartoon-color-soft);
+        border: 2px solid var(--border);
+        transform: translateY(-2px);
+    }
+
+    .shadow-cartoon-sm-hover {
+        box-shadow:
+            -4px 3px 1px var(--shadow-cartoon-color-hover),
+            0 4px 1px var(--shadow-cartoon-color-hover),
+            -4px 4px 2px var(--shadow-cartoon-color-hover-soft);
+        border: 2px solid var(--border);
+        transform: translateY(-2px);
+    }
+
+    /* ── Shimmer text — background gradient sweep over text ── */
+    .shimmer-text {
+        background: linear-gradient(
+            90deg,
+            currentColor 0%,
+            currentColor 40%,
+            rgba(255, 255, 255, 0.8) 50%,
+            currentColor 60%,
+            currentColor 100%
+        );
+        background-size: 200% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        animation: shimmer-sweep var(--shimmer-duration, 2000ms) ease-in-out infinite;
+    }
+
+    .dark .shimmer-text {
+        background: linear-gradient(
+            90deg,
+            currentColor 0%,
+            currentColor 40%,
+            rgba(255, 255, 255, 0.9) 50%,
+            currentColor 60%,
+            currentColor 100%
+        );
+        background-size: 200% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        animation: shimmer-sweep var(--shimmer-duration, 2000ms) ease-in-out infinite;
+    }
+
+    /* ── Rainbow gradients ── */
+    .rainbow-pastel {
+        background: linear-gradient(to right, var(--rainbow-pastel-red), var(--rainbow-pastel-orange), var(--rainbow-pastel-yellow), var(--rainbow-pastel-green), var(--rainbow-pastel-blue), var(--rainbow-pastel-indigo), var(--rainbow-pastel-violet));
+    }
+    .rainbow-vivid {
+        background: linear-gradient(to right, var(--rainbow-red), var(--rainbow-orange), var(--rainbow-yellow), var(--rainbow-green), var(--rainbow-blue), var(--rainbow-indigo), var(--rainbow-violet));
+    }
+
+    /* ── Progress gradient (rainbow) ── */
+    .progress-gradient {
+        background: linear-gradient(90deg, #ef4444, #f97316, #eab308, #22c55e, #06b6d0, #3b82f6, #9333ea);
+    }
+
+    /* ── Glassmorphic checkbox ── */
+    .checkbox-glass {
+        height: 1.25rem;
+        width: 1.25rem;
+        border-radius: var(--radius-lg);
+        border: 2px solid color-mix(in srgb, var(--border) 60%, transparent);
+        backdrop-filter: blur(4px);
+
+        box-shadow: var(--shadow-sm);
+        transition-property: background-color, border-color, transform, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--spring-snappy);
+    }
+
+    /* ── Divider utilities ── */
+    .divider-h {
+        height: 2px;
+        background: linear-gradient(
+            to right,
+            transparent 1%,
+            var(--border) 8%,
+            var(--border) 92%,
+            transparent 99%
+        );
+    }
+
+    .divider-h-tapered {
+        height: 2px;
+        background: linear-gradient(
+            to right,
+            transparent 3%,
+            var(--border) 15%,
+            var(--border) 85%,
+            transparent 97%
+        );
+    }
+
+    .divider-v {
+        width: 2px;
+        background: linear-gradient(
+            to bottom,
+            transparent 3%,
+            var(--border) 15%,
+            var(--border) 85%,
+            transparent 97%
+        );
+    }
+
+    /* ── Shake error ── */
+    .shake-error {
+        animation: shake 0.5s ease-in-out;
+    }
+
+    /* ── Input focus ring ── */
+    .input-focus {
+        outline: none;
+        transition-property: box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--spring-smooth);
+    }
+    .input-focus:focus-visible {
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent);
+        outline: none;
+    }
+
+    /* ── Active scale — press feedback ── */
+    .active-scale:active {
+        transform: scale(0.97);
+        transition-property: transform;
+        transition-duration: var(--duration-fast);
+    }
+
+    /* ── Stagger children — cascading entrance for list/grid items ── */
+    .stagger-children > * {
+        animation: fade-in var(--duration-normal) var(--spring-smooth, ease) backwards;
+        animation-delay: calc(var(--stagger-index, 0) * 50ms);
+    }
+    .stagger-children > *:nth-child(1) { --stagger-index: 0; }
+    .stagger-children > *:nth-child(2) { --stagger-index: 1; }
+    .stagger-children > *:nth-child(3) { --stagger-index: 2; }
+    .stagger-children > *:nth-child(4) { --stagger-index: 3; }
+    .stagger-children > *:nth-child(5) { --stagger-index: 4; }
+    .stagger-children > *:nth-child(6) { --stagger-index: 5; }
+    .stagger-children > *:nth-child(7) { --stagger-index: 6; }
+    .stagger-children > *:nth-child(8) { --stagger-index: 7; }
+    .stagger-children > *:nth-child(9) { --stagger-index: 8; }
+    .stagger-children > *:nth-child(10) { --stagger-index: 9; }
+    .stagger-children > *:nth-child(11) { --stagger-index: 10; }
+    .stagger-children > *:nth-child(12) { --stagger-index: 11; }
+
+    /* ── Scroll reveal — animate on viewport entry (zero JS) ── */
+    @supports (animation-timeline: view()) {
+        /* One-shot: fades in during entry, stays visible */
+        .scroll-reveal {
+            animation: fade-in linear both;
+            animation-timeline: view();
+            animation-range: entry 0% entry 100%;
+        }
+
+        /* Reversible: fades in on scroll down, fades out on scroll back up */
+        .scroll-reveal-reverse {
+            animation: fade-in linear both;
+            animation-timeline: view();
+            animation-range: entry 0% cover 50%;
+        }
+    }
+
+    /* ── Letter spacing hover spread ── */
+    .text-hover-spread {
+        letter-spacing: var(--tracking-tight);
+        transition: letter-spacing var(--duration-normal) var(--spring-smooth, ease);
+    }
+    .text-hover-spread:hover {
+        letter-spacing: var(--tracking-wide);
+    }
+
+    /* ── Disabled base state ── */
+    .disabled-base:disabled {
+        pointer-events: none;
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+
+    /* ── Card hover transitions ── */
+    .card-hover {
+        transition-property: color, background-color, border-color, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: ease;
+    }
+    .card-hover:hover {
+        border-color: color-mix(in srgb, var(--border) 50%, transparent);
+        background-color: color-mix(in srgb, var(--muted) 30%, transparent);
+    }
+
+    .card-hover-interactive {
+        transition-property: color, background-color, border-color, box-shadow;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: ease;
+    }
+    .card-hover-interactive:hover {
+        border-color: color-mix(in srgb, var(--primary) 30%, transparent);
+        background-color: color-mix(in srgb, var(--primary) 5%, transparent);
+    }
+
+    /* ── Sort button active state ── */
+    .sort-button-active {
+        background-color: color-mix(in srgb, var(--primary) 10%, transparent);
+        color: var(--primary);
+        border-color: color-mix(in srgb, var(--primary) 30%, transparent);
+    }
+
+    /* ── Heatmap color scale (10 levels, light mode) ── */
+    .heatmap-1 {
+        background-color: rgb(254 226 226);
+        color: rgb(127 29 29);
+    }
+    .heatmap-2 {
+        background-color: rgb(254 202 202);
+        color: rgb(127 29 29);
+    }
+    .heatmap-3 {
+        background-color: rgb(252 165 165);
+        color: rgb(127 29 29);
+    }
+    .heatmap-4 {
+        background-color: rgb(248 113 113);
+        color: rgb(127 29 29);
+    }
+    .heatmap-5 {
+        background-color: rgb(239 68 68);
+        color: rgb(220 38 38);
+    }
+    .heatmap-6 {
+        background-color: rgb(220 38 38);
+        color: rgb(254 226 226);
+    }
+    .heatmap-7 {
+        background-color: rgb(185 28 28);
+        color: rgb(254 226 226);
+    }
+    .heatmap-8 {
+        background-color: rgb(153 27 27);
+        color: rgb(254 226 226);
+    }
+    .heatmap-9 {
+        background-color: rgb(127 29 29);
+        color: rgb(254 226 226);
+    }
+    .heatmap-10 {
+        background-color: rgb(69 10 10);
+        color: rgb(254 226 226);
+    }
+
+    /* ── Heatmap color scale (dark mode) ── */
+    .dark .heatmap-1 {
+        background-color: rgb(30 10 10);
+        color: rgb(156 163 175);
+    }
+    .dark .heatmap-2 {
+        background-color: rgb(45 15 15);
+        color: rgb(209 213 219);
+    }
+    .dark .heatmap-3 {
+        background-color: rgb(69 10 10);
+        color: rgb(229 231 235);
+    }
+    .dark .heatmap-4 {
+        background-color: rgb(91 15 15);
+        color: rgb(243 244 246);
+    }
+    .dark .heatmap-5 {
+        background-color: rgb(127 29 29);
+        color: rgb(249 250 251);
+    }
+    .dark .heatmap-6 {
+        background-color: rgb(153 27 27);
+        color: rgb(254 226 226);
+    }
+    .dark .heatmap-7 {
+        background-color: rgb(185 28 28);
+        color: rgb(254 242 242);
+    }
+    .dark .heatmap-8 {
+        background-color: rgb(220 38 38);
+        color: rgb(255 251 251);
+    }
+    .dark .heatmap-9 {
+        background-color: rgb(239 68 68);
+        color: rgb(255 255 255);
+    }
+    .dark .heatmap-10 {
+        background-color: rgb(248 113 113);
+        color: rgb(255 255 255);
+    }
+}
+
+@keyframes shimmer {
+    0% { background-position: 250% 0; }
+    100% { background-position: -250% 0; }
+}
+
+/* ── Reduced motion: nuanced — preserve opacity, remove spatial motion ── */
+@media (prefers-reduced-motion: reduce) {
+    *:not([data-allow-motion]) {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+    }
+
+    /* Keep opacity transitions (safe, non-spatial) but shorten */
+    *:not([data-allow-motion]) {
+        transition-duration: 0.1s !important;
+        transition-property: opacity, color, background-color, border-color, box-shadow !important;
+    }
+}
+
+/* ── No-transition class (for theme switches, etc.) ── */
+html.no-transition,
+html.no-transition *,
+html.no-transition *::before,
+html.no-transition *::after {
+    transition-duration: 0s !important;
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

package/src/utils/index.ts

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